@bpmn-nova/studio 0.3.0-preview

package/dist/canvas.js

@@ -0,0 +1,943 @@
+import {
+  applyContainmentOperation,
+  clearConnectedWaypoints,
+  CONTAINMENT_LIMITS,
+  elementScopeId,
+  getNode,
+  isEmbeddedSubProcess,
+  NODE_DEFINITIONS,
+  resolveContainment,
+  snapNodePosition,
+} from '@bpmn-nova/core';
+import { DiagramRenderer } from '@bpmn-nova/renderer';
+import { hydrateIcons } from '@bpmn-nova/icons';
+import { canCreateSequenceFlow } from './controller.js';
+import { createDefaultContextMenuRegistry } from './context-menu.js';
+import { CREATE_INTENT_MIME } from './interactions.js';
+import {
+  isMarqueeSelectableNode,
+  isSelectionLayoutNode,
+  selectedDiagramNodes,
+  selectedGroupableNodes,
+} from './selection-layout.js';
+
+function domNode(tag, className = '', text = '') {
+  const element = document.createElement(tag);
+  if (className) element.className = className;
+  if (text) element.textContent = text;
+  return element;
+}
+
+function toolbarIcon(id) {
+  const icon = domNode('span', 'nova-icon nova-icon-sm');
+  icon.dataset.icon = id;
+  return icon;
+}
+
+export class BpmnCanvas {
+  constructor({ container, studio, rendererOptions = {}, interactions = null, selectionToolbar = null, contextMenu = null, contextMenuRegistry = createDefaultContextMenuRegistry(), pointerMode = 'select', themeController = null, theme = null, onThemeChange = null } = {}) {
+    if (!container) throw new Error('BpmnCanvas requires a container.');
+    if (!studio) throw new Error('BpmnCanvas requires a studio controller.');
+    this.container = container;
+    this.studio = studio;
+    this.interactions = interactions;
+    this.selectionToolbarSlot = selectionToolbar;
+    this.contextMenuSlot = contextMenu;
+    this.contextMenuRegistry = contextMenuRegistry;
+    this.pointerMode = ['select', 'marquee', 'pan'].includes(pointerMode) ? pointerMode : 'select';
+    this._drag = null;
+    this._viewportByScope = new Map();
+    this._renderedScopeId = studio.activeScopeId;
+    const onViewportChange = rendererOptions.onViewportChange;
+    this.renderer = new DiagramRenderer(container, {
+      ...rendererOptions,
+      themeController,
+      theme,
+      onThemeChange,
+      getVisualModel: () => studio.model,
+      interactionMode: this.pointerMode,
+      model: studio.getActiveGraph(),
+      mode: 'design',
+      showEmptyState: studio.activeScopeId !== studio.model.id,
+      onCanvasClick: () => {
+        studio.cancelConnect();
+        studio.select(studio.activeScopeId === studio.model.id ? { kind: 'process', id: studio.model.id } : { kind: 'node', id: studio.activeScopeId });
+      },
+      onMarqueeSelect: (rect, options) => {
+        studio.cancelConnect();
+        studio.selectInRect(rect, options);
+      },
+      onNodeClick: (node, event) => this._handleNodeClick(node, event),
+      onNodeDoubleClick: (node) => this._enterSubProcess(node),
+      onEnterSubProcess: (node) => this._enterSubProcess(node),
+      onNodePointerDown: (node, event) => this._startNodeDrag(node, event),
+      onNodeResizePointerDown: (node, handle, event) => this._startNodeResize(node, handle, event),
+      onLaneDividerPointerDown: (lane, event) => this._startLaneDividerResize(lane, event),
+      onEdgeClick: (edge) => {
+        if (this.pointerMode === 'pan') return;
+        studio.cancelConnect();
+        studio.select({ kind: 'edge', id: edge.id });
+      },
+      onStartConnect: (node) => studio.startConnect(node.id),
+      canConnect: (source, target) => canCreateSequenceFlow(studio.model, source.id, target.id),
+      onQuickAdd: (source, type, preset) => studio.commands.quickAdd(source.id, type, preset),
+      onDeleteNode: (node) => studio.commands.remove({ kind: 'node', id: node.id }),
+      onUngroup: (node) => studio.commands.ungroup(node.id),
+      onEdgeNameChange: (edge, name) => studio.commands.updateEdge(edge.id, { name }),
+      onEdgeBendPointerDown: (edge, index, points, event) => this._startEdgeBend(edge, index, points, event),
+      onViewportChange: (viewport) => {
+        this.closeContextMenu();
+        onViewportChange?.(viewport);
+        this._positionSelectionToolbar();
+      },
+    });
+    this._buildPointerToolbar();
+    this._buildSelectionToolbar();
+    this._buildContextMenu();
+    this.renderer.setSelection(studio.selection);
+    this._offStudio = studio.subscribe((event) => this._onStudioEvent(event));
+    this._onKeyDown = (event) => this._handleKeyDown(event);
+    this._onKeyUp = (event) => {
+      if (event.code === 'Space') this.renderer.setSpacePressed(false);
+    };
+    this.container.tabIndex = this.container.tabIndex >= 0 ? this.container.tabIndex : 0;
+    this.container.addEventListener('keydown', this._onKeyDown);
+    this.container.addEventListener('keyup', this._onKeyUp);
+    this._onDragOver = (event) => this._dragOver(event);
+    this._onDrop = (event) => this._drop(event);
+    this.container.addEventListener('dragover', this._onDragOver);
+    this.container.addEventListener('drop', this._onDrop);
+    this._onContextMenu = (event) => this._handleContextMenu(event);
+    this.renderer.viewport.addEventListener('contextmenu', this._onContextMenu);
+    this._onToolbarOutside = (event) => {
+      if (!this._contextMenu?.contains(event.target)) this.closeContextMenu();
+      if (!this._selectionToolbar?.contains(event.target)) this._selectionToolbar?.querySelectorAll('details[open]').forEach((details) => { details.open = false; });
+    };
+    document.addEventListener('pointerdown', this._onToolbarOutside);
+    this._renderSelectionToolbar();
+  }
+
+  _buildPointerToolbar() {
+    const toolbar = domNode('div', 'nova-pointer-toolbar');
+    toolbar.setAttribute('role', 'toolbar');
+    toolbar.setAttribute('aria-label', '画布操作模式');
+    toolbar.addEventListener('pointerdown', (event) => event.stopPropagation());
+    this._pointerModeButtons = new Map();
+    const items = [
+      { mode: 'select', iconId: 'ui.pointer', label: '单选', title: '单选与移动节点' },
+      { mode: 'marquee', iconId: 'ui.marquee', label: '框选', title: '拖动空白区域框选节点' },
+      { mode: 'pan', iconId: 'ui.hand', label: '拖动', title: '拖动画布' },
+    ];
+    for (const item of items) {
+      const button = domNode('button', 'nova-pointer-mode');
+      button.type = 'button';
+      button.dataset.pointerMode = item.mode;
+      button.title = item.title;
+      button.setAttribute('aria-label', item.title);
+      button.append(toolbarIcon(item.iconId), domNode('span', '', item.label));
+      button.addEventListener('click', () => this.setPointerMode(item.mode));
+      toolbar.appendChild(button);
+      this._pointerModeButtons.set(item.mode, button);
+    }
+    this._pointerToolbar = toolbar;
+    this.container.appendChild(toolbar);
+    hydrateIcons(toolbar, this.renderer.iconRegistry);
+    this.setPointerMode(this.pointerMode);
+  }
+
+  setPointerMode(mode) {
+    if (!['select', 'marquee', 'pan'].includes(mode)) return false;
+    this.pointerMode = mode;
+    if (mode === 'pan') this.studio.cancelConnect();
+    this.renderer.setInteractionMode(mode);
+    this._pointerModeButtons?.forEach((button, value) => {
+      const active = value === mode;
+      button.classList.toggle('is-active', active);
+      button.setAttribute('aria-pressed', active ? 'true' : 'false');
+    });
+    return true;
+  }
+
+  getPointerMode() { return this.pointerMode; }
+
+  _buildContextMenu() {
+    this._contextMenu = domNode('div', 'nova-context-menu');
+    this._contextMenu.hidden = true;
+    this._contextMenu.setAttribute('role', 'menu');
+    this._contextMenu.setAttribute('aria-label', '画布快捷操作');
+    this._contextMenu.addEventListener('pointerdown', (event) => event.stopPropagation());
+    this._contextMenu.addEventListener('contextmenu', (event) => event.preventDefault());
+    this._contextMenu.addEventListener('keydown', (event) => this._handleContextMenuKeyDown(event));
+    this.container.appendChild(this._contextMenu);
+  }
+
+  _contextTargetFromSelection() {
+    const selection = this.studio.selection;
+    if (selection?.kind === 'multi') return { kind: 'multi', items: selection.items };
+    if (selection?.kind === 'node' && selection.id !== this.studio.activeScopeId) return { kind: 'node', id: selection.id };
+    if (selection?.kind === 'edge') return { kind: 'edge', id: selection.id };
+    return { kind: 'canvas', id: this.studio.activeScopeId };
+  }
+
+  _contextPositionForSelection() {
+    const host = this.container.getBoundingClientRect();
+    const viewport = this.renderer.viewport.getBoundingClientRect();
+    const bounds = this.studio.getSelectionBounds();
+    if (bounds) {
+      return {
+        x: viewport.left - host.left + (bounds.x + bounds.width / 2) * this.renderer.zoom + this.renderer.pan.x,
+        y: viewport.top - host.top + (bounds.y + bounds.height / 2) * this.renderer.zoom + this.renderer.pan.y,
+      };
+    }
+    return {
+      x: viewport.left - host.left + viewport.width / 2,
+      y: viewport.top - host.top + viewport.height / 2,
+    };
+  }
+
+  _handleContextMenu(event) {
+    if (event.shiftKey) {
+      this.closeContextMenu();
+      return;
+    }
+    if (event.target?.closest?.('input,textarea,select,[contenteditable="true"],.mb-quick-menu,.mb-edge-label-editor')) return;
+    event.preventDefault();
+    event.stopPropagation();
+    this._closeTransientCanvasMenus();
+    this.studio.cancelConnect();
+
+    const nodeHost = event.target?.closest?.('[data-node-id]');
+    const edgeHost = event.target?.closest?.('[data-edge-id]');
+    let target;
+    if (nodeHost?.dataset.nodeId) {
+      const nodeId = nodeHost.dataset.nodeId;
+      const selectedByMulti = this.studio.selection?.kind === 'multi'
+        && this.studio.selection.items?.some((item) => item.kind === 'node' && item.id === nodeId);
+      if (selectedByMulti) target = { kind: 'multi', items: this.studio.selection.items };
+      else {
+        target = { kind: 'node', id: nodeId };
+        this.studio.select(target);
+      }
+    } else if (edgeHost?.dataset.edgeId) {
+      target = { kind: 'edge', id: edgeHost.dataset.edgeId };
+      this.studio.select(target);
+    } else {
+      target = { kind: 'canvas', id: this.studio.activeScopeId };
+      this.studio.select(this._selectionFallback());
+    }
+    const host = this.container.getBoundingClientRect();
+    this._openContextMenu(target, { x: event.clientX - host.left, y: event.clientY - host.top }, false);
+  }
+
+  _openContextMenu(target, position, keyboard = false) {
+    this.closeContextMenu();
+    this._selectionToolbar?.querySelectorAll('details[open]').forEach((details) => { details.open = false; });
+    this.renderer.closeTransientOverlays?.();
+    const context = { studio: this.studio, canvas: this, target, selection: this.studio.selection, position };
+    const actions = this.contextMenuRegistry?.resolve?.(context) || [];
+    if (!actions.length) return false;
+    this._contextMenuState = { ...context, actions, keyboard };
+    this._contextMenuCleanup?.();
+    this._contextMenuCleanup = null;
+    this._contextMenu.replaceChildren();
+    this._contextMenu.hidden = false;
+    if (this.contextMenuSlot instanceof HTMLElement) this._contextMenu.appendChild(this.contextMenuSlot);
+    else if (typeof this.contextMenuSlot === 'function') {
+      this._contextMenuCleanup = this.contextMenuSlot({
+        container: this._contextMenu,
+        ...context,
+        actions,
+        execute: (id) => this.executeContextAction(id),
+        close: () => this.closeContextMenu({ restoreFocus: keyboard }),
+      });
+    } else this._renderDefaultContextMenu(actions);
+    hydrateIcons(this._contextMenu, this.renderer.iconRegistry);
+    this._positionContextMenu(position);
+    requestAnimationFrame(() => this._contextMenu.querySelector('button:not(:disabled)')?.focus());
+    return true;
+  }
+
+  _renderDefaultContextMenu(actions) {
+    const submenuGroups = {
+      align: { label: '对齐', iconId: 'ui.alignCenterHorizontal' },
+      distribute: { label: '等距分布', iconId: 'ui.distributeHorizontal' },
+      pointer: { label: '操作模式', iconId: 'ui.pointer' },
+    };
+    let previousGroup = null;
+    for (let index = 0; index < actions.length;) {
+      const currentGroup = actions[index].group || 'primary';
+      const grouped = [];
+      while (index < actions.length && (actions[index].group || 'primary') === currentGroup) grouped.push(actions[index++]);
+      if (previousGroup !== null) this._contextMenu.appendChild(domNode('div', 'nova-context-separator'));
+      if (submenuGroups[currentGroup]) this._contextMenu.appendChild(this._contextSubmenu(currentGroup, submenuGroups[currentGroup], grouped));
+      else for (const action of grouped) this._contextMenu.appendChild(this._contextActionButton(action));
+      previousGroup = currentGroup;
+    }
+  }
+
+  _contextActionButton(action, submenu = false) {
+    const button = domNode('button', `nova-context-item${action.danger ? ' is-danger' : ''}${action.id === `pointer.${this.pointerMode}` ? ' is-active' : ''}`);
+    button.type = 'button';
+    button.setAttribute('role', action.group === 'pointer' ? 'menuitemradio' : 'menuitem');
+    if (action.group === 'pointer') button.setAttribute('aria-checked', action.id === `pointer.${this.pointerMode}` ? 'true' : 'false');
+    button.dataset.contextAction = action.id;
+    button.disabled = Boolean(action.disabled);
+    button.append(toolbarIcon(action.iconId || 'ui.locate'), domNode('span', 'nova-context-label', action.label || action.id));
+    button.addEventListener('click', () => this.executeContextAction(action.id));
+    if (submenu) button.tabIndex = -1;
+    return button;
+  }
+
+  _contextSubmenu(group, meta, actions) {
+    const wrap = domNode('div', 'nova-context-submenu');
+    wrap.dataset.contextGroup = group;
+    const trigger = domNode('button', 'nova-context-item');
+    trigger.type = 'button';
+    trigger.setAttribute('role', 'menuitem');
+    trigger.setAttribute('aria-haspopup', 'menu');
+    trigger.setAttribute('aria-expanded', 'false');
+    trigger.append(toolbarIcon(meta.iconId), domNode('span', 'nova-context-label', meta.label), toolbarIcon('ui.chevron'));
+    const panel = domNode('div', 'nova-context-submenu-panel');
+    panel.setAttribute('role', 'menu');
+    panel.hidden = true;
+    for (const action of actions) panel.appendChild(this._contextActionButton(action, true));
+    trigger.addEventListener('click', () => panel.hidden ? this._openContextSubmenu(wrap) : this._closeContextSubmenu(wrap));
+    wrap.append(trigger, panel);
+    return wrap;
+  }
+
+  _openContextSubmenu(wrap) {
+    this._contextMenu.querySelectorAll('.nova-context-submenu').forEach((other) => {
+      if (other !== wrap) this._closeContextSubmenu(other);
+    });
+    const trigger = wrap.firstElementChild;
+    const panel = wrap.querySelector('.nova-context-submenu-panel');
+    if (!panel) return;
+    panel.hidden = false;
+    trigger?.setAttribute('aria-expanded', 'true');
+    requestAnimationFrame(() => {
+      const host = this.container.getBoundingClientRect();
+      const rect = panel.getBoundingClientRect();
+      const wrapRect = wrap.getBoundingClientRect();
+      wrap.classList.toggle('is-flipped', wrapRect.right + rect.width + 8 > host.right);
+      panel.style.maxHeight = `${Math.max(120, host.bottom - Math.max(host.top + 8, wrapRect.top) - 8)}px`;
+    });
+  }
+
+  _closeContextSubmenu(wrap) {
+    const trigger = wrap?.firstElementChild;
+    const panel = wrap?.querySelector?.('.nova-context-submenu-panel');
+    if (panel) panel.hidden = true;
+    trigger?.setAttribute?.('aria-expanded', 'false');
+  }
+
+  _contextMenuButtons(scope) {
+    return [...scope.children].map((child) => {
+      if (child.matches?.('button.nova-context-item')) return child;
+      if (child.matches?.('.nova-context-submenu')) return child.querySelector(':scope > button.nova-context-item');
+      return null;
+    }).filter((button) => button && !button.disabled);
+  }
+
+  _handleContextMenuKeyDown(event) {
+    const item = event.target?.closest?.('button.nova-context-item');
+    if (!item) return;
+    const panel = item.parentElement?.matches?.('.nova-context-submenu-panel') ? item.parentElement : this._contextMenu;
+    const buttons = this._contextMenuButtons(panel);
+    const index = buttons.indexOf(item);
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      event.preventDefault();
+      const direction = event.key === 'ArrowDown' ? 1 : -1;
+      buttons[(index + direction + buttons.length) % buttons.length]?.focus();
+    } else if (event.key === 'Home' || event.key === 'End') {
+      event.preventDefault();
+      buttons[event.key === 'Home' ? 0 : buttons.length - 1]?.focus();
+    } else if (event.key === 'ArrowRight' && item.parentElement?.matches?.('.nova-context-submenu')) {
+      event.preventDefault();
+      this._openContextSubmenu(item.parentElement);
+      item.parentElement.querySelector('.nova-context-submenu-panel button:not(:disabled)')?.focus();
+    } else if (event.key === 'ArrowLeft' && panel.matches?.('.nova-context-submenu-panel')) {
+      event.preventDefault();
+      const wrap = panel.parentElement;
+      this._closeContextSubmenu(wrap);
+      wrap.firstElementChild?.focus();
+    } else if (event.key === 'Escape') {
+      event.preventDefault();
+      this.closeContextMenu({ restoreFocus: true });
+    }
+  }
+
+  _positionContextMenu(position) {
+    requestAnimationFrame(() => {
+      if (this._contextMenu.hidden) return;
+      const width = this._contextMenu.offsetWidth || 226;
+      const height = this._contextMenu.offsetHeight || 260;
+      const maxLeft = Math.max(8, this.container.clientWidth - width - 8);
+      const maxTop = Math.max(8, this.container.clientHeight - height - 8);
+      this._contextMenu.style.left = `${Math.round(Math.max(8, Math.min(position.x, maxLeft)))}px`;
+      this._contextMenu.style.top = `${Math.round(Math.max(8, Math.min(position.y, maxTop)))}px`;
+    });
+  }
+
+  executeContextAction(id) {
+    const state = this._contextMenuState;
+    const action = state?.actions?.find((candidate) => candidate.id === id);
+    if (!action || action.disabled || typeof action.execute !== 'function') return false;
+    try { action.execute(state); }
+    finally { this.closeContextMenu(); }
+    return true;
+  }
+
+  closeContextMenu({ restoreFocus = false } = {}) {
+    if (!this._contextMenu || this._contextMenu.hidden) return false;
+    this._contextMenuCleanup?.();
+    this._contextMenuCleanup = null;
+    this._contextMenu.hidden = true;
+    this._contextMenu.replaceChildren();
+    this._contextMenuState = null;
+    if (restoreFocus) this.container.focus();
+    return true;
+  }
+
+  _closeTransientCanvasMenus() {
+    this.closeContextMenu();
+    this._selectionToolbar?.querySelectorAll('details[open]').forEach((details) => { details.open = false; });
+    this.renderer.closeTransientOverlays?.();
+  }
+
+  _onStudioEvent(event) {
+    if (['modelChanged', 'selectionChanged', 'scopeChanged'].includes(event.type)) this.closeContextMenu();
+    if (event.type === 'modelChanged') this.renderer.setModel(this.studio.getActiveGraph());
+    if (event.type === 'selectionChanged') this.renderer.setSelection(this.studio.selection);
+    if (event.type === 'connectingChanged') this.renderer.setConnectingSource(this.studio.connectingSource);
+    if (event.type === 'scopeChanged') {
+      this._viewportByScope.set(this._renderedScopeId, this.renderer.getViewportState());
+      this._renderedScopeId = this.studio.activeScopeId;
+      this.renderer.options.showEmptyState = this.studio.activeScopeId !== this.studio.model.id;
+      this.renderer.setModel(this.studio.getActiveGraph());
+      const viewport = this._viewportByScope.get(this._renderedScopeId);
+      if (viewport) this.renderer.setViewportState(viewport);
+      else this.fitView(72);
+    }
+    if (['modelChanged', 'selectionChanged', 'scopeChanged'].includes(event.type)) this._renderSelectionToolbar();
+  }
+
+  _buildSelectionToolbar() {
+    this._selectionToolbar = domNode('div', 'nova-selection-toolbar');
+    this._selectionToolbar.hidden = true;
+    this._selectionToolbar.setAttribute('role', 'toolbar');
+    this._selectionToolbar.setAttribute('aria-label', '选区布局工具栏');
+    this._selectionToolbar.addEventListener('pointerdown', (event) => event.stopPropagation());
+    this.container.appendChild(this._selectionToolbar);
+  }
+
+  _toolbarActions() {
+    return {
+      align: (alignment) => this.studio.arrangeSelection({ type: 'align', alignment }),
+      distribute: (axis) => this.studio.arrangeSelection({ type: 'distribute', axis }),
+      layout: () => this.studio.arrangeSelection({ type: 'layout' }),
+      reroute: () => this.studio.arrangeSelection({ type: 'reroute' }),
+      fit: () => this.fitSelection(),
+      group: () => this.studio.commands.groupSelection(),
+    };
+  }
+
+  _renderSelectionToolbar() {
+    if (!this._selectionToolbar) return;
+    const diagramNodes = selectedDiagramNodes(this.studio.model, this.studio.selection, this.studio.activeScopeId);
+    const nodes = diagramNodes.filter(isSelectionLayoutNode);
+    const groupableNodes = selectedGroupableNodes(this.studio.model, this.studio.selection, this.studio.activeScopeId);
+    const visible = this.studio.selection?.kind === 'multi' && diagramNodes.length >= 2;
+    this._selectionToolbar.hidden = !visible;
+    this._selectionToolbarCleanup?.();
+    this._selectionToolbarCleanup = null;
+    if (!visible) {
+      this._selectionToolbar.replaceChildren();
+      return;
+    }
+
+    const bounds = this.studio.getSelectionBounds();
+    const actions = this._toolbarActions();
+    this._selectionToolbar.replaceChildren();
+    if (this.selectionToolbarSlot) {
+      if (this.selectionToolbarSlot instanceof HTMLElement) this._selectionToolbar.appendChild(this.selectionToolbarSlot);
+      else if (typeof this.selectionToolbarSlot === 'function') {
+        this._selectionToolbarCleanup = this.selectionToolbarSlot({
+          container: this._selectionToolbar,
+          studio: this.studio,
+          canvas: this,
+          selection: this.studio.selection,
+          elements: diagramNodes,
+          bounds,
+          actions,
+        });
+      }
+      this._positionSelectionToolbar();
+      return;
+    }
+
+    const button = (id, iconId, title, action, { label = '', disabled = false, menuItem = false } = {}) => {
+      const item = domNode('button', `nova-selection-action${label ? menuItem ? ' has-menu-label' : ' has-label' : ''}`);
+      item.type = 'button';
+      item.dataset.selectionAction = id;
+      item.title = title;
+      item.setAttribute('aria-label', title);
+      item.disabled = disabled;
+      item.appendChild(toolbarIcon(iconId));
+      if (label) item.appendChild(domNode('span', '', label));
+      item.addEventListener('click', () => action());
+      return item;
+    };
+    const menu = (id, iconId, title, items, disabled = false) => {
+      const details = domNode('details', `nova-selection-menu${disabled ? ' is-disabled' : ''}`);
+      details.dataset.selectionMenu = id;
+      details.addEventListener('toggle', () => {
+        if (!details.open) return;
+        this.closeContextMenu();
+        this._selectionToolbar.querySelectorAll('details[open]').forEach((other) => {
+          if (other !== details) other.open = false;
+        });
+      });
+      const summary = domNode('summary', 'nova-selection-action');
+      summary.title = title;
+      summary.setAttribute('aria-label', title);
+      summary.append(toolbarIcon(iconId), toolbarIcon('ui.chevron'));
+      if (disabled) summary.addEventListener('click', (event) => event.preventDefault());
+      const popover = domNode('div', 'nova-selection-popover');
+      for (const item of items) popover.appendChild(button(item.id, item.iconId, item.title, () => {
+        item.action();
+        details.open = false;
+      }, { disabled: item.disabled, label: item.title, menuItem: true }));
+      details.append(summary, popover);
+      return details;
+    };
+    const separator = () => domNode('span', 'nova-selection-separator');
+    const alignmentItems = [
+      ['left', 'ui.alignLeft', '左对齐'], ['centerX', 'ui.alignCenterHorizontal', '水平居中'], ['right', 'ui.alignRight', '右对齐'],
+      ['top', 'ui.alignTop', '顶部对齐'], ['centerY', 'ui.alignCenterVertical', '垂直居中'], ['bottom', 'ui.alignBottom', '底部对齐'],
+    ].map(([value, iconId, title]) => ({ id: `align-${value}`, iconId, title, action: () => actions.align(value) }));
+    const distributeItems = [
+      { id: 'distribute-horizontal', iconId: 'ui.distributeHorizontal', title: '水平等距', action: () => actions.distribute('horizontal'), disabled: nodes.length < 3 },
+      { id: 'distribute-vertical', iconId: 'ui.distributeVertical', title: '垂直等距', action: () => actions.distribute('vertical'), disabled: nodes.length < 3 },
+    ];
+    this._selectionToolbar.append(
+      button('group', 'ui.layoutSelection', '创建分组', actions.group, { label: '创建分组', disabled: !groupableNodes.length || groupableNodes.length !== diagramNodes.length }),
+      separator(),
+      menu('align', 'ui.alignCenterHorizontal', '对齐选区', alignmentItems, nodes.length < 2),
+      menu('distribute', 'ui.distributeHorizontal', '等距分布', distributeItems, nodes.length < 3),
+      separator(),
+      button('layout', 'ui.layoutSelection', '美化选区', actions.layout, { label: '美化选区', disabled: nodes.length < 2 }),
+      button('reroute', 'ui.rerouteSelection', '优化选区连线', actions.reroute, { disabled: nodes.length < 1 }),
+      separator(),
+      button('fit', 'ui.fitSelection', '适应选区', actions.fit),
+    );
+    hydrateIcons(this._selectionToolbar, this.renderer.iconRegistry);
+    this._positionSelectionToolbar();
+  }
+
+  _positionSelectionToolbar() {
+    const toolbar = this._selectionToolbar;
+    const bounds = this.studio.getSelectionBounds();
+    if (!toolbar || toolbar.hidden || !bounds || !this.renderer) return;
+    const viewport = this.renderer.viewport.getBoundingClientRect();
+    const zoom = this.renderer.zoom;
+    const pan = this.renderer.pan;
+    const width = toolbar.offsetWidth || 252;
+    const height = toolbar.offsetHeight || 38;
+    const center = (bounds.x + bounds.width / 2) * zoom + pan.x;
+    let left = center - width / 2;
+    left = Math.max(8, Math.min(left, viewport.width - width - 8));
+    const selectionTop = bounds.y * zoom + pan.y;
+    const selectionBottom = (bounds.y + bounds.height) * zoom + pan.y;
+    let top = selectionTop - height - 10;
+    const below = top < 48;
+    if (below) top = selectionBottom + 10;
+    top = Math.max(8, Math.min(top, viewport.height - height - 8));
+    toolbar.classList.toggle('is-below', below);
+    toolbar.style.left = `${Math.round(left)}px`;
+    toolbar.style.top = `${Math.round(top)}px`;
+  }
+
+  _enterSubProcess(node) {
+    if (this.pointerMode === 'pan') return false;
+    if (!isEmbeddedSubProcess(node)) return false;
+    return this.studio.enterScope(node.id);
+  }
+
+  _selectionFallback() {
+    return this.studio.activeScopeId === this.studio.model.id
+      ? { kind: 'process', id: this.studio.model.id }
+      : { kind: 'node', id: this.studio.activeScopeId };
+  }
+
+  _handleNodeClick(node, event) {
+    if (this.pointerMode === 'pan') return;
+    if (this._suppressNodeClick === node.id) {
+      this._suppressNodeClick = null;
+      return;
+    }
+    if (this.studio.connectingSource && this.studio.connectingSource !== node.id) {
+      const edge = this.studio.commands.connect(this.studio.connectingSource, node.id);
+      if (edge) this.studio.cancelConnect();
+      return;
+    }
+    const mode = event?.ctrlKey || event?.metaKey ? 'toggle' : event?.shiftKey ? 'add' : 'replace';
+    if (mode !== 'replace' && isMarqueeSelectableNode(node)) {
+      const current = this.studio.selection?.kind === 'multi'
+        ? this.studio.selection.items.filter((item) => item.kind === 'node')
+        : this.studio.selection?.kind === 'node'
+          ? [{ kind: 'node', id: this.studio.selection.id }]
+          : [];
+      const index = current.findIndex((item) => item.id === node.id);
+      if (mode === 'toggle' && index >= 0) current.splice(index, 1);
+      else if (index < 0) current.push({ kind: 'node', id: node.id });
+      this.studio.select(!current.length ? this._selectionFallback() : current.length === 1 ? current[0] : { kind: 'multi', items: current });
+      return;
+    }
+    this.studio.select({ kind: 'node', id: node.id });
+  }
+
+  _captureNodeGeometry() {
+    return new Map(this.studio.model.nodes.map((candidate) => [candidate.id, {
+      x: candidate.x,
+      y: candidate.y,
+      width: candidate.width,
+      height: candidate.height,
+    }]));
+  }
+
+  _restoreNodeGeometry(geometry) {
+    for (const candidate of this.studio.model.nodes) {
+      const value = geometry.get(candidate.id);
+      if (value) Object.assign(candidate, value);
+    }
+  }
+
+  _clearChangedWaypoints(geometry) {
+    for (const candidate of this.studio.model.nodes) {
+      const before = geometry.get(candidate.id);
+      if (!before || before.x !== candidate.x || before.y !== candidate.y || before.width !== candidate.width || before.height !== candidate.height) {
+        clearConnectedWaypoints(this.studio.model, candidate.id);
+      }
+    }
+  }
+
+  _startNodeResize(node, handle, event) {
+    if (event.button !== 0 || this.pointerMode === 'pan') return;
+    const kind = NODE_DEFINITIONS[node.type]?.kind;
+    if (!['group', 'participant', 'lane'].includes(kind) || (kind === 'lane' && node.containerId)) return;
+    const snapshot = this.studio.beginGesture();
+    const geometry = this._captureNodeGeometry();
+    const origin = this.clientToWorld(event.clientX, event.clientY);
+    const start = { x: node.x, y: node.y, width: node.width, height: node.height };
+    const minimum = kind === 'group'
+      ? { width: CONTAINMENT_LIMITS.groupMinWidth, height: CONTAINMENT_LIMITS.groupMinHeight }
+      : kind === 'participant'
+        ? { width: CONTAINMENT_LIMITS.participantMinWidth, height: CONTAINMENT_LIMITS.participantMinHeight }
+        : { width: CONTAINMENT_LIMITS.laneMinWidth, height: CONTAINMENT_LIMITS.laneMinHeight };
+    let moved = false;
+    const move = (moveEvent) => {
+      const point = this.clientToWorld(moveEvent.clientX, moveEvent.clientY);
+      let pointerX = point.x;
+      let pointerY = point.y;
+      if (!moveEvent.altKey && this.studio.model.settings?.snapToGrid) {
+        const grid = this.studio.model.settings.gridSize || 16;
+        pointerX = Math.round(pointerX / grid) * grid;
+        pointerY = Math.round(pointerY / grid) * grid;
+      }
+      const dx = pointerX - origin.x;
+      const dy = pointerY - origin.y;
+      moved = moved || Math.hypot(dx, dy) > 1;
+      let left = start.x;
+      let top = start.y;
+      let right = start.x + start.width;
+      let bottom = start.y + start.height;
+      if (handle.includes('w')) left += dx;
+      if (handle.includes('e')) right += dx;
+      if (handle.includes('n')) top += dy;
+      if (handle.includes('s')) bottom += dy;
+      if (right - left < minimum.width) {
+        if (handle.includes('w')) left = right - minimum.width;
+        else right = left + minimum.width;
+      }
+      if (bottom - top < minimum.height) {
+        if (handle.includes('n')) top = bottom - minimum.height;
+        else bottom = top + minimum.height;
+      }
+      this._restoreNodeGeometry(geometry);
+      applyContainmentOperation(this.studio.model, {
+        type: 'resize-container',
+        nodeId: node.id,
+        bounds: { x: Math.round(left), y: Math.round(top), width: Math.round(right - left), height: Math.round(bottom - top) },
+      });
+      this.renderer.render();
+      this._positionSelectionToolbar();
+    };
+    const up = () => {
+      window.removeEventListener('pointermove', move);
+      window.removeEventListener('pointerup', up);
+      if (moved) {
+        this._clearChangedWaypoints(geometry);
+        this._suppressNodeClick = node.id;
+        this.studio.commitGesture(snapshot, 'resize-node');
+      } else this.renderer.render();
+    };
+    window.addEventListener('pointermove', move);
+    window.addEventListener('pointerup', up, { once: true });
+  }
+
+  _startLaneDividerResize(lane, event) {
+    if (event.button !== 0 || !lane.containerId || this.pointerMode === 'pan') return;
+    const snapshot = this.studio.beginGesture();
+    const geometry = this._captureNodeGeometry();
+    const origin = this.clientToWorld(event.clientX, event.clientY);
+    let moved = false;
+    const move = (moveEvent) => {
+      const point = this.clientToWorld(moveEvent.clientX, moveEvent.clientY);
+      let delta = point.y - origin.y;
+      if (!moveEvent.altKey && this.studio.model.settings?.snapToGrid) {
+        const grid = this.studio.model.settings.gridSize || 16;
+        delta = Math.round(delta / grid) * grid;
+      }
+      this._restoreNodeGeometry(geometry);
+      const result = applyContainmentOperation(this.studio.model, {
+        type: 'resize-divider', laneId: lane.id, delta: Math.round(delta),
+      });
+      moved = moved || result.changed;
+      this.renderer.render();
+    };
+    const up = () => {
+      window.removeEventListener('pointermove', move);
+      window.removeEventListener('pointerup', up);
+      if (moved) {
+        this._clearChangedWaypoints(geometry);
+        this._suppressNodeClick = lane.id;
+        this.studio.commitGesture(snapshot, 'resize-lane-divider');
+      } else this.renderer.render();
+    };
+    window.addEventListener('pointermove', move);
+    window.addEventListener('pointerup', up, { once: true });
+  }
+
+  _startNodeDrag(node, event) {
+    if (event.button !== 0 || this.studio.connectingSource || this.pointerMode === 'pan') return;
+    if (event.shiftKey || event.ctrlKey || event.metaKey) return;
+    event.preventDefault();
+    const selectedIds = new Set(
+      this.studio.selection?.kind === 'multi'
+        ? this.studio.selection.items.filter((item) => item.kind === 'node').map((item) => item.id)
+        : this.studio.selection?.kind === 'node'
+          ? [this.studio.selection.id]
+          : [],
+    );
+    if (!selectedIds.has(node.id)) {
+      selectedIds.clear();
+      selectedIds.add(node.id);
+      this.studio.select({ kind: 'node', id: node.id });
+    }
+    if (selectedIds.size > 1 && NODE_DEFINITIONS[node.type]?.kind === 'lane' && node.containerId) {
+      selectedIds.clear();
+      selectedIds.add(node.id);
+      this.studio.select({ kind: 'node', id: node.id });
+    }
+    const containment = resolveContainment(this.studio.model);
+    const movableIds = new Set(selectedIds);
+    for (const selectedId of selectedIds) {
+      const selected = getNode(this.studio.model, selectedId);
+      const selectedKind = NODE_DEFINITIONS[selected?.type]?.kind;
+      if (selectedKind === 'participant') {
+        for (const lane of containment.getParticipantLanes(selected.id)) {
+          movableIds.add(lane.id);
+          for (const ref of lane.properties?.flowNodeRefs || []) movableIds.add(ref);
+        }
+      } else if (selectedKind === 'lane' && (!selected.containerId || selectedIds.has(selected.containerId))) {
+        for (const ref of selected.properties?.flowNodeRefs || []) movableIds.add(ref);
+      }
+    }
+    for (const candidate of this.studio.model.nodes) {
+      if (movableIds.has(candidate.properties?.attachedToRef)) movableIds.add(candidate.id);
+    }
+    if (selectedIds.size === 1 && NODE_DEFINITIONS[node.type]?.kind === 'lane' && node.containerId) {
+      movableIds.clear();
+      movableIds.add(node.id);
+    }
+    const movable = this.studio.getActiveGraph().nodes.filter((candidate) => movableIds.has(candidate.id));
+    const positions = new Map(movable.map((candidate) => [candidate.id, { x: candidate.x, y: candidate.y }]));
+    const geometry = this._captureNodeGeometry();
+    const origin = this.clientToWorld(event.clientX, event.clientY);
+    const nodeKind = NODE_DEFINITIONS[node.type]?.kind;
+    const containerMove = selectedIds.size === 1 && (nodeKind === 'participant' || (nodeKind === 'lane' && !node.containerId));
+    this._drag = {
+      kind: 'node', id: node.id, origin, positions, geometry, movableIds, selectedIds,
+      x: node.x, y: node.y, moved: false, snapshot: this.studio.beginGesture(), containerMove,
+    };
+    const move = (moveEvent) => {
+      const current = getNode(this.studio.model, node.id);
+      if (!this._drag || !current) return;
+      const point = this.clientToWorld(moveEvent.clientX, moveEvent.clientY);
+      const dx = point.x - this._drag.origin.x;
+      const dy = point.y - this._drag.origin.y;
+      if (Math.hypot(dx, dy) > 2) this._drag.moved = true;
+      let x = this._drag.x + dx;
+      let y = this._drag.y + dy;
+      if (!moveEvent.altKey && this.studio.model.settings?.snapToGrid) {
+        const grid = this.studio.model.settings.gridSize || 16;
+        x = Math.round(x / grid) * grid;
+        y = Math.round(y / grid) * grid;
+      }
+      const activeGraph = this.studio.getActiveGraph();
+      const snapGraph = { ...activeGraph, nodes: activeGraph.nodes.filter((candidate) => !this._drag.movableIds.has(candidate.id)) };
+      const snapped = snapNodePosition(snapGraph, current, x, y, {
+        threshold: this.studio.model.settings?.alignmentThreshold ?? 7,
+        disabled: moveEvent.altKey,
+      });
+      const moveX = Math.round(snapped.x) - this._drag.x;
+      const moveY = Math.round(snapped.y) - this._drag.y;
+      if (this._drag.containerMove) {
+        this._restoreNodeGeometry(this._drag.geometry);
+        applyContainmentOperation(this.studio.model, { type: 'move-container', nodeId: node.id, dx: moveX, dy: moveY });
+      } else {
+        for (const candidate of movable) {
+          const start = this._drag.positions.get(candidate.id);
+          candidate.x = Math.round(start.x + moveX);
+          candidate.y = Math.round(start.y + moveY);
+        }
+      }
+      for (const candidate of movable) clearConnectedWaypoints(this.studio.model, candidate.id);
+      this.renderer.setAlignmentGuides(snapped.guides || []);
+      this.renderer.render();
+      this._positionSelectionToolbar();
+    };
+    const up = () => {
+      window.removeEventListener('pointermove', move);
+      window.removeEventListener('pointerup', up);
+      const drag = this._drag;
+      this._drag = null;
+      this.renderer.setAlignmentGuides([]);
+      if (drag?.moved) {
+        const dragged = getNode(this.studio.model, drag.id);
+        if (NODE_DEFINITIONS[dragged?.type]?.kind === 'lane') {
+          const drop = { x: dragged.x + dragged.width / 2, y: dragged.y + dragged.height / 2 };
+          const target = resolveContainment(this.studio.model).getParticipantAt(drop);
+          const finalPosition = { x: dragged.x, y: dragged.y };
+          this._restoreNodeGeometry(drag.geometry);
+          if (target) {
+            const siblings = resolveContainment(this.studio.model).getParticipantLanes(target.id).filter((candidate) => candidate.id !== dragged.id);
+            const index = siblings.filter((candidate) => drop.y > candidate.y + candidate.height / 2).length;
+            applyContainmentOperation(this.studio.model, { type: 'attach-lane', laneId: dragged.id, participantId: target.id, index });
+          } else if (dragged.containerId) {
+            applyContainmentOperation(this.studio.model, { type: 'detach-lane', laneId: dragged.id, ...finalPosition });
+          } else {
+            applyContainmentOperation(this.studio.model, { type: 'move-container', nodeId: dragged.id, dx: finalPosition.x - dragged.x, dy: finalPosition.y - dragged.y });
+          }
+        } else {
+          for (const selectedId of drag.selectedIds) applyContainmentOperation(this.studio.model, { type: 'assign-node', nodeId: selectedId });
+          applyContainmentOperation(this.studio.model, { type: 'reconcile' });
+        }
+        this._clearChangedWaypoints(drag.geometry);
+        this._suppressNodeClick = drag.id;
+        this.studio.commitGesture(drag.snapshot, drag.selectedIds.size > 1 ? 'move-selection' : 'move-node');
+      } else this.renderer.render();
+    };
+    window.addEventListener('pointermove', move);
+    window.addEventListener('pointerup', up, { once: true });
+  }
+
+  _startEdgeBend(edge, index, points, event) {
+    if (event.button !== 0) return;
+    const snapshot = this.studio.beginGesture();
+    edge.waypoints = points.map((point) => ({ ...point }));
+    const move = (moveEvent) => {
+      const point = this.clientToWorld(moveEvent.clientX, moveEvent.clientY);
+      if (edge.waypoints?.[index]) edge.waypoints[index] = { x: Math.round(point.x), y: Math.round(point.y) };
+      this.renderer.render();
+    };
+    const up = () => {
+      window.removeEventListener('pointermove', move);
+      window.removeEventListener('pointerup', up);
+      this.studio.commitGesture(snapshot, 'bend-edge');
+      this.studio.select({ kind: 'edge', id: edge.id });
+    };
+    window.addEventListener('pointermove', move);
+    window.addEventListener('pointerup', up, { once: true });
+  }
+
+  _handleKeyDown(event) {
+    if (event.target?.matches?.('input,textarea,select,[contenteditable="true"]')) return;
+    if (event.key === 'ContextMenu' || (event.shiftKey && event.key === 'F10')) {
+      event.preventDefault();
+      this._closeTransientCanvasMenus();
+      this.studio.cancelConnect();
+      this._openContextMenu(this._contextTargetFromSelection(), this._contextPositionForSelection(), true);
+    }
+    else if (event.code === 'Space') { event.preventDefault(); this.renderer.setSpacePressed(true); }
+    else if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'z') { event.preventDefault(); event.shiftKey ? this.studio.redo() : this.studio.undo(); }
+    else if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'y') { event.preventDefault(); this.studio.redo(); }
+    else if (event.key === 'Delete' || event.key === 'Backspace') { event.preventDefault(); this.studio.commands.remove(); }
+    else if (event.key === 'Enter' && this.studio.selection?.kind === 'node') {
+      const node = getNode(this.studio.model, this.studio.selection.id);
+      if (isEmbeddedSubProcess(node) && elementScopeId(this.studio.model, node) === this.studio.activeScopeId) { event.preventDefault(); this._enterSubProcess(node); }
+    }
+    else if (event.key === 'Escape') this.studio.cancelConnect();
+  }
+
+  _dragOver(event) {
+    if (!this.interactions || (!event.dataTransfer?.types?.includes(CREATE_INTENT_MIME) && !event.dataTransfer?.types?.includes('text/plain'))) return;
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'copy';
+  }
+
+  _drop(event) {
+    if (!this.interactions) return;
+    const raw = event.dataTransfer?.getData(CREATE_INTENT_MIME) || event.dataTransfer?.getData('text/plain');
+    if (!raw) return;
+    event.preventDefault();
+    this.interactions.drop(this.interactions.deserialize(raw), event, this);
+  }
+
+  clientToWorld(clientX, clientY) { return this.renderer.screenToWorld(clientX, clientY); }
+  getViewportCenterWorld() {
+    const rect = this.renderer.viewport.getBoundingClientRect();
+    return this.clientToWorld(rect.left + rect.width / 2, rect.top + rect.height / 2);
+  }
+  openQuickAdd(nodeId) { return this.renderer.openQuickMenu?.(nodeId) || false; }
+  startConnect(nodeId) { this.renderer.closeTransientOverlays?.(); return this.studio.startConnect(nodeId); }
+  editEdgeName(edgeId) { return this.renderer.editEdgeName?.(edgeId) || false; }
+  fitView(padding, options) { this.renderer.fitView(padding, { minZoom: 0.7, ...(options || {}) }); }
+  fitSelection(padding = 72) {
+    const bounds = this.studio.getSelectionBounds();
+    if (!bounds) return false;
+    const rect = this.renderer.viewport.getBoundingClientRect();
+    const availableWidth = Math.max(1, rect.width - padding * 2);
+    const availableHeight = Math.max(1, rect.height - padding * 2);
+    const zoom = Math.max(0.5, Math.min(2, Math.min(availableWidth / Math.max(bounds.width, 1), availableHeight / Math.max(bounds.height, 1))));
+    this.renderer.setViewportState({
+      zoom,
+      pan: {
+        x: rect.width / 2 - (bounds.x + bounds.width / 2) * zoom,
+        y: rect.height / 2 - (bounds.y + bounds.height / 2) * zoom,
+      },
+    });
+    return true;
+  }
+  zoomBy(factor) { this.renderer.zoomBy(factor); }
+  actualSize(padding) { this.renderer.actualSize(padding); }
+  getViewportState() { return this.renderer.getViewportState(); }
+  setTheme(theme) { return this.renderer.setTheme(theme); }
+  setThemeMode(mode) { return this.renderer.setThemeMode(mode); }
+  getThemeState() { return this.renderer.getThemeState(); }
+  destroy() {
+    this._offStudio?.();
+    this.container.removeEventListener('keydown', this._onKeyDown);
+    this.container.removeEventListener('keyup', this._onKeyUp);
+    this.container.removeEventListener('dragover', this._onDragOver);
+    this.container.removeEventListener('drop', this._onDrop);
+    this.renderer.viewport.removeEventListener('contextmenu', this._onContextMenu);
+    document.removeEventListener('pointerdown', this._onToolbarOutside);
+    this._selectionToolbarCleanup?.();
+    this._contextMenuCleanup?.();
+    this.renderer.destroy();
+  }
+}
+
+export function createBpmnCanvas(options) { return new BpmnCanvas(options); }