collabmd 0.1.43 → 0.1.45

package/src/client/presentation/comment-ui/comment-ui-layout.js

@@ -1,9 +1,5 @@
 import {
   COMMENT_CONTROL_SLOT_HEIGHT,
-  COMMENT_PREVIEW_BADGE_MIN_WIDTH,
-  COMMENT_PREVIEW_RAIL_BREAKPOINT,
-  COMMENT_PREVIEW_RAIL_MIN_WIDTH,
-  COMMENT_PREVIEW_RAIL_SLOT_HEIGHT,
   COMMENT_SELECTION_CHIP_GAP,
   clamp,
   createCommentMarkerContent,
@@ -17,59 +13,21 @@ import {
   toRelativeRect,
 } from './comment-ui-shared.js';
 
+function setInteractionClasses(element, isActive, isHovered) {
+  element.classList.toggle('is-active', isActive);
+  element.classList.toggle('is-hovered', isHovered);
+  element.classList.toggle('is-passive', !isActive && !isHovered);
+}
+
 /** @this {any} */
 function refreshLayout() {
-  this.renderEditorLayer();
-  this.renderPreviewLayer();
+  const groups = this.getThreadGroups();
+  this.renderEditorLayer(groups);
+  this.renderPreviewLayer(groups);
   this.repositionActiveCard();
 }
 
 /** @this {any} */
-function syncPreviewRailLayout(maxBubbleWidth = 0) {
-  if (!this.previewElement) {
-    return false;
-  }
-
-  const shouldShowRail = this.supported && maxBubbleWidth > 0;
-  const nextReserved = 0;
-  const nextOffset = 0;
-  let reserved = nextReserved;
-  let offset = nextOffset;
-
-  if (shouldShowRail) {
-    const previewStyle = getComputedStyle(this.previewElement);
-    const currentReserved = Number.parseFloat(
-      previewStyle.getPropertyValue('--preview-comment-rail-reserved'),
-    ) || 0;
-    const currentPaddingRight = Number.parseFloat(previewStyle.paddingRight) || 0;
-    const railInset = Number.parseFloat(
-      previewStyle.getPropertyValue('--preview-comment-rail-inset'),
-    ) || 0;
-    const basePaddingRight = Math.max(currentPaddingRight - currentReserved, 0);
-    const requiredRail = Math.max(maxBubbleWidth + railInset - basePaddingRight, 0);
-    const previewContainerRect = this.previewContainer?.getBoundingClientRect();
-    const previewRect = this.previewElement.getBoundingClientRect();
-    const availableRightGutter = previewContainerRect
-      ? Math.max(previewContainerRect.right - previewRect.right, 0)
-      : 0;
-
-    offset = Math.min(availableRightGutter, requiredRail);
-    reserved = Math.max(requiredRail - offset, 0);
-  }
-
-  const nextReservedValue = `${Math.ceil(reserved)}px`;
-  const nextOffsetValue = `${Math.floor(offset)}px`;
-  const didChange = this.previewElement.style.getPropertyValue('--preview-comment-rail-reserved') !== nextReservedValue
-    || this.previewElement.style.getPropertyValue('--preview-comment-rail-offset') !== nextOffsetValue;
-
-  if (didChange) {
-    this.previewElement.style.setProperty('--preview-comment-rail-reserved', nextReservedValue);
-    this.previewElement.style.setProperty('--preview-comment-rail-offset', nextOffsetValue);
-  }
-
-  return didChange;
-}
-
 /** @this {any} */
 function scheduleLayoutRefresh() {
   if (this.layoutFrame) {
@@ -96,20 +54,29 @@ function ensureEditorLayer() {
 }
 
 /** @this {any} */
-function renderEditorLayer() {
+function renderEditorLayer(groups = this.getThreadGroups()) {
   const layer = this.ensureEditorLayer();
-  layer.replaceChildren();
 
   if (!this.supported || !this.session) {
+    if (layer.childElementCount > 0) {
+      layer.replaceChildren();
+    }
     return;
   }
 
   const containerRect = this.editorContainer?.getBoundingClientRect?.();
   if (!containerRect) {
+    if (layer.childElementCount > 0) {
+      layer.replaceChildren();
+    }
     return;
   }
 
-  const groups = this.getThreadGroups();
+  const existingBadges = new Map(
+    Array.from(layer.querySelectorAll('.comment-editor-badge'))
+      .map((button) => [button.dataset.commentEditorGroupKey, button]),
+  );
+  const visibleGroupKeys = new Set();
   const occupiedTops = [];
   groups.forEach((group) => {
     const rect = this.session.getCommentAnchorClientRect?.(group.anchor);
@@ -122,59 +89,82 @@ function renderEditorLayer() {
       return;
     }
 
-    const button = document.createElement('button');
-    button.type = 'button';
-    button.className = 'ui-state-marker ui-state-marker--comment comment-editor-badge';
-    button.dataset.count = String(group.threads.length);
+    let button = existingBadges.get(group.key);
+    if (!button) {
+      button = document.createElement('button');
+      button.type = 'button';
+      button.className = 'ui-state-marker ui-state-marker--comment comment-editor-badge';
+      button.dataset.commentEditorGroupKey = group.key;
+      button.addEventListener('pointerdown', (event) => {
+        event.preventDefault();
+      });
+      button.addEventListener('pointerenter', () => {
+        this.updateHoveredEditorGroups([button.dataset.commentEditorGroupKey]);
+      });
+      button.addEventListener('pointerleave', () => {
+        this.updateHoveredEditorGroups([]);
+      });
+      button.addEventListener('focusin', () => {
+        this.updateHoveredEditorGroups([button.dataset.commentEditorGroupKey]);
+      });
+      button.addEventListener('focusout', () => {
+        this.updateHoveredEditorGroups([]);
+      });
+      button.addEventListener('click', () => {
+        const currentGroup = button.commentGroup;
+        if (!currentGroup) {
+          return;
+        }
+        this.openThreadGroup(currentGroup, {
+          anchor: currentGroup.anchor,
+          origin: 'editor',
+          sourceRect: button.commentSourceRect,
+        });
+      });
+      layer.appendChild(button);
+    }
+
+    button.commentGroup = group;
+    button.commentSourceRect = rect;
+    if (button.dataset.count !== String(group.threads.length)) {
+      button.dataset.count = String(group.threads.length);
+      button.replaceChildren(createCommentMarkerContent(group.threads.length));
+    }
     const isActive = this.activeCard?.groupKey === group.key;
     const isHovered = this.hoveredEditorGroupKeys.includes(group.key);
-    button.classList.toggle('is-active', isActive);
-    button.classList.toggle('is-hovered', isHovered);
-    button.classList.toggle('is-passive', !isActive && !isHovered);
+    setInteractionClasses(button, isActive, isHovered);
     button.setAttribute('aria-label', `${group.threads.length} comment thread${group.threads.length === 1 ? '' : 's'}`);
-    button.appendChild(createCommentMarkerContent(group.threads.length));
     const top = Math.max(relativeRect.top, 8);
     button.style.top = `${top}px`;
     button.style.left = `${Math.max(containerRect.width - 36, 8)}px`;
     button.title = `${group.threads.length} comment${group.threads.length === 1 ? '' : 's'}`;
-    button.addEventListener('pointerdown', (event) => {
-      event.preventDefault();
-    });
-    button.addEventListener('pointerenter', () => {
-      this.updateHoveredEditorGroups([group.key]);
-    });
-    button.addEventListener('pointerleave', () => {
-      this.updateHoveredEditorGroups([]);
-    });
-    button.addEventListener('focusin', () => {
-      this.updateHoveredEditorGroups([group.key]);
-    });
-    button.addEventListener('focusout', () => {
-      this.updateHoveredEditorGroups([]);
-    });
-    button.addEventListener('click', () => {
-      this.openThreadGroup(group, {
-        anchor: group.anchor,
-        origin: 'editor',
-        sourceRect: rect,
-      });
-    });
-    layer.appendChild(button);
+    visibleGroupKeys.add(group.key);
     occupiedTops.push(top);
   });
 
+  existingBadges.forEach((button, groupKey) => {
+    if (!visibleGroupKeys.has(groupKey)) {
+      button.remove();
+    }
+  });
+
+  let button = layer.querySelector('.comment-selection-chip');
+
   if (!this.committedSelectionAnchor || this.activeCard?.mode === 'create') {
+    button?.remove();
     return;
   }
 
   const rect = this.session.getCommentAnchorClientRect?.(this.committedSelectionAnchor);
   const chipRect = this.session.getSelectionChipClientRect?.(this.committedSelectionAnchor) ?? rect;
   if (!chipRect) {
+    button?.remove();
     return;
   }
 
   const relativeRect = toRelativeRect(chipRect, containerRect);
   if (relativeRect.bottom < 0 || relativeRect.top > containerRect.height) {
+    button?.remove();
     return;
   }
 
@@ -186,18 +176,20 @@ function renderEditorLayer() {
       Math.max(containerRect.height - COMMENT_CONTROL_SLOT_HEIGHT, 8),
     );
   }
-  const button = document.createElement('button');
-  button.type = 'button';
-  button.className = 'ui-selection-pill ui-selection-pill--comment comment-selection-chip';
-  button.textContent = 'Comment';
+  if (!button) {
+    button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'ui-selection-pill ui-selection-pill--comment comment-selection-chip';
+    button.textContent = 'Comment';
+    button.addEventListener('pointerdown', (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      this.openComposerForSelection('editor', button.getBoundingClientRect());
+    });
+    layer.appendChild(button);
+  }
   button.style.top = `${chipTop}px`;
   button.style.right = `${COMMENT_SELECTION_CHIP_GAP}px`;
-  button.addEventListener('pointerdown', (event) => {
-    event.preventDefault();
-    event.stopPropagation();
-    this.openComposerForSelection('editor', button.getBoundingClientRect());
-  });
-  layer.appendChild(button);
 }
 
 /** @this {any} */
@@ -217,25 +209,121 @@ function ensurePreviewLayer() {
 }
 
 /** @this {any} */
-function renderPreviewLayer() {
+function syncPreviewSelectionButton(previewRect) {
+  let button = this.previewLayer?.querySelector('.comment-preview-selection-chip');
+  const previewSelection = this.activeCard?.mode !== 'create' ? this.previewSelection : null;
+  if (!previewSelection) {
+    button?.remove();
+    return;
+  }
+
+  const selectionRect = createRectFromRects(Array.from(previewSelection.range?.getClientRects?.() ?? []))
+    || previewSelection.rect;
+  if (!selectionRect) {
+    button?.remove();
+    return;
+  }
+
+  if (!button) {
+    button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'ui-chip-button ui-chip-button--comment comment-preview-selection-chip';
+    button.textContent = 'Comment';
+    button.setAttribute('aria-label', 'Comment on selected preview text');
+    button.addEventListener('pointerdown', (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+    });
+    button.addEventListener('click', () => {
+      this.openComposerForSelection(
+        'preview',
+        button.getBoundingClientRect(),
+        button.previewSelection,
+      );
+    });
+    this.previewLayer?.appendChild(button);
+  }
+
+  button.previewSelection = previewSelection;
+  button.style.left = `${clamp(
+    selectionRect.left - previewRect.left,
+    8,
+    Math.max(this.previewElement.clientWidth - 88, 8),
+  )}px`;
+  button.style.top = `${clamp(
+    selectionRect.bottom - previewRect.top + 8,
+    8,
+    Math.max(this.previewElement.clientHeight - COMMENT_CONTROL_SLOT_HEIGHT, 8),
+  )}px`;
+}
+
+/** @this {any} */
+function renderPreviewLayer(groups = this.getThreadGroups()) {
   this.ensurePreviewLayer();
-  this.previewLayer?.replaceChildren();
-  this.previewHighlightLayer?.replaceChildren();
 
   if (!this.supported || !this.previewElement) {
+    if (this.previewLayer?.childElementCount > 0) {
+      this.previewLayer.replaceChildren();
+    }
+    if (this.previewHighlightLayer?.childElementCount > 0) {
+      this.previewHighlightLayer.replaceChildren();
+    }
     this.previewHoverRegions = [];
-    this.syncPreviewRailLayout(0);
     return;
   }
 
   const previewRect = this.previewElement.getBoundingClientRect();
-  const groups = this.getThreadGroups();
-  const occupiedTops = [];
+  const targetContext = {
+    diagramShells: Array.from(this.previewElement.querySelectorAll('.mermaid-shell, .plantuml-shell')),
+    sourceBlocks: Array.from(this.previewElement.querySelectorAll('[data-source-line]'))
+      .filter((element) => isLeafSourceBlock(element)),
+  };
+  const existingHighlights = new Map(
+    Array.from(this.previewHighlightLayer?.querySelectorAll('[data-comment-preview-highlight-key]') ?? [])
+      .map((highlight) => [highlight.dataset.commentPreviewHighlightKey, highlight]),
+  );
+  const visibleHighlightKeys = new Set();
+  const renderHighlight = ({ groupKey = '', isActive, isHovered, key, rect }) => {
+    let highlight = existingHighlights.get(key);
+    if (!highlight) {
+      highlight = document.createElement('div');
+      highlight.className = 'comment-preview-highlight';
+      highlight.dataset.commentPreviewHighlightKey = key;
+      this.previewHighlightLayer?.appendChild(highlight);
+    }
+    if (groupKey) {
+      highlight.dataset.commentPreviewGroupKey = groupKey;
+      highlight.dataset.commentPreviewGroupKeys = groupKey;
+    } else {
+      delete highlight.dataset.commentPreviewGroupKey;
+      delete highlight.dataset.commentPreviewGroupKeys;
+    }
+    setInteractionClasses(highlight, isActive, isHovered);
+    highlight.style.left = `${rect.left - previewRect.left}px`;
+    highlight.style.top = `${rect.top - previewRect.top}px`;
+    highlight.style.width = `${rect.width}px`;
+    highlight.style.height = `${rect.height}px`;
+    visibleHighlightKeys.add(key);
+  };
+
+  if (this.activeCard?.mode === 'create' && this.activeCard.origin === 'preview') {
+    const selectionRects = Array.from(this.activeCard.previewRange?.getClientRects?.() ?? []);
+    const highlightRects = selectionRects.length > 0
+      ? selectionRects
+      : [this.resolvePreviewTarget(this.activeCard.anchor, targetContext)?.bubbleRect].filter(Boolean);
+    highlightRects.forEach((rect, index) => {
+      renderHighlight({
+        isActive: true,
+        isHovered: false,
+        key: `selection:${index}`,
+        rect,
+      });
+    });
+  }
+
   const hoverRegions = [];
-  const showPassiveMarkers = this.shouldRenderPassivePreviewMarkers();
-  const previewBubbles = [];
   groups.forEach((group) => {
-    const target = this.resolvePreviewTarget(group.anchor);
+    const target = this.resolvePreviewTarget(group.anchor, targetContext);
     if (!target?.bubbleRect) {
       return;
     }
@@ -247,71 +335,26 @@ function renderPreviewLayer() {
 
     const isActive = this.activeCard?.groupKey === group.key;
     const isHovered = this.hoveredPreviewGroupKeys.includes(group.key);
-    const isEmphasized = isActive || isHovered;
 
-    target.highlightRects?.forEach((rect) => {
-      const highlight = document.createElement('div');
-      highlight.className = 'comment-preview-highlight';
-      highlight.classList.toggle('is-active', isActive);
-      highlight.classList.toggle('is-hovered', isHovered);
-      highlight.classList.toggle('is-passive', !isEmphasized);
-      highlight.style.left = `${rect.left - previewRect.left}px`;
-      highlight.style.top = `${rect.top - previewRect.top}px`;
-      highlight.style.width = `${rect.width}px`;
-      highlight.style.height = `${rect.height}px`;
-      this.previewHighlightLayer?.appendChild(highlight);
+    target.highlightRects?.forEach((rect, index) => {
+      renderHighlight({
+        groupKey: group.key,
+        isActive,
+        isHovered,
+        key: `${group.key}:highlight:${index}`,
+        rect,
+      });
     });
+  });
 
-    if (!showPassiveMarkers && !isEmphasized) {
-      return;
-    }
+  syncPreviewSelectionButton.call(this, previewRect);
 
-    const bubble = document.createElement('button');
-    bubble.type = 'button';
-    bubble.className = 'ui-state-marker ui-state-marker--comment comment-preview-badge';
-    bubble.dataset.commentPreviewGroupKeys = group.key;
-    bubble.classList.toggle('is-active', isActive);
-    bubble.classList.toggle('is-hovered', isHovered);
-    bubble.classList.toggle('is-passive', !isEmphasized);
-    bubble.setAttribute('aria-label', `${group.threads.length} comment thread${group.threads.length === 1 ? '' : 's'}`);
-    bubble.appendChild(createCommentMarkerContent(group.threads.length));
-    let bubbleTop = clamp(
-      target.bubbleRect.top - previewRect.top,
-      6,
-      Math.max(this.previewElement.clientHeight - COMMENT_PREVIEW_RAIL_SLOT_HEIGHT, 6),
-    );
-    while (occupiedTops.some((top) => Math.abs(top - bubbleTop) < (COMMENT_PREVIEW_RAIL_SLOT_HEIGHT - 4))) {
-      bubbleTop = clamp(
-        bubbleTop + COMMENT_PREVIEW_RAIL_SLOT_HEIGHT,
-        6,
-        Math.max(this.previewElement.clientHeight - COMMENT_PREVIEW_RAIL_SLOT_HEIGHT, 6),
-      );
+  existingHighlights.forEach((highlight, key) => {
+    if (!visibleHighlightKeys.has(key)) {
+      highlight.remove();
     }
-    bubble.style.top = `${bubbleTop}px`;
-    bubble.title = `${group.threads.length} comment${group.threads.length === 1 ? '' : 's'}`;
-    bubble.addEventListener('pointerdown', (event) => {
-      event.preventDefault();
-    });
-    bubble.addEventListener('click', () => {
-      this.openThreadGroup(group, {
-        anchor: group.anchor,
-        origin: 'preview',
-        sourceRect: bubble.getBoundingClientRect(),
-      });
-    });
-    this.previewLayer?.appendChild(bubble);
-    occupiedTops.push(bubbleTop);
-    previewBubbles.push(bubble);
   });
-
   this.previewHoverRegions = hoverRegions;
-  const maxBubbleWidth = previewBubbles.reduce(
-    (maxWidth, bubble) => Math.max(maxWidth, bubble.offsetWidth || COMMENT_PREVIEW_BADGE_MIN_WIDTH),
-    0,
-  );
-  if (this.syncPreviewRailLayout(maxBubbleWidth)) {
-    this.scheduleLayoutRefresh();
-  }
   if (this.lastPreviewPointerPosition) {
     this.updateHoveredPreviewGroups(
       this.getPreviewGroupKeysAtPoint(this.lastPreviewPointerPosition.x, this.lastPreviewPointerPosition.y),
@@ -319,24 +362,34 @@ function renderPreviewLayer() {
   }
 }
 
+function clearPreviewSelection() {
+  this.previewSelection = null;
+  window.getSelection()?.removeAllRanges();
+  this.scheduleLayoutRefresh();
+}
+
 /** @this {any} */
-function resolvePreviewTarget(anchor) {
+function resolvePreviewTarget(anchor, { diagramShells = null, sourceBlocks = null } = {}) {
   if (!this.previewElement || !anchor) {
     return null;
   }
 
-  const diagramShell = Array.from(this.previewElement.querySelectorAll('.mermaid-shell, .plantuml-shell'))
+  const diagramShell = (diagramShells ?? Array.from(
+    this.previewElement.querySelectorAll('.mermaid-shell, .plantuml-shell'),
+  ))
     .find((element) => overlapsAnchorRange(element, anchor));
   if (diagramShell) {
+    const rect = diagramShell.getBoundingClientRect();
     return {
-      bubbleRect: diagramShell.getBoundingClientRect(),
+      bubbleRect: rect,
       highlightRects: [],
-      hoverRects: [diagramShell.getBoundingClientRect()],
+      hoverRects: [rect],
     };
   }
 
-  const candidates = Array.from(this.previewElement.querySelectorAll('[data-source-line]'))
-    .filter((element) => isLeafSourceBlock(element) && overlapsAnchorRange(element, anchor));
+  const candidates = (sourceBlocks ?? Array.from(this.previewElement.querySelectorAll('[data-source-line]'))
+    .filter((element) => isLeafSourceBlock(element)))
+    .filter((element) => overlapsAnchorRange(element, anchor));
 
   if (anchor.kind === 'text' && anchor.quote) {
     const matches = candidates
@@ -358,10 +411,11 @@ function resolvePreviewTarget(anchor) {
     return null;
   }
 
+  const rect = fallback.getBoundingClientRect();
   return {
-    bubbleRect: fallback.getBoundingClientRect(),
+    bubbleRect: rect,
     highlightRects: [],
-    hoverRects: [fallback.getBoundingClientRect()],
+    hoverRects: [rect],
   };
 }
 
@@ -372,6 +426,9 @@ function getPreviewGroupKeysForTarget(target) {
   }
 
   const keyCarrier = target.closest?.('[data-comment-preview-group-keys]');
+  if (keyCarrier?.dataset?.commentPreviewGroupKey) {
+    return [keyCarrier.dataset.commentPreviewGroupKey];
+  }
   return serializeGroupKeys(
     String(keyCarrier?.dataset?.commentPreviewGroupKeys ?? '')
       .split(/\s+/)
@@ -407,7 +464,7 @@ function updateHoveredPreviewGroups(nextKeys = []) {
 
   this.hoveredPreviewGroupKeys = normalizedKeys;
   this.hoveredPreviewGroupKeysSignature = signature;
-  this.scheduleLayoutRefresh();
+  this.syncHoveredCommentClasses();
 }
 
 /** @this {any} */
@@ -420,21 +477,42 @@ function updateHoveredEditorGroups(nextKeys = []) {
 
   this.hoveredEditorGroupKeys = normalizedKeys;
   this.hoveredEditorGroupKeysSignature = signature;
-  this.scheduleLayoutRefresh();
+  this.syncHoveredCommentClasses();
 }
 
 /** @this {any} */
-function syncHoveredPreviewGroupsFromTarget(target) {
-  this.updateHoveredPreviewGroups(this.getPreviewGroupKeysForTarget(target));
+function syncHoveredCommentClasses() {
+  this.editorLayer?.querySelectorAll('.comment-editor-badge').forEach((button) => {
+    const groupKey = button.dataset.commentEditorGroupKey;
+    setInteractionClasses(
+      button,
+      this.activeCard?.groupKey === groupKey,
+      this.hoveredEditorGroupKeys.includes(groupKey),
+    );
+  });
+
+  const previewElements = [
+    ...Array.from(this.previewLayer?.querySelectorAll('[data-comment-preview-group-key]') ?? []),
+    ...Array.from(this.previewHighlightLayer?.querySelectorAll('[data-comment-preview-group-key]') ?? []),
+  ];
+  previewElements.forEach((element) => {
+    const groupKey = element.dataset.commentPreviewGroupKey;
+    setInteractionClasses(
+      element,
+      this.activeCard?.groupKey === groupKey,
+      this.hoveredPreviewGroupKeys.includes(groupKey),
+    );
+  });
 }
 
 /** @this {any} */
-function shouldRenderPassivePreviewMarkers() {
-  const previewWidth = this.previewContainer?.clientWidth ?? this.previewElement?.clientWidth ?? 0;
-  return window.innerWidth >= COMMENT_PREVIEW_RAIL_BREAKPOINT && previewWidth >= COMMENT_PREVIEW_RAIL_MIN_WIDTH;
+function syncHoveredPreviewGroupsFromTarget(target) {
+  this.updateHoveredPreviewGroups(this.getPreviewGroupKeysForTarget(target));
 }
 
+/** @this {any} */
 export const commentUiLayoutMethods = {
+  clearPreviewSelection,
   ensureEditorLayer,
   ensurePreviewLayer,
   getPreviewGroupKeysAtPoint,
@@ -444,9 +522,8 @@ export const commentUiLayoutMethods = {
   renderPreviewLayer,
   resolvePreviewTarget,
   scheduleLayoutRefresh,
-  shouldRenderPassivePreviewMarkers,
+  syncHoveredCommentClasses,
   syncHoveredPreviewGroupsFromTarget,
-  syncPreviewRailLayout,
   updateHoveredEditorGroups,
   updateHoveredPreviewGroups,
 };