Memory usage optimizations when a node is cached. close #887

CHANGELOG.md

@@ -5,6 +5,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## Not released:
 
+* new `Konva.Transformer`
+* Fix `imageSmoothEnabled` when stage is resized
+* Memory usage optimizations when a node is cached
+
 ## 4.2.2 - 2020-03-26
 
 * Fix hit stroke issues

konva.js

@@ -8,7 +8,7 @@
    * Konva JavaScript Framework v4.2.2
    * http://konvajs.org/
    * Licensed under the MIT
-   * Date: Tue Apr 07 2020
+   * Date: Wed Apr 08 2020
    *
    * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
    * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -2780,8 +2780,8 @@
               height: height
           }), cachedFilterCanvas = new SceneCanvas({
               pixelRatio: pixelRatio,
-              width: width,
-              height: height
+              width: 0,
+              height: 0
           }), cachedHitCanvas = new HitCanvas({
               pixelRatio: 1,
               width: width,
@@ -2793,7 +2793,6 @@
           if (conf.imageSmoothingEnabled === false) {
               cachedSceneCanvas.getContext()._context.imageSmoothingEnabled = false;
               cachedFilterCanvas.getContext()._context.imageSmoothingEnabled = false;
-              cachedHitCanvas.getContext()._context.imageSmoothingEnabled = false;
           }
           sceneContext.save();
           hitContext.save();
@@ -2930,6 +2929,7 @@
           if (filters) {
               if (!this._filterUpToDate) {
                   var ratio = sceneCanvas.pixelRatio;
+                  filterCanvas.setSize(sceneCanvas.width / sceneCanvas.pixelRatio, sceneCanvas.height / sceneCanvas.pixelRatio);
                   try {
                       len = filters.length;
                       filterContext.clear();

src/Node.ts

@@ -389,8 +389,8 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
       }),
       cachedFilterCanvas = new SceneCanvas({
         pixelRatio: pixelRatio,
-        width: width,
-        height: height
+        width: 0,
+        height: 0
       }),
       cachedHitCanvas = new HitCanvas({
         pixelRatio: 1,
@@ -408,7 +408,6 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
     if (conf.imageSmoothingEnabled === false) {
       cachedSceneCanvas.getContext()._context.imageSmoothingEnabled = false;
       cachedFilterCanvas.getContext()._context.imageSmoothingEnabled = false;
-      cachedHitCanvas.getContext()._context.imageSmoothingEnabled = false;
     }
 
     sceneContext.save();
@@ -591,7 +590,10 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
     if (filters) {
       if (!this._filterUpToDate) {
         var ratio = sceneCanvas.pixelRatio;
-
+        filterCanvas.setSize(
+          sceneCanvas.width / sceneCanvas.pixelRatio,
+          sceneCanvas.height / sceneCanvas.pixelRatio
+        );
         try {
           len = filters.length;
           filterContext.clear();

test/unit/Node-cache-test.js

@@ -765,13 +765,13 @@ suite('Caching', function() {
 
     var circle = new Konva.Circle({
       radius: 52.2,
-      fill: 'red',
+      fill: 'red'
     });
     group.add(circle);
     group.cache();
 
     const canvas = group._cache.get('canvas').scene;
-    assert.equal(canvas.width, 105 * canvas.pixelRatio)
+    assert.equal(canvas.width, 105 * canvas.pixelRatio);
   });
 
   test('cache group with rectangle with fill and opacity', function() {
@@ -1251,6 +1251,37 @@ suite('Caching', function() {
     assert.equal(circle.getAbsolutePosition().y, 110);
   });
 
+  test('cached node should not have filter canvas until we have a filter', function() {
+    var stage = addStage();
+
+    var layer = new Konva.Layer({});
+    stage.add(layer);
+
+    var circle = new Konva.Circle({
+      x: 100,
+      y: 100,
+      radius: 10,
+      fill: 'red',
+      draggable: true,
+      scaleX: 10,
+      scaleY: 10
+    });
+    layer.add(circle);
+    circle.cache();
+
+    console.log(circle._cache.get('canvas'));
+    assert.equal(circle._cache.get('canvas').filter.width, 0);
+    circle.filters([Konva.Filters.Blur]);
+    layer.draw();
+    assert.equal(
+      circle._cache.get('canvas').filter.width,
+      20 * circle._cache.get('canvas').filter.pixelRatio
+    );
+    circle.filters([]);
+    // TODO: should we clear cache canvas?
+    // assert.equal(circle._cache.get('canvas').filter.width, 0);
+  });
+
   test('hit from cache + global composite', function(done) {
     // blend mode should NOT effect hit detection.
     var stage = addStage();