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

package/dist/package.json.min.mjs

@@ -1,2 +1,2 @@
-var a="7.0.1-beta19";export{a as version};
+var a="7.0.1-beta20";export{a as version};
 //# sourceMappingURL=package.json.min.mjs.map

package/dist/package.json.mjs

@@ -1,4 +1,4 @@
-var version = "7.0.1-beta19";
+var version = "7.0.1-beta21";
 
 export { version };
 //# sourceMappingURL=package.json.mjs.map

package/dist/src/shapes/Frame.d.ts

@@ -103,6 +103,11 @@ export declare class Frame extends Group {
      * @private
      */
     private _placeholder;
+    /**
+     * Stored objectCaching value before edit mode
+     * @private
+     */
+    private _editModeObjectCaching?;
     static ownDefaults: Partial<TClassProperties<Frame>>;
     static getDefaults(): Record<string, any>;
     /**

package/dist/src/shapes/Frame.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Frame.d.ts","sourceRoot":"","sources":["../../../src/shapes/Frame.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Frame.d.ts","sourceRoot":"","sources":["../../../src/shapes/Frame.ts"],"names":[],"mappings":"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"}

package/dist/src/shapes/Frame.min.mjs

@@ -1,2 +1,2 @@
-import{defineProperty as t}from"../../_virtual/_rollupPluginBabelHelpers.min.mjs";import{Group as e}from"./Group.min.mjs";import{Rect as i}from"./Rect.min.mjs";import{Circle as a}from"./Circle.min.mjs";import{Path as s}from"./Path.min.mjs";import{FabricImage as r}from"./Image.min.mjs";import{classRegistry as n}from"../ClassRegistry.min.mjs";import{LayoutManager as o}from"../LayoutManager/LayoutManager.min.mjs";import{FrameLayout as h}from"../LayoutManager/LayoutStrategies/FrameLayout.min.mjs";import{enlivenObjects as l,enlivenObjectEnlivables as c}from"../util/misc/objectEnlive.min.mjs";import{Control as d}from"../controls/Control.min.mjs";import{getLocalPoint as m}from"../controls/util.min.mjs";import{wrapWithFireEvent as f}from"../controls/wrapWithFireEvent.min.mjs";import{wrapWithFixedAnchor as g}from"../controls/wrapWithFixedAnchor.min.mjs";import{RESIZING as u}from"../constants.min.mjs";const v={frameWidth:200,frameHeight:200,frameShape:"rect",frameBorderRadius:0,isEditMode:!1,placeholderText:"Drop image here",placeholderColor:"#d0d0d0",frameMeta:{contentScale:1,contentOffsetX:0,contentOffsetY:0}};class p extends e{static getDefaults(){return{...super.getDefaults(),...p.ownDefaults}}constructor(){var e,i,a;let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};const n=new o(new h);super(s,{...r,layoutManager:n}),t(this,"_contentImage",null),t(this,"_placeholder",null),t(this,"_boundConstrainMove",void 0),t(this,"_boundConstrainScale",void 0),t(this,"_editModeClipPath",void 0),Object.assign(this,p.ownDefaults),this.setOptions(r);const l=v.frameMeta||{};this.frameMeta={contentScale:null!==(e=l.contentScale)&&void 0!==e?e:1,contentOffsetX:null!==(i=l.contentOffsetX)&&void 0!==i?i:0,contentOffsetY:null!==(a=l.contentOffsetY)&&void 0!==a?a:0,...r.frameMeta},this.set({width:this.frameWidth,height:this.frameHeight}),this._updateClipPath(),0===s.length&&this._createPlaceholder(),this._setupResizeControls()}_setupResizeControls(){const t=f(u,g((t,e,i,a)=>{const s=e.target,r=m(e,e.originX,e.originY,i,a),n=s.frameWidth,o=s.frameHeight,h=Math.max(20,Math.abs(r.x)),l=Math.max(20,Math.abs(r.y));return!(Math.abs(n-h)<1&&Math.abs(o-l)<1)&&(s.frameWidth=h,s.frameHeight=l,s.width=h,s.height=l,s._updateClipPath(),s._adjustContentAfterResize(),!0)})),e=f(u,g((t,e,i,a)=>{const s=e.target,r=m(e,e.originX,e.originY,i,a),n=s.frameWidth,o=Math.max(20,Math.abs(r.x));return!(Math.abs(n-o)<1)&&(s.frameWidth=o,s.width=o,s._updateClipPath(),s._adjustContentAfterResize(),!0)})),i=f(u,g((t,e,i,a)=>{const s=e.target,r=m(e,e.originX,e.originY,i,a),n=s.frameHeight,o=Math.max(20,Math.abs(r.y));return!(Math.abs(n-o)<1)&&(s.frameHeight=o,s.height=o,s._updateClipPath(),s._adjustContentAfterResize(),!0)}));if(!this.controls)return void console.warn("Frame: controls not initialized yet");["tl","tr","bl","br"].forEach(e=>{const i=this.controls[e];i&&(this.controls[e]=new d({x:i.x,y:i.y,cursorStyleHandler:i.cursorStyleHandler,actionHandler:t,actionName:"resizing"}))});["ml","mr"].forEach(t=>{const i=this.controls[t];i&&(this.controls[t]=new d({x:i.x,y:i.y,cursorStyleHandler:i.cursorStyleHandler,actionHandler:e,actionName:"resizing",render:i.render,sizeX:i.sizeX,sizeY:i.sizeY}))});["mt","mb"].forEach(t=>{const e=this.controls[t];e&&(this.controls[t]=new d({x:e.x,y:e.y,cursorStyleHandler:e.cursorStyleHandler,actionHandler:i,actionName:"resizing",render:e.render,sizeX:e.sizeX,sizeY:e.sizeY}))})}_adjustContentAfterResize(){if(this._placeholder&&this._placeholder.set({width:this.frameWidth,height:this.frameHeight}),this._contentImage){var t,e,i,a,s,r,n;const o=this._contentImage,h=null!==(t=null!==(e=this.frameMeta.originalWidth)&&void 0!==e?e:o.width)&&void 0!==t?t:100,l=null!==(i=null!==(a=this.frameMeta.originalHeight)&&void 0!==a?a:o.height)&&void 0!==i?i:100;let c=null!==(s=o.scaleX)&&void 0!==s?s:1,d=null!==(r=o.left)&&void 0!==r?r:0,m=null!==(n=o.top)&&void 0!==n?n:0;const f=this._calculateCoverScale(h,l);if(c<f){const t=f/c;d*=t,m*=t,c=f,o.set({scaleX:c,scaleY:c}),this.frameMeta={...this.frameMeta,contentScale:c}}const g=h*c/2,u=l*c/2,v=this.frameWidth/2,p=this.frameHeight/2,M=Math.max(0,g-v),_=Math.max(0,u-p),C=Math.abs(d)>M,b=Math.abs(m)>_;C&&(d=Math.max(-M,Math.min(M,d))),b&&(m=Math.max(-_,Math.min(_,m))),(C||b)&&(o.set({left:d,top:m}),this.frameMeta={...this.frameMeta,contentOffsetX:d,contentOffsetY:m}),o.setCoords()}this.setCoords()}_updateClipPath(){let t;switch(this.frameShape){case"circle":{const e=Math.min(this.frameWidth,this.frameHeight)/2;t=new a({radius:e,originX:"center",originY:"center",left:0,top:0});break}case"rounded-rect":t=new i({width:this.frameWidth,height:this.frameHeight,rx:this.frameBorderRadius,ry:this.frameBorderRadius,originX:"center",originY:"center",left:0,top:0});break;case"custom":if(this.frameCustomPath){t=new s(this.frameCustomPath,{originX:"center",originY:"center",left:0,top:0});const e=t.getBoundingRect(),i=this.frameWidth/e.width,a=this.frameHeight/e.height;t.set({scaleX:i,scaleY:a})}else t=new i({width:this.frameWidth,height:this.frameHeight,originX:"center",originY:"center",left:0,top:0});break;default:t=new i({width:this.frameWidth,height:this.frameHeight,originX:"center",originY:"center",left:0,top:0})}this.clipPath=t,this.set("dirty",!0)}_createPlaceholder(){this._placeholder&&(super.remove(this._placeholder),this._placeholder=null);const t=new i({width:this.frameWidth,height:this.frameHeight,fill:this.placeholderColor,originX:"center",originY:"center",left:0,top:0,selectable:!1,evented:!1});this._placeholder=t,super.add(t),this._restoreFixedDimensions()}_removePlaceholder(){this._placeholder&&(super.remove(this._placeholder),this._placeholder=null)}_restoreFixedDimensions(){this.set({width:this.frameWidth,height:this.frameHeight})}async setImage(t){var e,i;let a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};const{crossOrigin:s="anonymous",signal:n}=a,o=await r.fromURL(t,{crossOrigin:s,signal:n}),h=null!==(e=o.width)&&void 0!==e?e:100,l=null!==(i=o.height)&&void 0!==i?i:100,c=this._calculateCoverScale(h,l);o.set({scaleX:c,scaleY:c,originX:"center",originY:"center",left:0,top:0,selectable:!1,evented:!1}),this._clearContent(),this._contentImage=o,super.add(o),this._contentImage.set({left:0,top:0}),this.frameMeta={...this.frameMeta,contentScale:c,contentOffsetX:0,contentOffsetY:0,imageSrc:t,originalWidth:h,originalHeight:l},this._restoreFixedDimensions(),this.setCoords(),this._contentImage.setCoords(),this.set("dirty",!0)}setImageObject(t){var e,i;const a=null!==(e=t.width)&&void 0!==e?e:100,s=null!==(i=t.height)&&void 0!==i?i:100,r=this._calculateCoverScale(a,s);t.set({scaleX:r,scaleY:r,originX:"center",originY:"center",left:0,top:0,selectable:!1,evented:!1}),this._clearContent(),this._contentImage=t,super.add(t),this.frameMeta={...this.frameMeta,contentScale:r,contentOffsetX:0,contentOffsetY:0,imageSrc:t.getSrc(),originalWidth:a,originalHeight:s},this._restoreFixedDimensions(),this.set("dirty",!0)}_calculateCoverScale(t,e){const i=this.frameWidth/t,a=this.frameHeight/e;return Math.max(i,a)}_clearContent(){this._removePlaceholder(),this._contentImage&&(super.remove(this._contentImage),this._contentImage=null);this.getObjects().forEach(t=>super.remove(t))}clearContent(){this._clearContent(),this._createPlaceholder(),this.frameMeta={contentScale:1,contentOffsetX:0,contentOffsetY:0},this.set("dirty",!0)}hasContent(){return null!==this._contentImage}getContentImage(){return this._contentImage}enterEditMode(){var t,e,i,a;if(!this._contentImage||this.isEditMode)return;this.isEditMode=!0,this.subTargetCheck=!0,this.interactive=!0;const s=null!==(t=null!==(e=this.frameMeta.originalWidth)&&void 0!==e?e:this._contentImage.width)&&void 0!==t?t:100,r=null!==(i=null!==(a=this.frameMeta.originalHeight)&&void 0!==a?a:this._contentImage.height)&&void 0!==i?i:100,n=this._calculateCoverScale(s,r);this._contentImage.set({selectable:!0,evented:!0,hasControls:!0,hasBorders:!0,minScaleLimit:n,lockScalingFlip:!0}),this.clipPath&&(this._editModeClipPath=this.clipPath,this.clipPath=void 0),this._setupEditModeConstraints(),this.set("dirty",!0),this.canvas&&(this.canvas.setActiveObject(this._contentImage),this.canvas.renderAll()),this.fire("frame:editmode:enter",{target:this})}_setupEditModeConstraints(){if(!this._contentImage||!this.canvas)return;const t=this,e=this._contentImage;this._boundConstrainMove=i=>{var a,s,r,n,o,h,l;if(i.target!==e||!t.isEditMode)return;const c=null!==(a=null!==(s=t.frameMeta.originalWidth)&&void 0!==s?s:e.width)&&void 0!==a?a:100,d=null!==(r=null!==(n=t.frameMeta.originalHeight)&&void 0!==n?n:e.height)&&void 0!==r?r:100,m=null!==(o=e.scaleX)&&void 0!==o?o:1,f=c*m/2,g=d*m/2,u=t.frameWidth/2,v=t.frameHeight/2,p=Math.max(0,f-u),M=Math.max(0,g-v);let _=null!==(h=e.left)&&void 0!==h?h:0,C=null!==(l=e.top)&&void 0!==l?l:0;_=Math.max(-p,Math.min(p,_)),C=Math.max(-M,Math.min(M,C)),e.set({left:_,top:C})},this._boundConstrainScale=i=>{var a,s,r,n,o,h,l;if(i.target!==e||!t.isEditMode)return;const c=null!==(a=null!==(s=t.frameMeta.originalWidth)&&void 0!==s?s:e.width)&&void 0!==a?a:100,d=null!==(r=null!==(n=t.frameMeta.originalHeight)&&void 0!==n?n:e.height)&&void 0!==r?r:100,m=t._calculateCoverScale(c,d);let f=null!==(o=e.scaleX)&&void 0!==o?o:1,g=null!==(h=e.scaleY)&&void 0!==h?h:1;const u=Math.max(m,Math.max(f,g));e.set({scaleX:u,scaleY:u}),null===(l=t._boundConstrainMove)||void 0===l||l.call(t,i)},this.canvas.on("object:moving",this._boundConstrainMove),this.canvas.on("object:scaling",this._boundConstrainScale)}_removeEditModeConstraints(){this.canvas&&(this._boundConstrainMove&&(this.canvas.off("object:moving",this._boundConstrainMove),this._boundConstrainMove=void 0),this._boundConstrainScale&&(this.canvas.off("object:scaling",this._boundConstrainScale),this._boundConstrainScale=void 0))}render(t){super.render(t),this.isEditMode&&this._editModeClipPath&&this._renderEditModeOverlay(t)}_renderEditModeOverlay(t){t.save();const e=this.calcTransformMatrix();t.transform(e[0],e[1],e[2],e[3],e[4],e[5]),t.beginPath();if(t.rect(-2e3,-2e3,4e3,4e3),"circle"===this.frameShape){const e=Math.min(this.frameWidth,this.frameHeight)/2;t.moveTo(e,0),t.arc(0,0,e,0,2*Math.PI,!0)}else if("rounded-rect"===this.frameShape){const e=this.frameWidth/2,i=this.frameHeight/2,a=Math.min(this.frameBorderRadius,e,i);t.moveTo(e,i-a),t.arcTo(e,-i,e-a,-i,a),t.arcTo(-e,-i,-e,-i+a,a),t.arcTo(-e,i,-e+a,i,a),t.arcTo(e,i,e,i-a,a),t.closePath()}else{const e=this.frameWidth/2,i=this.frameHeight/2;t.moveTo(e,-i),t.lineTo(-e,-i),t.lineTo(-e,i),t.lineTo(e,i),t.closePath()}if(t.fillStyle="rgba(0, 0, 0, 0.5)",t.fill("evenodd"),t.beginPath(),"circle"===this.frameShape){const e=Math.min(this.frameWidth,this.frameHeight)/2;t.arc(0,0,e,0,2*Math.PI)}else if("rounded-rect"===this.frameShape){const e=this.frameWidth/2,i=this.frameHeight/2,a=Math.min(this.frameBorderRadius,e,i);t.moveTo(e-a,-i),t.arcTo(e,-i,e,-i+a,a),t.arcTo(e,i,e-a,i,a),t.arcTo(-e,i,-e,i-a,a),t.arcTo(-e,-i,-e+a,-i,a),t.closePath()}else{const e=this.frameWidth/2,i=this.frameHeight/2;t.rect(-e,-i,this.frameWidth,this.frameHeight)}t.strokeStyle="rgba(255, 255, 255, 0.8)",t.lineWidth=2,t.stroke(),t.setLineDash([5,5]),t.strokeStyle="rgba(0, 150, 255, 0.8)",t.lineWidth=1,t.stroke(),t.restore()}exitEditMode(){var t,e,i,a,s,r,n,o;if(!this._contentImage||!this.isEditMode)return;this.isEditMode=!1,this._removeEditModeConstraints(),this.subTargetCheck=!1,this.interactive=!1;const h=null!==(t=this._contentImage.left)&&void 0!==t?t:0,l=null!==(e=this._contentImage.top)&&void 0!==e?e:0,c=null!==(i=this._contentImage.scaleX)&&void 0!==i?i:1,d=null!==(a=this._contentImage.scaleY)&&void 0!==a?a:1,m=null!==(s=null!==(r=this.frameMeta.originalWidth)&&void 0!==r?r:this._contentImage.width)&&void 0!==s?s:100,f=null!==(n=null!==(o=this.frameMeta.originalHeight)&&void 0!==o?o:this._contentImage.height)&&void 0!==n?n:100,g=Math.max(c,d),u=m*g/2,v=f*g/2,p=this.frameWidth/2,M=this.frameHeight/2,_=Math.max(0,u-p),C=Math.max(0,v-M),b=Math.max(-_,Math.min(_,h)),S=Math.max(-C,Math.min(C,l));this._contentImage.set({left:b,top:S}),this.frameMeta={...this.frameMeta,contentOffsetX:b,contentOffsetY:S,contentScale:g},this._contentImage.set({selectable:!1,evented:!1,hasControls:!1,hasBorders:!1}),this._editModeClipPath?(this.clipPath=this._editModeClipPath,this._editModeClipPath=void 0):this._updateClipPath(),this.set("dirty",!0),this.canvas&&(this.canvas.setActiveObject(this),this.canvas.renderAll()),this.fire("frame:editmode:exit",{target:this})}toggleEditMode(){this.isEditMode?this.exitEditMode():this.enterEditMode()}resizeFrame(t,e){let i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};const{maintainAspect:a=!1}=i;if(a){const i=this.frameWidth/this.frameHeight;t/e>i?e=t/i:t=e*i}this.frameWidth=t,this.frameHeight=e,super.set({width:this.frameWidth,height:this.frameHeight}),this._updateClipPath(),this._adjustContentAfterResize(),this.set("dirty",!0),this.setCoords()}setFrameShape(t,e){this.frameShape=t,e&&(this.frameCustomPath=e),this._updateClipPath(),this.set("dirty",!0)}setBorderRadius(t){this.frameBorderRadius=t,"rounded-rect"===this.frameShape&&(this._updateClipPath(),this.set("dirty",!0))}add(){const t=super.add(...arguments);return this._restoreFixedDimensions(),t}remove(){const t=super.remove(...arguments);return this._restoreFixedDimensions(),t}insertAt(t){for(var e=arguments.length,i=new Array(e>1?e-1:0),a=1;a<e;a++)i[a-1]=arguments[a];const s=super.insertAt(t,...i);return this._restoreFixedDimensions(),s}toObject(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];return{...super.toObject(t),frameWidth:this.frameWidth,frameHeight:this.frameHeight,frameShape:this.frameShape,frameBorderRadius:this.frameBorderRadius,frameCustomPath:this.frameCustomPath,frameMeta:{...this.frameMeta},isEditMode:!1,placeholderText:this.placeholderText,placeholderColor:this.placeholderColor}}static fromObject(t,e){const{objects:i=[],layoutManager:a,frameWidth:s,frameHeight:r,frameShape:n,frameBorderRadius:o,frameCustomPath:h,frameMeta:d,placeholderText:m,placeholderColor:f,...g}=t;return Promise.all([l(i,e),c(g,e)]).then(t=>{var e,i,a;let[l,c]=t;const u=new p([],{...g,...c,frameWidth:s,frameHeight:r,frameShape:n,frameBorderRadius:o,frameCustomPath:h,frameMeta:d?{contentScale:null!==(e=d.contentScale)&&void 0!==e?e:1,contentOffsetX:null!==(i=d.contentOffsetX)&&void 0!==i?i:0,contentOffsetY:null!==(a=d.contentOffsetY)&&void 0!==a?a:0,...d}:void 0,placeholderText:m,placeholderColor:f});return null!=d&&d.imageSrc&&u.setImage(d.imageSrc).then(()=>{var t,e,i,a;u._contentImage&&u._contentImage.set({left:null!==(t=d.contentOffsetX)&&void 0!==t?t:0,top:null!==(e=d.contentOffsetY)&&void 0!==e?e:0,scaleX:null!==(i=d.contentScale)&&void 0!==i?i:1,scaleY:null!==(a=d.contentScale)&&void 0!==a?a:1});u.set("dirty",!0)}).catch(t=>{console.warn("Failed to restore frame image:",t)}),u})}static createWithAspect(t){var e,i,a;let s,r,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:200,o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};switch(t){case"16:9":s=n,r=n*(9/16);break;case"9:16":s=n*(9/16),r=n;break;case"4:5":s=.8*n,r=n;break;case"4:3":s=n,r=n*(3/4);break;case"3:4":s=n*(3/4),r=n;break;default:s=n,r=n}const h=v.frameMeta||{};return new p([],{...o,frameWidth:s,frameHeight:r,frameMeta:{contentScale:null!==(e=h.contentScale)&&void 0!==e?e:1,contentOffsetX:null!==(i=h.contentOffsetX)&&void 0!==i?i:0,contentOffsetY:null!==(a=h.contentOffsetY)&&void 0!==a?a:0,aspect:t,...o.frameMeta}})}}t(p,"type","Frame"),t(p,"ownDefaults",v),n.setClass(p),n.setClass(p,"frame");export{p as Frame,v as frameDefaultValues};
+import{defineProperty as t}from"../../_virtual/_rollupPluginBabelHelpers.min.mjs";import{Group as e}from"./Group.min.mjs";import{Rect as i}from"./Rect.min.mjs";import{Circle as a}from"./Circle.min.mjs";import{Path as s}from"./Path.min.mjs";import{FabricImage as r}from"./Image.min.mjs";import{classRegistry as o}from"../ClassRegistry.min.mjs";import{LayoutManager as n}from"../LayoutManager/LayoutManager.min.mjs";import{FrameLayout as h}from"../LayoutManager/LayoutStrategies/FrameLayout.min.mjs";import{enlivenObjects as l,enlivenObjectEnlivables as d}from"../util/misc/objectEnlive.min.mjs";import{Control as c}from"../controls/Control.min.mjs";import{getLocalPoint as m}from"../controls/util.min.mjs";import{wrapWithFireEvent as f}from"../controls/wrapWithFireEvent.min.mjs";import{wrapWithFixedAnchor as g}from"../controls/wrapWithFixedAnchor.min.mjs";import{RESIZING as u}from"../constants.min.mjs";const v={frameWidth:200,frameHeight:200,frameShape:"rect",frameBorderRadius:0,isEditMode:!1,placeholderText:"Drop image here",placeholderColor:"#d0d0d0",frameMeta:{contentScale:1,contentOffsetX:0,contentOffsetY:0}};class p extends e{static getDefaults(){return{...super.getDefaults(),...p.ownDefaults}}constructor(){var e,i,a;let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};const o=new n(new h);super(s,{...r,layoutManager:o}),t(this,"_contentImage",null),t(this,"_placeholder",null),t(this,"_editModeOriginalWidth",void 0),t(this,"_editModeOriginalHeight",void 0),t(this,"_boundConstrainMove",void 0),t(this,"_boundConstrainScale",void 0),t(this,"_editModeClipPath",void 0),Object.assign(this,p.ownDefaults),this.setOptions(r);const l=v.frameMeta||{};this.frameMeta={contentScale:null!==(e=l.contentScale)&&void 0!==e?e:1,contentOffsetX:null!==(i=l.contentOffsetX)&&void 0!==i?i:0,contentOffsetY:null!==(a=l.contentOffsetY)&&void 0!==a?a:0,...r.frameMeta},this.set({width:this.frameWidth,height:this.frameHeight}),this._updateClipPath(),0===s.length&&this._createPlaceholder(),this._setupResizeControls()}_setupResizeControls(){const t=f(u,g((t,e,i,a)=>{const s=e.target,r=m(e,e.originX,e.originY,i,a),o=s.frameWidth,n=s.frameHeight,h=Math.max(20,Math.abs(r.x)),l=Math.max(20,Math.abs(r.y));return!(Math.abs(o-h)<1&&Math.abs(n-l)<1)&&(s.frameWidth=h,s.frameHeight=l,s.width=h,s.height=l,s._updateClipPath(),s._adjustContentAfterResize(),!0)})),e=f(u,g((t,e,i,a)=>{const s=e.target,r=m(e,e.originX,e.originY,i,a),o=s.frameWidth,n=Math.max(20,Math.abs(r.x));return!(Math.abs(o-n)<1)&&(s.frameWidth=n,s.width=n,s._updateClipPath(),s._adjustContentAfterResize(),!0)})),i=f(u,g((t,e,i,a)=>{const s=e.target,r=m(e,e.originX,e.originY,i,a),o=s.frameHeight,n=Math.max(20,Math.abs(r.y));return!(Math.abs(o-n)<1)&&(s.frameHeight=n,s.height=n,s._updateClipPath(),s._adjustContentAfterResize(),!0)}));if(!this.controls)return void console.warn("Frame: controls not initialized yet");["tl","tr","bl","br"].forEach(e=>{const i=this.controls[e];i&&(this.controls[e]=new c({x:i.x,y:i.y,cursorStyleHandler:i.cursorStyleHandler,actionHandler:t,actionName:"resizing"}))});["ml","mr"].forEach(t=>{const i=this.controls[t];i&&(this.controls[t]=new c({x:i.x,y:i.y,cursorStyleHandler:i.cursorStyleHandler,actionHandler:e,actionName:"resizing",render:i.render,sizeX:i.sizeX,sizeY:i.sizeY}))});["mt","mb"].forEach(t=>{const e=this.controls[t];e&&(this.controls[t]=new c({x:e.x,y:e.y,cursorStyleHandler:e.cursorStyleHandler,actionHandler:i,actionName:"resizing",render:e.render,sizeX:e.sizeX,sizeY:e.sizeY}))})}_adjustContentAfterResize(){if(this._placeholder&&this._placeholder.set({width:this.frameWidth,height:this.frameHeight}),this._contentImage){var t,e,i,a,s,r,o;const n=this._contentImage,h=null!==(t=null!==(e=this.frameMeta.originalWidth)&&void 0!==e?e:n.width)&&void 0!==t?t:100,l=null!==(i=null!==(a=this.frameMeta.originalHeight)&&void 0!==a?a:n.height)&&void 0!==i?i:100;let d=null!==(s=n.scaleX)&&void 0!==s?s:1,c=null!==(r=n.left)&&void 0!==r?r:0,m=null!==(o=n.top)&&void 0!==o?o:0;const f=this._calculateCoverScale(h,l);if(d<f){const t=f/d;c*=t,m*=t,d=f,n.set({scaleX:d,scaleY:d}),this.frameMeta={...this.frameMeta,contentScale:d}}const g=h*d/2,u=l*d/2,v=this.frameWidth/2,p=this.frameHeight/2,M=Math.max(0,g-v),_=Math.max(0,u-p),C=Math.abs(c)>M,b=Math.abs(m)>_;C&&(c=Math.max(-M,Math.min(M,c))),b&&(m=Math.max(-_,Math.min(_,m))),(C||b)&&(n.set({left:c,top:m}),this.frameMeta={...this.frameMeta,contentOffsetX:c,contentOffsetY:m}),n.setCoords()}this.setCoords()}_updateClipPath(){let t;switch(this.frameShape){case"circle":{const e=Math.min(this.frameWidth,this.frameHeight)/2;t=new a({radius:e,originX:"center",originY:"center",left:0,top:0});break}case"rounded-rect":t=new i({width:this.frameWidth,height:this.frameHeight,rx:this.frameBorderRadius,ry:this.frameBorderRadius,originX:"center",originY:"center",left:0,top:0});break;case"custom":if(this.frameCustomPath){t=new s(this.frameCustomPath,{originX:"center",originY:"center",left:0,top:0});const e=t.getBoundingRect(),i=this.frameWidth/e.width,a=this.frameHeight/e.height;t.set({scaleX:i,scaleY:a})}else t=new i({width:this.frameWidth,height:this.frameHeight,originX:"center",originY:"center",left:0,top:0});break;default:t=new i({width:this.frameWidth,height:this.frameHeight,originX:"center",originY:"center",left:0,top:0})}this.clipPath=t,this.set("dirty",!0)}_createPlaceholder(){this._placeholder&&(super.remove(this._placeholder),this._placeholder=null);const t=new i({width:this.frameWidth,height:this.frameHeight,fill:this.placeholderColor,originX:"center",originY:"center",left:0,top:0,selectable:!1,evented:!1});this._placeholder=t,super.add(t),this._restoreFixedDimensions()}_removePlaceholder(){this._placeholder&&(super.remove(this._placeholder),this._placeholder=null)}_restoreFixedDimensions(){this.set({width:this.frameWidth,height:this.frameHeight})}async setImage(t){var e,i;let a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};const{crossOrigin:s="anonymous",signal:o}=a,n=await r.fromURL(t,{crossOrigin:s,signal:o}),h=null!==(e=n.width)&&void 0!==e?e:100,l=null!==(i=n.height)&&void 0!==i?i:100,d=this._calculateCoverScale(h,l);n.set({scaleX:d,scaleY:d,originX:"center",originY:"center",left:0,top:0,selectable:!1,evented:!1}),this._clearContent(),this._contentImage=n,super.add(n),this._contentImage.set({left:0,top:0}),this.frameMeta={...this.frameMeta,contentScale:d,contentOffsetX:0,contentOffsetY:0,imageSrc:t,originalWidth:h,originalHeight:l},this._restoreFixedDimensions(),this.setCoords(),this._contentImage.setCoords(),this.set("dirty",!0)}setImageObject(t){var e,i;const a=null!==(e=t.width)&&void 0!==e?e:100,s=null!==(i=t.height)&&void 0!==i?i:100,r=this._calculateCoverScale(a,s);t.set({scaleX:r,scaleY:r,originX:"center",originY:"center",left:0,top:0,selectable:!1,evented:!1}),this._clearContent(),this._contentImage=t,super.add(t),this.frameMeta={...this.frameMeta,contentScale:r,contentOffsetX:0,contentOffsetY:0,imageSrc:t.getSrc(),originalWidth:a,originalHeight:s},this._restoreFixedDimensions(),this.set("dirty",!0)}_calculateCoverScale(t,e){const i=this.frameWidth/t,a=this.frameHeight/e;return Math.max(i,a)}_clearContent(){this._removePlaceholder(),this._contentImage&&(super.remove(this._contentImage),this._contentImage=null);this.getObjects().forEach(t=>super.remove(t))}clearContent(){this._clearContent(),this._createPlaceholder(),this.frameMeta={contentScale:1,contentOffsetX:0,contentOffsetY:0},this.set("dirty",!0)}hasContent(){return null!==this._contentImage}getContentImage(){return this._contentImage}enterEditMode(){var t,e,i,a,s;if(!this._contentImage||this.isEditMode)return;this.isEditMode=!0,this.subTargetCheck=!0,this.interactive=!0;const r=null!==(t=null!==(e=this.frameMeta.originalWidth)&&void 0!==e?e:this._contentImage.width)&&void 0!==t?t:100,o=null!==(i=null!==(a=this.frameMeta.originalHeight)&&void 0!==a?a:this._contentImage.height)&&void 0!==i?i:100,n=this._calculateCoverScale(r,o);this._contentImage.set({selectable:!0,evented:!0,hasControls:!0,hasBorders:!0,minScaleLimit:n,lockScalingFlip:!0}),this.clipPath&&(this._editModeClipPath=this.clipPath,this.clipPath=void 0);const h=null!==(s=this._contentImage.scaleX)&&void 0!==s?s:1,l=r*h,d=o*h;this._editModeOriginalWidth=this.width,this._editModeOriginalHeight=this.height;const c=Math.max(this.frameWidth,l)+100,m=Math.max(this.frameHeight,d)+100;super.set({width:c,height:m}),this._setupEditModeConstraints(),this.set("dirty",!0),this.canvas&&(this.canvas.setActiveObject(this._contentImage),this.canvas.renderAll()),this.fire("frame:editmode:enter",{target:this})}_setupEditModeConstraints(){if(!this._contentImage||!this.canvas)return;const t=this,e=this._contentImage;this._boundConstrainMove=i=>{var a,s,r,o,n,h,l;if(i.target!==e||!t.isEditMode)return;const d=null!==(a=null!==(s=t.frameMeta.originalWidth)&&void 0!==s?s:e.width)&&void 0!==a?a:100,c=null!==(r=null!==(o=t.frameMeta.originalHeight)&&void 0!==o?o:e.height)&&void 0!==r?r:100,m=null!==(n=e.scaleX)&&void 0!==n?n:1,f=d*m/2,g=c*m/2,u=t.frameWidth/2,v=t.frameHeight/2,p=Math.max(0,f-u),M=Math.max(0,g-v);let _=null!==(h=e.left)&&void 0!==h?h:0,C=null!==(l=e.top)&&void 0!==l?l:0;_=Math.max(-p,Math.min(p,_)),C=Math.max(-M,Math.min(M,C)),e.set({left:_,top:C})},this._boundConstrainScale=i=>{var a,s,r,o,n,h,l;if(i.target!==e||!t.isEditMode)return;const d=null!==(a=null!==(s=t.frameMeta.originalWidth)&&void 0!==s?s:e.width)&&void 0!==a?a:100,c=null!==(r=null!==(o=t.frameMeta.originalHeight)&&void 0!==o?o:e.height)&&void 0!==r?r:100,m=t._calculateCoverScale(d,c);let f=null!==(n=e.scaleX)&&void 0!==n?n:1,g=null!==(h=e.scaleY)&&void 0!==h?h:1;const u=Math.max(m,Math.max(f,g));e.set({scaleX:u,scaleY:u}),null===(l=t._boundConstrainMove)||void 0===l||l.call(t,i)},this.canvas.on("object:moving",this._boundConstrainMove),this.canvas.on("object:scaling",this._boundConstrainScale)}_removeEditModeConstraints(){this.canvas&&(this._boundConstrainMove&&(this.canvas.off("object:moving",this._boundConstrainMove),this._boundConstrainMove=void 0),this._boundConstrainScale&&(this.canvas.off("object:scaling",this._boundConstrainScale),this._boundConstrainScale=void 0))}render(t){super.render(t),this.isEditMode&&this._editModeClipPath&&this._renderEditModeOverlay(t)}_renderEditModeOverlay(t){t.save();const e=this.calcTransformMatrix();t.transform(e[0],e[1],e[2],e[3],e[4],e[5]),t.beginPath();if(t.rect(-2e3,-2e3,4e3,4e3),"circle"===this.frameShape){const e=Math.min(this.frameWidth,this.frameHeight)/2;t.moveTo(e,0),t.arc(0,0,e,0,2*Math.PI,!0)}else if("rounded-rect"===this.frameShape){const e=this.frameWidth/2,i=this.frameHeight/2,a=Math.min(this.frameBorderRadius,e,i);t.moveTo(e,i-a),t.arcTo(e,-i,e-a,-i,a),t.arcTo(-e,-i,-e,-i+a,a),t.arcTo(-e,i,-e+a,i,a),t.arcTo(e,i,e,i-a,a),t.closePath()}else{const e=this.frameWidth/2,i=this.frameHeight/2;t.moveTo(e,-i),t.lineTo(-e,-i),t.lineTo(-e,i),t.lineTo(e,i),t.closePath()}if(t.fillStyle="rgba(0, 0, 0, 0.5)",t.fill("evenodd"),t.beginPath(),"circle"===this.frameShape){const e=Math.min(this.frameWidth,this.frameHeight)/2;t.arc(0,0,e,0,2*Math.PI)}else if("rounded-rect"===this.frameShape){const e=this.frameWidth/2,i=this.frameHeight/2,a=Math.min(this.frameBorderRadius,e,i);t.moveTo(e-a,-i),t.arcTo(e,-i,e,-i+a,a),t.arcTo(e,i,e-a,i,a),t.arcTo(-e,i,-e,i-a,a),t.arcTo(-e,-i,-e+a,-i,a),t.closePath()}else{const e=this.frameWidth/2,i=this.frameHeight/2;t.rect(-e,-i,this.frameWidth,this.frameHeight)}t.strokeStyle="rgba(255, 255, 255, 0.8)",t.lineWidth=2,t.stroke(),t.setLineDash([5,5]),t.strokeStyle="rgba(0, 150, 255, 0.8)",t.lineWidth=1,t.stroke(),t.restore()}exitEditMode(){var t,e,i,a,s,r,o,n;if(!this._contentImage||!this.isEditMode)return;this.isEditMode=!1,this._removeEditModeConstraints(),this.subTargetCheck=!1,this.interactive=!1;const h=null!==(t=this._contentImage.left)&&void 0!==t?t:0,l=null!==(e=this._contentImage.top)&&void 0!==e?e:0,d=null!==(i=this._contentImage.scaleX)&&void 0!==i?i:1,c=null!==(a=this._contentImage.scaleY)&&void 0!==a?a:1,m=null!==(s=null!==(r=this.frameMeta.originalWidth)&&void 0!==r?r:this._contentImage.width)&&void 0!==s?s:100,f=null!==(o=null!==(n=this.frameMeta.originalHeight)&&void 0!==n?n:this._contentImage.height)&&void 0!==o?o:100,g=Math.max(d,c),u=m*g/2,v=f*g/2,p=this.frameWidth/2,M=this.frameHeight/2,_=Math.max(0,u-p),C=Math.max(0,v-M),b=Math.max(-_,Math.min(_,h)),H=Math.max(-C,Math.min(C,l));this._contentImage.set({left:b,top:H}),this.frameMeta={...this.frameMeta,contentOffsetX:b,contentOffsetY:H,contentScale:g},this._contentImage.set({selectable:!1,evented:!1,hasControls:!1,hasBorders:!1}),this._editModeClipPath?(this.clipPath=this._editModeClipPath,this._editModeClipPath=void 0):this._updateClipPath(),void 0!==this._editModeOriginalWidth&&void 0!==this._editModeOriginalHeight?(super.set({width:this._editModeOriginalWidth,height:this._editModeOriginalHeight}),this._editModeOriginalWidth=void 0,this._editModeOriginalHeight=void 0):super.set({width:this.frameWidth,height:this.frameHeight}),this.set("dirty",!0),this.canvas&&(this.canvas.setActiveObject(this),this.canvas.renderAll()),this.fire("frame:editmode:exit",{target:this})}toggleEditMode(){this.isEditMode?this.exitEditMode():this.enterEditMode()}resizeFrame(t,e){let i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};const{maintainAspect:a=!1}=i;if(a){const i=this.frameWidth/this.frameHeight;t/e>i?e=t/i:t=e*i}this.frameWidth=t,this.frameHeight=e,super.set({width:this.frameWidth,height:this.frameHeight}),this._updateClipPath(),this._adjustContentAfterResize(),this.set("dirty",!0),this.setCoords()}setFrameShape(t,e){this.frameShape=t,e&&(this.frameCustomPath=e),this._updateClipPath(),this.set("dirty",!0)}setBorderRadius(t){this.frameBorderRadius=t,"rounded-rect"===this.frameShape&&(this._updateClipPath(),this.set("dirty",!0))}add(){const t=super.add(...arguments);return this._restoreFixedDimensions(),t}remove(){const t=super.remove(...arguments);return this._restoreFixedDimensions(),t}insertAt(t){for(var e=arguments.length,i=new Array(e>1?e-1:0),a=1;a<e;a++)i[a-1]=arguments[a];const s=super.insertAt(t,...i);return this._restoreFixedDimensions(),s}toObject(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];return{...super.toObject(t),frameWidth:this.frameWidth,frameHeight:this.frameHeight,frameShape:this.frameShape,frameBorderRadius:this.frameBorderRadius,frameCustomPath:this.frameCustomPath,frameMeta:{...this.frameMeta},isEditMode:!1,placeholderText:this.placeholderText,placeholderColor:this.placeholderColor}}static fromObject(t,e){const{objects:i=[],layoutManager:a,frameWidth:s,frameHeight:r,frameShape:o,frameBorderRadius:n,frameCustomPath:h,frameMeta:c,placeholderText:m,placeholderColor:f,...g}=t;return Promise.all([l(i,e),d(g,e)]).then(t=>{var e,i,a;let[l,d]=t;const u=new p([],{...g,...d,frameWidth:s,frameHeight:r,frameShape:o,frameBorderRadius:n,frameCustomPath:h,frameMeta:c?{contentScale:null!==(e=c.contentScale)&&void 0!==e?e:1,contentOffsetX:null!==(i=c.contentOffsetX)&&void 0!==i?i:0,contentOffsetY:null!==(a=c.contentOffsetY)&&void 0!==a?a:0,...c}:void 0,placeholderText:m,placeholderColor:f});return null!=c&&c.imageSrc&&u.setImage(c.imageSrc).then(()=>{var t,e,i,a;u._contentImage&&u._contentImage.set({left:null!==(t=c.contentOffsetX)&&void 0!==t?t:0,top:null!==(e=c.contentOffsetY)&&void 0!==e?e:0,scaleX:null!==(i=c.contentScale)&&void 0!==i?i:1,scaleY:null!==(a=c.contentScale)&&void 0!==a?a:1});u.set("dirty",!0)}).catch(t=>{console.warn("Failed to restore frame image:",t)}),u})}static createWithAspect(t){var e,i,a;let s,r,o=arguments.length>1&&void 0!==arguments[1]?arguments[1]:200,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};switch(t){case"16:9":s=o,r=o*(9/16);break;case"9:16":s=o*(9/16),r=o;break;case"4:5":s=.8*o,r=o;break;case"4:3":s=o,r=o*(3/4);break;case"3:4":s=o*(3/4),r=o;break;default:s=o,r=o}const h=v.frameMeta||{};return new p([],{...n,frameWidth:s,frameHeight:r,frameMeta:{contentScale:null!==(e=h.contentScale)&&void 0!==e?e:1,contentOffsetX:null!==(i=h.contentOffsetX)&&void 0!==i?i:0,contentOffsetY:null!==(a=h.contentOffsetY)&&void 0!==a?a:0,aspect:t,...n.frameMeta}})}}t(p,"type","Frame"),t(p,"ownDefaults",v),o.setClass(p),o.setClass(p,"frame");export{p as Frame,v as frameDefaultValues};
 //# sourceMappingURL=Frame.min.mjs.map

package/dist/src/shapes/Frame.min.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Frame.min.mjs","sources":["../../../src/shapes/Frame.ts"],"sourcesContent":["import type { TClassProperties, TOptions, Abortable, TCrossOrigin } from '../typedefs';\r\nimport type { FabricObject } from './Object/FabricObject';\r\nimport type { GroupProps, SerializedGroupProps } from './Group';\r\nimport type { TPointerEvent, Transform, TransformActionHandler } from '../EventTypeDefs';\r\nimport { Group } from './Group';\r\nimport { Rect } from './Rect';\r\nimport { Circle } from './Circle';\r\nimport { Path } from './Path';\r\nimport { FabricImage } from './Image';\r\nimport { classRegistry } from '../ClassRegistry';\r\nimport { LayoutManager } from '../LayoutManager/LayoutManager';\r\nimport { FrameLayout } from '../LayoutManager/LayoutStrategies/FrameLayout';\r\nimport { enlivenObjects, enlivenObjectEnlivables } from '../util/misc/objectEnlive';\r\nimport { Control } from '../controls/Control';\r\nimport { getLocalPoint } from '../controls/util';\r\nimport { wrapWithFireEvent } from '../controls/wrapWithFireEvent';\r\nimport { wrapWithFixedAnchor } from '../controls/wrapWithFixedAnchor';\r\nimport { RESIZING } from '../constants';\r\n\r\n/**\r\n * Frame shape types supported out of the box\r\n */\r\nexport type FrameShapeType = 'rect' | 'circle' | 'rounded-rect' | 'custom';\r\n\r\n/**\r\n * Frame metadata for persistence and state management\r\n */\r\nexport interface FrameMeta {\r\n  /** Aspect ratio label (e.g., '16:9', '1:1', '4:5') */\r\n  aspect?: string;\r\n  /** Content scale factor for cover scaling */\r\n  contentScale?: number;\r\n  /** X offset of content within frame */\r\n  contentOffsetX?: number;\r\n  /** Y offset of content within frame */\r\n  contentOffsetY?: number;\r\n  /** Source URL of the current image */\r\n  imageSrc?: string;\r\n  /** Original image dimensions */\r\n  originalWidth?: number;\r\n  /** Original image dimensions */\r\n  originalHeight?: number;\r\n}\r\n\r\n/**\r\n * Frame-specific properties\r\n */\r\nexport interface FrameOwnProps {\r\n  /** Fixed width of the frame */\r\n  frameWidth: number;\r\n  /** Fixed height of the frame */\r\n  frameHeight: number;\r\n  /** Shape type for the clip mask */\r\n  frameShape: FrameShapeType;\r\n  /** Border radius for rounded-rect shape */\r\n  frameBorderRadius: number;\r\n  /** Custom SVG path for custom shape */\r\n  frameCustomPath?: string;\r\n  /** Frame metadata for content positioning */\r\n  frameMeta: FrameMeta;\r\n  /** Whether the frame is in edit mode (content can be repositioned) */\r\n  isEditMode: boolean;\r\n  /** Placeholder text shown when frame is empty */\r\n  placeholderText: string;\r\n  /** Placeholder background color */\r\n  placeholderColor: string;\r\n}\r\n\r\nexport interface SerializedFrameProps extends SerializedGroupProps, FrameOwnProps {}\r\n\r\nexport interface FrameProps extends GroupProps, FrameOwnProps {}\r\n\r\nexport const frameDefaultValues: Partial<TClassProperties<Frame>> = {\r\n  frameWidth: 200,\r\n  frameHeight: 200,\r\n  frameShape: 'rect',\r\n  frameBorderRadius: 0,\r\n  isEditMode: false,\r\n  placeholderText: 'Drop image here',\r\n  placeholderColor: '#d0d0d0',\r\n  frameMeta: {\r\n    contentScale: 1,\r\n    contentOffsetX: 0,\r\n    contentOffsetY: 0,\r\n  },\r\n};\r\n\r\n/**\r\n * Frame class - A Canva-like frame container for images\r\n *\r\n * Features:\r\n * - Fixed dimensions that don't change when content is added/removed\r\n * - Multiple shape types (rect, circle, rounded-rect, custom SVG path)\r\n * - Cover scaling: images fill the frame completely, overflow is clipped\r\n * - Double-click edit mode: reposition/zoom content within frame\r\n * - Drag & drop support for replacing images\r\n * - Full serialization/deserialization support\r\n *\r\n * @example\r\n * ```ts\r\n * // Create a rectangular frame\r\n * const frame = new Frame([], {\r\n *   frameWidth: 300,\r\n *   frameHeight: 200,\r\n *   frameShape: 'rect',\r\n *   left: 100,\r\n *   top: 100,\r\n * });\r\n *\r\n * // Add image with cover scaling\r\n * await frame.setImage('https://example.com/image.jpg');\r\n *\r\n * canvas.add(frame);\r\n * ```\r\n */\r\nexport class Frame extends Group {\r\n  static type = 'Frame';\r\n\r\n  declare frameWidth: number;\r\n  declare frameHeight: number;\r\n  declare frameShape: FrameShapeType;\r\n  declare frameBorderRadius: number;\r\n  declare frameCustomPath?: string;\r\n  declare frameMeta: FrameMeta;\r\n  declare isEditMode: boolean;\r\n  declare placeholderText: string;\r\n  declare placeholderColor: string;\r\n\r\n  /**\r\n   * Reference to the content image\r\n   * @private\r\n   */\r\n  private _contentImage: FabricImage | null = null;\r\n\r\n  /**\r\n   * Reference to the placeholder object\r\n   * @private\r\n   */\r\n  private _placeholder: FabricObject | null = null;\r\n\r\n  static ownDefaults = frameDefaultValues;\r\n\r\n  static getDefaults(): Record<string, any> {\r\n    return {\r\n      ...super.getDefaults(),\r\n      ...Frame.ownDefaults,\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Constructor\r\n   * @param objects - Initial objects (typically empty for frames)\r\n   * @param options - Frame configuration options\r\n   */\r\n  constructor(\r\n    objects: FabricObject[] = [],\r\n    options: Partial<FrameProps> = {}\r\n  ) {\r\n    // Set up the frame layout manager before calling super\r\n    const frameLayoutManager = new LayoutManager(new FrameLayout());\r\n\r\n    super(objects, {\r\n      ...options,\r\n      layoutManager: frameLayoutManager,\r\n    });\r\n\r\n    // Apply defaults\r\n    Object.assign(this, Frame.ownDefaults);\r\n\r\n    // Apply user options\r\n    this.setOptions(options);\r\n\r\n    // Ensure frameMeta is properly initialized with defaults\r\n    const defaultMeta = frameDefaultValues.frameMeta || {};\r\n    this.frameMeta = {\r\n      contentScale: defaultMeta.contentScale ?? 1,\r\n      contentOffsetX: defaultMeta.contentOffsetX ?? 0,\r\n      contentOffsetY: defaultMeta.contentOffsetY ?? 0,\r\n      ...options.frameMeta,\r\n    };\r\n\r\n    // Set fixed dimensions\r\n    this.set({\r\n      width: this.frameWidth,\r\n      height: this.frameHeight,\r\n    });\r\n\r\n    // Create clip path based on shape\r\n    this._updateClipPath();\r\n\r\n    // Create placeholder if no content\r\n    if (objects.length === 0) {\r\n      this._createPlaceholder();\r\n    }\r\n\r\n    // Set up custom resize controls (instead of scale controls)\r\n    this._setupResizeControls();\r\n  }\r\n\r\n  /**\r\n   * Sets up custom controls that resize instead of scale\r\n   * This is the key to Canva-like behavior - corners resize the frame dimensions\r\n   * instead of scaling the entire group (which would stretch the image)\r\n   * @private\r\n   */\r\n  private _setupResizeControls(): void {\r\n    // Helper to change width (like changeObjectWidth but for frames)\r\n    // Note: wrapWithFixedAnchor sets origin to opposite corner, so localPoint.x IS the new width\r\n    const changeFrameWidth: TransformActionHandler = (\r\n      eventData,\r\n      transform,\r\n      x,\r\n      y\r\n    ): boolean => {\r\n      const target = transform.target as Frame;\r\n      const localPoint = getLocalPoint(\r\n        transform,\r\n        transform.originX,\r\n        transform.originY,\r\n        x,\r\n        y\r\n      );\r\n\r\n      const oldWidth = target.frameWidth;\r\n      // localPoint.x is distance from anchor (opposite side) to mouse = new width\r\n      const newWidth = Math.max(20, Math.abs(localPoint.x));\r\n\r\n      if (Math.abs(oldWidth - newWidth) < 1) return false;\r\n\r\n      target.frameWidth = newWidth;\r\n      target.width = newWidth;\r\n      target._updateClipPath();\r\n      target._adjustContentAfterResize();\r\n\r\n      return true;\r\n    };\r\n\r\n    // Helper to change height\r\n    const changeFrameHeight: TransformActionHandler = (\r\n      eventData,\r\n      transform,\r\n      x,\r\n      y\r\n    ): boolean => {\r\n      const target = transform.target as Frame;\r\n      const localPoint = getLocalPoint(\r\n        transform,\r\n        transform.originX,\r\n        transform.originY,\r\n        x,\r\n        y\r\n      );\r\n\r\n      const oldHeight = target.frameHeight;\r\n      const newHeight = Math.max(20, Math.abs(localPoint.y));\r\n\r\n      if (Math.abs(oldHeight - newHeight) < 1) return false;\r\n\r\n      target.frameHeight = newHeight;\r\n      target.height = newHeight;\r\n      target._updateClipPath();\r\n      target._adjustContentAfterResize();\r\n\r\n      return true;\r\n    };\r\n\r\n    // Helper to change both width and height (corners)\r\n    const changeFrameSize: TransformActionHandler = (\r\n      eventData,\r\n      transform,\r\n      x,\r\n      y\r\n    ): boolean => {\r\n      const target = transform.target as Frame;\r\n      const localPoint = getLocalPoint(\r\n        transform,\r\n        transform.originX,\r\n        transform.originY,\r\n        x,\r\n        y\r\n      );\r\n\r\n      const oldWidth = target.frameWidth;\r\n      const oldHeight = target.frameHeight;\r\n      const newWidth = Math.max(20, Math.abs(localPoint.x));\r\n      const newHeight = Math.max(20, Math.abs(localPoint.y));\r\n\r\n      if (Math.abs(oldWidth - newWidth) < 1 && Math.abs(oldHeight - newHeight) < 1) return false;\r\n\r\n      target.frameWidth = newWidth;\r\n      target.frameHeight = newHeight;\r\n      target.width = newWidth;\r\n      target.height = newHeight;\r\n      target._updateClipPath();\r\n      target._adjustContentAfterResize();\r\n\r\n      return true;\r\n    };\r\n\r\n    // Create wrapped handlers\r\n    const resizeFromCorner = wrapWithFireEvent(\r\n      RESIZING,\r\n      wrapWithFixedAnchor(changeFrameSize)\r\n    );\r\n\r\n    const resizeX = wrapWithFireEvent(\r\n      RESIZING,\r\n      wrapWithFixedAnchor(changeFrameWidth)\r\n    );\r\n\r\n    const resizeY = wrapWithFireEvent(\r\n      RESIZING,\r\n      wrapWithFixedAnchor(changeFrameHeight)\r\n    );\r\n\r\n    // Guard: ensure controls exist\r\n    if (!this.controls) {\r\n      console.warn('Frame: controls not initialized yet');\r\n      return;\r\n    }\r\n\r\n    // Override corner controls - use resize instead of scale\r\n    const cornerControls = ['tl', 'tr', 'bl', 'br'] as const;\r\n    cornerControls.forEach((corner) => {\r\n      const existing = this.controls[corner];\r\n      if (existing) {\r\n        this.controls[corner] = new Control({\r\n          x: existing.x,\r\n          y: existing.y,\r\n          cursorStyleHandler: existing.cursorStyleHandler,\r\n          actionHandler: resizeFromCorner,\r\n          actionName: 'resizing',\r\n        });\r\n      }\r\n    });\r\n\r\n    // Override side controls for horizontal resize\r\n    const horizontalControls = ['ml', 'mr'] as const;\r\n    horizontalControls.forEach((corner) => {\r\n      const existing = this.controls[corner];\r\n      if (existing) {\r\n        this.controls[corner] = new Control({\r\n          x: existing.x,\r\n          y: existing.y,\r\n          cursorStyleHandler: existing.cursorStyleHandler,\r\n          actionHandler: resizeX,\r\n          actionName: 'resizing',\r\n          render: existing.render, // Keep the global pill renderer\r\n          sizeX: existing.sizeX,\r\n          sizeY: existing.sizeY,\r\n        });\r\n      }\r\n    });\r\n\r\n    // Override side controls for vertical resize\r\n    const verticalControls = ['mt', 'mb'] as const;\r\n    verticalControls.forEach((corner) => {\r\n      const existing = this.controls[corner];\r\n      if (existing) {\r\n        this.controls[corner] = new Control({\r\n          x: existing.x,\r\n          y: existing.y,\r\n          cursorStyleHandler: existing.cursorStyleHandler,\r\n          actionHandler: resizeY,\r\n          actionName: 'resizing',\r\n          render: existing.render, // Keep the global pill renderer\r\n          sizeX: existing.sizeX,\r\n          sizeY: existing.sizeY,\r\n        });\r\n      }\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Adjusts content after a resize operation (called from set override)\r\n   * @private\r\n   */\r\n  private _adjustContentAfterResize(): void {\r\n    // Update placeholder if present (simple rect)\r\n    if (this._placeholder) {\r\n      this._placeholder.set({\r\n        width: this.frameWidth,\r\n        height: this.frameHeight,\r\n      });\r\n    }\r\n\r\n    // Adjust content image (Canva-like behavior)\r\n    if (this._contentImage) {\r\n      const img = this._contentImage;\r\n      const originalWidth = this.frameMeta.originalWidth ?? img.width ?? 100;\r\n      const originalHeight = this.frameMeta.originalHeight ?? img.height ?? 100;\r\n\r\n      // Current image scale and position - preserve user's position\r\n      let currentScale = img.scaleX ?? 1;\r\n      let imgCenterX = img.left ?? 0;\r\n      let imgCenterY = img.top ?? 0;\r\n\r\n      // Check if current scale still covers the frame\r\n      const minScaleForCover = this._calculateCoverScale(originalWidth, originalHeight);\r\n\r\n      if (currentScale < minScaleForCover) {\r\n        // Image is too small to cover frame - scale up proportionally\r\n        // But try to keep the same visual center point\r\n        const scaleRatio = minScaleForCover / currentScale;\r\n\r\n        // Scale position proportionally to maintain visual anchor\r\n        imgCenterX = imgCenterX * scaleRatio;\r\n        imgCenterY = imgCenterY * scaleRatio;\r\n        currentScale = minScaleForCover;\r\n\r\n        img.set({\r\n          scaleX: currentScale,\r\n          scaleY: currentScale,\r\n        });\r\n\r\n        this.frameMeta = {\r\n          ...this.frameMeta,\r\n          contentScale: currentScale,\r\n        };\r\n      }\r\n\r\n      // Now constrain position only if needed to prevent empty space\r\n      const scaledImgHalfW = (originalWidth * currentScale) / 2;\r\n      const scaledImgHalfH = (originalHeight * currentScale) / 2;\r\n      const frameHalfW = this.frameWidth / 2;\r\n      const frameHalfH = this.frameHeight / 2;\r\n\r\n      // Calculate how much the image can move while still covering the frame\r\n      const maxOffsetX = Math.max(0, scaledImgHalfW - frameHalfW);\r\n      const maxOffsetY = Math.max(0, scaledImgHalfH - frameHalfH);\r\n\r\n      // Only constrain if position would show empty space\r\n      const needsConstraintX = Math.abs(imgCenterX) > maxOffsetX;\r\n      const needsConstraintY = Math.abs(imgCenterY) > maxOffsetY;\r\n\r\n      if (needsConstraintX) {\r\n        imgCenterX = Math.max(-maxOffsetX, Math.min(maxOffsetX, imgCenterX));\r\n      }\r\n      if (needsConstraintY) {\r\n        imgCenterY = Math.max(-maxOffsetY, Math.min(maxOffsetY, imgCenterY));\r\n      }\r\n\r\n      if (needsConstraintX || needsConstraintY) {\r\n        img.set({\r\n          left: imgCenterX,\r\n          top: imgCenterY,\r\n        });\r\n\r\n        this.frameMeta = {\r\n          ...this.frameMeta,\r\n          contentOffsetX: imgCenterX,\r\n          contentOffsetY: imgCenterY,\r\n        };\r\n      }\r\n\r\n      img.setCoords();\r\n    }\r\n\r\n    this.setCoords();\r\n  }\r\n\r\n  /**\r\n   * Updates the clip path based on the current frame shape\r\n   * @private\r\n   */\r\n  private _updateClipPath(): void {\r\n    let clipPath: FabricObject;\r\n\r\n    switch (this.frameShape) {\r\n      case 'circle': {\r\n        const radius = Math.min(this.frameWidth, this.frameHeight) / 2;\r\n        clipPath = new Circle({\r\n          radius,\r\n          originX: 'center',\r\n          originY: 'center',\r\n          left: 0,\r\n          top: 0,\r\n        });\r\n        break;\r\n      }\r\n\r\n      case 'rounded-rect': {\r\n        clipPath = new Rect({\r\n          width: this.frameWidth,\r\n          height: this.frameHeight,\r\n          rx: this.frameBorderRadius,\r\n          ry: this.frameBorderRadius,\r\n          originX: 'center',\r\n          originY: 'center',\r\n          left: 0,\r\n          top: 0,\r\n        });\r\n        break;\r\n      }\r\n\r\n      case 'custom': {\r\n        if (this.frameCustomPath) {\r\n          clipPath = new Path(this.frameCustomPath, {\r\n            originX: 'center',\r\n            originY: 'center',\r\n            left: 0,\r\n            top: 0,\r\n          });\r\n          // Scale custom path to fit frame\r\n          const pathBounds = clipPath.getBoundingRect();\r\n          const scaleX = this.frameWidth / pathBounds.width;\r\n          const scaleY = this.frameHeight / pathBounds.height;\r\n          clipPath.set({ scaleX, scaleY });\r\n        } else {\r\n          // Fallback to rect if no custom path\r\n          clipPath = new Rect({\r\n            width: this.frameWidth,\r\n            height: this.frameHeight,\r\n            originX: 'center',\r\n            originY: 'center',\r\n            left: 0,\r\n            top: 0,\r\n          });\r\n        }\r\n        break;\r\n      }\r\n\r\n      case 'rect':\r\n      default: {\r\n        clipPath = new Rect({\r\n          width: this.frameWidth,\r\n          height: this.frameHeight,\r\n          originX: 'center',\r\n          originY: 'center',\r\n          left: 0,\r\n          top: 0,\r\n        });\r\n        break;\r\n      }\r\n    }\r\n\r\n    this.clipPath = clipPath;\r\n    this.set('dirty', true);\r\n  }\r\n\r\n  /**\r\n   * Creates a placeholder element for empty frames\r\n   * Shows a colored rectangle - users can customize via placeholderColor\r\n   * @private\r\n   */\r\n  private _createPlaceholder(): void {\r\n    // Remove existing placeholder if any\r\n    if (this._placeholder) {\r\n      super.remove(this._placeholder);\r\n      this._placeholder = null;\r\n    }\r\n\r\n    // Create placeholder background\r\n    const placeholder = new Rect({\r\n      width: this.frameWidth,\r\n      height: this.frameHeight,\r\n      fill: this.placeholderColor,\r\n      originX: 'center',\r\n      originY: 'center',\r\n      left: 0,\r\n      top: 0,\r\n      selectable: false,\r\n      evented: false,\r\n    });\r\n\r\n    this._placeholder = placeholder;\r\n    super.add(placeholder);\r\n\r\n    // Ensure dimensions remain fixed\r\n    this._restoreFixedDimensions();\r\n  }\r\n\r\n  /**\r\n   * Removes the placeholder element\r\n   * @private\r\n   */\r\n  private _removePlaceholder(): void {\r\n    if (this._placeholder) {\r\n      super.remove(this._placeholder);\r\n      this._placeholder = null;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Restores the fixed frame dimensions\r\n   * @private\r\n   */\r\n  private _restoreFixedDimensions(): void {\r\n    this.set({\r\n      width: this.frameWidth,\r\n      height: this.frameHeight,\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Sets an image in the frame with cover scaling\r\n   *\r\n   * @param src - Image source URL\r\n   * @param options - Optional loading options\r\n   * @returns Promise that resolves when the image is loaded and set\r\n   *\r\n   * @example\r\n   * ```ts\r\n   * await frame.setImage('https://example.com/photo.jpg');\r\n   * canvas.renderAll();\r\n   * ```\r\n   */\r\n  async setImage(\r\n    src: string,\r\n    options: { crossOrigin?: TCrossOrigin; signal?: AbortSignal } = {}\r\n  ): Promise<void> {\r\n    const { crossOrigin = 'anonymous', signal } = options;\r\n\r\n    // Load the image\r\n    const image = await FabricImage.fromURL(src, { crossOrigin, signal });\r\n\r\n    // Get original dimensions\r\n    const originalWidth = image.width ?? 100;\r\n    const originalHeight = image.height ?? 100;\r\n\r\n    // Calculate cover scale\r\n    const scale = this._calculateCoverScale(originalWidth, originalHeight);\r\n\r\n    // Configure image for frame\r\n    image.set({\r\n      scaleX: scale,\r\n      scaleY: scale,\r\n      originX: 'center',\r\n      originY: 'center',\r\n      left: 0,\r\n      top: 0,\r\n      selectable: false,\r\n      evented: false,\r\n    });\r\n\r\n    // Remove existing content\r\n    this._clearContent();\r\n\r\n    // Add new image\r\n    this._contentImage = image;\r\n    super.add(image);\r\n\r\n    // Force re-center the image after adding (layout might have moved it)\r\n    this._contentImage.set({\r\n      left: 0,\r\n      top: 0,\r\n    });\r\n\r\n    // Update metadata\r\n    this.frameMeta = {\r\n      ...this.frameMeta,\r\n      contentScale: scale,\r\n      contentOffsetX: 0,\r\n      contentOffsetY: 0,\r\n      imageSrc: src,\r\n      originalWidth,\r\n      originalHeight,\r\n    };\r\n\r\n    // Restore dimensions (in case Group recalculated them)\r\n    this._restoreFixedDimensions();\r\n\r\n    // Force recalculation of coordinates\r\n    this.setCoords();\r\n    this._contentImage.setCoords();\r\n\r\n    this.set('dirty', true);\r\n  }\r\n\r\n  /**\r\n   * Sets an image from an existing FabricImage object\r\n   *\r\n   * @param image - FabricImage instance\r\n   */\r\n  setImageObject(image: FabricImage): void {\r\n    const originalWidth = image.width ?? 100;\r\n    const originalHeight = image.height ?? 100;\r\n\r\n    // Calculate cover scale\r\n    const scale = this._calculateCoverScale(originalWidth, originalHeight);\r\n\r\n    // Configure image for frame\r\n    image.set({\r\n      scaleX: scale,\r\n      scaleY: scale,\r\n      originX: 'center',\r\n      originY: 'center',\r\n      left: 0,\r\n      top: 0,\r\n      selectable: false,\r\n      evented: false,\r\n    });\r\n\r\n    // Remove existing content\r\n    this._clearContent();\r\n\r\n    // Add new image\r\n    this._contentImage = image;\r\n    super.add(image);\r\n\r\n    // Update metadata\r\n    this.frameMeta = {\r\n      ...this.frameMeta,\r\n      contentScale: scale,\r\n      contentOffsetX: 0,\r\n      contentOffsetY: 0,\r\n      imageSrc: image.getSrc(),\r\n      originalWidth,\r\n      originalHeight,\r\n    };\r\n\r\n    // Restore dimensions\r\n    this._restoreFixedDimensions();\r\n\r\n    this.set('dirty', true);\r\n  }\r\n\r\n  /**\r\n   * Calculates the cover scale factor for an image\r\n   * Cover scaling ensures the image fills the frame completely\r\n   *\r\n   * @param imageWidth - Original image width\r\n   * @param imageHeight - Original image height\r\n   * @returns Scale factor to apply\r\n   * @private\r\n   */\r\n  private _calculateCoverScale(imageWidth: number, imageHeight: number): number {\r\n    const scaleX = this.frameWidth / imageWidth;\r\n    const scaleY = this.frameHeight / imageHeight;\r\n    return Math.max(scaleX, scaleY);\r\n  }\r\n\r\n  /**\r\n   * Clears all content from the frame\r\n   * @private\r\n   */\r\n  private _clearContent(): void {\r\n    // Remove placeholder\r\n    this._removePlaceholder();\r\n\r\n    // Remove content image\r\n    if (this._contentImage) {\r\n      super.remove(this._contentImage);\r\n      this._contentImage = null;\r\n    }\r\n\r\n    // Clear any other objects\r\n    const objects = this.getObjects();\r\n    objects.forEach((obj) => super.remove(obj));\r\n  }\r\n\r\n  /**\r\n   * Clears the frame content and shows placeholder\r\n   */\r\n  clearContent(): void {\r\n    this._clearContent();\r\n    this._createPlaceholder();\r\n\r\n    // Reset metadata\r\n    this.frameMeta = {\r\n      contentScale: 1,\r\n      contentOffsetX: 0,\r\n      contentOffsetY: 0,\r\n    };\r\n\r\n    this.set('dirty', true);\r\n  }\r\n\r\n  /**\r\n   * Checks if the frame has image content\r\n   */\r\n  hasContent(): boolean {\r\n    return this._contentImage !== null;\r\n  }\r\n\r\n  /**\r\n   * Gets the current content image\r\n   */\r\n  getContentImage(): FabricImage | null {\r\n    return this._contentImage;\r\n  }\r\n\r\n  /**\r\n   * Enters edit mode for repositioning content within the frame\r\n   * In edit mode, the content image can be dragged and scaled\r\n   */\r\n  enterEditMode(): void {\r\n    if (!this._contentImage || this.isEditMode) {\r\n      return;\r\n    }\r\n\r\n    this.isEditMode = true;\r\n\r\n    // Enable sub-target interaction so clicks go through to content\r\n    this.subTargetCheck = true;\r\n    this.interactive = true;\r\n\r\n    // Calculate minimum scale to cover frame\r\n    const originalWidth = this.frameMeta.originalWidth ?? this._contentImage.width ?? 100;\r\n    const originalHeight = this.frameMeta.originalHeight ?? this._contentImage.height ?? 100;\r\n    const minScale = this._calculateCoverScale(originalWidth, originalHeight);\r\n\r\n    // Make content image interactive with scale constraint\r\n    this._contentImage.set({\r\n      selectable: true,\r\n      evented: true,\r\n      hasControls: true,\r\n      hasBorders: true,\r\n      minScaleLimit: minScale,\r\n      lockScalingFlip: true,\r\n    });\r\n\r\n    // Store clip path but keep rendering it for the overlay effect\r\n    if (this.clipPath) {\r\n      this._editModeClipPath = this.clipPath as FabricObject;\r\n      this.clipPath = undefined;\r\n    }\r\n\r\n    // Add constraint handlers for moving/scaling\r\n    this._setupEditModeConstraints();\r\n\r\n    this.set('dirty', true);\r\n\r\n    // Select the content image on the canvas\r\n    if (this.canvas) {\r\n      this.canvas.setActiveObject(this._contentImage);\r\n      this.canvas.renderAll();\r\n    }\r\n\r\n    // Fire custom event\r\n    (this as any).fire('frame:editmode:enter', { target: this });\r\n  }\r\n\r\n  /**\r\n   * Bound constraint handler references for cleanup\r\n   * @private\r\n   */\r\n  private _boundConstrainMove?: (e: any) => void;\r\n  private _boundConstrainScale?: (e: any) => void;\r\n\r\n  /**\r\n   * Sets up constraints for edit mode - prevents gaps\r\n   * @private\r\n   */\r\n  private _setupEditModeConstraints(): void {\r\n    if (!this._contentImage || !this.canvas) return;\r\n\r\n    const frame = this;\r\n    const img = this._contentImage;\r\n\r\n    // Constrain movement to prevent gaps\r\n    this._boundConstrainMove = (e: any) => {\r\n      if (e.target !== img || !frame.isEditMode) return;\r\n\r\n      const originalWidth = frame.frameMeta.originalWidth ?? img.width ?? 100;\r\n      const originalHeight = frame.frameMeta.originalHeight ?? img.height ?? 100;\r\n      const currentScale = img.scaleX ?? 1;\r\n\r\n      const scaledImgHalfW = (originalWidth * currentScale) / 2;\r\n      const scaledImgHalfH = (originalHeight * currentScale) / 2;\r\n      const frameHalfW = frame.frameWidth / 2;\r\n      const frameHalfH = frame.frameHeight / 2;\r\n\r\n      const maxOffsetX = Math.max(0, scaledImgHalfW - frameHalfW);\r\n      const maxOffsetY = Math.max(0, scaledImgHalfH - frameHalfH);\r\n\r\n      let left = img.left ?? 0;\r\n      let top = img.top ?? 0;\r\n\r\n      // Constrain position\r\n      left = Math.max(-maxOffsetX, Math.min(maxOffsetX, left));\r\n      top = Math.max(-maxOffsetY, Math.min(maxOffsetY, top));\r\n\r\n      img.set({ left, top });\r\n    };\r\n\r\n    // Constrain scaling to prevent gaps\r\n    this._boundConstrainScale = (e: any) => {\r\n      if (e.target !== img || !frame.isEditMode) return;\r\n\r\n      const originalWidth = frame.frameMeta.originalWidth ?? img.width ?? 100;\r\n      const originalHeight = frame.frameMeta.originalHeight ?? img.height ?? 100;\r\n      const minScale = frame._calculateCoverScale(originalWidth, originalHeight);\r\n\r\n      let scaleX = img.scaleX ?? 1;\r\n      let scaleY = img.scaleY ?? 1;\r\n\r\n      // Ensure uniform scaling and minimum scale\r\n      const scale = Math.max(minScale, Math.max(scaleX, scaleY));\r\n      img.set({ scaleX: scale, scaleY: scale });\r\n\r\n      // Also constrain position after scale\r\n      frame._boundConstrainMove?.(e);\r\n    };\r\n\r\n    this.canvas.on('object:moving', this._boundConstrainMove);\r\n    this.canvas.on('object:scaling', this._boundConstrainScale);\r\n  }\r\n\r\n  /**\r\n   * Removes edit mode constraint handlers\r\n   * @private\r\n   */\r\n  private _removeEditModeConstraints(): void {\r\n    if (!this.canvas) return;\r\n\r\n    if (this._boundConstrainMove) {\r\n      this.canvas.off('object:moving', this._boundConstrainMove);\r\n      this._boundConstrainMove = undefined;\r\n    }\r\n    if (this._boundConstrainScale) {\r\n      this.canvas.off('object:scaling', this._boundConstrainScale);\r\n      this._boundConstrainScale = undefined;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Stored clip path before edit mode\r\n   * @private\r\n   */\r\n  private _editModeClipPath?: FabricObject;\r\n\r\n  /**\r\n   * Custom render to show edit mode overlay\r\n   * @override\r\n   */\r\n  render(ctx: CanvasRenderingContext2D): void {\r\n    super.render(ctx);\r\n\r\n    // Draw edit mode overlay if in edit mode\r\n    if (this.isEditMode && this._editModeClipPath) {\r\n      this._renderEditModeOverlay(ctx);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Renders the edit mode overlay - dims area outside frame, shows frame border\r\n   * @private\r\n   */\r\n  private _renderEditModeOverlay(ctx: CanvasRenderingContext2D): void {\r\n    ctx.save();\r\n\r\n    // Apply the group's transform\r\n    const m = this.calcTransformMatrix();\r\n    ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]);\r\n\r\n    // Draw semi-transparent overlay on the OUTSIDE of the frame\r\n    // We do this by drawing a large rect and cutting out the frame shape\r\n    ctx.beginPath();\r\n\r\n    // Large outer rectangle (covers the whole image area)\r\n    const padding = 2000; // Large enough to cover any overflow\r\n    ctx.rect(-padding, -padding, padding * 2, padding * 2);\r\n\r\n    // Cut out the frame shape (counter-clockwise to create hole)\r\n    if (this.frameShape === 'circle') {\r\n      const radius = Math.min(this.frameWidth, this.frameHeight) / 2;\r\n      ctx.moveTo(radius, 0);\r\n      ctx.arc(0, 0, radius, 0, Math.PI * 2, true);\r\n    } else if (this.frameShape === 'rounded-rect') {\r\n      const w = this.frameWidth / 2;\r\n      const h = this.frameHeight / 2;\r\n      const r = Math.min(this.frameBorderRadius, w, h);\r\n      ctx.moveTo(w, h - r);\r\n      ctx.arcTo(w, -h, w - r, -h, r);\r\n      ctx.arcTo(-w, -h, -w, -h + r, r);\r\n      ctx.arcTo(-w, h, -w + r, h, r);\r\n      ctx.arcTo(w, h, w, h - r, r);\r\n      ctx.closePath();\r\n    } else {\r\n      // Rectangle\r\n      const w = this.frameWidth / 2;\r\n      const h = this.frameHeight / 2;\r\n      ctx.moveTo(w, -h);\r\n      ctx.lineTo(-w, -h);\r\n      ctx.lineTo(-w, h);\r\n      ctx.lineTo(w, h);\r\n      ctx.closePath();\r\n    }\r\n\r\n    // Fill with semi-transparent dark overlay\r\n    ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';\r\n    ctx.fill('evenodd');\r\n\r\n    // Draw frame border\r\n    ctx.beginPath();\r\n    if (this.frameShape === 'circle') {\r\n      const radius = Math.min(this.frameWidth, this.frameHeight) / 2;\r\n      ctx.arc(0, 0, radius, 0, Math.PI * 2);\r\n    } else if (this.frameShape === 'rounded-rect') {\r\n      const w = this.frameWidth / 2;\r\n      const h = this.frameHeight / 2;\r\n      const r = Math.min(this.frameBorderRadius, w, h);\r\n      ctx.moveTo(w - r, -h);\r\n      ctx.arcTo(w, -h, w, -h + r, r);\r\n      ctx.arcTo(w, h, w - r, h, r);\r\n      ctx.arcTo(-w, h, -w, h - r, r);\r\n      ctx.arcTo(-w, -h, -w + r, -h, r);\r\n      ctx.closePath();\r\n    } else {\r\n      const w = this.frameWidth / 2;\r\n      const h = this.frameHeight / 2;\r\n      ctx.rect(-w, -h, this.frameWidth, this.frameHeight);\r\n    }\r\n    ctx.strokeStyle = 'rgba(255, 255, 255, 0.8)';\r\n    ctx.lineWidth = 2;\r\n    ctx.stroke();\r\n\r\n    // Draw subtle dashed line for frame boundary\r\n    ctx.setLineDash([5, 5]);\r\n    ctx.strokeStyle = 'rgba(0, 150, 255, 0.8)';\r\n    ctx.lineWidth = 1;\r\n    ctx.stroke();\r\n\r\n    ctx.restore();\r\n  }\r\n\r\n  /**\r\n   * Exits edit mode and saves the content position\r\n   */\r\n  exitEditMode(): void {\r\n    if (!this._contentImage || !this.isEditMode) {\r\n      return;\r\n    }\r\n\r\n    this.isEditMode = false;\r\n\r\n    // Remove constraint handlers\r\n    this._removeEditModeConstraints();\r\n\r\n    // Disable sub-target interaction\r\n    this.subTargetCheck = false;\r\n    this.interactive = false;\r\n\r\n    // Get the current position of the content\r\n    const contentLeft = this._contentImage.left ?? 0;\r\n    const contentTop = this._contentImage.top ?? 0;\r\n    const contentScaleX = this._contentImage.scaleX ?? 1;\r\n    const contentScaleY = this._contentImage.scaleY ?? 1;\r\n\r\n    // Constrain position so image always covers the frame\r\n    const originalWidth = this.frameMeta.originalWidth ?? this._contentImage.width ?? 100;\r\n    const originalHeight = this.frameMeta.originalHeight ?? this._contentImage.height ?? 100;\r\n    const currentScale = Math.max(contentScaleX, contentScaleY);\r\n    const scaledImgHalfW = (originalWidth * currentScale) / 2;\r\n    const scaledImgHalfH = (originalHeight * currentScale) / 2;\r\n    const frameHalfW = this.frameWidth / 2;\r\n    const frameHalfH = this.frameHeight / 2;\r\n\r\n    // Ensure image covers frame (constrain position)\r\n    const maxOffsetX = Math.max(0, scaledImgHalfW - frameHalfW);\r\n    const maxOffsetY = Math.max(0, scaledImgHalfH - frameHalfH);\r\n    const constrainedLeft = Math.max(-maxOffsetX, Math.min(maxOffsetX, contentLeft));\r\n    const constrainedTop = Math.max(-maxOffsetY, Math.min(maxOffsetY, contentTop));\r\n\r\n    // Apply constrained position\r\n    this._contentImage.set({\r\n      left: constrainedLeft,\r\n      top: constrainedTop,\r\n    });\r\n\r\n    // Update metadata with new offsets and scale\r\n    this.frameMeta = {\r\n      ...this.frameMeta,\r\n      contentOffsetX: constrainedLeft,\r\n      contentOffsetY: constrainedTop,\r\n      contentScale: currentScale,\r\n    };\r\n\r\n    // Make content non-interactive again\r\n    this._contentImage.set({\r\n      selectable: false,\r\n      evented: false,\r\n      hasControls: false,\r\n      hasBorders: false,\r\n    });\r\n\r\n    // Restore clip path\r\n    if (this._editModeClipPath) {\r\n      this.clipPath = this._editModeClipPath;\r\n      this._editModeClipPath = undefined;\r\n    } else {\r\n      this._updateClipPath();\r\n    }\r\n\r\n    this.set('dirty', true);\r\n\r\n    // Re-select the frame itself\r\n    if (this.canvas) {\r\n      this.canvas.setActiveObject(this);\r\n      this.canvas.renderAll();\r\n    }\r\n\r\n    // Fire custom event\r\n    (this as any).fire('frame:editmode:exit', { target: this });\r\n  }\r\n\r\n  /**\r\n   * Toggles edit mode\r\n   */\r\n  toggleEditMode(): void {\r\n    if (this.isEditMode) {\r\n      this.exitEditMode();\r\n    } else {\r\n      this.enterEditMode();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Resizes the frame to new dimensions (Canva-like behavior)\r\n   *\r\n   * Canva behavior:\r\n   * - When frame shrinks: crops more of image (no scale change)\r\n   * - When frame grows: uncrops to show more, preserving position\r\n   * - Only scales up when image can't cover the frame anymore\r\n   *\r\n   * @param width - New frame width\r\n   * @param height - New frame height\r\n   * @param options - Resize options\r\n   */\r\n  resizeFrame(\r\n    width: number,\r\n    height: number,\r\n    options: { maintainAspect?: boolean } = {}\r\n  ): void {\r\n    const { maintainAspect = false } = options;\r\n\r\n    if (maintainAspect) {\r\n      const currentAspect = this.frameWidth / this.frameHeight;\r\n      const newAspect = width / height;\r\n\r\n      if (newAspect > currentAspect) {\r\n        height = width / currentAspect;\r\n      } else {\r\n        width = height * currentAspect;\r\n      }\r\n    }\r\n\r\n    this.frameWidth = width;\r\n    this.frameHeight = height;\r\n\r\n    // Update dimensions using super.set to avoid re-triggering conversion\r\n    super.set({\r\n      width: this.frameWidth,\r\n      height: this.frameHeight,\r\n    });\r\n\r\n    // Update clip path\r\n    this._updateClipPath();\r\n\r\n    // Canva-like content adjustment\r\n    this._adjustContentAfterResize();\r\n\r\n    this.set('dirty', true);\r\n    this.setCoords();\r\n  }\r\n\r\n  /**\r\n   * Sets the frame shape\r\n   *\r\n   * @param shape - Shape type\r\n   * @param customPath - Custom SVG path for 'custom' shape type\r\n   */\r\n  setFrameShape(shape: FrameShapeType, customPath?: string): void {\r\n    this.frameShape = shape;\r\n    if (customPath) {\r\n      this.frameCustomPath = customPath;\r\n    }\r\n    this._updateClipPath();\r\n    this.set('dirty', true);\r\n  }\r\n\r\n  /**\r\n   * Sets the border radius for rounded-rect shape\r\n   *\r\n   * @param radius - Border radius in pixels\r\n   */\r\n  setBorderRadius(radius: number): void {\r\n    this.frameBorderRadius = radius;\r\n    if (this.frameShape === 'rounded-rect') {\r\n      this._updateClipPath();\r\n      this.set('dirty', true);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Override add to maintain fixed dimensions\r\n   */\r\n  add(...objects: FabricObject[]): number {\r\n    const size = super.add(...objects);\r\n    this._restoreFixedDimensions();\r\n    return size;\r\n  }\r\n\r\n  /**\r\n   * Override remove to maintain fixed dimensions\r\n   */\r\n  remove(...objects: FabricObject[]): FabricObject[] {\r\n    const removed = super.remove(...objects);\r\n    this._restoreFixedDimensions();\r\n    return removed;\r\n  }\r\n\r\n  /**\r\n   * Override insertAt to maintain fixed dimensions\r\n   */\r\n  insertAt(index: number, ...objects: FabricObject[]): number {\r\n    const size = super.insertAt(index, ...objects);\r\n    this._restoreFixedDimensions();\r\n    return size;\r\n  }\r\n\r\n  /**\r\n   * Serializes the frame to a plain object\r\n   */\r\n  // @ts-ignore - Frame extends Group's toObject with additional properties\r\n  toObject(propertiesToInclude: string[] = []): any {\r\n    return {\r\n      ...(super.toObject as any)(propertiesToInclude),\r\n      frameWidth: this.frameWidth,\r\n      frameHeight: this.frameHeight,\r\n      frameShape: this.frameShape,\r\n      frameBorderRadius: this.frameBorderRadius,\r\n      frameCustomPath: this.frameCustomPath,\r\n      frameMeta: { ...this.frameMeta },\r\n      isEditMode: false, // Always serialize as not in edit mode\r\n      placeholderText: this.placeholderText,\r\n      placeholderColor: this.placeholderColor,\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Creates a Frame instance from a serialized object\r\n   */\r\n  static fromObject<T extends TOptions<SerializedFrameProps>>(\r\n    object: T,\r\n    abortable?: Abortable\r\n  ): Promise<Frame> {\r\n    const {\r\n      objects = [],\r\n      layoutManager,\r\n      frameWidth,\r\n      frameHeight,\r\n      frameShape,\r\n      frameBorderRadius,\r\n      frameCustomPath,\r\n      frameMeta,\r\n      placeholderText,\r\n      placeholderColor,\r\n      ...groupOptions\r\n    } = object;\r\n\r\n    return Promise.all([\r\n      enlivenObjects<FabricObject>(objects, abortable),\r\n      enlivenObjectEnlivables(groupOptions, abortable),\r\n    ]).then(([enlivenedObjects, hydratedOptions]) => {\r\n      // Create frame with restored options\r\n      const frame = new Frame([], {\r\n        ...groupOptions,\r\n        ...hydratedOptions,\r\n        frameWidth,\r\n        frameHeight,\r\n        frameShape,\r\n        frameBorderRadius,\r\n        frameCustomPath,\r\n        frameMeta: frameMeta ? {\r\n          contentScale: frameMeta.contentScale ?? 1,\r\n          contentOffsetX: frameMeta.contentOffsetX ?? 0,\r\n          contentOffsetY: frameMeta.contentOffsetY ?? 0,\r\n          ...frameMeta,\r\n        } : undefined,\r\n        placeholderText,\r\n        placeholderColor,\r\n      });\r\n\r\n      // If there was an image, restore it\r\n      if (frameMeta?.imageSrc) {\r\n        // Async restoration of image - caller should wait if needed\r\n        frame.setImage(frameMeta.imageSrc).then(() => {\r\n          // Restore content position from metadata\r\n          if (frame._contentImage) {\r\n            frame._contentImage.set({\r\n              left: frameMeta.contentOffsetX ?? 0,\r\n              top: frameMeta.contentOffsetY ?? 0,\r\n              scaleX: frameMeta.contentScale ?? 1,\r\n              scaleY: frameMeta.contentScale ?? 1,\r\n            });\r\n          }\r\n          frame.set('dirty', true);\r\n        }).catch((err) => {\r\n          console.warn('Failed to restore frame image:', err);\r\n        });\r\n      }\r\n\r\n      return frame;\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Creates a Frame with a specific aspect ratio preset\r\n   *\r\n   * @param aspect - Aspect ratio preset (e.g., '16:9', '1:1', '4:5', '9:16')\r\n   * @param size - Base size in pixels\r\n   * @param options - Additional frame options\r\n   */\r\n  static createWithAspect(\r\n    aspect: string,\r\n    size: number = 200,\r\n    options: Partial<FrameProps> = {}\r\n  ): Frame {\r\n    let width: number;\r\n    let height: number;\r\n\r\n    switch (aspect) {\r\n      case '16:9':\r\n        width = size;\r\n        height = size * (9 / 16);\r\n        break;\r\n      case '9:16':\r\n        width = size * (9 / 16);\r\n        height = size;\r\n        break;\r\n      case '4:5':\r\n        width = size * (4 / 5);\r\n        height = size;\r\n        break;\r\n      case '4:3':\r\n        width = size;\r\n        height = size * (3 / 4);\r\n        break;\r\n      case '3:4':\r\n        width = size * (3 / 4);\r\n        height = size;\r\n        break;\r\n      case '1:1':\r\n      default:\r\n        width = size;\r\n        height = size;\r\n        break;\r\n    }\r\n\r\n    const defaultMeta = frameDefaultValues.frameMeta || {};\r\n\r\n    return new Frame([], {\r\n      ...options,\r\n      frameWidth: width,\r\n      frameHeight: height,\r\n      frameMeta: {\r\n        contentScale: defaultMeta.contentScale ?? 1,\r\n        contentOffsetX: defaultMeta.contentOffsetX ?? 0,\r\n        contentOffsetY: defaultMeta.contentOffsetY ?? 0,\r\n        aspect,\r\n        ...options.frameMeta,\r\n      },\r\n    });\r\n  }\r\n}\r\n\r\n// Register the Frame class with the class registry\r\nclassRegistry.setClass(Frame);\r\nclassRegistry.setClass(Frame, 'frame');\r\n"],"names":["frameDefaultValues","frameWidth","frameHeight","frameShape","frameBorderRadius","isEditMode","placeholderText","placeholderColor","frameMeta","contentScale","contentOffsetX","contentOffsetY","Frame","Group","getDefaults","super","ownDefaults","constructor","_defaultMeta$contentS","_defaultMeta$contentO","_defaultMeta$contentO2","objects","arguments","length","undefined","options","frameLayoutManager","LayoutManager","FrameLayout","layoutManager","_defineProperty","this","Object","assign","setOptions","defaultMeta","set","width","height","_updateClipPath","_createPlaceholder","_setupResizeControls","resizeFromCorner","wrapWithFireEvent","RESIZING","wrapWithFixedAnchor","changeFrameSize","eventData","transform","x","y","target","localPoint","getLocalPoint","originX","originY","oldWidth","oldHeight","newWidth","Math","max","abs","newHeight","_adjustContentAfterResize","resizeX","changeFrameWidth","resizeY","changeFrameHeight","controls","console","warn","forEach","corner","existing","Control","cursorStyleHandler","actionHandler","actionName","render","sizeX","sizeY","_placeholder","_contentImage","_ref","_this$frameMeta$origi","_ref2","_this$frameMeta$origi2","_img$scaleX","_img$left","_img$top","img","originalWidth","originalHeight","currentScale","scaleX","imgCenterX","left","imgCenterY","top","minScaleForCover","_calculateCoverScale","scaleRatio","scaleY","scaledImgHalfW","scaledImgHalfH","frameHalfW","frameHalfH","maxOffsetX","maxOffsetY","needsConstraintX","needsConstraintY","min","setCoords","clipPath","radius","Circle","Rect","rx","ry","frameCustomPath","Path","pathBounds","getBoundingRect","remove","placeholder","fill","selectable","evented","add","_restoreFixedDimensions","_removePlaceholder","setImage","src","_image$width","_image$height","crossOrigin","signal","image","FabricImage","fromURL","scale","_clearContent","imageSrc","setImageObject","_image$width2","_image$height2","getSrc","imageWidth","imageHeight","getObjects","obj","clearContent","hasContent","getContentImage","enterEditMode","_ref3","_this$frameMeta$origi3","_ref4","_this$frameMeta$origi4","subTargetCheck","interactive","minScale","hasControls","hasBorders","minScaleLimit","lockScalingFlip","_editModeClipPath","_setupEditModeConstraints","canvas","setActiveObject","renderAll","fire","frame","_boundConstrainMove","e","_ref5","_frame$frameMeta$orig","_ref6","_frame$frameMeta$orig2","_img$scaleX2","_img$left2","_img$top2","_boundConstrainScale","_ref7","_frame$frameMeta$orig3","_ref8","_frame$frameMeta$orig4","_img$scaleX3","_img$scaleY","_frame$_boundConstrai","call","on","_removeEditModeConstraints","off","ctx","_renderEditModeOverlay","save","m","calcTransformMatrix","beginPath","rect","padding","moveTo","arc","PI","w","h","r","arcTo","closePath","lineTo","fillStyle","strokeStyle","lineWidth","stroke","setLineDash","restore","exitEditMode","_this$_contentImage$l","_this$_contentImage$t","_this$_contentImage$s","_this$_contentImage$s2","_ref9","_this$frameMeta$origi5","_ref0","_this$frameMeta$origi6","contentLeft","contentTop","contentScaleX","contentScaleY","constrainedLeft","constrainedTop","toggleEditMode","resizeFrame","maintainAspect","currentAspect","setFrameShape","shape","customPath","setBorderRadius","size","removed","insertAt","index","_len","Array","_key","toObject","propertiesToInclude","fromObject","object","abortable","groupOptions","Promise","all","enlivenObjects","enlivenObjectEnlivables","then","_ref1","_frameMeta$contentSca","_frameMeta$contentOff","_frameMeta$contentOff2","enlivenedObjects","hydratedOptions","_frameMeta$contentOff3","_frameMeta$contentOff4","_frameMeta$contentSca2","_frameMeta$contentSca3","catch","err","createWithAspect","aspect","_defaultMeta$contentS2","_defaultMeta$contentO3","_defaultMeta$contentO4","classRegistry","setClass"],"mappings":"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"}
+{"version":3,"file":"Frame.min.mjs","sources":["../../../src/shapes/Frame.ts"],"sourcesContent":["import type { TClassProperties, TOptions, Abortable, TCrossOrigin } from '../typedefs';\r\nimport type { FabricObject } from './Object/FabricObject';\r\nimport type { GroupProps, SerializedGroupProps } from './Group';\r\nimport type { TPointerEvent, Transform, TransformActionHandler } from '../EventTypeDefs';\r\nimport { Group } from './Group';\r\nimport { Rect } from './Rect';\r\nimport { Circle } from './Circle';\r\nimport { Path } from './Path';\r\nimport { FabricImage } from './Image';\r\nimport { classRegistry } from '../ClassRegistry';\r\nimport { LayoutManager } from '../LayoutManager/LayoutManager';\r\nimport { FrameLayout } from '../LayoutManager/LayoutStrategies/FrameLayout';\r\nimport { enlivenObjects, enlivenObjectEnlivables } from '../util/misc/objectEnlive';\r\nimport { Control } from '../controls/Control';\r\nimport { getLocalPoint } from '../controls/util';\r\nimport { wrapWithFireEvent } from '../controls/wrapWithFireEvent';\r\nimport { wrapWithFixedAnchor } from '../controls/wrapWithFixedAnchor';\r\nimport { RESIZING } from '../constants';\r\n\r\n/**\r\n * Frame shape types supported out of the box\r\n */\r\nexport type FrameShapeType = 'rect' | 'circle' | 'rounded-rect' | 'custom';\r\n\r\n/**\r\n * Frame metadata for persistence and state management\r\n */\r\nexport interface FrameMeta {\r\n  /** Aspect ratio label (e.g., '16:9', '1:1', '4:5') */\r\n  aspect?: string;\r\n  /** Content scale factor for cover scaling */\r\n  contentScale?: number;\r\n  /** X offset of content within frame */\r\n  contentOffsetX?: number;\r\n  /** Y offset of content within frame */\r\n  contentOffsetY?: number;\r\n  /** Source URL of the current image */\r\n  imageSrc?: string;\r\n  /** Original image dimensions */\r\n  originalWidth?: number;\r\n  /** Original image dimensions */\r\n  originalHeight?: number;\r\n}\r\n\r\n/**\r\n * Frame-specific properties\r\n */\r\nexport interface FrameOwnProps {\r\n  /** Fixed width of the frame */\r\n  frameWidth: number;\r\n  /** Fixed height of the frame */\r\n  frameHeight: number;\r\n  /** Shape type for the clip mask */\r\n  frameShape: FrameShapeType;\r\n  /** Border radius for rounded-rect shape */\r\n  frameBorderRadius: number;\r\n  /** Custom SVG path for custom shape */\r\n  frameCustomPath?: string;\r\n  /** Frame metadata for content positioning */\r\n  frameMeta: FrameMeta;\r\n  /** Whether the frame is in edit mode (content can be repositioned) */\r\n  isEditMode: boolean;\r\n  /** Placeholder text shown when frame is empty */\r\n  placeholderText: string;\r\n  /** Placeholder background color */\r\n  placeholderColor: string;\r\n}\r\n\r\nexport interface SerializedFrameProps extends SerializedGroupProps, FrameOwnProps {}\r\n\r\nexport interface FrameProps extends GroupProps, FrameOwnProps {}\r\n\r\nexport const frameDefaultValues: Partial<TClassProperties<Frame>> = {\r\n  frameWidth: 200,\r\n  frameHeight: 200,\r\n  frameShape: 'rect',\r\n  frameBorderRadius: 0,\r\n  isEditMode: false,\r\n  placeholderText: 'Drop image here',\r\n  placeholderColor: '#d0d0d0',\r\n  frameMeta: {\r\n    contentScale: 1,\r\n    contentOffsetX: 0,\r\n    contentOffsetY: 0,\r\n  },\r\n};\r\n\r\n/**\r\n * Frame class - A Canva-like frame container for images\r\n *\r\n * Features:\r\n * - Fixed dimensions that don't change when content is added/removed\r\n * - Multiple shape types (rect, circle, rounded-rect, custom SVG path)\r\n * - Cover scaling: images fill the frame completely, overflow is clipped\r\n * - Double-click edit mode: reposition/zoom content within frame\r\n * - Drag & drop support for replacing images\r\n * - Full serialization/deserialization support\r\n *\r\n * @example\r\n * ```ts\r\n * // Create a rectangular frame\r\n * const frame = new Frame([], {\r\n *   frameWidth: 300,\r\n *   frameHeight: 200,\r\n *   frameShape: 'rect',\r\n *   left: 100,\r\n *   top: 100,\r\n * });\r\n *\r\n * // Add image with cover scaling\r\n * await frame.setImage('https://example.com/image.jpg');\r\n *\r\n * canvas.add(frame);\r\n * ```\r\n */\r\nexport class Frame extends Group {\r\n  static type = 'Frame';\r\n\r\n  declare frameWidth: number;\r\n  declare frameHeight: number;\r\n  declare frameShape: FrameShapeType;\r\n  declare frameBorderRadius: number;\r\n  declare frameCustomPath?: string;\r\n  declare frameMeta: FrameMeta;\r\n  declare isEditMode: boolean;\r\n  declare placeholderText: string;\r\n  declare placeholderColor: string;\r\n\r\n  /**\r\n   * Reference to the content image\r\n   * @private\r\n   */\r\n  private _contentImage: FabricImage | null = null;\r\n\r\n  /**\r\n   * Reference to the placeholder object\r\n   * @private\r\n   */\r\n  private _placeholder: FabricObject | null = null;\r\n\r\n  static ownDefaults = frameDefaultValues;\r\n\r\n  static getDefaults(): Record<string, any> {\r\n    return {\r\n      ...super.getDefaults(),\r\n      ...Frame.ownDefaults,\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Constructor\r\n   * @param objects - Initial objects (typically empty for frames)\r\n   * @param options - Frame configuration options\r\n   */\r\n  constructor(\r\n    objects: FabricObject[] = [],\r\n    options: Partial<FrameProps> = {}\r\n  ) {\r\n    // Set up the frame layout manager before calling super\r\n    const frameLayoutManager = new LayoutManager(new FrameLayout());\r\n\r\n    super(objects, {\r\n      ...options,\r\n      layoutManager: frameLayoutManager,\r\n    });\r\n\r\n    // Apply defaults\r\n    Object.assign(this, Frame.ownDefaults);\r\n\r\n    // Apply user options\r\n    this.setOptions(options);\r\n\r\n    // Ensure frameMeta is properly initialized with defaults\r\n    const defaultMeta = frameDefaultValues.frameMeta || {};\r\n    this.frameMeta = {\r\n      contentScale: defaultMeta.contentScale ?? 1,\r\n      contentOffsetX: defaultMeta.contentOffsetX ?? 0,\r\n      contentOffsetY: defaultMeta.contentOffsetY ?? 0,\r\n      ...options.frameMeta,\r\n    };\r\n\r\n    // Set fixed dimensions\r\n    this.set({\r\n      width: this.frameWidth,\r\n      height: this.frameHeight,\r\n    });\r\n\r\n    // Create clip path based on shape\r\n    this._updateClipPath();\r\n\r\n    // Create placeholder if no content\r\n    if (objects.length === 0) {\r\n      this._createPlaceholder();\r\n    }\r\n\r\n    // Set up custom resize controls (instead of scale controls)\r\n    this._setupResizeControls();\r\n  }\r\n\r\n  /**\r\n   * Sets up custom controls that resize instead of scale\r\n   * This is the key to Canva-like behavior - corners resize the frame dimensions\r\n   * instead of scaling the entire group (which would stretch the image)\r\n   * @private\r\n   */\r\n  private _setupResizeControls(): void {\r\n    // Helper to change width (like changeObjectWidth but for frames)\r\n    // Note: wrapWithFixedAnchor sets origin to opposite corner, so localPoint.x IS the new width\r\n    const changeFrameWidth: TransformActionHandler = (\r\n      eventData,\r\n      transform,\r\n      x,\r\n      y\r\n    ): boolean => {\r\n      const target = transform.target as Frame;\r\n      const localPoint = getLocalPoint(\r\n        transform,\r\n        transform.originX,\r\n        transform.originY,\r\n        x,\r\n        y\r\n      );\r\n\r\n      const oldWidth = target.frameWidth;\r\n      // localPoint.x is distance from anchor (opposite side) to mouse = new width\r\n      const newWidth = Math.max(20, Math.abs(localPoint.x));\r\n\r\n      if (Math.abs(oldWidth - newWidth) < 1) return false;\r\n\r\n      target.frameWidth = newWidth;\r\n      target.width = newWidth;\r\n      target._updateClipPath();\r\n      target._adjustContentAfterResize();\r\n\r\n      return true;\r\n    };\r\n\r\n    // Helper to change height\r\n    const changeFrameHeight: TransformActionHandler = (\r\n      eventData,\r\n      transform,\r\n      x,\r\n      y\r\n    ): boolean => {\r\n      const target = transform.target as Frame;\r\n      const localPoint = getLocalPoint(\r\n        transform,\r\n        transform.originX,\r\n        transform.originY,\r\n        x,\r\n        y\r\n      );\r\n\r\n      const oldHeight = target.frameHeight;\r\n      const newHeight = Math.max(20, Math.abs(localPoint.y));\r\n\r\n      if (Math.abs(oldHeight - newHeight) < 1) return false;\r\n\r\n      target.frameHeight = newHeight;\r\n      target.height = newHeight;\r\n      target._updateClipPath();\r\n      target._adjustContentAfterResize();\r\n\r\n      return true;\r\n    };\r\n\r\n    // Helper to change both width and height (corners)\r\n    const changeFrameSize: TransformActionHandler = (\r\n      eventData,\r\n      transform,\r\n      x,\r\n      y\r\n    ): boolean => {\r\n      const target = transform.target as Frame;\r\n      const localPoint = getLocalPoint(\r\n        transform,\r\n        transform.originX,\r\n        transform.originY,\r\n        x,\r\n        y\r\n      );\r\n\r\n      const oldWidth = target.frameWidth;\r\n      const oldHeight = target.frameHeight;\r\n      const newWidth = Math.max(20, Math.abs(localPoint.x));\r\n      const newHeight = Math.max(20, Math.abs(localPoint.y));\r\n\r\n      if (Math.abs(oldWidth - newWidth) < 1 && Math.abs(oldHeight - newHeight) < 1) return false;\r\n\r\n      target.frameWidth = newWidth;\r\n      target.frameHeight = newHeight;\r\n      target.width = newWidth;\r\n      target.height = newHeight;\r\n      target._updateClipPath();\r\n      target._adjustContentAfterResize();\r\n\r\n      return true;\r\n    };\r\n\r\n    // Create wrapped handlers\r\n    const resizeFromCorner = wrapWithFireEvent(\r\n      RESIZING,\r\n      wrapWithFixedAnchor(changeFrameSize)\r\n    );\r\n\r\n    const resizeX = wrapWithFireEvent(\r\n      RESIZING,\r\n      wrapWithFixedAnchor(changeFrameWidth)\r\n    );\r\n\r\n    const resizeY = wrapWithFireEvent(\r\n      RESIZING,\r\n      wrapWithFixedAnchor(changeFrameHeight)\r\n    );\r\n\r\n    // Guard: ensure controls exist\r\n    if (!this.controls) {\r\n      console.warn('Frame: controls not initialized yet');\r\n      return;\r\n    }\r\n\r\n    // Override corner controls - use resize instead of scale\r\n    const cornerControls = ['tl', 'tr', 'bl', 'br'] as const;\r\n    cornerControls.forEach((corner) => {\r\n      const existing = this.controls[corner];\r\n      if (existing) {\r\n        this.controls[corner] = new Control({\r\n          x: existing.x,\r\n          y: existing.y,\r\n          cursorStyleHandler: existing.cursorStyleHandler,\r\n          actionHandler: resizeFromCorner,\r\n          actionName: 'resizing',\r\n        });\r\n      }\r\n    });\r\n\r\n    // Override side controls for horizontal resize\r\n    const horizontalControls = ['ml', 'mr'] as const;\r\n    horizontalControls.forEach((corner) => {\r\n      const existing = this.controls[corner];\r\n      if (existing) {\r\n        this.controls[corner] = new Control({\r\n          x: existing.x,\r\n          y: existing.y,\r\n          cursorStyleHandler: existing.cursorStyleHandler,\r\n          actionHandler: resizeX,\r\n          actionName: 'resizing',\r\n          render: existing.render, // Keep the global pill renderer\r\n          sizeX: existing.sizeX,\r\n          sizeY: existing.sizeY,\r\n        });\r\n      }\r\n    });\r\n\r\n    // Override side controls for vertical resize\r\n    const verticalControls = ['mt', 'mb'] as const;\r\n    verticalControls.forEach((corner) => {\r\n      const existing = this.controls[corner];\r\n      if (existing) {\r\n        this.controls[corner] = new Control({\r\n          x: existing.x,\r\n          y: existing.y,\r\n          cursorStyleHandler: existing.cursorStyleHandler,\r\n          actionHandler: resizeY,\r\n          actionName: 'resizing',\r\n          render: existing.render, // Keep the global pill renderer\r\n          sizeX: existing.sizeX,\r\n          sizeY: existing.sizeY,\r\n        });\r\n      }\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Adjusts content after a resize operation (called from set override)\r\n   * @private\r\n   */\r\n  private _adjustContentAfterResize(): void {\r\n    // Update placeholder if present (simple rect)\r\n    if (this._placeholder) {\r\n      this._placeholder.set({\r\n        width: this.frameWidth,\r\n        height: this.frameHeight,\r\n      });\r\n    }\r\n\r\n    // Adjust content image (Canva-like behavior)\r\n    if (this._contentImage) {\r\n      const img = this._contentImage;\r\n      const originalWidth = this.frameMeta.originalWidth ?? img.width ?? 100;\r\n      const originalHeight = this.frameMeta.originalHeight ?? img.height ?? 100;\r\n\r\n      // Current image scale and position - preserve user's position\r\n      let currentScale = img.scaleX ?? 1;\r\n      let imgCenterX = img.left ?? 0;\r\n      let imgCenterY = img.top ?? 0;\r\n\r\n      // Check if current scale still covers the frame\r\n      const minScaleForCover = this._calculateCoverScale(originalWidth, originalHeight);\r\n\r\n      if (currentScale < minScaleForCover) {\r\n        // Image is too small to cover frame - scale up proportionally\r\n        // But try to keep the same visual center point\r\n        const scaleRatio = minScaleForCover / currentScale;\r\n\r\n        // Scale position proportionally to maintain visual anchor\r\n        imgCenterX = imgCenterX * scaleRatio;\r\n        imgCenterY = imgCenterY * scaleRatio;\r\n        currentScale = minScaleForCover;\r\n\r\n        img.set({\r\n          scaleX: currentScale,\r\n          scaleY: currentScale,\r\n        });\r\n\r\n        this.frameMeta = {\r\n          ...this.frameMeta,\r\n          contentScale: currentScale,\r\n        };\r\n      }\r\n\r\n      // Now constrain position only if needed to prevent empty space\r\n      const scaledImgHalfW = (originalWidth * currentScale) / 2;\r\n      const scaledImgHalfH = (originalHeight * currentScale) / 2;\r\n      const frameHalfW = this.frameWidth / 2;\r\n      const frameHalfH = this.frameHeight / 2;\r\n\r\n      // Calculate how much the image can move while still covering the frame\r\n      const maxOffsetX = Math.max(0, scaledImgHalfW - frameHalfW);\r\n      const maxOffsetY = Math.max(0, scaledImgHalfH - frameHalfH);\r\n\r\n      // Only constrain if position would show empty space\r\n      const needsConstraintX = Math.abs(imgCenterX) > maxOffsetX;\r\n      const needsConstraintY = Math.abs(imgCenterY) > maxOffsetY;\r\n\r\n      if (needsConstraintX) {\r\n        imgCenterX = Math.max(-maxOffsetX, Math.min(maxOffsetX, imgCenterX));\r\n      }\r\n      if (needsConstraintY) {\r\n        imgCenterY = Math.max(-maxOffsetY, Math.min(maxOffsetY, imgCenterY));\r\n      }\r\n\r\n      if (needsConstraintX || needsConstraintY) {\r\n        img.set({\r\n          left: imgCenterX,\r\n          top: imgCenterY,\r\n        });\r\n\r\n        this.frameMeta = {\r\n          ...this.frameMeta,\r\n          contentOffsetX: imgCenterX,\r\n          contentOffsetY: imgCenterY,\r\n        };\r\n      }\r\n\r\n      img.setCoords();\r\n    }\r\n\r\n    this.setCoords();\r\n  }\r\n\r\n  /**\r\n   * Updates the clip path based on the current frame shape\r\n   * @private\r\n   */\r\n  private _updateClipPath(): void {\r\n    let clipPath: FabricObject;\r\n\r\n    switch (this.frameShape) {\r\n      case 'circle': {\r\n        const radius = Math.min(this.frameWidth, this.frameHeight) / 2;\r\n        clipPath = new Circle({\r\n          radius,\r\n          originX: 'center',\r\n          originY: 'center',\r\n          left: 0,\r\n          top: 0,\r\n        });\r\n        break;\r\n      }\r\n\r\n      case 'rounded-rect': {\r\n        clipPath = new Rect({\r\n          width: this.frameWidth,\r\n          height: this.frameHeight,\r\n          rx: this.frameBorderRadius,\r\n          ry: this.frameBorderRadius,\r\n          originX: 'center',\r\n          originY: 'center',\r\n          left: 0,\r\n          top: 0,\r\n        });\r\n        break;\r\n      }\r\n\r\n      case 'custom': {\r\n        if (this.frameCustomPath) {\r\n          clipPath = new Path(this.frameCustomPath, {\r\n            originX: 'center',\r\n            originY: 'center',\r\n            left: 0,\r\n            top: 0,\r\n          });\r\n          // Scale custom path to fit frame\r\n          const pathBounds = clipPath.getBoundingRect();\r\n          const scaleX = this.frameWidth / pathBounds.width;\r\n          const scaleY = this.frameHeight / pathBounds.height;\r\n          clipPath.set({ scaleX, scaleY });\r\n        } else {\r\n          // Fallback to rect if no custom path\r\n          clipPath = new Rect({\r\n            width: this.frameWidth,\r\n            height: this.frameHeight,\r\n            originX: 'center',\r\n            originY: 'center',\r\n            left: 0,\r\n            top: 0,\r\n          });\r\n        }\r\n        break;\r\n      }\r\n\r\n      case 'rect':\r\n      default: {\r\n        clipPath = new Rect({\r\n          width: this.frameWidth,\r\n          height: this.frameHeight,\r\n          originX: 'center',\r\n          originY: 'center',\r\n          left: 0,\r\n          top: 0,\r\n        });\r\n        break;\r\n      }\r\n    }\r\n\r\n    this.clipPath = clipPath;\r\n    this.set('dirty', true);\r\n  }\r\n\r\n  /**\r\n   * Creates a placeholder element for empty frames\r\n   * Shows a colored rectangle - users can customize via placeholderColor\r\n   * @private\r\n   */\r\n  private _createPlaceholder(): void {\r\n    // Remove existing placeholder if any\r\n    if (this._placeholder) {\r\n      super.remove(this._placeholder);\r\n      this._placeholder = null;\r\n    }\r\n\r\n    // Create placeholder background\r\n    const placeholder = new Rect({\r\n      width: this.frameWidth,\r\n      height: this.frameHeight,\r\n      fill: this.placeholderColor,\r\n      originX: 'center',\r\n      originY: 'center',\r\n      left: 0,\r\n      top: 0,\r\n      selectable: false,\r\n      evented: false,\r\n    });\r\n\r\n    this._placeholder = placeholder;\r\n    super.add(placeholder);\r\n\r\n    // Ensure dimensions remain fixed\r\n    this._restoreFixedDimensions();\r\n  }\r\n\r\n  /**\r\n   * Removes the placeholder element\r\n   * @private\r\n   */\r\n  private _removePlaceholder(): void {\r\n    if (this._placeholder) {\r\n      super.remove(this._placeholder);\r\n      this._placeholder = null;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Restores the fixed frame dimensions\r\n   * @private\r\n   */\r\n  private _restoreFixedDimensions(): void {\r\n    this.set({\r\n      width: this.frameWidth,\r\n      height: this.frameHeight,\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Sets an image in the frame with cover scaling\r\n   *\r\n   * @param src - Image source URL\r\n   * @param options - Optional loading options\r\n   * @returns Promise that resolves when the image is loaded and set\r\n   *\r\n   * @example\r\n   * ```ts\r\n   * await frame.setImage('https://example.com/photo.jpg');\r\n   * canvas.renderAll();\r\n   * ```\r\n   */\r\n  async setImage(\r\n    src: string,\r\n    options: { crossOrigin?: TCrossOrigin; signal?: AbortSignal } = {}\r\n  ): Promise<void> {\r\n    const { crossOrigin = 'anonymous', signal } = options;\r\n\r\n    // Load the image\r\n    const image = await FabricImage.fromURL(src, { crossOrigin, signal });\r\n\r\n    // Get original dimensions\r\n    const originalWidth = image.width ?? 100;\r\n    const originalHeight = image.height ?? 100;\r\n\r\n    // Calculate cover scale\r\n    const scale = this._calculateCoverScale(originalWidth, originalHeight);\r\n\r\n    // Configure image for frame\r\n    image.set({\r\n      scaleX: scale,\r\n      scaleY: scale,\r\n      originX: 'center',\r\n      originY: 'center',\r\n      left: 0,\r\n      top: 0,\r\n      selectable: false,\r\n      evented: false,\r\n    });\r\n\r\n    // Remove existing content\r\n    this._clearContent();\r\n\r\n    // Add new image\r\n    this._contentImage = image;\r\n    super.add(image);\r\n\r\n    // Force re-center the image after adding (layout might have moved it)\r\n    this._contentImage.set({\r\n      left: 0,\r\n      top: 0,\r\n    });\r\n\r\n    // Update metadata\r\n    this.frameMeta = {\r\n      ...this.frameMeta,\r\n      contentScale: scale,\r\n      contentOffsetX: 0,\r\n      contentOffsetY: 0,\r\n      imageSrc: src,\r\n      originalWidth,\r\n      originalHeight,\r\n    };\r\n\r\n    // Restore dimensions (in case Group recalculated them)\r\n    this._restoreFixedDimensions();\r\n\r\n    // Force recalculation of coordinates\r\n    this.setCoords();\r\n    this._contentImage.setCoords();\r\n\r\n    this.set('dirty', true);\r\n  }\r\n\r\n  /**\r\n   * Sets an image from an existing FabricImage object\r\n   *\r\n   * @param image - FabricImage instance\r\n   */\r\n  setImageObject(image: FabricImage): void {\r\n    const originalWidth = image.width ?? 100;\r\n    const originalHeight = image.height ?? 100;\r\n\r\n    // Calculate cover scale\r\n    const scale = this._calculateCoverScale(originalWidth, originalHeight);\r\n\r\n    // Configure image for frame\r\n    image.set({\r\n      scaleX: scale,\r\n      scaleY: scale,\r\n      originX: 'center',\r\n      originY: 'center',\r\n      left: 0,\r\n      top: 0,\r\n      selectable: false,\r\n      evented: false,\r\n    });\r\n\r\n    // Remove existing content\r\n    this._clearContent();\r\n\r\n    // Add new image\r\n    this._contentImage = image;\r\n    super.add(image);\r\n\r\n    // Update metadata\r\n    this.frameMeta = {\r\n      ...this.frameMeta,\r\n      contentScale: scale,\r\n      contentOffsetX: 0,\r\n      contentOffsetY: 0,\r\n      imageSrc: image.getSrc(),\r\n      originalWidth,\r\n      originalHeight,\r\n    };\r\n\r\n    // Restore dimensions\r\n    this._restoreFixedDimensions();\r\n\r\n    this.set('dirty', true);\r\n  }\r\n\r\n  /**\r\n   * Calculates the cover scale factor for an image\r\n   * Cover scaling ensures the image fills the frame completely\r\n   *\r\n   * @param imageWidth - Original image width\r\n   * @param imageHeight - Original image height\r\n   * @returns Scale factor to apply\r\n   * @private\r\n   */\r\n  private _calculateCoverScale(imageWidth: number, imageHeight: number): number {\r\n    const scaleX = this.frameWidth / imageWidth;\r\n    const scaleY = this.frameHeight / imageHeight;\r\n    return Math.max(scaleX, scaleY);\r\n  }\r\n\r\n  /**\r\n   * Clears all content from the frame\r\n   * @private\r\n   */\r\n  private _clearContent(): void {\r\n    // Remove placeholder\r\n    this._removePlaceholder();\r\n\r\n    // Remove content image\r\n    if (this._contentImage) {\r\n      super.remove(this._contentImage);\r\n      this._contentImage = null;\r\n    }\r\n\r\n    // Clear any other objects\r\n    const objects = this.getObjects();\r\n    objects.forEach((obj) => super.remove(obj));\r\n  }\r\n\r\n  /**\r\n   * Clears the frame content and shows placeholder\r\n   */\r\n  clearContent(): void {\r\n    this._clearContent();\r\n    this._createPlaceholder();\r\n\r\n    // Reset metadata\r\n    this.frameMeta = {\r\n      contentScale: 1,\r\n      contentOffsetX: 0,\r\n      contentOffsetY: 0,\r\n    };\r\n\r\n    this.set('dirty', true);\r\n  }\r\n\r\n  /**\r\n   * Checks if the frame has image content\r\n   */\r\n  hasContent(): boolean {\r\n    return this._contentImage !== null;\r\n  }\r\n\r\n  /**\r\n   * Gets the current content image\r\n   */\r\n  getContentImage(): FabricImage | null {\r\n    return this._contentImage;\r\n  }\r\n\r\n  /**\r\n   * Enters edit mode for repositioning content within the frame\r\n   * In edit mode, the content image can be dragged and scaled\r\n   */\r\n  /**\r\n   * Stored original dimensions before edit mode\r\n   * @private\r\n   */\r\n  private _editModeOriginalWidth?: number;\r\n  private _editModeOriginalHeight?: number;\r\n\r\n  enterEditMode(): void {\r\n    if (!this._contentImage || this.isEditMode) {\r\n      return;\r\n    }\r\n\r\n    this.isEditMode = true;\r\n\r\n    // Enable sub-target interaction so clicks go through to content\r\n    this.subTargetCheck = true;\r\n    this.interactive = true;\r\n\r\n    // Calculate minimum scale to cover frame\r\n    const originalWidth = this.frameMeta.originalWidth ?? this._contentImage.width ?? 100;\r\n    const originalHeight = this.frameMeta.originalHeight ?? this._contentImage.height ?? 100;\r\n    const minScale = this._calculateCoverScale(originalWidth, originalHeight);\r\n\r\n    // Make content image interactive with scale constraint\r\n    this._contentImage.set({\r\n      selectable: true,\r\n      evented: true,\r\n      hasControls: true,\r\n      hasBorders: true,\r\n      minScaleLimit: minScale,\r\n      lockScalingFlip: true,\r\n    });\r\n\r\n    // Store clip path but keep rendering it for the overlay effect\r\n    if (this.clipPath) {\r\n      this._editModeClipPath = this.clipPath as FabricObject;\r\n      this.clipPath = undefined;\r\n    }\r\n\r\n    // Expand group dimensions to show full content image (prevents clipping)\r\n    const currentScale = this._contentImage.scaleX ?? 1;\r\n    const scaledWidth = originalWidth * currentScale;\r\n    const scaledHeight = originalHeight * currentScale;\r\n\r\n    // Store original dimensions\r\n    this._editModeOriginalWidth = this.width;\r\n    this._editModeOriginalHeight = this.height;\r\n\r\n    // Expand to fit full image (with some padding for controls)\r\n    const expandedWidth = Math.max(this.frameWidth, scaledWidth) + 100;\r\n    const expandedHeight = Math.max(this.frameHeight, scaledHeight) + 100;\r\n\r\n    super.set({\r\n      width: expandedWidth,\r\n      height: expandedHeight,\r\n    });\r\n\r\n    // Add constraint handlers for moving/scaling\r\n    this._setupEditModeConstraints();\r\n\r\n    this.set('dirty', true);\r\n\r\n    // Select the content image on the canvas\r\n    if (this.canvas) {\r\n      this.canvas.setActiveObject(this._contentImage);\r\n      this.canvas.renderAll();\r\n    }\r\n\r\n    // Fire custom event\r\n    (this as any).fire('frame:editmode:enter', { target: this });\r\n  }\r\n\r\n  /**\r\n   * Bound constraint handler references for cleanup\r\n   * @private\r\n   */\r\n  private _boundConstrainMove?: (e: any) => void;\r\n  private _boundConstrainScale?: (e: any) => void;\r\n\r\n  /**\r\n   * Sets up constraints for edit mode - prevents gaps\r\n   * @private\r\n   */\r\n  private _setupEditModeConstraints(): void {\r\n    if (!this._contentImage || !this.canvas) return;\r\n\r\n    const frame = this;\r\n    const img = this._contentImage;\r\n\r\n    // Constrain movement to prevent gaps\r\n    this._boundConstrainMove = (e: any) => {\r\n      if (e.target !== img || !frame.isEditMode) return;\r\n\r\n      const originalWidth = frame.frameMeta.originalWidth ?? img.width ?? 100;\r\n      const originalHeight = frame.frameMeta.originalHeight ?? img.height ?? 100;\r\n      const currentScale = img.scaleX ?? 1;\r\n\r\n      const scaledImgHalfW = (originalWidth * currentScale) / 2;\r\n      const scaledImgHalfH = (originalHeight * currentScale) / 2;\r\n      const frameHalfW = frame.frameWidth / 2;\r\n      const frameHalfH = frame.frameHeight / 2;\r\n\r\n      const maxOffsetX = Math.max(0, scaledImgHalfW - frameHalfW);\r\n      const maxOffsetY = Math.max(0, scaledImgHalfH - frameHalfH);\r\n\r\n      let left = img.left ?? 0;\r\n      let top = img.top ?? 0;\r\n\r\n      // Constrain position\r\n      left = Math.max(-maxOffsetX, Math.min(maxOffsetX, left));\r\n      top = Math.max(-maxOffsetY, Math.min(maxOffsetY, top));\r\n\r\n      img.set({ left, top });\r\n    };\r\n\r\n    // Constrain scaling to prevent gaps\r\n    this._boundConstrainScale = (e: any) => {\r\n      if (e.target !== img || !frame.isEditMode) return;\r\n\r\n      const originalWidth = frame.frameMeta.originalWidth ?? img.width ?? 100;\r\n      const originalHeight = frame.frameMeta.originalHeight ?? img.height ?? 100;\r\n      const minScale = frame._calculateCoverScale(originalWidth, originalHeight);\r\n\r\n      let scaleX = img.scaleX ?? 1;\r\n      let scaleY = img.scaleY ?? 1;\r\n\r\n      // Ensure uniform scaling and minimum scale\r\n      const scale = Math.max(minScale, Math.max(scaleX, scaleY));\r\n      img.set({ scaleX: scale, scaleY: scale });\r\n\r\n      // Also constrain position after scale\r\n      frame._boundConstrainMove?.(e);\r\n    };\r\n\r\n    this.canvas.on('object:moving', this._boundConstrainMove);\r\n    this.canvas.on('object:scaling', this._boundConstrainScale);\r\n  }\r\n\r\n  /**\r\n   * Removes edit mode constraint handlers\r\n   * @private\r\n   */\r\n  private _removeEditModeConstraints(): void {\r\n    if (!this.canvas) return;\r\n\r\n    if (this._boundConstrainMove) {\r\n      this.canvas.off('object:moving', this._boundConstrainMove);\r\n      this._boundConstrainMove = undefined;\r\n    }\r\n    if (this._boundConstrainScale) {\r\n      this.canvas.off('object:scaling', this._boundConstrainScale);\r\n      this._boundConstrainScale = undefined;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Stored clip path before edit mode\r\n   * @private\r\n   */\r\n  private _editModeClipPath?: FabricObject;\r\n\r\n  /**\r\n   * Custom render to show edit mode overlay\r\n   * @override\r\n   */\r\n  render(ctx: CanvasRenderingContext2D): void {\r\n    super.render(ctx);\r\n\r\n    // Draw edit mode overlay if in edit mode\r\n    if (this.isEditMode && this._editModeClipPath) {\r\n      this._renderEditModeOverlay(ctx);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Renders the edit mode overlay - dims area outside frame, shows frame border\r\n   * @private\r\n   */\r\n  private _renderEditModeOverlay(ctx: CanvasRenderingContext2D): void {\r\n    ctx.save();\r\n\r\n    // Apply the group's transform\r\n    const m = this.calcTransformMatrix();\r\n    ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]);\r\n\r\n    // Draw semi-transparent overlay on the OUTSIDE of the frame\r\n    // We do this by drawing a large rect and cutting out the frame shape\r\n    ctx.beginPath();\r\n\r\n    // Large outer rectangle (covers the whole image area)\r\n    const padding = 2000; // Large enough to cover any overflow\r\n    ctx.rect(-padding, -padding, padding * 2, padding * 2);\r\n\r\n    // Cut out the frame shape (counter-clockwise to create hole)\r\n    if (this.frameShape === 'circle') {\r\n      const radius = Math.min(this.frameWidth, this.frameHeight) / 2;\r\n      ctx.moveTo(radius, 0);\r\n      ctx.arc(0, 0, radius, 0, Math.PI * 2, true);\r\n    } else if (this.frameShape === 'rounded-rect') {\r\n      const w = this.frameWidth / 2;\r\n      const h = this.frameHeight / 2;\r\n      const r = Math.min(this.frameBorderRadius, w, h);\r\n      ctx.moveTo(w, h - r);\r\n      ctx.arcTo(w, -h, w - r, -h, r);\r\n      ctx.arcTo(-w, -h, -w, -h + r, r);\r\n      ctx.arcTo(-w, h, -w + r, h, r);\r\n      ctx.arcTo(w, h, w, h - r, r);\r\n      ctx.closePath();\r\n    } else {\r\n      // Rectangle\r\n      const w = this.frameWidth / 2;\r\n      const h = this.frameHeight / 2;\r\n      ctx.moveTo(w, -h);\r\n      ctx.lineTo(-w, -h);\r\n      ctx.lineTo(-w, h);\r\n      ctx.lineTo(w, h);\r\n      ctx.closePath();\r\n    }\r\n\r\n    // Fill with semi-transparent dark overlay\r\n    ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';\r\n    ctx.fill('evenodd');\r\n\r\n    // Draw frame border\r\n    ctx.beginPath();\r\n    if (this.frameShape === 'circle') {\r\n      const radius = Math.min(this.frameWidth, this.frameHeight) / 2;\r\n      ctx.arc(0, 0, radius, 0, Math.PI * 2);\r\n    } else if (this.frameShape === 'rounded-rect') {\r\n      const w = this.frameWidth / 2;\r\n      const h = this.frameHeight / 2;\r\n      const r = Math.min(this.frameBorderRadius, w, h);\r\n      ctx.moveTo(w - r, -h);\r\n      ctx.arcTo(w, -h, w, -h + r, r);\r\n      ctx.arcTo(w, h, w - r, h, r);\r\n      ctx.arcTo(-w, h, -w, h - r, r);\r\n      ctx.arcTo(-w, -h, -w + r, -h, r);\r\n      ctx.closePath();\r\n    } else {\r\n      const w = this.frameWidth / 2;\r\n      const h = this.frameHeight / 2;\r\n      ctx.rect(-w, -h, this.frameWidth, this.frameHeight);\r\n    }\r\n    ctx.strokeStyle = 'rgba(255, 255, 255, 0.8)';\r\n    ctx.lineWidth = 2;\r\n    ctx.stroke();\r\n\r\n    // Draw subtle dashed line for frame boundary\r\n    ctx.setLineDash([5, 5]);\r\n    ctx.strokeStyle = 'rgba(0, 150, 255, 0.8)';\r\n    ctx.lineWidth = 1;\r\n    ctx.stroke();\r\n\r\n    ctx.restore();\r\n  }\r\n\r\n  /**\r\n   * Exits edit mode and saves the content position\r\n   */\r\n  exitEditMode(): void {\r\n    if (!this._contentImage || !this.isEditMode) {\r\n      return;\r\n    }\r\n\r\n    this.isEditMode = false;\r\n\r\n    // Remove constraint handlers\r\n    this._removeEditModeConstraints();\r\n\r\n    // Disable sub-target interaction\r\n    this.subTargetCheck = false;\r\n    this.interactive = false;\r\n\r\n    // Get the current position of the content\r\n    const contentLeft = this._contentImage.left ?? 0;\r\n    const contentTop = this._contentImage.top ?? 0;\r\n    const contentScaleX = this._contentImage.scaleX ?? 1;\r\n    const contentScaleY = this._contentImage.scaleY ?? 1;\r\n\r\n    // Constrain position so image always covers the frame\r\n    const originalWidth = this.frameMeta.originalWidth ?? this._contentImage.width ?? 100;\r\n    const originalHeight = this.frameMeta.originalHeight ?? this._contentImage.height ?? 100;\r\n    const currentScale = Math.max(contentScaleX, contentScaleY);\r\n    const scaledImgHalfW = (originalWidth * currentScale) / 2;\r\n    const scaledImgHalfH = (originalHeight * currentScale) / 2;\r\n    const frameHalfW = this.frameWidth / 2;\r\n    const frameHalfH = this.frameHeight / 2;\r\n\r\n    // Ensure image covers frame (constrain position)\r\n    const maxOffsetX = Math.max(0, scaledImgHalfW - frameHalfW);\r\n    const maxOffsetY = Math.max(0, scaledImgHalfH - frameHalfH);\r\n    const constrainedLeft = Math.max(-maxOffsetX, Math.min(maxOffsetX, contentLeft));\r\n    const constrainedTop = Math.max(-maxOffsetY, Math.min(maxOffsetY, contentTop));\r\n\r\n    // Apply constrained position\r\n    this._contentImage.set({\r\n      left: constrainedLeft,\r\n      top: constrainedTop,\r\n    });\r\n\r\n    // Update metadata with new offsets and scale\r\n    this.frameMeta = {\r\n      ...this.frameMeta,\r\n      contentOffsetX: constrainedLeft,\r\n      contentOffsetY: constrainedTop,\r\n      contentScale: currentScale,\r\n    };\r\n\r\n    // Make content non-interactive again\r\n    this._contentImage.set({\r\n      selectable: false,\r\n      evented: false,\r\n      hasControls: false,\r\n      hasBorders: false,\r\n    });\r\n\r\n    // Restore clip path\r\n    if (this._editModeClipPath) {\r\n      this.clipPath = this._editModeClipPath;\r\n      this._editModeClipPath = undefined;\r\n    } else {\r\n      this._updateClipPath();\r\n    }\r\n\r\n    // Restore original frame dimensions\r\n    if (this._editModeOriginalWidth !== undefined && this._editModeOriginalHeight !== undefined) {\r\n      super.set({\r\n        width: this._editModeOriginalWidth,\r\n        height: this._editModeOriginalHeight,\r\n      });\r\n      this._editModeOriginalWidth = undefined;\r\n      this._editModeOriginalHeight = undefined;\r\n    } else {\r\n      // Fallback to frame dimensions\r\n      super.set({\r\n        width: this.frameWidth,\r\n        height: this.frameHeight,\r\n      });\r\n    }\r\n\r\n    this.set('dirty', true);\r\n\r\n    // Re-select the frame itself\r\n    if (this.canvas) {\r\n      this.canvas.setActiveObject(this);\r\n      this.canvas.renderAll();\r\n    }\r\n\r\n    // Fire custom event\r\n    (this as any).fire('frame:editmode:exit', { target: this });\r\n  }\r\n\r\n  /**\r\n   * Toggles edit mode\r\n   */\r\n  toggleEditMode(): void {\r\n    if (this.isEditMode) {\r\n      this.exitEditMode();\r\n    } else {\r\n      this.enterEditMode();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Resizes the frame to new dimensions (Canva-like behavior)\r\n   *\r\n   * Canva behavior:\r\n   * - When frame shrinks: crops more of image (no scale change)\r\n   * - When frame grows: uncrops to show more, preserving position\r\n   * - Only scales up when image can't cover the frame anymore\r\n   *\r\n   * @param width - New frame width\r\n   * @param height - New frame height\r\n   * @param options - Resize options\r\n   */\r\n  resizeFrame(\r\n    width: number,\r\n    height: number,\r\n    options: { maintainAspect?: boolean } = {}\r\n  ): void {\r\n    const { maintainAspect = false } = options;\r\n\r\n    if (maintainAspect) {\r\n      const currentAspect = this.frameWidth / this.frameHeight;\r\n      const newAspect = width / height;\r\n\r\n      if (newAspect > currentAspect) {\r\n        height = width / currentAspect;\r\n      } else {\r\n        width = height * currentAspect;\r\n      }\r\n    }\r\n\r\n    this.frameWidth = width;\r\n    this.frameHeight = height;\r\n\r\n    // Update dimensions using super.set to avoid re-triggering conversion\r\n    super.set({\r\n      width: this.frameWidth,\r\n      height: this.frameHeight,\r\n    });\r\n\r\n    // Update clip path\r\n    this._updateClipPath();\r\n\r\n    // Canva-like content adjustment\r\n    this._adjustContentAfterResize();\r\n\r\n    this.set('dirty', true);\r\n    this.setCoords();\r\n  }\r\n\r\n  /**\r\n   * Sets the frame shape\r\n   *\r\n   * @param shape - Shape type\r\n   * @param customPath - Custom SVG path for 'custom' shape type\r\n   */\r\n  setFrameShape(shape: FrameShapeType, customPath?: string): void {\r\n    this.frameShape = shape;\r\n    if (customPath) {\r\n      this.frameCustomPath = customPath;\r\n    }\r\n    this._updateClipPath();\r\n    this.set('dirty', true);\r\n  }\r\n\r\n  /**\r\n   * Sets the border radius for rounded-rect shape\r\n   *\r\n   * @param radius - Border radius in pixels\r\n   */\r\n  setBorderRadius(radius: number): void {\r\n    this.frameBorderRadius = radius;\r\n    if (this.frameShape === 'rounded-rect') {\r\n      this._updateClipPath();\r\n      this.set('dirty', true);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Override add to maintain fixed dimensions\r\n   */\r\n  add(...objects: FabricObject[]): number {\r\n    const size = super.add(...objects);\r\n    this._restoreFixedDimensions();\r\n    return size;\r\n  }\r\n\r\n  /**\r\n   * Override remove to maintain fixed dimensions\r\n   */\r\n  remove(...objects: FabricObject[]): FabricObject[] {\r\n    const removed = super.remove(...objects);\r\n    this._restoreFixedDimensions();\r\n    return removed;\r\n  }\r\n\r\n  /**\r\n   * Override insertAt to maintain fixed dimensions\r\n   */\r\n  insertAt(index: number, ...objects: FabricObject[]): number {\r\n    const size = super.insertAt(index, ...objects);\r\n    this._restoreFixedDimensions();\r\n    return size;\r\n  }\r\n\r\n  /**\r\n   * Serializes the frame to a plain object\r\n   */\r\n  // @ts-ignore - Frame extends Group's toObject with additional properties\r\n  toObject(propertiesToInclude: string[] = []): any {\r\n    return {\r\n      ...(super.toObject as any)(propertiesToInclude),\r\n      frameWidth: this.frameWidth,\r\n      frameHeight: this.frameHeight,\r\n      frameShape: this.frameShape,\r\n      frameBorderRadius: this.frameBorderRadius,\r\n      frameCustomPath: this.frameCustomPath,\r\n      frameMeta: { ...this.frameMeta },\r\n      isEditMode: false, // Always serialize as not in edit mode\r\n      placeholderText: this.placeholderText,\r\n      placeholderColor: this.placeholderColor,\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Creates a Frame instance from a serialized object\r\n   */\r\n  static fromObject<T extends TOptions<SerializedFrameProps>>(\r\n    object: T,\r\n    abortable?: Abortable\r\n  ): Promise<Frame> {\r\n    const {\r\n      objects = [],\r\n      layoutManager,\r\n      frameWidth,\r\n      frameHeight,\r\n      frameShape,\r\n      frameBorderRadius,\r\n      frameCustomPath,\r\n      frameMeta,\r\n      placeholderText,\r\n      placeholderColor,\r\n      ...groupOptions\r\n    } = object;\r\n\r\n    return Promise.all([\r\n      enlivenObjects<FabricObject>(objects, abortable),\r\n      enlivenObjectEnlivables(groupOptions, abortable),\r\n    ]).then(([enlivenedObjects, hydratedOptions]) => {\r\n      // Create frame with restored options\r\n      const frame = new Frame([], {\r\n        ...groupOptions,\r\n        ...hydratedOptions,\r\n        frameWidth,\r\n        frameHeight,\r\n        frameShape,\r\n        frameBorderRadius,\r\n        frameCustomPath,\r\n        frameMeta: frameMeta ? {\r\n          contentScale: frameMeta.contentScale ?? 1,\r\n          contentOffsetX: frameMeta.contentOffsetX ?? 0,\r\n          contentOffsetY: frameMeta.contentOffsetY ?? 0,\r\n          ...frameMeta,\r\n        } : undefined,\r\n        placeholderText,\r\n        placeholderColor,\r\n      });\r\n\r\n      // If there was an image, restore it\r\n      if (frameMeta?.imageSrc) {\r\n        // Async restoration of image - caller should wait if needed\r\n        frame.setImage(frameMeta.imageSrc).then(() => {\r\n          // Restore content position from metadata\r\n          if (frame._contentImage) {\r\n            frame._contentImage.set({\r\n              left: frameMeta.contentOffsetX ?? 0,\r\n              top: frameMeta.contentOffsetY ?? 0,\r\n              scaleX: frameMeta.contentScale ?? 1,\r\n              scaleY: frameMeta.contentScale ?? 1,\r\n            });\r\n          }\r\n          frame.set('dirty', true);\r\n        }).catch((err) => {\r\n          console.warn('Failed to restore frame image:', err);\r\n        });\r\n      }\r\n\r\n      return frame;\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Creates a Frame with a specific aspect ratio preset\r\n   *\r\n   * @param aspect - Aspect ratio preset (e.g., '16:9', '1:1', '4:5', '9:16')\r\n   * @param size - Base size in pixels\r\n   * @param options - Additional frame options\r\n   */\r\n  static createWithAspect(\r\n    aspect: string,\r\n    size: number = 200,\r\n    options: Partial<FrameProps> = {}\r\n  ): Frame {\r\n    let width: number;\r\n    let height: number;\r\n\r\n    switch (aspect) {\r\n      case '16:9':\r\n        width = size;\r\n        height = size * (9 / 16);\r\n        break;\r\n      case '9:16':\r\n        width = size * (9 / 16);\r\n        height = size;\r\n        break;\r\n      case '4:5':\r\n        width = size * (4 / 5);\r\n        height = size;\r\n        break;\r\n      case '4:3':\r\n        width = size;\r\n        height = size * (3 / 4);\r\n        break;\r\n      case '3:4':\r\n        width = size * (3 / 4);\r\n        height = size;\r\n        break;\r\n      case '1:1':\r\n      default:\r\n        width = size;\r\n        height = size;\r\n        break;\r\n    }\r\n\r\n    const defaultMeta = frameDefaultValues.frameMeta || {};\r\n\r\n    return new Frame([], {\r\n      ...options,\r\n      frameWidth: width,\r\n      frameHeight: height,\r\n      frameMeta: {\r\n        contentScale: defaultMeta.contentScale ?? 1,\r\n        contentOffsetX: defaultMeta.contentOffsetX ?? 0,\r\n        contentOffsetY: defaultMeta.contentOffsetY ?? 0,\r\n        aspect,\r\n        ...options.frameMeta,\r\n      },\r\n    });\r\n  }\r\n}\r\n\r\n// Register the Frame class with the class registry\r\nclassRegistry.setClass(Frame);\r\nclassRegistry.setClass(Frame, 'frame');\r\n"],"names":["frameDefaultValues","frameWidth","frameHeight","frameShape","frameBorderRadius","isEditMode","placeholderText","placeholderColor","frameMeta","contentScale","contentOffsetX","contentOffsetY","Frame","Group","getDefaults","super","ownDefaults","constructor","_defaultMeta$contentS","_defaultMeta$contentO","_defaultMeta$contentO2","objects","arguments","length","undefined","options","frameLayoutManager","LayoutManager","FrameLayout","layoutManager","_defineProperty","this","Object","assign","setOptions","defaultMeta","set","width","height","_updateClipPath","_createPlaceholder","_setupResizeControls","resizeFromCorner","wrapWithFireEvent","RESIZING","wrapWithFixedAnchor","changeFrameSize","eventData","transform","x","y","target","localPoint","getLocalPoint","originX","originY","oldWidth","oldHeight","newWidth","Math","max","abs","newHeight","_adjustContentAfterResize","resizeX","changeFrameWidth","resizeY","changeFrameHeight","controls","console","warn","forEach","corner","existing","Control","cursorStyleHandler","actionHandler","actionName","render","sizeX","sizeY","_placeholder","_contentImage","_ref","_this$frameMeta$origi","_ref2","_this$frameMeta$origi2","_img$scaleX","_img$left","_img$top","img","originalWidth","originalHeight","currentScale","scaleX","imgCenterX","left","imgCenterY","top","minScaleForCover","_calculateCoverScale","scaleRatio","scaleY","scaledImgHalfW","scaledImgHalfH","frameHalfW","frameHalfH","maxOffsetX","maxOffsetY","needsConstraintX","needsConstraintY","min","setCoords","clipPath","radius","Circle","Rect","rx","ry","frameCustomPath","Path","pathBounds","getBoundingRect","remove","placeholder","fill","selectable","evented","add","_restoreFixedDimensions","_removePlaceholder","setImage","src","_image$width","_image$height","crossOrigin","signal","image","FabricImage","fromURL","scale","_clearContent","imageSrc","setImageObject","_image$width2","_image$height2","getSrc","imageWidth","imageHeight","getObjects","obj","clearContent","hasContent","getContentImage","enterEditMode","_ref3","_this$frameMeta$origi3","_ref4","_this$frameMeta$origi4","_this$_contentImage$s","subTargetCheck","interactive","minScale","hasControls","hasBorders","minScaleLimit","lockScalingFlip","_editModeClipPath","scaledWidth","scaledHeight","_editModeOriginalWidth","_editModeOriginalHeight","expandedWidth","expandedHeight","_setupEditModeConstraints","canvas","setActiveObject","renderAll","fire","frame","_boundConstrainMove","e","_ref5","_frame$frameMeta$orig","_ref6","_frame$frameMeta$orig2","_img$scaleX2","_img$left2","_img$top2","_boundConstrainScale","_ref7","_frame$frameMeta$orig3","_ref8","_frame$frameMeta$orig4","_img$scaleX3","_img$scaleY","_frame$_boundConstrai","call","on","_removeEditModeConstraints","off","ctx","_renderEditModeOverlay","save","m","calcTransformMatrix","beginPath","rect","padding","moveTo","arc","PI","w","h","r","arcTo","closePath","lineTo","fillStyle","strokeStyle","lineWidth","stroke","setLineDash","restore","exitEditMode","_this$_contentImage$l","_this$_contentImage$t","_this$_contentImage$s2","_this$_contentImage$s3","_ref9","_this$frameMeta$origi5","_ref0","_this$frameMeta$origi6","contentLeft","contentTop","contentScaleX","contentScaleY","constrainedLeft","constrainedTop","toggleEditMode","resizeFrame","maintainAspect","currentAspect","setFrameShape","shape","customPath","setBorderRadius","size","removed","insertAt","index","_len","Array","_key","toObject","propertiesToInclude","fromObject","object","abortable","groupOptions","Promise","all","enlivenObjects","enlivenObjectEnlivables","then","_ref1","_frameMeta$contentSca","_frameMeta$contentOff","_frameMeta$contentOff2","enlivenedObjects","hydratedOptions","_frameMeta$contentOff3","_frameMeta$contentOff4","_frameMeta$contentSca2","_frameMeta$contentSca3","catch","err","createWithAspect","aspect","_defaultMeta$contentS2","_defaultMeta$contentO3","_defaultMeta$contentO4","classRegistry","setClass"],"mappings":"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"}

package/dist/src/shapes/Frame.mjs

@@ -104,6 +104,11 @@ class Frame extends Group {
      * @private
      */
     _defineProperty(this, "_placeholder", null);
+    /**
+     * Stored objectCaching value before edit mode
+     * @private
+     */
+    _defineProperty(this, "_editModeObjectCaching", void 0);
     /**
      * Bound constraint handler references for cleanup
      * @private
@@ -684,6 +689,12 @@ class Frame extends Group {
     }
     this.isEditMode = true;
 
+    // Disable caching during edit mode - otherwise the cache canvas
+    // clips content to the frame bounds, preventing us from seeing
+    // the full image outside the frame
+    this._editModeObjectCaching = this.objectCaching;
+    this.objectCaching = false;
+
     // Enable sub-target interaction so clicks go through to content
     this.subTargetCheck = true;
     this.interactive = true;
@@ -713,9 +724,10 @@ class Frame extends Group {
     this._setupEditModeConstraints();
     this.set('dirty', true);
 
-    // Select the content image on the canvas
+    // Just render - don't call setActiveObject() on the content image
+    // because it causes position miscalculation with viewport transforms.
+    // The content image is still interactive via subTargetCheck = true
     if (this.canvas) {
-      this.canvas.setActiveObject(this._contentImage);
       this.canvas.renderAll();
     }
 
@@ -958,6 +970,12 @@ class Frame extends Group {
     } else {
       this._updateClipPath();
     }
+
+    // Restore caching setting
+    if (this._editModeObjectCaching !== undefined) {
+      this.objectCaching = this._editModeObjectCaching;
+      this._editModeObjectCaching = undefined;
+    }
     this.set('dirty', true);
 
     // Re-select the frame itself