Function toggleMultiSelect

packages/overlay/src/selection.ts:796–864

Shift+click: toggle an element in/out of multi-select

(el: HTMLElement)

/** Shift+click: toggle an element in/out of multi-select */
function toggleMultiSelect(el: HTMLElement): void {
  if (multiSelected.has(el)) {
    // Remove from multi-select
    multiSelected.delete(el);
    if (multiSelected.size === 1) {
      // Collapse back to single select
      const [remainEl, entry] = [...multiSelected.entries()][0];
      multiSelected.clear();
      clearMultiSelection();
      selectedElement = remainEl;
      currentSelection = entry.info;
      const rect = remainEl.getBoundingClientRect();
      showSelectionOverlay(rect, currentSelection);
      inspect(remainEl, currentSelection);
      if (selectionLabel) {
        const pathText = entry.info.filePath ? `${entry.info.filePath}:${entry.info.lineNumber}` : "";
        selectionLabel.innerHTML = `<span class="comp-name">${entry.info.componentName}</span>${pathText ? `<span class="comp-path">${pathText}</span>` : ""}`;
      }
      updateComponentDetail({
        tagName: entry.info.tagName,
        componentName: entry.info.componentName,
        filePath: entry.info.filePath,
        lineNumber: entry.info.lineNumber,
      });
    } else if (multiSelected.size === 0) {
      clearMultiSelection();
      clearSelection();
    } else {
      updateMultiSelectionHighlights();
      if (selectionLabel) {
        selectionLabel.innerHTML = `<span class="comp-name">${multiSelected.size} elements selected</span>`;
      }
    }
    return;
  }

  // Add to multi-select
  const resolved = resolveComponentSync(el);
  if (!resolved) return;

  // If there's a current single selection, promote it to multi-select first
  if (currentSelection && selectedElement && multiSelected.size === 0) {
    multiSelected.set(selectedElement, { element: selectedElement, info: currentSelection });
    deselectProperty();
    currentSelection = null;
    selectedElement = null;
    setSelectionTarget(null);
  }

  const rect = el.getBoundingClientRect();
  const info: ComponentInfo = {
    tagName: resolved.tagName,
    componentName: resolved.componentName,
    filePath: resolved.filePath,
    lineNumber: resolved.lineNumber,
    columnNumber: resolved.columnNumber,
    stack: resolved.stack,
    boundingRect: { top: rect.top, left: rect.left, width: rect.width, height: rect.height },