@cardenelabs/cdl 0.66.0 → 0.67.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.66.0",
+  "version": "0.67.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 描画する。
@@ -181,6 +181,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]));
 
@@ -257,30 +272,44 @@ export function GanttNode({
         // 目盛りの幅の半分以上になる = **この分岐に届く入力を今は作れない** (変異試験で確認)。
         // 余白の決め方を変えた時に負の幅を出さないために残す
         const bw = Math.max(0, 帯の右(t.endIdx) - bx);
+        const この行 = 行の伸び(row);
         return (
-          <g
-            key={`bar-${t.id}`}
-            {...(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}
-            />
-            {t.owner && rowH >= 22 && (
+          <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>
+            {/*
+              担当者の字は帯の真ん中に置き、**その帯が伸び切ってから出す**。
+              薄く出しながら伸ばす案は採らない = 中央は伸び切った後の位置なので、
+              伸びている間は帯の無い所に字が浮く。
+            */}
+            {t.owner && rowH >= 22 && この行 >= 1 && (
               <text
-                x={bx + 8}
+                data-cdl-role="gantt-owner"
+                x={bx + bw / 2}
                 y={by + rowH / 2 + 4}
                 fontSize={11}
+                textAnchor="middle"
                 fill="var(--cdl-node-fill, #ffffff)"
                 fontWeight={600}
               >
@@ -323,10 +352,14 @@ export function GanttNode({
               ` 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 (
-            // 矢印は両端の帯が出てから描く。 帯が無い場所へ矢印だけが伸びると、
-            // 指す先の無い線になる (cdl#521)
-            (drawing && 伸び < 1) ? null : (
+            (drawing && !両端が出た) ? null : (
             <g key={`dep-${parent.id}-${t.id}`} data-cdl-role="gantt-arrow">
               <path
                 d={path}