transformer warning, typescript fixes

CHANGELOG.md

@@ -5,6 +5,8 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## Not released:
 
+* Show a warning when `Konva.Transformer` and attaching node have different parents.
+
 ## [3.2.4][2019-04-05]
 
 * Fix some stage events. `mouseenter` and `mouseleave` should work correctly on empty spaces

konva.js

@@ -8,7 +8,7 @@
    * Konva JavaScript Framework v3.2.4
    * http://konvajs.org/
    * Licensed under the MIT
-   * Date: Fri Apr 05 2019
+   * Date: Mon Apr 08 2019
    *
    * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
    * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -3466,7 +3466,7 @@
       Node.prototype.setZIndex = function (zIndex) {
           if (!this.parent) {
               Util.warn('Node has no parent. zIndex parameter is ignored.');
-              return false;
+              return this;
           }
           if (zIndex < 0 || zIndex >= this.parent.children.length) {
               Util.warn('Unexpected value ' +
@@ -5321,7 +5321,7 @@
           var that = this;
           this.children.each(function (child) {
               // skip invisible children
-              if (!child.getVisible()) {
+              if (!child.visible()) {
                   return;
               }
               var rect = child.getClientRect({
@@ -14018,6 +14018,9 @@
                   rotation: 0
               };
           }
+          if (node.parent && this.parent && node.parent !== this.parent) {
+              Util.warn('Transformer and attached node have different parents. Konva does not support such case right now. Please move Transformer to the parent of attaching node.');
+          }
           var rect = node.getClientRect({
               skipTransform: true,
               skipShadow: true,

src/Container.ts

@@ -5,6 +5,7 @@ import { DD } from './DragAndDrop';
 import { getNumberValidator } from './Validators';
 
 import { GetSet, IRect } from './types';
+import { Shape } from './Shape';
 
 export interface ContainerConfig extends NodeConfig {
   clearBeforeDraw?: boolean;
@@ -112,7 +113,7 @@ export abstract class Container extends Node<ContainerConfig> {
    * // remember to redraw layer if you changed something
    * layer.draw();
    */
-  add(child) {
+  add(child: Node) {
     if (arguments.length > 1) {
       for (var i = 0; i < arguments.length; i++) {
         this.add(arguments[i]);
@@ -300,7 +301,7 @@ export abstract class Container extends Node<ContainerConfig> {
 
     return false;
   }
-  clone(obj) {
+  clone(obj?) {
     // call super method
     var node = Node.prototype.clone.call(this, obj);
 
@@ -324,7 +325,7 @@ export abstract class Container extends Node<ContainerConfig> {
   getAllIntersections(pos) {
     var arr = [];
 
-    this.find('Shape').each(function(shape) {
+    this.find('Shape').each(function(shape: Shape) {
       if (shape.isVisible() && shape.intersects(pos)) {
         arr.push(shape);
       }
@@ -447,7 +448,7 @@ export abstract class Container extends Node<ContainerConfig> {
       (layer && layer.hitGraphEnabled() && this.isVisible() && !layerUnderDrag)
     );
   }
-  getClientRect(attrs) {
+  getClientRect(attrs): IRect {
     attrs = attrs || {};
     var skipTransform = attrs.skipTransform;
     var relativeTo = attrs.relativeTo;
@@ -462,7 +463,7 @@ export abstract class Container extends Node<ContainerConfig> {
     var that = this;
     this.children.each(function(child) {
       // skip invisible children
-      if (!child.getVisible()) {
+      if (!child.visible()) {
         return;
       }
 

src/Group.ts

@@ -1,6 +1,7 @@
 import { Util, Collection } from './Util';
 import { Container } from './Container';
 import { _registerNode } from './Global';
+import { Node } from './Node';
 
 /**
  * Group constructor.  Groups are used to contain shapes or other groups.

src/Node.ts

@@ -11,10 +11,10 @@ import {
   getBooleanValidator
 } from './Validators';
 
-export const ids = {};
+export const ids: any = {};
-export const names = {};
+export const names: any = {};
 
-const _addId = function(node: Node, id) {
+const _addId = function(node: Node, id: string | undefined) {
   if (!id) {
     return;
   }
@@ -170,7 +170,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
   eventListeners = {};
   attrs: any = {};
   index = 0;
-  parent: Container = null;
+  parent: Container | null = null;
   _cache: Map<string, any> = new Map<string, any>();
   _lastPos = null;
   _attrsAffectingSize: string[];
@@ -1305,7 +1305,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
   setZIndex(zIndex) {
     if (!this.parent) {
       Util.warn('Node has no parent. zIndex parameter is ignored.');
-      return false;
+      return this;
     }
     if (zIndex < 0 || zIndex >= this.parent.children.length) {
       Util.warn(
@@ -1428,7 +1428,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
    * var parentGroups = node.findAncestors('Group');
    */
   findAncestors(selector, includeSelf, stopNode) {
-    var res = [];
+    var res: Array<Node> = [];
 
     if (includeSelf && this._isMatch(selector)) {
       res.push(this);
@@ -1697,7 +1697,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
    *   x: 5
    * });
    */
-  clone(obj) {
+  clone(obj?) {
     // instantiate new node
     var attrs = Util.cloneObject(this.attrs),
       key,

src/Util.ts

@@ -33,7 +33,7 @@ export class Collection<Child extends Node> {
   // @ts-ignore
   length: number;
   // @ts-ignore
-  each: (f: Function) => void;
+  each: (f: (child: Child, index: number) => void) => void;
   // @ts-ignore
   toArray: () => Array<any>;
   // @ts-ignore

src/shapes/Transformer.ts

@@ -274,6 +274,12 @@ export class Transformer extends Group {
         rotation: 0
       };
     }
+
+    if (node.parent && this.parent && node.parent !== this.parent) {
+      Util.warn(
+        'Transformer and attached node have different parents. Konva does not support such case right now. Please move Transformer to the parent of attaching node.'
+      );
+    }
     var rect = node.getClientRect({
       skipTransform: true,
       skipShadow: true,

src/types.ts

@@ -2,8 +2,8 @@ import { Shape } from './Shape';
 import { Stage } from './Stage';
 
 export interface GetSet<Type, This> {
-  (this: This): Type;
+  (): Type;
-  (this: This, v: Type): This;
+  (v: Type): This;
 }
 
 export interface Vector2d {

test/unit/shapes/Transformer-test.js

@@ -35,7 +35,13 @@ suite('Transformer', function() {
     assert.equal(pos.y, rect.y() + rect.height());
   });
 
-  test.skip('try it on a parent of parent', function() {
+  test('try it on a parent of parent', function() {
+    var callCount = 0;
+    var oldWarn = Konva.Util.warn;
+    Konva.Util.warn = function() {
+      callCount += 1;
+    };
+
     var stage = addStage();
     var layer = new Konva.Layer();
     stage.add(layer);
@@ -61,19 +67,22 @@ suite('Transformer', function() {
     });
     layer.add(tr);
 
+    rect.width(120);
     layer.draw();
 
-    assert.equal(tr.x(), rect.x() + group.x());
+    assert.equal(callCount, 1);
-    assert.equal(tr.y(), rect.y() + group.y());
+    Konva.Util.warn = oldWarn;
-    assert.equal(tr.width(), rect.width());
-    assert.equal(tr.height(), rect.height());
 
-    // manual check of correct position of node
+    // assert.equal(tr.x(), rect.x() + group.x());
-    var handler = tr.findOne('.bottom-right');
+    // assert.equal(tr.y(), rect.y() + group.y());
-    var pos = handler.getAbsolutePosition();
+    // assert.equal(tr.width(), rect.width());
-    assert.equal(pos.x, rect.x() + rect.width());
+    // assert.equal(tr.height(), rect.height());
-    assert.equal(pos.y, rect.y() + rect.height());
+
-    throw '';
+    // // manual check of correct position of node
+    // var handler = tr.findOne('.bottom-right');
+    // var pos = handler.getAbsolutePosition();
+    // assert.equal(pos.x, rect.x() + rect.width());
+    // assert.equal(pos.y, rect.y() + rect.height());
   });
 
   test('try set/get node', function() {

tsconfig.json

@@ -6,6 +6,8 @@
     "noEmitOnError": true,
     "lib": ["es2015", "dom"]
     // "noImplicitAny": true
+    // "strict": true
   },
   "include": ["./src/*.ts"]
+  // "include": ["./types/*.ts"]
 }