@vectoriox/iox-builder 4.37.2 → 4.37.3

package/fesm2022/vectoriox-iox-builder.mjs

@@ -2697,6 +2697,17 @@ const STORAGE_KEY = 'iox_builder_viewport';
 const DEFAULT_WIDTH = breakpointDef(Breakpoint.Base).previewWidth;
 class ViewportService {
     constructor() {
+        /**
+         * True once the scale is something the author chose (restored from storage, or set since) —
+         * false while it is still the DEFAULT guessed below.
+         *
+         * ⚠️ That default used to be a flat 0.75 whatever the window, so on a 1600px screen the 1440
+         * canvas came up 1080 wide inside a ~1026 slot and the page's own left and right edges were
+         * clipped off on first paint. A zoom read-out of "75%" over a page with no visible boundary
+         * tells the author nothing. The builder now fits the canvas to the room it actually has while
+         * this is false, and never touches a remembered zoom. See `autoFitViewport()`.
+         */
+        this.scaleIsExplicit = false;
         this.state = this.loadFromStorage();
         this.stateSubject = new BehaviorSubject(this.state);
         this.state$ = this.stateSubject.asObservable();
@@ -2707,6 +2718,10 @@ class ViewportService {
     getScale() {
         return this.state.scale;
     }
+    /** True when the current scale is this code's guess, not a zoom the author picked. */
+    get scaleIsDefault() {
+        return !this.scaleIsExplicit;
+    }
     /** Show (and edit) `bp`: the canvas takes that breakpoint's preview width and height. */
     setBreakpoint(bp) {
         const def = breakpointDef(bp);
@@ -2715,6 +2730,7 @@ class ViewportService {
         this.update({ width: def.previewWidth, height: BREAKPOINT_PRESENTATION[bp].previewHeight });
     }
     setScale(scale) {
+        this.scaleIsExplicit = true;
         this.update({ scale: Math.max(0.1, Math.min(2, scale)) });
     }
     /** Any canvas width — the breakpoint follows from it. */
@@ -2796,13 +2812,20 @@ class ViewportService {
                 width,
                 height: typeof saved.height === 'number' && saved.height > 0
                     ? saved.height : BREAKPOINT_PRESENTATION[breakpoint].previewHeight,
-                scale: typeof saved.scale === 'number' ? Math.max(0.1, Math.min(2, saved.scale)) : defaults.scale,
+                scale: this.restoreScale(saved.scale, defaults.scale),
             };
         }
         catch {
             return defaults;
         }
     }
+    /** A saved zoom is the author's choice and is restored; its absence leaves the guess flagged. */
+    restoreScale(saved, fallback) {
+        if (typeof saved !== 'number' || !isFinite(saved))
+            return fallback;
+        this.scaleIsExplicit = true;
+        return Math.max(0.1, Math.min(2, saved));
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: ViewportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: ViewportService }); }
 }
@@ -6058,6 +6081,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 type: Output
             }] } });
 
+/**
+ * The frame's gutter inside `.preview`, per side — the TypeScript half of `$canvas-inset` in
+ * `builder.component.scss`. Two values, one measurement: change both together or "Fit" stops
+ * fitting (the frame is clipped by exactly the difference).
+ */
+const CANVAS_INSET = 20;
 class BuilderComponent {
     /** A page with nothing on it yet: offer a structure instead of a blank canvas. */
     get isPageEmpty() {
@@ -6476,6 +6505,12 @@ class BuilderComponent {
             this.previewFrameRo = new ResizeObserver(() => this.updatePreviewVh());
             this.previewFrameRo.observe(this.previewScrollRef.nativeElement);
         }
+        // First run has no remembered zoom, and a hardcoded one cannot know how wide this screen
+        // is — on a 1600px window the old flat 75% clipped both edges of a 1440 canvas, so the
+        // author's first sight of the builder was a page with no visible boundary. Fit instead;
+        // a zoom the author picked is restored untouched.
+        if (this.viewportService.scaleIsDefault)
+            this.autoFitViewport();
         this.overlayService.setContainer(this.previewCanvas?.nativeElement || null);
         // Builder dispatches synthetic 'scroll' events on .preview-lenis-content from
         // the Lenis callback — point the overlay scroll listener at that element.
@@ -6818,12 +6853,19 @@ class BuilderComponent {
     onBoardMouseUp() {
         this.isPanning = false;
     }
+    /**
+     * Scale the canvas so the WHOLE page frame fits the slot it is given.
+     *
+     * ⚠️ The gutter here must match `$canvas-inset` in the stylesheet, doubled. It said 20 while
+     * the inset was 20px *per side*, so "Fit" left the frame 40px wider than `.preview-scroll`
+     * can show and `overflow: hidden` ate the difference — the one button whose entire job is to
+     * fit was clipping both edges of the page by 20px.
+     */
     autoFitViewport() {
         const container = this.previewCanvas?.nativeElement;
         if (!container)
             return;
-        // Available width = container width minus horizontal padding (10px × 2)
-        this.viewportService.fitToWidth(container.clientWidth, 20);
+        this.viewportService.fitToWidth(container.clientWidth, CANVAS_INSET * 2);
     }
     selectPanel(panel) {
         this.activePanel = panel;