Fix(): Cache over invalidation bug (#10363)

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [5.5.1]
+
+- fix(): Cache over invalidation bug backport from 6.x
+
 ## [5.5.0]
 
 - refactor() Possibly breaking: Include text line height in text on a path size calculation to avoid cut off from cache. [`#10355`](https://github.com/fabricjs/fabric.js/pull/10355)

dist/fabric.js

@@ -15180,8 +15180,8 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
         // for sure this ALIASING_LIMIT is slightly creating problem
         // in situation in which the cache canvas gets an upper limit
         // also objectScale contains already scaleX and scaleY
-        width: neededX + ALIASING_LIMIT,
-        height: neededY + ALIASING_LIMIT,
+        width: Math.ceil(neededX + ALIASING_LIMIT),
+        height: Math.ceil(neededY + ALIASING_LIMIT),
         zoomX: objectScale.scaleX,
         zoomY: objectScale.scaleY,
         x: neededX,
@@ -15206,29 +15206,16 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
       }
       var canvas = this._cacheCanvas,
           dims = this._limitCacheSize(this._getCacheCanvasDimensions()),
-          minCacheSize = fabric.minCacheSideLimit,
           width = dims.width, height = dims.height, drawingWidth, drawingHeight,
           zoomX = dims.zoomX, zoomY = dims.zoomY,
           dimensionsChanged = width !== this.cacheWidth || height !== this.cacheHeight,
           zoomChanged = this.zoomX !== zoomX || this.zoomY !== zoomY,
-          shouldRedraw = dimensionsChanged || zoomChanged,
-          additionalWidth = 0, additionalHeight = 0, shouldResizeCanvas = false;
-      if (dimensionsChanged) {
-        var canvasWidth = this._cacheCanvas.width,
-            canvasHeight = this._cacheCanvas.height,
-            sizeGrowing = width > canvasWidth || height > canvasHeight,
-            sizeShrinking = (width < canvasWidth * 0.9 || height < canvasHeight * 0.9) &&
-              canvasWidth > minCacheSize && canvasHeight > minCacheSize;
-        shouldResizeCanvas = sizeGrowing || sizeShrinking;
-        if (sizeGrowing && !dims.capped && (width > minCacheSize || height > minCacheSize)) {
-          additionalWidth = width * 0.1;
-          additionalHeight = height * 0.1;
-        }
-      }
+          shouldRedraw = dimensionsChanged || zoomChanged;
+
       if (shouldRedraw) {
-        if (shouldResizeCanvas) {
-          canvas.width = Math.ceil(width + additionalWidth);
-          canvas.height = Math.ceil(height + additionalHeight);
+        if (dimensionsChanged) {
+          canvas.width = width;
+          canvas.height = height;
         }
         else {
           this._cacheContext.setTransform(1, 0, 0, 1, 0, 0);

package.json

@@ -2,7 +2,7 @@
   "name": "fabric",
   "description": "Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.",
   "homepage": "http://fabricjs.com/",
-  "version": "5.5.0",
+  "version": "5.5.1",
   "author": "Juriy Zaytsev <[email protected]>",
   "contributors": [
     {

src/shapes/object.class.js

@@ -734,8 +734,8 @@
         // for sure this ALIASING_LIMIT is slightly creating problem
         // in situation in which the cache canvas gets an upper limit
         // also objectScale contains already scaleX and scaleY
-        width: neededX + ALIASING_LIMIT,
-        height: neededY + ALIASING_LIMIT,
+        width: Math.ceil(neededX + ALIASING_LIMIT),
+        height: Math.ceil(neededY + ALIASING_LIMIT),
         zoomX: objectScale.scaleX,
         zoomY: objectScale.scaleY,
         x: neededX,
@@ -760,29 +760,16 @@
       }
       var canvas = this._cacheCanvas,
           dims = this._limitCacheSize(this._getCacheCanvasDimensions()),
-          minCacheSize = fabric.minCacheSideLimit,
           width = dims.width, height = dims.height, drawingWidth, drawingHeight,
           zoomX = dims.zoomX, zoomY = dims.zoomY,
           dimensionsChanged = width !== this.cacheWidth || height !== this.cacheHeight,
           zoomChanged = this.zoomX !== zoomX || this.zoomY !== zoomY,
-          shouldRedraw = dimensionsChanged || zoomChanged,
-          additionalWidth = 0, additionalHeight = 0, shouldResizeCanvas = false;
-      if (dimensionsChanged) {
-        var canvasWidth = this._cacheCanvas.width,
-            canvasHeight = this._cacheCanvas.height,
-            sizeGrowing = width > canvasWidth || height > canvasHeight,
-            sizeShrinking = (width < canvasWidth * 0.9 || height < canvasHeight * 0.9) &&
-              canvasWidth > minCacheSize && canvasHeight > minCacheSize;
-        shouldResizeCanvas = sizeGrowing || sizeShrinking;
-        if (sizeGrowing && !dims.capped && (width > minCacheSize || height > minCacheSize)) {
-          additionalWidth = width * 0.1;
-          additionalHeight = height * 0.1;
-        }
-      }
+          shouldRedraw = dimensionsChanged || zoomChanged;
+
       if (shouldRedraw) {
-        if (shouldResizeCanvas) {
-          canvas.width = Math.ceil(width + additionalWidth);
-          canvas.height = Math.ceil(height + additionalHeight);
+        if (dimensionsChanged) {
+          canvas.width = width;
+          canvas.height = height;
         }
         else {
           this._cacheContext.setTransform(1, 0, 0, 1, 0, 0);

test/unit/canvas.js

@@ -2365,7 +2365,7 @@
     var done = assert.async();
     assert.ok(typeof canvas.fxRemove === 'function');
 
-    var rect = new fabric.Rect();
+    var rect = new fabric.Rect({ width: 1, height: 1 });
     canvas.add(rect);
 
     var callbackFired = false;

test/unit/canvas_static.js

@@ -1304,7 +1304,7 @@
 
   QUnit.test('loadFromJSON with text', function(assert) {
     var done = assert.async();
-    var json = '{"objects":[{"type":"text","left":150,"top":200,"width":128,"height":64.32,"fill":"#000000","stroke":"","strokeWidth":"","scaleX":0.8,"scaleY":0.8,"angle":0,"flipX":false,"flipY":false,"opacity":1,"text":"NAME HERE","fontSize":24,"fontWeight":"","fontFamily":"Delicious_500","fontStyle":"","lineHeight":"","textDecoration":"","textAlign":"center","path":"","strokeStyle":"","backgroundColor":""}],"background":"#ffffff"}';
+    var json = '{"objects":[{"type":"text","left":150,"top":200,"width":128,"height":64.32,"fill":"#000000","stroke":"","strokeWidth":"","scaleX":0.8,"scaleY":0.8,"angle":0,"flipX":false,"flipY":false,"opacity":1,"text":"NAME HERE","fontSize":24,"fontWeight":"","fontFamily":"Delicious_500","fontStyle":"","lineHeight":1.16,"textDecoration":"","textAlign":"center","path":"","strokeStyle":"","backgroundColor":""}],"background":"#ffffff"}';
     canvas.loadFromJSON(json, function() {
 
       canvas.renderAll();
@@ -1319,11 +1319,12 @@
   });
 
   QUnit.test('loadFromJSON with clipPath', function(assert) {
+    var canvas2 = new fabric.StaticCanvas(null, { width: 400, height: 400, renderOnAddRemove: false });
     var done = assert.async();
-    var json = '{"clipPath": {"type":"text","left":150,"top":200,"width":128,"height":64.32,"fill":"#000000","stroke":"","strokeWidth":"","scaleX":0.8,"scaleY":0.8,"angle":0,"flipX":false,"flipY":false,"opacity":1,"text":"NAME HERE","fontSize":24,"fontWeight":"","fontFamily":"Delicious_500","fontStyle":"","lineHeight":"","textDecoration":"","textAlign":"center","path":"","strokeStyle":"","backgroundColor":""}}';
-    canvas.loadFromJSON(json, function() {
-      canvas.renderAll();
-      assert.equal('text', canvas.clipPath.type);
+    var json = '{"clipPath": {"type":"text","left":150,"top":200,"width":128,"height":64.32,"fill":"#000000","stroke":"","strokeWidth":"","scaleX":0.8,"scaleY":0.8,"angle":0,"flipX":false,"flipY":false,"opacity":1,"text":"NAME HERE","fontSize":24,"fontWeight":"","fontFamily":"Delicious_500","fontStyle":"","lineHeight":1.16,"textDecoration":"","textAlign":"center","path":"","strokeStyle":"","backgroundColor":""}}';
+    canvas2.loadFromJSON(json, function() {
+      assert.equal('text', canvas2.clipPath.type);
+      canvas2.dispose();
       done();
     });
   });
@@ -1644,7 +1645,7 @@
       callbackFired = true;
       assert.equal(canvas.item(0), undefined);
       assert.ok(callbackFired);
-      canvas.cancelRequestedRender();
+      canvas.renderAll();
       done();
     }