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

package/dist/modules/viewer/runtime-trace.js

@@ -6,29 +6,34 @@ import {
   getScopeGraph,
   NODE_DEFINITIONS,
 } from '../core/index.js';
-import { createRuntimePresentation, normalizeRuntime } from '../runtime/index.js';
+import { compareRuntimeOrder, createRuntimePresentation, normalizeRuntime, parseRuntimeInstant } from '../runtime/index.js';
 
 const HUMAN_TASKS = new Set(['userTask', 'manualTask', 'callActivity']);
 const AUTOMATED_TASKS = new Set(['serviceTask', 'scriptTask', 'businessRuleTask', 'sendTask', 'receiveTask']);
 const CONDITIONAL_GATEWAYS = new Set(['exclusiveGateway', 'inclusiveGateway', 'eventBasedGateway', 'complexGateway']);
 const ABNORMAL_TRANSITIONS = new Set(['reject', 'return']);
 
-function timestamp(value, fallback = 0) {
-  if (!value) return fallback;
-  const parsed = Date.parse(String(value).replace(' ', 'T'));
-  return Number.isFinite(parsed) ? parsed : fallback;
+function timestamp(value) {
+  return parseRuntimeInstant(value).instant;
 }
 
-function recordOrder(record, index = 0) {
-  return timestamp(record.startTime || record.endTime, index);
+function recordOrder(record) {
+  return timestamp(record.startTime || record.endTime);
 }
 
-function transitionOrder(transition, index = 0) {
-  return timestamp(transition.occurredAt || transition.time, index);
+function transitionOrder(transition) {
+  return timestamp(transition.occurredAt || transition.time);
 }
 
-function edgeVisitOrder(visit, index = 0) {
-  return timestamp(visit.occurredAt || visit.time, index);
+function edgeVisitOrder(visit) {
+  return timestamp(visit.occurredAt || visit.time);
+}
+
+function byTime(left, right) {
+  return compareRuntimeOrder(
+    { instant: left.order ?? left.instant ?? null, index: left.index ?? left.originalIndex ?? 0 },
+    { instant: right.order ?? right.instant ?? null, index: right.index ?? right.originalIndex ?? 0 },
+  );
 }
 
 function visitStatus(records) {
@@ -186,8 +191,8 @@ function inferVisitedEdges(model, runtime, outgoing) {
   ]);
   if (ids.size) return ids;
   const ordered = [...runtime.activities]
-    .map((record, index) => ({ record, order: recordOrder(record, index) }))
-    .sort((a, b) => a.order - b.order)
+    .map((record, index) => ({ record, order: recordOrder(record), index }))
+    .sort(byTime)
     .map(({ record }) => record.elementId)
     .filter((id, index, values) => id && (!index || id !== values[index - 1]));
   for (let index = 0; index < ordered.length - 1; index += 1) {
@@ -198,9 +203,9 @@ function inferVisitedEdges(model, runtime, outgoing) {
 
 function latestRuntimeElement(runtime, nodeMap) {
   return runtime.activities
-    .map((record, index) => ({ record, order: recordOrder(record, index) }))
+    .map((record, index) => ({ record, order: recordOrder(record), index }))
     .filter(({ record }) => nodeMap.has(record.elementId) && !isGateway(nodeMap.get(record.elementId)))
-    .sort((a, b) => a.order - b.order)
+    .sort(byTime)
     .at(-1)?.record?.elementId || null;
 }
 
@@ -290,11 +295,11 @@ function projectRuntime(runtime, graphModel, presentation) {
     if (sourcePresentations.every((item) => item.historicallyVisited)) projectedVisited.push(edge.id);
     const visits = sources.map((id) => runtime.edgeVisits
       .filter((visit) => visit.edgeId === id)
-      .map((visit, index) => ({ visit, order: edgeVisitOrder(visit, index) }))
-      .sort((a, b) => a.order - b.order)
+      .map((visit, index) => ({ visit, order: edgeVisitOrder(visit), index }))
+      .sort(byTime)
       .at(-1)).filter(Boolean);
     if (visits.length === sources.length) {
-      const latest = visits.sort((a, b) => a.order - b.order).at(-1);
+      const latest = visits.sort(byTime).at(-1);
       projectedEdgeVisits.push({
         ...latest.visit,
         id: `TraceVisit_${edge.id}`,
@@ -324,27 +329,25 @@ function buildVisitItems(model, runtime, presentation, predictedNodeIds, ordered
     if (!node || isGateway(node) || !isVisibleTraceNode(node, { actual: true, ...options })) return;
     const visitKey = record.visitId || record.multiInstanceId || record.id || String(index);
     const key = `${record.elementId}:${visitKey}`;
-    if (!groups.has(key)) groups.set(key, { key, node, visitId: visitKey, records: [], order: recordOrder(record, index), originalIndex: index });
+    if (!groups.has(key)) groups.set(key, { key, node, visitId: visitKey, records: [], order: recordOrder(record), originalIndex: index });
     const group = groups.get(key);
     group.records.push(record);
-    group.order = Math.min(group.order, recordOrder(record, index));
+    const nextOrder = recordOrder(record);
+    if (nextOrder != null) group.order = group.order == null ? nextOrder : Math.min(group.order, nextOrder);
   });
   const rounds = new Map();
-  const items = [...groups.values()].sort((a, b) => (a.order - b.order) || (a.originalIndex - b.originalIndex)).map((group) => {
+  const items = [...groups.values()].sort(byTime).map((group) => {
     const round = (rounds.get(group.node.id) || 0) + 1;
     rounds.set(group.node.id, round);
     const status = visitStatus(group.records);
     const participants = uniqueParticipants(group.records);
     const startTime = group.records.map((record) => record.startTime).filter(Boolean).sort()[0];
     const endTime = group.records.map((record) => record.endTime).filter(Boolean).sort().at(-1);
-    const actions = (presentation.getNode(group.node.id).visits.find((visit) => visit.id === group.visitId)?.actions || [])
-      .filter((action) => !transitionActionIds.has(action.id));
-    const latestAction = [...actions].reverse().find((action) => action.plainText || action.assetCount) || actions.at(-1) || null;
+    const visitPresentation = presentation.getNode(group.node.id).visits.find((visit) => visit.id === group.visitId);
+    const actions = (visitPresentation?.actions || []).filter((action) => !transitionActionIds.has(action.id));
+    const latestAction = visitPresentation?.latestAction || actions.at(-1) || null;
     const imageCount = actions.reduce((sum, action) => sum + action.imageCount, 0);
     const fileCount = actions.reduce((sum, action) => sum + action.fileCount, 0);
-    const assetSummary = latestAction
-      ? [latestAction.imageCount ? `${latestAction.imageCount} 张图片` : '', latestAction.fileCount ? `${latestAction.fileCount} 个附件` : ''].filter(Boolean).join(' · ')
-      : '';
     return {
       id: `TraceItem_${group.node.id}_${group.visitId}`,
       kind: isStartOrEnd(group.node) ? 'milestone' : 'activity',
@@ -362,7 +365,7 @@ function buildVisitItems(model, runtime, presentation, predictedNodeIds, ordered
       actions,
       latestAction,
       actionText: latestAction?.plainText || '',
-      actionSummary: latestAction ? [latestAction.label, latestAction.plainText, assetSummary].filter(Boolean).join(' · ') : '',
+      actionSummary: visitPresentation?.actionSummary || (latestAction ? [latestAction.label, latestAction.plainText].filter(Boolean).join(' · ') : ''),
       imageCount,
       fileCount,
       assetCount: imageCount + fileCount,
@@ -375,7 +378,7 @@ function buildVisitItems(model, runtime, presentation, predictedNodeIds, ordered
       order: group.order,
     };
   });
-  let predictedOrder = Math.max(0, ...items.map((item) => item.order)) + 1;
+  let predictedOrder = Math.max(0, ...items.map((item) => item.order).filter((value) => Number.isFinite(value))) + 1;
   for (const nodeId of orderedPredictedIds) {
     if (!predictedNodeIds.has(nodeId) || items.some((item) => item.elementId === nodeId)) continue;
     const node = nodeMap.get(nodeId);
@@ -435,7 +438,7 @@ function buildVisitItems(model, runtime, presentation, predictedNodeIds, ordered
       order: transitionOrder(transition, 0),
     });
   }
-  return items.sort((a, b) => (a.order - b.order) || a.id.localeCompare(b.id));
+  return items.sort((left, right) => byTime(left, right) || left.id.localeCompare(right.id));
 }
 
 function buildTimelineLinks(items, maps, historicalEdgeIds, allowedEdgeIds) {

package/dist/modules/viewer/timeline.js

@@ -1,4 +1,5 @@
 import { createDefaultIconRegistry, createIconElement } from '../icons/index.js';
+import { formatRuntimeInstant } from '../runtime/index.js';
 import { renderRuntimeApprovalContent } from './runtime-content.js';
 import { applyRuntimeTone } from '../theme/index.js';
 
@@ -31,8 +32,7 @@ function resultText(item) {
 }
 
 function formatTime(value) {
-  if (!value) return '';
-  return String(value).replace('T', ' ');
+  return formatRuntimeInstant(value);
 }
 
 function renderParticipants(item) {

package/dist/panel-selection.js

@@ -0,0 +1,60 @@
+// Snapshot only public data. Never freeze the Controller, Viewer, or their source models.
+function immutableCopy(value, seen = new WeakMap()) {
+  if (!value || typeof value !== 'object') return value;
+  if (seen.has(value)) return seen.get(value);
+  const copy = Array.isArray(value) ? [] : {};
+  seen.set(value, copy);
+  for (const key of Object.keys(value)) {
+    Object.defineProperty(copy, key, {
+      value: immutableCopy(value[key], seen),
+      enumerable: true,
+      configurable: true,
+      writable: true,
+    });
+  }
+  return Object.freeze(copy);
+}
+
+const EMPTY_SELECTION = Object.freeze({ selection: null, selectedElement: null, trace: null });
+
+/** Resolve current facts rather than retaining a clicked node or an old Runtime snapshot. */
+export function createPanelSelection(studio, viewer, previousTrace = null) {
+  if (!viewer) {
+    const selection = studio.selection;
+    const selectedElement = studio.getSelectedElement();
+    if (!selection || !selectedElement) return EMPTY_SELECTION;
+    return immutableCopy({ selection, selectedElement, trace: null });
+  }
+
+  // An explicit clear must stay cleared across refreshes, even when the Viewer still
+  // has an older visual selection (for example after a selected visit disappears).
+  if (!previousTrace) return EMPTY_SELECTION;
+  const current = viewer._resolveTraceClick(previousTrace);
+  if (!current) return EMPTY_SELECTION;
+  const { viewer: liveViewer, originalEvent: _originalEvent, ...traceData } = current;
+  const selection = current.element
+    ? { kind: current.targetType === 'edge' ? 'edge' : 'node', id: current.element.id }
+    : null;
+  const snapshot = immutableCopy({ selection, selectedElement: current.element || null, trace: traceData });
+  return Object.freeze({
+    ...snapshot,
+    trace: Object.freeze({ ...snapshot.trace, viewer: liveViewer }),
+  });
+}
+
+/** Ignore fresh object identity so refreshes and paired timeline callbacks notify only once. */
+export function samePanelSelection(previous, next) {
+  const pairs = new WeakMap();
+  const same = (left, right) => {
+    if (Object.is(left, right)) return true;
+    if (!left || !right || typeof left !== 'object' || typeof right !== 'object') return false;
+    if (pairs.has(left)) return pairs.get(left) === right;
+    pairs.set(left, right);
+    const keys = Object.keys(left);
+    if (keys.length !== Object.keys(right).length) return false;
+    return keys.every((key) => Object.hasOwn(right, key) && (key === 'viewer'
+      ? left[key] === right[key]
+      : same(left[key], right[key])));
+  };
+  return same(previous, next);
+}