@cardenelabs/cdl 0.18.0 → 0.18.1

package/package.json

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