refactored drag and drop a bit and fixed a dependency bug

Thorfile

@@ -6,8 +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", 
-    # The following order must remain intact due to dependency tree
+    "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/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"       
   ]
   

src/DragAndDrop.js

@@ -7,48 +7,6 @@
             y: 0
         }
     };
-    Kinetic.Node.prototype._startDrag = function() {
-        var that = this, dd = Kinetic.DD, stage = this.getStage(), pos = stage.getUserPosition();
-
-        if(pos) {
-            var m = this.getTransform().getTranslation(), ap = this.getAbsolutePosition(), nodeType = this.nodeType, container;
-
-            dd.node = this;
-            dd.offset.x = pos.x - ap.x;
-            dd.offset.y = pos.y - ap.y;
-
-            // Stage and Layer node types
-            if(nodeType === 'Stage' || nodeType === 'Layer') {
-                dd.anim.node = this;
-                dd.anim.start();
-            }
-
-            // Group or Shape node types
-            else {
-                if(this.getDragOnTop()) {
-                    container = dd._setupDragLayerAndGetContainer(this);
-                    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() {
-                        if(dd.node) {
-                            that.moveTo(container);
-                            dd.prevParent.getLayer().draw();
-                            stage.dragLayer.draw();
-                            dd.anim.start();
-                        }
-                    }, 0);
-                }
-                else {
-                    dd.anim.node = this.getLayer();
-                    dd.anim.start();
-                }
-            }
-        }
-    };
     Kinetic.DD._setupDragLayerAndGetContainer = function(no) {
         var dd = Kinetic.DD, stage = no.getStage(), nodeType = no.nodeType, lastContainer, group;
 
@@ -77,10 +35,8 @@
         });
         return lastContainer;
     };
-    Kinetic.Stage.prototype._initDragLayer = function() {
+    Kinetic.DD._initDragLayer = function(stage) {
-        var dd = Kinetic.DD, stage = this.getStage(), nodeType = this.nodeType, lastContainer, group;
+        stage.dragLayer = new Kinetic.Layer();
-
-        this.dragLayer = new Kinetic.Layer();
         stage.dragLayer.getCanvas().getElement().className = 'kinetic-drag-and-drop-layer';
     };
     Kinetic.DD._drag = function(evt) {
@@ -142,6 +98,48 @@
         delete dd.node;
         dd.anim.stop();
     };
+    Kinetic.Node.prototype._startDrag = function() {
+        var that = this, dd = Kinetic.DD, stage = this.getStage(), pos = stage.getUserPosition();
+
+        if(pos) {
+            var m = this.getTransform().getTranslation(), ap = this.getAbsolutePosition(), nodeType = this.nodeType, container;
+
+            dd.node = this;
+            dd.offset.x = pos.x - ap.x;
+            dd.offset.y = pos.y - ap.y;
+
+            // Stage and Layer node types
+            if(nodeType === 'Stage' || nodeType === 'Layer') {
+                dd.anim.node = this;
+                dd.anim.start();
+            }
+
+            // Group or Shape node types
+            else {
+                if(this.getDragOnTop()) {
+                    container = dd._setupDragLayerAndGetContainer(this);
+                    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() {
+                        if(dd.node) {
+                            that.moveTo(container);
+                            dd.prevParent.getLayer().draw();
+                            stage.dragLayer.draw();
+                            dd.anim.start();
+                        }
+                    }, 0);
+                }
+                else {
+                    dd.anim.node = this.getLayer();
+                    dd.anim.start();
+                }
+            }
+        }
+    };
     /**
      * set draggable
      * @name setDraggable
@@ -236,12 +234,4 @@
      * @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);
 })();

src/Stage.js

@@ -33,6 +33,7 @@
 
     Kinetic.Stage.prototype = {
         _initStage: function(config) {
+        	var dd = Kinetic.DD;
             this.setDefaultAttrs({
                 width: 400,
                 height: 200
@@ -47,8 +48,8 @@
             this._bindContentEvents();
             Kinetic.Global.stages.push(this);
 
-            if(Kinetic.DD) {
+            if(dd) {
-                this._initDragLayer();
+                dd._initDragLayer(this);
             }
         },
         /**