@bpmn-nova/studio 0.3.0-preview → 0.3.2-preview

package/dist/modules/designer/index.js

@@ -0,0 +1,607 @@
+import { applyContainmentOperation, createNode, createEdge, getNode, getEdge, clearConnectedWaypoints, cloneModel, HistoryStack, autoLayout, beautify, snapNodePosition, NODE_DEFINITIONS, LAYOUT_DENSITIES, resolveSwimlaneLabelPlacement, validateParallelGateway } from '../core/index.js';
+import { DiagramRenderer } from '../renderer-svg/index.js';
+import { importBpmn, exportBpmn } from '../bpmn-model/index.js';
+
+const SEQUENCE_FLOW_KINDS = new Set(['event', 'boundary', 'task', 'container', 'gateway']);
+
+export function normalizeCanvasCoordinate(value) {
+  const numeric = Number(value);
+  return Number.isFinite(numeric) ? Math.round(numeric * 100) / 100 : 0;
+}
+
+/**
+ * Basic BPMN sequence-flow connection guard shared by the designer and renderer.
+ * Connection eligibility is intentionally geometry-agnostic: a node can be to the
+ * left, right, above or below the source. The router chooses the appropriate sides.
+ */
+export function canSequenceConnect(model, sourceId, targetId) {
+  if (!model || !sourceId || !targetId || sourceId === targetId) return false;
+  const source = getNode(model, sourceId);
+  const target = getNode(model, targetId);
+  if (!source || !target) return false;
+
+  const sourceDef = NODE_DEFINITIONS[source.type] || NODE_DEFINITIONS.generic;
+  const targetDef = NODE_DEFINITIONS[target.type] || NODE_DEFINITIONS.generic;
+  if (!SEQUENCE_FLOW_KINDS.has(sourceDef.kind) || !SEQUENCE_FLOW_KINDS.has(targetDef.kind)) return false;
+  if (sourceDef.eventStage === 'end') return false;
+  if (targetDef.eventStage === 'start') return false;
+  // Boundary events are attached to an activity and cannot receive a sequence flow.
+  if (targetDef.kind === 'boundary') return false;
+
+  const duplicate = model.edges.some((edge) =>
+    (edge.type || 'sequenceFlow') === 'sequenceFlow'
+    && edge.source === sourceId
+    && edge.target === targetId
+  );
+  return !duplicate;
+}
+
+export class BpmnDesigner {
+  constructor(options = {}) {
+    if (!options.container) throw new Error('BpmnDesigner requires container.');
+    this.model = options.model;
+    this.onChange = options.onChange || (() => {});
+    this.onSelectionChange = options.onSelectionChange || (() => {});
+    this.onStateChange = options.onStateChange || (() => {});
+    this.history = new HistoryStack(options.historyLimit || 80);
+    this.selection = null;
+    this.connectingSource = null;
+    this.dragState = null;
+    this._listeners = new Map();
+
+    this.renderer = new DiagramRenderer(options.container, {
+      themeController: options.themeController,
+      theme: options.theme,
+      onThemeChange: options.onThemeChange,
+      svgExport: options.svgExport,
+      model: this.model,
+      mode: 'design',
+      onNodeClick: (node) => this._handleNodeClick(node),
+      onNodePointerDown: (node, event) => this._startDrag(node, event),
+      onEdgeClick: (edge) => this.select({ kind: 'edge', id: edge.id }),
+      onCanvasClick: () => this.clearSelection(),
+      onStartConnect: (node) => this.startConnect(node.id),
+      canConnect: (sourceNode, targetNode) => canSequenceConnect(this.model, sourceNode?.id, targetNode?.id),
+      onQuickAdd: (node, type, preset) => this.quickAdd(node.id, type, preset),
+      onDeleteNode: (node) => { this.select({ kind: 'node', id: node.id }); this.removeSelection(); },
+      onEdgeNameChange: (edge, name) => this.updateEdge(edge.id, { name }),
+      onEdgeBendPointerDown: (edge, index, points, event) => this._startEdgeBend(edge, index, points, event),
+      onViewportChange: options.onViewportChange,
+    });
+
+    this._keyHandler = (event) => this._handleKey(event);
+    window.addEventListener('keydown', this._keyHandler);
+  }
+
+  destroy() {
+    window.removeEventListener('keydown', this._keyHandler);
+    this._listeners.clear();
+    this.renderer.destroy();
+  }
+
+  setTheme(theme) { return this.renderer.setTheme(theme); }
+  setThemeMode(mode) { return this.renderer.setThemeMode(mode); }
+  getThemeState() { return this.renderer.getThemeState(); }
+
+  on(event, handler) {
+    if (typeof handler !== 'function') return () => {};
+    if (!this._listeners.has(event)) this._listeners.set(event, new Set());
+    this._listeners.get(event).add(handler);
+    return () => this.off(event, handler);
+  }
+
+  off(event, handler) {
+    this._listeners.get(event)?.delete(handler);
+  }
+
+  _notify(event, payload) {
+    for (const handler of this._listeners.get(event) || []) handler(payload);
+  }
+
+  _emit(reason = 'change') {
+    this.renderer.setModel(this.model);
+    this.onChange(this.model, reason);
+    const state = this.getState();
+    this.onStateChange(state);
+    this._notify('change', { model: this.model, reason, state });
+  }
+
+  getState() {
+    return {
+      selection: this.selection,
+      connectingSource: this.connectingSource,
+      canUndo: this.history.canUndo,
+      canRedo: this.history.canRedo,
+      engine: this.model.engine,
+    };
+  }
+
+  setModel(model, { resetHistory = true } = {}) {
+    this.model = model;
+    if (resetHistory) this.history = new HistoryStack(80);
+    this.selection = null;
+    this.connectingSource = null;
+    this.renderer.setSelection(null);
+    this.renderer.setConnectingSource(null);
+    this._emit('set-model');
+  }
+
+  select(selection) {
+    this.selection = selection;
+    this.renderer.setSelection(selection);
+    const element = this.getSelectedElement();
+    this.onSelectionChange(selection, element);
+    const state = this.getState();
+    this.onStateChange(state);
+    this._notify('selection', { selection, element, state });
+  }
+
+  clearSelection() {
+    this.selection = null;
+    this.connectingSource = null;
+    this.renderer.setSelection(null);
+    this.renderer.setConnectingSource(null);
+    this.onSelectionChange(null, null);
+    const state = this.getState();
+    this.onStateChange(state);
+    this._notify('selection', { selection: null, element: null, state });
+  }
+
+  getSelectedElement() {
+    if (!this.selection) return null;
+    return this.selection.kind === 'node' ? getNode(this.model, this.selection.id) : getEdge(this.model, this.selection.id);
+  }
+
+  _commit(reason, mutator) {
+    this.history.capture(this.model);
+    mutator();
+    this._emit(reason);
+  }
+
+  addNode(type, x, y, overrides = {}) {
+    let created;
+    this._commit('add-node', () => {
+      created = createNode(type, x, y, overrides);
+      this.model.nodes.push(created);
+    });
+    this.select({ kind: 'node', id: created.id });
+    return created;
+  }
+
+  quickAdd(sourceId, type = 'userTask', preset = {}) {
+    const source = getNode(this.model, sourceId);
+    if (!source) return null;
+    const def = NODE_DEFINITIONS[type] || NODE_DEFINITIONS.userTask;
+    const sourceDef = NODE_DEFINITIONS[source.type] || NODE_DEFINITIONS.generic;
+    const outgoingCount = this.model.edges.filter((edge) => edge.source === sourceId).length;
+    const direction = this.model.settings?.direction || 'horizontal';
+    const density = this.model.settings?.layoutDensity || 'balanced';
+    const spacing = LAYOUT_DENSITIES[density] || LAYOUT_DENSITIES.balanced;
+    // Quick-add must visually match one-click beautify. The previous fixed 128 /
+    // 118px offsets made manually built flows noticeably looser than auto layout.
+    const primaryGap = spacing.rankGap;
+    const branchStep = Math.max(def.height, 72) + spacing.nodeGap;
+    let x;
+    let y;
+    if (direction === 'vertical') {
+      x = source.x + source.width / 2 - def.width / 2;
+      if (sourceDef.kind === 'gateway' && outgoingCount > 0) {
+        const branchIndex = Math.ceil(outgoingCount / 2);
+        const branchSign = outgoingCount % 2 ? -1 : 1;
+        x += branchSign * branchIndex * (Math.max(def.width, 140) + spacing.nodeGap);
+      }
+      y = source.y + source.height + primaryGap;
+    } else {
+      x = source.x + source.width + primaryGap;
+      y = source.y + source.height / 2 - def.height / 2;
+      if (sourceDef.kind === 'gateway' && outgoingCount > 0) {
+        const offsets = [-branchStep, branchStep, -branchStep * 2, branchStep * 2];
+        y += offsets[outgoingCount - 1] ?? (outgoingCount - 2) * branchStep;
+      }
+    }
+
+    let created;
+    let edge;
+    this._commit('quick-add', () => {
+      created = createNode(type, Math.round(x), Math.round(y), preset);
+      this.model.nodes.push(created);
+      edge = createEdge(sourceId, created.id, {
+        name: sourceDef.kind === 'gateway' ? `分支 ${outgoingCount + 1}` : '',
+      });
+      this.model.edges.push(edge);
+    });
+    this.connectingSource = null;
+    this.renderer.setConnectingSource(null);
+    this.select({ kind: 'node', id: created.id });
+    return created;
+  }
+
+  startConnect(sourceId) {
+    const source = getNode(this.model, sourceId);
+    if (!source) return;
+    const sourceDef = NODE_DEFINITIONS[source.type] || NODE_DEFINITIONS.generic;
+    if (!SEQUENCE_FLOW_KINDS.has(sourceDef.kind) || sourceDef.eventStage === 'end') return;
+
+    const nextSource = this.connectingSource === sourceId ? null : sourceId;
+    this.connectingSource = nextSource;
+    if (nextSource && (this.selection?.kind !== 'node' || this.selection.id !== sourceId)) {
+      this.selection = { kind: 'node', id: sourceId };
+      this.renderer.setSelection(this.selection);
+      this.onSelectionChange(this.selection, source);
+    }
+    this.renderer.setConnectingSource(this.connectingSource);
+    this.onStateChange(this.getState());
+  }
+
+  connect(source, target, overrides = {}) {
+    if (!canSequenceConnect(this.model, source, target)) return null;
+    let edge;
+    this._commit('connect', () => {
+      edge = createEdge(source, target, overrides);
+      this.model.edges.push(edge);
+    });
+    return edge;
+  }
+
+  _handleNodeClick(node) {
+    if (this.connectingSource) {
+      // Clicking the source itself keeps connection mode active. Clicking any valid
+      // target completes the connection regardless of which side of the source it is on.
+      if (this.connectingSource === node.id) {
+        this.select({ kind: 'node', id: node.id });
+        return;
+      }
+      const edge = this.connect(this.connectingSource, node.id);
+      if (edge) {
+        this.connectingSource = null;
+        this.renderer.setConnectingSource(null);
+        this.select({ kind: 'edge', id: edge.id });
+      }
+      return;
+    }
+    this.select({ kind: 'node', id: node.id });
+  }
+
+  updateProcess(patch) {
+    this._commit('update-process', () => {
+      if (patch.properties) this.model.properties = { ...(this.model.properties || {}), ...patch.properties };
+      if (patch.settings) this.model.settings = { ...(this.model.settings || {}), ...patch.settings };
+      if (patch.resources) this.model.resources = { ...(this.model.resources || {}), ...patch.resources };
+      const rest = { ...patch };
+      delete rest.properties;
+      delete rest.settings;
+      delete rest.resources;
+      Object.assign(this.model, rest);
+    });
+  }
+
+  changeElementId(kind, oldId, nextId) {
+    const value = String(nextId || '').trim();
+    if (!value || value === oldId) return false;
+    const nodeConflict = this.model.nodes.some((node) => node.id === value && !(kind === 'node' && node.id === oldId));
+    const edgeConflict = this.model.edges.some((edge) => edge.id === value && !(kind === 'edge' && edge.id === oldId));
+    const processConflict = kind !== 'process' && this.model.id === value;
+    if (nodeConflict || edgeConflict || processConflict) return false;
+
+    this._commit('change-element-id', () => {
+      if (kind === 'process') {
+        const previous = this.model.id;
+        this.model.id = value;
+        for (const node of this.model.nodes) {
+          if (node.type === 'participant' && node.properties?.processRef === previous) node.properties.processRef = value;
+        }
+        return;
+      }
+      if (kind === 'node') {
+        const node = getNode(this.model, oldId);
+        if (!node) return;
+        node.id = value;
+        for (const edge of this.model.edges) {
+          if (edge.source === oldId) edge.source = value;
+          if (edge.target === oldId) edge.target = value;
+        }
+        for (const item of this.model.nodes) {
+          if (item.properties?.attachedToRef === oldId) item.properties.attachedToRef = value;
+          if (Array.isArray(item.properties?.flowNodeRefs)) item.properties.flowNodeRefs = item.properties.flowNodeRefs.map((ref) => ref === oldId ? value : ref);
+        }
+        return;
+      }
+      if (kind === 'edge') {
+        const edge = getEdge(this.model, oldId);
+        if (!edge) return;
+        edge.id = value;
+        for (const node of this.model.nodes) if (node.defaultFlowId === oldId) node.defaultFlowId = value;
+      }
+    });
+    if (kind === 'node' || kind === 'edge') this.select({ kind, id: value });
+    return true;
+  }
+
+  updateNode(id, patch) {
+    const node = getNode(this.model, id);
+    if (!node) return;
+    const previousLabelPlacement = resolveSwimlaneLabelPlacement(this.model, node);
+    this._commit('update-node', () => {
+      if (patch.properties) node.properties = { ...node.properties, ...patch.properties };
+      const rest = { ...patch };
+      delete rest.properties;
+      Object.assign(node, rest);
+      clearConnectedWaypoints(this.model, id);
+      const nextLabelPlacement = resolveSwimlaneLabelPlacement(this.model, node);
+      if (previousLabelPlacement !== nextLabelPlacement) {
+        const result = applyContainmentOperation(this.model, {
+          type: 'update-label-placement',
+          nodeId: id,
+          previousPlacement: previousLabelPlacement,
+        });
+        if (result.changed) for (const edge of this.model.edges) edge.waypoints = null;
+      }
+    });
+    this.select({ kind: 'node', id });
+  }
+
+  updateEdge(id, patch) {
+    const edge = getEdge(this.model, id);
+    if (!edge) return;
+    this._commit('update-edge', () => {
+      if (patch.properties) edge.properties = { ...(edge.properties || {}), ...patch.properties };
+      const rest = { ...patch };
+      delete rest.properties;
+      Object.assign(edge, rest);
+    });
+    this.select({ kind: 'edge', id });
+  }
+
+  updateEdges(patches = []) {
+    const valid = patches.filter((item) => item?.id && getEdge(this.model, item.id));
+    if (!valid.length) return;
+    this._commit('update-edges', () => {
+      for (const { id, patch = {} } of valid) {
+        const edge = getEdge(this.model, id);
+        if (patch.properties) edge.properties = { ...(edge.properties || {}), ...patch.properties };
+        const rest = { ...patch };
+        delete rest.properties;
+        Object.assign(edge, rest);
+      }
+    });
+    if (this.selection?.kind === 'edge' && getEdge(this.model, this.selection.id)) this.select(this.selection);
+  }
+
+  removeSelection() {
+    if (!this.selection) return;
+    const { kind, id } = this.selection;
+    this._commit('delete', () => {
+      if (kind === 'node') {
+        this.model.nodes = this.model.nodes.filter((node) => node.id !== id);
+        this.model.edges = this.model.edges.filter((edge) => edge.source !== id && edge.target !== id);
+      } else {
+        this.model.edges = this.model.edges.filter((edge) => edge.id !== id);
+      }
+    });
+    this.clearSelection();
+  }
+
+  setEngine(engine) {
+    if (engine === this.model.engine) return;
+    this._commit('set-engine', () => { this.model.engine = engine; });
+  }
+
+  autoLayout(direction = this.model.settings?.direction || 'horizontal') {
+    this._commit('auto-layout', () => autoLayout(this.model, { direction }));
+    requestAnimationFrame(() => this.renderer.fitReadable(72));
+  }
+
+  beautify(options = {}) {
+    this._commit('beautify', () => beautify(this.model, options));
+    requestAnimationFrame(() => this.renderer.fitReadable(72));
+  }
+
+  rerouteEdges(options = {}) {
+    const edgeStyle = options.edgeStyle || this.model.settings?.edgeStyle || 'rounded';
+    const cornerRadius = options.cornerRadius ?? this.model.settings?.cornerRadius ?? 16;
+    this._commit('reroute-edges', () => {
+      this.model.settings = {
+        ...(this.model.settings || {}),
+        edgeStyle,
+        cornerRadius,
+      };
+      for (const edge of this.model.edges) {
+        edge.waypoints = null;
+        edge.routeStyle = edgeStyle;
+        edge.cornerRadius = cornerRadius;
+      }
+    });
+  }
+
+  resetEdgeRoute(id) {
+    const edge = getEdge(this.model, id);
+    if (!edge) return;
+    this._commit('reset-edge-route', () => { edge.waypoints = null; });
+    this.select({ kind: 'edge', id });
+  }
+
+  changeNodeType(id, type) {
+    const node = getNode(this.model, id);
+    const def = NODE_DEFINITIONS[type];
+    if (!node || !def || node.type === type) return;
+    this._commit('change-node-type', () => {
+      const next = createNode(type, node.x, node.y, { id: node.id, name: node.name });
+      node.type = type;
+      node.bpmnType = def.bpmnType;
+      node.width = def.width;
+      node.height = def.height;
+      node.properties = { ...next.properties, ...node.properties };
+      node.originalLocalName = def.localName;
+      clearConnectedWaypoints(this.model, id);
+    });
+    this.select({ kind: 'node', id });
+  }
+
+  undo() {
+    const previous = this.history.undo(this.model);
+    if (!previous) return;
+    this.model = previous;
+    this.clearSelection();
+    this._emit('undo');
+  }
+
+  redo() {
+    const next = this.history.redo(this.model);
+    if (!next) return;
+    this.model = next;
+    this.clearSelection();
+    this._emit('redo');
+  }
+
+  importXml(xml, engineHint) {
+    const model = importBpmn(xml, engineHint);
+    this.setModel(model, { resetHistory: true });
+    requestAnimationFrame(() => this.renderer.fitReadable(72));
+    return model;
+  }
+
+  exportXml(engineOverride) {
+    return exportBpmn(this.model, engineOverride);
+  }
+
+  exportSvg(options) { return this.renderer.exportSvg(options); }
+  openSvgExportPreview(options) { return this.renderer.openSvgExportPreview(options); }
+
+  validate() {
+    const issues = [];
+    const starts = this.model.nodes.filter((n) => NODE_DEFINITIONS[n.type]?.eventStage === 'start');
+    const ends = this.model.nodes.filter((n) => NODE_DEFINITIONS[n.type]?.eventStage === 'end');
+    if (!starts.length) issues.push({ level: 'error', message: '流程至少需要一个开始事件。' });
+    if (!ends.length) issues.push({ level: 'warning', message: '建议至少配置一个结束事件。' });
+    for (const edge of this.model.edges) {
+      if (!getNode(this.model, edge.source) || !getNode(this.model, edge.target)) issues.push({ level: 'error', elementId: edge.id, message: '连线引用了不存在的节点。' });
+      if ((edge.type || 'sequenceFlow') === 'sequenceFlow' && edge.source === edge.target) issues.push({ level: 'error', elementId: edge.id, message: '顺序流不能连接到自身。' });
+    }
+    for (const node of this.model.nodes) {
+      const def = NODE_DEFINITIONS[node.type] || NODE_DEFINITIONS.generic;
+      if (node.type === 'serviceTask' && !node.properties?.implementation) issues.push({ level: 'warning', elementId: node.id, message: `${node.name}: 服务任务尚未配置实现。` });
+      if (node.type === 'userTask' && !node.properties?.assignee && !node.properties?.candidateUsers && !node.properties?.candidateGroups) issues.push({ level: 'warning', elementId: node.id, message: `${node.name}: 用户任务尚未配置处理人。` });
+      if (def.kind === 'gateway') {
+        const outgoing = this.model.edges.filter((e) => e.source === node.id && (e.type || 'sequenceFlow') === 'sequenceFlow');
+        if (node.type === 'parallelGateway') {
+          for (const message of validateParallelGateway(this.model, node)) issues.push({ level: 'warning', elementId: node.id, message: `${node.name}: ${message}` });
+        } else if (outgoing.length < 2) issues.push({ level: 'warning', elementId: node.id, message: `${node.name}: 网关通常需要至少两个出口。` });
+        if (['exclusiveGateway', 'inclusiveGateway'].includes(node.type)) {
+          const unnamed = outgoing.filter((edge) => !edge.name);
+          if (outgoing.length >= 2 && unnamed.length) issues.push({ level: 'warning', elementId: node.id, message: `${node.name}: 建议为每条分支线路设置名称，便于审批展示和运行追踪。` });
+        }
+      }
+      if (def.kind === 'boundary' && !node.properties?.attachedToRef) issues.push({ level: 'warning', elementId: node.id, message: `${node.name}: 边界事件尚未选择附着活动。` });
+      if (def.eventDefinition === 'timer' && !node.properties?.timerValue) issues.push({ level: 'warning', elementId: node.id, message: `${node.name}: 定时事件尚未配置定时表达式。` });
+    }
+    return issues;
+  }
+
+  _startDrag(node, event) {
+    if (event.button !== 0) return;
+    event.preventDefault();
+    this.select({ kind: 'node', id: node.id });
+    const snapshot = cloneModel(this.model);
+    const origin = this.renderer.screenToWorld(event.clientX, event.clientY);
+    this.dragState = { id: node.id, origin, nodeX: node.x, nodeY: node.y, moved: false, snapshot };
+
+    const move = (moveEvent) => {
+      if (!this.dragState) return;
+      const point = this.renderer.screenToWorld(moveEvent.clientX, moveEvent.clientY);
+      const dx = point.x - this.dragState.origin.x;
+      const dy = point.y - this.dragState.origin.y;
+      if (Math.abs(dx) + Math.abs(dy) > 2) this.dragState.moved = true;
+
+      let rawX = this.dragState.nodeX + dx;
+      let rawY = this.dragState.nodeY + dy;
+
+      // Grid snapping is now opt-in. The default interaction is continuous and
+      // magnetically snaps centers/edges to nearby BPMN elements. Hold Alt to
+      // temporarily disable every snap for pixel-perfect positioning.
+      if (!moveEvent.altKey && this.model.settings?.snapToGrid) {
+        const grid = this.model.settings?.gridSize || 16;
+        rawX = Math.round(rawX / grid) * grid;
+        rawY = Math.round(rawY / grid) * grid;
+      }
+
+      const snapped = snapNodePosition(this.model, node, rawX, rawY, {
+        threshold: this.model.settings?.alignmentThreshold ?? 7,
+        disabled: moveEvent.altKey,
+      });
+      node.x = normalizeCanvasCoordinate(snapped.x);
+      node.y = normalizeCanvasCoordinate(snapped.y);
+      clearConnectedWaypoints(this.model, node.id);
+      this.renderer.setAlignmentGuides?.(snapped.guides || []);
+      this.renderer.render();
+    };
+
+    const up = () => {
+      window.removeEventListener('pointermove', move);
+      window.removeEventListener('pointerup', up);
+      const moved = this.dragState?.moved;
+      const snapshot = this.dragState?.snapshot;
+      this.dragState = null;
+      this.renderer.setAlignmentGuides?.([]);
+      if (moved) {
+        this.history.undoStack.push(snapshot);
+        if (this.history.undoStack.length > this.history.limit) this.history.undoStack.shift();
+        this.history.redoStack.length = 0;
+        this._emit('move-node');
+      } else {
+        this.renderer.render();
+        this.onStateChange(this.getState());
+      }
+    };
+
+    window.addEventListener('pointermove', move);
+    window.addEventListener('pointerup', up, { once: true });
+  }
+
+
+  _startEdgeBend(edge, index, points, event) {
+    if (event.button !== 0) return;
+    const snapshot = cloneModel(this.model);
+    edge.waypoints = points.map((point) => ({ ...point }));
+    const move = (moveEvent) => {
+      const point = this.renderer.screenToWorld(moveEvent.clientX, moveEvent.clientY);
+      if (!edge.waypoints?.[index]) return;
+      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.history.undoStack.push(snapshot);
+      if (this.history.undoStack.length > this.history.limit) this.history.undoStack.shift();
+      this.history.redoStack.length = 0;
+      this._emit('bend-edge');
+      this.select({ kind: 'edge', id: edge.id });
+    };
+    window.addEventListener('pointermove', move);
+    window.addEventListener('pointerup', up, { once: true });
+  }
+
+  _handleKey(event) {
+    const target = event.target;
+    if (target?.matches?.('input,textarea,select,[contenteditable="true"]')) return;
+    if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'z') {
+      event.preventDefault();
+      if (event.shiftKey) this.redo(); else this.undo();
+      return;
+    }
+    if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'y') {
+      event.preventDefault();
+      this.redo();
+      return;
+    }
+    if (event.key === 'Delete' || event.key === 'Backspace') {
+      event.preventDefault();
+      this.removeSelection();
+    }
+    if (event.key === 'Escape') {
+      this.connectingSource = null;
+      this.renderer.setConnectingSource(null);
+      this.clearSelection();
+    }
+  }
+}

package/dist/modules/engine-activiti/index.d.ts

@@ -0,0 +1,19 @@
+import type { BpmnEdge, BpmnNode, ProcessModel } from '../core/index.js'
+
+export interface ActivitiEngineProfile {
+  id: 'activiti'
+  label: 'Activiti'
+  prefix: 'activiti'
+  namespace: 'http://activiti.org/bpmn'
+  parseProcess(element: Element): Record<string, unknown>
+  processAttributes(model: ProcessModel): Record<string, unknown>
+  parseNode(element: Element): Record<string, unknown>
+  nodeAttributes(node: BpmnNode): Record<string, unknown>
+  processExtensionElements(model: ProcessModel): string[]
+  nodeExtensionElements(node: BpmnNode): string[]
+  nodeChildElements(node: BpmnNode): string[]
+  parseEdge(element: Element): Record<string, unknown>
+  edgeExtensionElements(edge: BpmnEdge): string[]
+}
+
+export const activitiProfile: ActivitiEngineProfile