@cardenelabs/cdl 0.18.0 → 0.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.18.0",
+  "version": "0.19.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/nodes.ts

@@ -27,10 +27,12 @@ function autoStorageHeight(
   if (n.kind !== "storage") return n.h ?? defaultH;
   if (n.h != null) return n.h;
   // rows なし storage は title + divider のみで render されるため、 default h=240 では空白過大。
-  // title block (130px) + bottom padding (20px) = 150px に縮める。
+  //
+  // 上下の余白を揃える (#586)。 実測で 150 のとき上 21 / 下 55.9 と下だけ 35 空いていた。
+  // 字の高さ 73.2 に上の余白 21 を上下ぶん足して 115 にする。
   const 印あり = n.rowMarks !== undefined;
   const 呼び名の分 = 印あり && n.subtitle ? SUBTITLE_ROW_SHIFT : 0;
-  if (!n.rows || n.rows.length === 0) return 150 + 呼び名の分;
+  if (!n.rows || n.rows.length === 0) return 115 + 呼び名の分;
   const 必要 = requiredRowsHeight("storage", n.rows.length) ?? defaultH;
   // 行頭の印を持つ箱は **中身の足し算だけ** で高さを決める (#578)。 下限を残すと、行が
   // 1 つしか無い箱が 4 行の箱と同じ高さになり、下が空いたまま並ぶ。

package/src/layout/tokens.ts

@@ -17,35 +17,35 @@ export const TOKENS = {
 
   // node sizes (kind ごと、 unified row h は engine が max() で算出)
   node: {
-    actor: { w: 340, h: 200 },
-    function: { w: 380, h: 170 },
+    actor: { w: 340, h: 165 },
+    function: { w: 380, h: 151 },
     storage: { w: 400, h: 240 },
-    event: { w: 360, h: 200 },
+    event: { w: 360, h: 156 },
     card: { w: 320, h: 150 },
     // 人系
-    person: { w: 280, h: 180 },
-    "user-group": { w: 320, h: 180 },
-    admin: { w: 280, h: 180 },
-    developer: { w: 280, h: 180 },
-    "external-user": { w: 300, h: 180 },
+    person: { w: 280, h: 116 },
+    "user-group": { w: 320, h: 116 },
+    admin: { w: 280, h: 116 },
+    developer: { w: 280, h: 116 },
+    "external-user": { w: 300, h: 116 },
     // インフラ
-    database: { w: 320, h: 200 },
-    cache: { w: 280, h: 160 },
-    queue: { w: 340, h: 140 },
-    "message-bus": { w: 380, h: 140 },
+    database: { w: 320, h: 172 },
+    cache: { w: 280, h: 116 },
+    queue: { w: 340, h: 116 },
+    "message-bus": { w: 380, h: 116 },
     cloud: { w: 320, h: 180 },
-    cdn: { w: 320, h: 160 },
+    cdn: { w: 320, h: 116 },
     // アプリ系
-    service: { w: 320, h: 180 },
-    api: { w: 320, h: 160 },
-    frontend: { w: 320, h: 180 },
-    backend: { w: 320, h: 180 },
-    webhook: { w: 320, h: 160 },
-    microservice: { w: 320, h: 180 },
+    service: { w: 320, h: 116 },
+    api: { w: 320, h: 116 },
+    frontend: { w: 320, h: 116 },
+    backend: { w: 320, h: 116 },
+    webhook: { w: 320, h: 116 },
+    microservice: { w: 320, h: 116 },
     // データ / 判定
-    signer: { w: 300, h: 180 },
-    oracle: { w: 320, h: 180 },
-    "merkle-tree": { w: 340, h: 220 },
+    signer: { w: 300, h: 116 },
+    oracle: { w: 320, h: 116 },
+    "merkle-tree": { w: 340, h: 116 },
     decision: { w: 300, h: 180 },
     // Chart 系 (CAR-994 Phase A) ... 1 node に datum 配列を持ち、 kind 内で SVG geometry 描画。
     // 実際の w/h は preset chart() が w/h override で指定 (default fallback は preset 未指定時のみ)。

package/src/render/edges.tsx

@@ -23,11 +23,19 @@ function labelTextOpacity(line: EdgeLabelLine): number | undefined {
 export function CdlEdgeView({
   edge,
   active,
+  drawing,
   progress,
   stateValues,
 }: {
   edge: LaidEdge;
   active: boolean;
+  /**
+   * この段でこの矢印が **初めて出る** か (#584)。
+   *
+   * 真の時だけ起点から伸ばす。 光っているかで引くと、光り続ける図で段が変わるたびに引き直され、
+   * 既に見えている線が毎回動く (user 実機確認)。 「増えた」 のは 1 度だけなので、動くのも 1 度。
+   */
+  drawing: boolean;
   progress: number;
   stateValues?: Record<string, string>;
 }): JSX.Element {
@@ -77,6 +85,7 @@ export function CdlEdgeView({
       data-cdl-from={edge.from}
       data-cdl-to={edge.to}
       data-cdl-active={active ? "true" : "false"}
+      data-cdl-drawing={drawing ? "true" : "false"}
       data-cdl-path-d={edge.d}
       data-cdl-label-x={edge.labelX}
       data-cdl-label-y={edge.labelY}
@@ -106,6 +115,7 @@ export function CdlEdgeView({
         <SolidEdgePath
           edge={edge}
           active={active}
+          drawing={drawing}
           progress={progress}
           color={color}
           marker={marker}
@@ -130,13 +140,17 @@ export function CdlEdgeView({
 }
 
 /**
- * SolidEdgePath ... solid edge の path を progress 連動で「phase 開始時 0 → 進行と共に伸びる」 動きで描画。
+ * SolidEdgePath ... solid edge の path を progress 連動で「段の始まりで 0 → 進行と共に伸びる」 動きで描画。
  * pathSubpath(d, progress) で d 自体を progress * totalLength の地点まで切り詰めて、
  * SVG <path d=... markerEnd=...> で marker を path 末端 (= 現在進行位置) に atomic 配置。
+ *
+ * **伸ばすのは初めて出る段だけ** (#584)。 光っているかで引くと、段をまたいで光り続ける図で
+ * 既に見えている線が毎段引き直される。
  */
 function SolidEdgePath({
   edge,
   active,
+  drawing,
   progress,
   color,
   marker,
@@ -146,6 +160,7 @@ function SolidEdgePath({
 }: {
   edge: LaidEdge;
   active: boolean;
+  drawing: boolean;
   progress: number;
   color: string;
   marker: string | undefined;
@@ -153,7 +168,8 @@ function SolidEdgePath({
   dashed: boolean;
   stateValues?: Record<string, string>;
 }): JSX.Element {
-  const visibleD = active ? pathSubpath(edge.d, progress) : edge.d;
+  // 伸ばすのは初めて出る段だけ (#584)。 光っているかで引くと、光り続ける図で毎段引き直される
+  const visibleD = drawing ? pathSubpath(edge.d, progress) : edge.d;
   // signal binding: widthBind / strokeBind / dashOffsetBind (CAR edge-signal-binding)
   const defaultWidth = active ? 5 : 2.5;
   const boundWidth = edge.widthBind && stateValues

package/src/render/stage.tsx

@@ -47,20 +47,37 @@ export function CdlStage({
    *
    * 著者が `edgeReveal: "all"` と書いた図では隠さない。
    */
-  const 出番の来た矢印 = useMemo(() => {
-    // 著者が「最初から全部見せる」 と書いた図では隠さない (#582)
-    if ((laid.edgeReveal ?? EDGE_REVEAL_DEFAULT) === "all") return () => true;
+  const 矢印の出番 = useMemo(() => {
     const 初出 = new Map<string, number>();
     laid.phases.forEach((p, i) => {
       for (const id of p.activate ?? []) if (!初出.has(id)) 初出.set(id, i);
     });
     const 今 = currentPhase === undefined ? -1 : laid.phases.findIndex((p) => p.id === currentPhase.id);
-    return (edgeId: string): boolean => {
-      const first = 初出.get(edgeId);
-      if (first === undefined) return true;
-      return 今 < 0 || 今 >= first;
+    // 著者が「最初から全部見せる」 と書いた図では隠さない (#582)
+    const 隠す = (laid.edgeReveal ?? EDGE_REVEAL_DEFAULT) !== "all";
+    return {
+      出るか: (edgeId: string): boolean => {
+        if (!隠す) return true;
+        const first = 初出.get(edgeId);
+        if (first === undefined) return true;
+        return 今 < 0 || 今 >= first;
+      },
+      /*
+       * この段で初めて出るか (#584)。
+       *
+       * 起点から伸ばすのはこの段だけ。 光っているかで引くと、段をまたいで光り続ける図で
+       * 既に見えている線が毎段引き直される (実測 = 表の図で 3 本とも段が変わるたびに伸び直した)。
+       *
+       * **隠さない図でも初出は数える**。 `all` は「最初から見せる」 だけの指定で、
+       * 伸びる動きまで毎段繰り返してよいという意味ではない。
+       */
+      伸ばすか: (edgeId: string): boolean => {
+        const first = 初出.get(edgeId);
+        if (first === undefined) return false;
+        return 今 === first;
+      },
     };
-  }, [laid.phases, currentPhase]);
+  }, [laid.phases, currentPhase, laid.edgeReveal]);
   // この phase で左の起点から描き始める node (cdl#512)。 `activate` とは別集合で持つ =
   // 焦点が当たり続ける図で毎 phase 引き直すことになるため、 光っているかを引き金にしない
   const drawSet = new Set(currentPhase?.draw ?? []);
@@ -265,8 +282,15 @@ export function CdlStage({
         ))}
 
         {/* edges (1st pass) */}
-        {laid.edges.filter((edge) => 出番の来た矢印(edge.id)).map((edge) => (
-          <CdlEdgeView key={edge.id} edge={edge} active={activeSet.has(edge.id)} progress={progress} stateValues={stateValues} />
+        {laid.edges.filter((edge) => 矢印の出番.出るか(edge.id)).map((edge) => (
+          <CdlEdgeView
+            key={edge.id}
+            edge={edge}
+            active={activeSet.has(edge.id)}
+            drawing={矢印の出番.伸ばすか(edge.id)}
+            progress={progress}
+            stateValues={stateValues}
+          />
         ))}
 
         {/* nodes (2nd pass) */}
@@ -290,13 +314,13 @@ export function CdlStage({
 
         {/* 経由 node 貫通する dotted-flow edge の進行点 glow (3rd pass) */}
         {laid.edges
-          .filter((edge) => Boolean(edge.dThrough) && 出番の来た矢印(edge.id))
+          .filter((edge) => Boolean(edge.dThrough) && 矢印の出番.出るか(edge.id))
           .map((edge) => (
             <CdlEdgeGlowView key={`glow-${edge.id}`} edge={edge} active={activeSet.has(edge.id)} />
           ))}
 
         {/* edge labels (3rd pass) ... 全 edge の label を最前面に描画 */}
-        {laid.edges.filter((edge) => 出番の来た矢印(edge.id)).map((edge) => (
+        {laid.edges.filter((edge) => 矢印の出番.出るか(edge.id)).map((edge) => (
           <CdlEdgeLabelView
             key={`label-${edge.id}`}
             edge={edge}