@bpmn-nova/studio 0.3.3-preview → 0.3.5-preview

package/dist/modules/viewer/index.js

@@ -394,6 +394,8 @@ export class BpmnViewer {
     this.projectedRuntime = null;
     this.runtimePresentation = null;
     this.selection = null;
+    this._sidebarTransitionActive = false;
+    this._sidebarViewport = null;
     this._detailsCleanup = null;
     this._detailsMotion = null;
     this._detailsRoot = null;
@@ -424,11 +426,7 @@ export class BpmnViewer {
       throw error;
     }
     this._resizeObserver = typeof ResizeObserver === 'function'
-      ? new ResizeObserver(() => {
-        if (this.projection !== 'auto') return;
-        const next = this._resolveProjection();
-        if (next !== this.activeProjection) this.refresh();
-      })
+      ? new ResizeObserver(() => this._refreshAutoProjection())
       : null;
     this._resizeObserver?.observe(options.container);
   }
@@ -436,10 +434,29 @@ export class BpmnViewer {
   _resolveProjection() {
     if (this.projection !== 'auto') return this.projection;
     if (!this.runtime) return 'standard';
+    if (this._sidebarTransitionActive) return this.activeProjection;
     const width = this.container.clientWidth || this.container.getBoundingClientRect?.().width || 0;
     return width > 0 && width < 720 ? 'compact' : 'approval';
   }
 
+  // The Shell owns the transition. Do not replace the renderer at intermediate widths.
+  _setSidebarTransitionActive(active) {
+    if (this._sidebarTransitionActive === Boolean(active)) return;
+    this._sidebarTransitionActive = Boolean(active);
+    if (active) {
+      if (this.activeProjection !== 'compact') this._sidebarViewport = this.renderer?.getViewportState?.() || this._sidebarViewport;
+    } else this._refreshAutoProjection();
+  }
+
+  _refreshAutoProjection() {
+    if (this._sidebarTransitionActive || this.projection !== 'auto') return;
+    const next = this._resolveProjection();
+    if (next === this.activeProjection) return;
+    if (this.activeProjection !== 'compact') this._sidebarViewport = this.renderer?.getViewportState?.() || this._sidebarViewport;
+    this.refresh();
+    if (this.activeProjection !== 'compact' && this._sidebarViewport) this.renderer?.setViewportState?.(this._sidebarViewport);
+  }
+
   _rebuildProjection() {
     const previousProjection = this.activeProjection;
     this.activeProjection = this._resolveProjection();
@@ -494,33 +511,59 @@ export class BpmnViewer {
     return [];
   }
 
-  _emitTraceClick(payload) {
-    let element = payload.element || null;
-    if (element && payload.targetType === 'edge') {
-      const sourceIds = element.sourceEdgeIds?.length ? element.sourceEdgeIds : [element.id];
+  _resolveTraceClick(payload) {
+    if (!payload) return null;
+    const targetType = payload.targetType;
+    const transitionId = payload.transition?.id || payload.traceItem?.transitionId;
+    const transition = targetType === 'transition' && transitionId
+      ? this.runtimePresentation.getTransition(transitionId)
+      : null;
+    if (targetType === 'transition' && !transition) return null;
+    const elementId = transition?.sourceElementId || payload.elementId || payload.element?.id || payload.traceItem?.elementId;
+    let selectedElement;
+    if (targetType === 'edge') {
+      const current = this.projectedModel.edges.find((edge) => edge.id === elementId)
+        || this.model.edges.find((edge) => edge.id === elementId);
+      if (!current) return null;
+      const sourceIds = current.sourceEdgeIds?.length ? current.sourceEdgeIds : [current.id];
       const sourceEdges = sourceIds.map((id) => this.model.edges.find((edge) => edge.id === id)).filter(Boolean);
-      element = sourceEdges.find((edge) => element.name && edge.name === element.name) || sourceEdges[0] || element;
-    } else if (element?.id && payload.targetType !== 'edge') {
-      element = this.model.nodes.find((node) => node.id === element.id) || element;
-    }
-    const presentation = payload.presentation || (element?.id && payload.targetType !== 'edge'
-      ? this.runtimePresentation.getNode(element.id)
-      : null);
-    this.onTraceClick({
-      targetType: payload.targetType,
-      elementId: payload.elementId || element?.id,
-      element,
-      visitId: payload.visitId ?? payload.traceItem?.visitId ?? null,
-      traceItem: payload.traceItem || null,
-      transition: payload.transition || null,
+      selectedElement = sourceEdges.find((edge) => current.name && edge.name === current.name) || sourceEdges[0] || current;
+    } else selectedElement = this.model.nodes.find((node) => node.id === elementId) || null;
+    if (!selectedElement && !transition) return null;
+    const presentation = selectedElement?.id && targetType !== 'edge'
+      ? this.runtimePresentation.getNode(selectedElement.id)
+      : null;
+    const visitId = payload.visitId ?? payload.traceItem?.visitId ?? null;
+    const traceItems = this.traceProjection?.items || [];
+    const traceItem = traceItems.find((item) => payload.traceItem?.id && item.id === payload.traceItem.id)
+      || (targetType === 'transition' ? traceItems.find((item) => item.transitionId === transitionId) : null)
+      || (visitId ? traceItems.find((item) => item.elementId === elementId && item.visitId === visitId) : null)
+      || null;
+    const visit = visitId ? presentation?.visits?.find((item) => item.id === visitId) : null;
+    if (targetType === 'visit' && visitId && !traceItem && !visit) return null;
+    const records = traceItem?.records || visit?.records;
+    return {
+      targetType,
+      elementId: selectedElement?.id || elementId,
+      element: selectedElement,
+      visitId,
+      traceItem,
+      transition,
       presentation,
-      activityInstances: this._activityInstancesFor({ traceItem: payload.traceItem, presentation }),
-      actions: payload.traceItem?.actions || (payload.transition?.action ? [payload.transition.action] : presentation?.actions) || [],
+      activityInstances: records ? [...records] : this._activityInstancesFor({ presentation }),
+      actions: traceItem?.actions || visit?.actions || (transition?.action ? [transition.action] : presentation?.actions) || [],
       runtime: this.runtime,
       projection: this.activeProjection,
       originalEvent: payload.originalEvent,
       viewer: this,
-    });
+    };
+  }
+
+  _emitTraceClick(payload) {
+    const resolved = this._resolveTraceClick(payload);
+    if (!resolved) return;
+    this.options._onPanelSelection?.(resolved);
+    this.onTraceClick(resolved);
   }
 
   _mountRenderer() {
@@ -554,7 +597,7 @@ export class BpmnViewer {
         onDetailsRequest: (item, anchor, event) => {
           const node = this.model.nodes.find((candidate) => candidate.id === item.elementId);
           if (!node) return;
-          this._select('node', node, event, { emitTrace: false });
+          this._select('node', node, event, { emitTrace: false, traceItem: item });
           const presentation = this.runtimePresentation.getNode(node.id);
           if (presentation.hasDetails && this.runtimeDetailsOptions.autoOpen) {
             this._openRuntimeDetails(node, presentation, anchor, {
@@ -564,6 +607,7 @@ export class BpmnViewer {
         },
         onTransitionRequest: (item, anchor, event) => {
           const transition = this.runtimePresentation.getTransition(item.transitionId);
+          this.options._onPanelSelection?.(this._resolveTraceClick({ targetType: 'transition', transition, traceItem: item, originalEvent: event }));
           if (this.runtimeDetailsOptions.autoOpen) {
             this._openRuntimeTransitionDetails(transition, anchor, {
               restoreFocusVisible: event ? event.detail === 0 : Boolean(anchor?.matches?.(':focus-visible')),
@@ -602,17 +646,19 @@ export class BpmnViewer {
     });
   }
 
-  _select(kind, element, originalEvent = undefined, { emitTrace = true } = {}) {
+  _select(kind, element, originalEvent = undefined, { emitTrace = true, traceItem = null } = {}) {
     this.selection = { kind, id: element.id };
     this.renderer.setSelection(this.selection);
     const presentation = kind === 'node' ? this.runtimePresentation.getNode(element.id) : null;
     this.onElementClick({ kind, element, runtime: this.runtime, presentation });
     if (emitTrace) this._emitTraceClick({ targetType: kind, element, presentation, originalEvent });
+    else this.options._onPanelSelection?.(this._resolveTraceClick({ targetType: traceItem ? 'visit' : kind, element, presentation, traceItem, originalEvent }));
   }
 
   clearSelection() {
     this.selection = null;
     this.renderer.setSelection(null);
+    this.options._onPanelSelection?.(null);
     this.onElementClick(null);
   }
 
@@ -923,6 +969,7 @@ export class BpmnViewer {
     this._rebuildProjection();
     this._mountRenderer();
     if (this.selection) this.renderer.setSelection?.(this.selection);
+    this.options._onPanelSelection?.();
   }
 
   setModel(model) { this.model = model; this._svgExportAssetCache.clear(); this.refresh(); }
@@ -938,23 +985,25 @@ export class BpmnViewer {
     this.refresh();
     requestAnimationFrame(() => this.renderer.fitView());
   }
-  setDisplayOptions({ timeline, runtimeDetails, runtimeTraceOptions, runtimeAssetResolver } = {}) {
+  setDisplayOptions({ timeline, runtimeDetails, runtimeTraceOptions, runtimeAssetResolver, replace = false } = {}) {
     let changed = false;
     if (runtimeAssetResolver !== undefined) {
       this.runtimeAssetResolver = runtimeAssetResolver || null;
       this._svgExportAssetCache.clear();
       changed = true;
     }
-    if (runtimeTraceOptions !== undefined) {
-      this.runtimeTraceOptions = { ...this.runtimeTraceOptions, ...(runtimeTraceOptions || {}) };
+    if (replace || runtimeTraceOptions !== undefined) {
+      this.runtimeTraceOptions = replace
+        ? { ...(runtimeTraceOptions || {}) }
+        : { ...this.runtimeTraceOptions, ...(runtimeTraceOptions || {}) };
       changed = true;
     }
-    if (timeline !== undefined) {
-      this.timelineOptions = mergeTimelineOptions(this.timelineOptions, timeline || {});
+    if (replace || timeline !== undefined) {
+      this.timelineOptions = mergeTimelineOptions(replace ? {} : this.timelineOptions, timeline || {});
       changed = true;
     }
-    if (runtimeDetails !== undefined) {
-      this.runtimeDetailsOptions = mergeRuntimeDetailsOptions(this.runtimeDetailsOptions, runtimeDetails || {});
+    if (replace || runtimeDetails !== undefined) {
+      this.runtimeDetailsOptions = mergeRuntimeDetailsOptions(replace ? {} : this.runtimeDetailsOptions, runtimeDetails || {});
       changed = true;
     }
     if (changed) this.refresh();
@@ -1013,6 +1062,8 @@ export class BpmnViewer {
   fitView() { this.renderer.fitView(); }
   zoomBy(delta) { this.renderer.zoomBy(delta); }
   destroy() {
+    this._sidebarTransitionActive = false;
+    this._sidebarViewport = null;
     this._svgExportPreview?.close?.({ immediate: true });
     this._svgExportPreview = null;
     this._svgExportAssetCache.clear();

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);
+}