@nasser-sw/fabric 7.0.1-beta17 → 7.0.1-beta18

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

@@ -0,0 +1,298 @@
+import type { TClassProperties, TOptions, Abortable, TCrossOrigin } from '../typedefs';
+import type { FabricObject } from './Object/FabricObject';
+import type { GroupProps, SerializedGroupProps } from './Group';
+import { Group } from './Group';
+import { FabricImage } from './Image';
+/**
+ * Frame shape types supported out of the box
+ */
+export type FrameShapeType = 'rect' | 'circle' | 'rounded-rect' | 'custom';
+/**
+ * Frame metadata for persistence and state management
+ */
+export interface FrameMeta {
+    /** Aspect ratio label (e.g., '16:9', '1:1', '4:5') */
+    aspect?: string;
+    /** Content scale factor for cover scaling */
+    contentScale?: number;
+    /** X offset of content within frame */
+    contentOffsetX?: number;
+    /** Y offset of content within frame */
+    contentOffsetY?: number;
+    /** Source URL of the current image */
+    imageSrc?: string;
+    /** Original image dimensions */
+    originalWidth?: number;
+    /** Original image dimensions */
+    originalHeight?: number;
+}
+/**
+ * Frame-specific properties
+ */
+export interface FrameOwnProps {
+    /** Fixed width of the frame */
+    frameWidth: number;
+    /** Fixed height of the frame */
+    frameHeight: number;
+    /** Shape type for the clip mask */
+    frameShape: FrameShapeType;
+    /** Border radius for rounded-rect shape */
+    frameBorderRadius: number;
+    /** Custom SVG path for custom shape */
+    frameCustomPath?: string;
+    /** Frame metadata for content positioning */
+    frameMeta: FrameMeta;
+    /** Whether the frame is in edit mode (content can be repositioned) */
+    isEditMode: boolean;
+    /** Placeholder text shown when frame is empty */
+    placeholderText: string;
+    /** Placeholder background color */
+    placeholderColor: string;
+}
+export interface SerializedFrameProps extends SerializedGroupProps, FrameOwnProps {
+}
+export interface FrameProps extends GroupProps, FrameOwnProps {
+}
+export declare const frameDefaultValues: Partial<TClassProperties<Frame>>;
+/**
+ * Frame class - A Canva-like frame container for images
+ *
+ * Features:
+ * - Fixed dimensions that don't change when content is added/removed
+ * - Multiple shape types (rect, circle, rounded-rect, custom SVG path)
+ * - Cover scaling: images fill the frame completely, overflow is clipped
+ * - Double-click edit mode: reposition/zoom content within frame
+ * - Drag & drop support for replacing images
+ * - Full serialization/deserialization support
+ *
+ * @example
+ * ```ts
+ * // Create a rectangular frame
+ * const frame = new Frame([], {
+ *   frameWidth: 300,
+ *   frameHeight: 200,
+ *   frameShape: 'rect',
+ *   left: 100,
+ *   top: 100,
+ * });
+ *
+ * // Add image with cover scaling
+ * await frame.setImage('https://example.com/image.jpg');
+ *
+ * canvas.add(frame);
+ * ```
+ */
+export declare class Frame extends Group {
+    static type: string;
+    frameWidth: number;
+    frameHeight: number;
+    frameShape: FrameShapeType;
+    frameBorderRadius: number;
+    frameCustomPath?: string;
+    frameMeta: FrameMeta;
+    isEditMode: boolean;
+    placeholderText: string;
+    placeholderColor: string;
+    /**
+     * Reference to the content image
+     * @private
+     */
+    private _contentImage;
+    /**
+     * Reference to the placeholder object
+     * @private
+     */
+    private _placeholder;
+    static ownDefaults: Partial<TClassProperties<Frame>>;
+    static getDefaults(): Record<string, any>;
+    /**
+     * Constructor
+     * @param objects - Initial objects (typically empty for frames)
+     * @param options - Frame configuration options
+     */
+    constructor(objects?: FabricObject[], options?: Partial<FrameProps>);
+    /**
+     * Sets up custom controls that resize instead of scale
+     * This is the key to Canva-like behavior - corners resize the frame dimensions
+     * instead of scaling the entire group (which would stretch the image)
+     * @private
+     */
+    private _setupResizeControls;
+    /**
+     * Adjusts content after a resize operation (called from set override)
+     * @private
+     */
+    private _adjustContentAfterResize;
+    /**
+     * Updates the clip path based on the current frame shape
+     * @private
+     */
+    private _updateClipPath;
+    /**
+     * Creates a placeholder element for empty frames
+     * Shows a colored rectangle - users can customize via placeholderColor
+     * @private
+     */
+    private _createPlaceholder;
+    /**
+     * Removes the placeholder element
+     * @private
+     */
+    private _removePlaceholder;
+    /**
+     * Restores the fixed frame dimensions
+     * @private
+     */
+    private _restoreFixedDimensions;
+    /**
+     * Sets an image in the frame with cover scaling
+     *
+     * @param src - Image source URL
+     * @param options - Optional loading options
+     * @returns Promise that resolves when the image is loaded and set
+     *
+     * @example
+     * ```ts
+     * await frame.setImage('https://example.com/photo.jpg');
+     * canvas.renderAll();
+     * ```
+     */
+    setImage(src: string, options?: {
+        crossOrigin?: TCrossOrigin;
+        signal?: AbortSignal;
+    }): Promise<void>;
+    /**
+     * Sets an image from an existing FabricImage object
+     *
+     * @param image - FabricImage instance
+     */
+    setImageObject(image: FabricImage): void;
+    /**
+     * Calculates the cover scale factor for an image
+     * Cover scaling ensures the image fills the frame completely
+     *
+     * @param imageWidth - Original image width
+     * @param imageHeight - Original image height
+     * @returns Scale factor to apply
+     * @private
+     */
+    private _calculateCoverScale;
+    /**
+     * Clears all content from the frame
+     * @private
+     */
+    private _clearContent;
+    /**
+     * Clears the frame content and shows placeholder
+     */
+    clearContent(): void;
+    /**
+     * Checks if the frame has image content
+     */
+    hasContent(): boolean;
+    /**
+     * Gets the current content image
+     */
+    getContentImage(): FabricImage | null;
+    /**
+     * Enters edit mode for repositioning content within the frame
+     * In edit mode, the content image can be dragged and scaled
+     */
+    enterEditMode(): void;
+    /**
+     * Bound constraint handler references for cleanup
+     * @private
+     */
+    private _boundConstrainMove?;
+    private _boundConstrainScale?;
+    /**
+     * Sets up constraints for edit mode - prevents gaps
+     * @private
+     */
+    private _setupEditModeConstraints;
+    /**
+     * Removes edit mode constraint handlers
+     * @private
+     */
+    private _removeEditModeConstraints;
+    /**
+     * Stored clip path before edit mode
+     * @private
+     */
+    private _editModeClipPath?;
+    /**
+     * Custom render to show edit mode overlay
+     * @override
+     */
+    render(ctx: CanvasRenderingContext2D): void;
+    /**
+     * Renders the edit mode overlay - dims area outside frame, shows frame border
+     * @private
+     */
+    private _renderEditModeOverlay;
+    /**
+     * Exits edit mode and saves the content position
+     */
+    exitEditMode(): void;
+    /**
+     * Toggles edit mode
+     */
+    toggleEditMode(): void;
+    /**
+     * Resizes the frame to new dimensions (Canva-like behavior)
+     *
+     * Canva behavior:
+     * - When frame shrinks: crops more of image (no scale change)
+     * - When frame grows: uncrops to show more, preserving position
+     * - Only scales up when image can't cover the frame anymore
+     *
+     * @param width - New frame width
+     * @param height - New frame height
+     * @param options - Resize options
+     */
+    resizeFrame(width: number, height: number, options?: {
+        maintainAspect?: boolean;
+    }): void;
+    /**
+     * Sets the frame shape
+     *
+     * @param shape - Shape type
+     * @param customPath - Custom SVG path for 'custom' shape type
+     */
+    setFrameShape(shape: FrameShapeType, customPath?: string): void;
+    /**
+     * Sets the border radius for rounded-rect shape
+     *
+     * @param radius - Border radius in pixels
+     */
+    setBorderRadius(radius: number): void;
+    /**
+     * Override add to maintain fixed dimensions
+     */
+    add(...objects: FabricObject[]): number;
+    /**
+     * Override remove to maintain fixed dimensions
+     */
+    remove(...objects: FabricObject[]): FabricObject[];
+    /**
+     * Override insertAt to maintain fixed dimensions
+     */
+    insertAt(index: number, ...objects: FabricObject[]): number;
+    /**
+     * Serializes the frame to a plain object
+     */
+    toObject(propertiesToInclude?: string[]): any;
+    /**
+     * Creates a Frame instance from a serialized object
+     */
+    static fromObject<T extends TOptions<SerializedFrameProps>>(object: T, abortable?: Abortable): Promise<Frame>;
+    /**
+     * Creates a Frame with a specific aspect ratio preset
+     *
+     * @param aspect - Aspect ratio preset (e.g., '16:9', '1:1', '4:5', '9:16')
+     * @param size - Base size in pixels
+     * @param options - Additional frame options
+     */
+    static createWithAspect(aspect: string, size?: number, options?: Partial<FrameProps>): Frame;
+}
+//# sourceMappingURL=Frame.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +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 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 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:"#f0f0f0",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,"_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 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"}))});["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"}))})}_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 c=null!==(s=n.scaleX)&&void 0!==s?s:1,d=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(c<f){const t=f/c;d*=t,m*=t,c=f,n.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)&&(n.set({left:d,top:m}),this.frameMeta={...this.frameMeta,contentOffsetX:d,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,c=this._calculateCoverScale(h,l);n.set({scaleX:c,scaleY:c,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: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,o=this._calculateCoverScale(s,r);this._contentImage.set({selectable:!0,evented:!0,hasControls:!0,hasBorders:!0,minScaleLimit:o,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,o,n,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!==(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=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,o,n,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!==(o=t.frameMeta.originalHeight)&&void 0!==o?o:e.height)&&void 0!==r?r:100,m=t._calculateCoverScale(c,d);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,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!==(o=null!==(n=this.frameMeta.originalHeight)&&void 0!==n?n:this._contentImage.height)&&void 0!==o?o: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:o,frameBorderRadius:n,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:o,frameBorderRadius:n,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,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

@@ -0,0 +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: '#f0f0f0',\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        });\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        });\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\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   * @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;\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   * @ts-expect-error - Frame extends Group's toObject with additional properties\r\n   */\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","_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","render","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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"}