@bpmn-nova/studio 0.3.0-preview

package/dist/context-menu.js

@@ -0,0 +1,168 @@
+import {
+  NODE_DEFINITIONS,
+  getEdge,
+  getNode,
+  isEmbeddedSubProcess,
+} from '@bpmn-nova/core';
+import { selectedDiagramNodes, selectedGroupableNodes, selectedLayoutNodes } from './selection-layout.js';
+
+function insert(actions, action) {
+  if (!action?.id) return actions;
+  const position = action.position || {};
+  if (position.remove) return actions.filter((item) => item.id !== position.remove && item.id !== action.id);
+  const next = [...actions];
+  let index = next.length;
+  const existing = next.findIndex((item) => item.id === action.id);
+  if (existing >= 0) { index = existing; next.splice(existing, 1); }
+  if (position.replace) {
+    const target = next.findIndex((item) => item.id === position.replace);
+    if (target >= 0) { index = target; next.splice(target, 1); }
+  } else if (position.prepend) index = 0;
+  else if (position.before) {
+    const target = next.findIndex((item) => item.id === position.before);
+    if (target >= 0) index = target;
+  } else if (position.after) {
+    const target = next.findIndex((item) => item.id === position.after);
+    if (target >= 0) index = target + 1;
+  } else if (position.append) index = next.length;
+  index = Math.max(0, Math.min(index, next.length));
+  next.splice(index, 0, action);
+  return next;
+}
+
+function action(config) {
+  return { group: 'primary', disabled: false, danger: false, ...config };
+}
+
+const flowKinds = new Set(['event', 'boundary', 'task', 'container', 'gateway']);
+
+function canvasActions() {
+  return [
+    action({ id: 'canvas.fit', label: '最佳视图', iconId: 'ui.fitView', execute: ({ canvas }) => canvas.fitView(72) }),
+    action({ id: 'canvas.beautify', label: '美化当前流程', iconId: 'ui.magic', execute: ({ studio }) => studio.commands.beautify() }),
+    action({ id: 'canvas.reroute', label: '优化全部连线', iconId: 'ui.rerouteSelection', execute: ({ studio }) => studio.commands.rerouteEdges() }),
+    action({ id: 'pointer.select', label: '单选', iconId: 'ui.pointer', group: 'pointer', execute: ({ canvas }) => canvas.setPointerMode('select') }),
+    action({ id: 'pointer.marquee', label: '框选', iconId: 'ui.marquee', group: 'pointer', execute: ({ canvas }) => canvas.setPointerMode('marquee') }),
+    action({ id: 'pointer.pan', label: '拖动', iconId: 'ui.hand', group: 'pointer', execute: ({ canvas }) => canvas.setPointerMode('pan') }),
+  ];
+}
+
+function nodeActions(context) {
+  const node = getNode(context.studio.model, context.target.id);
+  if (!node) return [];
+  const definition = NODE_DEFINITIONS[node.type] || NODE_DEFINITIONS.generic;
+  const canOutgoing = flowKinds.has(definition.kind) && definition.eventStage !== 'end';
+  const actions = [];
+  if (canOutgoing) {
+    actions.push(
+      action({ id: 'node.quickAdd', label: '快捷添加下一节点', iconId: 'ui.add', execute: ({ canvas, target }) => canvas.openQuickAdd(target.id) }),
+      action({ id: 'node.connect', label: '连接已有节点', iconId: 'ui.connect', execute: ({ canvas, target }) => canvas.startConnect(target.id) }),
+    );
+  }
+  if (isEmbeddedSubProcess(node)) {
+    actions.push(action({ id: 'node.enterScope', label: '进入子流程', iconId: 'ui.enterScope', group: 'navigation', execute: ({ studio, target }) => studio.enterScope(target.id) }));
+  }
+  if (definition.kind === 'group') {
+    actions.push(action({ id: 'node.ungroup', label: '取消分组', iconId: 'ui.layoutSelection', execute: ({ studio, target }) => studio.commands.ungroup(target.id) }));
+    return actions;
+  }
+  actions.push(action({ id: 'selection.delete', label: '删除节点', iconId: 'ui.delete', group: 'danger', danger: true, execute: ({ studio, target }) => studio.commands.remove(target) }));
+  return actions;
+}
+
+function edgeActions(context) {
+  const edge = getEdge(context.studio.model, context.target.id);
+  if (!edge) return [];
+  return [
+    action({ id: 'edge.rename', label: '编辑连线名称', iconId: 'ui.edit', execute: ({ canvas, target }) => canvas.editEdgeName(target.id) }),
+    action({ id: 'edge.resetRoute', label: '恢复自动路由', iconId: 'ui.rerouteSelection', disabled: !edge.waypoints?.length, execute: ({ studio, target }) => studio.commands.resetEdgeRoute(target.id) }),
+    action({ id: 'edge.locateSource', label: '定位起点', iconId: 'ui.locateSource', group: 'navigation', execute: ({ studio }) => studio.select({ kind: 'node', id: edge.source }) }),
+    action({ id: 'edge.locateTarget', label: '定位终点', iconId: 'ui.locateTarget', group: 'navigation', execute: ({ studio }) => studio.select({ kind: 'node', id: edge.target }) }),
+    action({ id: 'selection.delete', label: '删除连线', iconId: 'ui.delete', group: 'danger', danger: true, execute: ({ studio, target }) => studio.commands.remove(target) }),
+  ];
+}
+
+const alignments = [
+  ['left', '左对齐', 'ui.alignLeft'],
+  ['centerX', '水平居中', 'ui.alignCenterHorizontal'],
+  ['right', '右对齐', 'ui.alignRight'],
+  ['top', '顶部对齐', 'ui.alignTop'],
+  ['centerY', '垂直居中', 'ui.alignCenterVertical'],
+  ['bottom', '底部对齐', 'ui.alignBottom'],
+];
+
+function multiActions(context) {
+  const nodes = selectedLayoutNodes(context.studio.model, context.selection, context.studio.activeScopeId);
+  const diagramNodes = selectedDiagramNodes(context.studio.model, context.selection, context.studio.activeScopeId);
+  const groupableNodes = selectedGroupableNodes(context.studio.model, context.selection, context.studio.activeScopeId);
+  const actions = alignments.map(([alignment, label, iconId]) => action({
+    id: `selection.align.${alignment}`,
+    label,
+    iconId,
+    group: 'align',
+    disabled: nodes.length < 2,
+    execute: ({ studio }) => studio.arrangeSelection({ type: 'align', alignment }),
+  }));
+  actions.push(
+    action({ id: 'selection.group', label: '创建分组', iconId: 'ui.layoutSelection', group: 'layout', disabled: !groupableNodes.length || groupableNodes.length !== diagramNodes.length, execute: ({ studio }) => studio.commands.groupSelection() }),
+    action({ id: 'selection.distribute.horizontal', label: '水平等距', iconId: 'ui.distributeHorizontal', group: 'distribute', disabled: nodes.length < 3, execute: ({ studio }) => studio.arrangeSelection({ type: 'distribute', axis: 'horizontal' }) }),
+    action({ id: 'selection.distribute.vertical', label: '垂直等距', iconId: 'ui.distributeVertical', group: 'distribute', disabled: nodes.length < 3, execute: ({ studio }) => studio.arrangeSelection({ type: 'distribute', axis: 'vertical' }) }),
+    action({ id: 'selection.layout', label: '美化选区', iconId: 'ui.layoutSelection', group: 'layout', disabled: nodes.length < 2, execute: ({ studio }) => studio.arrangeSelection({ type: 'layout' }) }),
+    action({ id: 'selection.reroute', label: '优化关联连线', iconId: 'ui.rerouteSelection', group: 'layout', disabled: nodes.length < 1, execute: ({ studio }) => studio.arrangeSelection({ type: 'reroute' }) }),
+    action({ id: 'selection.fit', label: '适应选区', iconId: 'ui.fitSelection', group: 'layout', disabled: nodes.length < 1, execute: ({ canvas }) => canvas.fitSelection() }),
+    action({ id: 'selection.delete', label: '删除选区', iconId: 'ui.delete', group: 'danger', danger: true, execute: ({ studio, selection }) => studio.commands.remove(selection) }),
+  );
+  return actions;
+}
+
+export const defaultContextMenuProvider = {
+  id: 'bpmn-default-context-menu',
+  priority: 100,
+  getActions(context) {
+    if (context.target?.kind === 'canvas') return canvasActions(context);
+    if (context.target?.kind === 'node') return nodeActions(context);
+    if (context.target?.kind === 'edge') return edgeActions(context);
+    if (context.target?.kind === 'multi') return multiActions(context);
+    return [];
+  },
+};
+
+export class ContextMenuRegistry {
+  constructor() { this._providers = []; }
+
+  registerProvider(priority = 500, provider) {
+    if (typeof priority === 'object') { provider = priority; priority = provider.priority ?? 500; }
+    if (!provider?.id) throw new Error('Context menu provider requires an id.');
+    const record = { priority, provider, order: this._providers.length };
+    this._providers.push(record);
+    this._providers.sort((a, b) => b.priority - a.priority || a.order - b.order);
+    return () => { this._providers = this._providers.filter((item) => item !== record); };
+  }
+
+  resolve(context = {}) {
+    let actions = [];
+    for (const { provider } of [...this._providers].reverse()) {
+      const output = typeof provider.getActions === 'function' ? provider.getActions(context) : provider.actions;
+      for (const rawAction of output || []) {
+        if (!rawAction) continue;
+        if (typeof rawAction.visible === 'function' && !rawAction.visible(context)) continue;
+        const resolved = {
+          ...rawAction,
+          disabled: typeof rawAction.disabled === 'function' ? Boolean(rawAction.disabled(context)) : Boolean(rawAction.disabled),
+          danger: Boolean(rawAction.danger),
+        };
+        actions = insert(actions, resolved);
+      }
+    }
+    return actions;
+  }
+}
+
+export function createContextMenuRegistry() { return new ContextMenuRegistry(); }
+
+export function createDefaultContextMenuRegistry({ providers = [] } = {}) {
+  const registry = createContextMenuRegistry();
+  registry.registerProvider(defaultContextMenuProvider.priority, defaultContextMenuProvider);
+  for (const provider of providers) registry.registerProvider(provider.priority ?? 500, provider);
+  return registry;
+}