@widgetic/canvas 0.5.6 → 0.5.9

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

@@ -122,9 +122,8 @@
     $: isFrame = customType === 'frame' || objectType === 'frame';
     // WidgetShape is a Rect subclass with _customType === 'image'
     // isImagePlaceholder: when no image loaded yet (_hasImage is false)
-    $: isImagePlaceholder = customType === 'image' && !selectedObject?._hasImage;
-    // isRect excludes WidgetShape (which has _customType === 'image')
-    $: isRect = objectType === 'rect' && !isFrame && customType !== 'image';
+    $: isImagePlaceholder = (customType === 'image' || customType === 'video') && !selectedObject?._hasImage;
+    $: isRect = objectType === 'rect' && !isFrame && customType !== 'image' && customType !== 'video';
     $: isTextbox = objectType === 'textbox';
     $: isPath = objectType === 'path' && !customType;
     $: isArrow = objectType === 'path' && customType === 'arrow';
@@ -141,7 +140,7 @@
     $: isMultiSelect = (isGroup && !isFrame) || isActiveSelection;
     $: isPlainGroup = isGroup && !isFrame;
     $: isLine = objectType === 'line';
-    $: isImage = objectType === 'image' || customType === 'image';
+    $: isImage = objectType === 'image' || customType === 'image' || customType === 'video';
     // Widget link: true when the selected object has already been converted to a widget
     $: hasWidgetId = !!selectedObject?._widgetId;
     $: widgetId = selectedObject?._widgetId ?? null;
@@ -195,6 +194,7 @@
         if (obj._customType === 'frame') return 'Frame';
         if (obj._customType === 'arrow') return 'Arrow';
         if (obj._customType === 'triangle') return 'Triangle';
+        if (obj._customType === 'video') return 'Video';
         if (obj._customType === 'image' || obj.type === 'image') return 'Image';
         // Library shapes: derive a readable name from _shapeKey (e.g. 'arrow-right' → 'Arrow Right')
         // Fall back to 'Custom Shape (Drawing)' if _shapeKey is missing (old saves).
@@ -226,7 +226,13 @@
     // Get current values from selected object
     // 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');
+    $: usesPathBackgroundFill = selectedObject?._cornerRadiusMode === 'strokeRound'
+        || ['cross', 'plus', 'minus', 'check'].includes(selectedObject?._shapeKey);
+    $: currentFill = isFrame
+        ? (selectedObject?._frameFill ?? '#FFFFFF')
+        : (usesPathBackgroundFill
+            ? (selectedObject?._iconFill || selectedObject?.backgroundColor || '#FFFFFF')
+            : (selectedObject?.fill ?? '#FFFFFF'));
     $: currentFillOpacity = Math.round((selectedObject?._fillOpacity ?? 1) * 100);
     $: currentStroke = isFrame ? (selectedObject?._frameStroke ?? '#000000') : (selectedObject?.stroke ?? '#000000');
     $: currentStrokeWidth = isFrame ? (selectedObject?._frameStrokeWidth ?? 1) : (selectedObject?.strokeWidth ?? 1);
@@ -568,7 +574,7 @@
                     <span class="prop-label">Convert to Widget</span>
                     <div class="capture-section">
                         <button class="convert-widget-btn" onclick={onConvertToWidget}>
-                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <svg class="convert-widget-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                 <rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/>
                                 <line x1="7" y1="2" x2="7" y2="22"/>
                                 <line x1="17" y1="2" x2="17" y2="22"/>
@@ -1305,6 +1311,16 @@
         border-radius: 8px;
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     }
+
+    .props-panel-el :global(button:focus),
+    .props-panel-el :global(button:focus-visible),
+    .props-panel-el :global(a:focus),
+    .props-panel-el :global(a:focus-visible),
+    .props-panel-el :global(input:focus),
+    .props-panel-el :global(input:focus-visible) {
+        outline: none !important;
+        box-shadow: none !important;
+    }
     
     /* Sticky header: stays at top, never scrolls */
     .props-panel-sticky-header {
@@ -1550,9 +1566,14 @@
         box-shadow: 0 2px 4px rgba(49, 79, 47, 0.3);
     }
 
-    .convert-widget-btn svg {
+    /* Host apps (site / DS) leak global svg fill/stroke; keep this icon white on the green button. */
+    .convert-widget-btn :global(svg),
+    .convert-widget-btn :global(svg *) {
         width: 16px;
         height: 16px;
+        color: #ffffff !important;
+        fill: none !important;
+        stroke: currentColor !important;
     }
 
     .widget-linked-section {
@@ -1669,7 +1690,9 @@
         border-radius: 4px;
         cursor: pointer;
         transition: all 0.15s;
-        width: fit-content;
+        width: 100%;
+        box-sizing: border-box;
+        justify-content: center;
     }
     .refresh-screenshot-btn:hover {
         color: #166534;
@@ -1695,14 +1718,18 @@
         border: 1px solid #fecaca;
         border-radius: 4px;
         cursor: pointer;
-        width: fit-content;
+        width: 100%;
+        box-sizing: border-box;
+        justify-content: center;
     }
     .set-primary-btn:hover {
         background: #fee2e2;
         border-color: #f87171;
     }
     .primary-widget-badge {
-        display: inline-block;
+        display: flex;
+        align-items: center;
+        justify-content: center;
         margin-top: 4px;
         padding: 3px 8px;
         font-size: 11px;
@@ -1711,7 +1738,9 @@
         background: #fef2f2;
         border: 1px solid #fecaca;
         border-radius: 4px;
-        width: fit-content;
+        width: 100%;
+        box-sizing: border-box;
+        text-align: center;
     }
 
     .widget-orphan-notice {

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

@@ -24,8 +24,17 @@ export declare class ImageShape extends Rect {
     _cornerRoundness: number;
     _cornerRoundnessPixels: number;
     _objectId: string | null;
+    _videoElement: HTMLVideoElement | null;
+    _videoObjectUrl: string | null;
     _render(ctx: CanvasRenderingContext2D): void;
     private _renderImage;
+    getVideoPlayBadgeRadius(): number;
+    isVideoPlayBadgeHit(scenePoint: {
+        x: number;
+        y: number;
+    }): boolean;
+    toggleVideoPlayback(): Promise<boolean>;
+    private _renderVideoChrome;
     private _renderPlaceholderOverlay;
     toObject(propertiesToInclude?: any[]): any;
     static fromObject(object: Record<string, unknown>, options?: Record<string, unknown>): Promise<ImageShape>;

package/dist/canvas/shapes/ImageShape.js

@@ -36,9 +36,12 @@ export class ImageShape extends Rect {
     _cornerRoundness = 0;
     _cornerRoundnessPixels = 0;
     _objectId = null;
+    _videoElement = null;
+    _videoObjectUrl = null;
     // ── Placeholder rendering ─────────────────────────────────────────────────
     _render(ctx) {
-        const hasImage = this._hasImage && this._imageElement;
+        const hasVideoFrame = this._customType === 'video' && !!this._videoElement && this._videoElement.readyState >= 2;
+        const hasImage = (this._hasImage && this._imageElement) || hasVideoFrame;
         if (hasImage) {
             this._renderImage(ctx);
         }
@@ -78,9 +81,12 @@ export class ImageShape extends Rect {
         ctx.closePath();
         ctx.clip();
         const img = this._imageElement;
-        const imgReady = img.complete && img.naturalWidth > 0;
-        if (imgReady) {
-            if (this._isWidgetImage) {
+        const video = this._customType === 'video' ? this._videoElement : null;
+        const useVideo = !!(video && video.readyState >= 2);
+        const source = useVideo ? video : (img && img.complete && img.naturalWidth > 0 ? img : null);
+        const imgReady = !!source;
+        if (source) {
+            if (this._isWidgetImage && img && img.complete && img.naturalWidth > 0 && !useVideo) {
                 const imgW = img.naturalWidth;
                 const imgH = img.naturalHeight;
                 const scale = Math.min(w / imgW, h / imgH);
@@ -89,10 +95,13 @@ export class ImageShape extends Rect {
                 ctx.drawImage(img, -dw / 2, -dh / 2, dw, dh);
             }
             else {
-                ctx.drawImage(img, -w / 2, -h / 2, w, h);
+                ctx.drawImage(source, -w / 2, -h / 2, w, h);
             }
         }
         ctx.restore();
+        if (this._customType === 'video' && imgReady) {
+            this._renderVideoChrome(ctx, w, h);
+        }
         if (this.stroke && (this.strokeWidth ?? 0) > 0) {
             ctx.save();
             ctx.strokeStyle = this.stroke;
@@ -126,32 +135,114 @@ export class ImageShape extends Rect {
             ctx.restore();
         }
     }
+    getVideoPlayBadgeRadius() {
+        const w = this.width || 100;
+        const h = this.height || 100;
+        const size = Math.max(18, Math.min(w, h) * 0.22);
+        return (size / 2) * Math.max(this.scaleX || 1, this.scaleY || 1);
+    }
+    isVideoPlayBadgeHit(scenePoint) {
+        if (this._customType !== 'video' || !this._videoElement)
+            return false;
+        const center = this.getCenterPoint();
+        const radius = this.getVideoPlayBadgeRadius();
+        const dx = scenePoint.x - center.x;
+        const dy = scenePoint.y - center.y;
+        return dx * dx + dy * dy <= radius * radius;
+    }
+    async toggleVideoPlayback() {
+        const video = this._videoElement;
+        if (!video) {
+            canvasWarn('ImageShape: no video element to play');
+            return false;
+        }
+        try {
+            if (video.paused) {
+                await video.play();
+                canvasLog('ImageShape: video playing');
+            }
+            else {
+                video.pause();
+                canvasLog('ImageShape: video paused');
+            }
+            this.dirty = true;
+            return true;
+        }
+        catch (err) {
+            canvasWarn('ImageShape: video play/pause failed', err);
+            return false;
+        }
+    }
+    _renderVideoChrome(ctx, w, h) {
+        const video = this._videoElement;
+        const playing = !!(video && !video.paused && !video.ended);
+        const size = Math.max(18, Math.min(w, h) * 0.22);
+        ctx.save();
+        ctx.beginPath();
+        ctx.arc(0, 0, size / 2, 0, Math.PI * 2);
+        ctx.fillStyle = 'rgba(0, 0, 0, 0.45)';
+        ctx.fill();
+        ctx.fillStyle = '#ffffff';
+        if (playing) {
+            const barW = size * 0.08;
+            const barH = size * 0.28;
+            const gap = size * 0.08;
+            ctx.fillRect(-gap / 2 - barW, -barH / 2, barW, barH);
+            ctx.fillRect(gap / 2, -barH / 2, barW, barH);
+        }
+        else {
+            ctx.beginPath();
+            const tri = size * 0.18;
+            ctx.moveTo(-tri * 0.35, -tri);
+            ctx.lineTo(tri * 0.85, 0);
+            ctx.lineTo(-tri * 0.35, tri);
+            ctx.closePath();
+            ctx.fill();
+        }
+        if (video && Number.isFinite(video.duration) && video.duration > 0) {
+            const barH = Math.max(4, Math.min(8, h * 0.06));
+            const progress = Math.max(0, Math.min(1, video.currentTime / video.duration));
+            ctx.fillStyle = 'rgba(0, 0, 0, 0.45)';
+            ctx.fillRect(-w / 2, h / 2 - barH, w, barH);
+            ctx.fillStyle = '#ffffff';
+            ctx.fillRect(-w / 2, h / 2 - barH, w * progress, barH);
+        }
+        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);
+        const scaleX = Math.abs(this.scaleX || 1) || 1;
+        const scaleY = Math.abs(this.scaleY || 1) || 1;
+        ctx.save();
+        ctx.scale(1 / scaleX, 1 / scaleY);
+        const visualW = Math.abs((this.width || 100) * scaleX);
+        const visualH = Math.abs((this.height || 100) * scaleY);
+        const iconSize = 36;
+        const fontSize = 16;
+        const lineGap = fontSize + 6;
+        const contentWidth = 168;
+        const contentHeight = iconSize + 12 + lineGap * 2;
+        const contentScale = Math.max(0.7, Math.min((visualW * 0.88) / contentWidth, (visualH * 0.7) / contentHeight));
         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);
+        ctx.save();
+        ctx.scale(contentScale, contentScale);
+        ctx.font = `${iconSize}px Arial`;
+        ctx.fillText(this._customType === 'video' ? '🎬' : '🖼️', 0, -28);
+        ctx.font = `${fontSize}px Arial`;
+        if (this._customType === 'video') {
+            ctx.fillText('Drop video', 0, 8);
+            ctx.fillText('or', 0, 8 + lineGap);
+            ctx.fillText('double click', 0, 8 + lineGap * 2);
         }
         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();
+            ctx.fillText('Drop image', 0, 8);
+            ctx.fillText('or', 0, 8 + lineGap);
+            ctx.fillText('double click', 0, 8 + lineGap * 2);
         }
+        ctx.restore();
+        ctx.restore();
     }
     // ── Serialisation ─────────────────────────────────────────────────────────
     toObject(propertiesToInclude) {
@@ -225,7 +316,7 @@ classRegistry.setClass(ImageShape);
  * swapping the prototype chain. No object re-creation needed.
  */
 export function upgradeToImageShape(obj) {
-    if (!obj || obj._customType !== 'image')
+    if (!obj || (obj._customType !== 'image' && obj._customType !== 'video'))
         return null;
     if (obj instanceof ImageShape)
         return obj;

package/dist/components/Tooltip.svelte

@@ -25,6 +25,14 @@
 
     let triggerEl: HTMLElement | null = null;
 
+    $: if (text) refreshVisibleTooltip();
+
+    function refreshVisibleTooltip() {
+        if (tooltipBodyEl && tooltipBodyEl.style.display === 'block') {
+            show();
+        }
+    }
+
     // Lazily-created body-level elements
     let tooltipBodyEl: HTMLElement | null = null;
     let arrowBodyEl: HTMLElement | null = null;
@@ -48,8 +56,8 @@
             lineHeight: '1.4',
             padding: '5px 10px',
             borderRadius: '6px',
-            whiteSpace: 'normal',
-            maxWidth: '200px',
+            whiteSpace: 'nowrap',
+            maxWidth: 'none',
             textAlign: 'center',
             boxShadow: '0 2px 8px rgba(0,0,0,0.25)',
             userSelect: 'none',

package/package.json

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