@cardenelabs/cdl 0.118.0 → 0.119.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.118.0",
+  "version": "0.119.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

@@ -17,21 +17,40 @@
  * 使う。 弦の向きを使うと、大きく膨らむ曲線で線が端へ入ってくる向きと別の向きが出る。
  */
 import { EDGE_LABEL_TEXT } from "../label-text";
+import { EDGE_HEAD_MARKER_SIZE } from "../types";
 import { extractPathSegments } from "./collisions";
 import { hasRenderedLabel } from "./spec";
 import { measureTextWidth } from "./text-width";
 
+/** 端の印と端の字の間に空ける余白 (world)。 線に沿う向きと直角の向きで同じ値を使う */
+export const 端の字と印の余白 = 8;
+
+/** 端の印が線の芯から左右へ張り出す長さ (world)。 印の縦の半分 */
+export const 端の印の張り出し = EDGE_HEAD_MARKER_SIZE.既定 / 2;
+
 /**
  * 端から字までの、線に沿った距離 (world)。
  *
- * 端の印の長さの最大 (光っている時の 14、 `render/stage.tsx` の marker の大きさ) に隙間 8 を足す。
+ * 端の印の長さの最大 (光っている時の大きさ) に余白を足す。
  * 印を持たない端 (菱が出どころ側にある「集約」 「コンポジション」 の行き先) でも同じ距離にする = 端ごとに
  * 距離が変わると、図の中で多重度の位置が揃わない。
+ *
+ * **この値は箱と箱の間隔にも入る** (`端の字に要る線の長さ` を `layout/nodes.ts` が引く)。
+ * 変えると図の高さが動くので、印との重なりは直角の向き (`端の字と線の隙間`) で解く。
  */
-export const 端の字を戻す距離 = 22;
+export const 端の字を戻す距離 = EDGE_HEAD_MARKER_SIZE.既定 + 端の字と印の余白;
 
-/** 線と字の間の隙間 (world) */
-export const 端の字と線の隙間 = 8;
+/**
+ * 線と字の間の隙間 (world)。 線の芯から字の箱までを測る。
+ *
+ * **印の張り出しに余白を足す** (#984)。 印は線に沿う向きだけでなく直角の向きにも広がり、
+ * 菱と三角は線の芯から 7 ある。 隙間を 8 にしていた頃は印の縁と字の箱が 1 しか空かず、
+ * 端の数が印に貼り付いて読めた (見本帳のクラス図の集約とコンポジションの両方で出た)。
+ *
+ * 余白は `端の字を戻す距離` が印の長さに足しているものと同じ値にする = 線に沿う向きと
+ * 直角の向きで、印から字までの空き方が揃う。
+ */
+export const 端の字と線の隙間 = 端の印の張り出し + 端の字と印の余白;
 
 /** 端の字の大きさ。 札の下の行と同じ等幅の字 = 多重度を札に入れていた頃と同じ見え方 */
 export const 端の字の大きさ = EDGE_LABEL_TEXT.sub.fontSize;

package/src/render/stage.tsx

@@ -7,6 +7,7 @@ import { buildDiagramAltText, isRenderedNode } from "../layout/spec";
 import {
   EDGE_HEADS,
   EDGE_HEAD_FILLS,
+  EDGE_HEAD_MARKER_SIZE,
   EDGE_HEAD_FILL_DEFAULT,
   EDGE_REVEAL_DEFAULT,
   RELATION_FOCUS_DEFAULT,
@@ -238,8 +239,8 @@ export function CdlStage({
     return Object.entries(TONE).flatMap(([tone, color]) =>
       (
         [
-          [false, 14],
-          [true, 10],
+          [false, EDGE_HEAD_MARKER_SIZE.既定],
+          [true, EDGE_HEAD_MARKER_SIZE.小],
         ] as const
       ).flatMap(([small, size]) =>
         EDGE_HEADS.flatMap((head) =>

package/src/types.ts

@@ -282,6 +282,17 @@ export const EDGE_HEAD_FILL_DEFAULT: EdgeHeadFill = "solid";
 /** 塗り方の全種。 marker の定義と検査の走査がこの並びを引く */
 export const EDGE_HEAD_FILLS: readonly EdgeHeadFill[] = ["solid", "hollow"];
 
+/**
+ * 端の印の大きさ (world)。 `markerHeight` そのもので、形の枠の縦 10 に掛かる倍率ではない。
+ *
+ * `render/stage.tsx` が marker を定義する時と、`layout/head-label.ts` が端の字を印から
+ * 離す時の 2 箇所が引く。 片方に数を直に書くと、印を大きくした時に字だけが元の位置に残る
+ * (#984 では印の縦を見ずに字を置いており、菱の縁と字の間が 1 しか空いていなかった)。
+ *
+ * 縦は形によらず この値。 横だけが形の枠の縦横比で伸びる (`EDGE_HEAD_SHAPE.w / .h`)。
+ */
+export const EDGE_HEAD_MARKER_SIZE = { 既定: 14, 小: 10 } as const;
+
 /** 矢印をいつ出すか (#582)。 `CdlDiagram.edgeReveal` が取る値と 1 対 1 */
 export type EdgeReveal = "phase" | "all";