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

package/dist/modules/viewer/timeline.js

@@ -0,0 +1,276 @@
+import { createDefaultIconRegistry, createIconElement } from '../icons/index.js';
+import { renderRuntimeApprovalContent } from './runtime-content.js';
+import { applyRuntimeTone } from '../theme/index.js';
+
+function element(tag, className, text) {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  if (text !== undefined) node.textContent = text;
+  return node;
+}
+
+function statusIconId(status) {
+  if (status === 'completed') return 'ui.statusCompleted';
+  if (status === 'active') return 'ui.statusActive';
+  if (status === 'failed') return 'ui.statusFailed';
+  if (status === 'rejected') return 'ui.statusRejected';
+  if (['skipped', 'cancelled'].includes(status)) return 'ui.statusSkipped';
+  return 'ui.statusIdle';
+}
+
+function icon(registry, id, className = 'nova-icon nova-icon-md') {
+  const host = element('span', className);
+  const svg = createIconElement(registry.resolve(id, null), { className: 'nova-icon-svg' });
+  if (svg) host.appendChild(svg);
+  return host;
+}
+
+function resultText(item) {
+  const outcome = item.outcome;
+  return { approved: '已同意', rejected: '已驳回', returned: '已退回', submitted: '已提交', pending: '待处理' }[outcome] || item.statusLabel || '';
+}
+
+function formatTime(value) {
+  if (!value) return '';
+  return String(value).replace('T', ' ');
+}
+
+function renderParticipants(item) {
+  if ((item.participants || []).length < 2) return null;
+  const details = element('details', 'mb-runtime-timeline-participants');
+  const summary = element('summary', '', `查看处理人 · ${item.participants.length}人`);
+  const list = element('div', 'mb-runtime-timeline-participant-list');
+  item.participants.forEach((participant) => list.appendChild(element('span', '', participant.name)));
+  details.append(summary, list);
+  return details;
+}
+
+function renderTimelineAction({ container, action, resolveAsset, onAssetPreview, appearance }) {
+  const actionAppearance = appearance?.resolveAction(action) || { label: action.label, tone: 'neutral' };
+  const article = element('article', `mb-runtime-timeline-action type-${action.type}`);
+  applyRuntimeTone(article, actionAppearance.tone);
+  const header = element('header', 'mb-runtime-timeline-action-head');
+  header.append(
+    element('strong', '', actionAppearance.label),
+    element('span', '', [action.actor?.name, formatTime(action.occurredAt)].filter(Boolean).join(' · ')),
+  );
+  article.appendChild(header);
+  if (action.targets?.length) article.appendChild(element('div', 'mb-runtime-action-targets', `目标：${action.targets.map((target) => target.name).join('、')}`));
+  renderRuntimeApprovalContent({
+    container: article,
+    action,
+    resolveAsset,
+    compact: true,
+    onPreview: onAssetPreview,
+  });
+  container.appendChild(article);
+}
+
+function renderTimelineActions({ item, resolveAsset, onAssetPreview, appearance }) {
+  const actions = item.actions || [];
+  if (!actions.length) return null;
+  const host = element('div', 'mb-runtime-timeline-actions');
+  const newest = actions.at(-1);
+  renderTimelineAction({ container: host, action: newest, resolveAsset, onAssetPreview, appearance });
+  if (actions.length > 1) {
+    const details = element('details', 'mb-runtime-timeline-action-history');
+    const summary = element('summary', '', `查看更早操作 · ${actions.length - 1} 条`);
+    const body = element('div', 'mb-runtime-timeline-action-history-body');
+    [...actions].slice(0, -1).reverse().forEach((action) => renderTimelineAction({ container: body, action, resolveAsset, onAssetPreview, appearance }));
+    details.append(summary, body);
+    host.appendChild(details);
+  }
+  return host;
+}
+
+function renderActivityItem({ item, registry, conditionLabel, onItemClick, onDetailsRequest, resolveAsset, onAssetPreview, appearance, compact = false }) {
+  const article = element('article', `mb-runtime-timeline-item status-${item.status}${item.predicted ? ' is-predicted' : ''}${compact ? ' is-group-child' : ''}`);
+  applyRuntimeTone(article, appearance?.resolveStatus(item.status));
+  article.dataset.traceItemId = item.id;
+  article.dataset.elementId = item.elementId;
+  const rail = element('div', 'mb-runtime-timeline-rail');
+  rail.appendChild(icon(registry, statusIconId(item.status), 'nova-icon nova-icon-lg'));
+  const card = element('div', 'mb-runtime-timeline-card');
+  const trigger = element('button', 'mb-runtime-timeline-card-main');
+  trigger.type = 'button';
+  trigger.setAttribute('aria-label', `${item.name}，${item.statusLabel}${item.summary ? `，${item.summary}` : ''}${item.comment ? `，${item.comment}` : ''}`);
+  const heading = element('div', 'mb-runtime-timeline-heading');
+  const title = element('strong', '', item.name);
+  if (item.round > 1) title.appendChild(element('small', '', `第 ${item.round} 次`));
+  heading.append(title, element('em', '', resultText(item)));
+  const meta = element('div', 'mb-runtime-timeline-meta');
+  meta.append(element('span', '', item.summary || (item.automated ? item.statusLabel : '')), element('time', '', formatTime(item.time)));
+  trigger.append(heading, meta);
+  trigger.addEventListener('click', (event) => {
+    onItemClick?.(item, event);
+    onDetailsRequest?.(item, event.currentTarget, event);
+  });
+  card.appendChild(trigger);
+  const actions = renderTimelineActions({ item, resolveAsset, onAssetPreview, appearance });
+  if (actions) card.appendChild(actions);
+  const content = element('div', 'mb-runtime-timeline-content');
+  if (conditionLabel) content.appendChild(element('span', 'mb-runtime-timeline-condition', conditionLabel));
+  content.appendChild(card);
+  const participants = renderParticipants(item);
+  if (participants) content.appendChild(participants);
+  article.append(rail, content);
+  return article;
+}
+
+function renderTransitionItem({ item, registry, onItemClick, onTransitionRequest, resolveAsset, onAssetPreview, appearance }) {
+  const article = element('article', `mb-runtime-timeline-item mb-runtime-timeline-transition type-${item.type}`);
+  applyRuntimeTone(article, appearance?.resolveTransition(item).tone);
+  article.dataset.traceItemId = item.id;
+  const rail = element('div', 'mb-runtime-timeline-rail');
+  rail.appendChild(icon(registry, 'ui.statusRejected', 'nova-icon nova-icon-lg'));
+  const card = element('div', 'mb-runtime-timeline-transition-card');
+  const button = element('button', 'mb-runtime-timeline-transition-main');
+  button.type = 'button';
+  button.append(
+    element('strong', '', item.name),
+    element('span', '', [item.summary, formatTime(item.time)].filter(Boolean).join(' · ')),
+  );
+  button.addEventListener('click', (event) => {
+    onItemClick?.(item, event);
+    onTransitionRequest?.(item, event.currentTarget, event);
+  });
+  card.appendChild(button);
+  const action = item.actions?.[0];
+  if (action) {
+    renderRuntimeApprovalContent({ container: card, action, resolveAsset, compact: true, onPreview: onAssetPreview });
+  } else if (item.comment) card.appendChild(element('p', 'mb-runtime-action-paragraph', item.comment));
+  article.append(rail, card);
+  return article;
+}
+
+function renderParallelGroup({ group, children, registry, linkByTarget, onItemClick, onDetailsRequest, resolveAsset, onAssetPreview, appearance }) {
+  const details = element('details', `mb-runtime-timeline-group status-${group.status}`);
+  applyRuntimeTone(details, appearance?.resolveStatus(group.status));
+  details.dataset.traceGroupId = group.id;
+  const summary = element('summary', 'mb-runtime-timeline-group-summary');
+  summary.append(
+    icon(registry, statusIconId(group.status), 'nova-icon nova-icon-lg'),
+    element('strong', '', group.label),
+    element('span', '', `${group.completed}/${group.total} 已完成`),
+  );
+  const body = element('div', 'mb-runtime-timeline-group-body');
+  children.sort((a, b) => a.order - b.order).forEach((item) => body.appendChild(renderActivityItem({
+    item,
+    registry,
+    conditionLabel: linkByTarget.get(item.id)?.label || '',
+    onItemClick,
+    onDetailsRequest,
+    resolveAsset,
+    onAssetPreview,
+    appearance,
+    compact: true,
+  })));
+  details.append(summary, body);
+  return details;
+}
+
+export function renderDefaultRuntimeTimeline({
+  container,
+  model,
+  projection,
+  title,
+  description,
+  iconRegistry,
+  onItemClick,
+  onDetailsRequest,
+  onTransitionRequest,
+  resolveAsset,
+  onAssetPreview,
+  appearance,
+}) {
+  const registry = iconRegistry || createDefaultIconRegistry();
+  const root = element('section', 'mb-runtime-timeline');
+  root.setAttribute('aria-label', `${title || model.name || '流程'}审批轨迹`);
+  const list = element('div', 'mb-runtime-timeline-list');
+  const linkByTarget = new Map(projection.links.map((link) => [link.targetItemId, link]));
+  const groupedIds = new Set(projection.groups.flatMap((group) => group.itemIds));
+  const sequence = [
+    ...projection.items.filter((item) => !groupedIds.has(item.id)),
+    ...projection.groups.map((group) => ({ ...group, kind: 'parallel-group' })),
+  ].sort((a, b) => (a.order - b.order) || a.id.localeCompare(b.id));
+
+  sequence.forEach((entry) => {
+    if (entry.kind === 'parallel-group') {
+      list.appendChild(renderParallelGroup({
+        group: entry,
+        children: entry.itemIds.map((id) => projection.items.find((item) => item.id === id)).filter(Boolean),
+        registry,
+        linkByTarget,
+        onItemClick,
+        onDetailsRequest,
+        resolveAsset,
+        onAssetPreview,
+        appearance,
+      }));
+      return;
+    }
+    if (entry.kind === 'transition') {
+      list.appendChild(renderTransitionItem({ item: entry, registry, onItemClick, onTransitionRequest, resolveAsset, onAssetPreview, appearance }));
+      return;
+    }
+    list.appendChild(renderActivityItem({
+      item: entry,
+      registry,
+      conditionLabel: linkByTarget.get(entry.id)?.label || '',
+      onItemClick,
+      onDetailsRequest,
+      resolveAsset,
+      onAssetPreview,
+      appearance,
+    }));
+  });
+  if (!sequence.length) list.appendChild(element('div', 'mb-runtime-timeline-empty', '暂无运行轨迹'));
+  if (title !== null || description !== null) {
+    const header = element('header', 'mb-runtime-timeline-header');
+    if (title !== null) header.appendChild(element('strong', '', title));
+    if (description !== null) header.appendChild(element('span', '', description));
+    root.appendChild(header);
+  }
+  root.appendChild(list);
+  container.appendChild(root);
+  return () => root.remove();
+}
+
+export class RuntimeTimelineHost {
+  constructor(container, options = {}) {
+    this.container = container;
+    this.options = options;
+    this.iconRegistry = options.iconRegistry || createDefaultIconRegistry();
+    this.selection = null;
+    this._cleanup = null;
+    this.container.innerHTML = '';
+    this.container.classList.remove('mb-diagram-host');
+    this.container.classList.add('mb-runtime-timeline-host');
+    this.render();
+  }
+
+  render() {
+    const scrollTop = this.container.scrollTop;
+    this._cleanup?.();
+    this.container.replaceChildren();
+    const renderer = this.options.renderer || renderDefaultRuntimeTimeline;
+    this._cleanup = renderer({ container: this.container, iconRegistry: this.iconRegistry, ...this.options }) || null;
+    this.container.scrollTop = scrollTop;
+  }
+
+  setSelection(selection) {
+    this.selection = selection;
+    this.container.querySelectorAll('[data-element-id]').forEach((node) => node.classList.toggle('is-selected', selection?.kind === 'node' && node.dataset.elementId === selection.id));
+  }
+
+  fitView() { this.container.scrollTop = 0; }
+  zoomBy() {}
+  actualSize() {}
+
+  destroy() {
+    this._cleanup?.();
+    this._cleanup = null;
+    this.container.innerHTML = '';
+    this.container.classList.remove('mb-runtime-timeline-host');
+  }
+}

package/dist/selection-layout.js

@@ -3,7 +3,7 @@ import {
   autoLayout,
   elementScopeId,
   getNode,
-} from '@bpmn-nova/core';
+} from './modules/core/index.js';
 
 const LAYOUT_KINDS = new Set(['event', 'task', 'container', 'gateway']);
 const GROUPABLE_KINDS = new Set(['event', 'task', 'container', 'gateway', 'data', 'dataStore', 'annotation']);