diff --git a/Thorfile b/Thorfile index 32bc9056..6c0d7498 100644 --- a/Thorfile +++ b/Thorfile @@ -6,7 +6,7 @@ class Build < Thor FILES = [ "src/Global.js", "src/util/Type.js", "src/Canvas.js", "src/util/Tween.js", "src/util/Transform.js", "src/util/Collection.js", "src/filters/Grayscale.js", "src/filters/Brighten.js", "src/filters/Invert.js", - "src/Animation.js", "src/Node.js", "src/DragAndDrop.js", "src/Transition.js", "src/Container.js", "src/Stage.js", "src/Layer.js", "src/Group.js", "src/Shape.js", + "src/Node.js", "src/Animation.js", "src/DragAndDrop.js", "src/Transition.js", "src/Container.js", "src/Shape.js", "src/Stage.js", "src/Layer.js", "src/Group.js", "src/shapes/Rect.js", "src/shapes/Circle.js", "src/shapes/Wedge.js", "src/shapes/Ellipse.js", "src/shapes/Image.js", "src/shapes/Polygon.js", "src/shapes/Text.js", "src/shapes/Line.js", "src/shapes/Spline.js", "src/shapes/Blob.js", "src/shapes/Sprite.js", "src/shapes/Star.js", "src/shapes/RegularPolygon.js", "src/shapes/Path.js", "src/shapes/TextPath.js" ] diff --git a/src/Animation.js b/src/Animation.js index fff740f2..681b0b3b 100644 --- a/src/Animation.js +++ b/src/Animation.js @@ -138,4 +138,10 @@ var raf = Kinetic.DD && Kinetic.DD.moving ? this.fixedRequestAnimFrame : RAF; raf(callback); }; + + var moveTo = Kinetic.Node.prototype.moveTo; + Kinetic.Node.prototype.moveTo = function(container) { + moveTo.call(this, container); + }; + })(); diff --git a/src/DragAndDrop.js b/src/DragAndDrop.js index c4aa1a0d..29ac99e9 100644 --- a/src/DragAndDrop.js +++ b/src/DragAndDrop.js @@ -1,4 +1,6 @@ (function() { + var dd, html = document.getElementsByTagName('html')[0]; + Kinetic.DD = { anim: new Kinetic.Animation(), moving: false, @@ -7,8 +9,17 @@ y: 0 } }; + + dd = Kinetic.DD; + + //html.addEventListener('mousedown', _htmlMouseup); + + Kinetic.getNodeDragging = function() { + return dd.node; + }; + Kinetic.DD._setupDragLayerAndGetContainer = function(no) { - var dd = Kinetic.DD, stage = no.getStage(), nodeType = no.nodeType, lastContainer, group; + var stage = no.getStage(), nodeType = no.nodeType, lastContainer, group; // re-construct node tree no._eachAncestorReverse(function(node) { @@ -40,7 +51,7 @@ stage.dragLayer.getCanvas().getElement().className = 'kinetic-drag-and-drop-layer'; }; Kinetic.DD._drag = function(evt) { - var dd = Kinetic.DD, node = dd.node; + var node = dd.node; if(node) { var pos = node.getStage().getUserPosition(); @@ -70,7 +81,7 @@ } }; Kinetic.DD._endDrag = function(evt) { - var dd = Kinetic.DD, node = dd.node, nodeType, stage; + var node = dd.node, nodeType, stage; if(node) { nodeType = node.nodeType, stage = node.getStage(); node.setListening(true); @@ -98,8 +109,8 @@ delete dd.node; dd.anim.stop(); }; - Kinetic.Node.prototype._startDrag = function() { - var that = this, dd = Kinetic.DD, stage = this.getStage(), pos = stage.getUserPosition(); + Kinetic.Node.prototype._startDrag = function(evt) { + var that = this, stage = this.getStage(), pos = stage.getUserPosition(); if(pos) { var m = this.getTransform().getTranslation(), ap = this.getAbsolutePosition(), nodeType = this.nodeType, container; @@ -164,13 +175,17 @@ * @methodOf Kinetic.Node.prototype */ Kinetic.Node.prototype.isDragging = function() { - var dd = Kinetic.DD; return dd.node && dd.node._id === this._id && dd.moving; }; Kinetic.Node.prototype._listenDrag = function() { this._dragCleanup(); - this.on('mousedown.kinetic touchstart.kinetic', this._startDrag); + var that = this; + this.on('mousedown.kinetic touchstart.kinetic', function(evt) { + if(!Kinetic.getNodeDragging()) { + that._startDrag(evt); + } + }); }; Kinetic.Node.prototype._dragChange = function() { diff --git a/src/Stage.js b/src/Stage.js index c883509c..d2b01d65 100644 --- a/src/Stage.js +++ b/src/Stage.js @@ -377,8 +377,9 @@ } }, _mousedown: function(evt) { + var obj, dd = Kinetic.DD; this._setUserPosition(evt); - var obj = this.getIntersection(this.getUserPosition()); + obj = this.getIntersection(this.getUserPosition()); if(obj && obj.shape) { var shape = obj.shape; this.clickStart = true; @@ -386,8 +387,8 @@ } //init stage drag and drop - if(Kinetic.DD && this.attrs.draggable) { - this._startDrag(); + if(dd && this.attrs.draggable && !dd.node) { + this._startDrag(evt); } }, _mouseup: function(evt) { @@ -425,9 +426,11 @@ this.clickStart = false; }, _touchstart: function(evt) { + var obj, dd = Kinetic.DD; + this._setUserPosition(evt); evt.preventDefault(); - var obj = this.getIntersection(this.getUserPosition()); + obj = this.getIntersection(this.getUserPosition()); if(obj && obj.shape) { var shape = obj.shape; @@ -435,11 +438,9 @@ shape._handleEvent('touchstart', evt); } - /* - * init stage drag and drop - */ - if(Kinetic.DD && this.attrs.draggable) { - this._startDrag(); + // init stage drag and drop + if(dd && this.attrs.draggable && !dd.node) { + this._startDrag(evt); } }, _touchend: function(evt) { diff --git a/tests/js/manualTests.js b/tests/js/manualTests.js index 45114200..3dd65a3c 100644 --- a/tests/js/manualTests.js +++ b/tests/js/manualTests.js @@ -1318,7 +1318,8 @@ Test.Modules.DRAG_AND_DROP = { offset: { x: 50, y: 25 - } + }, + dragOnTop: true }); group.add(rect); @@ -1327,8 +1328,44 @@ Test.Modules.DRAG_AND_DROP = { var anim = new Kinetic.Animation(function() { rect.rotate(0.01); - }, layer); anim.start(); + }, + 'stage and shape draggable': function(containerId) { + var stage = new Kinetic.Stage({ + container: containerId, + width: 578, + height: 200, + draggable: true + }); + var layer = new Kinetic.Layer(); + var group = new Kinetic.Group(); + + var rect = new Kinetic.Rect({ + x: 150, + y: 100, + width: 100, + height: 50, + fill: 'red', + stroke: 'black', + strokeWidth: 4, + draggable: true, + }); + + var rect2 = new Kinetic.Rect({ + x: 300, + y: 100, + width: 100, + height: 50, + fill: 'yellow', + stroke: 'black', + strokeWidth: 4, + draggable: true, + }); + + layer.add(rect).add(rect2); + stage.add(layer); + + } };