Some performance fixes and optimizations

CHANGELOG.md

@@ -3,6 +3,7 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+* Some performance fixes and optimizations
 * fixes for `dragstart` event when `Konva.Transformer` is used. `dragstart` event will have correct native `evt` reference
 * Better unicode support in `Konva.Text` and `Konva.TextPath`. Emoji should work better now 👍
 

src/Node.ts

@@ -126,6 +126,7 @@ export interface NodeConfig {
 
 // CONSTANTS
 var ABSOLUTE_OPACITY = 'absoluteOpacity',
+  ALL_LISTENERS = 'allEventListeners',
   ABSOLUTE_TRANSFORM = 'absoluteTransform',
   ABSOLUTE_SCALE = 'absoluteScale',
   CANVAS = 'canvas',
@@ -195,6 +196,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
   } = {};
   attrs: any = {};
   index = 0;
+  _allEventListeners: null | Array<Function> = null;
   parent: Container<Node> | null = null;
   _cache: Map<string, any> = new Map<string, any>();
   _attachedDepsListeners: Map<string, boolean> = new Map<string, boolean>();
@@ -720,6 +722,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
     evtStr: K,
     handler: KonvaEventListener<this, NodeEventMap[K]>
   ) {
+    this._cache && this._cache.delete(ALL_LISTENERS);
     if (arguments.length === 3) {
       return this._delegate.apply(this, arguments);
     }
@@ -2276,6 +2279,11 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
   }
 
   _getListeners(eventType) {
+    const events = this._cache.get(ALL_LISTENERS);
+    if (events) {
+      return events;
+    }
+
     let totalEvents = [];
     let obj;
     while (true) {
@@ -2293,6 +2301,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
       totalEvents = events.concat(totalEvents);
       obj = Object.getPrototypeOf(obj);
     }
+    this._cache.set(ALL_LISTENERS, totalEvents);
     return totalEvents;
   }
   _fire(eventType, evt) {

src/shapes/Circle.ts

@@ -30,7 +30,7 @@ export interface CircleConfig extends ShapeConfig {
 export class Circle extends Shape<CircleConfig> {
   _sceneFunc(context) {
     context.beginPath();
-    context.arc(0, 0, this.radius(), 0, Math.PI * 2, false);
+    context.arc(0, 0, this.attrs.radius || 0, 0, Math.PI * 2, false);
     context.closePath();
     context.fillStrokeShape(this);
   }

src/shapes/Rect.ts

@@ -4,7 +4,7 @@ import { Shape, ShapeConfig } from '../Shape';
 import { _registerNode } from '../Global';
 
 import { GetSet } from '../types';
-import {getNumberOrArrayOfNumbersValidator} from "../Validators";
+import { getNumberOrArrayOfNumbersValidator } from '../Validators';
 export interface RectConfig extends ShapeConfig {
   cornerRadius?: number | number[];
 }
@@ -52,7 +52,7 @@ export class Rect extends Shape<RectConfig> {
       } else {
         topLeft = Math.min(cornerRadius[0] || 0, width / 2, height / 2);
         topRight = Math.min(cornerRadius[1] || 0, width / 2, height / 2);
-        bottomRight = Math.min(cornerRadius[2] ||0, width / 2, height / 2);
+        bottomRight = Math.min(cornerRadius[2] || 0, width / 2, height / 2);
         bottomLeft = Math.min(cornerRadius[3] || 0, width / 2, height / 2);
       }
       context.moveTo(topLeft, 0);
@@ -113,6 +113,11 @@ _registerNode(Rect);
  * // top-left, top-right, bottom-right, bottom-left
  * rect.cornerRadius([0, 10, 20, 30]);
  */
-Factory.addGetterSetter(Rect, 'cornerRadius', 0, getNumberOrArrayOfNumbersValidator(4));
+Factory.addGetterSetter(
+  Rect,
+  'cornerRadius',
+  0,
+  getNumberOrArrayOfNumbersValidator(4)
+);
 
 Collection.mapMethods(Rect);

test/performance/jump-shape.html

@@ -77,14 +77,19 @@
       document.addEventListener('touchstart', onTouchStart, true);
       document.addEventListener('touchend', onTouchEnd, true);
 
-      for (var i = 0; i < startBunnyCount; i++) {
+      function createShape() {
-        var bunny = new Konva.Text({
+        return new Konva.Circle({
           transformsEnabled: 'position',
           x: 10,
           y: 10,
           perfectDrawEnabled: false,
-          text: 'text',
+          radius: 10,
+          fill: Konva.Util.getRandomColor(),
         });
+      }
+
+      for (var i = 0; i < startBunnyCount; i++) {
+        var bunny = createShape();
 
         bunny.speedX = Math.random() * 10;
         bunny.speedY = Math.random() * 10 - 5;
@@ -107,13 +112,7 @@
           // add 10 at a time :)
 
           for (var i = 0; i < amount; i++) {
-            var bunny = new Konva.Text({
+            var bunny = createShape();
-              transformsEnabled: 'position',
-              x: 10,
-              y: 10,
-              perfectDrawEnabled: false,
-              text: 'text',
-            });
             bunny.speedX = Math.random() * 10;
             bunny.speedY = Math.random() * 10 - 5;
             bunnys.push(bunny);