Merge branch 'fix-setLineDash' of github.com:zhe-he/fabric.js into fi…

…x-setLineDash
fabricjs · Nov 26, 2024 · 9b5b82e · 9b5b82e
2 parents 7caa99a + 7a68e2d
commit 9b5b82e
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 51 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,7 +2,8 @@
 
 ## [next]
 
--fix(): The _setLineDash method has additional side effects, altering the value of strokeDashArray [#10292](https://github.com/fabricjs/fabric.js/issues/10292)
+- fix(): The _setLineDash method has additional side effects, altering the value of strokeDashArray [#10292](https://github.com/fabricjs/fabric.js/issues/10292)
+- fix(): for object caching over invalidating the cache [#10294](https://github.com/fabricjs/fabric.js/pull/10294)
 
 ## [6.5.1]
 

diff --git a/src/shapes/Object/Object.ts b/src/shapes/Object/Object.ts
@@ -43,11 +43,7 @@ import { pick, pickBy } from '../../util/misc/pick';
 import { toFixed } from '../../util/misc/toFixed';
 import type { Group } from '../Group';
 import { StaticCanvas } from '../../canvas/StaticCanvas';
-import {
-  isFiller,
-  isSerializableFiller,
-  isTextObject,
-} from '../../util/typeAssertions';
+import { isFiller, isSerializableFiller } from '../../util/typeAssertions';
 import type { FabricImage } from '../Image';
 import {
   cacheProperties,
@@ -461,8 +457,8 @@ export class FabricObject<
       // 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.x,
       zoomY: objectScale.y,
       x: neededX,
@@ -479,61 +475,28 @@ export class FabricObject<
   _updateCacheCanvas() {
     const canvas = this._cacheCanvas!,
       context = this._cacheContext,
-      dims = this._limitCacheSize(this._getCacheCanvasDimensions()),
-      minCacheSize = config.minCacheSideLimit,
-      width = dims.width,
-      height = dims.height,
-      zoomX = dims.zoomX,
-      zoomY = dims.zoomY,
+      { width, height, zoomX, zoomY, x, y } = this._limitCacheSize(
+        this._getCacheCanvasDimensions(),
+      ),
       dimensionsChanged = width !== canvas.width || height !== canvas.height,
       zoomChanged = this.zoomX !== zoomX || this.zoomY !== zoomY;
 
     if (!canvas || !context) {
       return false;
     }
 
-    let drawingWidth,
-      drawingHeight,
-      shouldRedraw = dimensionsChanged || zoomChanged,
-      additionalWidth = 0,
-      additionalHeight = 0,
-      shouldResizeCanvas = false;
-
-    if (dimensionsChanged) {
-      const canvasWidth = (this._cacheCanvas as HTMLCanvasElement).width,
-        canvasHeight = (this._cacheCanvas as HTMLCanvasElement).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;
-      }
-    }
-    if (isTextObject(this) && this.path) {
-      shouldRedraw = true;
-      shouldResizeCanvas = true;
-      // IMHO in those lines we are using zoomX and zoomY not the this version.
-      additionalWidth += this.getHeightOfLine(0) * this.zoomX!;
-      additionalHeight += this.getHeightOfLine(0) * this.zoomY!;
-    }
+    const shouldRedraw = dimensionsChanged || zoomChanged;
+
     if (shouldRedraw) {
-      if (shouldResizeCanvas) {
-        canvas.width = Math.ceil(width + additionalWidth);
-        canvas.height = Math.ceil(height + additionalHeight);
+      if (width !== canvas.width || height !== canvas.height) {
+        canvas.width = width;
+        canvas.height = height;
       } else {
         context.setTransform(1, 0, 0, 1, 0, 0);
         context.clearRect(0, 0, canvas.width, canvas.height);
       }
-      drawingWidth = dims.x / 2;
-      drawingHeight = dims.y / 2;
+      const drawingWidth = x / 2;
+      const drawingHeight = y / 2;
       this.cacheTranslationX =
         Math.round(canvas.width / 2 - drawingWidth) + drawingWidth;
       this.cacheTranslationY =