perf optimizations

src/Node.ts

@@ -197,6 +197,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
   index = 0;
   parent: Container<Node> | null = null;
   _cache: Map<string, any> = new Map<string, any>();
+  _attachedDepsListeners: Map<string, boolean> = new Map<string, boolean>();
   _lastPos: Vector2d = null;
   _attrsAffectingSize!: string[];
   _batchingTransformChange = false;
@@ -273,6 +274,21 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
 
     return cache;
   }
+
+  _calculate(name, deps, getter) {
+    // if we are trying to calculate function for the first time
+    // we need to attach listeners for change events
+    if (!this._attachedDepsListeners.get(name)) {
+      const depsString = deps.map((dep) => dep + 'Change.konva').join(SPACE);
+      this.on(depsString, () => {
+        this._clearCache(name);
+      });
+      this._attachedDepsListeners.set(name, true);
+    }
+    // just use cache function
+    return this._getCache(name, getter);
+  }
+
   _getCanvasCache() {
     return this._cache.get(CANVAS);
   }
@@ -1786,6 +1802,9 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
     var m: Transform = this._cache.get(TRANSFORM) || new Transform();
     m.reset();
 
+    // I was trying to use attributes directly here
+    // but it doesn't work for Transformer well
+    // because it overwrite x,y getters
     var x = this.x(),
       y = this.y(),
       rotation = Konva.getAngle(this.rotation()),

src/Shape.ts

@@ -351,14 +351,26 @@ export class Shape<Config extends ShapeConfig = ShapeConfig> extends Node<
    * @returns {Boolean}
    */
   hasFill() {
-    return (
-      this.fillEnabled() &&
-      !!(
-        this.fill() ||
-        this.fillPatternImage() ||
-        this.fillLinearGradientColorStops() ||
-        this.fillRadialGradientColorStops()
-      )
+    return this._calculate(
+      'hasFill',
+      [
+        'fillEnabled',
+        'fill',
+        'fillPatternImage',
+        'fillLinearGradientColorStops',
+        'fillRadialGradientColorStops',
+      ],
+      () => {
+        return (
+          this.fillEnabled() &&
+          !!(
+            this.fill() ||
+            this.fillPatternImage() ||
+            this.fillLinearGradientColorStops() ||
+            this.fillRadialGradientColorStops()
+          )
+        );
+      }
     );
   }
   /**
@@ -368,12 +380,29 @@ export class Shape<Config extends ShapeConfig = ShapeConfig> extends Node<
    * @returns {Boolean}
    */
   hasStroke() {
-    return (
-      this.strokeEnabled() &&
-      this.strokeWidth() &&
-      !!(this.stroke() || this.strokeLinearGradientColorStops())
-      // this.getStrokeRadialGradientColorStops()
+    return this._calculate(
+      'hasStroke',
+      [
+        'strokeEnabled',
+        'strokeWidth',
+        'stroke',
+        'strokeLinearGradientColorStops',
+      ],
+      () => {
+        return (
+          this.strokeEnabled() &&
+          this.strokeWidth() &&
+          !!(this.stroke() || this.strokeLinearGradientColorStops())
+          // this.getStrokeRadialGradientColorStops()
+        );
+      }
     );
+    // return (
+    //   this.strokeEnabled() &&
+    //   this.strokeWidth() &&
+    //   !!(this.stroke() || this.strokeLinearGradientColorStops())
+    //   // this.getStrokeRadialGradientColorStops()
+    // );
   }
   hasHitStroke() {
     const width = this.hitStrokeWidth();

src/shapes/Transformer.ts

@@ -316,7 +316,7 @@ export class Transformer extends Group {
     let lastPos;
     node.on(`dragstart.${EVENTS_NAME}`, (e) => {
       lastPos = node.getAbsolutePosition();
-      this.fire('dragstart', e);
+      // this.fire('dragstart', e);
     });
     node.on(`dragmove.${EVENTS_NAME}`, (e) => {
       if (!lastPos) {
@@ -338,12 +338,10 @@ export class Transformer extends Group {
           y: otherAbs.y + dy,
         });
         otherNode.startDrag();
-        // TODO: how to trigger event after all nodes are dragged?
-        this.fire('dragmove', e);
-      });
-      node.on(`dragend.${EVENTS_NAME}`, (e) => {
-        this.fire('dragend', e);
       });
+      // node.on(`dragend.${EVENTS_NAME}`, (e) => {
+      //   this.fire('dragend', e);
+      // });
       lastPos = null;
     });
   }