updated build file to also minify modules separately for custom builds. Started work on decoupling Animation and DragAndDrop logic from other modules

src/Animation.js

@@ -1,6 +1,3 @@
-///////////////////////////////////////////////////////////////////////
-//  Animation
-///////////////////////////////////////////////////////////////////////
 /**
  * Stage constructor.  A stage is used to contain multiple layers and handle
  * animations

src/Container.js

@@ -1,6 +1,3 @@
-///////////////////////////////////////////////////////////////////////
-//  Container
-///////////////////////////////////////////////////////////////////////
 /**
  * Container constructor.  Containers are used to contain nodes or other containers
  * @constructor

src/DragAndDrop.js

@@ -0,0 +1,160 @@
+Kinetic.Global.dragAnim = new Kinetic.Animation();
+
+Kinetic.Global._endDrag = function(evt) {
+    var go = Kinetic.Global;
+    var node = go.drag.node;
+    if(node) {
+        if(node.nodeType === 'Stage') {
+            node.draw();
+        }
+        else {
+            node.getLayer().draw();
+        }
+
+        // handle dragend
+        if(go.drag.moving) {
+            go.drag.moving = false;
+            node._handleEvent('dragend', evt);
+        }
+    }
+    go.drag.node = null;
+    go.dragAnim.stop();
+};
+
+Kinetic.Global._startDrag = function(evt) {
+    var go = Kinetic.Global;
+    var node = go.drag.node;
+
+    if(node) {
+        var pos = node.getStage().getUserPosition();
+        var dbf = node.attrs.dragBoundFunc;
+
+        var newNodePos = {
+            x: pos.x - go.drag.offset.x,
+            y: pos.y - go.drag.offset.y
+        };
+
+        if(dbf !== undefined) {
+            newNodePos = dbf.call(node, newNodePos, evt);
+        }
+
+        node.setAbsolutePosition(newNodePos);
+
+        if(!go.drag.moving) {
+            go.drag.moving = true;
+            // execute dragstart events if defined
+            go.drag.node._handleEvent('dragstart', evt);
+        }
+
+        // execute user defined ondragmove if defined
+        go.drag.node._handleEvent('dragmove', evt);
+    }
+};
+/**
+ * set draggable
+ * @name setDraggable
+ * @methodOf Kinetic.Node.prototype
+ * @param {String} draggable
+ */
+Kinetic.Node.prototype.setDraggable = function(draggable) {
+    this.setAttr('draggable', draggable);
+    this._dragChange();
+};
+/**
+ * get draggable
+ * @name getDraggable
+ * @methodOf Kinetic.Node.prototype
+ */
+Kinetic.Node.prototype.getDraggable = function() {
+    return this.attrs.draggable;
+};
+/**
+ * determine if node is currently in drag and drop mode
+ * @name isDragging
+ * @methodOf Kinetic.Node.prototype
+ */
+Kinetic.Node.prototype.isDragging = function() {
+    var go = Kinetic.Global;
+    return go.drag.node && go.drag.node._id === this._id && go.drag.moving;
+};
+
+Kinetic.Node.prototype._listenDrag = function() {
+    this._dragCleanup();
+    var go = Kinetic.Global;
+    var that = this;
+    this.on('mousedown.kinetic touchstart.kinetic', function(evt) {
+        that._initDrag();
+    });
+};
+Kinetic.Node.prototype._initDrag = function() {
+    var go = Kinetic.Global;
+    var stage = this.getStage();
+    var pos = stage.getUserPosition();
+
+    if(pos) {
+        var m = this.getTransform().getTranslation();
+        var am = this.getAbsoluteTransform().getTranslation();
+        var ap = this.getAbsolutePosition();
+        go.drag.node = this;
+        go.drag.offset.x = pos.x - ap.x;
+        go.drag.offset.y = pos.y - ap.y;
+
+        /*
+         * if dragging and dropping the stage,
+         * draw all of the layers
+         */
+        if(this.nodeType === 'Stage') {
+            go.dragAnim.node = this;
+        }
+        else {
+            go.dragAnim.node = this.getLayer();
+        }
+        go.dragAnim.start();
+    }
+};
+Kinetic.Node.prototype._dragChange = function() {
+    if(this.attrs.draggable) {
+        this._listenDrag();
+    }
+    else {
+        // remove event listeners
+        this._dragCleanup();
+
+        /*
+         * force drag and drop to end
+         * if this node is currently in
+         * drag and drop mode
+         */
+        var stage = this.getStage();
+        var go = Kinetic.Global;
+        if(stage && go.drag.node && go.drag.node._id === this._id) {
+            stage._endDrag();
+        }
+    }
+};
+Kinetic.Node.prototype._dragCleanup = function() {
+    this.off('mousedown.kinetic');
+    this.off('touchstart.kinetic');
+};
+/**
+ * get draggable.  Alias of getDraggable()
+ * @name isDraggable
+ * @methodOf Kinetic.Node.prototype
+ */
+Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
+
+Kinetic.Node.addGettersSetters(Kinetic.Node, ['dragBoundFunc']);
+
+/**
+ * set drag bound function.  This is used to override the default
+ *  drag and drop position
+ * @name setDragBoundFunc
+ * @methodOf Kinetic.Node.prototype
+ * @param {Function} dragBoundFunc
+ */
+
+/**
+ * get dragBoundFunc
+ * @name getDragBoundFunc
+ * @methodOf Kinetic.Node.prototype
+ */

src/Global.js

@@ -1,6 +1,31 @@
-///////////////////////////////////////////////////////////////////////
-//  Global
-///////////////////////////////////////////////////////////////////////
+/**
+ * KineticJS JavaScript Library @version
+ * http://www.kineticjs.com/
+ * Copyright 2012, Eric Rowell
+ * Licensed under the MIT or GPL Version 2 licenses.
+ * Date: @date
+ *
+ * Copyright (C) 2011 - 2012 by Eric Rowell
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
 /**
  * Kinetic Namespace
  * @namespace
@@ -17,7 +42,6 @@ Kinetic.Global = {
     tempNodes: {},
     //shapes hash.  rgb keys and shape values
     shapes: {},
-    maxDragTimeInterval: 20,
     drag: {
         moving: false,
         offset: {

src/Group.js

@@ -1,6 +1,3 @@
-///////////////////////////////////////////////////////////////////////
-//  Group
-///////////////////////////////////////////////////////////////////////
 /**
  * Group constructor.  Groups are used to contain shapes or other groups.
  * @constructor

src/Layer.js

@@ -1,6 +1,3 @@
-///////////////////////////////////////////////////////////////////////
-//  Layer
-///////////////////////////////////////////////////////////////////////
 /**
  * Layer constructor.  Layers are tied to their own canvas element and are used
  * to contain groups or shapes

src/Node.js

@@ -1,6 +1,3 @@
-///////////////////////////////////////////////////////////////////////
-//  Node
-///////////////////////////////////////////////////////////////////////
 /**
  * Node constructor.  Nodes are entities that can be transformed, layered,
  * and have events bound to them.  They are the building blocks of a KineticJS
@@ -52,13 +49,9 @@ Kinetic.Node.prototype = {
 
         this.setDefaultAttrs(this.defaultNodeAttrs);
         this.eventListeners = {};
-        this.transAnim = new Kinetic.Animation();
         this.setAttrs(config);
 
         // bind events
-        this.on('draggableChange.kinetic', function() {
-            this._onDraggableChange();
-        });
         var that = this;
         this.on('idChange.kinetic', function(evt) {
             var stage = that.getStage();
@@ -74,8 +67,6 @@ Kinetic.Node.prototype = {
                 stage._addName(that);
             }
         });
-
-        this._onDraggableChange();
     },
     /**
      * bind events to the node.  KineticJS supports mouseover, mousemove,
@@ -523,15 +514,6 @@ Kinetic.Node.prototype = {
         }
         return absOpacity;
     },
-    /**
-     * determine if node is currently in drag and drop mode
-     * @name isDragging
-     * @methodOf Kinetic.Node.prototype
-     */
-    isDragging: function() {
-        var go = Kinetic.Global;
-        return go.drag.node && go.drag.node._id === this._id && go.drag.moving;
-    },
     /**
      * move node to another container
      * @name moveTo
@@ -615,51 +597,6 @@ Kinetic.Node.prototype = {
     simulate: function(eventType) {
         this._handleEvent(eventType, {});
     },
-    /**
-     * transition node to another state.  Any property that can accept a real
-     *  number can be transitioned, including x, y, rotation, opacity, strokeWidth,
-     *  radius, scale.x, scale.y, offset.x, offset.y, etc.
-     * @name transitionTo
-     * @methodOf Kinetic.Node.prototype
-     * @param {Object} config
-     * @config {Number} duration duration that the transition runs in seconds
-     * @config {String} [easing] easing function.  can be linear, ease-in, ease-out, ease-in-out,
-     *  back-ease-in, back-ease-out, back-ease-in-out, elastic-ease-in, elastic-ease-out,
-     *  elastic-ease-in-out, bounce-ease-out, bounce-ease-in, bounce-ease-in-out,
-     *  strong-ease-in, strong-ease-out, or strong-ease-in-out
-     *  linear is the default
-     * @config {Function} [callback] callback function to be executed when
-     *  transition completes
-     */
-    transitionTo: function(config) {
-        /*
-         * create new transition
-         */
-        var node = this.nodeType === 'Stage' ? this : this.getLayer();
-        var that = this;
-        var trans = new Kinetic.Transition(this, config);
-
-        this.transAnim.func = function() {
-            trans._onEnterFrame();
-        };
-        this.transAnim.node = node;
-
-        // subscribe to onFinished for first tween
-        trans.onFinished = function() {
-            // remove animation
-            that.transAnim.stop();
-            that.transAnim.node.draw();
-
-            // callback
-            if(config.callback) {
-                config.callback();
-            }
-        };
-        // auto start
-        trans.start();
-        this.transAnim.start();
-        return trans;
-    },
     /**
      * get absolute transform of the node which takes into
      *  account its parent transforms
@@ -944,67 +881,6 @@ Kinetic.Node.prototype = {
             this._fireChangeEvent(key, oldVal, val);
         }
     },
-    _listenDrag: function() {
-        this._dragCleanup();
-        var go = Kinetic.Global;
-        var that = this;
-        this.on('mousedown.kinetic touchstart.kinetic', function(evt) {
-            that._initDrag();
-        });
-    },
-    _initDrag: function() {
-        var go = Kinetic.Global;
-        var stage = this.getStage();
-        var pos = stage.getUserPosition();
-
-        if(pos) {
-            var m = this.getTransform().getTranslation();
-            var am = this.getAbsoluteTransform().getTranslation();
-            var ap = this.getAbsolutePosition();
-            go.drag.node = this;
-            go.drag.offset.x = pos.x - ap.x;
-            go.drag.offset.y = pos.y - ap.y;
-
-            /*
-             * if dragging and dropping the stage,
-             * draw all of the layers
-             */
-            if(this.nodeType === 'Stage') {
-                stage.dragAnim.node = this;
-            }
-            else {
-                stage.dragAnim.node = this.getLayer();
-            }
-            stage.dragAnim.start();
-        }
-    },
-    _onDraggableChange: function() {
-        if(this.attrs.draggable) {
-            this._listenDrag();
-        }
-        else {
-            // remove event listeners
-            this._dragCleanup();
-
-            /*
-             * force drag and drop to end
-             * if this node is currently in
-             * drag and drop mode
-             */
-            var stage = this.getStage();
-            var go = Kinetic.Global;
-            if(stage && go.drag.node && go.drag.node._id === this._id) {
-                stage._endDrag();
-            }
-        }
-    },
-    /**
-     * remove drag and drop event listener
-     */
-    _dragCleanup: function() {
-        this.off('mousedown.kinetic');
-        this.off('touchstart.kinetic');
-    },
     /**
      * handle node event
      */
@@ -1125,7 +1001,7 @@ Kinetic.Node._createNode = function(obj, container) {
     return no;
 };
 // add getters setters
-Kinetic.Node.addGettersSetters(Kinetic.Node, ['x', 'y', 'rotation', 'opacity', 'name', 'id', 'draggable', 'listening', 'visible', 'dragBoundFunc']);
+Kinetic.Node.addGettersSetters(Kinetic.Node, ['x', 'y', 'rotation', 'opacity', 'name', 'id', 'listening', 'visible']);
 Kinetic.Node.addGetters(Kinetic.Node, ['scale', 'offset']);
 Kinetic.Node.addSetters(Kinetic.Node, ['width', 'height']);
 
@@ -1136,12 +1012,6 @@ Kinetic.Node.addSetters(Kinetic.Node, ['width', 'height']);
  * @methodOf Kinetic.Node.prototype
  */
 Kinetic.Node.prototype.isListening = Kinetic.Node.prototype.getListening;
-/**
- * get draggable.  Alias of getDraggable()
- * @name isDraggable
- * @methodOf Kinetic.Node.prototype
- */
-Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
 
 // collection mappings
 (function() {
@@ -1203,13 +1073,6 @@ Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
  * @param {String} id
  */
 
-/**
- * set draggable
- * @name setDraggable
- * @methodOf Kinetic.Node.prototype
- * @param {String} draggable
- */
-
 /**
  * listen or don't listen to events
  * @name setListening
@@ -1224,15 +1087,6 @@ Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
  * @param {Boolean} visible
  */
 
-/**
- * set drag bound function.  This is used to override the default
- *  drag and drop position
- * @name setDragBoundFunc
- * @methodOf Kinetic.Node.prototype
- * @param {Function} dragBoundFunc
- */
-
-
 /**
  * get node x position
  * @name getX
@@ -1281,12 +1135,6 @@ Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
  * @methodOf Kinetic.Node.prototype
  */
 
-/**
- * get draggable
- * @name getDraggable
- * @methodOf Kinetic.Node.prototype
- */
-
 /**
  * determine if listening to events or not
  * @name getListening
@@ -1297,10 +1145,4 @@ Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
  * determine if visible or not
  * @name getVisible
  * @methodOf Kinetic.Node.prototype
- */
-
-/**
- * get dragBoundFunc
- * @name getDragBoundFunc
- * @methodOf Kinetic.Node.prototype
  */

src/Shape.js

@@ -1,6 +1,3 @@
-///////////////////////////////////////////////////////////////////////
-//  Shape
-///////////////////////////////////////////////////////////////////////
 /**
  * Shape constructor.  Shapes are primitive objects such as rectangles,
  *  circles, text, lines, etc.

src/Stage.js

@@ -1,6 +1,3 @@
-///////////////////////////////////////////////////////////////////////
-//  Stage
-///////////////////////////////////////////////////////////////////////
 /**
  * Stage constructor.  A stage is used to contain multiple layers
  * @constructor
@@ -354,7 +351,7 @@ Kinetic.Stage.prototype = {
         this.mousePos = undefined;
 
         // end drag and drop
-        this._endDrag(evt);
+        go._endDrag(evt);
     },
     _mousemove: function(evt) {
         this._setUserPosition(evt);
@@ -389,7 +386,7 @@ Kinetic.Stage.prototype = {
         }
 
         // start drag and drop
-        this._startDrag(evt);
+        go._startDrag(evt);
     },
     _mousedown: function(evt) {
         this._setUserPosition(evt);
@@ -436,7 +433,7 @@ Kinetic.Stage.prototype = {
         this.clickStart = false;
 
         // end drag and drop
-        this._endDrag(evt);
+        go._endDrag(evt);
     },
     _touchstart: function(evt) {
         this._setUserPosition(evt);
@@ -488,10 +485,11 @@ Kinetic.Stage.prototype = {
         this.tapStart = false;
 
         // end drag and drop
-        this._endDrag(evt);
+        go._endDrag(evt);
     },
     _touchmove: function(evt) {
         this._setUserPosition(evt);
+        var go = Kinetic.Global;
         evt.preventDefault();
         var obj = this.getIntersection(this.getUserPosition());
         if(obj && obj.shape) {
@@ -500,7 +498,7 @@ Kinetic.Stage.prototype = {
         }
 
         // start drag and drop
-        this._startDrag(evt);
+        go._startDrag(evt);
     },
     /**
      * set mouse positon for desktop apps
@@ -542,62 +540,6 @@ Kinetic.Stage.prototype = {
             left: rect.left
         };
     },
-    /**
-     * end drag and drop
-     */
-    _endDrag: function(evt) {
-        var go = Kinetic.Global;
-        var node = go.drag.node;
-        if(node) {
-            if(node.nodeType === 'Stage') {
-                node.draw();
-            }
-            else {
-                node.getLayer().draw();
-            }
-
-            // handle dragend
-            if(go.drag.moving) {
-                go.drag.moving = false;
-                node._handleEvent('dragend', evt);
-            }
-        }
-        go.drag.node = null;
-        this.dragAnim.stop();
-    },
-    /**
-     * start drag and drop
-     */
-    _startDrag: function(evt) {
-        var that = this;
-        var go = Kinetic.Global;
-        var node = go.drag.node;
-
-        if(node) {
-            var pos = that.getUserPosition();
-            var dbf = node.attrs.dragBoundFunc;
-
-            var newNodePos = {
-                x: pos.x - go.drag.offset.x,
-                y: pos.y - go.drag.offset.y
-            };
-
-            if(dbf !== undefined) {
-                newNodePos = dbf.call(node, newNodePos, evt);
-            }
-
-            node.setAbsolutePosition(newNodePos);
-
-            if(!go.drag.moving) {
-                go.drag.moving = true;
-                // execute dragstart events if defined
-                go.drag.node._handleEvent('dragstart', evt);
-            }
-
-            // execute user defined ondragmove if defined
-            go.drag.node._handleEvent('dragmove', evt);
-        }
-    },
     /**
      * build dom
      */
@@ -681,7 +623,6 @@ Kinetic.Stage.prototype = {
          */
         this.ids = {};
         this.names = {};
-        this.dragAnim = new Kinetic.Animation();
     }
 };
 Kinetic.Global.extend(Kinetic.Stage, Kinetic.Container);

src/Transition.js

@@ -1,6 +1,3 @@
-///////////////////////////////////////////////////////////////////////
-//  Transition
-///////////////////////////////////////////////////////////////////////
 /**
  * Transition constructor.  The transitionTo() Node method
  *  returns a reference to the transition object which you can use
@@ -100,3 +97,52 @@ Kinetic.Transition.prototype = {
         return tween;
     }
 };
+
+/**
+ * transition node to another state.  Any property that can accept a real
+ *  number can be transitioned, including x, y, rotation, opacity, strokeWidth,
+ *  radius, scale.x, scale.y, offset.x, offset.y, etc.
+ * @name transitionTo
+ * @methodOf Kinetic.Node.prototype
+ * @param {Object} config
+ * @config {Number} duration duration that the transition runs in seconds
+ * @config {String} [easing] easing function.  can be linear, ease-in, ease-out, ease-in-out,
+ *  back-ease-in, back-ease-out, back-ease-in-out, elastic-ease-in, elastic-ease-out,
+ *  elastic-ease-in-out, bounce-ease-out, bounce-ease-in, bounce-ease-in-out,
+ *  strong-ease-in, strong-ease-out, or strong-ease-in-out
+ *  linear is the default
+ * @config {Function} [callback] callback function to be executed when
+ *  transition completes
+ */
+Kinetic.Node.prototype.transitionTo = function(config) {
+    if(!this.transAnim) {
+        this.transAnim = new Kinetic.Animation();
+    }
+    /*
+     * create new transition
+     */
+    var node = this.nodeType === 'Stage' ? this : this.getLayer();
+    var that = this;
+    var trans = new Kinetic.Transition(this, config);
+
+    this.transAnim.func = function() {
+        trans._onEnterFrame();
+    };
+    this.transAnim.node = node;
+
+    // subscribe to onFinished for first tween
+    trans.onFinished = function() {
+        // remove animation
+        that.transAnim.stop();
+        that.transAnim.node.draw();
+
+        // callback
+        if(config.callback) {
+            config.callback();
+        }
+    };
+    // auto start
+    trans.start();
+    this.transAnim.start();
+    return trans;
+};

src/util/Canvas.js

@@ -1,6 +1,3 @@
-///////////////////////////////////////////////////////////////////////
-//  Canvas
-///////////////////////////////////////////////////////////////////////
 /**
  * Canvas wrapper constructor
  * @constructor

src/util/Transform.js

@@ -1,6 +1,3 @@
-///////////////////////////////////////////////////////////////////////
-//  Transform
-///////////////////////////////////////////////////////////////////////
 /*
  * Last updated November 2011
  * By Simon Sarris

src/util/Tween.js

@@ -1,6 +1,3 @@
-///////////////////////////////////////////////////////////////////////
-//  Tween
-///////////////////////////////////////////////////////////////////////
 /*
 * The Tween class was ported from an Adobe Flash Tween library
 * to JavaScript by Xaric.  In the context of KineticJS, a Tween is

src/util/Type.js

@@ -1,6 +1,3 @@
-///////////////////////////////////////////////////////////////////////
-//  Type
-///////////////////////////////////////////////////////////////////////
 /*
  * utilities that handle data type detection, conversion, and manipulation
  */