@cardenelabs/cdl 0.49.0 → 0.50.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.49.0",
+  "version": "0.50.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/kinds/actor.tsx

@@ -1,3 +1,4 @@
+import { 等幅の字 } from "../render/mono-text";
 import type { JSX } from "react";
 import type { LaidNode } from "../types";
 import { nodeAccent } from "./node-tone";
@@ -84,7 +85,7 @@ export function ActorNode({ node, active, value }: { node: LaidNode; active: boo
           fill="var(--cdl-text, #1a1f2a)"
           style={{ fontFamily: "'JetBrains Mono', monospace" }}
         >
-          {value}
+          {等幅の字(value, 42)}
         </text>
       )}
     </g>

package/src/kinds/event.tsx

@@ -1,3 +1,4 @@
+import { 等幅の字 } from "../render/mono-text";
 import type { JSX } from "react";
 import type { LaidNode } from "../types";
 import { nodeAccent } from "./node-tone";
@@ -63,7 +64,7 @@ export function EventNode({
           textAnchor={名前.anchor}
           style={{ fontFamily: "'JetBrains Mono', monospace" }}
         >
-          {node.title}
+          {等幅の字(node.title, 名前.size)}
         </text>
         {node.subtitle && (
           <text
@@ -73,7 +74,7 @@ export function EventNode({
             fill="var(--cdl-text-dim, #5a6270)"
             style={{ fontFamily: "'JetBrains Mono', monospace" }}
           >
-            {node.subtitle}
+            {等幅の字(node.subtitle, 21)}
           </text>
         )}
       </g>

package/src/kinds/function.tsx

@@ -1,3 +1,4 @@
+import { 等幅の字 } from "../render/mono-text";
 import type { JSX } from "react";
 import type { LaidNode } from "../types";
 import { nodeAccent } from "./node-tone";
@@ -53,7 +54,7 @@ export function FunctionNode({ node, active }: { node: LaidNode; active: boolean
         textAnchor={名前.anchor}
         style={{ fontFamily: "'JetBrains Mono', monospace" }}
       >
-        {node.title}
+        {等幅の字(node.title, 名前.size)}
       </text>
       {node.subtitle && (
         <text x={26} y={126 - ずらし} fontSize={20} fill="var(--cdl-text-dim, #5a6270)">

package/src/kinds/generic.tsx

@@ -1,3 +1,4 @@
+import { 等幅の字 } from "../render/mono-text";
 import type { JSX } from "react";
 import type { LaidNode, NodeKind } from "../types";
 import { toneColor } from "./node-tone";
@@ -423,11 +424,11 @@ export function GenericNode({
         </text>
       )}
       <text data-cdl-role="node-label" x={textX} y={titleY} fontSize={20} fontWeight={700} fill={paint.onSolid ? "var(--cdl-node-fill, #ffffff)" : "var(--cdl-text, #1a1f2a)"} textAnchor={textAnchor} dominantBaseline={dominantBaseline} style={node.kind === "function" || node.kind === "api" ? { fontFamily: "'JetBrains Mono', monospace" } : undefined}>
-        {node.title}
+        {node.kind === "function" || node.kind === "api" ? 等幅の字(node.title, 20) : node.title}
       </text>
       {node.subtitle && (
         <text x={textX} y={subtitleY} fontSize={17} fill={paint.onSolid ? "var(--cdl-node-fill, #ffffff)" : "var(--cdl-text-dim, #5a6270)"} textAnchor={textAnchor} dominantBaseline={dominantBaseline} style={{ fontFamily: "'JetBrains Mono', monospace" }}>
-          {node.subtitle}
+          {等幅の字(node.subtitle, 17)}
         </text>
       )}
       {resolvedValue && (
@@ -440,7 +441,7 @@ export function GenericNode({
           fill="var(--cdl-text, #1a1f2a)"
           style={{ fontFamily: "'JetBrains Mono', monospace" }}
         >
-          {resolvedValue}
+          {等幅の字(resolvedValue, 32)}
         </text>
       )}
       {node.rows && node.rows.length > 0 && (() => {
@@ -473,7 +474,7 @@ export function GenericNode({
                   fill="var(--cdl-text, #1a1f2a)"
                   style={{ fontFamily: "'JetBrains Mono', monospace" }}
                 >
-                  {s.right}
+                  {等幅の字(s.right, 21)}
                 </text>
               </g>
             ))}

package/src/kinds/sequence-board.tsx

@@ -1,3 +1,4 @@
+import { 等幅の字 } from "../render/mono-text";
 import type { JSX } from "react";
 import type { LaidNode } from "../types";
 import { interpolate } from "../render/utils";
@@ -144,7 +145,7 @@ export function SequenceBoardNode({
             fill="var(--cdl-text, #1a1f2a)"
             style={{ fontFamily: "'JetBrains Mono', monospace" }}
           >
-            {a.name}
+            {等幅の字(a.name, SEQ_NAME)}
           </text>
           {a.subtitle && (
             <text

package/src/kinds/storage.tsx

@@ -1,3 +1,4 @@
+import { 等幅の字 } from "../render/mono-text";
 import type { JSX } from "react";
 import type { LaidNode, RowMark } from "../types";
 import { nodeAccent } from "./node-tone";
@@ -233,7 +234,7 @@ export function StorageNode({
         textAnchor={名前.anchor}
         style={{ fontFamily: "'JetBrains Mono', monospace" }}
       >
-        {node.title}
+        {等幅の字(node.title, 名前.size)}
       </text>
       {/*
         表の区切り線 2 本 (`#419`)。
@@ -323,7 +324,7 @@ export function StorageNode({
               fill="var(--cdl-text, #1a1f2a)"
               style={{ fontFamily: "'JetBrains Mono', monospace" }}
             >
-              {s.left}
+              {等幅の字(s.left, 26)}
             </text>
             {/*
               型は **読み手が探すものではない**ので、右端で揃えて薄く引く。 名前の右に続けて
@@ -347,7 +348,7 @@ export function StorageNode({
               }
               style={{ fontFamily: "'JetBrains Mono', monospace" }}
             >
-              {s.right}
+              {等幅の字(s.right, 印で分ける ? ROW_TYPE_FONT : 26)}
             </text>
           </g>
         );

package/src/render/edges.tsx

@@ -1,3 +1,4 @@
+import { 等幅の字 } from "./mono-text";
 import type { JSX } from "react";
 import { computeLabelBBoxWorld, hasRenderedLabel, LABEL_PILL_PAD_X } from "../layout/spec";
 import type { EdgeRole, LaidEdge, Tone } from "../types";
@@ -387,7 +388,7 @@ export function CdlEdgeLabelView({
           opacity={labelTextOpacity("sub")}
           style={{ fontFamily: fontFamilyAttr("sub") }}
         >
-          {edge.sub}
+          {等幅の字(edge.sub, EDGE_LABEL_TEXT.sub.fontSize)}
         </text>
       )}
     </g>

package/src/render/mono-text.ts

@@ -0,0 +1,44 @@
+/**
+ * 等幅の書体で描く文字の、 `[` と `]` の間にだけ隙間を足す (#817)。
+ *
+ * `JetBrains Mono` の `[` と `]` は横棒が字の枠いっぱいまで伸びている。 図を画面の幅に合わせて
+ * 縮めると (画面上 14px 前後)、 隣り合った 2 本の横棒がつながって `[]` が四角 1 つに見える
+ * (`string[]` が `string□` と読める)。 合字ではない = 合字を止めても見え方は変わらない。
+ *
+ * 隙間は `<tspan dx>` で足す。 文字は増やさないので `textContent` は元のまま (`string[]`) で、
+ * 文字を読む側 (検索 / 読み上げ / 写し取り) は変わらない。 `dx` は文字の塊を新しく始めないので、
+ * 右寄せ (`text-anchor: end`) も隙間を含めた全体に効く。
+ *
+ * `][` は横棒が外を向いていてつながらないので、 `[]` の組ごとに足せば足りる。
+ *
+ * **engine が等幅の書体で描く文字は全てここを通す**。 通していない箇所はソースの走査で落とす
+ * (`mono-bracket-gap.test.tsx`)。
+ */
+import { createElement, type ReactNode } from "react";
+
+/**
+ * 隙間の幅 (字の大きさに対する比)。
+ *
+ * 等倍で撮り比べて、 全ての字の間を 0.06 空けると 2 本の横棒が分かれて読めた。 図はそれより小さく
+ * 縮めて描かれることもあるので、 少し余裕を持たせる。 1 組あたり字幅の 1 割に満たず、 字の送り幅の
+ * 計算 (等幅を前提に文字数から桁の位置を決める) には入れない。
+ */
+export const 角括弧の隙間 = 0.08;
+
+/**
+ * 文字列の `[]` を `[` と、 前に隙間を持つ `]` に分けて返す。 `[]` を含まない文字と、 文字列でない
+ * 値 (数値 / 要素) はそのまま返す。
+ *
+ * @param text 描く文字
+ * @param fontSize その文字の大きさ (隙間はこれに比例する)
+ */
+export function 等幅の字(text: ReactNode, fontSize: number): ReactNode {
+  if (typeof text !== "string" || !text.includes("[]")) return text;
+  const 塊 = text.split("[]");
+  const out: ReactNode[] = [];
+  塊.forEach((s, i) => {
+    if (i > 0) out.push("[", createElement("tspan", { key: i, dx: fontSize * 角括弧の隙間 }, "]"));
+    if (s !== "") out.push(s);
+  });
+  return out;
+}