diff --git a/src/DragAndDrop.js b/src/DragAndDrop.js index 14acb139..fdf20ded 100644 --- a/src/DragAndDrop.js +++ b/src/DragAndDrop.js @@ -15,19 +15,7 @@ node = dd.node; if(node) { - var pos = node.getStage().getPointerPosition(); - var dbf = node.getDragBoundFunc(); - - var newNodePos = { - x: pos.x - dd.offset.x, - y: pos.y - dd.offset.y - }; - - if(dbf !== undefined) { - newNodePos = dbf.call(node, newNodePos, evt); - } - - node.setAbsolutePosition(newNodePos); + node._setDragPosition(evt); if(!dd.isDragging) { dd.isDragging = true; @@ -85,11 +73,9 @@ */ Kinetic.Node.prototype.startDrag = function() { var dd = Kinetic.DD, - that = this, stage = this.getStage(), layer = this.getLayer(), pos = stage.getPointerPosition(), - m = this.getTransform().getTranslation(), ap = this.getAbsolutePosition(); if(pos) { @@ -102,9 +88,27 @@ dd.offset.y = pos.y - ap.y; dd.anim.setLayers(layer || this.getLayers()); dd.anim.start(); + + this._setDragPosition(); } }; + Kinetic.Node.prototype._setDragPosition = function(evt) { + var dd = Kinetic.DD + pos = this.getStage().getPointerPosition(), + dbf = this.getDragBoundFunc(), + newNodePos = { + x: pos.x - dd.offset.x, + y: pos.y - dd.offset.y + }; + + if(dbf !== undefined) { + newNodePos = dbf.call(this, newNodePos, evt); + } + + this.setAbsolutePosition(newNodePos); + }; + /** * stop drag and drop * @method diff --git a/src/Node.js b/src/Node.js index c915427d..82ac865d 100644 --- a/src/Node.js +++ b/src/Node.js @@ -530,11 +530,11 @@ * @memberof Kinetic.Node.prototype */ getAbsolutePosition: function() { - var trans = this.getAbsoluteTransform(), + var absoluteTransform = this.getAbsoluteTransform(), o = this.getOffset(); - trans.translate(o.x, o.y); - return trans.getTranslation(); + absoluteTransform.translate(o.x, o.y); + return absoluteTransform.getTranslation(); }, /** * set absolute position @@ -568,6 +568,44 @@ this._setTransform(trans); return this; }, + _setTransform: function(trans) { + var key; + + for(key in trans) { + this.attrs[key] = trans[key]; + } + + this._clearCache(TRANSFORM); + this._clearSelfAndChildrenCache(ABSOLUTE_TRANSFORM); + }, + _clearTransform: function() { + var trans = { + x: this.getX(), + y: this.getY(), + rotation: this.getRotation(), + scaleX: this.getScaleX(), + scaleY: this.getScaleY(), + offsetX: this.getOffsetX(), + offsetY: this.getOffsetY(), + skewX: this.getSkewX(), + skewY: this.getSkewY() + }; + + this.attrs.x = 0; + this.attrs.y = 0; + this.attrs.rotation = 0; + this.attrs.scaleX = 1; + this.attrs.scaleY = 1; + this.attrs.offsetX = 0; + this.attrs.offsetY = 0; + this.attrs.skewX = 0; + this.attrs.skewY = 0; + + this._clearCache(TRANSFORM); + this._clearSelfAndChildrenCache(ABSOLUTE_TRANSFORM); + + return trans; + }, /** * move node by an amount relative to its current position * @method @@ -1086,47 +1124,6 @@ } } }, - /** - * clears the transform and returns the original transform - */ - _clearTransform: function() { - var trans = { - x: this.getX(), - y: this.getY(), - rotation: this.getRotation(), - scaleX: this.getScaleX(), - scaleY: this.getScaleY(), - offsetX: this.getOffsetX(), - offsetY: this.getOffsetY(), - skewX: this.getSkewX(), - skewY: this.getSkewY() - }; - - this.attrs.x = 0; - this.attrs.y = 0; - this.attrs.rotation = 0; - this.attrs.scaleX = 1; - this.attrs.scaleY = 1; - this.attrs.offsetX = 0; - this.attrs.offsetY = 0; - this.attrs.skewX = 0; - this.attrs.skewY = 0; - - this._clearCache(TRANSFORM); - this._clearSelfAndChildrenCache(ABSOLUTE_TRANSFORM); - - return trans; - }, - _setTransform: function(trans) { - var key; - - for(key in trans) { - this.attrs[key] = trans[key]; - } - - this._clearCache(TRANSFORM); - this._clearSelfAndChildrenCache(ABSOLUTE_TRANSFORM); - }, _fireBeforeChangeEvent: function(attr, oldVal, newVal) { this._fire(BEFORE + Kinetic.Util._capitalize(attr) + CHANGE, { oldVal: oldVal, diff --git a/src/Util.js b/src/Util.js index 697cbc4c..2471378d 100644 --- a/src/Util.js +++ b/src/Util.js @@ -235,6 +235,24 @@ */ getMatrix: function() { return this.m; + }, + /** + * set to absolute position via translation + * @method + * @memberof Kinetic.Transform.prototype + * @author ericdrowell + */ + setAbsolutePosition: function(x, y) { + var m0 = this.m[0], + m1 = this.m[1], + m2 = this.m[2], + m3 = this.m[3], + m4 = this.m[4], + m5 = this.m[5], + yt = ((m0 * (y - m5)) - (m1 * (x - m4))) / ((m0 * m3) - (m1 * m2)), + xt = (x - m4 - (m2 * yt)) / m0; + + this.translate(xt, yt); } }; })(); diff --git a/tests/js/manualTests.js b/tests/js/manualTests.js index c0ca5ba1..591b4b43 100644 --- a/tests/js/manualTests.js +++ b/tests/js/manualTests.js @@ -979,7 +979,7 @@ Test.Modules.DRAG_AND_DROP = { stage.add(layer); layer.draw(); }, - 'drag and drop elastic star with shadow': function(containerId) { + 'drag and drop star with shadow': function(containerId) { var stage = new Kinetic.Stage({ container: containerId, width: 578, @@ -988,8 +988,8 @@ Test.Modules.DRAG_AND_DROP = { var layer = new Kinetic.Layer(); var star = new Kinetic.Star({ - x: 200, - y: 100, + x: 260, + y: 160, numPoints: 5, innerRadius: 40, outerRadius: 70, @@ -1003,6 +1003,7 @@ Test.Modules.DRAG_AND_DROP = { x: 5, y: 5 }, + offset: 60, draggable: true, name: 'star' }); @@ -1012,8 +1013,6 @@ Test.Modules.DRAG_AND_DROP = { star.setLineJoin('bevel'); layer.draw(); - var trans = null; - showHit(layer); }, @@ -1415,10 +1414,7 @@ Test.Modules.DRAG_AND_DROP = { }); var layer = new Kinetic.Layer(); var group = new Kinetic.Group({ - scale: { - x: 2, - y: 2 - } + scale: 2 }); var Circle = new Kinetic.Circle({ @@ -1483,7 +1479,6 @@ Test.Modules.DRAG_AND_DROP = { fill: 'red', stroke: 'black', strokeWidth: 4, - draggable: true, rotationDeg: 60, scale: { x: 2, @@ -1492,11 +1487,12 @@ Test.Modules.DRAG_AND_DROP = { offset: { x: 50, y: 25 - } + }, + draggable: true }); group.add(rect); - layer.add(group); + layer.add(rect); stage.add(bgLayer); stage.add(layer);