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

package/dist-extensions/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-extensions/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-extensions/src/shapes/Object/defaultValues.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defaultValues.d.ts","sourceRoot":"","sources":["../../../../src/shapes/Object/defaultValues.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,eAAO,MAAM,eAAe,UAgB3B,CAAC;AAEF,eAAO,MAAM,eAAe,UAe3B,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,OAAO,CAC7C,gBAAgB,CAAC,YAAY,CAAC,CA2CtB,CAAC;AAEX,eAAO,MAAM,8BAA8B,EAAE,OAAO,CAClD,gBAAgB,CAAC,uBAAuB,CAAC,CA+B1C,CAAC"}
+{"version":3,"file":"defaultValues.d.ts","sourceRoot":"","sources":["../../../../src/shapes/Object/defaultValues.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,eAAO,MAAM,eAAe,UAgB3B,CAAC;AAEF,eAAO,MAAM,eAAe,UAe3B,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,OAAO,CAC7C,gBAAgB,CAAC,YAAY,CAAC,CA2CtB,CAAC;AAEX,eAAO,MAAM,8BAA8B,EAAE,OAAO,CAClD,gBAAgB,CAAC,uBAAuB,CAAC,CAgC1C,CAAC"}

package/fabric.ts

@@ -141,6 +141,14 @@ export type {
   SerializedGroupProps,
 } from './src/shapes/Group';
 export { Group } from './src/shapes/Group';
+export type {
+  FrameProps,
+  FrameOwnProps,
+  FrameMeta,
+  FrameShapeType,
+  SerializedFrameProps,
+} from './src/shapes/Frame';
+export { Frame } from './src/shapes/Frame';
 export * from './src/LayoutManager';
 export type { SerializedLayoutManager } from './src/LayoutManager';
 export type {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@nasser-sw/fabric",
   "description": "Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.",
   "homepage": "http://fabricjs.com/",
-  "version": "7.0.1-beta17",
+  "version": "7.0.1-beta18",
   "author": "Juriy Zaytsev <kangax@gmail.com>",
   "contributors": [
     {

package/src/LayoutManager/LayoutStrategies/FrameLayout.ts

@@ -0,0 +1,80 @@
+import { Point } from '../../Point';
+import type { FabricObject } from '../../shapes/Object/FabricObject';
+import { classRegistry } from '../../ClassRegistry';
+import { LayoutStrategy } from './LayoutStrategy';
+import type { LayoutStrategyResult, StrictLayoutContext } from '../types';
+import { LAYOUT_TYPE_INITIALIZATION } from '../constants';
+
+/**
+ * FrameLayout is a layout strategy that maintains fixed dimensions
+ * regardless of the content inside the group.
+ *
+ * This is essential for Frame objects where:
+ * - The frame size should never change when images are added/removed
+ * - Content is clipped to the frame boundaries
+ * - The frame acts as a container with fixed dimensions
+ */
+export class FrameLayout extends LayoutStrategy {
+  static readonly type = 'frame-layout';
+
+  /**
+   * Override to prevent layout recalculation on content changes.
+   * Only perform layout during initialization or imperative calls.
+   */
+  shouldPerformLayout({ type }: StrictLayoutContext): boolean {
+    // Only perform layout during initialization
+    // After that, the frame maintains its fixed size
+    return type === LAYOUT_TYPE_INITIALIZATION;
+  }
+
+  /**
+   * Calculate the bounding box for frame objects.
+   * Returns the fixed frame dimensions instead of calculating from contents.
+   */
+  calcBoundingBox(
+    objects: FabricObject[],
+    context: StrictLayoutContext
+  ): LayoutStrategyResult | undefined {
+    const { type, target } = context;
+
+    // Get fixed dimensions from frame properties
+    const frameWidth = (target as any).frameWidth ?? target.width ?? 200;
+    const frameHeight = (target as any).frameHeight ?? target.height ?? 200;
+
+    const size = new Point(frameWidth, frameHeight);
+
+    if (type === LAYOUT_TYPE_INITIALIZATION) {
+      // During initialization, use the frame's position or calculate center
+      const center = new Point(0, 0);
+
+      return {
+        center,
+        size,
+        relativeCorrection: new Point(0, 0),
+      };
+    }
+
+    // For any other layout triggers, return the fixed size
+    // This shouldn't normally be called due to shouldPerformLayout override
+    const center = target.getRelativeCenterPoint();
+    return {
+      center,
+      size,
+    };
+  }
+
+  /**
+   * Override to always return fixed frame dimensions during initialization.
+   */
+  getInitialSize(
+    context: StrictLayoutContext,
+    result: Pick<LayoutStrategyResult, 'center' | 'size'>
+  ): Point {
+    const { target } = context;
+    const frameWidth = (target as any).frameWidth ?? target.width ?? 200;
+    const frameHeight = (target as any).frameHeight ?? target.height ?? 200;
+    return new Point(frameWidth, frameHeight);
+  }
+}
+
+classRegistry.setClass(FrameLayout);

package/src/LayoutManager/index.ts

@@ -2,5 +2,6 @@ export * from './LayoutManager';
 export * from './LayoutStrategies/ClipPathLayout';
 export * from './LayoutStrategies/FitContentLayout';
 export * from './LayoutStrategies/FixedLayout';
+export * from './LayoutStrategies/FrameLayout';
 export * from './LayoutStrategies/LayoutStrategy';
 export type * from './types';

package/src/controls/commonControls.ts

@@ -2,6 +2,10 @@ import { RESIZING, ROTATE } from '../constants';
 import { changeWidth } from './changeWidth';
 import { changeHeight } from './changeHeight';
 import { Control } from './Control';
+import {
+  renderHorizontalPillControl,
+  renderVerticalPillControl,
+} from './controlRendering';
 import { rotationStyleHandler, rotationWithSnapping } from './rotate';
 import { scaleCursorStyleHandler, scalingEqually } from './scale';
 import {
@@ -19,6 +23,9 @@ export const createObjectDefaultControls = () => ({
     cursorStyleHandler: scaleSkewCursorStyleHandler,
     actionHandler: scalingXOrSkewingY,
     getActionName: scaleOrSkewActionName,
+    render: renderHorizontalPillControl,
+    sizeX: 6,
+    sizeY: 20,
   }),
 
   mr: new Control({
@@ -27,6 +34,9 @@ export const createObjectDefaultControls = () => ({
     cursorStyleHandler: scaleSkewCursorStyleHandler,
     actionHandler: scalingXOrSkewingY,
     getActionName: scaleOrSkewActionName,
+    render: renderHorizontalPillControl,
+    sizeX: 6,
+    sizeY: 20,
   }),
 
   mb: new Control({
@@ -35,6 +45,9 @@ export const createObjectDefaultControls = () => ({
     cursorStyleHandler: scaleSkewCursorStyleHandler,
     actionHandler: scalingYOrSkewingX,
     getActionName: scaleOrSkewActionName,
+    render: renderVerticalPillControl,
+    sizeX: 20,
+    sizeY: 6,
   }),
 
   mt: new Control({
@@ -43,6 +56,9 @@ export const createObjectDefaultControls = () => ({
     cursorStyleHandler: scaleSkewCursorStyleHandler,
     actionHandler: scalingYOrSkewingX,
     getActionName: scaleOrSkewActionName,
+    render: renderVerticalPillControl,
+    sizeX: 20,
+    sizeY: 6,
   }),
 
   tl: new Control({
@@ -91,6 +107,9 @@ export const createResizeControls = () => ({
     actionHandler: changeWidth,
     cursorStyleHandler: scaleSkewCursorStyleHandler,
     actionName: RESIZING,
+    render: renderHorizontalPillControl,
+    sizeX: 6,
+    sizeY: 20,
   }),
   ml: new Control({
     x: -0.5,
@@ -98,6 +117,9 @@ export const createResizeControls = () => ({
     actionHandler: changeWidth,
     cursorStyleHandler: scaleSkewCursorStyleHandler,
     actionName: RESIZING,
+    render: renderHorizontalPillControl,
+    sizeX: 6,
+    sizeY: 20,
   }),
 });
 

package/src/controls/controlRendering.ts

@@ -3,6 +3,13 @@ import type { InteractiveFabricObject } from '../shapes/Object/InteractiveObject
 import { degreesToRadians } from '../util/misc/radiansDegreesConversion';
 import type { Control } from './Control';
 
+/**
+ * Pill dimensions for side controls (Canva-style)
+ */
+const PILL_WIDTH = 6;
+const PILL_HEIGHT = 20;
+const PILL_RADIUS = 3;
+
 export type ControlRenderingStyleOverride = Partial<
   Pick<
     InteractiveFabricObject,
@@ -134,3 +141,79 @@ export function renderSquareControl(
   }
   ctx.restore();
 }
+
+/**
+ * Render a horizontal pill control (for left/right side handles).
+ * Modern Canva-style appearance.
+ * @param {CanvasRenderingContext2D} ctx context to render on
+ * @param {Number} left x coordinate where the control center should be
+ * @param {Number} top y coordinate where the control center should be
+ * @param {Object} styleOverride override for FabricObject controls style
+ * @param {FabricObject} fabricObject the fabric object for which we are rendering controls
+ */
+export function renderHorizontalPillControl(
+  this: Control,
+  ctx: CanvasRenderingContext2D,
+  left: number,
+  top: number,
+  styleOverride: ControlRenderingStyleOverride,
+  fabricObject: InteractiveFabricObject,
+) {
+  styleOverride = styleOverride || {};
+  const width = PILL_WIDTH;
+  const height = PILL_HEIGHT;
+  const radius = PILL_RADIUS;
+
+  ctx.save();
+  ctx.translate(left, top);
+  const angle = fabricObject.getTotalAngle();
+  ctx.rotate(degreesToRadians(angle));
+
+  ctx.fillStyle = styleOverride.cornerColor || fabricObject.cornerColor || '#ffffff';
+  ctx.strokeStyle = styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor || '#0d99ff';
+  ctx.lineWidth = 1.5;
+
+  ctx.beginPath();
+  ctx.roundRect(-width / 2, -height / 2, width, height, radius);
+  ctx.fill();
+  ctx.stroke();
+  ctx.restore();
+}
+
+/**
+ * Render a vertical pill control (for top/bottom side handles).
+ * Modern Canva-style appearance.
+ * @param {CanvasRenderingContext2D} ctx context to render on
+ * @param {Number} left x coordinate where the control center should be
+ * @param {Number} top y coordinate where the control center should be
+ * @param {Object} styleOverride override for FabricObject controls style
+ * @param {FabricObject} fabricObject the fabric object for which we are rendering controls
+ */
+export function renderVerticalPillControl(
+  this: Control,
+  ctx: CanvasRenderingContext2D,
+  left: number,
+  top: number,
+  styleOverride: ControlRenderingStyleOverride,
+  fabricObject: InteractiveFabricObject,
+) {
+  styleOverride = styleOverride || {};
+  const width = PILL_HEIGHT; // Swapped for vertical
+  const height = PILL_WIDTH;
+  const radius = PILL_RADIUS;
+
+  ctx.save();
+  ctx.translate(left, top);
+  const angle = fabricObject.getTotalAngle();
+  ctx.rotate(degreesToRadians(angle));
+
+  ctx.fillStyle = styleOverride.cornerColor || fabricObject.cornerColor || '#ffffff';
+  ctx.strokeStyle = styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor || '#0d99ff';
+  ctx.lineWidth = 1.5;
+
+  ctx.beginPath();
+  ctx.roundRect(-width / 2, -height / 2, width, height, radius);
+  ctx.fill();
+  ctx.stroke();
+  ctx.restore();
+}