@bpmn-nova/studio 0.3.4-preview → 0.3.6-preview

package/dist/modules/renderer-svg/index.js

@@ -2,6 +2,7 @@ import { NODE_DEFINITIONS, PALETTE_GROUPS, PARALLEL_GATEWAY_PRESETS, edgeWaypoin
 import { createRuntimePresentation } from '../runtime/index.js';
 import { createDefaultIconRegistry, createIconElement, resolveNodeVisual } from '../icons/index.js';
 import { resolveNodeSubtitle, supportsNodeSubtitle } from '../node-presentation/index.js';
+import { resolveNodeGeometry, resolvePresentationWaypoints } from '../node-geometry/index.js';
 import { ThemeController, applyRuntimeTone } from '../theme/index.js';
 import { exportDiagramSvg, openSvgExportPreview } from '../export-svg/index.js';
 
@@ -276,6 +277,26 @@ function nodeAccessibleLabel(title, subtitle) {
   return subtitle === null || subtitle === '' ? title : `${title}\n${subtitle}`;
 }
 
+function applyNodeGeometry(shape, geometry) {
+  shape.classList.add('mb-node-scaled-shape');
+  shape.style.width = `${geometry.outline.width}px`;
+  shape.style.height = `${geometry.outline.height}px`;
+  shape.style.setProperty('--mb-node-shape-scale', String(geometry.scale));
+  shape.style.setProperty('--mb-node-shape-rotation', `${geometry.outline.rotation}rad`);
+  // CSS may quantize a 1.7px border to 1.5px; keep the document fold inside the outer outline.
+  if (geometry.kind === 'data') shape.style.clipPath = `inset(0 round ${geometry.outline.radiusX}px)`;
+}
+
+function geometryLabel(node, geometry) {
+  const label = el('div', 'mb-node-floating-label', node.name);
+  if (geometry) {
+    label.style.left = `${geometry.label.x - node.x}px`;
+    label.style.top = `${geometry.label.y - node.y}px`;
+    label.style.lineHeight = `${geometry.label.lineHeight}px`;
+  }
+  return label;
+}
+
 function runtimeStatusIconId(presentation) {
   if (presentation?.status === 'rejected') return 'ui.statusRejected';
   if (presentation?.status === 'completed') return 'ui.statusCompleted';
@@ -364,17 +385,21 @@ export class DiagramRenderer {
       ['arrow-failed', 'var(--mb-danger)'],
     ];
     for (const [id] of markers) {
-      const marker = svgEl('marker', { id, viewBox: '0 0 10 10', refX: '8.5', refY: '5', markerWidth: '7', markerHeight: '7', orient: 'auto-start-reverse', markerUnits: 'strokeWidth' });
-      marker.appendChild(svgEl('path', { d: 'M 0 0 L 10 5 L 0 10 z', fill: 'context-stroke' }));
-      defs.appendChild(marker);
+      for (const docked of [false, true]) {
+        const marker = svgEl('marker', { id: `${id}${docked ? '-docked' : ''}`, viewBox: '0 0 10 10', refX: docked ? '10' : '8.5', refY: '5', markerWidth: '7', markerHeight: '7', orient: 'auto-start-reverse', markerUnits: 'strokeWidth' });
+        marker.appendChild(svgEl('path', { d: 'M 0 0 L 10 5 L 0 10 z', fill: 'context-stroke' }));
+        defs.appendChild(marker);
+      }
     }
     this.edgeSvg.appendChild(defs);
 
     const runtimeDefs = svgEl('defs');
     for (const id of ['runtime-arrow-forward', 'runtime-arrow-reject', 'runtime-arrow-return', 'runtime-arrow-skip']) {
-      const marker = svgEl('marker', { id, viewBox: '0 0 10 10', refX: '8.5', refY: '5', markerWidth: '7', markerHeight: '7', orient: 'auto-start-reverse', markerUnits: 'strokeWidth' });
-      marker.appendChild(svgEl('path', { d: 'M 0 0 L 10 5 L 0 10 z', fill: 'context-stroke' }));
-      runtimeDefs.appendChild(marker);
+      for (const docked of [false, true]) {
+        const marker = svgEl('marker', { id: `${id}${docked ? '-docked' : ''}`, viewBox: '0 0 10 10', refX: docked ? '10' : '8.5', refY: '5', markerWidth: '7', markerHeight: '7', orient: 'auto-start-reverse', markerUnits: 'strokeWidth' });
+        marker.appendChild(svgEl('path', { d: 'M 0 0 L 10 5 L 0 10 z', fill: 'context-stroke' }));
+        runtimeDefs.appendChild(marker);
+      }
     }
     this.runtimeTransitionSvg.appendChild(runtimeDefs);
 
@@ -712,6 +737,7 @@ export class DiagramRenderer {
     const boundsW = maxX - minX || 1;
     const boundsH = maxY - minY || 1;
     const rect = this.viewport.getBoundingClientRect();
+    if (rect.width < 1 || rect.height < 1) return;
     const maxZoom = options.maxZoom ?? 1.15;
     const minZoom = options.minZoom ?? 0.25;
     const rawZoom = Math.min((rect.width - padding * 2) / boundsW, (rect.height - padding * 2) / boundsH, maxZoom);
@@ -767,6 +793,7 @@ export class DiagramRenderer {
       ? presenter({ model: this.model, runtime: this.runtime, appearance: this.options.runtimeAppearance })
       : createRuntimePresentation({ model: this.model, runtime: null, appearance: this.options.runtimeAppearance });
     const subtitles = this._resolveDefinitionSubtitles();
+    this._nodeGeometries = new Map(this.model.nodes.map((node) => [node.id, resolveNodeGeometry(node, NODE_DEFINITIONS[node.type])]));
     this._syncSceneBounds();
     this._renderEdges();
     this._renderRuntimeTransitions();
@@ -832,8 +859,9 @@ export class DiagramRenderer {
         labelSize: { width: metrics.width, height: metrics.height },
       });
       if (!route) return;
-      const points = route.points;
-      occupiedRuntimeRoutes.push(points);
+      const display = resolvePresentationWaypoints(route.points, this._nodeGeometries.get(transition.sourceElementId), this._nodeGeometries.get(transition.targetElementId));
+      const points = display.points;
+      occupiedRuntimeRoutes.push(route.points);
       labelObstacles.push({
         x: route.labelPoint.x - metrics.width / 2,
         y: route.labelPoint.y - metrics.height / 2,
@@ -860,7 +888,7 @@ export class DiagramRenderer {
         d: pathData,
         class: 'mb-runtime-transition-path',
         fill: 'none',
-        'marker-end': `url(#runtime-arrow-${transition.type})`,
+        'marker-end': `url(#runtime-arrow-${transition.type}${display.targetDocked ? '-docked' : ''})`,
       }));
       const labelX = route.labelPoint.x;
       const labelY = route.labelPoint.y;
@@ -900,9 +928,10 @@ export class DiagramRenderer {
     for (const edge of this.model.edges) {
       const points = edgeWaypoints(this.model, edge);
       if (points.length < 2) continue;
+      const display = resolvePresentationWaypoints(points, this._nodeGeometries.get(edge.source), this._nodeGeometries.get(edge.target));
       const corner = edge.cornerRadius ?? this.model.settings?.cornerRadius ?? 14;
       const routeStyle = edge.routeStyle || this.model.settings?.edgeStyle || 'rounded';
-      const pathData = routePathData(points, routeStyle, corner);
+      const pathData = routePathData(display.points, routeStyle, corner);
 
       const edgeStatus = this.runtimePresentation.getEdge(edge.id).status;
       const selected = this.selection?.kind === 'edge' && this.selection.id === edge.id;
@@ -916,7 +945,7 @@ export class DiagramRenderer {
         class: 'mb-edge-path',
         fill: 'none',
       };
-      if ((edge.type || 'sequenceFlow') === 'sequenceFlow') pathAttrs['marker-end'] = `url(#arrow${edgeStatus === 'idle' ? '' : `-${edgeStatus}`})`;
+      if ((edge.type || 'sequenceFlow') === 'sequenceFlow') pathAttrs['marker-end'] = `url(#arrow${edgeStatus === 'idle' ? '' : `-${edgeStatus}`}${display.targetDocked ? '-docked' : ''})`;
       const path = svgEl('path', pathAttrs);
       const hit = svgEl('path', { d: pathData, class: 'mb-edge-hit', fill: 'none' });
       let labelPosition = edgeLabelPoint(points);
@@ -1109,7 +1138,13 @@ export class DiagramRenderer {
     }
 
     if (def.kind === 'gateway') {
+      const geometry = this._nodeGeometries.get(node.id);
+      if (!geometry) {
+        nodeEl.appendChild(geometryLabel(node, geometry));
+        return;
+      }
       const shape = el('div', 'mb-gateway-shape');
+      applyNodeGeometry(shape, geometry);
       const symbol = el('span', 'mb-gateway-symbol');
       if (!this._renderCustomNodeContent(symbol, node, def, runtimeState, visual)) {
         const iconNode = visual.iconId
@@ -1131,23 +1166,19 @@ export class DiagramRenderer {
           nodeEl.appendChild(badge);
         }
       }
-      nodeEl.appendChild(el('div', 'mb-node-floating-label', node.name));
+      nodeEl.appendChild(geometryLabel(node, geometry));
       return;
     }
 
-    if (def.kind === 'data') {
-      const page = el('div', 'mb-data-object-shape');
-      page.appendChild(el('span', 'mb-data-object-lines', '≡'));
-      nodeEl.appendChild(page);
-      nodeEl.appendChild(el('div', 'mb-node-floating-label', node.name));
-      return;
-    }
-
-    if (def.kind === 'dataStore') {
-      const store = el('div', 'mb-data-store-shape');
-      store.appendChild(el('span', '', '≡'));
-      nodeEl.appendChild(store);
-      nodeEl.appendChild(el('div', 'mb-node-floating-label', node.name));
+    if (def.kind === 'data' || def.kind === 'dataStore') {
+      const geometry = this._nodeGeometries.get(node.id);
+      if (geometry) {
+        const shape = el('div', def.kind === 'data' ? 'mb-data-object-shape' : 'mb-data-store-shape');
+        applyNodeGeometry(shape, geometry);
+        shape.appendChild(el('span', def.kind === 'data' ? 'mb-data-object-lines' : '', '≡'));
+        nodeEl.appendChild(shape);
+      }
+      nodeEl.appendChild(geometryLabel(node, geometry));
       return;
     }
 
@@ -1308,6 +1339,14 @@ export class DiagramRenderer {
 
     const appendPort = (side, { target = false, onClick } = {}) => {
       const port = el('button', `mb-port mb-port-${side}${target ? ' mb-port-target' : ''}`);
+      const anchor = this._nodeGeometries.get(node.id)?.ports[side];
+      if (anchor) {
+        port.classList.add('mb-port-geometry');
+        port.style.left = `${anchor.x - node.x}px`;
+        port.style.top = `${anchor.y - node.y}px`;
+        port.style.right = 'auto';
+        port.style.bottom = 'auto';
+      }
       port.type = 'button';
       port.title = target ? '连接到此节点' : (side === 'right' ? '创建连接' : '输入连接点');
       port.tabIndex = -1;

package/dist/modules/runtime/diagnostics.js

@@ -0,0 +1,22 @@
+const DIAGNOSTIC_FIELDS = ['code', 'level', 'message', 'fieldPath', 'elementId', 'activityId', 'visitId', 'actionId', 'transitionId', 'edgeId'];
+
+export function createDiagnostic(input = {}) {
+  const diagnostic = {
+    code: String(input.code || 'runtime-issue'),
+    level: input.level === 'error' || input.level === 'info' ? input.level : 'warning',
+    message: String(input.message || ''),
+  };
+  for (const field of DIAGNOSTIC_FIELDS.slice(3)) {
+    if (input[field]) diagnostic[field] = String(input[field]);
+  }
+  return Object.freeze(diagnostic);
+}
+
+export function pushDiagnostic(list, input) {
+  if (!list) return null;
+  const diagnostic = createDiagnostic(input);
+  if (!list.some((item) => item.code === diagnostic.code && item.fieldPath === diagnostic.fieldPath && item.activityId === diagnostic.activityId && item.visitId === diagnostic.visitId && item.actionId === diagnostic.actionId && item.transitionId === diagnostic.transitionId)) {
+    list.push(diagnostic);
+  }
+  return diagnostic;
+}

package/dist/modules/runtime/index.d.ts

@@ -51,9 +51,27 @@ export interface RuntimeApprovalActionPresentation extends Omit<RuntimeApprovalA
   assetCount: number
   order: number
 }
+export interface RuntimeDiagnostic {
+  code: string
+  level: 'error' | 'warning' | 'info'
+  message: string
+  fieldPath?: string
+  elementId?: string
+  activityId?: string
+  visitId?: string
+  actionId?: string
+  transitionId?: string
+  edgeId?: string
+}
+export interface RuntimeInstant {
+  instant: number | null
+  raw: string
+  kind: 'offset' | 'z' | 'naive' | 'invalid' | 'missing'
+}
 export interface RuntimeApprovalActionSummary {
   actions: RuntimeApprovalActionPresentation[]
   latestAction: RuntimeApprovalActionPresentation | null
+  latestNonEmptyComment: RuntimeApprovalActionPresentation | null
   actionText: string
   actionSummary: string
   imageCount: number
@@ -70,6 +88,7 @@ export interface ActivityInstance {
   assigneeId?: string
   participant?: RuntimeParticipant
   visitId?: string
+  supersedesVisitId?: string
   multiInstanceId?: string
   approvalMode?: 'single' | 'all' | 'any'
   multiInstanceMode?: 'parallel' | 'sequential'
@@ -92,6 +111,7 @@ export interface RuntimeTransition {
   state?: 'active' | 'resolved'
   resolvedAt?: string
   resolvedByActivityId?: string
+  invalidatedElementIds?: string[]
   invalidatedActivityIds?: string[]
   invalidatedEdgeIds?: string[]
 }
@@ -120,10 +140,18 @@ export interface RuntimeTransitionPresentation extends RuntimeTransition {
   label: string
   latest: boolean
   issues: string[]
+  invalidatedElementIds: string[]
   invalidatedActivityIds: string[]
   invalidatedEdgeIds: string[]
   action: RuntimeApprovalActionPresentation | null
 }
+export interface ActivityVisitState {
+  status: ActivityStatus
+  records: ActivityInstance[]
+  latestRecords: ActivityInstance[]
+  visits: Array<{ id: string; round: number; records: ActivityInstance[]; effective?: boolean; superseded?: boolean }>
+  effectiveVisits: Array<{ id: string; round: number; records: ActivityInstance[]; effective?: boolean; superseded?: boolean }>
+}
 export interface NodeRuntimePresentation extends RuntimeApprovalActionSummary {
   elementId: string
   status: ActivityStatus | 'rejected'
@@ -141,13 +169,15 @@ export interface NodeRuntimePresentation extends RuntimeApprovalActionSummary {
   round: number
   records: ActivityInstance[]
   latestRecords: ActivityInstance[]
-  visits: Array<{ id: string; round: number; records: ActivityInstance[] } & RuntimeApprovalActionSummary>
+  visits: Array<{ id: string; round: number; records: ActivityInstance[]; effective: boolean; superseded: boolean } & RuntimeApprovalActionSummary>
+  effectiveVisits: Array<{ id: string; round: number; records: ActivityInstance[]; effective: boolean; superseded: boolean } & RuntimeApprovalActionSummary>
   transitions: RuntimeTransitionPresentation[]
   isReentry: boolean
   hasDetails: boolean
 }
 export interface RuntimePresentation {
   runtime: ProcessInstanceSnapshot
+  diagnostics: readonly RuntimeDiagnostic[]
   getNode(elementId: string): NodeRuntimePresentation
   getEdge(edgeId: string): { edgeId: string; status: ActivityStatus; visited: boolean; historicallyVisited: boolean; superseded: boolean }
   getAction(actionId: string): RuntimeApprovalActionPresentation | null
@@ -161,9 +191,13 @@ export interface RuntimeAppearanceLike {
   resolveTransition(transition?: { type?: string }): { tone: string }
 }
 
-export function normalizeRuntime(snapshot?: Partial<ProcessInstanceSnapshot> | null): ProcessInstanceSnapshot
-export function activityState(runtime: ProcessInstanceSnapshot | null | undefined, elementId: string): ActivityStatus
-export function createRuntimePresentation(context: { model: ProcessModel; runtime?: ProcessInstanceSnapshot | null; appearance?: RuntimeAppearanceLike | null }): RuntimePresentation
+export function parseRuntimeInstant(value?: string | null): RuntimeInstant
+export function formatRuntimeInstant(value?: string | RuntimeInstant | null): string
+export function compareRuntimeOrder(left: { instant?: number | null; index?: number } | string | null | undefined, right: { instant?: number | null; index?: number } | string | null | undefined): number
+export function normalizeRuntime(snapshot?: Partial<ProcessInstanceSnapshot> | null, options?: { diagnostics?: RuntimeDiagnostic[]; model?: ProcessModel | null }): ProcessInstanceSnapshot
+export function activityState(runtime: ProcessInstanceSnapshot | null | undefined, elementId: string, options?: { diagnostics?: RuntimeDiagnostic[] }): ActivityVisitState
+export function inspectRuntime(snapshot?: Partial<ProcessInstanceSnapshot> | null, options?: { model?: ProcessModel | null; appearance?: RuntimeAppearanceLike | null }): { runtime: ProcessInstanceSnapshot; diagnostics: readonly RuntimeDiagnostic[] }
+export function createRuntimePresentation(context: { model: ProcessModel; runtime?: ProcessInstanceSnapshot | null; appearance?: RuntimeAppearanceLike | null; diagnostics?: RuntimeDiagnostic[] }): RuntimePresentation
 export function demoRuntime(): ProcessInstanceSnapshot
 
 export type RuntimeElement = BpmnNode | BpmnEdge