@cardenelabs/cdl 0.69.0 → 0.71.0

package/CHANGELOG.md

@@ -5,6 +5,76 @@ CDL (Chainome Diagram Language) の主要変更履歴。
 
 ## [Unreleased]
 
+## [0.71.0] - 2026-09-26
+
+### Added
+
+- **分かれ道の図で並べる向きを選べるようにした** (#880 / #881)
+
+  分かれ道の図 (`flowchart`) の入口は縦列を横に並べる形に固定で、向きを選べなかった。
+  使う側 ([cardene777/dragon](https://github.com/cardene777/dragon)) は記法に `direction` を
+  持ち、`flow` と `swimlane` では効くのに、分かれ道の図では知らせが出て効かなかった。
+
+  `FlowchartPreset` に `direction` を足す。
+
+  | 値 | 並び | 役割の見せ方 |
+  |---|---|---|
+  | `horizontal` (既定) | 今のまま。 縦列を横に並べ、箱をその中に上から積む | 縦列の見出し |
+  | `vertical` | 縦列 1 本に全部の箱を書いた順で積む | 箱の上の小さな字 |
+
+  `vertical` は縦列を 1 本しか作らないため、役割の名前を出す場所が無くなる。
+  黙って消すと書いた `lane` が図から読めなくなるので、箱の上の小さな字へ移す。
+
+  ```
+  横に並べる ... 箱の上は 判断      (役割は縦列の見出し 承認者)
+  縦に積む   ... 箱の上は 承認者 · 判断
+  ```
+
+  縦列を 1 つしか書いていない図では足さない (全部の箱に同じ字が並ぶだけ)。
+  1 本の縦列に見出しも付けない = 役割が 1 つに畳まれるので、どれか 1 つを見出しにすると
+  他の役割の箱にもその名前が掛かって読める。
+
+  **縦列を横の帯にして縦に積む形は持たない**。 配置は格子で、縦列が横の位置を、段が縦の
+  位置を決める。 帯にするには軸の入れ替えが要り、入口の option では足りない。
+
+  既定は変えていない。 向きを渡さない図は 1 枚も並びが動かない (対照で確認)。
+
+## [0.70.0] - 2026-09-26
+
+### Fixed
+
+- **箱の読み取り値を右端へ寄せ、縦の矢印が数字を割らないようにした** (#870 / #879)
+
+  箱に読み取り値 (`10 / 10` のような現在値と上限) を書くと、値は箱の上端の中央に出る。
+  同じ帯の上下に置いた箱を矢印で繋ぐと、道筋は受け手の上端の中央へ真下から入る。
+  置き場所が同じなので **必ず交わり**、矢印の先が区切りに刺さって `10 ⯆ 10` に見えていた。
+
+  ```
+  直す前の実測 (図の座標)
+  読み取り値 `8 / 10`  x 88.5 - 121.5
+  矢印の道筋           M 105 278 L 105 341   ← x=105 が読み取り値の真ん中
+  ```
+
+  指摘は 1 件も出ない。 `validate` も `visualValidateAll` も 0 件を返し、板の大きさも変わらない。
+  画面で見た時にだけ分かる。
+
+  **読み取り値を箱の右端へ揃えた** (`textAnchor="end"`)。 中央の縦の通り道が空く。
+
+  矢印の側ではなく数字の側を動かしたのは、矢印の取り付き点が 2 本並んだ時の振り分けを
+  既に持っており、そこへ別の理由でずらす条件を足すと、両方が効いた時の位置が読めなくなるため。
+  揃える先を右にしたのは、箱の右上が空いている図が多いから (左上には枠の題が来る)。
+
+  利用側 (`cardene777/dragon`) の割れていた 4 枚を実測で確かめた。
+
+  | 部品 | 矢印の x | 読み取り値の範囲 (変更後) |
+  |---|---|---|
+  | `parts-batch-collector` | 105 | 147 - 180 |
+  | `parts-backpressure` | 483 | 514 - 558 |
+  | `parts-funnel-3` | 205 | 241 - 285 |
+  | `parts-split-box` | 483 | 519.5 - 563.5 |
+
+  4 枚とも交わらなくなった。
+
 ## [0.69.0] - 2026-09-26
 
 ### Fixed
@@ -2932,7 +3002,9 @@ Initial OSS release.
 使わない = annotated tag を push しても GitHub Release は作られず、 Release を作っていない版で
 行き止まりになる。
 
-[Unreleased]: https://github.com/cardene777/cdl/compare/v0.69.0...HEAD
+[Unreleased]: https://github.com/cardene777/cdl/compare/v0.71.0...HEAD
+[0.71.0]: https://github.com/cardene777/cdl/compare/v0.70.0...v0.71.0
+[0.70.0]: https://github.com/cardene777/cdl/compare/v0.69.0...v0.70.0
 [0.69.0]: https://github.com/cardene777/cdl/compare/v0.68.0...v0.69.0
 [0.68.0]: https://github.com/cardene777/cdl/compare/v0.67.0...v0.68.0
 [0.67.0]: https://github.com/cardene777/cdl/compare/v0.66.0...v0.67.0

package/dist/index.cjs

@@ -24991,9 +24991,9 @@ function renderRect(shape, x, y, w, h, stateValues, fillColor, strokeColor, opac
     /* @__PURE__ */ jsxRuntime.jsxs(
       "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)",
@@ -33621,30 +33621,39 @@ var SHAPE_EYEBROW = {
   end: "\u7D42\u4E86",
   loop: "\u7E70\u308A\u8FD4\u3057"
 };
+var VERTICAL_LANE_ID = "flowchart-main";
 function flowchart(preset) {
   const laneW = preset.laneWidth ?? 380;
   const tone = preset.defaultTone ?? "accent";
+  const \u7E26\u306B\u7A4D\u3080 = (preset.direction ?? "horizontal") === "vertical";
   const b = diagram(preset.id, { topic: preset.topic, type: "flowchart" });
   const laneToId = /* @__PURE__ */ new Map();
   const laneStackCount = /* @__PURE__ */ new Map();
-  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 (\u7E26\u306B\u7A4D\u3080) {
+    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 = [];
   let edgeIdx = 0;
+  const \u5F79\u5272\u3092\u8DB3\u3059 = \u7E26\u306B\u7A4D\u3080 && preset.lanes.length >= 2;
+  const \u7BB1\u306E\u4E0A\u306E\u5B57 = (n) => \u5F79\u5272\u3092\u8DB3\u3059 ? `${n.lane} \xB7 ${SHAPE_EYEBROW[n.shape]}` : SHAPE_EYEBROW[n.shape];
   const api = {
     node(n) {
-      const laneId = laneToId.get(n.lane) ?? n.lane;
+      const laneId = \u7E26\u306B\u7A4D\u3080 ? 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: \u7BB1\u306E\u4E0A\u306E\u5B57(n)
       });
       laneStackCount.set(laneId, stack + 1);
       phaseActivate.push(n.id);