@widgetic/canvas 0.5.4

package/dist/canvas/shapes/WidgetShape.js

@@ -0,0 +1,132 @@
+/**
+ * WidgetShape — extends ImageShape with widget-specific properties.
+ *
+ * Adds _isWidgetImage and _widgetId to link an image placeholder to a
+ * generated widget in the Widgetic platform.
+ *
+ * When an ImageShape is "converted to widget", its prototype is swapped
+ * to WidgetShape via upgradeToWidgetShape(), and the serialized type
+ * becomes 'WidgetShape'.
+ *
+ * Backward-compat: old saves that stored widget links directly on ImageShape
+ * (with type:'ImageShape' + _isWidgetImage:true) are handled by the
+ * classRegistry alias and the reviver in Canvas.svelte.
+ */
+import { Rect, classRegistry } from 'fabric';
+import { ImageShape, IMAGE_SHAPE_CUSTOM_PROPS } from './ImageShape';
+import { canvasLog, canvasWarn } from '../canvasLogger';
+// Widget-specific custom properties (on top of IMAGE_SHAPE_CUSTOM_PROPS)
+export const WIDGET_SHAPE_EXTRA_PROPS = [
+    '_isWidgetImage',
+    '_widgetId',
+    '_widgetName',
+    '_widgetOrphaned',
+];
+// Full list: base image props + widget props
+export const WIDGET_SHAPE_CUSTOM_PROPS = [
+    ...IMAGE_SHAPE_CUSTOM_PROPS,
+    ...WIDGET_SHAPE_EXTRA_PROPS,
+];
+export class WidgetShape extends ImageShape {
+    static type = 'WidgetShape';
+    _isWidgetImage = false;
+    _widgetId = null;
+    _widgetName = null;
+    /** True when _widgetId no longer exists in the host widget list (deleted or moved). */
+    _widgetOrphaned = false;
+    /** Custom placeholder overlay: replace generic "Drop image" text with the widget name. */
+    _render(ctx) {
+        const hasImage = this._hasImage && this._imageElement;
+        if (hasImage) {
+            super._render(ctx);
+            return;
+        }
+        // Draw the underlying rect background (dashed border stays via stroke).
+        Rect.prototype._render.call(this, ctx);
+        this._renderWidgetPlaceholder(ctx);
+    }
+    _renderWidgetPlaceholder(ctx) {
+        const availableW = this.width || 100;
+        const availableH = this.height || 100;
+        ctx.save();
+        ctx.fillStyle = '#475569';
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        const isOrphaned = !!this._widgetOrphaned;
+        // Widget icon
+        const iconSize = Math.min(48, availableH * 0.28);
+        ctx.font = `${iconSize}px Arial`;
+        ctx.fillText(isOrphaned ? '⚠️' : '🧩', 0, -availableH * 0.18);
+        // Widget name
+        const name = isOrphaned
+            ? 'Unlinked widget'
+            : (this._widgetName || 'Widget');
+        const maxTextWidth = availableW - 24;
+        let fontSize = Math.max(11, Math.min(18, availableW * 0.06));
+        ctx.font = `600 ${fontSize}px system-ui, -apple-system, sans-serif`;
+        let displayName = name;
+        // Truncate with ellipsis if too wide
+        while (ctx.measureText(displayName).width > maxTextWidth && displayName.length > 4) {
+            displayName = displayName.slice(0, -1);
+        }
+        if (displayName.length < name.length)
+            displayName = displayName.slice(0, -1) + '…';
+        ctx.fillStyle = '#1e293b';
+        ctx.fillText(displayName, 0, availableH * 0.06);
+        // Subtitle
+        ctx.font = `400 ${Math.max(10, fontSize - 3)}px system-ui, -apple-system, sans-serif`;
+        ctx.fillStyle = '#64748b';
+        ctx.fillText(isOrphaned ? 'Remove from canvas' : 'Widget preview', 0, availableH * 0.06 + fontSize + 6);
+        ctx.restore();
+    }
+    // ── Serialisation ─────────────────────────────────────────────────────────
+    toObject(propertiesToInclude) {
+        const extras = WIDGET_SHAPE_CUSTOM_PROPS.concat(propertiesToInclude ?? []);
+        const base = super.toObject(extras);
+        return {
+            ...base,
+            type: WidgetShape.type,
+            _imageElement: undefined,
+        };
+    }
+    // ── Deserialisation ───────────────────────────────────────────────────────
+    static fromObject(object, options) {
+        return Rect.fromObject({ ...object, type: 'rect' }, options).then((rect) => {
+            Object.setPrototypeOf(rect, WidgetShape.prototype);
+            const shape = rect;
+            for (const prop of WIDGET_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('WidgetShape: fromObject — restored', shape._objectId || 'shape', 'hasImage:', shape._hasImage, 'isWidget:', shape._isWidgetImage, 'widgetId:', shape._widgetId);
+            return shape;
+        });
+    }
+}
+// Register so loadFromJSON can resolve type:'WidgetShape'
+classRegistry.setClass(WidgetShape);
+/**
+ * Upgrades an ImageShape to a WidgetShape by swapping the prototype chain.
+ * Called when user clicks "Convert to Widget".
+ */
+export function upgradeToWidgetShape(obj) {
+    if (!obj)
+        return null;
+    if (obj instanceof WidgetShape)
+        return obj;
+    try {
+        Object.setPrototypeOf(obj, WidgetShape.prototype);
+        const shape = obj;
+        shape._isWidgetImage = true;
+        canvasLog('WidgetShape: upgraded ImageShape → WidgetShape for', shape._objectId || 'shape');
+        return shape;
+    }
+    catch (err) {
+        canvasWarn('WidgetShape: upgradeToWidgetShape failed', err);
+        return null;
+    }
+}

package/dist/canvas/types.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Canvas component shared types.
+ * Importable by both the canvas project and consuming apps (e.g. widget-creator).
+ */
+/** Payload emitted when a frame is converted to a widget via onConvertToWidget callback. */
+export interface WidgetConversionPayload {
+    frameName: string;
+    frameId: string;
+    screenshot: string;
+    canvasData: {
+        frame: Record<string, any>;
+        children: Record<string, any>[];
+        bounds: {
+            left: number;
+            top: number;
+            width: number;
+            height: number;
+        };
+    };
+    metadata: {
+        childCount: number;
+        shapeTypes: string[];
+        hasImages: boolean;
+        hasText: boolean;
+    };
+}

package/dist/canvas/types.js

@@ -0,0 +1,5 @@
+/**
+ * Canvas component shared types.
+ * Importable by both the canvas project and consuming apps (e.g. widget-creator).
+ */
+export {};

package/dist/components/Tooltip.svelte

@@ -0,0 +1,179 @@
+<script lang="ts">
+    /**
+     * Tooltip — reusable canvas tooltip component
+     *
+     * Usage:
+     *   <Tooltip text="Draw  D">
+     *     <button>Draw</button>
+     *   </Tooltip>
+     *
+     * The tooltip element is appended directly to <body> so it always appears
+     * above overflow containers and CSS transform ancestors (transformed
+     * ancestors would otherwise create a new containing-block for position:fixed,
+     * causing mis-positioning).
+     */
+    import { onDestroy } from 'svelte';
+
+    // Tooltip label
+    export let text: string = '';
+    // Preferred position: 'above' appears above the trigger, 'below' below it
+    export let position: 'above' | 'below' = 'above';
+    // Set to true to suppress the tooltip
+    export let disabled: boolean = false;
+    // Extra vertical offset (px) — positive moves tooltip further from trigger
+    export let offsetY: number = 0;
+
+    let triggerEl: HTMLElement | null = null;
+
+    // Lazily-created body-level elements
+    let tooltipBodyEl: HTMLElement | null = null;
+    let arrowBodyEl: HTMLElement | null = null;
+
+    function ensureBodyEl() {
+        if (tooltipBodyEl) return;
+
+        tooltipBodyEl = document.createElement('div');
+        arrowBodyEl = document.createElement('div');
+        document.body.appendChild(tooltipBodyEl);
+
+        // Base tooltip styles
+        Object.assign(tooltipBodyEl.style, {
+            position: 'fixed',
+            zIndex: '99999',
+            pointerEvents: 'none',
+            display: 'none',
+            background: '#1f2937',
+            color: '#f9fafb',
+            fontSize: '12px',
+            lineHeight: '1.4',
+            padding: '5px 10px',
+            borderRadius: '6px',
+            whiteSpace: 'normal',
+            maxWidth: '200px',
+            textAlign: 'center',
+            boxShadow: '0 2px 8px rgba(0,0,0,0.25)',
+            userSelect: 'none',
+            WebkitUserSelect: 'none',
+        });
+
+        // Arrow base styles — final border values set in show()
+        Object.assign(arrowBodyEl.style, {
+            position: 'absolute',
+            left: '50%',
+            transform: 'translateX(-50%)',
+            width: '0',
+            height: '0',
+            borderLeft: '5px solid transparent',
+            borderRight: '5px solid transparent',
+        });
+    }
+
+    const VIEWPORT_PADDING = 6;
+    const GAP = 8;
+    const ARROW_SIZE = 5;
+
+    function show() {
+        if (disabled || !text || !triggerEl) return;
+        ensureBodyEl();
+
+        // For display:contents wrappers, getBoundingClientRect() returns a zero rect;
+        // fall back to the first visual child in that case.
+        const triggerRect = triggerEl.getBoundingClientRect();
+        const anchor = (triggerRect.width === 0 && triggerRect.height === 0)
+            ? ((triggerEl.firstElementChild as HTMLElement) ?? triggerEl)
+            : triggerEl;
+        const rect = anchor.getBoundingClientRect();
+
+        tooltipBodyEl!.textContent = text;
+        tooltipBodyEl!.appendChild(arrowBodyEl!);
+
+        // Temporarily show off-screen to measure natural size
+        Object.assign(tooltipBodyEl!.style, {
+            display: 'block',
+            left: '-9999px',
+            top: '-9999px',
+            transform: 'none',
+        });
+        const tipW = tooltipBodyEl!.offsetWidth;
+        const tipH = tooltipBodyEl!.offsetHeight;
+
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        const cx = rect.left + rect.width / 2;
+
+        // Decide vertical placement: prefer the requested position, flip if no room
+        let placeAbove = position === 'above';
+        const spaceAbove = rect.top - GAP - offsetY;
+        const spaceBelow = vh - rect.bottom - GAP - offsetY;
+
+        if (placeAbove && tipH > spaceAbove && spaceBelow > spaceAbove) {
+            placeAbove = false;
+        } else if (!placeAbove && tipH > spaceBelow && spaceAbove > spaceBelow) {
+            placeAbove = true;
+        }
+
+        // Vertical position
+        let top: number;
+        if (placeAbove) {
+            top = rect.top - GAP - offsetY - tipH;
+        } else {
+            top = rect.bottom + GAP + offsetY;
+        }
+
+        // Horizontal position: center on trigger, then clamp to viewport
+        let left = cx - tipW / 2;
+        left = Math.max(VIEWPORT_PADDING, Math.min(left, vw - tipW - VIEWPORT_PADDING));
+
+        Object.assign(tooltipBodyEl!.style, {
+            left: `${left}px`,
+            top: `${top}px`,
+            transform: 'none',
+        });
+
+        // Position arrow relative to the trigger center
+        const arrowLeft = Math.max(ARROW_SIZE + 2, Math.min(cx - left, tipW - ARROW_SIZE - 2));
+        if (placeAbove) {
+            Object.assign(arrowBodyEl!.style, {
+                bottom: `${-ARROW_SIZE}px`,
+                top: 'auto',
+                left: `${arrowLeft}px`,
+                transform: 'translateX(-50%)',
+                borderTop: `${ARROW_SIZE}px solid #1f2937`,
+                borderBottom: 'none',
+            });
+        } else {
+            Object.assign(arrowBodyEl!.style, {
+                top: `${-ARROW_SIZE}px`,
+                bottom: 'auto',
+                left: `${arrowLeft}px`,
+                transform: 'translateX(-50%)',
+                borderBottom: `${ARROW_SIZE}px solid #1f2937`,
+                borderTop: 'none',
+            });
+        }
+    }
+
+    function hide() {
+        if (tooltipBodyEl) tooltipBodyEl.style.display = 'none';
+    }
+
+    // Clean up body element when component is destroyed
+    onDestroy(() => {
+        hide();
+        if (tooltipBodyEl) {
+            tooltipBodyEl.remove();
+            tooltipBodyEl = null;
+        }
+    });
+</script>
+
+<!-- display:contents makes this wrapper invisible to layout while still receiving events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+    bind:this={triggerEl}
+    onmouseenter={show}
+    onmouseleave={hide}
+    style="display:contents"
+>
+    <slot />
+</div>

package/dist/components/Tooltip.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        text?: string;
+        position?: "above" | "below";
+        disabled?: boolean;
+        offsetY?: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type TooltipProps = typeof __propDef.props;
+export type TooltipEvents = typeof __propDef.events;
+export type TooltipSlots = typeof __propDef.slots;
+export default class Tooltip extends SvelteComponentTyped<TooltipProps, TooltipEvents, TooltipSlots> {
+}
+export {};

package/dist/components/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Lightweight components barrel — general-purpose, safe for static import.
+ *
+ * Import: import { Tooltip, ColorIC } from '@widgetic/canvas/components';
+ */
+export { default as Tooltip } from './Tooltip.svelte';
+export { default as ColorIC } from './input-controls/ColorIC.svelte';
+export { default as FontSelectorIC } from './input-controls/FontSelectorIC.svelte';
+export { default as SliderUnitIC } from './input-controls/SliderUnitIC.svelte';
+export { default as TextAlignIC } from './input-controls/TextAlignIC.svelte';
+export { default as TextStyleIC } from './input-controls/TextStyleIC.svelte';

package/dist/components/index.js

@@ -0,0 +1,13 @@
+/**
+ * Lightweight components barrel — general-purpose, safe for static import.
+ *
+ * Import: import { Tooltip, ColorIC } from '@widgetic/canvas/components';
+ */
+// General Components
+export { default as Tooltip } from './Tooltip.svelte';
+// Input Controllers
+export { default as ColorIC } from './input-controls/ColorIC.svelte';
+export { default as FontSelectorIC } from './input-controls/FontSelectorIC.svelte';
+export { default as SliderUnitIC } from './input-controls/SliderUnitIC.svelte';
+export { default as TextAlignIC } from './input-controls/TextAlignIC.svelte';
+export { default as TextStyleIC } from './input-controls/TextStyleIC.svelte';