From 5cda46be690bebd7bec204c2e9f4c3e89c6901b1 Mon Sep 17 00:00:00 2001 From: Eric Rowell Date: Sat, 12 Jan 2013 23:39:56 -0800 Subject: [PATCH] drag and drop layer is now created on stage instantiation, and is removed and added as needed --- Thorfile | 3 ++- src/DragAndDrop.js | 42 +++++++++++++++++++++++--------------- src/Stage.js | 10 ++++++--- tests/js/unit/nodeTests.js | 1 + 4 files changed, 36 insertions(+), 20 deletions(-) diff --git a/Thorfile b/Thorfile index fd3069e0..31009ad3 100644 --- a/Thorfile +++ b/Thorfile @@ -6,7 +6,8 @@ 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", + # The following order must remain intact due to dependency tree + "src/Animation.js", "src/Node.js", "src/Transition.js", "src/Container.js", "src/Stage.js", "src/DragAndDrop.js", "src/Layer.js", "src/Group.js", "src/Shape.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/DragAndDrop.js b/src/DragAndDrop.js index 0234d842..eb9bb76e 100644 --- a/src/DragAndDrop.js +++ b/src/DragAndDrop.js @@ -26,18 +26,17 @@ // Group or Shape node types else { if(this.getDragOnTop()) { - this._buildTopLayer(); - dd.anim.node = dd.topLayer; + this._buildDragLayer(); + dd.anim.node = stage.dragLayer; dd.prevParent = this.getParent(); // WARNING: it's important to delay the moveTo operation, // layer redraws, and anim.start() until after the method execution // has completed or else there will be a flicker on mobile devices // due to the time it takes to append the dd canvas to the DOM setTimeout(function() { - that.moveTo(dd.topLayer); + that.moveTo(stage.dragLayer); dd.prevParent.getLayer().draw(); - dd.topLayer.show(); - dd.topLayer.draw(); + stage.dragLayer.draw(); dd.anim.start(); }, 0); } @@ -48,22 +47,20 @@ } } }; - Kinetic.Node.prototype._buildTopLayer = function() { + Kinetic.Node.prototype._buildDragLayer = function() { var dd = Kinetic.DD, stage = this.getStage(), nodeType = this.nodeType, lastContainer, group; // re-construct node tree this._eachAncestorReverse(function(node) { if(node.nodeType === 'Layer') { - dd.topLayer = new Kinetic.Layer({ + stage.dragLayer.setAttrs({ x: node.getX(), y: node.getY(), scale: node.getScale(), - rotation: node.getRotation(), - visible: false + rotation: node.getRotation() }); - lastContainer = dd.topLayer; - stage.add(dd.topLayer); - dd.topLayer.getCanvas().getElement().className = 'kinetic-drag-and-drop-layer'; + lastContainer = stage.dragLayer; + stage.add(stage.dragLayer); } else if(node.nodeType === 'Group') { group = new Kinetic.Group({ @@ -78,6 +75,12 @@ } }); }; + Kinetic.Stage.prototype._initDragLayer = function() { + var dd = Kinetic.DD, stage = this.getStage(), nodeType = this.nodeType, lastContainer, group; + + this.dragLayer = new Kinetic.Layer(); + stage.dragLayer.getCanvas().getElement().className = 'kinetic-drag-and-drop-layer'; + }; Kinetic.DD._drag = function(evt) { var dd = Kinetic.DD, node = dd.node; @@ -104,14 +107,14 @@ node._handleEvent('dragstart', evt); } - // execute user defined ondragmove if defined + // execute ondragmove if defined node._handleEvent('dragmove', evt); } }; Kinetic.DD._endDrag = function(evt) { var dd = Kinetic.DD, node = dd.node; if(node) { - var nodeType = node.nodeType; + var nodeType = node.nodeType, stage = node.getStage(); node.setListening(true); if(nodeType === 'Stage') { node.draw(); @@ -119,9 +122,8 @@ else { if((nodeType === 'Group' || nodeType === 'Shape') && node.getDragOnTop() && dd.prevParent) { node.moveTo(dd.prevParent); - dd.topLayer.remove(); + stage.dragLayer.remove(); dd.prevParent = null; - dd.topLayer = null; } node.getLayer().draw(); @@ -232,4 +234,12 @@ * @name getDragOnTop * @methodOf Kinetic.Node.prototype */ + + // because we're using a high performance inheritance pattern, we will need to re + // extend stage and container so that they pick up the drag and drop methods + // the build file defines Layer, Group, and Shappe after the DD definition, + // so these classes have not been extended yet and will automatically pick up + // the drag and drop methods + Kinetic.Global.extend(Kinetic.Stage, Kinetic.Container); + Kinetic.Global.extend(Kinetic.Container, Kinetic.Node); })(); diff --git a/src/Stage.js b/src/Stage.js index b0cef568..d12523b7 100644 --- a/src/Stage.js +++ b/src/Stage.js @@ -5,8 +5,8 @@ * @augments Kinetic.Container * @param {Object} config * @param {String|DomElement} config.container Container id or DOM element - * - * + * + * * @param {Number} [config.x] * @param {Number} [config.y] * @param {Number} [config.width] @@ -48,6 +48,10 @@ Kinetic.Global.stages.push(this); this._addId(this); this._addName(this); + + if(Kinetic.DD) { + this._initDragLayer(); + } }, /** * set container dom element which contains the stage wrapper div element @@ -216,7 +220,7 @@ drawLayer(0); }, /** - * converts stage into an image. + * converts stage into an image. * @name toImage * @methodOf Kinetic.Stage.prototype * @param {Object} config diff --git a/tests/js/unit/nodeTests.js b/tests/js/unit/nodeTests.js index a1a16e98..2d9d37c0 100644 --- a/tests/js/unit/nodeTests.js +++ b/tests/js/unit/nodeTests.js @@ -1936,6 +1936,7 @@ Test.Modules.NODE = { stage.add(layer); test(stage.getAbsoluteZIndex() === 0, 'stage abs zindex should be 0'); + console.log(layer.getAbsoluteZIndex()); test(layer.getAbsoluteZIndex() === 1, 'layer abs zindex should be 1'); test(group1.getAbsoluteZIndex() === 2, 'group1 abs zindex should be 2'); test(group2.getAbsoluteZIndex() === 3, 'group2 abs zindex should be 3');