@vectoriox/iox-builder 1.4.7 → 1.4.8

package/fesm2022/vectoriox-iox-builder.mjs

@@ -133,9 +133,9 @@ var DeviceMode;
     DeviceMode["Mobile"] = "mobile";
 })(DeviceMode || (DeviceMode = {}));
 const DEVICE_OPTIONS = [
-    { mode: DeviceMode.Desktop, label: 'Desktop', icon: 'ph-thin ph-desktop', width: 1440 },
-    { mode: DeviceMode.Tablet, label: 'Tablet', icon: 'ph-thin ph-device-tablet', width: 768 },
-    { mode: DeviceMode.Mobile, label: 'Mobile', icon: 'ph-thin ph-device-mobile', width: 375 },
+    { mode: DeviceMode.Desktop, label: 'Desktop', icon: 'ph-thin ph-desktop', width: 1440, height: 900 },
+    { mode: DeviceMode.Tablet, label: 'Tablet', icon: 'ph-thin ph-device-tablet', width: 768, height: 1024 },
+    { mode: DeviceMode.Mobile, label: 'Mobile', icon: 'ph-thin ph-device-mobile', width: 375, height: 812 },
 ];
 const ZOOM_OPTIONS = [
     { label: '25%', value: 25 },
@@ -985,7 +985,7 @@ class ViewportService {
         const option = DEVICE_OPTIONS.find(d => d.mode === device);
         if (!option)
             return;
-        this.update({ device, width: option.width });
+        this.update({ device, width: option.width, height: option.height });
     }
     setScale(scale) {
         this.update({ scale: Math.max(0.1, Math.min(2, scale)) });
@@ -996,7 +996,7 @@ class ViewportService {
     /**
      * Calculate the scale that makes the canvas fit inside the available editor width.
      * @param availableWidth The pixel width of the editor area that holds the canvas.
-     * @param padding Optional horizontal padding to subtract (default 20px each side).
+     * @param padding Optional horizontal padding to subtract (default 40px total).
      */
     fitToWidth(availableWidth, padding = 40) {
         const usable = availableWidth - padding;
@@ -1005,6 +1005,22 @@ class ViewportService {
         const scale = Math.min(1, usable / this.state.width);
         this.setScale(scale);
     }
+    /**
+     * Calculate the scale that makes the canvas fit both the available width AND height.
+     * Uses the smaller of the two scale factors so the entire viewport frame is visible.
+     * @param containerWidth  Available container width in screen pixels.
+     * @param containerHeight Available container height in screen pixels.
+     * @param padding         Total padding to subtract from both dimensions (default 40px).
+     */
+    fitToSize(containerWidth, containerHeight, padding = 40) {
+        const usableW = containerWidth - padding;
+        const usableH = containerHeight - padding;
+        if (usableW <= 0 || usableH <= 0)
+            return;
+        const scaleX = usableW / this.state.width;
+        const scaleY = usableH / this.state.height;
+        this.setScale(Math.min(1, scaleX, scaleY));
+    }
     /**
      * Convert a screen-space coordinate to canvas-space (unscaled).
      * Call this when translating pointer events into canvas-relative positions.
@@ -1030,6 +1046,7 @@ class ViewportService {
         const defaults = {
             device: DeviceMode.Desktop,
             width: DEVICE_OPTIONS[0].width,
+            height: DEVICE_OPTIONS[0].height,
             scale: 0.75,
         };
         try {
@@ -1044,6 +1061,7 @@ class ViewportService {
             return {
                 device,
                 width: typeof saved.width === 'number' && saved.width > 0 ? saved.width : option.width,
+                height: typeof saved.height === 'number' && saved.height > 0 ? saved.height : option.height,
                 scale: typeof saved.scale === 'number' ? Math.max(0.1, Math.min(2, saved.scale)) : defaults.scale,
             };
         }
@@ -1799,11 +1817,20 @@ class StyleRegistryService {
     compile(className, styles) {
         const entries = Object.entries(styles)
             .filter(([, v]) => v !== undefined && v !== null && v !== '')
-            .map(([k, v]) => `  ${this.toKebabCase(k)}: ${v};`);
+            .map(([k, v]) => `  ${this.toKebabCase(k)}: ${this.rewriteVh(String(v))};`);
         if (!entries.length)
             return '';
         return `.${className} {\n${entries.join('\n')}\n}`;
     }
+    /**
+     * Rewrite bare `vh` values to `calc(N * var(--preview-vh, 1vh))` so they
+     * resolve to the simulated viewport height in the builder canvas.
+     * In production (no --preview-vh defined) the fallback `1vh` preserves the
+     * original behaviour: `calc(50 * 1vh)` == `50vh`.
+     */
+    rewriteVh(value) {
+        return value.replace(/(-?\d*\.?\d+)vh/g, 'calc($1 * var(--preview-vh, 1vh))');
+    }
     toKebabCase(str) {
         return str.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`);
     }