@widgetic/canvas 0.5.4 → 0.5.6

package/dist/canvas/Canvas.svelte.d.ts

@@ -36,17 +36,30 @@ declare const __propDef: {
         onWidgetShapeDeleting?: ((widgetId: string) => Promise<boolean>) | null;
         onWidgetRename?: ((widgetId: string, newName: string) => void) | null;
         onRefreshScreenshot?: ((widgetId: string) => void) | null;
+        /** Host persists canvases.primary_widget_id after Canvas paints the red stroke. */ onSetPrimaryWidget?: ((widgetId: string) => void) | null;
         getWidgetName?: ((widgetId: string) => string | null) | null;
         /** Returns true when widgetId still exists in the host widget list. */ isWidgetKnown?: ((widgetId: string) => boolean) | null;
         showLogs?: boolean;
         shapeFillColor?: () => string;
         deselectAll?: () => void;
+        duplicateSelectedObjects?: () => Promise<void>;
+        deleteSelectedObjects?: () => Promise<void>;
         markSelectedAsDuplicating?: () => void;
         linkObjectToWidget?: (fabricObject: any, widgetId: string, widgetName?: string | null) => void;
         linkFrameToWidget?: (objectId: string, widgetId: string) => void;
         replaceObjectWithWidgetImage?: (objectId: string, widgetId: string, screenshotDataUrl: string) => Promise<string | null>;
         updateWidgetImage?: (widgetId: string, newScreenshotDataUrl: string) => void;
         selectWidgetShape?: (widgetId: string) => boolean;
+        getWidgetShapeScreenRect?: (widgetId: string) => {
+            left: number;
+            top: number;
+            width: number;
+            height: number;
+            viewportLeft: number;
+            viewportTop: number;
+            viewportWidth: number;
+            viewportHeight: number;
+        } | null;
         getWidgetShapeDataUrl?: (widgetId: string) => string | null;
         addWidgetShape?: (widgetId: string, widgetName?: string, gridIndex?: number, totalCount?: number, previewImageUrl?: string | null) => string | null;
         getLinkedWidgetIds?: () => Set<string>;
@@ -64,6 +77,8 @@ declare const __propDef: {
         onSelectArrowTool?: () => void;
         onSelectShapeTool?: (shapeType: "rect" | "circle" | "circle-true" | "triangle" | "arrow") => void;
         onSelectFrameTool?: () => void;
+        setPrimaryWidgetShape?: (widgetId: string) => boolean;
+        getPrimaryWidgetId?: () => string | null;
         onSelectImageTool?: () => void;
         onSelectPanTool?: () => void;
         zoomIn?: () => void;
@@ -71,10 +86,11 @@ declare const __propDef: {
         zoomTo?: (percent: number) => void;
         zoomReset?: () => void;
         zoomFit?: () => void;
-        onGroupSelection?: () => void;
+        onGroupSelection?: () => string | null;
         onUngroupSelection?: () => void;
         onSelectAllObjects?: () => void;
         onDeselectAllObjects?: () => void;
+        saveNow?: () => void;
         undo?: () => Promise<void>;
         redo?: () => Promise<void>;
         saveCanvas?: () => string | null;
@@ -98,12 +114,24 @@ export type CanvasSlots = typeof __propDef.slots;
 export default class Canvas extends SvelteComponentTyped<CanvasProps, CanvasEvents, CanvasSlots> {
     get shapeFillColor(): () => string;
     get deselectAll(): () => void;
+    get duplicateSelectedObjects(): () => Promise<void>;
+    get deleteSelectedObjects(): () => Promise<void>;
     get markSelectedAsDuplicating(): () => void;
     get linkObjectToWidget(): (fabricObject: any, widgetId: string, widgetName?: string | null) => void;
     get linkFrameToWidget(): (objectId: string, widgetId: string) => void;
     get replaceObjectWithWidgetImage(): (objectId: string, widgetId: string, screenshotDataUrl: string) => Promise<string | null>;
     get updateWidgetImage(): (widgetId: string, newScreenshotDataUrl: string) => void;
     get selectWidgetShape(): (widgetId: string) => boolean;
+    get getWidgetShapeScreenRect(): (widgetId: string) => {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        viewportLeft: number;
+        viewportTop: number;
+        viewportWidth: number;
+        viewportHeight: number;
+    } | null;
     get getWidgetShapeDataUrl(): (widgetId: string) => string | null;
     get addWidgetShape(): (widgetId: string, widgetName?: string, gridIndex?: number, totalCount?: number, previewImageUrl?: string | null) => string | null;
     get getLinkedWidgetIds(): () => Set<string>;
@@ -121,6 +149,8 @@ export default class Canvas extends SvelteComponentTyped<CanvasProps, CanvasEven
     get onSelectArrowTool(): () => void;
     get onSelectShapeTool(): (shapeType: "rect" | "circle" | "circle-true" | "triangle" | "arrow") => void;
     get onSelectFrameTool(): () => void;
+    get setPrimaryWidgetShape(): (widgetId: string) => boolean;
+    get getPrimaryWidgetId(): () => string | null;
     get onSelectImageTool(): () => void;
     get onSelectPanTool(): () => void;
     get zoomIn(): () => void;
@@ -128,10 +158,11 @@ export default class Canvas extends SvelteComponentTyped<CanvasProps, CanvasEven
     get zoomTo(): (percent: number) => void;
     get zoomReset(): () => void;
     get zoomFit(): () => void;
-    get onGroupSelection(): () => void;
+    get onGroupSelection(): () => string | null;
     get onUngroupSelection(): () => void;
     get onSelectAllObjects(): () => void;
     get onDeselectAllObjects(): () => void;
+    get saveNow(): () => void;
     get undo(): () => Promise<void>;
     get redo(): () => Promise<void>;
     get saveCanvas(): () => string | null;

package/dist/canvas/CanvasToolbar.svelte

@@ -974,6 +974,11 @@ button:disabled {
     color: white !important;
     box-shadow: 0 2px 8px rgba(26, 58, 42, 0.25);
 }
+.wdg-tool-active :global(svg),
+.wdg-tool-active :global(svg *) {
+    color: white !important;
+    stroke: currentColor !important;
+}
 .wdg-tool-active:hover {
     background: #244b36 !important;
     color: white !important;

package/dist/canvas/PanZoomPanel.svelte

@@ -241,13 +241,26 @@
 
     .panel-btn.active {
         background: var(--main-color, #314F2F);
-        color: white;
+        color: white !important;
         border-color: var(--main-color, #314F2F);
     }
 
+    /* Host apps (widget-creator / site) may set a global svg color; force icons to follow the button. */
+    .panel-btn.active :global(svg),
+    .panel-btn.active :global(svg *) {
+        color: white !important;
+        stroke: currentColor !important;
+    }
+
     .panel-btn.active:hover {
         background: var(--main-color-hover, #263d24);
-        color: white;
+        color: white !important;
+    }
+
+    .panel-btn.active:hover :global(svg),
+    .panel-btn.active:hover :global(svg *) {
+        color: white !important;
+        stroke: currentColor !important;
     }
 
     .panel-btn:disabled {

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

@@ -27,6 +27,11 @@
     export let onStrokeTypeChange: (type: 'solid' | 'dashed' | 'dotted') => void = () => {};
     export let onOpacityChange: (opacity: number) => void = () => {};
     export let onFillOpacityChange: (opacity: number) => void = () => {};
+    export let onGroupFillChange: (color: string) => void = () => {};
+    export let onGroupFillOpacityChange: (opacity: number) => void = () => {};
+    export let onGroupStrokeChange: (color: string) => void = () => {};
+    export let onGroupStrokeWidthChange: (width: number) => void = () => {};
+    export let onGroupStrokeTypeChange: (type: 'solid' | 'dashed' | 'dotted') => void = () => {};
     export let onBackgroundColorChange: (color: string) => void = () => {};
     export let onBackgroundOpacityChange: (opacity: number) => void = () => {};
     
@@ -81,6 +86,7 @@
 
     // Callback: fires when the user requests a screenshot refresh for the linked widget
     export let onRefreshScreenshot: ((widgetId: string) => void) | null = null;
+    export let onSetAsPrimary: ((widgetId: string) => void) | null = null;
 
     // Widget name resolver: given a widgetId, returns the widget name (or null)
     export let getWidgetName: ((widgetId: string) => string | null) | null = null;
@@ -133,6 +139,7 @@
     // FrameShape objects have type === 'FrameShape', not 'group', so isGroup is always false for them.
     // isMultiSelect is only true for plain Groups and ActiveSelections (not Frames).
     $: isMultiSelect = (isGroup && !isFrame) || isActiveSelection;
+    $: isPlainGroup = isGroup && !isFrame;
     $: isLine = objectType === 'line';
     $: isImage = objectType === 'image' || customType === 'image';
     // Widget link: true when the selected object has already been converted to a widget
@@ -220,7 +227,6 @@
     // For Frames (Group-based), read fill/stroke from custom properties (_frameFill, _frameStroke)
     // because the actual fill/stroke is on the background Rect child, not the Group itself
     $: currentFill = isFrame ? (selectedObject?._frameFill ?? '#FFFFFF') : (selectedObject?.fill ?? '#FFFFFF');
-    // Fill opacity is stored as custom property _fillOpacity (0-1), display as percentage
     $: currentFillOpacity = Math.round((selectedObject?._fillOpacity ?? 1) * 100);
     $: currentStroke = isFrame ? (selectedObject?._frameStroke ?? '#000000') : (selectedObject?.stroke ?? '#000000');
     $: currentStrokeWidth = isFrame ? (selectedObject?._frameStrokeWidth ?? 1) : (selectedObject?.strokeWidth ?? 1);
@@ -238,6 +244,11 @@
             ? (selectedObject as any)?._frameStrokeDashArray
             : selectedObject?.strokeDashArray
     );
+    $: groupFill = selectedObject?._groupFill ?? '#FFFFFF';
+    $: groupFillOpacity = Math.round((selectedObject?._groupFillOpacity ?? 1) * 100);
+    $: groupStroke = selectedObject?._groupStroke ?? '#000000';
+    $: groupStrokeWidth = selectedObject?._groupStrokeWidth ?? 0;
+    $: groupStrokeType = getStrokeType((selectedObject as any)?._groupStrokeDashArray);
     
     // Text properties - for groups, get from first textbox
     $: firstTextboxInGroup = (selectedObject?.type === 'group' || selectedObject?.type === 'activeSelection' || selectedObject?.type === 'activeselection') 
@@ -538,6 +549,20 @@
                             Refresh Widget Preview
                         </button>
                     {/if}
+                    {#if onSetAsPrimary && widgetId}
+                        {#if selectedObject?._isPrimaryWidget}
+                            <span class="primary-widget-badge">Primary widget</span>
+                        {:else}
+                            <button
+                                class="set-primary-btn"
+                                type="button"
+                                title="Use this widget as the canvas primary (red stroke)"
+                                onclick={() => onSetAsPrimary && widgetId && onSetAsPrimary(widgetId)}
+                            >
+                                Set as primary
+                            </button>
+                        {/if}
+                    {/if}
                     {/if}
                 {:else}
                     <span class="prop-label">Convert to Widget</span>
@@ -1115,6 +1140,81 @@
         {/if}
     {/if}
 
+    <!-- ==================== GROUP BOX (chrome around children, like Frame) ==================== -->
+    {#if isPlainGroup && !isWidgetImage}
+        <div class="section-divider">
+            <span class="section-title">Group Box</span>
+        </div>
+        {#if wireframeMode || !isMinimized}
+        <div class="prop-section">
+            <ColorIC
+                label="Group Fill Color"
+                value={groupFill || '#FFFFFF'}
+                onChange={onGroupFillChange}
+                showPicker={!wireframeMode}
+                presets={wireframeMode ? wireframeColorValues : null}
+            />
+        </div>
+        {/if}
+        <SliderUnitIC
+            label="Group Fill Opacity"
+            value={groupFillOpacity}
+            min={0}
+            max={100}
+            step={1}
+            unit="%"
+            onChange={onGroupFillOpacityChange}
+        />
+        {#if wireframeMode || !isMinimized}
+        <div class="prop-section">
+            <ColorIC
+                label="Group Stroke Color"
+                value={groupStroke || '#000000'}
+                onChange={onGroupStrokeChange}
+                showPicker={!wireframeMode}
+                presets={wireframeMode ? wireframeColorValues : null}
+            />
+        </div>
+        {/if}
+        <SliderUnitIC
+            label="Group Stroke Width"
+            value={groupStrokeWidth}
+            min={0}
+            max={20}
+            step={1}
+            unit="px"
+            onChange={onGroupStrokeWidthChange}
+        />
+        {#if !isMinimized}
+        <div class="prop-section">
+            <span class="prop-label">Group Stroke Type</span>
+            <div class="stroke-type-buttons">
+                <button
+                    class="stroke-type-btn {groupStrokeType === 'solid' ? 'active' : ''}"
+                    onclick={() => onGroupStrokeTypeChange('solid')}
+                >
+                    <span class="stroke-preview solid"></span>
+                    Solid
+                </button>
+                <button
+                    class="stroke-type-btn {groupStrokeType === 'dashed' ? 'active' : ''}"
+                    onclick={() => onGroupStrokeTypeChange('dashed')}
+                >
+                    <span class="stroke-preview dashed"></span>
+                    Dashed
+                </button>
+                <button
+                    class="stroke-type-btn {groupStrokeType === 'dotted' ? 'active' : ''}"
+                    onclick={() => onGroupStrokeTypeChange('dotted')}
+                >
+                    <span class="stroke-preview dotted"></span>
+                    Dotted
+                </button>
+            </div>
+        </div>
+        {/if}
+    {/if}
+
     <!-- ==================== TEXT PROPERTIES (for selection/group containing textboxes or frames) ==================== -->
     {#if !isMinimized && hasTextboxInSelection}
         <div class="section-divider">
@@ -1583,6 +1683,37 @@
         flex-shrink: 0;
     }
 
+    .set-primary-btn {
+        display: flex;
+        align-items: center;
+        margin-top: 4px;
+        padding: 3px 8px;
+        font-size: 11px;
+        font-weight: 500;
+        color: #991b1b;
+        background: #fef2f2;
+        border: 1px solid #fecaca;
+        border-radius: 4px;
+        cursor: pointer;
+        width: fit-content;
+    }
+    .set-primary-btn:hover {
+        background: #fee2e2;
+        border-color: #f87171;
+    }
+    .primary-widget-badge {
+        display: inline-block;
+        margin-top: 4px;
+        padding: 3px 8px;
+        font-size: 11px;
+        font-weight: 600;
+        color: #991b1b;
+        background: #fef2f2;
+        border: 1px solid #fecaca;
+        border-radius: 4px;
+        width: fit-content;
+    }
+
     .widget-orphan-notice {
         font-size: 11px;
         line-height: 1.45;

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

@@ -12,6 +12,11 @@ declare const __propDef: {
         onStrokeTypeChange?: (type: "solid" | "dashed" | "dotted") => void;
         onOpacityChange?: (opacity: number) => void;
         onFillOpacityChange?: (opacity: number) => void;
+        onGroupFillChange?: (color: string) => void;
+        onGroupFillOpacityChange?: (opacity: number) => void;
+        onGroupStrokeChange?: (color: string) => void;
+        onGroupStrokeWidthChange?: (width: number) => void;
+        onGroupStrokeTypeChange?: (type: "solid" | "dashed" | "dotted") => void;
         onBackgroundColorChange?: (color: string) => void;
         onBackgroundOpacityChange?: (opacity: number) => void;
         onFontSizeChange?: (size: number) => void;
@@ -44,6 +49,7 @@ declare const __propDef: {
         onWidgetClick?: ((widgetId: string) => void) | null;
         onWidgetRename?: ((widgetId: string, newName: string) => void) | null;
         onRefreshScreenshot?: ((widgetId: string) => void) | null;
+        onSetAsPrimary?: ((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;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@widgetic/canvas",
-	"version": "0.5.4",
+	"version": "0.5.6",
 	"type": "module",
 	"svelte": "./dist/index.js",
 	"module": "./dist/index.js",