@cardenelabs/cdl 0.67.0 → 0.69.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.67.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 描画する。
@@ -29,9 +29,9 @@ export function GanttNode({
   const y0 = node.cy - node.h / 2;
   const tasks = resolveGanttData(node.ganttData ?? [], stateValues);
 
-  const PAD_TOP = 32;
+  const PAD_TOP = 46;
   const PAD_RIGHT = 48;
-  const PAD_BOTTOM = 44;
+  const PAD_BOTTOM = 26;
   const PAD_LEFT = 156;
   const canvasW = node.w - PAD_LEFT - PAD_RIGHT;
   const canvasH = node.h - PAD_TOP - PAD_BOTTOM;
@@ -39,6 +39,8 @@ export function GanttNode({
   const rowGap = 20;
   const rowCount = tasks.length || 1;
   const rowH = Math.max(28, (canvasH - rowGap * (rowCount + 1)) / rowCount);
+  /** 帯そのものの高さ。 行いっぱいに塗ると塊に見えるので細くして行の中で中央に置く */
+  const 帯の高さ = Math.min(rowH, 30);
 
   // 位置を先に整える (#468 Round 5)。 端も始まりも状態から来るため、 そのまま使うと
   // 図が壊れる形が 3 つある (いずれも実測)。
@@ -107,6 +109,8 @@ export function GanttNode({
 
   const xAt = (idx: number) => PAD_LEFT + idx * cellW;
   const yAt = (row: number) => PAD_TOP + rowGap + row * (rowH + rowGap);
+  /** 帯の上端。 行の真ん中に置く */
+  const 帯の上 = (row: number): number => yAt(row) + (rowH - 帯の高さ) / 2;
 
   // 目盛りの名前は task が持つ (開始と終了の両方)。 どちらも指していない位置は
   // **空にする** = index の数字をそのまま出すと、 月や四半期の並びに数字が 1 つ混ざって
@@ -166,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)。 別々に持つと、 余白を
   // 可変にした時に矢印の基準点だけが旧い端に取り残される
@@ -176,7 +180,7 @@ export function GanttNode({
   /**
    * 帯がどこまで伸びたか (0..1、 cdl#521)。 描く指定が無ければ常に 1 = 全長。
    *
-   * **帯ごとに始端が違う**。 棒グラフは全部が同じ横軸から伸びるが、工程表は工程ごとに
+   * **帯ごとに始端が違う**。 棒グラフは全部が同じ横軸から伸びるが、ガントチャートは工程ごとに
    * 始まる位置が違うため、包みも帯ごとに作って不動点をその帯の左端に置く。
    */
   const 伸び = 進みを畳む(drawing, progress);
@@ -199,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
@@ -213,6 +265,41 @@ export function GanttNode({
         strokeWidth={active ? 3 : 1.25}
       />
 
+      {/* 行の地。 1 行おきに薄く敷いて、名前と帯を横に繋いで読めるようにする */}
+      {整えた.map((t, row) =>
+        row % 2 === 0 ? null : (
+          <rect
+            key={`band-${t.id}`}
+            data-cdl-role="gantt-row"
+            x={PAD_LEFT}
+            y={yAt(row) - rowGap / 2}
+            width={canvasW}
+            height={rowH + rowGap}
+            fill="var(--cdl-surface-sunken, #f4f2ed)"
+            opacity={0.55}
+          />
+        ),
+      )}
+
+      {/* 期間の見出しの下の罫 */}
+      <line
+        x1={PAD_LEFT}
+        y1={PAD_TOP}
+        x2={PAD_LEFT + canvasW}
+        y2={PAD_TOP}
+        stroke="var(--cdl-divider, #d4d4d8)"
+        strokeWidth={1}
+      />
+      {/* 名前の列と図の境。 名前がどの行のものかを目で追える */}
+      <line
+        x1={PAD_LEFT}
+        y1={PAD_TOP}
+        x2={PAD_LEFT}
+        y2={PAD_TOP + canvasH}
+        stroke="var(--cdl-divider, #d4d4d8)"
+        strokeWidth={1}
+      />
+
       {gridLabels.map(({ 位置: i, label }) => (
         <g key={`grid-${i}`}>
           <line
@@ -222,15 +309,14 @@ export function GanttNode({
             x2={xAt(i)}
             y2={PAD_TOP + canvasH}
             stroke="var(--cdl-divider, #d4d4d8)"
-            strokeWidth={0.75}
-            strokeDasharray="3 3"
-            opacity={0.5}
+            strokeWidth={1}
+            opacity={0.45}
           />
           {label === "" ? null : (
             <text
               data-cdl-role="gantt-tick"
               x={xAt(i) + cellW / 2}
-              y={PAD_TOP + canvasH + 18}
+              y={PAD_TOP - 16}
               fontSize={11}
               textAnchor="middle"
               fill="var(--cdl-text-dim, #5a6270)"
@@ -247,14 +333,14 @@ export function GanttNode({
         x2={xAt(maxIdx)}
         y2={PAD_TOP + canvasH}
         stroke="var(--cdl-divider, #d4d4d8)"
-        strokeWidth={0.75}
-        opacity={0.5}
+        strokeWidth={1}
+        opacity={0.45}
       />
 
       {整えた.map((t, row) => (
         <text
           key={`label-${t.id}`}
-          x={PAD_LEFT - 12}
+          x={PAD_LEFT - 16}
           y={yAt(row) + rowH / 2 + 4}
           fontSize={12}
           textAnchor="end"
@@ -267,47 +353,49 @@ export function GanttNode({
 
       {整えた.map((t, row) => {
         const bx = 帯の左(t.startIdx);
-        const by = yAt(row);
+        const by = 帯の上(row);
         // 0 で切るのは二重。 余白が目盛りの幅の半分で頭打ちのため、 引いた結果は必ず
         // 目盛りの幅の半分以上になる = **この分岐に届く入力を今は作れない** (変異試験で確認)。
         // 余白の決め方を変えた時に負の幅を出さないために残す
         const bw = Math.max(0, 帯の右(t.endIdx) - bx);
-        const この行 = 行の伸び(row);
+        const この行 = 帯の伸び(row);
+        /*
+         * 伸びは **幅そのもの** を変える (cdl#875)。
+         *
+         * 横倍率 (`scale(N 1)`) で伸ばすと丸い両端まで一緒に潰れ、伸びている間だけ
+         * 帯が角の詰まった四角に見えていた (実測 = 進み 0.31 で丸みの横幅が 15 から
+         * 4.65)。 幅を変えれば丸みは円のまま残り、短い帯は縦長の楕円へ素直に縮む。
+         *
+         * 倍率を帯の四角だけに掛ける形 (cdl#873) は、担当者の字が一緒に潰れるのを
+         * 止めるためだった。 幅で伸ばすなら字はそもそも影響を受けないので、包みごと
+         * 外す。
+         */
+        const 今の幅 = drawing ? bw * この行 : bw;
         return (
           <g key={`bar-${t.id}`}>
-            {/*
-              倍率は **帯の四角だけ** に掛ける (cdl#873)。 以前は担当者の字も同じ包みに
-              入れていたため、伸びている間ずっと字が横に潰れていた (実測 = 進み 0.6 で
-              字の横幅が 6 割)。 字は倍率のかからない外側に置く。
-            */}
-            <g
-              {...(drawing
-                ? { transform: `translate(${bx} 0) scale(${この行} 1) translate(${-bx} 0)` }
-                : {})}
-            >
-              <rect
-                data-cdl-role="gantt-bar"
-                data-cdl-unresolved={t.unresolved ? "true" : undefined}
-                data-cdl-clipped={"clipped" in t && t.clipped ? "true" : undefined}
-                x={bx}
-                y={by}
-                width={bw}
-                height={rowH}
-                rx={4}
-                fill={toneColor(t.tone)}
-                fillOpacity={0.9}
-              />
-            </g>
+            <rect
+              data-cdl-role="gantt-bar"
+              data-cdl-unresolved={t.unresolved ? "true" : undefined}
+              data-cdl-clipped={"clipped" in t && t.clipped ? "true" : undefined}
+              x={bx}
+              y={by}
+              width={今の幅}
+              height={帯の高さ}
+              rx={帯の高さ / 2}
+              ry={帯の高さ / 2}
+              fill={toneColor(t.tone)}
+              fillOpacity={0.9}
+            />
             {/*
               担当者の字は帯の真ん中に置き、**その帯が伸び切ってから出す**。
               薄く出しながら伸ばす案は採らない = 中央は伸び切った後の位置なので、
               伸びている間は帯の無い所に字が浮く。
             */}
-            {t.owner && rowH >= 22 && この行 >= 1 && (
+            {t.owner && 帯の高さ >= 22 && この行 >= 1 && (
               <text
                 data-cdl-role="gantt-owner"
                 x={bx + bw / 2}
-                y={by + rowH / 2 + 4}
+                y={by + 帯の高さ / 2 + 4}
                 fontSize={11}
                 textAnchor="middle"
                 fill="var(--cdl-node-fill, #ffffff)"
@@ -327,57 +415,72 @@ export function GanttNode({
           const parentRow = rowOf.get(parent.id)!;
           const childRow = rowOf.get(t.id)!;
           const parentBarRight = 帯の右(parent.endIdx);
-          const parentMidY = yAt(parentRow) + rowH / 2;
           const childBarLeft = 帯の左(t.startIdx);
-          const childMidY = yAt(childRow) + rowH / 2;
-          const arrowHeadSize = 8;
-          // arrow head 三角形の頂点 (= tipX + arrowHeadSize) が bar 左辺の 10px 手前に来る
-          // ように配置、 「食い込み」 に見える視覚エラー完全排除
-          const arrowHeadTipGap = 10;
-          const tipX = childBarLeft - arrowHeadTipGap - arrowHeadSize;
-          const tipY = childMidY;
-          const startX = parentBarRight + 4;
-          // 親 bar の右端と 矢印の手前の間に縦線を通す余裕があるかで経路を分ける。
-          //
-          // 旧実装は `elbowX = Math.max(startX + 6, tipX - 6)` で、 子 bar が親の直後に始まると
-          // `elbowX > tipX` になり、 縦線が矢印より右に引かれてから左へ戻っていた。
-          const elbowGap = 6;
-          const enterX = tipX - elbowGap;
-          const hasRoom = enterX - startX >= elbowGap;
-          const path = hasRoom
-            // 余裕がある ... 右へ → 下へ → 矢印へ
-            ? `M ${startX} ${parentMidY} L ${enterX} ${parentMidY} L ${enterX} ${tipY} L ${tipX} ${tipY}`
-            // 余裕がない ... 行間を経由して回り込む (右へ → 行間へ → 左へ → 下へ → 矢印へ)
-            : `M ${startX} ${parentMidY} L ${startX + elbowGap} ${parentMidY}` +
-              ` L ${startX + elbowGap} ${(parentMidY + tipY) / 2}` +
-              ` L ${enterX} ${(parentMidY + tipY) / 2} L ${enterX} ${tipY} L ${tipX} ${tipY}`;
-          const arrowHeadPath = `M ${tipX + arrowHeadSize} ${tipY} L ${tipX} ${tipY - arrowHeadSize / 2} L ${tipX} ${tipY + arrowHeadSize / 2} Z`;
-          // 矢印は両端の帯が出てから描く。 帯が無い場所へ矢印だけが伸びると、
-          // 指す先の無い線になる (cdl#521)。
-          //
-          // **見るのは両端の行の伸びで、図全体の進みではない** (cdl#873)。 行ごとに順へ
-          // 変えた後も全体の進みで見ると、帯が 4 本とも並んでから矢印がまとめて出る。
-          const 両端が出た = 行の伸び(parentRow) >= 1 && 行の伸び(childRow) >= 1;
-          return (
-            (drawing && !両端が出た) ? null : (
+          /*
+           * 矢じりは **幅を高さより広く** 取る (cdl#875)。 帯が高さ 30 の丸帯なので、
+           * 細く尖った矢じりだと線だけが浮いて見える。 平たい三角にすると帯と同じ重さで
+           * 収まり、向きも読める。
+           */
+          const 矢じりの幅 = 11;
+          const 矢じりの高さ = 7;
+          /*
+           * 依存の線は **前の帯の下端から出て、次の帯の上端へ入る** 曲線 1 本 (cdl#875)。
+           *
+           * 横から入れようとすると、前の工程が終わってすぐ次が始まる形で隙間が 6 しかなく、
+           * 矢じりと曲がりに要る 18 が入らない。 折れ線だった頃はそこで右へ出てから左へ
+           * 戻る Z 字を描き、矢じりは帯に届かず宙に浮いていた。
+           *
+           * 上下に繋ぐと、行と行の間が必ず `rowGap` ぶん空いているので、どんな並びでも
+           * 同じ形で引ける。 出る所も入る所も帯の縁なので、線が帯から生えて帯に刺さる。
+           */
+          const 丸み = 帯の高さ / 2;
+          const 親の左 = 帯の左(parent.startIdx);
+          const 子の右 = 帯の右(t.endIdx);
+          /*
+           * 出入りの点は丸みの真ん中に取る (丸みの上から出すと縁を滑って見える)。
+           * ただし **目盛りが細かい図では帯が丸み 2 つぶんより狭くなる**。 その時は
+           * 丸みぶん寄せると帯の外へ出てしまうので、寄せ幅を帯の半分で頭打ちにする
+           * = 狭い帯では帯の真ん中から出る (位置 85 の実測 = 幅 3 の帯で 172.5 と
+           * 右端 160.5 がずれ、線が帯の外から生えていた)。
+           */
+          const 寄せ = (左: number, 右: number): number => Math.min(丸み, (右 - 左) / 2);
+          const 出発X = parentBarRight - 寄せ(親の左, parentBarRight);
+          const 出発Y = 帯の上(parentRow) + 帯の高さ;
+          const 着地X = childBarLeft + 寄せ(childBarLeft, 子の右);
+          const 着地Y = 帯の上(childRow);
+          const 縦の終わりY = 着地Y - 矢じりの高さ;
+          // 手の長さは行と行の間の高さで決める。 超えると帯を通り越してから戻る
+          const 手 = Math.max(6, (縦の終わりY - 出発Y) * 0.55);
+          const path =
+            `M ${出発X} ${出発Y}` +
+            ` C ${出発X} ${出発Y + 手}, ${着地X} ${縦の終わりY - 手}, ${着地X} ${縦の終わりY}`;
+          const arrowHeadPath =
+            `M ${着地X} ${着地Y}` +
+            ` L ${着地X - 矢じりの幅 / 2} ${縦の終わりY}` +
+            ` L ${着地X + 矢じりの幅 / 2} ${縦の終わりY} Z`;
+          const 引けた = 線の伸び(parentRow, childRow);
+          return 引けた <= 0 ? null : (
             <g key={`dep-${parent.id}-${t.id}`} data-cdl-role="gantt-arrow">
               <path
                 d={path}
                 fill="none"
                 stroke="var(--cdl-text-mute, #8a8678)"
-                strokeWidth={1.75}
+                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}"` になり、
  * 名前の欄が空になった)。
  *