@widgetic/canvas 0.5.4

package/dist/canvas/shapes/ImageShape.d.ts

@@ -0,0 +1,38 @@
+/**
+ * ImageShape — custom Rect subclass for image placeholders on canvas.
+ *
+ * Responsibilities:
+ *  - When _hasImage = false  → renders placeholder UI (icon + "Drop image" text + dashed border)
+ *  - When _hasImage = true   → renders the loaded image (clipped, with optional corner radius)
+ *
+ * This is the base class for images on canvas. For widget-specific behavior
+ * (linked to a widget via _widgetId), see WidgetShape which extends this class.
+ *
+ * Fabric serialises as type:'ImageShape'. Old saves with type:'Rect' + _customType:'image'
+ * are handled by upgradeToImageShape() which swaps the prototype chain.
+ */
+import { Rect } from 'fabric';
+export declare const IMAGE_SHAPE_CUSTOM_PROPS: string[];
+export declare class ImageShape extends Rect {
+    static type: string;
+    _customType: string;
+    _hasImage: boolean;
+    _imageElement: HTMLImageElement | null;
+    _imageUrl: string | null;
+    _originalFilename: string | null;
+    _originalAspectRatio: number | null;
+    _cornerRoundness: number;
+    _cornerRoundnessPixels: number;
+    _objectId: string | null;
+    _render(ctx: CanvasRenderingContext2D): void;
+    private _renderImage;
+    private _renderPlaceholderOverlay;
+    toObject(propertiesToInclude?: any[]): any;
+    static fromObject(object: Record<string, unknown>, options?: Record<string, unknown>): Promise<ImageShape>;
+    static reloadImage(shape: ImageShape): void;
+}
+/**
+ * Upgrades a plain Rect with _customType:'image' to an ImageShape instance by
+ * swapping the prototype chain. No object re-creation needed.
+ */
+export declare function upgradeToImageShape(obj: any): ImageShape | null;

package/dist/canvas/shapes/ImageShape.js

@@ -0,0 +1,245 @@
+/**
+ * ImageShape — custom Rect subclass for image placeholders on canvas.
+ *
+ * Responsibilities:
+ *  - When _hasImage = false  → renders placeholder UI (icon + "Drop image" text + dashed border)
+ *  - When _hasImage = true   → renders the loaded image (clipped, with optional corner radius)
+ *
+ * This is the base class for images on canvas. For widget-specific behavior
+ * (linked to a widget via _widgetId), see WidgetShape which extends this class.
+ *
+ * Fabric serialises as type:'ImageShape'. Old saves with type:'Rect' + _customType:'image'
+ * are handled by upgradeToImageShape() which swaps the prototype chain.
+ */
+import { Rect, classRegistry } from 'fabric';
+import { canvasLog, canvasWarn } from '../canvasLogger';
+// ── Custom property names for base ImageShape ─────────────────────────────────
+export const IMAGE_SHAPE_CUSTOM_PROPS = [
+    '_customType',
+    '_hasImage',
+    '_imageUrl',
+    '_originalFilename',
+    '_originalAspectRatio',
+    '_cornerRoundness',
+    '_cornerRoundnessPixels',
+    '_objectId',
+];
+export class ImageShape extends Rect {
+    static type = 'ImageShape';
+    // Custom fields — typed for IDE support
+    _customType = 'image';
+    _hasImage = false;
+    _imageElement = null;
+    _imageUrl = null;
+    _originalFilename = null;
+    _originalAspectRatio = null;
+    _cornerRoundness = 0;
+    _cornerRoundnessPixels = 0;
+    _objectId = null;
+    // ── Placeholder rendering ─────────────────────────────────────────────────
+    _render(ctx) {
+        const hasImage = this._hasImage && this._imageElement;
+        if (hasImage) {
+            this._renderImage(ctx);
+        }
+        else {
+            super._render(ctx);
+            this._renderPlaceholderOverlay(ctx);
+        }
+    }
+    // ── Image rendering ───────────────────────────────────────────────────────
+    _renderImage(ctx) {
+        const w = this.width || 100;
+        const h = this.height || 100;
+        const r = this._cornerRoundnessPixels || 0;
+        ctx.save();
+        ctx.beginPath();
+        if (r > 0) {
+            const minDim = Math.min(w, h);
+            if (r >= minDim / 2) {
+                if (w === h) {
+                    ctx.arc(0, 0, w / 2, 0, Math.PI * 2);
+                }
+                else {
+                    ctx.ellipse(0, 0, w / 2, h / 2, 0, 0, Math.PI * 2);
+                }
+            }
+            else {
+                ctx.moveTo(-w / 2 + r, -h / 2);
+                ctx.arcTo(w / 2, -h / 2, w / 2, h / 2, r);
+                ctx.arcTo(w / 2, h / 2, -w / 2, h / 2, r);
+                ctx.arcTo(-w / 2, h / 2, -w / 2, -h / 2, r);
+                ctx.arcTo(-w / 2, -h / 2, w / 2, -h / 2, r);
+            }
+        }
+        else {
+            ctx.rect(-w / 2, -h / 2, w, h);
+        }
+        ctx.closePath();
+        ctx.clip();
+        const img = this._imageElement;
+        const imgReady = img.complete && img.naturalWidth > 0;
+        if (imgReady) {
+            if (this._isWidgetImage) {
+                const imgW = img.naturalWidth;
+                const imgH = img.naturalHeight;
+                const scale = Math.min(w / imgW, h / imgH);
+                const dw = imgW * scale;
+                const dh = imgH * scale;
+                ctx.drawImage(img, -dw / 2, -dh / 2, dw, dh);
+            }
+            else {
+                ctx.drawImage(img, -w / 2, -h / 2, w, h);
+            }
+        }
+        ctx.restore();
+        if (this.stroke && (this.strokeWidth ?? 0) > 0) {
+            ctx.save();
+            ctx.strokeStyle = this.stroke;
+            ctx.lineWidth = this.strokeWidth ?? 1;
+            if (this.strokeDashArray)
+                ctx.setLineDash(this.strokeDashArray);
+            ctx.beginPath();
+            if (r > 0) {
+                const minDim = Math.min(w, h);
+                if (r >= minDim / 2) {
+                    if (w === h) {
+                        ctx.arc(0, 0, w / 2, 0, Math.PI * 2);
+                    }
+                    else {
+                        ctx.ellipse(0, 0, w / 2, h / 2, 0, 0, Math.PI * 2);
+                    }
+                }
+                else {
+                    ctx.moveTo(-w / 2 + r, -h / 2);
+                    ctx.arcTo(w / 2, -h / 2, w / 2, h / 2, r);
+                    ctx.arcTo(w / 2, h / 2, -w / 2, h / 2, r);
+                    ctx.arcTo(-w / 2, h / 2, -w / 2, -h / 2, r);
+                    ctx.arcTo(-w / 2, -h / 2, w / 2, -h / 2, r);
+                }
+            }
+            else {
+                ctx.rect(-w / 2, -h / 2, w, h);
+            }
+            ctx.closePath();
+            ctx.stroke();
+            ctx.restore();
+        }
+    }
+    // ── Placeholder icon + text overlay ──────────────────────────────────────
+    _renderPlaceholderOverlay(ctx) {
+        const availableW = this.width || 100;
+        const availableH = this.height || 100;
+        const contentHeight = 76;
+        const contentScale = Math.min(1, availableH / contentHeight, availableW / 100);
+        ctx.fillStyle = '#94a3b8';
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        if (contentScale < 0.3) {
+            const tinyIconSize = Math.max(8, 24 * contentScale);
+            ctx.font = `${tinyIconSize}px Arial`;
+            ctx.fillText('🖼️', 0, 0);
+        }
+        else {
+            ctx.save();
+            ctx.scale(contentScale, contentScale);
+            ctx.font = '24px Arial';
+            ctx.fillText('🖼️', 0, -28);
+            const fontSize = 12;
+            ctx.font = `${fontSize}px Arial`;
+            ctx.fillText('Drop image', 0, 0);
+            ctx.fillText('or', 0, fontSize + 4);
+            ctx.fillText('double click', 0, (fontSize + 4) * 2);
+            ctx.restore();
+        }
+    }
+    // ── Serialisation ─────────────────────────────────────────────────────────
+    toObject(propertiesToInclude) {
+        const extras = IMAGE_SHAPE_CUSTOM_PROPS.concat(propertiesToInclude ?? []);
+        const base = super.toObject(extras);
+        return {
+            ...base,
+            type: this.constructor.type,
+            _imageElement: undefined,
+        };
+    }
+    // ── Deserialisation ───────────────────────────────────────────────────────
+    static fromObject(object, options) {
+        return Rect.fromObject({ ...object, type: 'rect' }, options).then((rect) => {
+            Object.setPrototypeOf(rect, ImageShape.prototype);
+            const shape = rect;
+            for (const prop of IMAGE_SHAPE_CUSTOM_PROPS) {
+                if (prop in object && shape[prop] === undefined || shape[prop] !== object[prop]) {
+                    shape[prop] = object[prop];
+                }
+            }
+            if (shape._imageUrl) {
+                ImageShape.reloadImage(shape);
+            }
+            canvasLog('ImageShape: fromObject — restored', shape._objectId || 'shape', 'hasImage:', shape._hasImage);
+            return shape;
+        });
+    }
+    // ── Image loading ─────────────────────────────────────────────────────────
+    static reloadImage(shape) {
+        if (!shape._imageUrl)
+            return;
+        const img = new Image();
+        img.crossOrigin = 'anonymous';
+        img.onload = () => {
+            shape._imageElement = img;
+            shape._hasImage = true;
+            shape.dirty = true;
+            const parentGroup = shape.group;
+            if (parentGroup) {
+                parentGroup.dirty = true;
+            }
+            const canvasRef = shape.canvas;
+            if (canvasRef) {
+                canvasRef.requestRenderAll();
+            }
+            else {
+                requestAnimationFrame(() => {
+                    const c = shape.canvas;
+                    if (c) {
+                        const pg = shape.group;
+                        if (pg)
+                            pg.dirty = true;
+                        c.requestRenderAll();
+                    }
+                });
+            }
+            canvasLog('ImageShape: image reloaded from URL', shape._imageUrl?.substring(0, 60));
+        };
+        img.onerror = () => {
+            canvasWarn('ImageShape: failed to reload image', shape._imageUrl?.substring(0, 60));
+        };
+        img.src = shape._imageUrl;
+    }
+}
+// Register so loadFromJSON can resolve type:'ImageShape'
+classRegistry.setClass(ImageShape);
+// ── Upgrade helper for backward-compat (old saves: type:'Rect' + _customType:'image') ─
+/**
+ * Upgrades a plain Rect with _customType:'image' to an ImageShape instance by
+ * swapping the prototype chain. No object re-creation needed.
+ */
+export function upgradeToImageShape(obj) {
+    if (!obj || obj._customType !== 'image')
+        return null;
+    if (obj instanceof ImageShape)
+        return obj;
+    try {
+        Object.setPrototypeOf(obj, ImageShape.prototype);
+        const shape = obj;
+        if (shape._imageUrl && !shape._imageElement) {
+            ImageShape.reloadImage(shape);
+        }
+        canvasLog('ImageShape: upgraded Rect → ImageShape for', shape._objectId || 'shape');
+        return shape;
+    }
+    catch (err) {
+        canvasWarn('ImageShape: upgradeToImageShape failed', err);
+        return null;
+    }
+}

package/dist/canvas/shapes/ShapeLibrary.d.ts

@@ -0,0 +1,64 @@
+/**
+ * ShapeLibrary.ts
+ *
+ * Pre-defined SVG path data for special shapes (media controls, UI icons, etc.).
+ * All paths are normalized to a 100×100 viewBox so Fabric.js scales them uniformly.
+ *
+ * cornerRadiusMode per shape:
+ *   'none'        – shape already curved (circle, heart) → hide Corner Radius slider
+ *   'clipPath'    – clip bounding-box rect to rounded rect (arrows, …)
+ *   'strokeRound' – apply round linecap / linejoin (line-only: check, X, +, -)
+ *   'pathRegen'   – regenerate sub-shape path data with rounded corners (rects & polygons)
+ */
+export type CornerRadiusMode = 'none' | 'clipPath' | 'strokeRound' | 'pathRegen';
+export type RegenSubShape = {
+    type: 'rect';
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+} | {
+    type: 'polygon';
+    points: [number, number][];
+} | {
+    type: 'fixed';
+    path: string;
+};
+export interface LibraryShape {
+    key: string;
+    label: string;
+    category: string;
+    pathData: string;
+    iconSvg: string;
+    cornerRadiusMode: CornerRadiusMode;
+    /** Sub-shapes used by 'pathRegen' mode to regenerate path with rounded corners */
+    regenData?: RegenSubShape[];
+    /**
+     * Per-shape override for proportional resize lock.
+     * When undefined, the category-based rule applies (Symbol Shapes / Media Icons / UI Icons = locked).
+     * Set to `false` to explicitly opt out for shapes that are intentionally non-square (e.g. speech bubble).
+     */
+    lockAspectRatio?: boolean;
+}
+/** Generate SVG path data for a rounded rectangle. */
+export declare function roundedRectPath(x: number, y: number, w: number, h: number, r: number): string;
+/**
+ * Generate SVG path data for a convex polygon with rounded corners.
+ * @param points – vertices in order (any winding)
+ * @param r      – corner radius in path units
+ */
+export declare function roundedPolygonPath(points: [number, number][], r: number): string;
+/**
+ * Regenerate the full SVG path string for a library shape at the given roundness (0-100 %).
+ * Returns null for shapes that don't use pathRegen.
+ */
+export declare function generatePathForShape(shape: LibraryShape, roundnessPercent: number): string | null;
+/** All library shapes, grouped by category (Geometric first, then Arrows) */
+export declare const SHAPE_LIBRARY: LibraryShape[];
+/**
+ * Look up a library shape definition by its stable key.
+ * Returns undefined for unknown keys (dynamic/legacy shape keys).
+ */
+export declare function getShapeByKey(key: string | null | undefined): LibraryShape | undefined;
+/** Shapes grouped by category for rendering in the UI */
+export declare function getShapesByCategory(): Map<string, LibraryShape[]>;