@vectoriox/iox-builder 1.7.10 → 1.7.12

package/fesm2022/vectoriox-iox-builder.mjs

@@ -2588,11 +2588,16 @@ class MoveableCanvasService {
         this.onReorder = null;
         /** Called after a geometry commit (resize) so the host can emit LAYOUT_CHANGED (undo/save). */
         this.onLayoutChanged = null;
+        /** Preview device viewport size (CSS px) — reference for vw/vh unit conversion on resize. */
+        this.viewportGetter = () => ({ width: 0, height: 0 });
     }
-    /** Wire the Moveable control box into `container`; `scaleGetter` returns the live canvas zoom. */
-    init(container, scaleGetter) {
+    /** Wire the Moveable control box into `container`; `scaleGetter` returns the live canvas zoom;
+     *  `viewportGetter` returns the previewed device viewport size (for vw/vh resize conversion). */
+    init(container, scaleGetter, viewportGetter) {
         this.container = container;
         this.scaleGetter = scaleGetter;
+        if (viewportGetter)
+            this.viewportGetter = viewportGetter;
     }
     /** Point Moveable at the selected element (skips inline-edit + preview-clone targets). */
     select(element, node) {
@@ -2722,16 +2727,70 @@ class MoveableCanvasService {
             return;
         }
         const last = e.lastEvent ?? e;
-        const w = Math.round(last.width ?? el.getBoundingClientRect().width);
-        const h = Math.round(last.height ?? el.getBoundingClientRect().height);
-        // C2: geometry goes to styleProps (width/height) — never a transform:scale.
-        this.applyStyle(this.node, { width: `${w}px`, height: `${h}px` });
+        const wPx = last.width ?? el.getBoundingClientRect().width;
+        const hPx = last.height ?? el.getBoundingClientRect().height;
+        // C2: geometry goes to styleProps (width/height) — never a transform:scale. Keep the unit the
+        // user CONFIGURED (%, vw, em, …) instead of always forcing px.
+        this.applyStyle(this.node, {
+            width: this.toConfiguredUnit(wPx, this.currentStyleValue('width'), el, 'width'),
+            height: this.toConfiguredUnit(hPx, this.currentStyleValue('height'), el, 'height'),
+        });
         // Clear the transient inline size so the styleProps `.iox-node` rule drives it (single source).
         el.style.width = '';
         el.style.height = '';
         this.onLayoutChanged?.();
         setTimeout(() => this.moveable?.updateRect(), 0);
     }
+    /** The node's currently-configured value for a style trait (e.g. '100%', '120px'). */
+    currentStyleValue(name) {
+        for (const group of (this.node?.styleTraits ?? [])) {
+            for (const trait of (group.traits ?? [])) {
+                if (trait.name === name)
+                    return trait.default;
+            }
+        }
+        return undefined;
+    }
+    /** Convert a pixel measurement into the unit the user configured, so resizing from the canvas
+     *  preserves %, vw/vh, em/rem etc. instead of always writing px. */
+    toConfiguredUnit(px, current, el, axis) {
+        const round = (n) => Math.round(n * 100) / 100;
+        const m = String(current ?? '').trim().match(/(px|%|vw|vh|vmin|vmax|rem|em)\s*$/);
+        const unit = m ? m[1] : 'px';
+        switch (unit) {
+            case '%': {
+                const ref = axis === 'width' ? (el.parentElement?.clientWidth ?? 0) : (el.parentElement?.clientHeight ?? 0);
+                return ref > 0 ? `${round(px / ref * 100)}%` : `${Math.round(px)}px`;
+            }
+            case 'vw': {
+                const vw = this.viewportGetter().width;
+                return vw > 0 ? `${round(px / vw * 100)}vw` : `${Math.round(px)}px`;
+            }
+            case 'vh': {
+                const vh = this.viewportGetter().height;
+                return vh > 0 ? `${round(px / vh * 100)}vh` : `${Math.round(px)}px`;
+            }
+            case 'vmin': {
+                const { width, height } = this.viewportGetter();
+                const base = Math.min(width, height);
+                return base > 0 ? `${round(px / base * 100)}vmin` : `${Math.round(px)}px`;
+            }
+            case 'vmax': {
+                const { width, height } = this.viewportGetter();
+                const base = Math.max(width, height);
+                return base > 0 ? `${round(px / base * 100)}vmax` : `${Math.round(px)}px`;
+            }
+            case 'rem': {
+                const fs = parseFloat(getComputedStyle(el.ownerDocument.documentElement).fontSize) || 16;
+                return `${round(px / fs)}rem`;
+            }
+            case 'em': {
+                const fs = parseFloat(getComputedStyle(el).fontSize) || 16;
+                return `${round(px / fs)}em`;
+            }
+            default: return `${Math.round(px)}px`;
+        }
+    }
     /** Write geometry changes into the node's styleTraits (the serialized source of truth) and the
      *  central stylesheet, so the style panel, save (self-describing), and SSR engine all agree. */
     applyStyle(node, changes) {
@@ -4363,7 +4422,7 @@ class BuilderComponent {
         // element via Moveable, reusing DragEngineService.handleDrop for the reorder. See
         // iox-ai-guidance/architecture/builder/moveable-migration.md.
         if (this.moveableMode && this.previewCanvas?.nativeElement) {
-            this.moveableCanvas.init(this.previewCanvas.nativeElement, () => this.viewportService.getScale());
+            this.moveableCanvas.init(this.previewCanvas.nativeElement, () => this.viewportService.getScale(), () => ({ width: this.viewportWidth, height: this.viewportHeight }));
             // Resize commits geometry to styleProps → emit LAYOUT_CHANGED so undo/save pick it up.
             this.moveableCanvas.onLayoutChanged = () => this.panelEventService.emit(PanelEventTypes.LAYOUT_CHANGED, this.layout);
             this.sub?.add(this.overlayService.select$.subscribe(entry => {
@@ -4444,6 +4503,10 @@ class BuilderComponent {
             // Keep the fixed-position drop-target overlay aligned when canvas scrolls
             // during an active drag (pointer doesn't move, so _onDragMove never fires).
             this.dragEngine.refreshDragOverlays();
+            // Reposition the Moveable control box (resize handles) on each scroll tick — otherwise
+            // the handles drift away from the element as the canvas scrolls (the overlay outline
+            // already repositions via the synthetic 'scroll' above).
+            this.moveableCanvas.refresh();
         });
         const raf = (time) => {
             this.lenis?.raf(time);