@cardenelabs/cdl 0.12.0 → 0.12.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "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/kinds/box-lines.ts

@@ -28,6 +28,16 @@ const 上下の余白 = 2;
 /** 箱の左右に空ける余白 (片側) */
 const 左右の余白 = 8;
 
+/**
+ * その箱で文字に使える幅。
+ *
+ * **余白を呼出側に写さない**。 写すと余白を変えた時に片方だけ古くなり、`箱に積む` を通る
+ * 経路と通らない経路で収まる幅が変わる (cdl#526 で 1 行だけの経路が幅を見ていなかった)。
+ */
+export function 使える幅(箱の幅: number): number {
+  return 箱の幅 - 左右の余白 * 2;
+}
+
 export type 積む行 = {
   役割: "title" | "subtitle";
   text: string;
@@ -109,12 +119,12 @@ export function 箱に積む(行: 積む行[], 箱の幅: number, 箱の高さ:
   const 残す = [...候補];
   while (残す.length > 1 && 高さ(残す) > 使える高さ) 残す.pop();
 
-  const 使える幅 = 箱の幅 - 左右の余白 * 2;
+  const 幅 = 使える幅(箱の幅);
   const 総高 = 高さ(残す);
   let 積み = -総高 / 2;
   return 残す.map((r) => {
     const dy = 積み + ((行送りの比 + 字の高さの比) / 2) * r.fontSize;
     積み += r.fontSize * 行送りの比;
-    return { ...r, text: 幅で切る(r.text, r.fontSize, 使える幅), dy };
+    return { ...r, text: 幅で切る(r.text, r.fontSize, 幅), dy };
   });
 }

package/src/kinds/mind-map.tsx

@@ -1,5 +1,5 @@
 import type { JSX } from "react";
-import { 箱に積む } from "./box-lines";
+import { 使える幅, 幅で切る, 箱に積む } from "./box-lines";
 import type { LaidNode, Tone, MindBranchNode } from "../types";
 import { TONE } from "../render/tone";
 import { resolveMindData } from "../render/payload-binding";
@@ -147,6 +147,9 @@ export function MindMapNode({
               </text>
             ))
           ) : (
+            // 補足が無くても **幅に収める** (#526)。 `箱に積む` を通らないこの経路だけが
+            // 幅を見ておらず、長い名前がそのまま箱の外へ出て枝の線と重なっていた
+            // (実測 = 中心の箱で文字 163px に対し箱 120px)
             <text
               x={n.x}
               y={n.y + 5}
@@ -155,7 +158,7 @@ export function MindMapNode({
               textAnchor="middle"
               fill={文字の色}
             >
-              {n.title}
+              {幅で切る(n.title, n.isRoot ? 15 : 13, 使える幅(n.w))}
             </text>
           )}
         </g>

package/src/kinds/tree.tsx

@@ -2,7 +2,7 @@ import type { JSX } from "react";
 import type { LaidNode, TreeNodePayload } from "../types";
 import { TONE } from "../render/tone";
 import { resolveTreeData } from "../render/payload-binding";
-import { 箱に積む, type 積んだ行 } from "../kinds/box-lines";
+import { 使える幅, 幅で切る, 箱に積む, type 積んだ行 } from "../kinds/box-lines";
 import { 進みを畳む, 伸ばすdash, 段の伸び } from "./draw-progress";
 
 /**
@@ -190,6 +190,8 @@ export function TreeNode({
                     名前の太さ: 700,
                   })
                 ) : (
+                  // 補足が無くても幅に収める (#526)。 `箱の文字` を通らないこの経路だけが
+                  // 幅を見ておらず、長い名前が箱の外へ出ていた
                   <text
                     x={n.w / 2}
                     y={n.h / 2 + 5}
@@ -198,7 +200,7 @@ export function TreeNode({
                     textAnchor="middle"
                     fill="var(--cdl-text-on-tone, #ffffff)"
                   >
-                    {n.title}
+                    {幅で切る(n.title, 13, 使える幅(n.w))}
                   </text>
                 )}
               </>
@@ -233,7 +235,7 @@ export function TreeNode({
                     textAnchor="middle"
                     fill="var(--cdl-chip-text, #1a1f2a)"
                   >
-                    {n.title}
+                    {幅で切る(n.title, 12, 使える幅(n.w))}
                   </text>
                 )}
               </>