Merge branch 'fix/canvas-screen-units' into develop

tristan-mouchet · tristan-mouchet · commit 868027c05fd8 · 2026-04-10T11:07:17.000+02:00
diff --git a/app/(builder)/ycode/components/Canvas.tsx b/app/(builder)/ycode/components/Canvas.tsx
@@ -18,7 +18,7 @@ import { createRoot, Root } from 'react-dom/client';
 import LayerRenderer from '@/components/LayerRenderer';
 import { serializeLayers, getClassesString } from '@/lib/layer-utils';
 import { collectEditorHiddenLayerIds } from '@/lib/animation-utils';
-import { getCanvasIframeHtml } from '@/lib/canvas-utils';
+import { getCanvasIframeHtml, updateViewportOverrides, measureContentExtent } from '@/lib/canvas-utils';
 import { CanvasPortalProvider } from '@/lib/canvas-portal-context';
 import { cn } from '@/lib/utils';
 import { loadSwiperCss } from '@/lib/slider-utils';
@@ -104,6 +104,8 @@ interface CanvasProps {
   disableEditorHiddenLayers?: boolean;
   /** Current canvas zoom percentage (100 = 100%) */
   zoom?: number;
+  /** Fixed viewport height for stable measurement of content using vh/svh/dvh units */
+  referenceViewportHeight?: number;
 }
 
 /**
@@ -283,6 +285,7 @@ export default function Canvas({
   editingComponentVariables,
   disableEditorHiddenLayers = false,
   zoom = 100,
+  referenceViewportHeight,
 }: CanvasProps) {
   // Refs
   const iframeRef = useRef<HTMLIFrameElement>(null);
@@ -649,6 +652,10 @@ export default function Canvas({
     const doc = iframeRef.current.contentDocument;
     if (!doc) return;
 
+    // Reset so the first measurement after a breakpoint switch reports immediately
+    // instead of being delayed by the shrink timer
+    lastReportedHeightRef.current = 0;
+
     let shrinkTimer: ReturnType<typeof setTimeout> | undefined;
 
     const reportHeight = (height: number) => {
@@ -694,18 +701,27 @@ export default function Canvas({
         }
       }
 
-      // Page mode: measure full document height
-      const height = Math.max(
-        body.scrollHeight,
-        body.offsetHeight,
-        doc.documentElement?.scrollHeight || 0,
-        doc.documentElement?.offsetHeight || 0
-      );
-      reportHeight(height);
+      // Override viewport-height units (vh, svh, dvh, lvh) with fixed pixel
+      // values so layers using these units don't grow with the iframe height.
+      if (referenceViewportHeight && referenceViewportHeight > 0) {
+        updateViewportOverrides(doc, referenceViewportHeight);
+      }
+
+      // Page mode: use content extent (actual child bounds) rather than
+      // scrollHeight, which inflates when body h-full fills the iframe.
+      const extent = measureContentExtent(doc);
+      if (extent > 0) {
+        reportHeight(extent);
+      }
     };
 
-    // Measure after render
+    // Measure after render — multiple passes to handle Tailwind CDN race.
+    // Tailwind Browser CDN processes classes asynchronously via CSSOM APIs
+    // (not DOM mutations), so the MutationObserver alone can't detect when
+    // styles are applied. measureContentExtent is immune to iframe inflation,
+    // so later passes safely converge to the correct value.
     const timeoutId = setTimeout(measureContent, 100);
+    const lateTimeoutId = setTimeout(measureContent, 500);
 
     // Debounce observer to avoid measuring during transient DOM states
     let observerTimer: ReturnType<typeof setTimeout> | undefined;
@@ -722,13 +738,24 @@ export default function Canvas({
       attributes: true,
     });
 
+    // Also watch <head> for Tailwind CDN style injections that change layout
+    // Without this, the initial measurement fires before CSS is applied,
+    // and no body mutation triggers a re-measure after styles settle.
+    if (doc.head) {
+      observer.observe(doc.head, {
+        childList: true,
+        subtree: true,
+      });
+    }
+
     return () => {
       clearTimeout(timeoutId);
+      clearTimeout(lateTimeoutId);
       clearTimeout(shrinkTimer);
       clearTimeout(observerTimer);
       observer.disconnect();
     };
-  }, [iframeReady, onContentHeightChange, onContentWidthChange, resolvedLayers]);
+  }, [iframeReady, onContentHeightChange, onContentWidthChange, resolvedLayers, referenceViewportHeight, breakpoint]);
 
   // Handle zoom gestures from iframe (Ctrl+wheel, trackpad pinch)
   useEffect(() => {
diff --git a/app/(builder)/ycode/components/CenterCanvas.tsx b/app/(builder)/ycode/components/CenterCanvas.tsx
@@ -60,7 +60,8 @@ import { buildLocalizedSlugPath, buildLocalizedDynamicPageUrl } from '@/lib/page
 import { getTranslationValue } from '@/lib/localisation-utils';
 import { cn } from '@/lib/utils';
 import { getCollectionVariable, canDeleteLayer, findLayerById, findParentCollectionLayer, canLayerHaveLink, updateLayerProps, removeRichTextSublayer } from '@/lib/layer-utils';
-import { CANVAS_BORDER, CANVAS_PADDING } from '@/lib/canvas-utils';
+import { CANVAS_BORDER, CANVAS_PADDING, updateViewportOverrides } from '@/lib/canvas-utils';
+import { BREAKPOINTS } from '@/lib/breakpoint-utils';
 import { buildFieldGroupsForLayer, flattenFieldGroups, filterFieldGroupsByType, SIMPLE_TEXT_FIELD_TYPES } from '@/lib/collection-field-utils';
 import { buildFieldVariableData } from '@/lib/variable-format-utils';
 import { getRichTextValue } from '@/lib/tiptap-utils';
@@ -105,9 +106,13 @@ interface CenterCanvasProps {
   liveComponentUpdates?: UseLiveComponentUpdatesReturn | null;
 }
 
+// Viewport widths are derived from BREAKPOINTS to avoid sitting on exact
+// breakpoint boundaries where CSS zoom sub-pixel rounding can toggle styles.
+const MOBILE_MAX_WIDTH = BREAKPOINTS.find(bp => bp.value === 'mobile')!.maxWidth!;
+
 const viewportSizes: Record<ViewportMode, { width: string; label: string; icon: string }> = {
   desktop: { width: '1366px', label: 'Desktop', icon: '🖥️' },
-  tablet: { width: '768px', label: 'Tablet', icon: '📱' },
+  tablet: { width: `${MOBILE_MAX_WIDTH + 10}px`, label: 'Tablet', icon: '📱' },
   mobile: { width: '375px', label: 'Mobile', icon: '📱' },
 };
 
@@ -813,6 +818,7 @@ const CenterCanvas = React.memo(function CenterCanvas({
   const previewContentWidth = parseInt(viewportSizes[viewportMode].width);
   const {
     zoom: previewZoom,
+    zoomMode: previewZoomMode,
     zoomIn: previewZoomIn,
     zoomOut: previewZoomOut,
     resetZoom: previewResetZoom,
@@ -821,7 +827,7 @@ const CenterCanvas = React.memo(function CenterCanvas({
   } = useZoom({
     containerRef: previewContainerRef,
     contentWidth: previewContentWidth,
-    contentHeight: previewContentHeight || previewContentWidth,
+    contentHeight: previewContentHeight || defaultCanvasHeight,
     minZoom: 10,
     maxZoom: 1000,
     zoomStep: 10,
@@ -833,40 +839,133 @@ const CenterCanvas = React.memo(function CenterCanvas({
   const shouldCenter = zoom < zoomToFitLevel;
 
   // Calculate final iframe height - ensure it fills the visible canvas at any zoom level
-  // When zoomed out (e.g. 52%), the iframe must be taller so that scaled it still fills the canvas
-  // When switching viewports (Desktop → Phone), zoom changes and this recalculates automatically
+  // When zoomed in or at fit level, stretch the iframe so the scaled result fills the canvas.
+  // When zoomed out beyond fit, use content height directly — centering handles the gap.
   const finalIframeHeight = useMemo(() => {
-    // For component editing, use content-based height directly (don't force-fill container)
     if (editingComponentId) return iframeContentHeight;
-
     if (!containerHeight || zoom <= 0) return iframeContentHeight;
+    if (shouldCenter) return iframeContentHeight;
 
-    // Minimum iframe height so that scaled iframe fills the visible canvas area
     const minHeightForZoom = (containerHeight - CANVAS_PADDING) / (zoom / 100);
-
-    // Use the larger of: content height or minimum height for current zoom
     return Math.max(iframeContentHeight, minHeightForZoom);
-  }, [iframeContentHeight, containerHeight, zoom, editingComponentId]);
+  }, [iframeContentHeight, containerHeight, zoom, editingComponentId, shouldCenter]);
+
+  const previewObserverRef = useRef<ResizeObserver | null>(null);
+
+  /** Measure the preview iframe content and set up a ResizeObserver for re-measurement */
+  const setupPreviewMeasurement = useCallback(() => {
+    previewObserverRef.current?.disconnect();
+    previewObserverRef.current = null;
+
+    try {
+      const iframe = iframeRef.current;
+      const doc = iframe?.contentDocument;
+      if (!iframe || !doc?.body) return;
+
+      const wrapper = iframe.parentElement as HTMLElement | null;
+      const containerEl = previewContainerRef.current;
+      const refHeight = containerEl
+        ? containerEl.clientHeight - CANVAS_PADDING
+        : 0;
+
+      if (refHeight > 0) {
+        updateViewportOverrides(doc, refHeight);
+      }
+
+      let debounceTimer: ReturnType<typeof setTimeout> | undefined;
+
+      const observeBodyChildren = () => {
+        Array.from(doc.body.children).forEach(el => {
+          if (el instanceof HTMLElement) observer.observe(el);
+        });
+      };
 
-  // Recalculate autofit when viewport/breakpoint changes
+      const observer = new ResizeObserver(() => {
+        clearTimeout(debounceTimer);
+        debounceTimer = setTimeout(() => remeasure(), 100);
+      });
+
+      const remeasure = () => {
+        try {
+          if (!wrapper) return;
+
+          const freshContainerEl = previewContainerRef.current;
+          const freshRefHeight = freshContainerEl
+            ? freshContainerEl.clientHeight - CANVAS_PADDING
+            : refHeight;
+
+          if (freshRefHeight <= 0) return;
+
+          updateViewportOverrides(doc, freshRefHeight);
+
+          // Disconnect observer before temporary style changes — setting
+          // body/html height to auto causes h-full children to resize,
+          // which fires the observer and creates a feedback loop.
+          observer.disconnect();
+
+          const prevBodyH = doc.body.style.height;
+          const prevHtmlH = doc.documentElement.style.height;
+          doc.body.style.height = 'auto';
+          doc.documentElement.style.height = 'auto';
+          void doc.body.offsetHeight;
+
+          const bodyScrollH = doc.body.scrollHeight;
+
+          doc.body.style.height = prevBodyH;
+          doc.documentElement.style.height = prevHtmlH;
+          void doc.body.offsetHeight;
+
+          observeBodyChildren();
+
+          if (bodyScrollH > 0) {
+            setPreviewContentHeight(bodyScrollH);
+          }
+        } catch { /* cross-origin */ }
+      };
+
+      remeasure();
+
+      const images = Array.from(doc.querySelectorAll('img'));
+      const pendingImages = images.filter(img => !img.complete);
+
+      if (pendingImages.length > 0) {
+        let remaining = pendingImages.length;
+        const onImageReady = () => {
+          remaining--;
+          if (remaining <= 0) remeasure();
+        };
+        pendingImages.forEach(img => {
+          img.addEventListener('load', onImageReady, { once: true });
+          img.addEventListener('error', onImageReady, { once: true });
+        });
+      }
+
+      observeBodyChildren();
+
+      previewObserverRef.current = observer;
+    } catch {
+      // Cross-origin — fall back to 0
+    }
+  }, []);
+
+  // Re-measure and recalculate zoom when viewport changes
   const prevViewportMode = useRef(viewportMode);
   useEffect(() => {
     if (prevViewportMode.current !== viewportMode) {
-      // Notify SelectionOverlay to hide outlines during viewport transition
       window.dispatchEvent(new CustomEvent('viewportChange'));
 
-      // Small delay to ensure container dimensions are updated
+      // Small delay to ensure container dimensions are updated after width change.
+      // useZoom auto-recalculates for the current mode (fit/autofit/custom) when
+      // content dimensions change, so we only need to re-measure here.
       setTimeout(() => {
         if (isPreviewMode) {
-          previewAutofit();
-        } else {
-          autofit();
+          setupPreviewMeasurement();
         }
       }, 50);
 
       prevViewportMode.current = viewportMode;
     }
-  }, [viewportMode, autofit, isPreviewMode, previewAutofit]);
+  }, [viewportMode, isPreviewMode, setupPreviewMeasurement]);
 
   // Scroll canvas to selected element if it's off-screen
   const prevCanvasLayerIdRef = useRef<string | null>(null);
@@ -1640,6 +1739,11 @@ const CenterCanvas = React.memo(function CenterCanvas({
     if (!iframe) return;
     setIsPreviewLoading(true);
     iframe.src = previewUrl;
+
+    return () => {
+      previewObserverRef.current?.disconnect();
+      previewObserverRef.current = null;
+    };
   }, [isPreviewMode, previewUrl]);
 
   // Autofit when entering preview mode (not on every breakpoint change)
@@ -1653,15 +1757,8 @@ const CenterCanvas = React.memo(function CenterCanvas({
 
   const handlePreviewLoad = useCallback(() => {
     setIsPreviewLoading(false);
-    try {
-      const doc = iframeRef.current?.contentDocument;
-      if (doc) {
-        setPreviewContentHeight(doc.documentElement.scrollHeight);
-      }
-    } catch {
-      // Cross-origin — fall back to 0
-    }
-  }, []);
+    setupPreviewMeasurement();
+  }, [setupPreviewMeasurement]);
 
   // Load collection items when dynamic page is selected
   useEffect(() => {
@@ -2321,6 +2418,7 @@ const CenterCanvas = React.memo(function CenterCanvas({
                         editingComponentVariables={editingComponentVariables}
                         disableEditorHiddenLayers={!!activeInteractionTriggerLayerId}
                         zoom={zoom}
+                        referenceViewportHeight={defaultCanvasHeight}
                       />
 
                       {/* Drop indicator overlay - subscribes to store directly */}
@@ -2579,11 +2677,15 @@ const CenterCanvas = React.memo(function CenterCanvas({
             </div>
           )}
           <div
-            className="bg-white shadow-3xl relative mx-auto"
+            className="bg-white shadow-3xl relative mx-auto my-auto"
             style={{
               zoom: previewZoom / 100,
-              width: viewportMode === 'desktop' ? '100%' : viewportSizes[viewportMode].width,
-              minWidth: viewportMode === 'desktop' ? viewportSizes[viewportMode].width : undefined,
+              width: viewportMode === 'desktop' && previewZoomMode === 'autofit'
+                ? '100%'
+                : viewportSizes[viewportMode].width,
+              minWidth: viewportMode === 'desktop' && previewZoomMode === 'autofit'
+                ? viewportSizes[viewportMode].width
+                : undefined,
               height: previewContentHeight > 0 ? `${previewContentHeight}px` : '100%',
               flexShrink: 0,
               transition: 'none',
diff --git a/lib/canvas-utils.ts b/lib/canvas-utils.ts
