collabmd 0.1.44 → 0.1.46

package/src/client/application/app-shell/workspace-feature.js

@@ -5,49 +5,32 @@ import {
   isExcalidrawFilePath,
   isImageAttachmentFilePath,
   isMermaidFilePath,
+  isPdfFilePath,
   isPlantUmlFilePath,
+  isStructurizrFilePath,
   stripVaultFileExtension,
 } from '../../../domain/file-kind.js';
 
 export const workspaceFeature = {
-  isExcalidrawFile(filePath) {
-    return isExcalidrawFilePath(filePath);
-  },
-
-  isBaseFile(filePath) {
-    return isBaseFilePath(filePath);
-  },
-
-  isDrawioFile(filePath) {
-    return isDrawioFilePath(filePath);
-  },
-
-  isImageFile(filePath) {
-    return isImageAttachmentFilePath(filePath);
-  },
-
-  isMermaidFile(filePath) {
-    return isMermaidFilePath(filePath);
-  },
-
-  isPlantUmlFile(filePath) {
-    return isPlantUmlFilePath(filePath);
-  },
-
-  createDiagramPreviewDocument(language, source = '') {
-    return this.workspacePreviewController.createDiagramPreviewDocument(language, source);
-  },
+  isBaseFile: isBaseFilePath,
+  isDrawioFile: isDrawioFilePath,
+  isExcalidrawFile: isExcalidrawFilePath,
+  isImageFile: isImageAttachmentFilePath,
+  isPdfFile: isPdfFilePath,
+  isMermaidFile: isMermaidFilePath,
+  isPlantUmlFile: isPlantUmlFilePath,
+  isStructurizrWorkspaceFile: isStructurizrFilePath,
 
   getPreviewSource() {
     const previewDocument = this.getStaticPreviewDocument?.();
     const previewFilePath = previewDocument?.currentFilePath ?? previewDocument?.filePath ?? null;
     if (previewDocument && previewFilePath && previewFilePath === this.currentFilePath) {
       if (this.isMermaidFile(this.currentFilePath)) {
-        return this.createDiagramPreviewDocument('mermaid', previewDocument.content);
+        return this.workspacePreviewController.createDiagramPreviewDocument('mermaid', previewDocument.content);
       }
 
       if (this.isPlantUmlFile(this.currentFilePath)) {
-        return this.createDiagramPreviewDocument('plantuml', previewDocument.content);
+        return this.workspacePreviewController.createDiagramPreviewDocument('plantuml', previewDocument.content);
       }
 
       return String(previewDocument.content ?? '');
@@ -82,7 +65,7 @@ export const workspaceFeature = {
 
   supportsFileHistory(filePath) {
     const kind = getVaultFileKind(filePath);
-    return kind !== null && kind !== 'image';
+    return kind !== null && kind !== 'image' && kind !== 'pdf';
   },
 
   getDisplayName(filePath) {
@@ -91,14 +74,6 @@ export const workspaceFeature = {
       .pop());
   },
 
-  resetPreviewMode() {
-    this.workspacePreviewController.resetPreviewMode();
-  },
-
-  syncFileChrome(filePath, options = {}) {
-    this.workspacePreviewController.syncFileChrome(filePath, options);
-  },
-
   handleLayoutViewRequest(view) {
     if (!this.currentFilePath || !this.isDrawioFile(this.currentFilePath)) {
       return true;
@@ -125,24 +100,22 @@ export const workspaceFeature = {
     return false;
   },
 
-  renderExcalidrawFilePreview(filePath) {
-    this.workspacePreviewController.renderExcalidrawFilePreview(filePath);
-  },
-
-  renderDrawioFilePreview(filePath) {
-    this.workspacePreviewController.renderDrawioFilePreview(filePath);
+  renderBaseFilePreview(filePath, options) {
+    clearTimeout(this._basePreviewRenderTimer);
+    this._basePreviewRenderTimer = null;
+    return this.workspacePreviewController.renderBaseFilePreview(filePath, options);
   },
 
-  renderImageFilePreview(filePath) {
-    this.workspacePreviewController.renderImageFilePreview(filePath);
-  },
-
-  renderBaseFilePreview(filePath) {
-    return this.workspacePreviewController.renderBaseFilePreview(filePath);
-  },
-
-  renderTextFilePreview(payload) {
-    this.workspacePreviewController.renderTextFilePreview(payload);
+  scheduleBaseFilePreview(filePath, options) {
+    const loadToken = this.sessionLoadToken;
+    clearTimeout(this._basePreviewRenderTimer);
+    this._basePreviewRenderTimer = setTimeout(() => {
+      this._basePreviewRenderTimer = null;
+      if (filePath !== this.currentFilePath || loadToken !== this.sessionLoadToken) {
+        return;
+      }
+      void this.renderBaseFilePreview(filePath, options);
+    }, 180);
   },
 
   createResizeHandler() {
@@ -187,10 +160,6 @@ export const workspaceFeature = {
     });
   },
 
-  async handleHashChange() {
-    await this.workspaceRouteController.handleHashChange();
-  },
-
   showEmptyState() {
     clearTimeout(this._previewLayoutSyncTimer);
     this._previewLayoutSyncTimer = null;
@@ -207,30 +176,4 @@ export const workspaceFeature = {
     this.workspaceRouteController.showDiffState();
   },
 
-  async openFile(filePath) {
-    await this.workspaceRouteController.openFile(filePath);
-  },
-
-  cleanupSession() {
-    this.workspaceRouteController.cleanupSession();
-  },
-
-  handleWikiLinkClick(target) {
-    this.wikiLinkFileController.handleWikiLinkClick(target);
-  },
-
-  normalizeNewWikiFilePath(target) {
-    return this.wikiLinkFileController.normalizeNewWikiFilePath(target);
-  },
-
-  async createAndOpenFile(filePath, displayName) {
-    await this.wikiLinkFileController.createAndOpenFile(filePath, displayName);
-  },
-
-  handleFileSelection(filePath, { closeSidebarOnMobile = false, revealInTree = false } = {}) {
-    this.workspaceRouteController.handleFileSelection(filePath, {
-      closeSidebarOnMobile,
-      revealInTree,
-    });
-  },
 };

package/src/client/application/app-shell-elements.js

@@ -6,10 +6,13 @@ export function bindAppShellElements(doc = document) {
     chatForm: doc.getElementById('chatForm'),
     chatInput: doc.getElementById('chatInput'),
     chatMessages: doc.getElementById('chatMessages'),
-    chatNotificationButton: doc.getElementById('chatNotificationBtn'),
     chatPanel: doc.getElementById('chatPanel'),
+    chatCloseButton: doc.getElementById('chatCloseBtn'),
     chatStatus: doc.getElementById('chatStatus'),
     chatToastContainer: doc.getElementById('chatToastContainer'),
+    chatNotificationButton: doc.getElementById('chatNotificationBtn'),
+    chatNotificationMuteButton: doc.getElementById('chatNotificationMuteBtn'),
+    chatNotificationStatus: doc.getElementById('chatNotificationStatus'),
     chatToggleBadge: doc.getElementById('chatToggleBadge'),
     chatToggleButton: doc.getElementById('chatToggleBtn'),
     gitCommitCancel: doc.getElementById('gitCommitCancel'),
@@ -57,17 +60,21 @@ export function bindAppShellElements(doc = document) {
     presencePanelList: doc.getElementById('presencePanelList'),
     presencePanelStatus: doc.getElementById('presencePanelStatus'),
     searchFilesButton: doc.getElementById('searchFilesBtn'),
+    toolbarSearchButton: doc.getElementById('toolbarSearchBtn'),
     shareButton: doc.getElementById('shareBtn'),
     toastContainer: doc.getElementById('toastContainer'),
     toggleWrapButton: doc.getElementById('toggleWrapBtn'),
+    toggleVimModeButton: doc.getElementById('toggleVimModeBtn'),
     userAvatars: doc.getElementById('userAvatars'),
     userCount: doc.getElementById('userCount'),
     wrapToggleLabel: doc.getElementById('wrapToggleLabel'),
+    vimModeToggleLabel: doc.getElementById('vimModeToggleLabel'),
     activeFileName: doc.getElementById('activeFileName'),
     sidebarToggle: doc.getElementById('sidebarToggle'),
     sidebarClose: doc.getElementById('sidebarClose'),
     sidebarBackdrop: doc.getElementById('sidebarBackdrop'),
     sidebar: doc.getElementById('sidebar'),
+    sidebarResizer: doc.getElementById('sidebarResizer'),
     emptyState: doc.getElementById('emptyState'),
     emptyStateNewFileBtn: doc.getElementById('emptyStateNewFileBtn'),
     emptyStateSearchBtn: doc.getElementById('emptyStateSearchBtn'),
@@ -90,6 +97,7 @@ export function bindAppShellElements(doc = document) {
     toolbarDiffBadge: doc.getElementById('toolbarDiffBadge'),
     toolbarOverflowMenu: doc.getElementById('toolbarOverflowMenu'),
     toolbarOverflowToggle: doc.getElementById('toolbarOverflowToggle'),
+    toolbarViewToggle: doc.getElementById('toolbarViewToggle'),
     sidebarTabs: doc.getElementById('sidebarTabs'),
   };
 }

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({
@@ -80,7 +81,6 @@ export class DiagramChrome {
     this.shellControllers = new WeakMap();
     this.shellViewStates = new WeakMap();
     this.shellRefits = new WeakMap();
-    this.resizeFrameId = null;
   }
 
   destroy() {
@@ -89,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;
   }
 
@@ -186,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);
@@ -282,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' });
@@ -470,11 +454,11 @@ export class DiagramChrome {
     }
 
     let currentZoom = zoomPolicy.default;
-    let defaultZoom = 1;
     let zoomAnimationFrameId = null;
+    let zoomAnimationTarget = null;
     let resetZoomFrameId = null;
-    let layoutFrameId = null;
     let replacementFrameId = null;
+    let pinchState = null;
     let hasManualZoom = Boolean(
       previousViewState?.hasManualZoom
       || previousViewState?.scrollLeft > 0
@@ -484,15 +468,7 @@ export class DiagramChrome {
     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 = () => {
@@ -518,52 +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';
     };
 
-    // ponytail: size from the current viewport for the first paint; hidden shells refit later.
     const initialZoom = hasRestorableViewState
       ? clamp(previousViewState.zoom, zoomPolicy.min, zoomPolicy.max)
       : hasInitialViewport
       ? clamp(previousViewportWidth / baseWidth, zoomPolicy.min, zoomPolicy.fitMax)
       : zoomPolicy.default;
-    applyZoom(initialZoom);
 
     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);
 
@@ -573,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;
@@ -610,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 });
     });
@@ -660,82 +735,6 @@ 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;
     const nextChildren = sourceNode ? [sourceNode, toolbar, frame] : [toolbar, frame];
@@ -789,16 +788,12 @@ export class DiagramChrome {
 
     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);
         }