collabmd 0.1.43 → 0.1.45

package/src/client/application/diagram-chrome.js

@@ -1,6 +1,5 @@
 import { setDiagramActionButtonIcon } from '../domain/diagram-action-icons.js';
 import {
-  downloadBlob,
   rasterizeSvgMarkupToPngBlob,
   writeBlobToClipboard,
 } from './diagram-preview-export.js';
@@ -9,13 +8,15 @@ import {
   getFrameViewportSize,
 } from './preview-diagram-utils.js';
 import { clamp } from '../domain/vault-utils.js';
+import { downloadBlob } from '../browser-utils.js';
 
-export const DIAGRAM_CHROME_ZOOM = Object.freeze({
+const DIAGRAM_CHROME_ZOOM = Object.freeze({
   animationDurationMs: 160,
   default: 1,
   max: 3,
   min: 0.1,
   step: 0.1,
+  wheelSensitivity: 0.01,
 });
 
 const DIAGRAM_CHROME_ZOOM_POLICY = Object.freeze({
@@ -78,8 +79,8 @@ export class DiagramChrome {
     this.maximizedRoots = new Map();
     this.resizeObservers = new Set();
     this.shellControllers = new WeakMap();
+    this.shellViewStates = new WeakMap();
     this.shellRefits = new WeakMap();
-    this.resizeFrameId = null;
   }
 
   destroy() {
@@ -88,10 +89,6 @@ export class DiagramChrome {
     this.resizeObservers.clear();
     this.maximizedRoots.forEach((root) => root.remove());
     this.maximizedRoots.clear();
-    if (this.resizeFrameId) {
-      this.window.cancelAnimationFrame(this.resizeFrameId);
-      this.resizeFrameId = null;
-    }
     this.activeMaximizedShell = null;
   }
 
@@ -105,6 +102,7 @@ export class DiagramChrome {
   destroyShell(shell) {
     this.shellControllers.get(shell)?.destroy?.();
     this.shellControllers.delete(shell);
+    this.shellViewStates.delete(shell);
     this.shellRefits.delete(shell);
     if (this.activeMaximizedShell === shell) {
       this.restoreShellMount(shell);
@@ -113,6 +111,20 @@ export class DiagramChrome {
     this.syncBodyMaximizedClasses();
   }
 
+  captureShellViewState(shell) {
+    const viewState = this.shellControllers.get(shell)?.getViewState?.() ?? null;
+    if (viewState) {
+      this.shellViewStates.set(shell, viewState);
+    }
+    return viewState;
+  }
+
+  getShellViewState(shell) {
+    return this.shellViewStates.get(shell)
+      ?? this.shellControllers.get(shell)?.getViewState?.()
+      ?? null;
+  }
+
   cancelActiveShell(kind) {
     const activeShell = this.syncActiveShell();
     if (!activeShell?.classList?.contains(`${kind}-shell`)) {
@@ -170,17 +182,6 @@ export class DiagramChrome {
     });
   }
 
-  scheduleActiveRefitOnNextFrame() {
-    if (this.resizeFrameId) {
-      this.window.cancelAnimationFrame(this.resizeFrameId);
-    }
-
-    this.resizeFrameId = this.window.requestAnimationFrame(() => {
-      this.resizeFrameId = null;
-      this.scheduleActiveRefit();
-    });
-  }
-
   ensureMaximizedRoot(kind) {
     const config = getKindConfig(kind);
     const existing = this.maximizedRoots.get(kind);
@@ -266,12 +267,11 @@ export class DiagramChrome {
     const toolbar = this.document.createElement('div');
     toolbar.className = config.toolbarClassName;
     const leftGroup = this.document.createElement('div');
-    leftGroup.className = 'diagram-preview-toolbar-group diagram-preview-toolbar-group--zoom';
+    leftGroup.className = 'diagram-preview-toolbar-group';
     const rightGroup = this.document.createElement('div');
     rightGroup.className = 'diagram-preview-toolbar-group diagram-preview-toolbar-group--actions';
 
-    const decreaseButton = this.createButton(kind, '-', 'Zoom out');
-    decreaseButton.textContent = '−';
+    const decreaseButton = this.createButton(kind, '−', 'Zoom out');
     const increaseButton = this.createButton(kind, '+', 'Zoom in');
     const resetButton = this.createButton(kind, '', 'Reset zoom', { icon: 'fit' });
     const copyButton = this.createButton(kind, '', 'Copy image', { icon: 'copy' });
@@ -398,10 +398,12 @@ export class DiagramChrome {
       return null;
     }
 
-    this.destroyShell(shell);
-
     const config = getKindConfig(kind);
     const zoomPolicy = getKindZoomPolicy(kind);
+    const previousFrame = shell.querySelector(config.frameClassName.split(' ').map((name) => `.${name}`).join(''));
+    const previousViewportWidth = previousFrame ? getFrameViewportSize(previousFrame).width : 0;
+    const previousViewState = this.getShellViewState(shell);
+    this.destroyShell(shell);
     const {
       copyButton,
       decreaseButton,
@@ -418,24 +420,55 @@ export class DiagramChrome {
     });
     const frame = this.document.createElement('div');
     frame.className = config.frameClassName;
+    const shouldRestoreScrollPosition = Boolean(
+      previousViewState
+      && (previousViewState.scrollLeft > 0 || previousViewState.scrollTop > 0)
+    );
+    const shouldStageReplacement = Boolean(
+      shouldRestoreScrollPosition
+      && previousFrame?.isConnected
+      && previousFrame.clientWidth > 0
+      && previousFrame.clientHeight > 0
+    );
+    const shouldRestoreShellPosition = Boolean(
+      shouldStageReplacement
+      && !shell.classList.contains('is-maximized')
+      && !shell.style.position
+    );
+    if (shouldRestoreShellPosition) {
+      shell.style.position = 'relative';
+    }
+    if (shouldRestoreScrollPosition && !shouldStageReplacement) {
+      frame.style.visibility = 'hidden';
+    }
+    if (shouldStageReplacement) {
+      Object.assign(frame.style, {
+        height: `${previousFrame.clientHeight}px`,
+        left: '0',
+        pointerEvents: 'none',
+        position: 'absolute',
+        top: '0',
+        visibility: 'hidden',
+        width: `${previousFrame.clientWidth}px`,
+      });
+    }
 
     let currentZoom = zoomPolicy.default;
-    let defaultZoom = 1;
     let zoomAnimationFrameId = null;
+    let zoomAnimationTarget = null;
     let resetZoomFrameId = null;
-    let layoutFrameId = null;
-    let hasManualZoom = false;
-    let lastAutoFitViewportWidth = 0;
+    let replacementFrameId = null;
+    let pinchState = null;
+    let hasManualZoom = Boolean(
+      previousViewState?.hasManualZoom
+      || previousViewState?.scrollLeft > 0
+      || previousViewState?.scrollTop > 0,
+    );
+    const hasInitialViewport = previousViewportWidth > 0 && Number.isFinite(baseWidth) && baseWidth > 0;
+    const hasRestorableViewState = Number.isFinite(previousViewState?.zoom);
+    let lastAutoFitViewportWidth = hasInitialViewport ? previousViewportWidth : 0;
     let shouldForceScheduledReset = false;
-    let isPanning = false;
-    let activePointerId = null;
-    let panStartX = 0;
-    let panStartY = 0;
-    let panStartScrollLeft = 0;
-    let panStartScrollTop = 0;
-
-    diagramElement.style.display = 'block';
-    diagramElement.style.margin = '0 auto';
+
     diagramElement.style.maxWidth = 'none';
 
     const calculateDefaultZoom = () => {
@@ -461,44 +494,56 @@ export class DiagramChrome {
       decreaseButton.disabled = currentZoom <= zoomPolicy.min;
       increaseButton.disabled = currentZoom >= zoomPolicy.max;
 
-      const viewport = getFrameViewportSize(frame);
-      const isPannable = (baseWidth * currentZoom) > viewport.width || (baseHeight * currentZoom) > viewport.height;
-      frame.classList.toggle('is-pannable', isPannable);
-      diagramElement.style.margin = isPannable ? '0' : '0 auto';
     };
 
+    const initialZoom = hasRestorableViewState
+      ? clamp(previousViewState.zoom, zoomPolicy.min, zoomPolicy.max)
+      : hasInitialViewport
+      ? clamp(previousViewportWidth / baseWidth, zoomPolicy.min, zoomPolicy.fitMax)
+      : zoomPolicy.default;
+
     const getViewportCenter = () => ({
       x: frame.scrollLeft + (frame.clientWidth / 2),
       y: frame.scrollTop + (frame.clientHeight / 2),
     });
 
-    const restoreViewportCenter = (previousZoom, nextZoom, center) => {
+    const restoreViewportPoint = (previousZoom, nextZoom, contentPoint, viewportPoint) => {
       if (previousZoom === 0) {
         return;
       }
 
       const scale = nextZoom / previousZoom;
-      frame.scrollLeft = (center.x * scale) - (frame.clientWidth / 2);
-      frame.scrollTop = (center.y * scale) - (frame.clientHeight / 2);
+      frame.scrollLeft = (contentPoint.x * scale) - viewportPoint.x;
+      frame.scrollTop = (contentPoint.y * scale) - viewportPoint.y;
+    };
+
+    const restoreViewportCenter = (previousZoom, nextZoom, center) => {
+      restoreViewportPoint(previousZoom, nextZoom, center, {
+        x: frame.clientWidth / 2,
+        y: frame.clientHeight / 2,
+      });
     };
 
     const animateZoomTo = (nextZoom) => {
       const targetZoom = clamp(nextZoom, zoomPolicy.min, zoomPolicy.max);
+      if (zoomAnimationFrameId) {
+        zoomAnimationTarget = targetZoom;
+        return;
+      }
+
       const startZoom = currentZoom;
       if (targetZoom === startZoom) {
         return;
       }
 
+      zoomAnimationTarget = targetZoom;
       const center = getViewportCenter();
       const startedAt = performance.now();
-      if (zoomAnimationFrameId) {
-        this.window.cancelAnimationFrame(zoomAnimationFrameId);
-      }
 
       const tick = (now) => {
         const progress = clamp((now - startedAt) / zoomPolicy.animationDurationMs, 0, 1);
         const easedProgress = easeOutCubic(progress);
-        const animatedZoom = startZoom + ((targetZoom - startZoom) * easedProgress);
+        const animatedZoom = startZoom + ((zoomAnimationTarget - startZoom) * easedProgress);
         applyZoom(animatedZoom);
         restoreViewportCenter(startZoom, animatedZoom, center);
 
@@ -508,33 +553,35 @@ export class DiagramChrome {
         }
 
         zoomAnimationFrameId = null;
-        applyZoom(targetZoom);
-        restoreViewportCenter(startZoom, targetZoom, center);
+        const completedZoom = zoomAnimationTarget;
+        zoomAnimationTarget = null;
+        applyZoom(completedZoom);
+        restoreViewportCenter(startZoom, completedZoom, center);
       };
 
       zoomAnimationFrameId = this.window.requestAnimationFrame(tick);
     };
 
+    const cancelZoomAnimation = () => {
+      if (zoomAnimationFrameId) {
+        this.window.cancelAnimationFrame(zoomAnimationFrameId);
+        zoomAnimationFrameId = null;
+      }
+
+      zoomAnimationTarget = null;
+    };
+
     const zoomBy = (delta) => {
       hasManualZoom = true;
-      animateZoomTo(currentZoom + delta);
+      animateZoomTo((zoomAnimationTarget ?? currentZoom) + delta);
     };
 
-    const resetZoomToFit = ({ animate = false } = {}) => {
-      defaultZoom = calculateDefaultZoom();
+    const resetZoomToFit = () => {
+      const defaultZoom = calculateDefaultZoom();
       hasManualZoom = false;
       lastAutoFitViewportWidth = getFrameViewportSize(frame).width;
-
-      if (animate && Math.abs(defaultZoom - currentZoom) > 0.001) {
-        animateZoomTo(defaultZoom);
-        return;
-      }
-
-      if (zoomAnimationFrameId) {
-        this.window.cancelAnimationFrame(zoomAnimationFrameId);
-        zoomAnimationFrameId = null;
-      }
-
+      pinchState = null;
+      cancelZoomAnimation();
       applyZoom(defaultZoom);
       frame.scrollLeft = 0;
       frame.scrollTop = 0;
@@ -545,40 +592,133 @@ export class DiagramChrome {
       if (resetZoomFrameId) {
         this.window.cancelAnimationFrame(resetZoomFrameId);
       }
-      if (layoutFrameId) {
-        this.window.cancelAnimationFrame(layoutFrameId);
-      }
 
       resetZoomFrameId = this.window.requestAnimationFrame(() => {
-        layoutFrameId = this.window.requestAnimationFrame(() => {
-          layoutFrameId = this.window.requestAnimationFrame(() => {
-            layoutFrameId = null;
-            resetZoomFrameId = null;
-            if (!shell.isConnected) {
-              return;
-            }
-
-            const shouldForce = shouldForceScheduledReset;
-            shouldForceScheduledReset = false;
-            const viewportWidth = getFrameViewportSize(frame).width;
-            const viewportChanged = Math.abs(viewportWidth - lastAutoFitViewportWidth) > 1;
-            if (!shouldForce && hasManualZoom) {
-              return;
-            }
-            if (!shouldForce && viewportWidth > 0 && lastAutoFitViewportWidth > 0 && !viewportChanged) {
-              return;
-            }
-
-            resetZoomToFit();
-          });
-        });
+        resetZoomFrameId = null;
+        if (!shell.isConnected) {
+          return;
+        }
+
+        const shouldForce = shouldForceScheduledReset;
+        shouldForceScheduledReset = false;
+        const viewportWidth = getFrameViewportSize(frame).width;
+        const viewportChanged = Math.abs(viewportWidth - lastAutoFitViewportWidth) > 1;
+        if (!shouldForce && hasManualZoom) {
+          return;
+        }
+        if (!shouldForce && viewportWidth > 0 && lastAutoFitViewportWidth > 0 && !viewportChanged) {
+          return;
+        }
+
+        resetZoomToFit();
       });
     };
 
     const resizeObserver = this.attachShellResizeObserver(shell, frame, () => scheduleResetZoomToFit());
 
+    const getFrameViewportPoint = (clientX, clientY) => {
+      const rect = frame.getBoundingClientRect();
+      return {
+        x: Number(clientX) - rect.left,
+        y: Number(clientY) - rect.top,
+      };
+    };
+
+    const getPinchGesture = (touches) => {
+      if (!touches || touches.length !== 2) {
+        return null;
+      }
+
+      const first = touches[0];
+      const second = touches[1];
+      const center = getFrameViewportPoint(
+        (first.clientX + second.clientX) / 2,
+        (first.clientY + second.clientY) / 2,
+      );
+      const distance = Math.hypot(
+        second.clientX - first.clientX,
+        second.clientY - first.clientY,
+      );
+      if (!Number.isFinite(distance) || distance <= 0) {
+        return null;
+      }
+
+      return { center, distance };
+    };
+
+    const startPinch = (touches) => {
+      const gesture = getPinchGesture(touches);
+      if (!gesture) {
+        return false;
+      }
+
+      cancelZoomAnimation();
+      pinchState = {
+        contentPoint: {
+          x: frame.scrollLeft + gesture.center.x,
+          y: frame.scrollTop + gesture.center.y,
+        },
+        distance: gesture.distance,
+        zoom: currentZoom,
+      };
+      return true;
+    };
+
+    const updatePinch = (touches) => {
+      const gesture = getPinchGesture(touches);
+      if (!gesture) {
+        return false;
+      }
+      if (!pinchState && !startPinch(touches)) {
+        return false;
+      }
+
+      hasManualZoom = true;
+      applyZoom(pinchState.zoom * (gesture.distance / pinchState.distance));
+      restoreViewportPoint(
+        pinchState.zoom,
+        currentZoom,
+        pinchState.contentPoint,
+        gesture.center,
+      );
+      return true;
+    };
+
     decreaseButton.addEventListener('click', () => zoomBy(-zoomPolicy.step));
     increaseButton.addEventListener('click', () => zoomBy(zoomPolicy.step));
+    frame.addEventListener('wheel', (event) => {
+      if (!event.ctrlKey) {
+        return;
+      }
+
+      event.preventDefault();
+      const deltaY = Number.isFinite(event.deltaY) ? event.deltaY : 0;
+      const wheelDelta = clamp(
+        -deltaY * zoomPolicy.wheelSensitivity,
+        -zoomPolicy.step / 2,
+        zoomPolicy.step / 2,
+      );
+      if (wheelDelta !== 0) {
+        zoomBy(wheelDelta);
+      }
+    }, { passive: false });
+    frame.addEventListener('touchstart', (event) => {
+      if (event.touches.length === 2) {
+        startPinch(event.touches);
+      }
+    }, { passive: true });
+    frame.addEventListener('touchmove', (event) => {
+      if (event.touches.length === 2 && updatePinch(event.touches)) {
+        event.preventDefault();
+      }
+    }, { passive: false });
+    const finishPinch = (event) => {
+      if (event.touches.length !== 2) {
+        pinchState = null;
+      }
+    };
+    frame.addEventListener('touchend', finishPinch);
+    frame.addEventListener('touchcancel', finishPinch);
     resetButton.addEventListener('click', () => {
       scheduleResetZoomToFit({ force: true });
     });
@@ -595,106 +735,77 @@ export class DiagramChrome {
       );
     });
 
-    const stopPanning = () => {
-      if (!isPanning) {
-        return;
-      }
-
-      isPanning = false;
-      frame.classList.remove('is-dragging');
-      this.window.removeEventListener('pointerup', stopPanning, true);
-      this.window.removeEventListener('pointercancel', stopPanning, true);
-      this.window.removeEventListener('mouseup', stopPanning, true);
-      this.window.removeEventListener('touchend', stopPanning, true);
-      this.window.removeEventListener('touchcancel', stopPanning, true);
-      this.window.removeEventListener('blur', stopPanning, true);
-
-      if (activePointerId !== null && typeof frame.releasePointerCapture === 'function') {
-        try {
-          frame.releasePointerCapture(activePointerId);
-        } catch {
-          // Ignore capture release issues during drag end.
-        }
-      }
-
-      activePointerId = null;
-    };
-
-    frame.addEventListener('pointerdown', (event) => {
-      if (event.button !== 0 || !frame.classList.contains('is-pannable')) {
-        return;
-      }
-
-      if (zoomAnimationFrameId) {
-        this.window.cancelAnimationFrame(zoomAnimationFrameId);
-        zoomAnimationFrameId = null;
-      }
-
-      isPanning = true;
-      activePointerId = event.pointerId;
-      panStartX = event.clientX;
-      panStartY = event.clientY;
-      panStartScrollLeft = frame.scrollLeft;
-      panStartScrollTop = frame.scrollTop;
-
-      frame.classList.add('is-dragging');
-      this.window.addEventListener('pointerup', stopPanning, true);
-      this.window.addEventListener('pointercancel', stopPanning, true);
-      this.window.addEventListener('mouseup', stopPanning, true);
-      this.window.addEventListener('touchend', stopPanning, true);
-      this.window.addEventListener('touchcancel', stopPanning, true);
-      this.window.addEventListener('blur', stopPanning, true);
-      if (typeof frame.setPointerCapture === 'function') {
-        try {
-          frame.setPointerCapture(event.pointerId);
-        } catch {
-          // Safari can reject pointer capture during rapid layout transitions.
-        }
-      }
-      event.preventDefault();
-    });
-
-    frame.addEventListener('pointermove', (event) => {
-      if (!isPanning) {
-        return;
-      }
-
-      frame.scrollLeft = panStartScrollLeft - (event.clientX - panStartX);
-      frame.scrollTop = panStartScrollTop - (event.clientY - panStartY);
-    });
-
-    frame.addEventListener('pointerup', stopPanning);
-    frame.addEventListener('pointercancel', stopPanning);
-    frame.addEventListener('lostpointercapture', stopPanning);
-    frame.addEventListener('mouseleave', stopPanning);
-    frame.addEventListener('mouseup', stopPanning);
-    frame.addEventListener('touchend', stopPanning);
-    frame.addEventListener('touchcancel', stopPanning);
-
     frame.appendChild(diagramElement);
     const sourceNode = sourceSelector ? shell.querySelector(sourceSelector) : null;
-    shell.replaceChildren();
+    const nextChildren = sourceNode ? [sourceNode, toolbar, frame] : [toolbar, frame];
     if (sourceNode) {
       sourceNode.hidden = true;
-      shell.appendChild(sourceNode);
     }
-    shell.append(toolbar, frame);
+    if (shouldStageReplacement) {
+      shell.append(frame);
+    } else {
+      shell.replaceChildren(...nextChildren);
+    }
+    applyZoom(initialZoom);
+
+    const restoreScrollPosition = () => {
+      const maxScrollLeft = Math.max(0, frame.scrollWidth - frame.clientWidth);
+      const maxScrollTop = Math.max(0, frame.scrollHeight - frame.clientHeight);
+      const scrollLeft = clamp(previousViewState.scrollLeft ?? 0, 0, maxScrollLeft);
+      const scrollTop = clamp(previousViewState.scrollTop ?? 0, 0, maxScrollTop);
+      frame.scrollLeft = scrollLeft;
+      frame.scrollTop = scrollTop;
+      return frame.clientWidth > 0
+        && frame.clientHeight > 0
+        && frame.scrollLeft === scrollLeft
+        && frame.scrollTop === scrollTop;
+    };
+
+    if (shouldStageReplacement) {
+      restoreScrollPosition();
+      replacementFrameId = this.window.requestAnimationFrame(() => {
+        replacementFrameId = null;
+        shell.replaceChildren(...nextChildren);
+        frame.removeAttribute('style');
+        if (shouldRestoreShellPosition) {
+          shell.style.position = '';
+        }
+        applyZoom(initialZoom);
+        restoreScrollPosition();
+      });
+    } else if (shouldRestoreScrollPosition) {
+      if (!restoreScrollPosition()) {
+        this.window.requestAnimationFrame(() => {
+          if (frame.isConnected) {
+            restoreScrollPosition();
+            frame.style.visibility = '';
+          }
+        });
+      } else {
+        frame.style.visibility = '';
+      }
+    }
 
     const controller = {
       destroy: () => {
-        stopPanning();
         if (zoomAnimationFrameId) {
           this.window.cancelAnimationFrame(zoomAnimationFrameId);
         }
         if (resetZoomFrameId) {
           this.window.cancelAnimationFrame(resetZoomFrameId);
         }
-        if (layoutFrameId) {
-          this.window.cancelAnimationFrame(layoutFrameId);
+        if (replacementFrameId) {
+          this.window.cancelAnimationFrame(replacementFrameId);
         }
         resizeObserver?.disconnect?.();
         this.resizeObservers.delete(resizeObserver);
       },
+      getViewState: () => ({
+        hasManualZoom,
+        scrollLeft: frame.scrollLeft,
+        scrollTop: frame.scrollTop,
+        zoom: currentZoom,
+      }),
       scheduleResetZoomToFit,
       syncMaximizeButtonState: () => this.syncMaximizeButtonState(shell, maximizeButton),
     };
@@ -702,7 +813,9 @@ export class DiagramChrome {
     this.shellControllers.set(shell, controller);
     this.shellRefits.set(shell, scheduleResetZoomToFit);
     this.syncMaximizeButtonState(shell, maximizeButton);
-    scheduleResetZoomToFit({ force: true });
+    if (!hasInitialViewport && !hasRestorableViewState) {
+      scheduleResetZoomToFit({ force: true });
+    }
     return controller;
   }
 }