@cardenelabs/cdl 0.120.0 → 0.121.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.120.0",
+  "version": "0.121.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/layout/head-label.ts

@@ -22,8 +22,15 @@ import { extractPathSegments } from "./collisions";
 import { hasRenderedLabel } from "./spec";
 import { measureTextWidth } from "./text-width";
 
-/** 端の字の大きさ。 札の下の行と同じ等幅の字 = 多重度を札に入れていた頃と同じ見え方 */
-export const 端の字の大きさ = EDGE_LABEL_TEXT.sub.fontSize;
+/**
+ * 端の字の大きさ (world)。
+ *
+ * **札の下の行とは別に持つ** (#994)。 元は `EDGE_LABEL_TEXT.sub.fontSize` を引いていたが、
+ * 札は箱の間に置くので縮めても読め、端の字は線の脇で単独に立つので同じ大きさでは負ける。
+ * 見本帳はクラス図を 0.42 倍で出しており、19 では画面 8 画素と、箱の中の字 (11 画素) より
+ * 一段小さく見えた。 26 にすると画面で 11 画素になり、箱の中の字と並ぶ。
+ */
+export const 端の字の大きさ = 26;
 
 /** 字の箱の高さ。 字の大きさに上下の余白を足す */
 const 箱の高さ = Math.round(端の字の大きさ * 1.2);
@@ -31,14 +38,17 @@ const 箱の高さ = Math.round(端の字の大きさ * 1.2);
 /**
  * 端の印と端の字の間に空ける余白 (world)。 線に沿う向きと直角の向きで同じ値を使う。
  *
- * **字の箱の高さの半分で測る** (#989)。 使う側は図を縮めて出すので、余白を world の小さい
- * 数で持つと画面では字より狭くなる。 見本帳はクラス図を 0.42 倍で出しており、余白 8 は
- * 3 画素、字の高さ 19 は 8 画素だった = 線と数が 1 つの帯として読めた。
+ * **字の大きさに連れて広げない** (#994)。 #989 では字の箱の半分から導いていたが、字を 26 に
+ * 上げると余白まで 16 に広がり、印の大きさは変わらないのに字だけが線から遠ざかった。
+ * 実機で見た利用者の言葉は「間伸びしてる」 で、図も縦に伸びていた。
+ *
+ * この余白が避ける相手は **印** で、印は字の大きさに連れて変わらない (`EDGE_HEAD_MARKER_SIZE`
+ * は固定)。 避ける相手が動かないなら、避ける幅も動かさない。
  *
- * 字の箱の半分にすると、縮めた後も **字の半行分** の空きが残る。
- * 字を大きくした図では余白も一緒に広がる。
+ * 値は #989 が字 19 で導いた 12 をそのまま据え置く。 見本帳の 0.42 倍では 5 画素で、
+ * 印の縁と字の箱の間に 1 行の半分ほどが残る。
  */
-export const 端の字と印の余白 = Math.round(箱の高さ / 2);
+export const 端の字と印の余白 = 12;
 
 /** 端の印が線の芯から左右へ張り出す長さ (world)。 印の縦の半分 */
 export const 端の印の張り出し = EDGE_HEAD_MARKER_SIZE.既定 / 2;

package/src/render/edges.tsx

@@ -110,8 +110,9 @@ export function CdlEdgeView({
   // 貫通効果が必要な場合は別途 phase activation で表現する。
   // 丸の通り道は線の両端から印の長さだけ縮める (#988)。 縮めないと丸が端の印の中まで
   // 入り、輪郭だけの三角に濃い丸が重なって印に穴が開いたように見える。
-  // 点線の粒を `shrinkPathEnd` で隠しているのと同じ理由で、向きが両端にあるぶん対で縮める
-  const 通り道を縮める = EDGE_HEAD_MARKER_SIZE.既定 + 走る丸の半径.芯;
+  // 点線の粒を `shrinkPathEnd` で隠しているのと同じ理由で、向きが両端にあるぶん対で縮める。
+  // 縮める幅は芯ではなく **玉の一番外の縁** で測る (#994) = 使う側が縁を足すと芯だけでは足りない
+  const 通り道を縮める = EDGE_HEAD_MARKER_SIZE.既定 + 走る丸の外側;
   const glowPathD = shrinkPathStart(shrinkPathEnd(edge.d, 通り道を縮める), 通り道を縮める);
   void isPassThrough;
 
@@ -267,7 +268,21 @@ function SolidEdgePath({
  * 見えるので、印の長さに芯の半径を足した分だけ通り道を縮める。 ここに数を直に書くと、
  * 丸を大きくした時に芯だけが印へはみ出す。
  */
-export const 走る丸の半径 = { 外: 28, 中: 18, 芯: 11 } as const;
+export const 走る丸の半径 = { 外: 28, 中: 18, 芯: 12 } as const;
+
+/**
+ * 使う側が芯に足す縁の太さの見込み (world、半分の値)。
+ *
+ * 描く側は芯を塗りだけで描くが、使う側は紙の色の縁を回して線から浮かせることがある
+ * (見本帳は 3.5 の縁を足しており、外側は 12 + 1.75 = 13.75 になる)。
+ * その縁は CSS で足されるので描く側からは見えない = 見込みとして持つしかない。
+ *
+ * 2 にするのは見本帳の 1.75 を丸めた値。 **これより太い縁を足すと玉が印に入る**。
+ */
+export const 走る丸の縁の見込み = 2;
+
+/** 玉の一番外の縁までの長さ (world)。 通り道を端から縮める幅の基準になる */
+export const 走る丸の外側 = 走る丸の半径.芯 + 走る丸の縁の見込み;
 
 function EdgeGlowCircles({ color, edgeId }: { color: string; edgeId: string }): JSX.Element {
   const ref = `#cdl-edge-${edgeId}`;