collabmd 0.1.39 → 0.1.40

package/src/client/presentation/drawio-embed-controller.js

@@ -117,7 +117,7 @@ export class DrawioEmbedController {
     this.hydrationPaused = false;
     this.instanceCounter = 0;
     this.maximizedEntry = null;
-    this.maximizedRoot = null;
+    this.overlayRoot = null;
 
     this._onMessage = this._onMessage.bind(this);
     this._onKeyDown = this._onKeyDown.bind(this);
@@ -139,15 +139,20 @@ export class DrawioEmbedController {
     document.body.classList.remove('drawio-maximized-open');
     this.embedEntries.forEach((entry) => entry.wrapper?.remove());
     this.embedEntries.clear();
-    this.maximizedRoot?.remove();
-    this.maximizedRoot = null;
+    this.overlayRoot?.remove();
+    this.overlayRoot = null;
   }
 
   detachForCommit() {
     cancelIdleRender(this.hydrationIdleId);
     this.hydrationIdleId = null;
     this.hydrationQueue = [];
+    this._exitMaximizedEntry();
+    if (this.overlayRoot) {
+      this.overlayRoot.hidden = true;
+    }
     this.embedEntries.forEach((entry) => {
+      entry.queued = false;
       entry.placeholder = null;
     });
   }
@@ -173,23 +178,25 @@ export class DrawioEmbedController {
     const nextEntries = new Map();
     descriptors.forEach((descriptor) => {
       const existingEntry = this.embedEntries.get(descriptor.key) || null;
-      const nextEntry = existingEntry
-        ? { ...existingEntry, ...descriptor }
-        : {
-          ...descriptor,
-          iframe: null,
-          imageElement: null,
-          instanceId: '',
-          queued: false,
-          viewerElement: null,
-          wrapper: null,
-        };
+      const nextEntry = existingEntry && this.entryMatchesDescriptor(existingEntry, descriptor)
+        ? existingEntry
+        : this.createEntry(descriptor);
+
+      if (existingEntry && existingEntry !== nextEntry) {
+        this.destroyEntry(existingEntry);
+      }
+
+      nextEntry.filePath = descriptor.filePath;
+      nextEntry.key = descriptor.key;
+      nextEntry.label = descriptor.label;
+      nextEntry.mode = descriptor.mode;
+      nextEntry.placeholder = descriptor.placeholder;
       nextEntries.set(descriptor.key, nextEntry);
     });
 
     this.embedEntries.forEach((entry, key) => {
       if (!nextEntries.has(key)) {
-        entry.wrapper?.remove();
+        this.destroyEntry(entry);
       }
     });
 
@@ -197,7 +204,7 @@ export class DrawioEmbedController {
 
     this.embedEntries.forEach((entry) => {
       if (entry.wrapper) {
-        entry.placeholder?.replaceWith(entry.wrapper);
+        this.attachWrapper(entry);
       } else {
         entry.queued = false;
       }
@@ -206,6 +213,29 @@ export class DrawioEmbedController {
     if (!this.hydrationPaused) {
       this.hydrateVisibleEmbeds();
     }
+
+    this.syncLayout();
+  }
+
+  createEntry(descriptor) {
+    return {
+      ...descriptor,
+      iframe: null,
+      imageElement: null,
+      inlineHeightPx: null,
+      instanceId: '',
+      queued: false,
+      viewerElement: null,
+      wrapper: null,
+    };
+  }
+
+  entryMatchesDescriptor(entry, descriptor) {
+    return Boolean(
+      entry
+        && entry.filePath === descriptor.filePath
+        && entry.mode === descriptor.mode
+    );
   }
 
   hydrateVisibleEmbeds() {
@@ -293,7 +323,7 @@ export class DrawioEmbedController {
     wrapper.append(header, iframe);
     entry.iframe = iframe;
     entry.wrapper = wrapper;
-    entry.placeholder.replaceWith(wrapper);
+    this.attachWrapper(entry);
   }
 
   async hydrateViewerEntry(entry) {
@@ -333,12 +363,14 @@ export class DrawioEmbedController {
     entry.iframe = null;
     entry.wrapper = wrapper;
     entry.viewerElement = viewerShell;
-    entry.placeholder.replaceWith(wrapper);
+    this.attachWrapper(entry);
 
     try {
       await this.renderViewerEntry(entry);
+      this.syncEntryLayout(entry);
     } catch (error) {
       this.renderViewerFallback(entry, error instanceof Error ? error.message : 'Failed to render draw.io preview');
+      this.syncEntryLayout(entry);
     }
   }
 
@@ -382,13 +414,19 @@ export class DrawioEmbedController {
       lightbox: false,
       nav: false,
       resize: false,
-      toolbar: '',
       tooltips: false,
       xml: String(content ?? ''),
     });
 
-    entry.viewerElement.replaceChildren(graphElement);
+    const viewerHost = entry.wrapper.querySelector('.drawio-viewer-shell') ?? entry.viewerElement;
+    viewerHost.replaceChildren(graphElement);
     entry.viewerElement = graphElement;
+
+    if (typeof viewer.createViewerForElement === 'function') {
+      viewer.createViewerForElement(graphElement);
+      return;
+    }
+
     viewer.processElements();
   }
 
@@ -435,7 +473,158 @@ export class DrawioEmbedController {
 
   updateLocalUser() {}
 
-  syncLayout() {}
+  syncLayout() {
+    this.embedEntries.forEach((entry) => {
+      if (entry.wrapper && !this.shouldInlineEntry(entry)) {
+        this.syncEntryLayout(entry);
+      }
+    });
+  }
+
+  attachWrapper(entry) {
+    const placeholder = entry.placeholder?.isConnected
+      ? entry.placeholder
+      : this.findPlaceholder(entry);
+
+    if (!placeholder) {
+      return;
+    }
+
+    entry.placeholder = placeholder;
+    this.syncMountedEntryMetadata(entry);
+
+    if (this.shouldInlineEntry(entry)) {
+      entry.wrapper.style.position = '';
+      entry.wrapper.style.top = '';
+      entry.wrapper.style.left = '';
+      entry.wrapper.style.width = '';
+      entry.wrapper.style.margin = '';
+      entry.wrapper.style.pointerEvents = 'auto';
+      placeholder.replaceWith(entry.wrapper);
+      entry.placeholder = null;
+      return;
+    }
+
+    const overlayRoot = this.ensureOverlayRoot();
+    overlayRoot.hidden = false;
+    if (entry.wrapper?.parentElement !== overlayRoot) {
+      overlayRoot.appendChild(entry.wrapper);
+    }
+
+    this.syncEntryLayout(entry);
+  }
+
+  destroyEntry(entry) {
+    if (this.maximizedEntry?.key === entry?.key) {
+      this._exitMaximizedEntry();
+    }
+
+    this.resetPlaceholderLayout(entry);
+    entry?.wrapper?.remove();
+    if (entry) {
+      entry.placeholder = null;
+      entry.wrapper = null;
+      entry.iframe = null;
+      entry.viewerElement = null;
+    }
+  }
+
+  findPlaceholder(entry) {
+    return this.previewElement?.querySelector?.(`.drawio-embed-placeholder[data-drawio-key="${entry.key}"]`) ?? null;
+  }
+
+  ensureOverlayRoot() {
+    if (this.overlayRoot?.isConnected && this.overlayRoot.parentElement === this.previewElement) {
+      return this.overlayRoot;
+    }
+
+    let overlayRoot = this.previewElement?.querySelector?.('[data-drawio-overlay-root="true"]');
+    if (!overlayRoot) {
+      overlayRoot = document.createElement('div');
+      overlayRoot.dataset.drawioOverlayRoot = 'true';
+      overlayRoot.className = 'drawio-embed-overlay-root';
+      this.previewElement?.appendChild(overlayRoot);
+    }
+
+    this.overlayRoot = overlayRoot;
+    return overlayRoot;
+  }
+
+  shouldInlineEntry(entry) {
+    return entry?.key === `${entry?.filePath}#file-preview`;
+  }
+
+  syncMountedEntryMetadata(entry) {
+    if (entry.wrapper) {
+      entry.wrapper.dataset.drawioKey = entry.key;
+      entry.wrapper.dataset.file = entry.filePath;
+      entry.wrapper.classList.toggle('is-direct-file', this.shouldInlineEntry(entry));
+    }
+
+    if (entry.iframe) {
+      entry.iframe.title = `draw.io: ${entry.filePath}`;
+    }
+  }
+
+  resetPlaceholderLayout(entry) {
+    if (!entry?.placeholder?.isConnected || this.shouldInlineEntry(entry)) {
+      return;
+    }
+
+    entry.placeholder.classList.remove('is-hydrated');
+    entry.placeholder.removeAttribute('data-drawio-hydrated');
+    entry.placeholder.style.height = '';
+    entry.placeholder.style.pointerEvents = '';
+  }
+
+  syncEntryLayout(entry) {
+    if (!entry?.wrapper || this.shouldInlineEntry(entry)) {
+      return;
+    }
+
+    const placeholder = entry.placeholder?.isConnected
+      ? entry.placeholder
+      : this.findPlaceholder(entry);
+
+    if (!placeholder) {
+      return;
+    }
+
+    entry.placeholder = placeholder;
+    placeholder.classList.add('is-hydrated');
+    placeholder.dataset.drawioHydrated = 'true';
+    placeholder.style.pointerEvents = 'none';
+
+    const isMaximized = entry.wrapper.classList.contains('is-maximized');
+    const wrapperHeight = entry.wrapper.offsetHeight
+      || Math.ceil(entry.wrapper.getBoundingClientRect?.().height || 0)
+      || entry.inlineHeightPx
+      || 420;
+
+    if (!isMaximized) {
+      entry.inlineHeightPx = wrapperHeight;
+    }
+
+    placeholder.style.height = `${Math.ceil(entry.inlineHeightPx || wrapperHeight)}px`;
+    entry.wrapper.style.pointerEvents = 'auto';
+
+    if (isMaximized) {
+      entry.wrapper.style.position = '';
+      entry.wrapper.style.top = '';
+      entry.wrapper.style.left = '';
+      entry.wrapper.style.width = 'auto';
+      entry.wrapper.style.height = 'auto';
+      entry.wrapper.style.minHeight = '0';
+      entry.wrapper.style.margin = '';
+      return;
+    }
+
+    entry.wrapper.style.position = 'absolute';
+    entry.wrapper.style.top = `${placeholder.offsetTop}px`;
+    entry.wrapper.style.left = `${placeholder.offsetLeft}px`;
+    entry.wrapper.style.width = `${placeholder.offsetWidth}px`;
+    entry.wrapper.style.margin = '0';
+  }
 
   createOpenButton(entry) {
     const button = document.createElement('button');
@@ -482,23 +671,6 @@ export class DrawioEmbedController {
     return button;
   }
 
-  _ensureMaximizedRoot() {
-    if (this.maximizedRoot?.isConnected && this.maximizedRoot.parentElement === document.body) {
-      return this.maximizedRoot;
-    }
-
-    let maximizedRoot = document.body.querySelector('[data-drawio-maximized-root="true"]');
-    if (!maximizedRoot) {
-      maximizedRoot = document.createElement('div');
-      maximizedRoot.dataset.drawioMaximizedRoot = 'true';
-      maximizedRoot.className = 'drawio-maximized-root';
-      document.body.appendChild(maximizedRoot);
-    }
-
-    this.maximizedRoot = maximizedRoot;
-    return maximizedRoot;
-  }
-
   _enterMaximizedEntry(entry, wrapper = entry?.wrapper) {
     if (!entry?.wrapper || entry.wrapper !== wrapper) {
       return;
@@ -510,26 +682,23 @@ export class DrawioEmbedController {
 
     this._exitMaximizedEntry();
 
-    const maximizedRoot = this._ensureMaximizedRoot();
-    const parent = entry.wrapper.parentElement;
-    if (!parent) {
-      return;
+    if (entry.wrapper.parentElement) {
+      const spacer = document.createElement('div');
+      spacer.className = 'drawio-maximize-spacer';
+      spacer.style.height = `${Math.ceil(entry.wrapper.getBoundingClientRect().height)}px`;
+      entry.maximizeSpacer = spacer;
+      entry.wrapper.parentElement.insertBefore(spacer, entry.wrapper);
     }
 
-    const spacer = document.createElement('div');
-    spacer.className = 'drawio-maximize-spacer';
-    spacer.style.height = `${Math.ceil(entry.wrapper.getBoundingClientRect().height)}px`;
-
-    entry.maximizeSpacer = spacer;
-    entry.restoreParent = parent;
-    entry.restoreNextSibling = entry.wrapper.nextSibling || null;
-    parent.insertBefore(spacer, entry.wrapper);
-
-    maximizedRoot.hidden = false;
-    maximizedRoot.appendChild(entry.wrapper);
     entry.wrapper.classList.add('is-maximized');
+    entry.wrapper.dataset.drawioMaximized = 'true';
+    entry.wrapper.style.width = 'auto';
+    entry.wrapper.style.height = 'auto';
+    entry.wrapper.style.minHeight = '0';
     document.body.classList.add('drawio-maximized-open');
     this.maximizedEntry = entry;
+    this.overlayRoot?.classList.add('has-maximized-entry');
+    this.syncEntryLayout(entry);
   }
 
   _exitMaximizedEntry() {
@@ -540,17 +709,15 @@ export class DrawioEmbedController {
       return;
     }
 
-    const { maximizeSpacer, restoreNextSibling, restoreParent } = entry;
+    const { maximizeSpacer } = entry;
     entry.wrapper.classList.remove('is-maximized');
+    delete entry.wrapper.dataset.drawioMaximized;
+    entry.wrapper.style.width = '';
+    entry.wrapper.style.height = '';
+    entry.wrapper.style.minHeight = '';
 
     if (maximizeSpacer?.parentElement) {
-      maximizeSpacer.replaceWith(entry.wrapper);
-    } else if (restoreParent?.isConnected) {
-      if (restoreNextSibling?.parentElement === restoreParent) {
-        restoreParent.insertBefore(entry.wrapper, restoreNextSibling);
-      } else {
-        restoreParent.appendChild(entry.wrapper);
-      }
+      maximizeSpacer.remove();
     }
 
     entry.maximizeSpacer = null;
@@ -558,9 +725,8 @@ export class DrawioEmbedController {
     entry.restoreNextSibling = null;
     this.maximizedEntry = null;
     document.body.classList.remove('drawio-maximized-open');
-    if (this.maximizedRoot && this.maximizedRoot.childElementCount === 0) {
-      this.maximizedRoot.hidden = true;
-    }
+    this.overlayRoot?.classList.remove('has-maximized-entry');
+    this.syncEntryLayout(entry);
   }
 
   _syncMaximizeButtons() {

package/src/client/presentation/excalidraw-embed-controller.js

@@ -76,7 +76,6 @@ export class ExcalidrawEmbedController {
     this.isLargeDocument = false;
     this.maximizedEmbed = null;
     this.overlayRoot = null;
-    this.maximizedRoot = null;
     this.warmCacheRoot = null;
     this.warmEntry = null;
     this.placeholderObserver = null;
@@ -122,8 +121,6 @@ export class ExcalidrawEmbedController {
     this.followedPeerIdsByFilePath.clear();
     this.overlayRoot?.remove();
     this.overlayRoot = null;
-    this.maximizedRoot?.remove();
-    this.maximizedRoot = null;
     this.warmCacheRoot?.remove();
     this.warmCacheRoot = null;
   }
@@ -159,9 +156,6 @@ export class ExcalidrawEmbedController {
     if (this.overlayRoot) {
       this.overlayRoot.hidden = true;
     }
-    if (this.maximizedRoot) {
-      this.maximizedRoot.hidden = true;
-    }
 
     this.embedEntries.forEach((entry) => {
       entry.queued = false;
@@ -718,7 +712,10 @@ export class ExcalidrawEmbedController {
     const resizer = document.createElement('div');
     resizer.className = 'excalidraw-embed-resizer';
     resizer.title = 'Drag to resize';
-    this._setupResizer(resizer, iframe, () => this._syncEntryLayout(entry));
+    this._setupResizer(resizer, iframe, () => {
+      this._syncEntryLayout(entry);
+      this._requestPreviewViewportFit(entry);
+    });
 
     wrapper.append(header, iframe, resizer);
 
@@ -737,12 +734,13 @@ export class ExcalidrawEmbedController {
       wrapper.classList.remove('is-maximized');
       syncMaximizeButtonState();
       document.body.classList.remove('excalidraw-maximized-open');
-      this._restoreWrapperMount(entry);
+      this._restoreMaximizedEntryLayout(entry);
       iframe.style.height = restoreHeight;
       if (this.maximizedEmbed?.wrapper === wrapper) {
         this.maximizedEmbed = null;
       }
       this._syncEntryLayout(entry);
+      this._requestPreviewViewportFit(entry);
     };
 
     const enterMaximize = () => {
@@ -750,12 +748,13 @@ export class ExcalidrawEmbedController {
       this._exitMaximizedEmbed();
       isMaximized = true;
       restoreHeight = iframe.style.height || `${DEFAULT_HEIGHT}px`;
-      this._mountWrapperInMaximizedRoot(entry);
+      this._enterMaximizedEntryLayout(entry);
       wrapper.classList.add('is-maximized');
       syncMaximizeButtonState();
       document.body.classList.add('excalidraw-maximized-open');
       this.maximizedEmbed = { wrapper, exit: exitMaximize };
       this._syncEntryLayout(entry);
+      this._requestPreviewViewportFit(entry);
     };
 
     maxBtn.addEventListener('click', () => {
@@ -845,23 +844,6 @@ export class ExcalidrawEmbedController {
     return overlayRoot;
   }
 
-  _ensureMaximizedRoot() {
-    if (this.maximizedRoot?.isConnected && this.maximizedRoot.parentElement === document.body) {
-      return this.maximizedRoot;
-    }
-
-    let maximizedRoot = document.body.querySelector('[data-excalidraw-maximized-root="true"]');
-    if (!maximizedRoot) {
-      maximizedRoot = document.createElement('div');
-      maximizedRoot.dataset.excalidrawMaximizedRoot = 'true';
-      maximizedRoot.className = 'excalidraw-maximized-root';
-      document.body.appendChild(maximizedRoot);
-    }
-
-    this.maximizedRoot = maximizedRoot;
-    return maximizedRoot;
-  }
-
   _isFilePreviewEntry(entry) {
     return entry?.key === `${entry?.filePath}#file-preview`;
   }
@@ -1042,53 +1024,47 @@ export class ExcalidrawEmbedController {
     entry.placeholder.style.pointerEvents = '';
   }
 
-  _mountWrapperInMaximizedRoot(entry) {
+  _enterMaximizedEntryLayout(entry) {
     if (!entry?.wrapper) {
       return;
     }
 
-    const maximizedRoot = this._ensureMaximizedRoot();
-    maximizedRoot.hidden = false;
-    entry.restoreParent = entry.wrapper.parentElement || null;
-    entry.restoreNextSibling = entry.wrapper.nextSibling || null;
+    if (this._shouldInlineFilePreview(entry) && entry.wrapper.parentElement && !entry.maximizeSpacer) {
+      const spacer = document.createElement('div');
+      spacer.className = 'excalidraw-maximize-spacer';
+      spacer.style.height = `${Math.ceil(entry.wrapper.getBoundingClientRect().height)}px`;
+      entry.maximizeSpacer = spacer;
+      entry.wrapper.parentElement.insertBefore(spacer, entry.wrapper);
+    }
+
+    entry.wrapper.dataset.excalidrawMaximized = 'true';
     entry.wrapper.style.position = '';
     entry.wrapper.style.top = '';
     entry.wrapper.style.left = '';
-    entry.wrapper.style.width = '';
-    entry.wrapper.style.margin = '';
-    if (entry.wrapper.parentElement !== maximizedRoot) {
-      maximizedRoot.appendChild(entry.wrapper);
-    }
+    entry.wrapper.style.width = 'auto';
+    entry.wrapper.style.height = 'auto';
+    entry.wrapper.style.minHeight = '0';
+    entry.wrapper.style.margin = '0';
+    this.overlayRoot?.classList.add('has-maximized-entry');
   }
 
-  _restoreWrapperMount(entry) {
+  _restoreMaximizedEntryLayout(entry) {
     if (!entry?.wrapper) {
       return;
     }
 
-    if (this._shouldInlineFilePreview(entry)) {
-      const { restoreParent, restoreNextSibling } = entry;
-      if (restoreParent?.isConnected) {
-        if (restoreNextSibling?.parentElement === restoreParent) {
-          restoreParent.insertBefore(entry.wrapper, restoreNextSibling);
-        } else {
-          restoreParent.appendChild(entry.wrapper);
-        }
-      }
-    } else {
-      const overlayRoot = this._ensureOverlayRoot();
-      overlayRoot.hidden = false;
-      if (entry.wrapper.parentElement !== overlayRoot) {
-        overlayRoot.appendChild(entry.wrapper);
-      }
-    }
-
-    entry.restoreParent = null;
-    entry.restoreNextSibling = null;
+    const { maximizeSpacer } = entry;
+    delete entry.wrapper.dataset.excalidrawMaximized;
+    entry.wrapper.style.width = '';
+    entry.wrapper.style.height = '';
+    entry.wrapper.style.minHeight = '';
 
-    if (this.maximizedRoot && this.maximizedRoot.childElementCount === 0) {
-      this.maximizedRoot.hidden = true;
+    if (maximizeSpacer?.parentElement) {
+      maximizeSpacer.remove();
     }
+
+    entry.maximizeSpacer = null;
+    this.overlayRoot?.classList.remove('has-maximized-entry');
   }
 
   _syncEntryLayout(entry) {
@@ -1133,8 +1109,10 @@ export class ExcalidrawEmbedController {
       entry.wrapper.style.position = '';
       entry.wrapper.style.top = '';
       entry.wrapper.style.left = '';
-      entry.wrapper.style.width = '';
-      entry.wrapper.style.margin = '';
+      entry.wrapper.style.width = 'auto';
+      entry.wrapper.style.height = 'auto';
+      entry.wrapper.style.minHeight = '0';
+      entry.wrapper.style.margin = '0';
       return;
     }
 
@@ -1142,6 +1120,8 @@ export class ExcalidrawEmbedController {
     entry.wrapper.style.top = `${placeholder.offsetTop}px`;
     entry.wrapper.style.left = `${placeholder.offsetLeft}px`;
     entry.wrapper.style.width = `${placeholder.offsetWidth}px`;
+    entry.wrapper.style.height = '';
+    entry.wrapper.style.minHeight = '';
     entry.wrapper.style.margin = '0';
   }
 
@@ -1240,6 +1220,17 @@ export class ExcalidrawEmbedController {
     entry?.iframe?.contentWindow?.postMessage(payload, window.location.origin);
   }
 
+  _requestPreviewViewportFit(entry) {
+    if (this._isFilePreviewEntry(entry)) {
+      return;
+    }
+
+    this._postMessageToEntry(entry, {
+      source: 'collabmd-host',
+      type: 'fit-preview-viewport',
+    });
+  }
+
   _syncEntryUser(entry, overrideUser = null) {
     const localUser = overrideUser || this.getLocalUser?.();
     if (!localUser) {