@cardenelabs/cdl 0.123.0 → 0.125.0

package/src/render/nodes.tsx

@@ -7,7 +7,7 @@ import { FunctionNode } from "../kinds/function";
 import { StorageNode } from "../kinds/storage";
 import { GenericNode } from "../kinds/generic";
 import { MarkStartNode, MarkEndNode } from "../kinds/terminal-mark";
-import { StationNode } from "../kinds/station";
+import { StationNode, TimelineNumberNode } from "../kinds/station";
 import { DynShapeNode } from "../kinds/dyn-shape";
 import { ChartLineNode, type ChartLineScale } from "../kinds/chart-line";
 import { ChartPieNode } from "../kinds/chart-pie";
@@ -119,10 +119,14 @@ export function CdlNodeView({
   stateValues,
   currentPhaseId,
   chartLineScale,
+  compactTitleInset,
   関係の受け口,
   lang,
   textMetrics,
   値の名前,
+  metroDiagram = false,
+  metroDecision = false,
+  stationNameRight = false,
 }: {
   node: LaidNode;
   active: boolean;
@@ -144,8 +148,16 @@ export function CdlNodeView({
   stateValues: Record<string, string>;
   currentPhaseId: string | undefined;
   chartLineScale?: ChartLineScale;
+  /** 小型 card の名前を左寄せにする時の左端からの距離。段階列の札だけが渡す。 */
+  compactTitleInset?: number;
   /** 触れた箱の関係を光らせる時の受け口 (#806)。 書かない図では `undefined` */
   関係の受け口?: 関係の受け口;
+  /** metro 線と駅を持つ図だけが担当の名札と端の印を路線図向けに描く。 */
+  metroDiagram?: boolean;
+  /** `routing: "metro"` の線が出入りする分かれ道だけを路線図向けに描く。 */
+  metroDecision?: boolean;
+  /** 真上から線路が入る駅の名前を右へ置く。 */
+  stationNameRight?: boolean;
 }): JSX.Element {
   const value = node.value ? interpolate(node.value, stateValues, 値の名前) : undefined;
   const rows = (node.rows ?? []).map((r) => interpolate(r, stateValues, 値の名前));
@@ -201,7 +213,7 @@ export function CdlNodeView({
       case "event":
         return <EventNode node={resolvedNode} active={active} progress={progress} />;
       case "card":
-        return <CardNode node={resolvedNode} active={active} />;
+        return <CardNode node={resolvedNode} active={active} compactTitleInset={compactTitleInset} />;
       // 時系列のやり取り (#578)。 1 つの箱が図を丸ごと描く = 縦が時間で、参加者は箱を持たない
       case "sequence-board":
         return (
@@ -479,11 +491,13 @@ export function CdlNodeView({
       case "shape-customer-service":
         return <ShapeCustomerServiceNode node={resolvedNode} active={active} />;
       case "mark-start":
-        return <MarkStartNode node={resolvedNode} active={active} />;
+        return <MarkStartNode node={resolvedNode} active={active} metro={metroDiagram} />;
       case "mark-end":
-        return <MarkEndNode node={resolvedNode} active={active} />;
+        return <MarkEndNode node={resolvedNode} active={active} metro={metroDiagram} />;
       case "station":
-        return <StationNode node={resolvedNode} active={active} />;
+        return <StationNode node={resolvedNode} active={active} nameRight={stationNameRight} />;
+      case "timeline-number":
+        return <TimelineNumberNode node={resolvedNode} />;
       default:
         // 新 NodeKind 25 種は GenericNode で汎用描画 (kind 別 icon / color / shape)
         return (
@@ -494,6 +508,8 @@ export function CdlNodeView({
             stateValues={stateValues}
             値の名前={値の名前}
             textMetrics={textMetrics}
+            showKindIcon={!(metroDiagram && node.kind === "decision")}
+            metroDecision={metroDecision}
           />
         );
     }

package/src/render/stage.tsx

@@ -3,7 +3,8 @@ import { 折れ線の目盛, type ChartLineScale } from "../kinds/chart-line";
 import { 描く進みに直す } from "../kinds/draw-ratio";
 import { useReducedMotion } from "../anim/react/useReducedMotion";
 import { lifelineStartYs, uniformLifelineEndY } from "../layout/lifeline";
-import { buildDiagramAltText, isRenderedNode } from "../layout/spec";
+import { buildDiagramAltText, isRenderedNode, TIMELINE_NUMBER_STROKE } from "../layout/spec";
+import { STAGE_CARD_TEXT_INSET, STAGE_COLUMN_GAP } from "../layout/tokens";
 import {
   EDGE_HEADS,
   EDGE_HEAD_FILLS,
@@ -13,6 +14,7 @@ import {
   RELATION_FOCUS_DEFAULT,
   type CdlPhase,
   type LaidDiagram,
+  type LaidNode,
 } from "../types";
 import {
   EDGE_HEAD_MUTED_MARKER_ID,
@@ -20,15 +22,23 @@ import {
   edgeHeadMarkerId,
   edgeHeadMarkerName,
   edgeHeadPaint,
+  METRO_RETURN_ARROW_D,
+  metroReturnArrowMarkerId,
 } from "./edge-head";
 import { CdlEdgeView, CdlEdgeGlowView, CdlEdgeEndLabelView, CdlEdgeLabelView } from "./edges";
 import { CdlNodeView } from "./nodes";
+import { CdlLegend } from "./legend";
 import { resolveChartData } from "./payload-binding";
 import { relatedFocusSet } from "./relation-focus";
 import { TONE, TONE_HEX } from "./tone";
-import { computeStateValues } from "./utils";
+import { computeStateValues, interpolate } from "./utils";
 import type { 値の名前の表 } from "../input-option";
 
+const METRO_LANE_BADGE_WIDTH = 200;
+const METRO_LANE_BADGE_HEIGHT = 88;
+const METRO_LANE_BADGE_INSET = 24;
+const METRO_LANE_GUIDE_GAP = 24;
+
 /**
  * その図に描くものがあるか (#923)。
  *
@@ -42,9 +52,17 @@ import type { 値の名前の表 } from "../input-option";
  * 描かれない。 `{signal}` を含む条件は段しだいで出るので、出る側に数える。
  */
 function 描くものがある(laid: LaidDiagram): boolean {
+  if (laid.legend && laid.legend.length > 0) return true;
   if (laid.edges.length > 0) return true;
   if (laid.nodes.some((n) => isRenderedNode(n))) return true;
-  return laid.lanes.some((l) => l.contain === true || l.lifeline === true || Boolean(l.label));
+  return laid.lanes.some(
+    (l) =>
+      l.contain === true ||
+      l.lifeline === true ||
+      Boolean(l.label) ||
+      l.stage !== undefined ||
+      l.metro !== undefined,
+  );
 }
 
 export function CdlStage({
@@ -121,6 +139,8 @@ export function CdlStage({
     [関係を光らせる, 焦点, laid.edges],
   );
   const activeSet = 焦点の集合 ?? new Set(currentPhase?.activate ?? []);
+  const 路線図 = laid.edges.some((edge) => edge.routing === "metro") &&
+    laid.nodes.some((node) => node.kind === "station");
   /** 箱に付ける受け口。 指定を書かない図では `undefined` = DOM も挙動も変わらない */
   const 箱の受け口 = 関係を光らせる
     ? { 触れた, 離れた, 押した, 焦点: 焦点?.id ?? null }
@@ -167,8 +187,15 @@ export function CdlStage({
         if (first === undefined) return false;
         return 今 === first;
       },
+      /** 初出の段より前にある区間だけを、通過前として選べるようにする。 */
+      まだか: (edgeId: string): boolean => {
+        const first = 初出.get(edgeId);
+        return first !== undefined && 今 >= 0 && 今 < first;
+      },
     };
   }, [laid.phases, currentPhase, laid.edgeReveal]);
+  const 線を描く = (edge: (typeof laid.edges)[number]): boolean =>
+    edge.routing === "metro" || 矢印の出番.出るか(edge.id);
   // この phase で左の起点から描き始める node (cdl#512)。 `activate` とは別集合で持つ =
   // 焦点が当たり続ける図で毎 phase 引き直すことになるため、 光っているかを引き金にしない
   const drawSet = new Set(currentPhase?.draw ?? []);
@@ -280,7 +307,56 @@ export function CdlStage({
       ),
     );
   }, [laid]);
+  const metroReturnArrowMarkers = useMemo(() => {
+    const tones = new Set(
+      laid.edges
+        .filter((edge) => edge.metroReturn === true)
+        .map((edge) => edge.tone),
+    );
+    return [...tones].map((tone) => (
+      <marker
+        key={tone}
+        id={metroReturnArrowMarkerId(tone)}
+        viewBox="0 -9.5 21 19"
+        refX="0"
+        refY="0"
+        markerWidth="21"
+        markerHeight="19"
+        markerUnits="userSpaceOnUse"
+        orient="auto"
+      >
+        <path
+          data-cdl-role="edge-arrowhead"
+          data-cdl-mark="metro-return-arrow"
+          d={METRO_RETURN_ARROW_D}
+          fill={TONE[tone]}
+        />
+      </marker>
+    ));
+  }, [laid.edges]);
   const diagramScale = laid.diagramScale ?? 1;
+  const stageLaneIds = new Set(
+    laid.lanes.filter((lane) => lane.stage !== undefined).map((lane) => lane.id),
+  );
+  const stageNoteNodes = laid.nodes.filter(
+    (node): node is LaidNode & { subtitle: string } =>
+      node.kind === "card" &&
+      (stageLaneIds.has(node.lane) || node.leaderTo !== undefined) &&
+      isRenderedNode(node) &&
+      Boolean(node.subtitle),
+  );
+  const stageNoteNodeIds = new Set(stageNoteNodes.map((node) => node.id));
+  const nodesById = new Map(laid.nodes.map((node) => [node.id, node]));
+  const metroDecisionIds = new Set<string>();
+  const stationNamesRight = new Set<string>();
+  for (const edge of laid.edges) {
+    if (edge.routing !== "metro") continue;
+    if (nodesById.get(edge.from)?.kind === "decision") metroDecisionIds.add(edge.from);
+    if (nodesById.get(edge.to)?.kind === "decision") metroDecisionIds.add(edge.to);
+    if (edge.toSide === "top" && nodesById.get(edge.to)?.kind === "station") {
+      stationNamesRight.add(edge.to);
+    }
+  }
   // 描くものが 1 つも無い図は面を取らない (#923)。
   // 札 (`interactive-panel`) は `render.tsx` が別に出すので、題と札は残る。
   // hook は全て上で呼び終えているので、ここで返しても呼ぶ順は変わらない。
@@ -343,6 +419,7 @@ export function CdlStage({
               に適用する。 marker (cdl-arrow-*) は edge routing の SSOT なので cdl 内に維持。 */}
           {/* 大小は phase ごとに入れ替わるため、配置が参照する両方を保持する。 */}
           {edgeHeadMarkers}
+          {metroReturnArrowMarkers}
           {/* tone が TONE 定義に無い edge の受け皿。 visual-validate の tone-marker-ref 軸が
               dead ref を検知するが、 検知するまでの間に矢頭が消えないようにする。 */}
           <marker
@@ -378,7 +455,53 @@ export function CdlStage({
               stroke="none"
               pointerEvents="none"
             />
-            {lane.contain && (
+            {lane.stage && (
+              <>
+                <rect
+                  data-cdl-role="stage-column"
+                  x={lane.x + STAGE_COLUMN_GAP / 2}
+                  y={lane.y}
+                  width={lane.width - STAGE_COLUMN_GAP}
+                  height={lane.height}
+                  rx={16}
+                  fill="var(--cdl-stage-bg, #fafafa)"
+                  fillOpacity={0.5}
+                  stroke="var(--cdl-text-mute, #8a8678)"
+                  strokeWidth={1.5}
+                />
+                <text
+                  data-cdl-role="stage-number"
+                  x={lane.x + STAGE_COLUMN_GAP / 2 + 20}
+                  y={lane.y + 24}
+                  fontSize={14}
+                  fontWeight={500}
+                  letterSpacing={1.5}
+                  fill="var(--cdl-text-mute, #8a8678)"
+                >
+                  {`段階 ${lane.stage.number}`}
+                </text>
+                <text
+                  data-cdl-role="stage-name"
+                  x={lane.x + STAGE_COLUMN_GAP / 2 + 20}
+                  y={lane.y + 55}
+                  fontSize={22}
+                  fontWeight={700}
+                  fill="var(--cdl-text, #1a1f2a)"
+                >
+                  {lane.stage.name}
+                </text>
+                <line
+                  data-cdl-role="stage-divider"
+                  x1={lane.x + STAGE_COLUMN_GAP / 2}
+                  y1={lane.y + 72}
+                  x2={lane.x + lane.width - STAGE_COLUMN_GAP / 2}
+                  y2={lane.y + 72}
+                  stroke="var(--cdl-divider, #d4d4d8)"
+                  strokeWidth={1.5}
+                />
+              </>
+            )}
+            {lane.contain && lane.stage === undefined && (
               <rect
                 data-cdl-role="lane-container"
                 x={lane.x}
@@ -414,7 +537,76 @@ export function CdlStage({
                 />
               );
             })()}
-            {lane.label && (
+            {lane.timelineAxis && (() => {
+              const ys = laid.nodes
+                .filter((node) => node.lane === lane.id && isRenderedNode(node))
+                .map((node) => node.cy);
+              if (ys.length < 2) return null;
+              const y1 = Math.min(...ys);
+              const y2 = Math.max(...ys);
+              if (y2 <= y1) return null;
+              return (
+                <line
+                  data-cdl-role="timeline-axis"
+                  x1={lane.x + lane.width / 2}
+                  y1={y1}
+                  x2={lane.x + lane.width / 2}
+                  y2={y2}
+                  stroke="var(--cdl-tone-accent, #2d6a8f)"
+                  strokeWidth={TIMELINE_NUMBER_STROKE}
+                />
+              );
+            })()}
+            {lane.metro !== undefined && (
+              <>
+                <line
+                  data-cdl-role="metro-lane-guide"
+                  x1={lane.x + METRO_LANE_BADGE_INSET + METRO_LANE_BADGE_WIDTH + METRO_LANE_GUIDE_GAP}
+                  y1={lane.y + lane.height / 2}
+                  x2={lane.x + lane.width - METRO_LANE_BADGE_INSET}
+                  y2={lane.y + lane.height / 2}
+                  stroke="var(--cdl-line-mute, #a89d8f)"
+                  strokeWidth={2}
+                  strokeDasharray="22 7 5 7"
+                  opacity={0.45}
+                />
+                <g
+                  data-cdl-role="metro-lane-badge"
+                  transform={`translate(${lane.x + METRO_LANE_BADGE_INSET} ${lane.y + lane.height / 2 - METRO_LANE_BADGE_HEIGHT / 2})`}
+                >
+                  <rect
+                    width={METRO_LANE_BADGE_WIDTH}
+                    height={METRO_LANE_BADGE_HEIGHT}
+                    rx={12}
+                    fill="var(--cdl-node-fill, #ffffff)"
+                    stroke="var(--cdl-tone-accent, #2d6a8f)"
+                    strokeWidth={1.25}
+                  />
+                  <text
+                    x={METRO_LANE_BADGE_WIDTH / 2}
+                    y={lane.metro.subtitle ? 37 : 53}
+                    fontSize={26}
+                    fontWeight={700}
+                    fill="var(--cdl-text, #1a1f2a)"
+                    textAnchor="middle"
+                  >
+                    {lane.label}
+                  </text>
+                  {lane.metro.subtitle && (
+                    <text
+                      x={METRO_LANE_BADGE_WIDTH / 2}
+                      y={67}
+                      fontSize={18}
+                      fill="var(--cdl-text-dim, #5a6270)"
+                      textAnchor="middle"
+                    >
+                      {lane.metro.subtitle}
+                    </text>
+                  )}
+                </g>
+              </>
+            )}
+            {lane.label && lane.metro === undefined && (
               <text
                 data-cdl-role="lane-label"
                 x={lane.x + 24}
@@ -430,8 +622,35 @@ export function CdlStage({
           </g>
         ))}
 
+        {/* 補助線は札と番号の下に敷き、edge の矢頭や配置には参加させない。 */}
+        {laid.nodes.map((node) => {
+          if (node.leaderTo === undefined) return null;
+          const target = nodesById.get(node.leaderTo);
+          if (target === undefined) return null;
+          if (!isRenderedNode(node) || !isRenderedNode(target)) return null;
+          const targetIsRight = target.cx >= node.cx;
+          const x1 = node.cx + (targetIsRight ? node.w / 2 : -node.w / 2);
+          const x2 = target.cx + (targetIsRight ? -target.w / 2 : target.w / 2);
+          if (targetIsRight ? x2 <= x1 : x1 <= x2) return null;
+          return (
+            <line
+              key={`timeline-leader-${node.id}`}
+              data-cdl-role="timeline-leader"
+              data-cdl-leader-from={node.id}
+              data-cdl-leader-to={node.leaderTo}
+              x1={x1}
+              y1={node.cy}
+              x2={x2}
+              y2={target.cy}
+              stroke="var(--cdl-line-mute, #a89d8f)"
+              strokeWidth={1.5}
+              strokeDasharray="2 4"
+              strokeLinecap="round"
+            />
+          );
+        })}
         {/* edges (1st pass) */}
-        {laid.edges.filter((edge) => 矢印の出番.出るか(edge.id)).map((edge) => (
+        {laid.edges.filter(線を描く).map((edge) => (
           <CdlEdgeView
             key={edge.id}
             edge={edge}
@@ -440,6 +659,7 @@ export function CdlStage({
             drawing={矢印の出番.伸ばすか(edge.id)}
             progress={矢印の出番.伸ばすか(edge.id) ? 描く進み : progress}
             stateValues={stateValues}
+            pending={edge.routing === "metro" && 矢印の出番.まだか(edge.id)}
           />
         ))}
 
@@ -449,9 +669,11 @@ export function CdlStage({
           // および `tweens` は元の進みのまま = 「線はゆっくり、 値は短く」 が 1 つの phase で
           // 両立する。 対象外にも掛けると値の移りまで速くなる
           const 描く = drawSet.has(node.id);
+          const 段階の補足 = stageNoteNodeIds.has(node.id);
           const view = (
             <CdlNodeView
-              node={node}
+              node={段階の補足 ? { ...node, subtitle: undefined } : node}
+              compactTitleInset={段階の補足 ? STAGE_CARD_TEXT_INSET : undefined}
               active={activeSet.has(node.id)}
               // 描画側の固定の字の言語 (#847)。 `layout` が既定以外の時だけ `lang` を持たせる
               lang={laid.lang}
@@ -463,20 +685,41 @@ export function CdlStage({
               値の名前={値の名前}
               currentPhaseId={currentPhase?.id}
               chartLineScale={chartLineScales.get(node.id)}
+              metroDiagram={路線図}
+              metroDecision={metroDecisionIds.has(node.id)}
+              stationNameRight={stationNamesRight.has(node.id)}
             />
           );
           return <g key={node.id}>{view}</g>;
         })}
 
+        {/* 段階列か補助線を持つ札は、既存の subtitle 入力を名前と同じ行の右端へ置く。 */}
+        {stageNoteNodes.map((node) => (
+          <text
+            key={`stage-note-${node.id}`}
+            data-cdl-role="stage-note"
+            data-cdl-stage-node={node.id}
+            x={node.cx + node.w / 2 - STAGE_CARD_TEXT_INSET}
+            y={node.cy + 1}
+            fontSize={14}
+            fontWeight={500}
+            textAnchor="end"
+            dominantBaseline="middle"
+            fill="var(--cdl-text-mute, #8a8678)"
+          >
+            {interpolate(node.subtitle, stateValues, 値の名前)}
+          </text>
+        ))}
+
         {/* 経由 node 貫通する dotted-flow edge の進行点 glow (3rd pass) */}
         {laid.edges
-          .filter((edge) => Boolean(edge.dThrough) && 矢印の出番.出るか(edge.id))
+          .filter((edge) => Boolean(edge.dThrough) && 線を描く(edge))
           .map((edge) => (
             <CdlEdgeGlowView key={`glow-${edge.id}`} edge={edge} active={activeSet.has(edge.id)} />
           ))}
 
         {/* edge labels (3rd pass) ... 全 edge の label を最前面に描画 */}
-        {laid.edges.filter((edge) => 矢印の出番.出るか(edge.id)).map((edge) => (
+        {laid.edges.filter(線を描く).map((edge) => (
           <CdlEdgeLabelView
             key={`label-${edge.id}`}
             edge={edge}
@@ -487,7 +730,7 @@ export function CdlStage({
 
         {/* 線の端に添える字 (#821 / #825)。 札と同じ最前面の pass */}
         {laid.edges
-          .filter((edge) => (edge.headLabel || edge.tailLabel) && 矢印の出番.出るか(edge.id))
+          .filter((edge) => (edge.headLabel || edge.tailLabel) && 線を描く(edge))
           .flatMap((edge) =>
             (["head", "tail"] as const).map((端) => (
               <CdlEdgeEndLabelView
@@ -500,6 +743,8 @@ export function CdlStage({
             )),
           )}
 
+        {laid.legend && <CdlLegend items={laid.legend} />}
+
         {/* debug overlay = engine が把握している bbox + collision を半透明で重ね描き */}
         {debug && (
           <g pointerEvents="none">

package/src/render/template-fields.ts

@@ -51,6 +51,8 @@ type 読まない欄 =
   | "posH"
   | "role"
   | "tone"
+  // 補助線の行き先は node id で、描画側が字の差し込みに掛けない。
+  | "leaderTo"
   | "shape"
   | "chartData"
   | "chartFillUnder"