@cardenelabs/cdl 0.69.0 → 0.71.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.69.0",
+  "version": "0.71.0",
   "description": "CDL (Chainome Diagram Language). Mermaid-like declarative DSL that compiles to animated SVG diagrams. Built for blockchain / Solidity flows, generic enough for sequence / flow / state / ER / topology diagrams.",
   "license": "MIT",
   "author": "cardene777",

package/src/index.ts

@@ -277,6 +277,7 @@ export type {
   FlowchartNode,
   FlowchartEdge,
   FlowchartNodeShape,
+  FlowchartDirection,
   NetworkPreset,
   NetworkBuilder,
   NetworkDevice,

package/src/kinds/dyn-shape.tsx

@@ -137,11 +137,23 @@ function renderRect(
         clipPath={`url(#dyn-rect-clip-${node.id})`}
         style={{ transition: "all 200ms ease-out" }}
       />
-      {/* value label */}
+      {/*
+        読み取り値。 **箱の右端に揃える** (#870)。
+
+        中央に置くと、同じ帯の上下を繋ぐ矢印と必ず重なる。 矢印は受け手の上端の中央へ
+        真下から入り、読み取り値は上端の中央の真上に出るので、置き場所が同じになる。
+        利用側の 4 枚が 4 枚とも、矢印の先が数字の区切りに刺さって `10 ⯆ 10` に見えていた。
+
+        右端へ寄せると、中央の縦の通り道が空く。 矢印の側ではなく数字の側を動かすのは、
+        矢印の取り付き点が 2 本並んだ時の振り分けを既に持っており、そこへ別の理由で
+        ずらす条件を足すと両方が効いた時の位置が読めなくなるため。
+
+        揃える先を右にしたのは、箱の右上が空いている図が多いから (左上には枠の題が来る)。
+      */}
       <text
-        x={x + w / 2}
+        x={x + w}
         y={y - 6}
-        textAnchor="middle"
+        textAnchor="end"
         fontSize={11}
         fontFamily="monospace"
         fill="var(--cdl-text-dim, #5a6270)"

package/src/presets.ts

@@ -2289,6 +2289,18 @@ export type FlowchartEdge = {
   tone?: Tone;
 };
 
+/**
+ * 分かれ道の図を並べる向き (#880)。
+ *
+ * - `"horizontal"` (既定) ... 縦列を横に並べ、箱をその中に上から積む。 役割は縦列の見出しに出る
+ * - `"vertical"` ... 縦列 1 本に全部の箱を書いた順で積む。 役割は箱の上の小さな字に移す
+ *
+ * **縦列を横の帯にして縦に積む形は持たない**。 配置は格子で、縦列が横の位置を、段が縦の
+ * 位置を決める (`layout/nodes.ts`)。 帯にするには軸の入れ替えが要り、入口の option では
+ * 足りない。
+ */
+export type FlowchartDirection = "horizontal" | "vertical";
+
 export type FlowchartPreset = {
   id: string;
   topic: string;
@@ -2296,6 +2308,8 @@ export type FlowchartPreset = {
   lanes: string[];
   defaultTone?: Tone;
   laneWidth?: number;
+  /** 並べる向き (既定 = `"horizontal"`、 今までの並び) */
+  direction?: FlowchartDirection;
 };
 
 export type FlowchartBuilder = {
@@ -2339,32 +2353,57 @@ const SHAPE_EYEBROW: Record<FlowchartNodeShape, string> = {
  *   .edge({ from: "review", to: "revise", label: "false" })
  *   .build();
  */
+/** 縦に積む時に使う 1 本だけの縦列の id (#880) */
+const VERTICAL_LANE_ID = "flowchart-main";
+
 export function flowchart(preset: FlowchartPreset): FlowchartBuilder {
   const laneW = preset.laneWidth ?? 380;
   const tone: Tone = preset.defaultTone ?? "accent";
+  const 縦に積む = (preset.direction ?? "horizontal") === "vertical";
   const b = diagram(preset.id, { topic: preset.topic, type: "flowchart" });
 
   const laneToId = new Map<string, string>();
   const laneStackCount = new Map<string, number>();
-  for (const label of preset.lanes) {
-    const id = slugify(label) || `lane-${laneToId.size}`;
-    laneToId.set(label, id);
-    laneStackCount.set(id, 0);
-    b.lane(id, { width: laneW, label });
+  if (縦に積む) {
+    /*
+     * 縦列を 1 本だけ置く (#880)。
+     *
+     * 見出しは付けない = 役割が 1 つに畳まれるので、どれか 1 つの名前を見出しにすると
+     * 他の役割の箱にもその名前が掛かって読める。 役割は箱ごとの小さな字が持つ。
+     */
+    b.lane(VERTICAL_LANE_ID, { width: laneW });
+    laneStackCount.set(VERTICAL_LANE_ID, 0);
+  } else {
+    for (const label of preset.lanes) {
+      const id = slugify(label) || `lane-${laneToId.size}`;
+      laneToId.set(label, id);
+      laneStackCount.set(id, 0);
+      b.lane(id, { width: laneW, label });
+    }
   }
   const phaseActivate: string[] = [];
   let edgeIdx = 0;
 
+  /*
+   * 箱の上に出す字。
+   *
+   * 縦に積む図で役割を 2 つ以上書いた時だけ、形の名前の前に役割を足す。
+   * 1 つしか書いていない図は足さない = 全部の箱に同じ字が並ぶだけで、読む材料が増えない。
+   */
+  const 役割を足す = 縦に積む && preset.lanes.length >= 2;
+  const 箱の上の字 = (n: FlowchartNode): string =>
+    役割を足す ? `${n.lane} · ${SHAPE_EYEBROW[n.shape]}` : SHAPE_EYEBROW[n.shape];
+
   const api: FlowchartBuilder = {
     node(n) {
-      const laneId = laneToId.get(n.lane) ?? n.lane;
+      const laneId = 縦に積む ? VERTICAL_LANE_ID : (laneToId.get(n.lane) ?? n.lane);
       const stack = laneStackCount.get(laneId) ?? 0;
       b.node(n.id, {
         lane: laneId,
         stack,
         kind: SHAPE_KIND[n.shape],
         title: n.title,
-        eyebrow: SHAPE_EYEBROW[n.shape],
+        eyebrow: 箱の上の字(n),
       });
       laneStackCount.set(laneId, stack + 1);
       phaseActivate.push(n.id);