@cardenelabs/cdl 0.68.0 → 0.69.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.68.0",
+  "version": "0.69.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/gantt.tsx

@@ -2,7 +2,7 @@ import type { JSX } from "react";
 import type { LaidNode, Tone } from "../types";
 import { TONE } from "../render/tone";
 import { resolveGanttData } from "../render/payload-binding";
-import { 進みを畳む, 段の伸び } from "./draw-progress";
+import { 伸ばすdash, 進みを畳む, 段の伸び } from "./draw-progress";
 
 /**
  * gantt-timeline kind ... 1 node に task 配列 (ganttData) を保持し、 帯状 timeline を SVG 描画する。
@@ -170,7 +170,7 @@ export function GanttNode({
   //
   // 固定 (6) だと、 目盛りが細かい図で帯が消える。 1 目盛りの幅が 6 ちょうどだと幅 0、
   // それより小さいと負になる (実測 = 位置 1e6 で -5.999、 位置 85 で 0)。
-  // 目盛りが広い図 (通常の工程表) では 6 のままなので見た目は変わらない。
+  // 目盛りが広い図 (通常のガントチャート) では 6 のままなので見た目は変わらない。
   const 帯の余白 = Math.min(6, cellW / 2);
   // 帯の左端と右端。 **依存矢印も同じ式を使う** (#468 Round 9)。 別々に持つと、 余白を
   // 可変にした時に矢印の基準点だけが旧い端に取り残される
@@ -180,7 +180,7 @@ export function GanttNode({
   /**
    * 帯がどこまで伸びたか (0..1、 cdl#521)。 描く指定が無ければ常に 1 = 全長。
    *
-   * **帯ごとに始端が違う**。 棒グラフは全部が同じ横軸から伸びるが、工程表は工程ごとに
+   * **帯ごとに始端が違う**。 棒グラフは全部が同じ横軸から伸びるが、ガントチャートは工程ごとに
    * 始まる位置が違うため、包みも帯ごとに作って不動点をその帯の左端に置く。
    */
   const 伸び = 進みを畳む(drawing, progress);
@@ -203,6 +203,54 @@ export function GanttNode({
   const taskById = new Map(整えた.map((t) => [t.id, t]));
   const rowOf = new Map(整えた.map((t, i) => [t.id, i]));
 
+  /**
+   * 行の時間のうち、**入ってくる依存の線を引くのに使う割合** (cdl#877)。
+   *
+   * 残りで帯を伸ばす。 行の持ち時間そのものは変えないので、図全体の長さは変わらない。
+   */
+  const 線の取り分 = 0.35;
+
+  const 区切る = (v: number): number => Math.min(1, Math.max(0, v));
+
+  /** その行に、上の行から入ってくる依存の線があるか */
+  const 上から来る線 = (row: number): boolean => {
+    const t = 整えた[row];
+    if (t === undefined || t.dependsOn === undefined) return false;
+    const 親 = taskById.get(t.dependsOn);
+    if (親 === undefined) return false;
+    const 親の行 = rowOf.get(親.id);
+    return 親の行 !== undefined && 親の行 < row;
+  };
+
+  /**
+   * その行の帯がどこまで伸びたか (0..1、 cdl#877)。
+   *
+   * **入ってくる線がある行は、線を引き終えてから伸び始める**。 前の工程が終わり、線が
+   * 次の工程へ届き、そこから帯が伸びる = 図が示している順序をそのまま時間に写す。
+   * 線の無い行 (最初の工程や、下から上へ戻る依存) は行の時間を丸ごと使う。
+   */
+  const 帯の伸び = (row: number): number => {
+    const r = 行の伸び(row);
+    return 上から来る線(row) ? 区切る((r - 線の取り分) / (1 - 線の取り分)) : r;
+  };
+
+  /**
+   * その線がどこまで引けたか (0..1、 cdl#877)。
+   *
+   * 以前は両端の行が伸び切った瞬間に線が丸ごと現れていた。 線が根元から先へ伸びれば
+   * 「どちらからどちらへ」 が動きそのもので読める。
+   *
+   * **親が下にある依存は順に読ませる向きが無い**。 その時だけは両端が伸び切ってから
+   * 一度に出す (上から下へ読む図で、下から戻る線を先に引くと順序が逆に見える)。
+   */
+  const 線の伸び = (親の行: number, 子の行: number): number => {
+    if (!drawing) return 1;
+    if (親の行 >= 子の行) {
+      return 行の伸び(親の行) >= 1 && 行の伸び(子の行) >= 1 ? 1 : 0;
+    }
+    return 区切る(行の伸び(子の行) / 線の取り分);
+  };
+
   return (
     <g transform={`translate(${x0} ${y0})`}>
       <rect
@@ -310,7 +358,7 @@ export function GanttNode({
         // 目盛りの幅の半分以上になる = **この分岐に届く入力を今は作れない** (変異試験で確認)。
         // 余白の決め方を変えた時に負の幅を出さないために残す
         const bw = Math.max(0, 帯の右(t.endIdx) - bx);
-        const この行 = 行の伸び(row);
+        const この行 = 帯の伸び(row);
         /*
          * 伸びは **幅そのもの** を変える (cdl#875)。
          *
@@ -410,8 +458,8 @@ export function GanttNode({
             `M ${着地X} ${着地Y}` +
             ` L ${着地X - 矢じりの幅 / 2} ${縦の終わりY}` +
             ` L ${着地X + 矢じりの幅 / 2} ${縦の終わりY} Z`;
-          return (
-            (drawing && !(行の伸び(parentRow) >= 1 && 行の伸び(childRow) >= 1)) ? null : (
+          const 引けた = 線の伸び(parentRow, childRow);
+          return 引けた <= 0 ? null : (
             <g key={`dep-${parent.id}-${t.id}`} data-cdl-role="gantt-arrow">
               <path
                 d={path}
@@ -420,16 +468,19 @@ export function GanttNode({
                 strokeWidth={2.4}
                 strokeLinejoin="round"
                 strokeLinecap="round"
+                {...伸ばすdash(drawing, 引けた)}
               />
-              <path
-                d={arrowHeadPath}
-                fill="var(--cdl-text-mute, #8a8678)"
-                stroke="var(--cdl-text-mute, #8a8678)"
-                strokeWidth={0.5}
-                strokeLinejoin="round"
-              />
+              {/* 矢じりは線が届いてから置く。 先に出すと、線の無い所に三角が浮く */}
+              {引けた < 1 ? null : (
+                <path
+                  d={arrowHeadPath}
+                  fill="var(--cdl-text-mute, #8a8678)"
+                  stroke="var(--cdl-text-mute, #8a8678)"
+                  strokeWidth={0.5}
+                  strokeLinejoin="round"
+                />
+              )}
             </g>
-            )
           );
         })}
     </g>

package/src/presets.ts

@@ -34,7 +34,7 @@ export type BindingRef = `{${名前の頭}${string}}`;
  * その文字列が **全体で** 状態を読む書き方かどうか (#468 Round 5)。
  *
  * `hasUnresolvedRef` は「参照らしい部分を含むか」 を見るため、 `Phase {A}` のような通常の
- * 名前まで参照とみなす。 工程表の入口は名前と参照を同じ欄で受けるので、 部分一致で判定すると
+ * 名前まで参照とみなす。 ガントチャートの入口は名前と参照を同じ欄で受けるので、 部分一致で判定すると
  * **正当な名前が黙って消える** (実測 = `start: "Phase {A}"` が位置 `"Phase {A}"` になり、
  * 名前の欄が空になった)。
  *