Private method stage._setPointerPosition() is deprecated

New method `stage.setPointersPositions(event)`

CHANGELOG.md

@@ -18,6 +18,7 @@ That changes are private and internal specific. They should not break most of `K
 * `id` and `name` properties defaults are empty strings, not `undefined`
 * internal `_cache` property was updated to use es2015 `Map` instead of `{}`.
 * `text.getTextHeight()` is deprecated. Use `text.height()` or `text.fontSize()` instead.
+* Private method `stage._setPointerPosition()` is deprecated. Use `stage.setPointersPositions(event)`;
 
 ### Added
 * Show a warning when a stage has too many layers
@@ -28,6 +29,8 @@ That changes are private and internal specific. They should not break most of `K
 * Show a warning when user is trying to reuse destroyed shape.
 * new publish method `measureSize(string)` for `Konva.Text`
 * You can configure what mouse buttons can be used for drag&drop. To enable right button you can use `Konva.dragButtons = [0, 1]`.
+* Now you can hide stage `stage.visible(false)`. It will set its container display style to "none".
+* New method `stage.setPointersPositions(event)`. Usually you don't need to use it manually.
 
 ### Changed
 * Full rewrite to Typescript with tons of refactoring and small optimizations. The public API should be 100% the same

konva.js

@@ -2313,7 +2313,7 @@
                   // it is possible that pos is undefined
                   // reattach it
                   if (!pos) {
-                      node.getStage()._setPointerPosition(evt);
+                      node.getStage().setPointersPositions(evt);
                       pos = node.getStage().getPointerPosition();
                   }
                   var dragDistance = node.dragDistance();
@@ -2322,7 +2322,7 @@
                       return;
                   }
               }
-              node.getStage()._setPointerPosition(evt);
+              node.getStage().setPointersPositions(evt);
               if (!DD.isDragging) {
                   DD.isDragging = true;
                   node.fire('dragstart', {
@@ -5536,6 +5536,7 @@
           ctx[UNDERSCORE + eventName](evt);
       }, false);
   }
+  var NO_POINTERS_MESSAGE = "Pointer position is missing and not registered by the stage. Looks like it is outside of the stage container. You can set it manually from event: stage.setPointersPositions(event);";
   var stages = [];
   /**
    * Stage constructor.  A stage is used to contain multiple layers
@@ -5578,7 +5579,9 @@
           _this._buildDOM();
           _this._bindContentEvents();
           stages.push(_this);
-          _this.on('widthChange heightChange', _this._resizeDOM);
+          _this.on('widthChange.konva heightChange.konva', _this._resizeDOM);
+          _this.on('visibleChange.konva', _this._checkVisibility);
+          _this._checkVisibility();
           return _this;
       }
       Stage.prototype._validateAdd = function (child) {
@@ -5586,6 +5589,10 @@
               Util.throw('You may only add layers to the stage.');
           }
       };
+      Stage.prototype._checkVisibility = function () {
+          var style = this.visible() ? '' : 'none';
+          this.content.style.display = style;
+      };
       /**
        * set container dom element which contains the stage wrapper div element
        * @method
@@ -5594,7 +5601,6 @@
        */
       Stage.prototype.setContainer = function (container) {
           if (typeof container === STRING) {
-              // TODO: use simple query selector
               if (container.charAt(0) === '.') {
                   var className = container.slice(1);
                   container = document.getElementsByClassName(className)[0];
@@ -5657,7 +5663,9 @@
        * @returns {Object}
        */
       Stage.prototype.getPointerPosition = function () {
-          // TODO: warn if it is undefined
+          if (!this.pointerPos) {
+              Util.warn(NO_POINTERS_MESSAGE);
+          }
           return this.pointerPos;
       };
       Stage.prototype.getStage = function () {
@@ -5772,12 +5780,12 @@
           }
       };
       Stage.prototype._mouseover = function (evt) {
-          this._setPointerPosition(evt);
+          this.setPointersPositions(evt);
           this._fire(CONTENT_MOUSEOVER, { evt: evt });
           this._fire(MOUSEOVER, { evt: evt, target: this, currentTarget: this });
       };
       Stage.prototype._mouseout = function (evt) {
-          this._setPointerPosition(evt);
+          this.setPointersPositions(evt);
           var targetShape = this.targetShape;
           if (targetShape && !getGlobalKonva().isDragging()) {
               targetShape._fireAndBubble(MOUSEOUT, { evt: evt });
@@ -5792,7 +5800,7 @@
           if (UA.ieMobile) {
               return this._touchmove(evt);
           }
-          this._setPointerPosition(evt);
+          this.setPointersPositions(evt);
           var shape;
           if (!getGlobalKonva().isDragging()) {
               shape = this.getIntersection(this.getPointerPosition());
@@ -5846,7 +5854,7 @@
           if (UA.ieMobile) {
               return this._touchstart(evt);
           }
-          this._setPointerPosition(evt);
+          this.setPointersPositions(evt);
           var shape = this.getIntersection(this.getPointerPosition());
           getGlobalKonva().listenClickTap = true;
           if (shape && shape.isListening()) {
@@ -5876,7 +5884,7 @@
           if (UA.ieMobile) {
               return this._touchend(evt);
           }
-          this._setPointerPosition(evt);
+          this.setPointersPositions(evt);
           var shape = this.getIntersection(this.getPointerPosition()), clickStartShape = this.clickStartShape, clickEndShape = this.clickEndShape, fireDblClick = false, dd = getGlobalKonva().DD;
           if (getGlobalKonva().inDblClickWindow) {
               fireDblClick = true;
@@ -5936,7 +5944,7 @@
           }
       };
       Stage.prototype._contextmenu = function (evt) {
-          this._setPointerPosition(evt);
+          this.setPointersPositions(evt);
           var shape = this.getIntersection(this.getPointerPosition());
           if (shape && shape.isListening()) {
               shape._fireAndBubble(CONTEXTMENU, { evt: evt });
@@ -5951,7 +5959,7 @@
           this._fire(CONTENT_CONTEXTMENU, { evt: evt });
       };
       Stage.prototype._touchstart = function (evt) {
-          this._setPointerPosition(evt);
+          this.setPointersPositions(evt);
           var shape = this.getIntersection(this.getPointerPosition());
           getGlobalKonva().listenClickTap = true;
           if (shape && shape.isListening()) {
@@ -5973,7 +5981,7 @@
           this._fire(CONTENT_TOUCHSTART, { evt: evt });
       };
       Stage.prototype._touchend = function (evt) {
-          this._setPointerPosition(evt);
+          this.setPointersPositions(evt);
           var shape = this.getIntersection(this.getPointerPosition()), fireDblClick = false;
           if (getGlobalKonva().inDblClickWindow) {
               fireDblClick = true;
@@ -6027,7 +6035,7 @@
           getGlobalKonva().listenClickTap = false;
       };
       Stage.prototype._touchmove = function (evt) {
-          this._setPointerPosition(evt);
+          this.setPointersPositions(evt);
           var dd = getGlobalKonva().DD, shape;
           if (!getGlobalKonva().isDragging()) {
               shape = this.getIntersection(this.getPointerPosition());
@@ -6056,7 +6064,7 @@
           }
       };
       Stage.prototype._wheel = function (evt) {
-          this._setPointerPosition(evt);
+          this.setPointersPositions(evt);
           var shape = this.getIntersection(this.getPointerPosition());
           if (shape && shape.isListening()) {
               shape._fireAndBubble(WHEEL, { evt: evt });
@@ -6070,7 +6078,21 @@
           }
           this._fire(CONTENT_WHEEL, { evt: evt });
       };
-      Stage.prototype._setPointerPosition = function (evt) {
+      /**
+       * manually register pointers positions (mouse/touch) in the stage.
+       * So you can use stage.getPointerPosition(). Usually you don't need to use that method
+       * because all internal events are automatically registered. It may be useful if event
+       * is triggered outside of the stage, but you still want to use Konva methods to get pointers position.
+       * @method
+       * @name Konva.Stage#setPointersPositions
+       * @param {Object} event Event object
+       * @example
+       *
+       * window.addEventListener('mousemove', (e) => {
+       *   stage.setPointersPositions(e);
+       * });
+       */
+      Stage.prototype.setPointersPositions = function (evt) {
           var contentPosition = this._getContentPosition(), x = null, y = null;
           evt = evt ? evt : window.event;
           // touch events
@@ -6095,6 +6117,10 @@
               };
           }
       };
+      Stage.prototype._setPointerPosition = function (evt) {
+          Util.warn('Method _setPointerPosition is deprecated. Use "stage.setPointersPositions(event)" instead.');
+          this.setPointersPositions(evt);
+      };
       Stage.prototype._getContentPosition = function () {
           var rect = this.content.getBoundingClientRect
               ? this.content.getBoundingClientRect()
@@ -13822,7 +13848,7 @@
           return _this;
       }
       /**
-       * alias to `setNode`
+       * alias to `tr.node(shape)`
        * @method
        * @name Konva.Transformer#attachTo
        * @returns {Konva.Transformer}
@@ -13851,23 +13877,7 @@
           };
           node.on(additionalEvents, upChange);
           node.on(TRANSFORM_CHANGE_STR$1, upChange);
-          // node.on(
+          // we may need it if we set node in initial props
-          //   additionalEvents,
-          //   function() {
-          //     if (!this._transforming) {
-          //       this.update();
-          //     }
-          //   }.bind(this)
-          // );
-          // node.on(
-          //   REDRAW_CHANGE_STR,
-          //   function() {
-          //     if (!this._transforming) {
-          //       this.update();
-          //     }
-          //   }.bind(this)
-          // );
-          // we may need it if we set not in initial props
           // so elements are not defined yet
           var elementsCreated = !!this.findOne('.top-left');
           if (elementsCreated) {
@@ -13875,7 +13885,6 @@
           }
           return this;
       };
-      // TODO: add docs, use overloaded setter/getter
       Transformer.prototype.getNode = function () {
           return this._node;
       };

src/DragAndDrop.ts

@@ -29,7 +29,7 @@ export const DD = {
         // it is possible that pos is undefined
         // reattach it
         if (!pos) {
-          node.getStage()._setPointerPosition(evt);
+          node.getStage().setPointersPositions(evt);
           pos = node.getStage().getPointerPosition();
         }
         var dragDistance = node.dragDistance();
@@ -42,7 +42,7 @@ export const DD = {
         }
       }
 
-      node.getStage()._setPointerPosition(evt);
+      node.getStage().setPointersPositions(evt);
       if (!DD.isDragging) {
         DD.isDragging = true;
         node.fire(

src/Stage.ts

@@ -74,6 +74,8 @@ function addEvent(ctx, eventName) {
   );
 }
 
+const NO_POINTERS_MESSAGE = `Pointer position is missing and not registered by the stage. Looks like it is outside of the stage container. You can set it manually from event: stage.setPointersPositions(event);`;
+
 export const stages: Stage[] = [];
 
 /**
@@ -110,7 +112,9 @@ export class Stage extends Container {
     this._buildDOM();
     this._bindContentEvents();
     stages.push(this);
-    this.on('widthChange heightChange', this._resizeDOM);
+    this.on('widthChange.konva heightChange.konva', this._resizeDOM);
+    this.on('visibleChange.konva', this._checkVisibility);
+    this._checkVisibility();
   }
 
   _validateAdd(child) {
@@ -118,6 +122,11 @@ export class Stage extends Container {
       Util.throw('You may only add layers to the stage.');
     }
   }
+
+  _checkVisibility() {
+    const style = this.visible() ? '' : 'none';
+    this.content.style.display = style;
+  }
   /**
    * set container dom element which contains the stage wrapper div element
    * @method
@@ -126,7 +135,6 @@ export class Stage extends Container {
    */
   setContainer(container) {
     if (typeof container === STRING) {
-      // TODO: use simple query selector
       if (container.charAt(0) === '.') {
         var className = container.slice(1);
         container = document.getElementsByClassName(className)[0];
@@ -193,7 +201,9 @@ export class Stage extends Container {
    * @returns {Object}
    */
   getPointerPosition() {
-    // TODO: warn if it is undefined
+    if (!this.pointerPos) {
+      Util.warn(NO_POINTERS_MESSAGE);
+    }
     return this.pointerPos;
   }
   getStage() {
@@ -342,12 +352,12 @@ export class Stage extends Container {
     }
   }
   _mouseover(evt) {
-    this._setPointerPosition(evt);
+    this.setPointersPositions(evt);
     this._fire(CONTENT_MOUSEOVER, { evt: evt });
     this._fire(MOUSEOVER, { evt: evt, target: this, currentTarget: this });
   }
   _mouseout(evt) {
-    this._setPointerPosition(evt);
+    this.setPointersPositions(evt);
     var targetShape = this.targetShape;
 
     if (targetShape && !getGlobalKonva().isDragging()) {
@@ -364,7 +374,7 @@ export class Stage extends Container {
     if (UA.ieMobile) {
       return this._touchmove(evt);
     }
-    this._setPointerPosition(evt);
+    this.setPointersPositions(evt);
     var shape;
 
     if (!getGlobalKonva().isDragging()) {
@@ -419,7 +429,7 @@ export class Stage extends Container {
     if (UA.ieMobile) {
       return this._touchstart(evt);
     }
-    this._setPointerPosition(evt);
+    this.setPointersPositions(evt);
     var shape = this.getIntersection(this.getPointerPosition());
 
     getGlobalKonva().listenClickTap = true;
@@ -452,7 +462,7 @@ export class Stage extends Container {
     if (UA.ieMobile) {
       return this._touchend(evt);
     }
-    this._setPointerPosition(evt);
+    this.setPointersPositions(evt);
     var shape = this.getIntersection(this.getPointerPosition()),
       clickStartShape = this.clickStartShape,
       clickEndShape = this.clickEndShape,
@@ -523,7 +533,7 @@ export class Stage extends Container {
     }
   }
   _contextmenu(evt) {
-    this._setPointerPosition(evt);
+    this.setPointersPositions(evt);
     var shape = this.getIntersection(this.getPointerPosition());
 
     if (shape && shape.isListening()) {
@@ -538,7 +548,7 @@ export class Stage extends Container {
     this._fire(CONTENT_CONTEXTMENU, { evt: evt });
   }
   _touchstart(evt) {
-    this._setPointerPosition(evt);
+    this.setPointersPositions(evt);
     var shape = this.getIntersection(this.getPointerPosition());
 
     getGlobalKonva().listenClickTap = true;
@@ -562,7 +572,7 @@ export class Stage extends Container {
     this._fire(CONTENT_TOUCHSTART, { evt: evt });
   }
   _touchend(evt) {
-    this._setPointerPosition(evt);
+    this.setPointersPositions(evt);
     var shape = this.getIntersection(this.getPointerPosition()),
       fireDblClick = false;
 
@@ -623,7 +633,7 @@ export class Stage extends Container {
     getGlobalKonva().listenClickTap = false;
   }
   _touchmove(evt) {
-    this._setPointerPosition(evt);
+    this.setPointersPositions(evt);
     var dd = getGlobalKonva().DD,
       shape;
     if (!getGlobalKonva().isDragging()) {
@@ -654,7 +664,7 @@ export class Stage extends Container {
     }
   }
   _wheel(evt) {
-    this._setPointerPosition(evt);
+    this.setPointersPositions(evt);
     var shape = this.getIntersection(this.getPointerPosition());
 
     if (shape && shape.isListening()) {
@@ -668,7 +678,21 @@ export class Stage extends Container {
     }
     this._fire(CONTENT_WHEEL, { evt: evt });
   }
-  _setPointerPosition(evt) {
+  /**
+   * manually register pointers positions (mouse/touch) in the stage.
+   * So you can use stage.getPointerPosition(). Usually you don't need to use that method
+   * because all internal events are automatically registered. It may be useful if event
+   * is triggered outside of the stage, but you still want to use Konva methods to get pointers position.
+   * @method
+   * @name Konva.Stage#setPointersPositions
+   * @param {Object} event Event object
+   * @example
+   *
+   * window.addEventListener('mousemove', (e) => {
+   *   stage.setPointersPositions(e);
+   * });
+   */
+  setPointersPositions(evt) {
     var contentPosition = this._getContentPosition(),
       x = null,
       y = null;
@@ -695,6 +719,12 @@ export class Stage extends Container {
       };
     }
   }
+  _setPointerPosition(evt) {
+    Util.warn(
+      'Method _setPointerPosition is deprecated. Use "stage.setPointersPositions(event)" instead.'
+    );
+    this.setPointersPositions(evt);
+  }
   _getContentPosition() {
     var rect = this.content.getBoundingClientRect
       ? this.content.getBoundingClientRect()
@@ -787,5 +817,3 @@ Stage.prototype.nodeType = STAGE;
  * stage.container(container);
  */
 Factory.addGetterSetter(Stage, 'container');
-
-

src/shapes/TextPath.ts

@@ -528,8 +528,7 @@ export class TextPath extends Shape {
   text: GetSet<string, this>;
   data: GetSet<string, this>;
 
-  // TODO: add better types
+  kerningFunc: GetSet<(leftChar: string, rightChar: string) => number, this>;
-  kerningFunc: GetSet<Function, this>;
   textBaseline: GetSet<string, this>;
   textDecoration: GetSet<string, this>;
 }

src/shapes/Transformer.ts

@@ -173,7 +173,7 @@ export class Transformer extends Group {
     }
   }
   /**
-   * alias to `setNode`
+   * alias to `tr.node(shape)`
    * @method
    * @name Konva.Transformer#attachTo
    * @returns {Konva.Transformer}
@@ -204,33 +204,14 @@ export class Transformer extends Group {
     node.on(additionalEvents, upChange);
 
     node.on(TRANSFORM_CHANGE_STR, upChange);
-
+    // we may need it if we set node in initial props
-    // node.on(
-    //   additionalEvents,
-    //   function() {
-    //     if (!this._transforming) {
-    //       this.update();
-    //     }
-    //   }.bind(this)
-    // );
-    // node.on(
-    //   REDRAW_CHANGE_STR,
-    //   function() {
-    //     if (!this._transforming) {
-    //       this.update();
-    //     }
-    //   }.bind(this)
-    // );
-
-    // we may need it if we set not in initial props
     // so elements are not defined yet
     var elementsCreated = !!this.findOne('.top-left');
     if (elementsCreated) {
       this.update();
     }
-    return this;  
+    return this;
   }
-  // TODO: add docs, use overloaded setter/getter
   getNode() {
     return this._node;
   }

test/runner.js

@@ -87,13 +87,18 @@ function addStats() {
   animate();
 }
 
-function addStage() {
+function addStage(attrs) {
-  var container = document.createElement('div'),
+  var container = document.createElement('div');
-    stage = new Konva.Stage({
+  const props = Object.assign(
+    {
       container: container,
       width: 578,
       height: 200
-    });
+    },
+    attrs
+  );
+
+  var stage = new Konva.Stage(props);
 
   konvaContainer.appendChild(container);
   return stage;

test/unit/Node-test.js

@@ -3104,7 +3104,9 @@ suite('Node', function() {
 
   // ======================================================
   test('hide stage', function() {
-    var stage = addStage();
+    var stage = addStage({
+      visible: false
+    });
     var layer = new Konva.Layer();
     var group = new Konva.Group();
 
@@ -3121,15 +3123,25 @@ suite('Node', function() {
       scale: {
         x: 2,
         y: 1
-      }
+      },
+      visible: false
     });
 
     group.add(rect);
     layer.add(group);
     stage.add(layer);
 
+    assert.equal(stage.content.style.display, 'none');
+    
+    stage.show();
+    stage.draw();
+    assert.equal(stage.content.style.display, '');
+
     stage.hide();
     stage.draw();
+    assert.equal(stage.content.style.display, 'none');
+    
+    
 
     // TODO: stage hide() fails.  also need to find a good way to test this
   });

test/unit/shapes/Transformer-test.js

@@ -35,6 +35,41 @@ suite('Transformer', function() {
     assert.equal(pos.y, rect.y() + rect.height());
   });
 
+  test('try set/get node', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var rect = new Konva.Rect({
+      x: 100,
+      y: 60,
+      draggable: true,
+      width: 100,
+      height: 100,
+      fill: 'yellow'
+    });
+    layer.add(rect);
+
+    var circle = new Konva.Rect({
+      x: 10,
+      y: 60,
+      radius: 100,
+      fill: 'yellow'
+    });
+    layer.add(circle);
+
+    var tr = new Konva.Transformer({
+      node: rect
+    });
+    layer.add(tr);
+
+    layer.draw();
+    assert.equal(tr.node(), rect);
+
+    tr.attachTo(circle);
+    assert.equal(tr.node(), circle);
+  });
+
   test('try to fit simple rectangle', function() {
     var stage = addStage();
     var layer = new Konva.Layer();