@widgetic/canvas 0.5.4

package/dist/canvas/props-panel/PropsPanel.svelte.d.ts

@@ -0,0 +1,73 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string;
+        style?: string;
+        selectedObject?: any;
+        wireframeMode?: boolean;
+        onFillChange?: (color: string) => void;
+        onStrokeChange?: (color: string) => void;
+        onStrokeWidthChange?: (width: number) => void;
+        onRoundnessChange?: (roundness: number) => void;
+        onStrokeTypeChange?: (type: "solid" | "dashed" | "dotted") => void;
+        onOpacityChange?: (opacity: number) => void;
+        onFillOpacityChange?: (opacity: number) => void;
+        onBackgroundColorChange?: (color: string) => void;
+        onBackgroundOpacityChange?: (opacity: number) => void;
+        onFontSizeChange?: (size: number) => void;
+        onFontFamilyChange?: (family: string) => void;
+        onFontWeightChange?: (weight: "normal" | "bold") => void;
+        onFontStyleChange?: (style: "normal" | "italic") => void;
+        onUnderlineChange?: (underline: boolean) => void;
+        onTextAlignChange?: (align: "left" | "center" | "right") => void;
+        onTextPaddingChange?: (padding: number) => void;
+        onTextColorChange?: (color: string) => void;
+        onFrameLabelChange?: (label: string) => void;
+        onFrameLabelFontSizeChange?: (size: number) => void;
+        onFrameLabelFontFamilyChange?: (family: string) => void;
+        onFrameLabelTextAlignChange?: (align: "left" | "center" | "right") => void;
+        onFrameLabelTextColorChange?: (color: string) => void;
+        onFrameLabelFontWeightChange?: (weight: "normal" | "bold") => void;
+        onFrameLabelFontStyleChange?: (style: "normal" | "italic") => void;
+        onFrameLabelUnderlineChange?: (underline: boolean) => void;
+        onFrameLabelBackgroundColorChange?: (color: string) => void;
+        onTextboxBoxFillChange?: (color: string) => void;
+        onTextboxBoxStrokeChange?: (color: string) => void;
+        onTextboxBoxStrokeWidthChange?: (width: number) => void;
+        onTextboxBoxStrokeTypeChange?: (type: "solid" | "dashed" | "dotted") => void;
+        onTextStrokeColorChange?: (color: string) => void;
+        onTextStrokeWidthChange?: (width: number) => void;
+        onImageUrlLoad?: (url: string) => void;
+        onImageSourceChange?: () => void;
+        onCapture?: (() => void) | null;
+        onConvertToWidget?: (() => void) | null;
+        onWidgetClick?: ((widgetId: string) => void) | null;
+        onWidgetRename?: ((widgetId: string, newName: string) => void) | null;
+        onRefreshScreenshot?: ((widgetId: string) => void) | null;
+        getWidgetName?: ((widgetId: string) => string | null) | null;
+        /** Returns false when the linked widget was deleted or moved off this canvas. */ isWidgetKnown?: ((widgetId: string) => boolean) | null;
+        /** Remove the selected orphaned widget shape from the canvas. */ onRemoveOrphanedShape?: (() => void) | null;
+        onBringToFront?: () => void;
+        onBringForward?: () => void;
+        onSendBackward?: () => void;
+        onSendToBack?: () => void;
+        onAlignLeft?: () => void;
+        onAlignCenterH?: () => void;
+        onAlignRight?: () => void;
+        onAlignTop?: () => void;
+        onAlignMiddleV?: () => void;
+        onAlignBottom?: () => void;
+        onWidthChange?: (width: number) => void;
+        onHeightChange?: (height: number) => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PropsPanelProps = typeof __propDef.props;
+export type PropsPanelEvents = typeof __propDef.events;
+export type PropsPanelSlots = typeof __propDef.slots;
+export default class PropsPanel extends SvelteComponentTyped<PropsPanelProps, PropsPanelEvents, PropsPanelSlots> {
+}
+export {};

package/dist/canvas/props-panel/TextPropsICSection.svelte

@@ -0,0 +1,238 @@
+<script lang="ts">
+    import ColorIC from '../../components/input-controls/ColorIC.svelte';
+    import SliderUnitIC from '../../components/input-controls/SliderUnitIC.svelte';
+    
+    let className = '';
+    export { className as class };
+    export let style = '';
+    
+    // Current values
+    export let fontSize: number = 28;
+    export let fontFamily: string = 'Arial';
+    export let fontWeight: 'normal' | 'bold' = 'normal';
+    export let fontStyle: 'normal' | 'italic' = 'normal';
+    export let underline: boolean = false;
+    export let textAlign: 'left' | 'center' | 'right' = 'left';
+    export let textColor: string = '#000000';
+    
+    // Callbacks
+    export let onFontSizeChange: (size: number) => void = () => {};
+    export let onFontFamilyChange: (family: string) => void = () => {};
+    export let onFontWeightChange: (weight: 'normal' | 'bold') => void = () => {};
+    export let onFontStyleChange: (style: 'normal' | 'italic') => void = () => {};
+    export let onUnderlineChange: (underline: boolean) => void = () => {};
+    export let onTextAlignChange: (align: 'left' | 'center' | 'right') => void = () => {};
+    export let onTextColorChange: (color: string) => void = () => {};
+    
+    // Show/hide certain controls
+    export let showFontSize: boolean = true;
+    export let showFontFamily: boolean = true;
+    export let showTextStyle: boolean = true;
+    export let showTextAlign: boolean = true;
+    export let showTextColor: boolean = true;
+    
+    // Font presets
+    const fontFamilies = [
+        'Arial',
+        'Helvetica',
+        'Times New Roman',
+        'Georgia',
+        'Verdana',
+        'Courier New',
+        'Impact',
+        'Comic Sans MS'
+    ];
+    
+    function handleFontFamilyChange(e: Event) {
+        const select = e.target as HTMLSelectElement;
+        onFontFamilyChange(select.value);
+    }
+</script>
+
+<div class="{className ? className + ' ' : ''}text-props-component" style={style}>
+    
+    {#if showFontSize}
+        <SliderUnitIC
+            label="Font Size"
+            value={fontSize}
+            min={8}
+            max={120}
+            step={1}
+            unit="px"
+            onChange={onFontSizeChange}
+        />
+    {/if}
+    
+    {#if showFontFamily}
+        <div class="prop-section">
+            <span class="prop-label">Font Family</span>
+            <select 
+                value={fontFamily}
+                onchange={handleFontFamilyChange}
+                class="font-select"
+            >
+                {#each fontFamilies as font}
+                    <option value={font} style="font-family: {font}">{font}</option>
+                {/each}
+            </select>
+        </div>
+    {/if}
+    
+    {#if showTextStyle}
+        <div class="prop-section">
+            <span class="prop-label">Text Style</span>
+            <div class="text-style-buttons">
+                <button 
+                    class="style-btn {fontWeight === 'bold' ? 'active' : ''}"
+                    onclick={() => onFontWeightChange(fontWeight === 'bold' ? 'normal' : 'bold')}
+                    title="Bold"
+                >
+                    <strong>B</strong>
+                </button>
+                <button 
+                    class="style-btn {fontStyle === 'italic' ? 'active' : ''}"
+                    onclick={() => onFontStyleChange(fontStyle === 'italic' ? 'normal' : 'italic')}
+                    title="Italic"
+                >
+                    <em>I</em>
+                </button>
+                <button 
+                    class="style-btn {underline ? 'active' : ''}"
+                    onclick={() => onUnderlineChange(!underline)}
+                    title="Underline"
+                >
+                    <span style="text-decoration: underline">U</span>
+                </button>
+            </div>
+        </div>
+    {/if}
+    
+    {#if showTextAlign}
+        <div class="prop-section">
+            <span class="prop-label">Text Align</span>
+            <div class="align-buttons">
+                <button 
+                    class="align-btn {textAlign === 'left' ? 'active' : ''}"
+                    onclick={() => onTextAlignChange('left')}
+                    title="Align Left"
+                >⫷</button>
+                <button 
+                    class="align-btn {textAlign === 'center' ? 'active' : ''}"
+                    onclick={() => onTextAlignChange('center')}
+                    title="Center"
+                >☰</button>
+                <button 
+                    class="align-btn {textAlign === 'right' ? 'active' : ''}"
+                    onclick={() => onTextAlignChange('right')}
+                    title="Align Right"
+                >⫸</button>
+            </div>
+        </div>
+    {/if}
+    
+    {#if showTextColor}
+        <ColorIC
+            label="Text Color"
+            value={textColor}
+            onChange={onTextColorChange}
+        />
+    {/if}
+</div>
+
+<style>
+    .text-props-component {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+    
+    .prop-section {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+    }
+    
+    .prop-label {
+        font-size: 11px;
+        font-weight: 600;
+        color: #6b7280;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+    }
+    
+    /* Font select */
+    .font-select {
+        width: 100%;
+        padding: 6px 8px;
+        border: 1px solid #d1d5db;
+        border-radius: 4px;
+        font-size: 12px;
+        cursor: pointer;
+        background: white;
+    }
+    
+    .font-select:focus {
+        outline: none;
+        border-color: var(--accent, #314F2F);
+    }
+    
+    /* Text style buttons */
+    .text-style-buttons {
+        display: flex;
+        gap: 4px;
+    }
+    
+    .style-btn {
+        width: 32px;
+        height: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid #d1d5db;
+        border-radius: 4px;
+        background: white;
+        font-size: 14px;
+        cursor: pointer;
+        transition: all 0.15s ease;
+    }
+    
+    .style-btn:hover {
+        background: #f3f4f6;
+    }
+    
+    .style-btn.active {
+        background: var(--accent, #314F2F);
+        color: white;
+        border-color: var(--accent, #314F2F);
+    }
+    
+    /* Align buttons */
+    .align-buttons {
+        display: flex;
+        gap: 4px;
+    }
+    
+    .align-btn {
+        flex: 1;
+        height: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid #d1d5db;
+        border-radius: 4px;
+        background: white;
+        font-size: 14px;
+        cursor: pointer;
+        transition: all 0.15s ease;
+    }
+    
+    .align-btn:hover {
+        background: #f3f4f6;
+    }
+    
+    .align-btn.active {
+        background: var(--accent, #314F2F);
+        color: white;
+        border-color: var(--accent, #314F2F);
+    }
+</style>

package/dist/canvas/props-panel/TextPropsICSection.svelte.d.ts

@@ -0,0 +1,36 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string;
+        style?: string;
+        fontSize?: number;
+        fontFamily?: string;
+        fontWeight?: "normal" | "bold";
+        fontStyle?: "normal" | "italic";
+        underline?: boolean;
+        textAlign?: "left" | "center" | "right";
+        textColor?: string;
+        onFontSizeChange?: (size: number) => void;
+        onFontFamilyChange?: (family: string) => void;
+        onFontWeightChange?: (weight: "normal" | "bold") => void;
+        onFontStyleChange?: (style: "normal" | "italic") => void;
+        onUnderlineChange?: (underline: boolean) => void;
+        onTextAlignChange?: (align: "left" | "center" | "right") => void;
+        onTextColorChange?: (color: string) => void;
+        showFontSize?: boolean;
+        showFontFamily?: boolean;
+        showTextStyle?: boolean;
+        showTextAlign?: boolean;
+        showTextColor?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TextPropsICSectionProps = typeof __propDef.props;
+export type TextPropsICSectionEvents = typeof __propDef.events;
+export type TextPropsICSectionSlots = typeof __propDef.slots;
+export default class TextPropsICSection extends SvelteComponentTyped<TextPropsICSectionProps, TextPropsICSectionEvents, TextPropsICSectionSlots> {
+}
+export {};

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

@@ -0,0 +1,97 @@
+/**
+ * FrameShape - A container shape extending Fabric.js Group
+ *
+ * Features:
+ * - Extends fabric.Group to act as a container for child objects
+ * - interactive: true — children can be selected/edited directly (tldraw-like)
+ *   - Click on a child → selects that child for individual editing
+ *   - Click on frame background → selects the frame itself
+ * - ClipPath for bounding/clipping content inside frame boundaries
+ * - Customizable label drawn above the frame (with text wrapping, rotation support)
+ * - Custom controls: corner resize only, no rotation handle
+ * - Minimum size enforcement
+ * - Serialization support with custom properties
+ * - addObjectToFrame / removeObjectFromFrame with automatic coordinate conversion
+ *   (Fabric's native _enterGroup/_exitGroup handles absolute ↔ group-relative transforms)
+ *
+ * Containment detection (drag in/out) is handled by Canvas.svelte's
+ * object:modified handler since it requires canvas-level access.
+ */
+import { Group, Rect, type FabricObject, type Canvas as FabricCanvas } from 'fabric';
+export declare const MIN_FRAME_WIDTH = 50;
+export declare const MIN_FRAME_HEIGHT = 30;
+export declare const DEFAULT_STROKE = "#2563eb";
+export declare const FRAME_HOVER_STROKE = "#1d4ed8";
+export interface FrameShapeOptions {
+    left?: number;
+    top?: number;
+    width?: number;
+    height?: number;
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+    labelText?: string;
+    labelFontSize?: number;
+    labelFontFamily?: string;
+    labelColor?: string;
+    labelBackgroundColor?: string;
+    labelTextAlign?: 'left' | 'center' | 'right';
+    labelFontWeight?: string;
+    labelFontStyle?: string;
+    labelUnderline?: boolean;
+}
+export declare class FrameShape extends Group {
+    static type: string;
+    /**
+     * Serialise the frame with type = 'FrameShape' plus all custom label/style
+     * props so they survive a canvas.toJSON() → loadFromJSON() round-trip.
+     * FRAME_CUSTOM_PROPS and _objectId are always included regardless of what
+     * the canvas passes as propertiesToInclude.
+     */
+    toObject(propertiesToInclude?: any[]): any;
+    /**
+     * Deserialise a saved FrameShape.
+     * Delegates to Group.fromObject (handles enlivenObjects, FixedLayout setup,
+     * and subscribeTargets) then upgrades the plain Group to a proper FrameShape
+     * instance via Object.setPrototypeOf before re-applying the custom render.
+     *
+     * WHY setPrototypeOf:
+     * Group.fromObject always returns `new Group(...)` whose prototype is Group.prototype.
+     * After setPrototypeOf → FrameShape.prototype, the instance:
+     *   • reports type === 'FrameShape' (via FrameShape.prototype.type)
+     *   • calls FrameShape.prototype.toObject() on save → emits type:'FrameShape' + custom props
+     *   • classRegistry dispatches FrameShape.fromObject on next reload
+     */
+    static fromObject(object: any, options?: any): Promise<FrameShape>;
+}
+export declare function createFrameShape(options?: FrameShapeOptions): Group;
+export declare function setupClipPath(frame: Group): void;
+export declare function updateClipPath(frame: Group): void;
+export declare function updateFrameCornerRadius(frame: Group, radiusPixels: number): void;
+export declare function addObjectToFrame(frame: Group, object: FabricObject, canvas: FabricCanvas): void;
+export declare function removeObjectFromFrame(frame: Group, object: FabricObject, canvas: FabricCanvas): void;
+export declare function isPointInFrameLabel(frame: Group, point: {
+    x: number;
+    y: number;
+}): boolean;
+export declare function isPointInsideFrame(frame: Group, point: {
+    x: number;
+    y: number;
+}): boolean;
+export declare function isPointOnFrameBorder(frame: Group, point: {
+    x: number;
+    y: number;
+}): boolean;
+export declare function applyFrameHitTest(frame: Group): void;
+export declare function getFrameChildren(frame: Group): FabricObject[];
+export declare function getFrameBackground(frame: Group): Rect | null;
+export declare function updateFrameBackground(frame: Group, props: {
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+}): void;
+export declare function normalizeFrameAfterScaling(frame: Group, preserveChildren?: boolean): void;
+export declare function enforceFrameMinSize(frame: Group): void;
+export declare const FRAME_CUSTOM_PROPS: string[];
+export declare function isFrameShape(obj: any): boolean;
+export declare function reapplyFrameRender(frame: Group): void;