@barzhsieh/nuxt-content-mermaid 2.2.3 → 3.0.2

package/dist/runtime/composables/useMermaidExpand.js

@@ -6,6 +6,10 @@ const swipeToCloseThreshold = 10;
 export function useMermaidExpand(options) {
   const isClient = typeof import.meta.client === "boolean" ? import.meta.client : typeof window !== "undefined" && typeof document !== "undefined";
   const expandTargetWrap = ref(null);
+  const expandModal = ref(null);
+  const setExpandModal = (el) => {
+    expandModal.value = el && "nodeType" in el ? el : null;
+  };
   const setExpandTargetWrap = (el) => {
     if (el && "nodeType" in el) {
       expandTargetWrap.value = el;
@@ -26,26 +30,43 @@ export function useMermaidExpand(options) {
     minScale: 0.1,
     maxScale: 10
   });
-  const isVisible = computed(() => expandState.value === "open");
-  const allowTargetClick = options.invokeOpenOn?.diagramClick !== false;
-  const allowCloseByEsc = options.invokeCloseOn?.esc !== false;
-  const allowCloseByWheel = options.invokeCloseOn?.wheel !== false;
-  const allowCloseBySwipe = options.invokeCloseOn?.swipe !== false;
+  const isVisible = computed(() => isExpanded.value);
+  const allowTargetClick = options.expandOptions.invokeOpenOn?.diagramClick !== false;
+  const allowCloseByEsc = options.expandOptions.invokeCloseOn?.esc !== false;
+  const allowCloseByWheel = options.expandOptions.invokeCloseOn?.wheel !== false;
+  const allowCloseBySwipe = options.expandOptions.invokeCloseOn?.swipe !== false;
+  const allowOverlayClose = options.expandOptions.invokeCloseOn?.overlayClick !== false;
+  const allowCloseButton = options.expandOptions.invokeCloseOn?.closeButtonClick !== false;
+  const shouldDisableTransition = computed(() => shouldRefreshExpand.value || zoom.isPointerDown.value);
+  const expandClipStyle = computed(() => {
+    const metrics = expandMetrics.value;
+    if (!metrics) return {};
+    const rect = isExpanded.value ? metrics.expandedClip : metrics.sourceClip;
+    return {
+      top: `${metrics.coordinatePlane.top}px`,
+      left: `${metrics.coordinatePlane.left}px`,
+      width: `${metrics.coordinatePlane.width}px`,
+      height: `${metrics.coordinatePlane.height}px`,
+      clipPath: toClipPath(rect, metrics.coordinatePlane),
+      transitionDuration: shouldDisableTransition.value ? "0ms" : void 0
+    };
+  });
   const expandTargetStyle = computed(() => {
     const metrics = expandMetrics.value;
     if (!metrics) return {};
     const { transform } = zoom.transformStyle.value;
     return {
-      top: `${metrics.top}px`,
-      left: `${metrics.left}px`,
-      width: `${metrics.width}px`,
-      height: `${metrics.height}px`,
+      top: `${metrics.sourceDiagram.top}px`,
+      left: `${metrics.sourceDiagram.left}px`,
+      width: `${metrics.sourceDiagram.width}px`,
+      height: `${metrics.sourceDiagram.height}px`,
       transform: isExpanded.value ? transform : "translate(0px, 0px) scale(1)",
-      transitionDuration: shouldRefreshExpand.value || zoom.isPointerDown.value ? "0ms" : void 0
+      transitionDuration: shouldDisableTransition.value ? "0ms" : void 0
     };
   });
   let expandTransitionTimeout;
   let expandResizeTimeout;
+  let openingRaf;
   const resizeDoubleRaf = {
     raf1: void 0,
     raf2: void 0,
@@ -68,46 +89,67 @@ export function useMermaidExpand(options) {
     }
   };
   let expandRefreshRaf;
+  let hasDeferredResize = false;
   const resizeRefreshDelay = 180;
   const scrollState = {
     bodyOverflow: "",
     bodyWidth: "",
     htmlOverflow: "",
     htmlWidth: "",
-    lockedWidth: false
+    scrollbarGutter: 0,
+    layoutWidth: 0,
+    lockedWidth: false,
+    locked: false
   };
   const touchState = {
     isScaling: false
   };
   let expandInstanceId = 0;
   function resolveExpandMargin() {
-    const margin = options.expandMargin;
+    const margin = options.expandOptions.margin;
     if (typeof margin !== "number" || Number.isNaN(margin)) return 0;
     return Math.max(0, margin);
   }
-  function getLayoutViewportSize() {
-    const viewport = window.visualViewport;
-    const scale = viewport?.scale ?? 1;
+  function getExpandCoordinateViewportSize() {
     return {
-      width: (viewport?.width ?? window.innerWidth) * scale,
-      height: (viewport?.height ?? window.innerHeight) * scale
+      width: scrollState.locked && scrollState.layoutWidth > 0 ? scrollState.layoutWidth : document.documentElement.clientWidth || window.innerWidth,
+      height: window.innerHeight
     };
   }
+  function intersectRects(...rects) {
+    const left = Math.max(...rects.map((rect) => rect.left));
+    const top = Math.max(...rects.map((rect) => rect.top));
+    const right = Math.min(...rects.map((rect) => rect.left + rect.width));
+    const bottom = Math.min(...rects.map((rect) => rect.top + rect.height));
+    if (right <= left || bottom <= top) return null;
+    return {
+      top,
+      left,
+      width: right - left,
+      height: bottom - top
+    };
+  }
+  function toClipPath(rect, plane) {
+    const top = Math.max(0, rect.top - plane.top);
+    const left = Math.max(0, rect.left - plane.left);
+    const right = Math.max(0, plane.width - left - rect.width);
+    const bottom = Math.max(0, plane.height - top - rect.height);
+    return `inset(${top}px ${right}px ${bottom}px ${left}px)`;
+  }
   function getLockedViewportWidth() {
     const width = document.documentElement.clientWidth || window.innerWidth;
     return Math.max(1, Math.round(width));
   }
-  function shouldLockWidth() {
-    return window.innerWidth - document.documentElement.clientWidth > 0;
-  }
   function updateLockedWidth() {
     if (!scrollState.lockedWidth || document.body.style.overflow !== "hidden") return;
-    document.documentElement.style.width = "";
-    document.body.style.width = "";
-    void document.body.offsetHeight;
-    const clientWidth = getLockedViewportWidth();
-    document.documentElement.style.width = `${clientWidth}px`;
-    document.body.style.width = `${clientWidth}px`;
+    const width = window.innerWidth;
+    const height = window.innerHeight;
+    const needsVerticalScrollbar = document.documentElement.scrollHeight > height;
+    const gutter = needsVerticalScrollbar ? scrollState.scrollbarGutter : 0;
+    const layoutWidth = Math.max(1, Math.round(width - gutter));
+    scrollState.layoutWidth = layoutWidth;
+    document.documentElement.style.width = `${layoutWidth}px`;
+    document.body.style.width = `${layoutWidth}px`;
   }
   function clearResizeTimers() {
     clearTimeout(expandResizeTimeout);
@@ -118,24 +160,73 @@ export function useMermaidExpand(options) {
     if (expandRefreshRaf != null) cancelAnimationFrame(expandRefreshRaf);
     expandRefreshRaf = void 0;
   }
+  function clearOpeningRaf() {
+    if (openingRaf != null) cancelAnimationFrame(openingRaf);
+    openingRaf = void 0;
+  }
+  function resetSwipeState() {
+    touchState.isScaling = false;
+    touchState.start = void 0;
+    touchState.end = void 0;
+  }
+  function cancelPendingWork() {
+    clearTimeout(expandTransitionTimeout);
+    clearTimeout(hintTimeout);
+    expandTransitionTimeout = void 0;
+    hintTimeout = void 0;
+    clearResizeTimers();
+    clearRefreshRaf();
+    clearOpeningRaf();
+    showZoomHint.value = false;
+    resetSwipeState();
+    zoom.cancelInteraction();
+  }
   function calculateExpandMetrics(target) {
-    const rect = target.getBoundingClientRect();
-    if (!rect.width || !rect.height) return null;
+    const sourceRect = target.getBoundingClientRect();
+    if (!sourceRect.width || !sourceRect.height) return null;
+    const viewport = options.getExpandViewport();
+    if (!viewport) return null;
+    const viewportRect = viewport.getBoundingClientRect();
     const margin = resolveExpandMargin();
-    const { width, height } = getLayoutViewportSize();
+    const { width, height } = getExpandCoordinateViewportSize();
+    const coordinatePlane = { top: 0, left: 0, width, height };
     const viewportWidth = Math.max(1, width - margin * 2);
     const viewportHeight = Math.max(1, height - margin * 2);
-    const scaleX = viewportWidth / rect.width;
-    const scaleY = viewportHeight / rect.height;
+    const sourceDiagram = {
+      top: sourceRect.top,
+      left: sourceRect.left,
+      width: sourceRect.width,
+      height: sourceRect.height
+    };
+    const sourceViewport = {
+      top: viewportRect.top + viewport.clientTop,
+      left: viewportRect.left + viewport.clientLeft,
+      width: viewport.clientWidth,
+      height: viewport.clientHeight
+    };
+    const sourceClip = intersectRects(
+      sourceDiagram,
+      sourceViewport,
+      coordinatePlane
+    );
+    if (!sourceClip) return null;
+    const expandedClip = {
+      top: margin,
+      left: margin,
+      width: viewportWidth,
+      height: viewportHeight
+    };
+    const scaleX = viewportWidth / sourceRect.width;
+    const scaleY = viewportHeight / sourceRect.height;
     const scale = Number.isFinite(scaleX) && Number.isFinite(scaleY) ? Math.min(scaleX, scaleY) : 1;
     const safeScale = scale > 0 ? scale : 1;
     return {
-      top: rect.top,
-      left: rect.left,
-      width: rect.width,
-      height: rect.height,
-      translateX: width / 2 - (rect.left + rect.width * safeScale / 2),
-      translateY: height / 2 - (rect.top + rect.height * safeScale / 2),
+      coordinatePlane,
+      sourceDiagram,
+      sourceClip,
+      expandedClip,
+      translateX: expandedClip.left + (expandedClip.width - sourceRect.width * safeScale) / 2 - sourceDiagram.left,
+      translateY: expandedClip.top + (expandedClip.height - sourceRect.height * safeScale) / 2 - sourceDiagram.top,
       scale: safeScale
     };
   }
@@ -200,14 +291,12 @@ export function useMermaidExpand(options) {
   }
   function resetExpand() {
     if (!isClient) return;
-    clearTimeout(expandTransitionTimeout);
-    clearTimeout(hintTimeout);
-    clearResizeTimers();
-    clearRefreshRaf();
+    cancelPendingWork();
     clearExpandSvg();
     expandState.value = "idle";
     isExpanded.value = false;
     shouldRefreshExpand.value = false;
+    hasDeferredResize = false;
     showZoomHint.value = false;
     expandMetrics.value = null;
     enableBodyScroll();
@@ -225,8 +314,8 @@ export function useMermaidExpand(options) {
       scale: metrics.scale,
       translateX: metrics.translateX,
       translateY: metrics.translateY,
-      top: metrics.top,
-      left: metrics.left
+      top: metrics.sourceDiagram.top,
+      left: metrics.sourceDiagram.left
     });
     expandState.value = "opening";
     isExpanded.value = false;
@@ -237,10 +326,17 @@ export function useMermaidExpand(options) {
         resetExpand();
         return;
       }
-      requestAnimationFrame(() => {
-        if (expandState.value !== "opening") return;
-        isExpanded.value = true;
-        expandState.value = "open";
+      openingRaf = requestAnimationFrame(() => {
+        if (expandState.value !== "opening") {
+          openingRaf = void 0;
+          return;
+        }
+        openingRaf = requestAnimationFrame(() => {
+          openingRaf = void 0;
+          if (expandState.value !== "opening") return;
+          isExpanded.value = true;
+          ensureExpandTransitionEnd();
+        });
       });
     });
   }
@@ -250,6 +346,8 @@ export function useMermaidExpand(options) {
       resetExpand();
       return;
     }
+    cancelPendingWork();
+    hasDeferredResize = false;
     expandState.value = "closing";
     isExpanded.value = false;
     ensureExpandTransitionEnd();
@@ -263,18 +361,30 @@ export function useMermaidExpand(options) {
   }
   function handleExpandTransitionEnd(event) {
     if (event.propertyName !== "transform") return;
-    if (expandState.value === "closing") {
-      resetExpand();
-    }
+    if (expandState.value === "opening") finishOpening();
+    else if (expandState.value === "closing") resetExpand();
+  }
+  function finishOpening() {
+    if (expandState.value !== "opening") return;
+    clearTimeout(expandTransitionTimeout);
+    expandTransitionTimeout = void 0;
+    expandState.value = "open";
+    if (!hasDeferredResize) return;
+    hasDeferredResize = false;
+    scheduleExpandRefresh();
   }
   function ensureExpandTransitionEnd() {
     if (!expandTargetWrap.value) return;
     const duration = window.getComputedStyle(expandTargetWrap.value).transitionDuration;
     const durationMs = Number.parseFloat(duration) * (duration.endsWith("ms") ? 1 : 1e3);
-    if (!durationMs) return;
+    if (!durationMs) {
+      if (expandState.value === "opening") finishOpening();
+      return;
+    }
     clearTimeout(expandTransitionTimeout);
     expandTransitionTimeout = setTimeout(() => {
-      if (expandState.value === "closing") resetExpand();
+      if (expandState.value === "opening") finishOpening();
+      else if (expandState.value === "closing") resetExpand();
     }, durationMs + 50);
   }
   function handleExpandKeyDown(event) {
@@ -370,34 +480,41 @@ export function useMermaidExpand(options) {
   }
   function handleExpandTouchEnd() {
     if (!allowCloseBySwipe) return;
-    touchState.isScaling = false;
-    touchState.start = void 0;
-    touchState.end = void 0;
+    resetSwipeState();
   }
   function handleExpandTouchCancel() {
     if (!allowCloseBySwipe) return;
-    touchState.isScaling = false;
-    touchState.start = void 0;
-    touchState.end = void 0;
+    resetSwipeState();
   }
   function handleExpandResize() {
-    if (!isExpandActive.value) return;
+    if (expandState.value === "opening") {
+      hasDeferredResize = true;
+      return;
+    }
+    if (expandState.value !== "open") return;
     scheduleExpandRefresh();
   }
+  function hasSameRect(left, right) {
+    return left.top === right.top && left.left === right.left && left.width === right.width && left.height === right.height;
+  }
+  function hasSameExpandMetrics(left, right) {
+    return hasSameRect(left.coordinatePlane, right.coordinatePlane) && hasSameRect(left.sourceDiagram, right.sourceDiagram) && hasSameRect(left.sourceClip, right.sourceClip) && hasSameRect(left.expandedClip, right.expandedClip) && left.translateX === right.translateX && left.translateY === right.translateY && left.scale === right.scale;
+  }
   function refreshExpandMetrics() {
-    if (!isExpandActive.value) return;
+    if (expandState.value !== "open") return;
     updateLockedWidth();
     const svg = options.getExpandTarget();
     if (!svg) return;
     const metrics = calculateExpandMetrics(svg);
     if (!metrics) return;
+    if (expandMetrics.value && hasSameExpandMetrics(expandMetrics.value, metrics)) return;
     expandMetrics.value = metrics;
     zoom.init({
       scale: metrics.scale,
       translateX: metrics.translateX,
       translateY: metrics.translateY,
-      top: metrics.top,
-      left: metrics.left
+      top: metrics.sourceDiagram.top,
+      left: metrics.sourceDiagram.left
     });
     shouldRefreshExpand.value = true;
     clearRefreshRaf();
@@ -417,6 +534,8 @@ export function useMermaidExpand(options) {
     const activeWindow = computed(() => isExpandActive.value ? window : null);
     const activeDocument = computed(() => isExpandActive.value ? document : null);
     const activeVisualViewport = computed(() => isExpandActive.value ? window.visualViewport : null);
+    const activeModal = computed(() => isExpandActive.value ? expandModal.value : null);
+    const activeTarget = computed(() => isExpandActive.value ? expandTargetWrap.value : null);
     useEventListener(activeWindow, "resize", handleExpandResize, { passive: true });
     useEventListener(activeWindow, "orientationchange", handleExpandResize, { passive: true });
     useEventListener(activeVisualViewport, "resize", handleExpandResize, { passive: true });
@@ -426,22 +545,35 @@ export function useMermaidExpand(options) {
     useEventListener(activeWindow, "touchend", handleExpandTouchEnd, { passive: true });
     useEventListener(activeWindow, "touchcancel", handleExpandTouchCancel, { passive: true });
     useEventListener(activeDocument, "keydown", handleExpandKeyDown, true);
+    useEventListener(activeModal, "click", handleModalClick);
+    useEventListener(activeModal, "mousedown", zoom.handleDragStart);
+    useEventListener(activeModal, "mousemove", zoom.handleDragMove);
+    useEventListener(activeModal, "touchstart", zoom.handleDragStart);
+    useEventListener(activeModal, "touchmove", zoom.handleDragMove);
+    useEventListener(activeModal, "touchend", zoom.handleDragEnd);
+    useEventListener(activeTarget, "transitionend", handleExpandTransitionEnd);
   }
   function disableBodyScroll() {
+    if (scrollState.locked) return;
     scrollState.bodyOverflow = document.body.style.overflow;
     scrollState.bodyWidth = document.body.style.width;
     scrollState.htmlOverflow = document.documentElement.style.overflow;
     scrollState.htmlWidth = document.documentElement.style.width;
-    scrollState.lockedWidth = shouldLockWidth();
-    document.documentElement.style.overflow = "hidden";
-    document.body.style.overflow = "hidden";
+    const layoutWidth = getLockedViewportWidth();
+    const viewportWidth = window.innerWidth;
+    scrollState.layoutWidth = layoutWidth;
+    scrollState.scrollbarGutter = Math.max(0, Math.round(viewportWidth - layoutWidth));
+    scrollState.lockedWidth = scrollState.scrollbarGutter > 0;
+    scrollState.locked = true;
     if (scrollState.lockedWidth) {
-      const clientWidth = getLockedViewportWidth();
-      document.documentElement.style.width = `${clientWidth}px`;
-      document.body.style.width = `${clientWidth}px`;
+      document.documentElement.style.width = `${layoutWidth}px`;
+      document.body.style.width = `${layoutWidth}px`;
     }
+    document.documentElement.style.overflow = "hidden";
+    document.body.style.overflow = "hidden";
   }
   function enableBodyScroll() {
+    if (!scrollState.locked) return;
     document.documentElement.style.width = scrollState.htmlWidth;
     document.documentElement.style.overflow = scrollState.htmlOverflow;
     scrollState.htmlOverflow = "";
@@ -450,7 +582,10 @@ export function useMermaidExpand(options) {
     document.body.style.overflow = scrollState.bodyOverflow;
     scrollState.bodyOverflow = "";
     scrollState.bodyWidth = "";
+    scrollState.scrollbarGutter = 0;
+    scrollState.layoutWidth = 0;
     scrollState.lockedWidth = false;
+    scrollState.locked = false;
   }
   function handleMermaidClick(event) {
     if (!allowTargetClick) return;
@@ -460,21 +595,43 @@ export function useMermaidExpand(options) {
     if (!svg.contains(event.target)) return;
     openExpand(event);
   }
+  function handleModalClick(event) {
+    if (zoom.isSpacePressed.value) return;
+    if (zoom.wasLastInteractionDrag.value) {
+      event.stopPropagation();
+      return;
+    }
+    const target = event.target;
+    if (!target.classList?.contains("ncm-expand-overlay") && !target.classList?.contains("ncm-expand-modal")) return;
+    if (allowOverlayClose) closeExpand(event);
+  }
+  function closeFromButton(event) {
+    if (allowCloseButton) closeExpand(event);
+  }
+  function endForDiagramReplacement() {
+    if (isExpandActive.value) resetExpand();
+  }
   tryOnScopeDispose(() => {
     if (isClient) resetExpand();
   });
   return {
+    setExpandModal,
     setExpandTargetWrap,
+    expandClipStyle,
     expandTargetStyle,
     isExpandActive,
     isVisible,
-    openExpand,
-    closeExpand,
-    toggleExpand,
-    handleExpandTransitionEnd,
-    handleMermaidClick,
-    resetExpand,
-    zoom,
+    toggle: toggleExpand,
+    openFromDiagram: handleMermaidClick,
+    endForDiagramReplacement,
+    closeFromButton,
+    zoomIn: zoom.zoomIn,
+    zoomOut: zoom.zoomOut,
+    resetZoom: zoom.reset,
+    cursor: computed(() => zoom.cursor.value),
+    isDragging: computed(() => zoom.isDragging.value),
+    scale: computed(() => zoom.scale.value),
+    isOverlayClosable: computed(() => allowOverlayClose && !zoom.isSpacePressed.value),
     showZoomHint
   };
 }

package/dist/runtime/composables/useMermaidFullscreen.d.ts

@@ -0,0 +1,18 @@
+import type { ConfigurableDocument, ConfigurableWindow } from './_configurable.js';
+interface UseMermaidFullscreenOptions extends ConfigurableDocument, ConfigurableWindow {
+    getFullscreenTarget: () => HTMLElement | null;
+    getViewportTarget: () => HTMLElement | null;
+    getRenderTarget: () => HTMLElement | null;
+}
+export declare function useMermaidFullscreen(options: UseMermaidFullscreenOptions): {
+    isSupported: import("vue").ComputedRef<boolean>;
+    isActive: import("vue").ShallowRef<boolean, boolean>;
+    scale: import("vue").ComputedRef<number>;
+    showZoomHint: import("vue").Ref<boolean, boolean>;
+    toggle: () => Promise<void>;
+    endForDiagramReplacement: () => Promise<void>;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    resetZoom: () => void;
+};
+export {};