@cardenelabs/cdl 0.114.0 → 0.116.0

package/CHANGELOG.md

@@ -5,6 +5,74 @@ CDL (Chainome Diagram Language) の主要変更履歴。
 
 ## [Unreleased]
 
+## [0.116.0] - 2026-10-01
+
+### Fixed
+
+- **葉が少ない木の図が札の中で浮いていた** (#970)
+
+  木の札は種別ごとに 1 つの値 (720x480) で固定されていた。
+  必要な幅は葉の数で変わるので、葉が少ない図は札の中で小さく見える。
+  #968 で兄弟を近づけた結果これが目立ち、見本帳の `配布物の構成` は
+  中身 375 に対して札が 720 で、左右に 172 ずつ余っていた。
+
+  **札の幅を葉の数から出す**。
+
+  ```
+  要る幅 = 葉の数 × (箱の幅 + 隙間) + 左右の余白
+  隙間   = 段の高さ - 箱の高さ
+  ```
+
+  規則は縦が既に持っているものを横に当てただけになる。
+  段は区画の中央に置かれるので、縦の余白は隙間の半分ずつになる。
+  同じ形を横に当てると上の式になり、3 段の木では今の高さ (480) をそのまま返す
+  = 縦は既にこの値で描かれている。
+
+  | 図の形 | 札の幅 (直す前 → 後) | 中身 | 割合 |
+  |---|---|---|---|
+  | 葉 2 枚 / 段 3 つ | 720 → 519 | 375 | 52% → 72% |
+  | 葉 3 枚 / 段 3 つ | 720 → 720 (変わらない) | 588 | 82% |
+
+  **広げる向きには使わない**。 葉が多い図では式の値が既定を超えるが、
+  札を広げると並べる側の配置が崩れる。 超える図は今までどおり区画が狭まり、
+  箱が小さくなる側で吸収する (葉 10 枚の図は式の値が 2353 で、720 に留まる)。
+
+  **葉が 1 枚の図は 2 枚として扱う**。 1 枚の木は縦 1 本の鎖で、
+  式のまま出すと箱 1 つぶんの幅になり、木ではなく縦書きの字列に見える。
+
+  `木の札の幅` を公開した。 組み立てる側 (`tree()` preset と記法の側) が
+  札を作る前に引く。 規則を呼ぶ側に写さないための口になる。
+
+## [0.115.0] - 2026-09-30
+
+### Fixed
+
+- **木の兄弟どうしが遠くへ離れ、離れた 2 本の列に見えた** (#968)
+
+  葉は `canvasW / 葉の数` で等分した区画の中央に置かれていた。
+  区画は箱より広いので、葉が少ない図では兄弟が区画の幅だけ離れる。
+  見本帳の `配布物の構成` は葉が 2 枚で、箱の縁の間が 196 空いていた。
+  同じ図の段と段の隙間は 95 なので、横だけが縦の 2 倍になる。
+
+  横の隙間を **段と段の隙間に揃えた**。
+  木は根から下へ辿る図なので、間隔が 1 つの調子で揃っていないと系統が読めない。
+
+  | 図の形 | 横の隙間 (直す前 → 後) | 縦の隙間 |
+  |---|---|---|
+  | 葉 2 枚 | 196 → 95 | 95 |
+  | 葉 3 枚 | 84 → 84 (変わらない) | 95 |
+
+  **今より広げない**。 葉が多い図では区画の方が狭いので、そちらが効いて位置は動かない。
+  頭打ちを外すと間隔が区画の 3 倍になり、最後の一様縮小が効いて箱まで小さくなる
+  (実測 = 葉 10 枚の図で箱の幅が 57.1 から 19.5 に縮んだ)。
+
+  箱の幅を出す処理を置き場所より先に回した。
+  端の葉がどれだけ幅を取るかは、名前と段から決まるので位置より先に出せる。
+
+  見本帳 (`cardene777/dragon`) の `配布物の構成` は、札に対する中身の割合が
+  横 66% から 52% に **下がる**。 兄弟が近づいたぶん中身が小さくなるためで、
+  図が札の中で浮くのは札の大きさの話として別に扱う。
+
 ## [0.114.0] - 2026-09-30
 
 ### Fixed
@@ -4550,7 +4618,9 @@ Initial OSS release.
 使わない = annotated tag を push しても GitHub Release は作られず、 Release を作っていない版で
 行き止まりになる。
 
-[Unreleased]: https://github.com/cardene777/cdl/compare/v0.114.0...HEAD
+[Unreleased]: https://github.com/cardene777/cdl/compare/v0.116.0...HEAD
+[0.116.0]: https://github.com/cardene777/cdl/compare/v0.115.0...v0.116.0
+[0.115.0]: https://github.com/cardene777/cdl/compare/v0.114.0...v0.115.0
 [0.114.0]: https://github.com/cardene777/cdl/compare/v0.113.0...v0.114.0
 [0.113.0]: https://github.com/cardene777/cdl/compare/v0.112.0...v0.113.0
 [0.112.0]: https://github.com/cardene777/cdl/compare/v0.111.0...v0.112.0

package/dist/index.cjs

@@ -15720,6 +15720,43 @@ var PAD_TOP = 40;
 var PAD_RIGHT = 24;
 var PAD_BOTTOM = 40;
 var PAD_LEFT = 24;
+var \u7BB1\u306E\u6700\u5927\u5E45 = 140;
+var \u7BB1\u306E\u6700\u5927\u9AD8\u3055 = 38;
+var \u672D\u306E\u65E2\u5B9A\u5E45 = 720;
+var \u672D\u306E\u65E2\u5B9A\u9AD8\u3055 = 480;
+function \u6728\u306E\u672D\u306E\u5E45(treeNodes) {
+  const { \u8449\u306E\u6570, \u6BB5\u6570 } = \u6728\u306E\u5F62(treeNodes);
+  const \u6BB5\u306E\u9AD8\u3055 = (\u672D\u306E\u65E2\u5B9A\u9AD8\u3055 - PAD_TOP - PAD_BOTTOM) / Math.max(\u6BB5\u6570, 1);
+  const \u7BB1\u306E\u9AD8\u30553 = Math.min(\u7BB1\u306E\u6700\u5927\u9AD8\u3055, \u6BB5\u306E\u9AD8\u3055 * 0.7);
+  const \u9699\u9593 = \u6BB5\u306E\u9AD8\u3055 - \u7BB1\u306E\u9AD8\u30553;
+  const \u8981\u308B\u5E45 = Math.max(\u8449\u306E\u6570, 2) * (\u7BB1\u306E\u6700\u5927\u5E45 + \u9699\u9593);
+  return Math.ceil(Math.min(\u672D\u306E\u65E2\u5B9A\u5E45, \u8981\u308B\u5E45 + PAD_LEFT + PAD_RIGHT));
+}
+function \u6728\u306E\u5F62(treeNodes) {
+  const ids = new Set(treeNodes.map((n) => n.id));
+  const childrenOf = /* @__PURE__ */ new Map();
+  for (const n of treeNodes) {
+    const p = n.parent && ids.has(n.parent) ? n.parent : "__root__";
+    if (!childrenOf.has(p)) childrenOf.set(p, []);
+    childrenOf.get(p).push(n);
+  }
+  const \u898B\u305F = /* @__PURE__ */ new Set();
+  let \u8449\u306E\u6570 = 0;
+  let \u6BB5\u6570 = 0;
+  const \u4E0B\u898B = (n, depth) => {
+    \u898B\u305F.add(n.id);
+    \u6BB5\u6570 = Math.max(\u6BB5\u6570, depth + 1);
+    const kids = (childrenOf.get(n.id) ?? []).filter((k) => !\u898B\u305F.has(k.id));
+    if (kids.length === 0) {
+      \u8449\u306E\u6570 += 1;
+      return;
+    }
+    for (const k of kids) \u4E0B\u898B(k, depth + 1);
+  };
+  for (const r of childrenOf.get("__root__") ?? []) if (!\u898B\u305F.has(r.id)) \u4E0B\u898B(r, 0);
+  for (const n of treeNodes) if (!\u898B\u305F.has(n.id)) \u4E0B\u898B(n, 0);
+  return { \u8449\u306E\u6570, \u6BB5\u6570 };
+}
 var \u6728\u306E\u679D\u306E\u592A\u3055 = (\u6BB5) => Math.max(1.1, 2.6 - \u6BB5 * 0.45);
 function \u6728\u306E\u4E2D\u8EAB(node, stateValues = {}) {
   const treeNodes = resolveTreeData(node.treeData ?? [], stateValues);
@@ -15923,14 +15960,36 @@ function computeTreeLayout(treeNodes, canvasW, canvasH) {
   );
   const depthGap = canvasH / Math.max(maxDepth + 1, 1);
   const slotW = canvasW / totalLeaves;
-  const nodeH = Math.min(38, depthGap * 0.7);
-  const nodeW = Math.min(140, slotW * 0.85);
+  const nodeH = Math.min(\u7BB1\u306E\u6700\u5927\u9AD8\u3055, depthGap * 0.7);
+  const nodeW = Math.min(\u7BB1\u306E\u6700\u5927\u5E45, slotW * 0.85);
   const \u7BB1\u306E\u5E45 = (n, depth) => {
     const \u6750\u6599 = \u6728\u306E\u884C({ ...n, depth });
     const \u540D\u524D = \u6750\u6599[0];
     const \u8981\u308B = measureTextWidth(\u540D\u524D.text, { fontSize: \u540D\u524D.fontSize}) + (nodeW - \u4F7F\u3048\u308B\u5E45(nodeW));
     return Math.min(Math.max(\u8981\u308B, nodeW), slotW * 0.92);
   };
+  const \u8449\u306E\u4E26\u3073 = [];
+  const \u6BB5\u306E\u8868 = /* @__PURE__ */ new Map();
+  const \u5E45\u306E\u8868 = /* @__PURE__ */ new Map();
+  {
+    const \u898B\u305F = /* @__PURE__ */ new Set();
+    const \u4E0B\u898B = (n, depth) => {
+      \u898B\u305F.add(n.id);
+      \u6BB5\u306E\u8868.set(n.id, depth);
+      \u5E45\u306E\u8868.set(n.id, \u7BB1\u306E\u5E45(n, depth));
+      const kids = (childrenOf.get(n.id) ?? []).filter((k) => !\u898B\u305F.has(k.id));
+      if (kids.length === 0) {
+        \u8449\u306E\u4E26\u3073.push(n.id);
+        return;
+      }
+      for (const k of kids) \u4E0B\u898B(k, depth + 1);
+    };
+    for (const r of roots) if (!\u898B\u305F.has(r.id)) \u4E0B\u898B(r, 0);
+  }
+  const \u8449\u306E\u6570 = Math.max(\u8449\u306E\u4E26\u3073.length, 1);
+  const \u6BB5\u306E\u9699\u9593 = depthGap - nodeH;
+  const \u8449\u306E\u9593\u9694 = Math.min(slotW, nodeW + \u6BB5\u306E\u9699\u9593);
+  const \u8449\u306Ex = (i) => canvasW / 2 - (\u8449\u306E\u6570 - 1) * \u8449\u306E\u9593\u9694 / 2 + i * \u8449\u306E\u9593\u9694;
   const posOf = /* @__PURE__ */ new Map();
   const nodes = [];
   const placed = /* @__PURE__ */ new Set();
@@ -15940,7 +15999,7 @@ function computeTreeLayout(treeNodes, canvasW, canvasH) {
     const kids = (childrenOf.get(n.id) ?? []).filter((k) => !placed.has(k.id));
     let x;
     if (kids.length === 0) {
-      x = leafCursor * slotW + slotW / 2;
+      x = \u8449\u306Ex(leafCursor);
       leafCursor += 1;
     } else {
       const xs = kids.map((k) => place(k, depth + 1));
@@ -15954,7 +16013,7 @@ function computeTreeLayout(treeNodes, canvasW, canvasH) {
       ...n.subtitle !== void 0 ? { subtitle: n.subtitle } : {},
       x,
       y,
-      w: \u7BB1\u306E\u5E45(n, depth),
+      w: \u5E45\u306E\u8868.get(n.id) ?? \u7BB1\u306E\u5E45(n, depth),
       h: nodeH,
       depth,
       ...n.unresolved ? { unresolved: true } : {}
@@ -34487,7 +34546,6 @@ function classDiagram(preset) {
   return api;
 }
 function tree(preset) {
-  const canvasW = preset.nodeWidth ? preset.nodeWidth * 2 : 720;
   const canvasH = 480;
   const b = diagram(preset.id, { topic: preset.topic, type: "tree" });
   const treeNodes = [];
@@ -34497,6 +34555,7 @@ function tree(preset) {
       return api;
     },
     build() {
+      const canvasW = preset.nodeWidth ? preset.nodeWidth * 2 : \u6728\u306E\u672D\u306E\u5E45(treeNodes.map((n) => ({ id: n.id, title: n.title, parent: n.parent })));
       b.lane("tree", { width: canvasW });
       const nodeId = `${preset.id}-tree`;
       b.node(nodeId, {
@@ -35171,5 +35230,6 @@ exports.visualValidateAll = visualValidateAll;
 exports.visualValidateLaid = visualValidateLaid;
 exports.withDerivedValues = withDerivedValues;
 exports.worldToPx = worldToPx;
+exports.木の札の幅 = 木の札の幅;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map