made-refine 0.2.3 → 0.2.5-beta.0

package/dist/index.js

@@ -4103,6 +4103,8 @@ var MAX_ZOOM = 5;
 var ZOOM_SENSITIVITY = 0.0145;
 var LINE_HEIGHT_PX = 40;
 var PAGE_HEIGHT_PX = 800;
+var CANVAS_MEASURE_NODE_BUDGET = 12e3;
+var CANVAS_PRIORITY_ROOT_SELECTORS = ["#root", "#app", "#__next", "main"];
 function normalizeWheelDelta(e) {
   let { deltaX, deltaY } = e;
   if (e.deltaMode === 1) {
@@ -4114,6 +4116,52 @@ function normalizeWheelDelta(e) {
   }
   return { deltaX, deltaY };
 }
+function getResolvedOverflowY(style) {
+  return style.overflowY || style.overflow;
+}
+function isScrollableOverflowY(value) {
+  return value === "auto" || value === "scroll" || value === "overlay";
+}
+function isClippedOverflowY(value) {
+  return value === "hidden" || value === "clip";
+}
+function getParentAcrossShadowTree(el) {
+  const parent = el.parentElement;
+  if (parent) return parent;
+  const root = el.getRootNode();
+  if (root instanceof ShadowRoot && root.host instanceof HTMLElement) {
+    return root.host;
+  }
+  return null;
+}
+function enqueueChildren(el, queue) {
+  for (const child of el.children) {
+    if (child instanceof HTMLElement) queue.push(child);
+  }
+  const shadowRoot = el.shadowRoot;
+  if (!shadowRoot) return;
+  for (const child of shadowRoot.children) {
+    if (child instanceof HTMLElement) queue.push(child);
+  }
+}
+function measureContentBounds(el) {
+  const rect = el.getBoundingClientRect();
+  const pageLeft = rect.left + (window.scrollX || window.pageXOffset || 0);
+  const pageTop = rect.top + (window.scrollY || window.pageYOffset || 0);
+  return {
+    width: Math.max(0, pageLeft) + el.scrollWidth,
+    height: Math.max(0, pageTop) + el.scrollHeight
+  };
+}
+function hasClippedAncestor(el) {
+  let ancestor = getParentAcrossShadowTree(el);
+  while (ancestor && ancestor !== document.body) {
+    const ancestorStyle = getComputedStyle(ancestor);
+    if (isClippedOverflowY(getResolvedOverflowY(ancestorStyle))) return true;
+    ancestor = getParentAcrossShadowTree(ancestor);
+  }
+  return false;
+}
 var PAN_MARGIN = 0.1;
 function clampPan(zoom, panX, panY, bodyW, bodyH) {
   const vw = window.innerWidth;
@@ -4134,7 +4182,9 @@ function useCanvas({ stateRef, setState }) {
   const savedBodyOverflowRef = React7.useRef("");
   const savedHtmlOverflowRef = React7.useRef("");
   const savedHtmlBgColorRef = React7.useRef("");
+  const domStateSavedRef = React7.useRef(false);
   const savedBodyDimensionsRef = React7.useRef({ width: 0, height: 0 });
+  const savedExpandedNodesRef = React7.useRef([]);
   const rafIdRef = React7.useRef(null);
   const rafPendingRef = React7.useRef(false);
   const spaceHeldRef = React7.useRef(false);
@@ -4190,54 +4240,162 @@ function useCanvas({ stateRef, setState }) {
       });
     }
   }, [applyTransform, dispatchCanvasChange, setState]);
+  function collectTraversalSeeds() {
+    const out = [];
+    const seen = /* @__PURE__ */ new Set();
+    const push = (el) => {
+      if (!(el instanceof HTMLElement)) return;
+      if (!document.body.contains(el)) return;
+      if (seen.has(el)) return;
+      seen.add(el);
+      out.push(el);
+    };
+    for (const selector of CANVAS_PRIORITY_ROOT_SELECTORS) {
+      push(document.querySelector(selector));
+    }
+    for (const child of document.body.children) {
+      push(child);
+    }
+    return out;
+  }
+  function expandScrollableRegionsAndMeasureBody() {
+    const snapshots = /* @__PURE__ */ new Map();
+    const expandedOrder = [];
+    const queue = collectTraversalSeeds();
+    const visited = /* @__PURE__ */ new Set();
+    let visitedCount = 0;
+    let fallbackWidth = 0;
+    let fallbackHeight = 0;
+    const expandNode = (el) => {
+      if (snapshots.has(el)) return;
+      snapshots.set(el, {
+        height: el.style.height,
+        maxHeight: el.style.maxHeight,
+        overflowY: el.style.overflowY
+      });
+      expandedOrder.push(el);
+      el.style.height = "auto";
+      el.style.maxHeight = "none";
+      el.style.overflowY = "visible";
+    };
+    while (queue.length > 0 && visitedCount < CANVAS_MEASURE_NODE_BUDGET) {
+      const el = queue.shift();
+      if (!el || visited.has(el)) continue;
+      visited.add(el);
+      visitedCount++;
+      const hasVerticalOverflow = el.scrollHeight > el.clientHeight + 1;
+      const style = getComputedStyle(el);
+      const overflowY = getResolvedOverflowY(style);
+      const isScrollable = hasVerticalOverflow && isScrollableOverflowY(overflowY);
+      if (isScrollable) {
+        expandNode(el);
+        let ancestor = getParentAcrossShadowTree(el);
+        while (ancestor && ancestor !== document.body) {
+          const ancestorStyle = getComputedStyle(ancestor);
+          if (isClippedOverflowY(getResolvedOverflowY(ancestorStyle))) {
+            expandNode(ancestor);
+          }
+          ancestor = getParentAcrossShadowTree(ancestor);
+        }
+      }
+      const canContributeFallback = hasVerticalOverflow && (isScrollable || !isClippedOverflowY(overflowY) && !hasClippedAncestor(el));
+      if (canContributeFallback) {
+        const bounds = measureContentBounds(el);
+        fallbackWidth = Math.max(fallbackWidth, bounds.width);
+        fallbackHeight = Math.max(fallbackHeight, bounds.height);
+      }
+      enqueueChildren(el, queue);
+    }
+    savedExpandedNodesRef.current = expandedOrder.map((el) => ({ el, ...snapshots.get(el) }));
+    return {
+      width: Math.max(document.body.scrollWidth, document.documentElement.scrollWidth, fallbackWidth, window.innerWidth),
+      height: Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, fallbackHeight, window.innerHeight)
+    };
+  }
+  function restoreExpandedNodes() {
+    for (let i = savedExpandedNodesRef.current.length - 1; i >= 0; i--) {
+      const { el, height, maxHeight, overflowY } = savedExpandedNodesRef.current[i];
+      el.style.height = height;
+      el.style.maxHeight = maxHeight;
+      el.style.overflowY = overflowY;
+    }
+    savedExpandedNodesRef.current = [];
+  }
   const enterCanvas = React7.useCallback(() => {
+    if (canvasRef.current.active) return;
+    if (domStateSavedRef.current || savedExpandedNodesRef.current.length > 0) {
+      restoreExpandedNodes();
+      domStateSavedRef.current = false;
+    }
     const scrollX = window.scrollX;
     const scrollY = window.scrollY;
     savedScrollRef.current = { x: scrollX, y: scrollY };
     savedBodyOverflowRef.current = document.body.style.overflow;
     savedHtmlOverflowRef.current = document.documentElement.style.overflow;
     savedHtmlBgColorRef.current = document.documentElement.style.backgroundColor;
-    savedBodyDimensionsRef.current = {
-      width: document.body.scrollWidth,
-      height: document.body.scrollHeight
-    };
+    domStateSavedRef.current = true;
     const existingTransform = document.body.style.transform;
     if (existingTransform && existingTransform !== "none" && existingTransform !== "") {
       console.warn("[made-refine] canvas mode: overriding existing body transform:", existingTransform);
     }
-    window.scrollTo(0, 0);
-    updateBodyOffset();
-    document.body.style.overflow = "hidden";
-    document.documentElement.style.overflow = "hidden";
-    document.documentElement.style.backgroundColor = "#F5F5F5";
-    const initialPanX = -scrollX;
-    const initialPanY = -scrollY;
-    applyTransform(1, initialPanX, initialPanY);
-    canvasRef.current = { active: true, zoom: 1, panX: initialPanX, panY: initialPanY };
-    setCanvasSnapshot(canvasRef.current);
-    setState((prev) => ({
-      ...prev,
-      canvas: { active: true, zoom: 1, panX: initialPanX, panY: initialPanY }
-    }));
-    dispatchCanvasChange();
+    let entered = false;
+    try {
+      window.scrollTo(0, 0);
+      savedBodyDimensionsRef.current = expandScrollableRegionsAndMeasureBody();
+      updateBodyOffset();
+      document.body.style.overflow = "hidden";
+      document.documentElement.style.overflow = "hidden";
+      document.documentElement.style.backgroundColor = "#F5F5F5";
+      const initialPanX = -scrollX;
+      const initialPanY = -scrollY;
+      applyTransform(1, initialPanX, initialPanY);
+      canvasRef.current = { active: true, zoom: 1, panX: initialPanX, panY: initialPanY };
+      setCanvasSnapshot(canvasRef.current);
+      setState((prev) => ({
+        ...prev,
+        canvas: { active: true, zoom: 1, panX: initialPanX, panY: initialPanY }
+      }));
+      dispatchCanvasChange();
+      entered = true;
+    } finally {
+      if (!entered) {
+        document.body.style.transform = "";
+        document.body.style.transformOrigin = "";
+        restoreExpandedNodes();
+        document.body.style.overflow = savedBodyOverflowRef.current;
+        document.documentElement.style.overflow = savedHtmlOverflowRef.current;
+        document.documentElement.style.backgroundColor = savedHtmlBgColorRef.current;
+        window.scrollTo(scrollX, scrollY);
+        domStateSavedRef.current = false;
+      }
+    }
   }, [applyTransform, dispatchCanvasChange, setState, updateBodyOffset]);
   const exitCanvas = React7.useCallback(() => {
+    const shouldRestoreDom = domStateSavedRef.current || savedExpandedNodesRef.current.length > 0;
+    const wasActive = canvasRef.current.active;
+    if (!wasActive && !shouldRestoreDom) return;
     cancelPendingRaf();
     document.body.style.transform = "";
     document.body.style.transformOrigin = "";
-    document.body.style.overflow = savedBodyOverflowRef.current;
-    document.documentElement.style.overflow = savedHtmlOverflowRef.current;
-    document.documentElement.style.backgroundColor = savedHtmlBgColorRef.current;
+    restoreExpandedNodes();
+    if (shouldRestoreDom) {
+      document.body.style.overflow = savedBodyOverflowRef.current;
+      document.documentElement.style.overflow = savedHtmlOverflowRef.current;
+      document.documentElement.style.backgroundColor = savedHtmlBgColorRef.current;
+      window.scrollTo(savedScrollRef.current.x, savedScrollRef.current.y);
+    }
     document.body.style.cursor = "";
-    window.scrollTo(savedScrollRef.current.x, savedScrollRef.current.y);
+    domStateSavedRef.current = false;
     setBodyOffset({ x: 0, y: 0 });
     canvasRef.current = { active: false, zoom: 1, panX: 0, panY: 0 };
     setCanvasSnapshot(canvasRef.current);
-    setState((prev) => ({
-      ...prev,
-      canvas: { active: false, zoom: 1, panX: 0, panY: 0 }
-    }));
-    dispatchCanvasChange();
+    if (wasActive) {
+      setState((prev) => ({
+        ...prev,
+        canvas: { active: false, zoom: 1, panX: 0, panY: 0 }
+      }));
+      dispatchCanvasChange();
+    }
   }, [cancelPendingRaf, dispatchCanvasChange, setState]);
   const toggleCanvas = React7.useCallback(() => {
     if (canvasRef.current.active) {
@@ -4364,7 +4522,7 @@ function useCanvas({ stateRef, setState }) {
   React7.useEffect(() => {
     return () => {
       cancelPendingRaf();
-      if (canvasRef.current.active) {
+      if (canvasRef.current.active || domStateSavedRef.current || savedExpandedNodesRef.current.length > 0) {
         exitCanvas();
       }
     };