Fixed container change for a stage. fix #510

CHANGELOG.md

@@ -47,6 +47,7 @@ That changes are private and internal specific. They should not break most of `K
 * Fixed underline drawing for text with `lineHeight !== 1`
 * Fixed some caching behavior when a node has `globalCompositeOperation`.
 * Fixed automatic updates for `Konva.Transformer`
+* Fixed container change for a stage.
 
 ## [2.6.0][2018-12-14]
 

konva.js

@@ -1845,7 +1845,6 @@
               if (!shape.getShadowForStrokeEnabled()) {
                   this.setAttr('shadowColor', 'rgba(0,0,0,0)');
               }
-              // TODO - do we need to make like a fill function?
               var hasLinearGradient = shape.getStrokeLinearGradientColorStops();
               if (hasLinearGradient) {
                   this._strokeLinearGradient(shape);
@@ -5620,6 +5619,10 @@
               }
           }
           this._setAttr(CONTAINER, container);
+          if (this.content) {
+              this.content.parentElement.removeChild(this.content);
+              container.appendChild(this.content);
+          }
           return this;
       };
       Stage.prototype.shouldDrawHit = function () {
@@ -5870,13 +5873,11 @@
           }
           // content event
           this._fire(CONTENT_MOUSEDOWN, { evt: evt });
-          // always call preventDefault for desktop events because some browsers
-          // try to drag and drop the canvas element
-          // TODO: if we preventDefault() it will cancel event detection outside of window inside iframe
-          // but we need it for better drag&drop
-          // can we disable native drag&drop somehow differently?
+          // Do not prevent default behavior, because it will prevent listening events outside of window iframe
+          // we used preventDefault for disabling native drag&drop
+          // but userSelect = none style will do the trick
           // if (evt.cancelable) {
-          // evt.preventDefault();
+          //   evt.preventDefault();
           // }
       };
       Stage.prototype._mouseup = function (evt) {

src/Context.ts

@@ -597,8 +597,6 @@ export class SceneContext extends Context {
         this.setAttr('shadowColor', 'rgba(0,0,0,0)');
       }
 
-      // TODO - do we need to make like a fill function?
-
       var hasLinearGradient = shape.getStrokeLinearGradientColorStops();
       if (hasLinearGradient) {
         this._strokeLinearGradient(shape);

src/Stage.ts

@@ -152,6 +152,10 @@ export class Stage extends Container {
       }
     }
     this._setAttr(CONTAINER, container);
+    if (this.content) {
+      this.content.parentElement.removeChild(this.content);
+      container.appendChild(this.content);
+    }
     return this;
   }
   shouldDrawHit() {
@@ -448,13 +452,11 @@ export class Stage extends Container {
     // content event
     this._fire(CONTENT_MOUSEDOWN, { evt: evt });
 
-    // always call preventDefault for desktop events because some browsers
-    // try to drag and drop the canvas element
-    // TODO: if we preventDefault() it will cancel event detection outside of window inside iframe
-    // but we need it for better drag&drop
-    // can we disable native drag&drop somehow differently?
+    // Do not prevent default behavior, because it will prevent listening events outside of window iframe
+    // we used preventDefault for disabling native drag&drop
+    // but userSelect = none style will do the trick
     // if (evt.cancelable) {
-    // evt.preventDefault();
+    //   evt.preventDefault();
     // }
   }
   _mouseup(evt) {

test/unit/Stage-test.js

@@ -162,6 +162,48 @@ suite('Stage', function() {
     assert.equal(stage.getContent().className, 'konvajs-content');
   });
 
+  test('try to move stage ', function() {
+    var stage = addStage();
+    var container = document.createElement('div');
+    var wrap = stage.container().parentNode;
+    wrap.appendChild(container);
+
+    stage.container(container);
+
+    assert.equal(stage.container(), container);
+
+    assert.equal(stage.content, container.children[0]);
+  });
+
+  test('clone stage ', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var shape = new Konva.Circle({
+      x: stage.width() / 2,
+      y: stage.height() / 2,
+      radius: 70,
+      strokeWidth: 4,
+      fill: 'red',
+      stroke: 'black',
+      id: 'redCircle'
+    });
+    layer.add(shape);
+    layer.draw();
+
+    var container = document.createElement('div');
+    var wrap = stage.container().parentNode;
+    wrap.appendChild(container);
+
+    var clone = stage.clone();
+    clone.container(container);
+
+    assert.equal(clone.container(), container);
+
+    assert.equal(clone.content, container.children[0]);
+  });
+
   // ======================================================
   test('stage getIntersection()', function() {
     var stage = addStage();