@nasser-sw/fabric 7.0.1-beta22 → 7.0.1-beta23

package/dist/index.mjs

@@ -354,7 +354,7 @@ class Cache {
 }
 const cache = new Cache();
 
-var version = "7.0.1-beta21";
+var version = "7.0.1-beta22";
 
 // use this syntax so babel plugin see this import here
 const VERSION = version;
@@ -30983,6 +30983,13 @@ class Frame extends Group {
     this._editModeObjectCaching = this.objectCaching;
     this.objectCaching = false;
 
+    // Force clear any existing cache
+    this.dirty = true;
+    if (this._cacheCanvas) {
+      this._cacheCanvas = null;
+      this._cacheContext = null;
+    }
+
     // Enable sub-target interaction so clicks go through to content
     this.subTargetCheck = true;
     this.interactive = true;
@@ -30993,19 +31000,25 @@ class Frame extends Group {
     const minScale = this._calculateCoverScale(originalWidth, originalHeight);
 
     // Make content image interactive with scale constraint
+    // Also disable its caching to ensure it renders fully
     this._contentImage.set({
       selectable: true,
       evented: true,
       hasControls: true,
       hasBorders: true,
       minScaleLimit: minScale,
-      lockScalingFlip: true
+      lockScalingFlip: true,
+      objectCaching: false
     });
+    this._contentImage.dirty = true;
 
-    // Store clip path but keep rendering it for the overlay effect
+    // Keep clipPath reference for the overlay effect rendering
+    // NOTE: We do NOT set this.clipPath = undefined because that triggers
+    // coordinate recalculations in Fabric that behave differently with
+    // viewport transforms (autoZoom), causing visual position jumps.
+    // Instead, we override drawObject() to skip clipPath rendering in edit mode.
     if (this.clipPath) {
       this._editModeClipPath = this.clipPath;
-      this.clipPath = undefined;
     }
 
     // Add constraint handlers for moving/scaling
@@ -31097,6 +31110,38 @@ class Frame extends Group {
       this._boundConstrainScale = undefined;
     }
   }
+  /**
+   * Override shouldCache to prevent caching during edit mode.
+   * This ensures the full image is rendered without cache-based clipping.
+   * @override
+   */
+  shouldCache() {
+    if (this.isEditMode) {
+      this.ownCaching = false;
+      return false;
+    }
+    return super.shouldCache();
+  }
+
+  /**
+   * Override drawObject to skip clipPath rendering during edit mode.
+   * This prevents coordinate recalculation issues with viewport transforms.
+   * @override
+   */
+  drawObject(ctx, forClipping, context) {
+    this._renderBackground(ctx);
+    for (let i = 0; i < this._objects.length; i++) {
+      const obj = this._objects[i];
+      if (obj.group === this) {
+        obj.render(ctx);
+      }
+    }
+    // Skip clipPath rendering in edit mode to show full image
+    if (!this.isEditMode) {
+      this._drawClipPath(ctx, this.clipPath, context);
+    }
+  }
+
   /**
    * Custom render to show edit mode overlay
    * @override
@@ -31243,21 +31288,17 @@ class Frame extends Group {
       contentScale: currentScale
     };
 
-    // Make content non-interactive again
+    // Make content non-interactive again and restore caching
     this._contentImage.set({
       selectable: false,
       evented: false,
       hasControls: false,
-      hasBorders: false
+      hasBorders: false,
+      objectCaching: true
     });
 
-    // Restore clip path
-    if (this._editModeClipPath) {
-      this.clipPath = this._editModeClipPath;
-      this._editModeClipPath = undefined;
-    } else {
-      this._updateClipPath();
-    }
+    // Clear edit mode clip path reference (clipPath was never removed, just skipped during render)
+    this._editModeClipPath = undefined;
 
     // Restore caching setting
     if (this._editModeObjectCaching !== undefined) {