@cardenelabs/cdl 0.66.0 → 0.68.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.66.0",
+  "version": "0.68.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 { 進みを畳む, 段の伸び } 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 つ混ざって
@@ -181,6 +185,21 @@ export function GanttNode({
    */
   const 伸び = 進みを畳む(drawing, progress);
 
+  /**
+   * その行の帯がどこまで伸びたか (0..1、 cdl#873)。
+   *
+   * **上の行から順に 1 本ずつ伸ばす**。 全部を同じ倍率で伸ばすと、「前の工程が終わってから
+   * 次が始まる」 を示す図なのに 4 本が横並びで一斉に伸びる。 依存の向きは上から下なので、
+   * 行番号がそのまま順序になる。
+   *
+   * 区切り方は発想の図と木の図が使う `段の伸び` と同じ。 進みを行数で等分し、その区間に
+   * 入ってから出るまでを 0→1 で返す。 **行が増えるほど 1 本あたりは速くなる** = 図全体の
+   * 時間は段の `duration` が決めるので、本数で割る以外に配りようがない。
+   *
+   * 描く指定が無い時は `伸び` が 1 なので、どの行も 1 を返す (今までと同じ)。
+   */
+  const 行の伸び = (row: number): number => 段の伸び(伸び, row + 1, rowCount);
+
   const taskById = new Map(整えた.map((t) => [t.id, t]));
   const rowOf = new Map(整えた.map((t, i) => [t.id, i]));
 
@@ -198,6 +217,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
@@ -207,15 +261,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)"
@@ -232,14 +285,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"
@@ -252,35 +305,51 @@ 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);
+        /*
+         * 伸びは **幅そのもの** を変える (cdl#875)。
+         *
+         * 横倍率 (`scale(N 1)`) で伸ばすと丸い両端まで一緒に潰れ、伸びている間だけ
+         * 帯が角の詰まった四角に見えていた (実測 = 進み 0.31 で丸みの横幅が 15 から
+         * 4.65)。 幅を変えれば丸みは円のまま残り、短い帯は縦長の楕円へ素直に縮む。
+         *
+         * 倍率を帯の四角だけに掛ける形 (cdl#873) は、担当者の字が一緒に潰れるのを
+         * 止めるためだった。 幅で伸ばすなら字はそもそも影響を受けないので、包みごと
+         * 外す。
+         */
+        const 今の幅 = drawing ? bw * この行 : bw;
         return (
-          <g
-            key={`bar-${t.id}`}
-            {...(drawing
-              ? { transform: `translate(${bx} 0) scale(${伸び} 1) translate(${-bx} 0)` }
-              : {})}
-          >
+          <g key={`bar-${t.id}`}>
             <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}
+              width={今の幅}
+              height={帯の高さ}
+              rx={帯の高さ / 2}
+              ry={帯の高さ / 2}
               fill={toneColor(t.tone)}
               fillOpacity={0.9}
             />
-            {t.owner && rowH >= 22 && (
+            {/*
+              担当者の字は帯の真ん中に置き、**その帯が伸び切ってから出す**。
+              薄く出しながら伸ばす案は採らない = 中央は伸び切った後の位置なので、
+              伸びている間は帯の無い所に字が浮く。
+            */}
+            {t.owner && 帯の高さ >= 22 && この行 >= 1 && (
               <text
-                x={bx + 8}
-                y={by + rowH / 2 + 4}
+                data-cdl-role="gantt-owner"
+                x={bx + bw / 2}
+                y={by + 帯の高さ / 2 + 4}
                 fontSize={11}
+                textAnchor="middle"
                 fill="var(--cdl-node-fill, #ffffff)"
                 fontWeight={600}
               >
@@ -298,41 +367,57 @@ 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#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`;
           return (
-            // 矢印は両端の帯が出てから描く。 帯が無い場所へ矢印だけが伸びると、
-            // 指す先の無い線になる (cdl#521)
-            (drawing && 伸び < 1) ? null : (
+            (drawing && !(行の伸び(parentRow) >= 1 && 行の伸び(childRow) >= 1)) ? 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"
               />