stage clone has new container. fix #707

src/Node.js

@@ -1183,13 +1183,18 @@
         clone: function(obj) {
             // instantiate new node
             var className = this.getClassName(),
-                attrs = this.attrs,
+                attrs = Kinetic.Util.cloneObject(this.attrs),
                 key, allListeners, len, n, listener;
             // filter black attrs
             for (var i in CLONE_BLACK_LIST) {
                 var blockAttr = CLONE_BLACK_LIST[i];
                 delete attrs[blockAttr];
             }
+            // apply attr overrides
+            for (key in obj) {
+                attrs[key] = obj[key];
+            }
+
             var node = new Kinetic[className](attrs);
             // copy over listeners
             for(key in this.eventListeners) {
@@ -1210,9 +1215,6 @@
                     }
                 }
             }
-
-            // apply attr overrides
-            node.setAttrs(obj);
             return node;
         },
         /**

src/Stage.js

@@ -145,6 +145,14 @@
             }
             return this;
         },
+        clone: function(obj) {
+            if (!obj) {
+                obj = {};
+            }
+            obj.container = Kinetic.document.createElement(DIV);
+            
+            return Kinetic.Container.prototype.clone.call(this, obj);
+        },
         /**
          * remove stage
          * @method
@@ -634,7 +642,7 @@
                     throw 'Stage has not container. But container is required';
                 } else {
                     // automatically create element for jsdom in nodejs env
-                container = Kinetic.document.createElement(DIV);
+                    container = Kinetic.document.createElement(DIV);
                 }
             }
             // clear content inside container

src/Util.js

@@ -557,7 +557,7 @@
             var retObj = {};
             for(var key in obj) {
                 if(this._isObject(obj[key])) {
-                    retObj[key] = this._clone(obj[key]);
+                    retObj[key] = this.cloneObject(obj[key]);
                 }
                 else {
                     retObj[key] = obj[key];

test/unit/Node-test.js

@@ -424,6 +424,30 @@ suite('Node', function() {
         assert.equal(clone.getStroke(), 'green');
     });
 
+    // ======================================================
+    test('clone - check reference', function() {
+        var stage = addStage();
+        var layer = new Kinetic.Layer();
+
+        var line = new Kinetic.Line({
+            x: 0,
+            y: 0,
+            stroke : 'red',
+            points : [0, 0, 10, 10]
+        });
+
+        var clone = line.clone({
+            stroke: 'green',
+            points : [10, 10, 20, 20, 30, 30]
+        });
+
+        layer.add(clone);
+        stage.add(layer);
+
+        assert.equal(line.points().length, 4);
+        assert.equal(clone.points().length, 6);
+    });
+
     // ======================================================
     test('complex clone', function() {
         var stage = addStage();

test/unit/Stage-test.js

@@ -73,6 +73,19 @@ suite('Stage', function() {
         assert.equal(container.getElementsByTagName('p').length, 0, 'container should have no p tags');
     });
 
+    // ======================================================
+    test('test stage cloning', function() {
+        var stage = addStage();
+        var layer = new Kinetic.Layer();
+        stage.add(layer);
+
+        var stageClone = stage.clone();
+        assert.notEqual(stage.getContainer(), stageClone.getContainer(), 'clone should be in different container');
+
+        assert.equal(stage.getContainer().childNodes[0].childNodes.length, 1, 'container should not have changes');
+
+    });
+
     // ======================================================
     test('set stage size', function() {
         var stage = addStage();