@nocobase/app-template-default 1.0.0-beta.75 → 1.0.0-beta.77

package/client/components/flow-layout.ts

@@ -18,6 +18,10 @@ export interface FlowDiagramNode {
   readonly visited?: boolean;
   readonly highlighted?: boolean;
   readonly className?: string;
+  /** the caller's rendered content draws the whole node, without the default box or state tint. */
+  readonly bare?: boolean;
+  readonly minimapShape?: 'pill' | 'card';
+  readonly minimapColor?: string;
 }
 
 export interface FlowDiagramEdge {
@@ -32,6 +36,10 @@ export interface FlowDiagramEdge {
   readonly visited?: boolean;
   readonly highlighted?: boolean;
   readonly dashed?: boolean;
+  /** a secondary route drawn thin and light, so the main path reads first. */
+  readonly faint?: boolean;
+  /** hover and accessible text for an edge that shows no label on the canvas. */
+  readonly title?: string;
 }
 
 export type FlowDiagramDirection = 'RIGHT' | 'DOWN';
@@ -57,6 +65,28 @@ export interface FlowDiagramLayout {
   })[];
 }
 
+/** Wrap condition labels without splitting words. */
+export function flowLabelLines(text: string): string[] {
+  const lines: string[] = [];
+  let line = '',
+    width = 0;
+  for (const token of text.match(/[a-zA-Z0-9_]+|[^a-zA-Z0-9_]/g) ?? []) {
+    const tokenWidth = [...token].reduce(
+      (n, char) => n + (char.charCodeAt(0) > 255 ? 14 : 7),
+      0,
+    );
+    if (line && width + tokenWidth > 252) {
+      lines.push(line.trim());
+      line = '';
+      width = 0;
+    }
+    line += token;
+    width += tokenWidth;
+  }
+  if (line.trim()) lines.push(line.trim());
+  return lines;
+}
+
 type ElkConstructor = new (args?: ELKConstructorArguments) => ELK;
 let elkPromise: Promise<ELK> | undefined;
 
@@ -73,6 +103,7 @@ function getElk(): Promise<ELK> {
 export async function layoutFlowDiagram(
   graph: FlowDiagramGraph,
   direction: FlowDiagramDirection = 'RIGHT',
+  compact = false,
 ): Promise<FlowDiagramLayout> {
   const ids = new Set<string>();
   for (const node of graph.nodes) {
@@ -104,16 +135,16 @@ export async function layoutFlowDiagram(
       'elk.algorithm': 'layered',
       'elk.direction': direction,
       'elk.edgeRouting': 'ORTHOGONAL',
-      'elk.spacing.nodeNode': '40',
-      'elk.layered.spacing.nodeNodeBetweenLayers': '72',
+      'elk.spacing.nodeNode': compact ? '20' : '40',
+      'elk.layered.spacing.nodeNodeBetweenLayers': compact ? '28' : '72',
       'elk.layered.nodePlacement.strategy': 'NETWORK_SIMPLEX',
       // Declared state order keeps retry edges from moving later states before the start.
       'elk.layered.cycleBreaking.strategy': 'MODEL_ORDER',
       'elk.layered.crossingMinimization.strategy': 'LAYER_SWEEP',
       'elk.layered.thoroughness': '32',
-      'elk.spacing.edgeEdge': '20',
-      'elk.layered.spacing.edgeEdgeBetweenLayers': '20',
-      'elk.layered.spacing.edgeNodeBetweenLayers': '24',
+      'elk.spacing.edgeEdge': compact ? '8' : '20',
+      'elk.layered.spacing.edgeEdgeBetweenLayers': compact ? '8' : '20',
+      'elk.layered.spacing.edgeNodeBetweenLayers': compact ? '8' : '24',
     },
     children: graph.nodes.map((node) => {
       const id = nodeIds.get(node.id)!;
@@ -166,13 +197,13 @@ export async function layoutFlowDiagram(
                 'elk.edgeLabels.inline': 'true',
               },
               width: Math.min(
-                320,
+                268,
                 [...edge.label].reduce(
                   (total, char) => total + (char.charCodeAt(0) > 255 ? 14 : 7),
                   16,
                 ),
               ),
-              height: 24,
+              height: flowLabelLines(edge.label).length * 18 + 8,
             },
           ]
         : [],
@@ -248,3 +279,82 @@ export async function layoutFlowDiagram(
     }),
   };
 }
+
+type PlacedFlowNode = FlowDiagramLayout['nodes'][number];
+
+/** a transient route for an edge left out of the layout. It runs in a lane
+ * outside every node it passes, so revealing it never moves the laid-out graph.
+ * Deeper lanes keep nested routes from crossing one another; a self-transition loops
+ * beside its own node. The label sits outside the lane instead of over the nodes. */
+export function revealRoute(
+  nodes: readonly PlacedFlowNode[],
+  source: PlacedFlowNode,
+  target: PlacedFlowNode,
+  direction: FlowDiagramDirection,
+  lane = 0,
+): {
+  points: FlowDiagramPoint[];
+  labelPosition: FlowDiagramPoint;
+  labelAnchor: 'end' | 'middle';
+} {
+  // Measure along the flow (main) and across it; the lane runs before the nodes on the cross axis.
+  const down = direction === 'DOWN';
+  const main = (node: PlacedFlowNode) => (down ? node.y : node.x);
+  const cross = (node: PlacedFlowNode) => (down ? node.x : node.y);
+  const size = (node: PlacedFlowNode) => (down ? node.height : node.width);
+  const point = (along: number, across: number): FlowDiagramPoint =>
+    down ? { x: across, y: along } : { x: along, y: across };
+  const loop = source === target;
+  const start = Math.min(main(source), main(target));
+  const end = Math.max(
+    main(source) + size(source),
+    main(target) + size(target),
+  );
+  const lanePosition =
+    Math.min(
+      ...(loop
+        ? [cross(source)]
+        : nodes
+            .filter(
+              (node) => main(node) < end && main(node) + size(node) > start,
+            )
+            .map(cross)),
+    ) -
+    16 -
+    lane * 10;
+  const from = main(source) + size(source) * (loop ? 0.3 : 0.5);
+  const to = main(target) + size(target) * (loop ? 0.7 : 0.5);
+  return {
+    points: [
+      point(from, cross(source)),
+      point(from, lanePosition),
+      point(to, lanePosition),
+      point(to, cross(target)),
+    ],
+    // DOWN lanes run left of the nodes, so labels end at the lane; RIGHT lanes run above them.
+    labelPosition: point((from + to) / 2, lanePosition - (down ? 6 : 14)),
+    labelAnchor: down ? 'end' : 'middle',
+  };
+}
+
+/** Keep return and self-transitions out of the process layout. Declaration order
+ * describes forward progress; even adjacent returns can become long routes in ELK. */
+export function partitionFlowDiagramReturns(graph: FlowDiagramGraph): {
+  edges: FlowDiagramEdge[];
+  extraEdges: FlowDiagramEdge[];
+} {
+  const order = new Map(graph.nodes.map((node, index) => [node.id, index]));
+  const edges: FlowDiagramEdge[] = [],
+    extraEdges: FlowDiagramEdge[] = [];
+  for (const edge of graph.edges) {
+    const source = order.get(edge.source),
+      target = order.get(edge.target);
+    const returnRoute =
+      !edge.decorative &&
+      source !== undefined &&
+      target !== undefined &&
+      source >= target;
+    (returnRoute ? extraEdges : edges).push(edge);
+  }
+  return { edges, extraEdges };
+}

package/client/components/lifecycle-diagram.tsx

@@ -15,8 +15,18 @@ import {
   PopoverTrigger,
 } from '#components/ui/popover';
 import type { LifecycleDescription } from '@nocobase/lifecycle';
-import { FlowDiagram, type FlowDiagramProps } from '#components/flow-diagram';
-import type { FlowDiagramNode } from '#components/flow-layout';
+import {
+  FlowDiagram,
+  FlowDiagramStep,
+  FlowDiagramTransitionNotes,
+  type FlowDiagramProps,
+  type FlowDiagramStepKind,
+} from '#components/flow-diagram';
+import {
+  partitionFlowDiagramReturns,
+  type FlowDiagramEdge,
+  type FlowDiagramNode,
+} from '#components/flow-layout';
 
 import {
   lifecycleDiagramGraph,
@@ -41,6 +51,13 @@ export interface LifecycleDiagramProps
       | 'onEdgeClick'
     > {
   readonly description: LifecycleDescription;
+  /** Opt into compact boundary pills and work cards; the classic presentation remains the default. */
+  readonly presentation?: 'classic' | 'process';
+  /** Business semantics belong to the caller; unknown intermediate states default to work. */
+  readonly stateKind?: (
+    state: LifecycleDescription['stateInfo'][number],
+  ) => FlowDiagramStepKind;
+
   /** Opens the application-owned, authorized parameter editor for declared bindings. */
   readonly configuration?: LifecycleDiagramConfiguration;
   readonly stateActions?: (
@@ -61,6 +78,9 @@ export interface LifecycleDiagramProps
 /** Definitions are source-owned; clicking opens consumer-owned details, never fires a transition. */
 export function LifecycleDiagram({
   description,
+  presentation = 'classic',
+  stateKind,
+  nodeDescription,
   currentState,
   endLabel,
   history,
@@ -126,51 +146,169 @@ export function LifecycleDiagram({
         })),
       }
     : sourceGraph;
+  const process = presentation === 'process';
+  const routes = process
+    ? partitionFlowDiagramReturns(graph)
+    : { edges: graph.edges, extraEdges: [] };
+  const notesForNode = (id: string) => {
+    const nodeOf = (nodeId: string) =>
+      graph.nodes.find((node) => node.id === nodeId);
+    const labelOf = (nodeId: string) => nodeOf(nodeId)?.label ?? nodeId;
+    // A transition with several sources or targets becomes one edge per pair;
+    // list it once per direction with every state at the other end.
+    const groups = new Map<
+      string,
+      { edge: FlowDiagramEdge; direction: 'out' | 'in'; peers: string[] }
+    >();
+    for (const edge of routes.extraEdges) {
+      const direction =
+        edge.source === id ? 'out' : edge.target === id ? 'in' : undefined;
+      if (!direction) continue;
+      const [name] = JSON.parse(edge.id) as string[];
+      const key = JSON.stringify([name, direction]);
+      const group = groups.get(key) ?? { edge, direction, peers: [] };
+      groups.set(key, group);
+      const peer = direction === 'out' ? edge.target : edge.source;
+      if (!group.peers.includes(peer)) group.peers.push(peer);
+    }
+    return [...groups.values()].map(({ edge, direction, peers }) => {
+      const self = labelOf(id);
+      const names = peers.map(labelOf);
+      return {
+        id: `${direction}:${edge.id}`,
+        label: edge.label,
+        direction,
+        peers: names,
+        detail:
+          direction === 'out'
+            ? `${self} · ${edge.label ?? ''} → ${names.join(', ')}`
+            : `${names.join(', ')} · ${edge.label ?? ''} → ${self}`,
+        kind: kindForNode(nodeOf(peers[0])!),
+      };
+    });
+  };
+  const kindForNode = (node: FlowDiagramNode): FlowDiagramStepKind => {
+    const state = description.stateInfo.find((state) => state.name === node.id);
+    return (
+      (state && stateKind?.(state)) ??
+      (node.kind === 'initial'
+        ? 'start'
+        : node.kind === 'final'
+          ? 'success'
+          : 'work')
+    );
+  };
+  const nodeActions = (node: FlowDiagramNode): ReactNode => {
+    const state = description.stateInfo.find((state) => state.name === node.id);
+    if (!state) return undefined;
+    const actions = stateActions?.(state);
+    const selections =
+      configuration &&
+      lifecycleNodeConfigurationSelections(
+        description,
+        state.name,
+        configuration.canConfigure,
+      );
+    if (!selections?.length || !configuration) return actions;
+    return (
+      <div className='nodrag nopan flex items-center gap-1'>
+        {actions}
+        <NodeConfigurationActions
+          configuration={configuration}
+          selections={selections}
+          state={{ kind: 'state', name: state.name }}
+          title={(target) => {
+            if (target.kind === 'state')
+              return stateLabel?.(state) ?? state.title;
+            const transition = description.transitions.find(
+              (item) => item.name === target.name,
+            )!;
+            return transitionLabel?.(transition) ?? transition.title;
+          }}
+        />
+      </div>
+    );
+  };
+  // A transition declared from several states draws one edge per source, which
+  // would repeat its label beside the target. Label only the edge from the
+  // nearest source; the others keep the action as hover text.
+  const order = new Map(graph.nodes.map((node, index) => [node.id, index]));
+  const labelledEdges = new Map<string, FlowDiagramEdge>();
+  for (const edge of routes.edges) {
+    if (edge.decorative) continue;
+    const [name] = JSON.parse(edge.id) as string[];
+    const key = JSON.stringify([name, edge.target]);
+    const current = labelledEdges.get(key);
+    if (!current || order.get(edge.source)! > order.get(current.source)!)
+      labelledEdges.set(key, edge);
+  }
+  const processEdges = routes.edges.map((edge) =>
+    edge.decorative || [...labelledEdges.values()].includes(edge)
+      ? { ...edge, title: edge.label }
+      : { ...edge, title: edge.label, label: undefined, configurable: false },
+  );
+  const displayGraph = process
+    ? {
+        ...graph,
+        nodes: graph.nodes.map((node) => {
+          if (node.decorative) return node;
+          const kind = kindForNode(node);
+          const card = kind === 'work' || kind === 'approval';
+          return {
+            ...node,
+            bare: true,
+            width: card ? 240 : 176,
+            height: card ? 80 : nodeDescription?.(node) ? 64 : 44,
+            minimapShape: card ? ('card' as const) : ('pill' as const),
+          };
+        }),
+        edges: processEdges,
+      }
+    : graph;
   return (
     <FlowDiagram
       direction='DOWN'
-      initialMinZoom={0.7}
+      initialMinZoom={process ? 0.1 : 0.7}
+      compact={process}
+      controls={process}
+      nodeDescription={nodeDescription}
       autoHeight
       {...props}
-      {...graph}
-      nodeActions={(node) => {
+      {...displayGraph}
+      revealEdges={process ? undefined : props.revealEdges}
+      auxiliaryEdges={process ? routes.extraEdges : props.auxiliaryEdges}
+      nodeActions={nodeActions}
+      renderNode={(node, { active, linked }) => {
         const state = description.stateInfo.find(
           (state) => state.name === node.id,
         );
-        if (!state) return undefined;
-        const actions = stateActions?.(state);
-        const selections =
-          configuration &&
-          lifecycleNodeConfigurationSelections(
-            description,
-            state.name,
-            configuration.canConfigure,
-          );
-        if (!selections?.length || !configuration) return actions;
+        const label =
+          state && renderState ? renderState(state, node) : node.label;
+        if (!process || node.decorative) return label;
         return (
-          <div className='nodrag nopan flex items-center gap-1'>
-            {actions}
-            <NodeConfigurationActions
-              configuration={configuration}
-              selections={selections}
-              state={{ kind: 'state', name: state.name }}
-              title={(target) => {
-                if (target.kind === 'state')
-                  return stateLabel?.(state) ?? state.title;
-                const transition = description.transitions.find(
-                  (item) => item.name === target.name,
-                )!;
-                return transitionLabel?.(transition) ?? transition.title;
-              }}
-            />
-          </div>
-        );
-      }}
-      renderNode={(node) => {
-        const state = description.stateInfo.find(
-          (state) => state.name === node.id,
+          <FlowDiagramStep
+            kind={kindForNode(node)}
+            label={label}
+            description={nodeDescription?.(node)}
+            actions={nodeActions(node)}
+            linked={linked}
+            progress={
+              node.highlighted
+                ? 'current'
+                : node.visited
+                  ? 'visited'
+                  : history !== undefined ||
+                      currentState !== undefined ||
+                      visitedStates !== undefined
+                    ? 'unreached'
+                    : 'plan'
+            }
+          >
+            {active && (
+              <FlowDiagramTransitionNotes notes={notesForNode(node.id)} />
+            )}
+          </FlowDiagramStep>
         );
-        return state && renderState ? renderState(state, node) : node.label;
       }}
       onNodeClick={(node) => {
         const state = description.stateInfo.find(

package/client/components/long-text.tsx

@@ -0,0 +1,200 @@
+import {
+  useEffect,
+  useRef,
+  useState,
+  type CSSProperties,
+  type KeyboardEvent,
+  type MouseEvent,
+  type ReactElement,
+  type ReactNode,
+} from 'react';
+import { cn } from 'cn';
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+} from '#components/ui/popover';
+
+// The last line fades out rather than ending in an ellipsis mid-sentence.
+const FADE = '[mask-image:linear-gradient(to_bottom,black_55%,transparent)]';
+// Cut at a height of whole lines rather than with line-clamp, which would add an ellipsis under the fade.
+const CLAMP = 'overflow-hidden max-h-[calc(var(--long-text-lines)*1lh)]';
+
+/**
+ * Whether the element's content is taller than the lines it shows, measured again on every resize. The element comes
+ * through a callback ref, so measuring follows it when it is replaced, as LongTextPreview's is once it overflows and
+ * moves into the pop-up's trigger.
+ */
+function useOverflows(
+  watch: unknown,
+): [(element: HTMLDivElement | null) => void, boolean | undefined] {
+  const [element, setElement] = useState<HTMLDivElement | null>(null);
+  // Undefined until measured, so a remounted element does not first report that it fits.
+  const [overflows, setOverflows] = useState<boolean | undefined>(undefined);
+  useEffect(() => {
+    if (!element || typeof ResizeObserver === 'undefined') return;
+    const measure = (): void =>
+      setOverflows(element.scrollHeight > element.clientHeight + 1);
+    // The observer reports once when it starts, then on every resize.
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [element, watch]);
+  return [setElement, overflows];
+}
+
+export interface LongTextProps {
+  /** The text, or rendered content such as Markdown. A string keeps its line breaks. */
+  readonly children: ReactNode;
+  /** How many lines show while folded. */
+  readonly lines?: number;
+  readonly className?: string;
+}
+
+/**
+ * A long text where there is room for it, such as the description under a page's title or a comment: up to `lines`
+ * lines, the last fading out while there is more, unfolding in place on a click and folding again on the next. It
+ * reacts only when it overflows; a double-click or a text selection does not fold it, and Enter or Space works as a
+ * click.
+ */
+export function LongText({
+  children,
+  lines = 5,
+  className,
+}: LongTextProps): ReactElement {
+  const [open, setOpen] = useState(false);
+  const [ref, measured] = useOverflows(open);
+  const overflows = measured === true;
+  const foldable = overflows || open;
+  const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+  useEffect(() => () => clearTimeout(timerRef.current), []);
+  const toggle = (): void => setOpen((current) => !current);
+  return (
+    <div
+      ref={ref}
+      role={foldable ? 'button' : undefined}
+      tabIndex={foldable ? 0 : undefined}
+      aria-expanded={foldable ? open : undefined}
+      style={{ '--long-text-lines': lines } as CSSProperties}
+      className={cn(
+        'leading-relaxed break-words whitespace-pre-line',
+        foldable && 'cursor-pointer',
+        !open && CLAMP,
+        !open && overflows && FADE,
+        className,
+      )}
+      onClick={(event: MouseEvent<HTMLDivElement>) => {
+        // A double-click selects a word rather than folding twice, and a selection is not a click.
+        if (!foldable || event.detail > 1) return;
+        if (!window.getSelection()?.isCollapsed) return;
+        clearTimeout(timerRef.current);
+        timerRef.current = setTimeout(toggle, 220);
+      }}
+      onDoubleClick={() => clearTimeout(timerRef.current)}
+      onKeyDown={(event: KeyboardEvent<HTMLDivElement>) => {
+        if (!foldable || event.target !== event.currentTarget) return;
+        if (event.key !== 'Enter' && event.key !== ' ') return;
+        event.preventDefault();
+        toggle();
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+export interface FadingTextProps {
+  /** The text, or rendered content. A string keeps its line breaks. */
+  readonly children: ReactNode;
+  /** How many lines show. */
+  readonly lines?: number;
+  readonly className?: string;
+  /** Told whether the text overflows, each time that changes. */
+  readonly onOverflowChange?: (overflows: boolean) => void;
+}
+
+/**
+ * The part both components are drawn with, for a consumer that opens the text its own way, such as a field editing it
+ * in a pop-up: up to `lines` lines, the last fading out while there is more, and nothing that reacts to a click.
+ */
+export function FadingText({
+  children,
+  lines = 3,
+  className,
+  onOverflowChange,
+}: FadingTextProps): ReactElement {
+  const [ref, overflows] = useOverflows(children);
+  useEffect(() => {
+    if (overflows !== undefined) onOverflowChange?.(overflows);
+  }, [overflows, onOverflowChange]);
+  return (
+    <div
+      ref={ref}
+      style={{ '--long-text-lines': lines } as CSSProperties}
+      className={cn(
+        'text-left leading-relaxed break-words whitespace-pre-line',
+        CLAMP,
+        overflows && FADE,
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export interface LongTextPreviewProps {
+  /** The text, or rendered content. A string keeps its line breaks. */
+  readonly children: ReactNode;
+  /** What the text is, such as "Introduction": the heading of the pop-up that shows it whole. */
+  readonly label: ReactNode;
+  /** How many lines show in the column. */
+  readonly lines?: number;
+  readonly className?: string;
+}
+
+/**
+ * A long text in a narrow column, such as a record's introduction or address beside its page: up to `lines` lines in
+ * muted text, the last fading out while there is more, the whole text opening in a pop-up beside it on a click, so
+ * the column never grows and pushes what is under it. It reacts only when it overflows.
+ */
+export function LongTextPreview({
+  children,
+  label,
+  lines = 3,
+  className,
+}: LongTextPreviewProps): ReactElement {
+  const [overflows, setOverflows] = useState(false);
+  const preview = (
+    <FadingText
+      lines={lines}
+      className={cn('text-muted-foreground', className)}
+      onOverflowChange={setOverflows}
+    >
+      {children}
+    </FadingText>
+  );
+  if (!overflows) return preview;
+  return (
+    <Popover>
+      <PopoverTrigger className='block w-full cursor-pointer rounded-md text-left'>
+        {preview}
+      </PopoverTrigger>
+      <PopoverContent
+        align='start'
+        side='left'
+        className='max-h-[min(36rem,70vh)] w-[28rem] max-w-[calc(100vw-2rem)] overflow-y-auto'
+      >
+        <PopoverHeader>
+          <PopoverTitle>{label}</PopoverTitle>
+        </PopoverHeader>
+        <div className='text-sm leading-relaxed break-words whitespace-pre-line'>
+          {children}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}