ixed automatic updates for Konva.Transformer

src/Node.ts

@@ -119,6 +119,7 @@ export abstract class Node {
   parent: Container = null;
   _cache: Map<string, any> = new Map<string, any>();
   _lastPos = null;
+  _attrsAffectingSize: string[];
 
   _filterUpToDate = false;
   _isUnderCache = false;
@@ -2324,6 +2325,7 @@ export abstract class Node {
 }
 
 Node.prototype.nodeType = 'Node';
+Node.prototype._attrsAffectingSize = [];
 
 /**
  * get/set zIndex relative to the node's siblings who share the same parent.

src/Shape.ts

@@ -320,7 +320,6 @@ export class Shape extends Node {
   // why do we need buffer canvas?
   // it give better result when a shape has
   // stroke with fill and with some opacity
-  // TODO: try to use it without stage (use global buffer canvas)
   _useBufferCanvas(caching) {
     return (
       (!caching || this.hasShadow()) &&

src/shapes/Arc.ts

@@ -30,8 +30,6 @@ import { GetSet } from '../types';
  * });
  */
 export class Arc extends Shape {
-  _centroid = true;
-
   _sceneFunc(context) {
     var angle = getAngle(this.angle()),
       clockwise = this.clockwise();
@@ -49,18 +47,10 @@ export class Arc extends Shape {
     return this.outerRadius() * 2;
   }
   setWidth(width) {
-    // TODO: remove this line?
-    Node.prototype['setWidth'].call(this, width);
-    if (this.outerRadius() !== width / 2) {
-      this.outerRadius(width / 2);
-    }
+    this.outerRadius(width / 2);
   }
   setHeight(height) {
-    // TODO: remove this line?
-    Node.prototype['setHeight'].call(this, height);
-    if (this.outerRadius() !== height / 2) {
-      this.outerRadius(height / 2);
-    }
+    this.outerRadius(height / 2);
   }
 
   innerRadius: GetSet<number, this>;
@@ -69,7 +59,9 @@ export class Arc extends Shape {
   clockwise: GetSet<boolean, this>;
 }
 
+Arc.prototype._centroid = true;
 Arc.prototype.className = 'Arc';
+Arc.prototype._attrsAffectingSize = ['innerRadius', 'outerRadius'];
 
 // add getters setters
 Factory.addGetterSetter(Arc, 'innerRadius', 0, Validators.getNumberValidator());

src/shapes/Circle.ts

@@ -23,9 +23,6 @@ import { GetSet } from '../types';
  * });
  */
 export class Circle extends Shape {
-  className = 'Circle';
-  _centroid = true;
-
   _sceneFunc(context) {
     context.beginPath();
     context.arc(0, 0, this.radius(), 0, Math.PI * 2, false);
@@ -52,10 +49,9 @@ export class Circle extends Shape {
   radius: GetSet<number, this>;
 }
 
+Circle.prototype._centroid = true;
 Circle.prototype.className = 'Circle';
-
-// add getters setters
-Factory.addGetterSetter(Circle, 'radius', 0, Validators.getNumberValidator());
+Circle.prototype._attrsAffectingSize = ['radius'];
 
 /**
  * get/set radius
@@ -70,5 +66,6 @@ Factory.addGetterSetter(Circle, 'radius', 0, Validators.getNumberValidator());
  * // set radius
  * circle.radius(10);
  */
+Factory.addGetterSetter(Circle, 'radius', 0, Validators.getNumberValidator());
 
 Collection.mapMethods(Circle);

src/shapes/Ellipse.ts

@@ -44,13 +44,9 @@ export class Ellipse extends Shape {
     return this.radiusY() * 2;
   }
   setWidth(width) {
-    // TODO: remove this line?
-    Node.prototype['setWidth'].call(this, width);
     this.radiusX(width / 2);
   }
   setHeight(height) {
-    // TODO: remove this line?
-    Node.prototype['setHeight'].call(this, height);
     this.radiusY(height / 2);
   }
 
@@ -61,6 +57,7 @@ export class Ellipse extends Shape {
 
 Ellipse.prototype.className = 'Ellipse';
 Ellipse.prototype._centroid = true;
+Ellipse.prototype._attrsAffectingSize = ['radiusX', 'radiusY'];
 
 // add getters setters
 Factory.addComponentsGetterSetter(Ellipse, 'radius', ['x', 'y']);

src/shapes/Line.ts

@@ -207,6 +207,7 @@ export class Line extends Shape {
 }
 
 Line.prototype.className = 'Line';
+Line.prototype._attrsAffectingSize = ['points', 'bezier', 'tension'];
 
 // add getters setters
 Factory.addGetterSetter(Line, 'closed', false);

src/shapes/Path.ts

@@ -868,6 +868,7 @@ export class Path extends Shape {
 }
 
 Path.prototype.className = 'Path';
+Path.prototype._attrsAffectingSize = ['data'];
 
 /**
  * get/set SVG path data string.  This method

src/shapes/RegularPolygon.ts

@@ -50,14 +50,10 @@ export class RegularPolygon extends Shape {
     return this.radius() * 2;
   }
   setWidth(width) {
-    if (this.radius() !== width / 2) {
-      this.radius(width / 2);
-    }
+    this.radius(width / 2);
   }
   setHeight(height) {
-    if (this.radius() !== height / 2) {
-      this.radius(height / 2);
-    }
+    this.radius(height / 2);
   }
 
   radius: GetSet<number, this>;
@@ -66,6 +62,7 @@ export class RegularPolygon extends Shape {
 
 RegularPolygon.prototype.className = 'RegularPolygon';
 RegularPolygon.prototype._centroid = true;
+RegularPolygon.prototype._attrsAffectingSize = ['radius'];
 
 /**
  * get/set radius

src/shapes/Ring.ts

@@ -40,14 +40,10 @@ export class Ring extends Shape {
     return this.outerRadius() * 2;
   }
   setWidth(width) {
-    if (this.outerRadius() !== width / 2) {
-      this.outerRadius(width / 2);
-    }
+    this.outerRadius(width / 2);
   }
   setHeight(height) {
-    if (this.outerRadius() !== height / 2) {
-      this.outerRadius(height / 2);
-    }
+    this.outerRadius(height / 2);
   }
 
   outerRadius: GetSet<number, this>;
@@ -56,6 +52,7 @@ export class Ring extends Shape {
 
 Ring.prototype.className = 'Ring';
 Ring.prototype._centroid = true;
+Ring.prototype._attrsAffectingSize = ['innerRadius', 'outerRadius'];
 
 /**
  * get/set innerRadius

src/shapes/Sprite.ts

@@ -209,7 +209,6 @@ export class Sprite extends Shape {
   frameIndex: GetSet<number, this>;
   animation: GetSet<string, this>;
   image: GetSet<CanvasImageSource, this>;
-  // TODO: write better type
   animations: GetSet<any, this>;
   frameOffsets: GetSet<any, this>;
   frameRate: GetSet<number, this>;

src/shapes/Star.ts

@@ -54,14 +54,10 @@ export class Star extends Shape {
     return this.outerRadius() * 2;
   }
   setWidth(width) {
-    if (this.outerRadius() !== width / 2) {
-      this.outerRadius(width / 2);
-    }
+    this.outerRadius(width / 2);
   }
   setHeight(height) {
-    if (this.outerRadius() !== height / 2) {
-      this.outerRadius(height / 2);
-    }
+    this.outerRadius(height / 2);
   }
 
   outerRadius: GetSet<number, this>;
@@ -71,6 +67,7 @@ export class Star extends Shape {
 
 Star.prototype.className = 'Star';
 Star.prototype._centroid = true;
+Star.prototype._attrsAffectingSize = ['innerRadius', 'outerRadius'];
 
 /**
  * get/set number of points

src/shapes/Text.ts

@@ -504,6 +504,13 @@ export class Text extends Shape {
 Text.prototype._fillFunc = _fillFunc;
 Text.prototype._strokeFunc = _strokeFunc;
 Text.prototype.className = TEXT_UPPER;
+Text.prototype._attrsAffectingSize = [
+  'text',
+  'fontSize',
+  'padding',
+  'wrap',
+  'lineHeight'
+];
 
 /**
  * get/set width of text area, which includes padding.

src/shapes/TextPath.ts

@@ -539,6 +539,7 @@ TextPath.prototype._strokeFunc = _strokeFunc;
 TextPath.prototype._fillFuncHit = _fillFunc;
 TextPath.prototype._strokeFuncHit = _strokeFunc;
 TextPath.prototype.className = 'TextPath';
+TextPath.prototype._attrsAffectingSize = ['text', 'fontSize', 'data'];
 
 /**
  * get/set SVG path data string.  This method

src/shapes/Transformer.ts

@@ -27,34 +27,20 @@ var ATTR_CHANGE_LIST = [
 
 var NODE_RECT = 'nodeRect';
 
-// TODO: check circles and text here!!!!
-// change text? change radius? change arc?
-
 var TRANSFORM_CHANGE_STR = [
-  'xChange.resizer',
-  'yChange.resizer',
-  'widthChange.resizer',
-  'heightChange.resizer',
-  'scaleXChange.resizer',
-  'scaleYChange.resizer',
-  'skewXChange.resizer',
-  'skewYChange.resizer',
-  'rotationChange.resizer',
-  'offsetXChange.resizer',
-  'offsetYChange.resizer',
-  'transformsEnabledChange.resizer'
-].join(' ');
-
-var REDRAW_CHANGE_STR = [
-  'widthChange.resizer',
-  'heightChange.resizer',
-  'scaleXChange.resizer',
-  'scaleYChange.resizer',
-  'skewXChange.resizer',
-  'skewYChange.resizer',
-  'rotationChange.resizer',
-  'offsetXChange.resizer',
-  'offsetYChange.resizer'
+  'xChange.tr',
+  'yChange.tr',
+  'widthChange.tr',
+  'heightChange.tr',
+  'scaleXChange.tr',
+  'scaleYChange.tr',
+  'skewXChange.tr',
+  'skewYChange.tr',
+  'rotationChange.tr',
+  'offsetXChange.tr',
+  'offsetYChange.tr',
+  'transformsEnabledChange.tr',
+  'strokeWidthChange.tr'
 ].join(' ');
 
 var ANGLES = {
@@ -205,15 +191,36 @@ export class Transformer extends Group {
     this._node = node;
     this._resetTransformCache();
 
-    node.on(TRANSFORM_CHANGE_STR, this._resetTransformCache.bind(this));
-    node.on(
-      REDRAW_CHANGE_STR,
-      function() {
-        if (!this._transforming) {
-          this.update();
-        }
-      }.bind(this)
-    );
+    const additionalEvents = node._attrsAffectingSize
+      .map(prop => prop + 'Change.tr')
+      .join(' ');
+
+    const upChange = () => {
+      this._resetTransformCache();
+      if (!this._transforming) {
+        this.update();
+      }
+    };
+    node.on(additionalEvents, upChange);
+
+    node.on(TRANSFORM_CHANGE_STR, upChange);
+
+    // 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
@@ -221,7 +228,7 @@ export class Transformer extends Group {
     if (elementsCreated) {
       this.update();
     }
-    return this;
+    return this;  
   }
   // TODO: add docs, use overloaded setter/getter
   getNode() {
@@ -237,7 +244,7 @@ export class Transformer extends Group {
    */
   detach() {
     if (this.getNode()) {
-      this.getNode().off('.resizer');
+      this.getNode().off('.tr');
       this._node = undefined;
     }
     this._resetTransformCache();

src/shapes/Wedge.ts

@@ -50,14 +50,10 @@ export class Wedge extends Shape {
     return this.radius() * 2;
   }
   setWidth(width) {
-    if (this.radius() !== width / 2) {
-      this.radius(width / 2);
-    }
+    this.radius(width / 2);
   }
   setHeight(height) {
-    if (this.radius() !== height / 2) {
-      this.radius(height / 2);
-    }
+    this.radius(height / 2);
   }
 
   radius: GetSet<number, this>;
@@ -67,6 +63,7 @@ export class Wedge extends Shape {
 
 Wedge.prototype.className = 'Wedge';
 Wedge.prototype._centroid = true;
+Wedge.prototype._attrsAffectingSize = ['radius'];
 
 /**
  * get/set radius