@windrun-huaiin/third-ui 5.14.0 → 5.14.2

package/dist/fuma/mdx/index.mjs

@@ -2744,19 +2744,22 @@ function Mermaid({ chart, title, watermarkEnabled, watermarkText, enablePreview
   }, [chart, id, resolvedTheme, watermarkEnabled, watermarkText]);
   const clamp = (v, min, max) => Math.min(Math.max(v, min), max);
   const resetTransform = useCallback(() => {
-    setScale(1);
+    setScale(4);
     setTranslate({ x: 0, y: 0 });
   }, []);
   const zoomBy = useCallback((delta) => {
-    setScale((prev) => clamp(prev + delta, 0.25, 6));
+    setScale((prev) => clamp(prev + delta, 0.25, 10));
   }, []);
   const onWheel = useCallback((e) => {
     if (e.metaKey || e.ctrlKey) {
       e.preventDefault();
+      e.stopPropagation();
       const delta = e.deltaY > 0 ? -0.1 : 0.1;
-      setScale((prev) => clamp(prev + delta, 0.25, 6));
+      setScale((prev) => clamp(prev + delta, 0.25, 10));
     } else {
-      setTranslate((prev) => ({ x: prev.x, y: prev.y - e.deltaY }));
+      e.preventDefault();
+      e.stopPropagation();
+      setTranslate((prev) => ({ x: prev.x - e.deltaX, y: prev.y - e.deltaY }));
     }
   }, []);
   const onPointerDown = useCallback((e) => {
@@ -2775,6 +2778,57 @@ function Mermaid({ chart, title, watermarkEnabled, watermarkText, enablePreview
     isPanningRef.current = false;
     e.currentTarget.releasePointerCapture(e.pointerId);
   }, []);
+  useEffect(() => {
+    if (!open) return;
+    resetTransform();
+    const onGlobalWheel = (ev) => {
+      if (ev.ctrlKey || ev.metaKey) {
+        ev.preventDefault();
+      }
+    };
+    const onKeyDown = (ev) => {
+      if (!(ev.ctrlKey || ev.metaKey)) return;
+      const k = ev.key;
+      if (k === "=" || k === "+") {
+        ev.preventDefault();
+        setScale((prev) => clamp(prev + 0.2, 0.25, 10));
+      } else if (k === "-") {
+        ev.preventDefault();
+        setScale((prev) => clamp(prev - 0.2, 0.25, 10));
+      } else if (k === "0") {
+        ev.preventDefault();
+        resetTransform();
+      }
+    };
+    window.addEventListener("wheel", onGlobalWheel, { passive: false, capture: true });
+    window.addEventListener("keydown", onKeyDown, { capture: true });
+    return () => {
+      window.removeEventListener("wheel", onGlobalWheel, true);
+      window.removeEventListener("keydown", onKeyDown, true);
+    };
+  }, [open, resetTransform]);
+  useEffect(() => {
+    if (!open) return;
+    const previousPosition = document.body.style.position;
+    const previousTop = document.body.style.top;
+    const previousLeft = document.body.style.left;
+    const previousRight = document.body.style.right;
+    const previousWidth = document.body.style.width;
+    const scrollY = window.scrollY;
+    document.body.style.position = "fixed";
+    document.body.style.top = `-${scrollY}px`;
+    document.body.style.left = "0";
+    document.body.style.right = "0";
+    document.body.style.width = "100%";
+    return () => {
+      document.body.style.position = previousPosition;
+      document.body.style.top = previousTop;
+      document.body.style.left = previousLeft;
+      document.body.style.right = previousRight;
+      document.body.style.width = previousWidth;
+      window.scrollTo(0, scrollY);
+    };
+  }, [open]);
   return /* @__PURE__ */ jsxs10("div", { children: [
     /* @__PURE__ */ jsxs10(
       "div",
@@ -2805,10 +2859,24 @@ function Mermaid({ chart, title, watermarkEnabled, watermarkText, enablePreview
         "aria-label": typeof title === "string" ? title : "Mermaid Preview",
         className: "fixed inset-0 z-[9999] flex items-center justify-center",
         children: [
-          /* @__PURE__ */ jsx33("div", { className: "absolute inset-0 bg-black/60", onClick: () => {
-            setOpen(false);
-            resetTransform();
-          } }),
+          /* @__PURE__ */ jsx33(
+            "div",
+            {
+              className: "absolute inset-0 bg-black/60",
+              onClick: () => {
+                setOpen(false);
+                resetTransform();
+              },
+              onWheel: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+              },
+              onTouchMove: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+              }
+            }
+          ),
           /* @__PURE__ */ jsxs10("div", { className: "relative z-[1] max-w-[95vw] w-[95vw] h-[88vh] p-0 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 rounded-md shadow-2xl overflow-hidden", children: [
             /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between px-3 py-2 border-b border-neutral-200 dark:border-neutral-700", children: [
               /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2 text-sm text-neutral-600 dark:text-neutral-300", children: [
@@ -2821,7 +2889,7 @@ function Mermaid({ chart, title, watermarkEnabled, watermarkText, enablePreview
                   {
                     "aria-label": "Zoom out",
                     className: "flex h-6 w-6 items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 text-[13px]",
-                    onClick: () => zoomBy(-0.2),
+                    onClick: () => zoomBy(-0.5),
                     children: "\uFF0D"
                   }
                 ),
@@ -2834,10 +2902,47 @@ function Mermaid({ chart, title, watermarkEnabled, watermarkText, enablePreview
                   {
                     "aria-label": "Zoom in",
                     className: "flex h-6 w-6 items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 text-[13px]",
-                    onClick: () => zoomBy(0.2),
+                    onClick: () => zoomBy(0.5),
                     children: "\uFF0B"
                   }
                 ),
+                /* @__PURE__ */ jsx33("div", { className: "mx-1 h-4 w-px bg-neutral-300 dark:bg-neutral-700" }),
+                /* @__PURE__ */ jsx33(
+                  "button",
+                  {
+                    "aria-label": "Zoom 100%",
+                    className: "inline-flex h-6 min-w-8 items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 px-1.5 text-[12px]",
+                    onClick: () => setScale(1),
+                    children: "X1"
+                  }
+                ),
+                /* @__PURE__ */ jsx33(
+                  "button",
+                  {
+                    "aria-label": "Zoom 200%",
+                    className: "ml-1 inline-flex h-6 min-w-8 items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 px-1.5 text-[12px]",
+                    onClick: () => setScale(2),
+                    children: "X2"
+                  }
+                ),
+                /* @__PURE__ */ jsx33(
+                  "button",
+                  {
+                    "aria-label": "Zoom 300%",
+                    className: "ml-1 inline-flex h-6 min-w-8 items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 px-1.5 text-[12px]",
+                    onClick: () => setScale(3),
+                    children: "X3"
+                  }
+                ),
+                /* @__PURE__ */ jsx33(
+                  "button",
+                  {
+                    "aria-label": "Zoom 1000%",
+                    className: "ml-1 inline-flex h-6 min-w-10 items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 px-1.5 text-[12px]",
+                    onClick: () => setScale(10),
+                    children: "X10"
+                  }
+                ),
                 /* @__PURE__ */ jsx33(
                   "button",
                   {
@@ -2864,7 +2969,7 @@ function Mermaid({ chart, title, watermarkEnabled, watermarkText, enablePreview
             /* @__PURE__ */ jsxs10(
               "div",
               {
-                className: "relative h-[calc(88vh-40px)] w-full overflow-hidden bg-white dark:bg-neutral-900",
+                className: "relative h-[calc(88vh-40px)] w-full overflow-hidden bg-white dark:bg-neutral-900 touch-none overscroll-contain",
                 onWheel,
                 onPointerDown,
                 onPointerMove,