@cardenelabs/cdl 0.66.0 → 0.68.0

package/CHANGELOG.md

@@ -5,6 +5,93 @@ CDL (Chainome Diagram Language) の主要変更履歴。
 
 ## [Unreleased]
 
+## [0.68.0] - 2026-09-26
+
+### Fixed
+
+- **工程表の帯が伸びる途中で角ばるのと、依存の線が帯から離れるのを直した** (#875)
+
+  動いている途中を撮って測ったところ、3 つの問題が出た。
+
+  | 何が起きていたか | 実測 |
+  |---|---|
+  | 帯の丸い両端が伸びている間だけ潰れる | 進み 0.31 で丸みの横幅が 15 から 4.65 |
+  | 依存の矢じりが帯に届かず宙に浮く | 前の工程の直後に次が始まる並びで隙間 6 に対し、矢じりと曲がりに 18 要る |
+  | 線の出る所が帯の外に出る | 位置 85 の幅 3 の帯で、出発点 172.5 に対し右端 160.5 |
+
+  1 つ目は伸ばし方。 帯を包む `g` に横倍率 (`scale(N 1)`) をかけていたため、丸い両端も一緒に潰れていた。
+  **`rect` の `width` そのものを変える形に替えた**。 丸みは円のまま残り、短い帯は縦長の楕円へ素直に縮む。
+  包みが要らなくなったので、図の中に `scale(` を持つ `transform` は 1 つも無くなった
+  (担当者の字だけを包みの外へ出していた #873 の形も、これで不要になる)。
+
+  2 つ目は線の形。 折れ線で右へ出てから下りて左へ戻る Z 字だったため、隙間の狭い並びで矢じりが帯に
+  届かなかった。 **前の帯の下端から出て次の帯の上端へ入る曲線 1 本** に替えた。 行と行の間は必ず
+  `rowGap` ぶん空いているので、どんな並びでも同じ形で引ける。
+
+  3 つ目は出入りの点。 丸みぶん内側へ寄せていたが、目盛りが細かい図では帯が丸み 2 つぶんより狭くなる。
+  **寄せ幅を帯の半分で頭打ちにした**。 狭い帯では帯の真ん中から線が出る。
+
+  矢じりは幅 11 / 高さ 7 の平たい三角、線は太さ 2.4 にした。 細く尖った矢じりだと、高さ 30 の丸帯の
+  そばで線だけが浮いて見える。
+
+### Changed
+
+- **工程表の見た目を作り直した** (#875)
+
+  | 部位 | 変更前 | 変更後 |
+  |---|---|---|
+  | 期間の見出し | 図の下 | 図の上 (罫を 1 本引く) |
+  | 行の地 | 無し | 1 行おきに薄く敷く (`data-cdl-role="gantt-row"`) |
+  | 名前の列と図の境 | 無し | 縦罫を 1 本引く |
+  | 目盛りの縦線 | 破線 0.75 / 不透明度 0.5 | 実線 1 / 不透明度 0.45 |
+  | 帯の高さ | 行いっぱい | 30 で頭打ちにして行の中で中央に置く |
+  | 帯の角 | 6 | 高さの半分 (丸帯) |
+
+  期間の見出しを上へ動かしたのは、工程表が上から下へ読む図だから。 下にあると、最後の行まで読んでから
+  目盛りを確かめに戻ることになる。
+
+  行の地を 1 行おきに敷くのは、名前の列と帯が横に離れているため。 名前がどの帯のものかを目で追える。
+
+  帯を行いっぱいに塗ると塊に見えるので、高さを 30 で頭打ちにして行の中で中央に置く。
+
+## [0.67.0] - 2026-09-25
+
+### Fixed
+
+- **工程表の帯を上から順に伸ばし、担当者の字を伸ばさず帯の真ん中に置くようにした** (#873)
+
+  段の `draw` で帯を現す時、帯を包む `g` に横倍率をかけて伸ばしていた。 包みの中には帯の四角だけでなく
+  **担当者の字も入っていた** ため、倍率が字にもかかる。 進みが 0.6 の時点で字の横幅が 6 割に潰れ、
+  伸び切るまで字が横に引き伸ばされ続けていた。
+
+  さらに **全ての帯が同じ倍率で同時に伸びていた**。 工程表は「前の工程が終わってから次が始まる」 を示す図
+  なのに、4 本が横並びで一斉に伸びる。
+
+  直した点は 4 つ。
+
+  | 直した点 | 変更前 | 変更後 |
+  |---|---|---|
+  | 倍率のかかる範囲 | 帯の四角と担当者の字 | 帯の四角だけ |
+  | 担当者の字の位置 | 帯の左端から 8 | 帯の左端と右端の真ん中 (`text-anchor` は `middle`) |
+  | 帯の伸び方 | 全ての帯が図全体の進み | 行ごとに区切り、上の行から順に |
+  | 依存の矢印を出す条件 | 図全体の進みが 1 | 両端の行がどちらも伸び切った時 |
+
+  行ごとの区切りは発想の図と木の図が既に使っている `段の伸び` を行番号に当てる。 進みを行数で等分し、
+  その区間に入ってから出るまでを 0→1 で返す。 **行が増えるほど 1 本あたりは速くなる** = 図全体の時間は
+  段の `duration` が決めるので、本数で割る以外に配りようがない。
+
+  担当者の字は **その行が伸び切ってから出す**。 薄く出しながら伸ばす案は採らない = 中央は伸び切った後の
+  位置なので、伸びている間は帯の無い所に字が浮く。
+
+  矢印を出す条件も図全体の進みから両端の行の伸びへ変えた。 変えないと、帯が 4 本とも並んでから矢印が
+  まとめて出る。
+
+  担当者の字に `data-cdl-role="gantt-owner"` が付く (それまで役割を持っていなかった)。
+
+  描く指定の無い図は 1 要素も変わらない = 行ごとの伸びは進みが 1 の時どの行も 1 を返す。
+
+  dragon の見本帳で工程表の字が伸びて見えた原因 (dragon#2549)。
+
 ## [0.66.0] - 2026-09-15
 
 ### Fixed
@@ -2813,7 +2900,9 @@ Initial OSS release.
 使わない = annotated tag を push しても GitHub Release は作られず、 Release を作っていない版で
 行き止まりになる。
 
-[Unreleased]: https://github.com/cardene777/cdl/compare/v0.66.0...HEAD
+[Unreleased]: https://github.com/cardene777/cdl/compare/v0.68.0...HEAD
+[0.68.0]: https://github.com/cardene777/cdl/compare/v0.67.0...v0.68.0
+[0.67.0]: https://github.com/cardene777/cdl/compare/v0.66.0...v0.67.0
 [0.66.0]: https://github.com/cardene777/cdl/compare/v0.65.0...v0.66.0
 [0.65.0]: https://github.com/cardene777/cdl/compare/v0.64.1...v0.65.0
 [0.64.1]: https://github.com/cardene777/cdl/compare/v0.64.0...v0.64.1

package/dist/index.cjs

@@ -26974,15 +26974,16 @@ function GanttNode({
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
   const tasks = resolveGanttData(node.ganttData ?? [], stateValues);
-  const PAD_TOP2 = 32;
+  const PAD_TOP2 = 46;
   const PAD_RIGHT2 = 48;
-  const PAD_BOTTOM2 = 44;
+  const PAD_BOTTOM2 = 26;
   const PAD_LEFT2 = 156;
   const canvasW = node.w - PAD_LEFT2 - PAD_RIGHT2;
   const canvasH = node.h - PAD_TOP2 - PAD_BOTTOM2;
   const rowGap = 20;
   const rowCount = tasks.length || 1;
   const rowH = Math.max(28, (canvasH - rowGap * (rowCount + 1)) / rowCount);
+  const \u5E2F\u306E\u9AD8\u3055 = Math.min(rowH, 30);
   const \u4F4D\u7F6E\u306E\u4E0A\u9650 = 1e6;
   const \u53CE\u3081\u305F = tasks.map((t) => {
     const \u59CB = Math.min(\u4F4D\u7F6E\u306E\u4E0A\u9650, Math.max(0, Number.isFinite(t.startIdx) ? t.startIdx : 0));
@@ -27008,6 +27009,7 @@ function GanttNode({
   const \u76EE\u76DB\u308A\u306E\u672C\u6570 = Math.ceil(maxIdx / \u76EE\u76DB\u308A\u306E\u9593\u9694);
   const xAt = (idx) => PAD_LEFT2 + idx * cellW;
   const yAt = (row) => PAD_TOP2 + rowGap + row * (rowH + rowGap);
+  const \u5E2F\u306E\u4E0A = (row) => yAt(row) + (rowH - \u5E2F\u306E\u9AD8\u3055) / 2;
   const \u540D\u524D = { \u6574\u6570\u306E\u958B\u59CB: /* @__PURE__ */ new Map(), \u6574\u6570\u306E\u7D42\u4E86: /* @__PURE__ */ new Map(), \u7AEF\u6570\u306E\u958B\u59CB: /* @__PURE__ */ new Map(), \u7AEF\u6570\u306E\u7D42\u4E86: /* @__PURE__ */ new Map() };
   const \u7F6E\u304F = (\u8868, \u4F4D\u7F6E, label) => {
     if (label !== "" && Number.isFinite(\u4F4D\u7F6E) && !\u8868.has(\u4F4D\u7F6E)) \u8868.set(\u4F4D\u7F6E, label);
@@ -27029,6 +27031,7 @@ function GanttNode({
   const \u5E2F\u306E\u5DE6 = (idx) => xAt(idx) + \u5E2F\u306E\u4F59\u767D / 2;
   const \u5E2F\u306E\u53F3 = (idx) => xAt(idx) + cellW - \u5E2F\u306E\u4F59\u767D / 2;
   const \u4F38\u3073 = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
+  const \u884C\u306E\u4F38\u3073 = (row) => \u6BB5\u306E\u4F38\u3073(\u4F38\u3073, row + 1, rowCount);
   const taskById = new Map(\u6574\u3048\u305F.map((t) => [t.id, t]));
   const rowOf = new Map(\u6574\u3048\u305F.map((t, i) => [t.id, i]));
   return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
@@ -27046,6 +27049,43 @@ function GanttNode({
         strokeWidth: active ? 3 : 1.25
       }
     ),
+    \u6574\u3048\u305F.map(
+      (t, row) => row % 2 === 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(
+        "rect",
+        {
+          "data-cdl-role": "gantt-row",
+          x: PAD_LEFT2,
+          y: yAt(row) - rowGap / 2,
+          width: canvasW,
+          height: rowH + rowGap,
+          fill: "var(--cdl-surface-sunken, #f4f2ed)",
+          opacity: 0.55
+        },
+        `band-${t.id}`
+      )
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "line",
+      {
+        x1: PAD_LEFT2,
+        y1: PAD_TOP2,
+        x2: PAD_LEFT2 + canvasW,
+        y2: PAD_TOP2,
+        stroke: "var(--cdl-divider, #d4d4d8)",
+        strokeWidth: 1
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "line",
+      {
+        x1: PAD_LEFT2,
+        y1: PAD_TOP2,
+        x2: PAD_LEFT2,
+        y2: PAD_TOP2 + canvasH,
+        stroke: "var(--cdl-divider, #d4d4d8)",
+        strokeWidth: 1
+      }
+    ),
     gridLabels.map(({ \u4F4D\u7F6E: i, label }) => /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "line",
@@ -27056,9 +27096,8 @@ function GanttNode({
           x2: xAt(i),
           y2: PAD_TOP2 + canvasH,
           stroke: "var(--cdl-divider, #d4d4d8)",
-          strokeWidth: 0.75,
-          strokeDasharray: "3 3",
-          opacity: 0.5
+          strokeWidth: 1,
+          opacity: 0.45
         }
       ),
       label === "" ? null : /* @__PURE__ */ jsxRuntime.jsx(
@@ -27066,7 +27105,7 @@ function GanttNode({
         {
           "data-cdl-role": "gantt-tick",
           x: xAt(i) + cellW / 2,
-          y: PAD_TOP2 + canvasH + 18,
+          y: PAD_TOP2 - 16,
           fontSize: 11,
           textAnchor: "middle",
           fill: "var(--cdl-text-dim, #5a6270)",
@@ -27082,14 +27121,14 @@ function GanttNode({
         x2: xAt(maxIdx),
         y2: PAD_TOP2 + canvasH,
         stroke: "var(--cdl-divider, #d4d4d8)",
-        strokeWidth: 0.75,
-        opacity: 0.5
+        strokeWidth: 1,
+        opacity: 0.45
       }
     ),
     \u6574\u3048\u305F.map((t, row) => /* @__PURE__ */ jsxRuntime.jsx(
       "text",
       {
-        x: PAD_LEFT2 - 12,
+        x: PAD_LEFT2 - 16,
         y: yAt(row) + rowH / 2 + 4,
         fontSize: 12,
         textAnchor: "end",
@@ -27101,89 +27140,85 @@ function GanttNode({
     )),
     \u6574\u3048\u305F.map((t, row) => {
       const bx = \u5E2F\u306E\u5DE6(t.startIdx);
-      const by = yAt(row);
+      const by = \u5E2F\u306E\u4E0A(row);
       const bw = Math.max(0, \u5E2F\u306E\u53F3(t.endIdx) - bx);
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        "g",
-        {
-          ...drawing ? { transform: `translate(${bx} 0) scale(${\u4F38\u3073} 1) translate(${-bx} 0)` } : {},
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "rect",
-              {
-                "data-cdl-role": "gantt-bar",
-                "data-cdl-unresolved": t.unresolved ? "true" : void 0,
-                "data-cdl-clipped": "clipped" in t && t.clipped ? "true" : void 0,
-                x: bx,
-                y: by,
-                width: bw,
-                height: rowH,
-                rx: 4,
-                fill: toneColor4(t.tone),
-                fillOpacity: 0.9
-              }
-            ),
-            t.owner && rowH >= 22 && /* @__PURE__ */ jsxRuntime.jsx(
-              "text",
-              {
-                x: bx + 8,
-                y: by + rowH / 2 + 4,
-                fontSize: 11,
-                fill: "var(--cdl-node-fill, #ffffff)",
-                fontWeight: 600,
-                children: t.owner
-              }
-            )
-          ]
-        },
-        `bar-${t.id}`
-      );
+      const \u3053\u306E\u884C = \u884C\u306E\u4F38\u3073(row);
+      const \u4ECA\u306E\u5E45 = drawing ? bw * \u3053\u306E\u884C : bw;
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            "data-cdl-role": "gantt-bar",
+            "data-cdl-unresolved": t.unresolved ? "true" : void 0,
+            "data-cdl-clipped": "clipped" in t && t.clipped ? "true" : void 0,
+            x: bx,
+            y: by,
+            width: \u4ECA\u306E\u5E45,
+            height: \u5E2F\u306E\u9AD8\u3055,
+            rx: \u5E2F\u306E\u9AD8\u3055 / 2,
+            ry: \u5E2F\u306E\u9AD8\u3055 / 2,
+            fill: toneColor4(t.tone),
+            fillOpacity: 0.9
+          }
+        ),
+        t.owner && \u5E2F\u306E\u9AD8\u3055 >= 22 && \u3053\u306E\u884C >= 1 && /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            "data-cdl-role": "gantt-owner",
+            x: bx + bw / 2,
+            y: by + \u5E2F\u306E\u9AD8\u3055 / 2 + 4,
+            fontSize: 11,
+            textAnchor: "middle",
+            fill: "var(--cdl-node-fill, #ffffff)",
+            fontWeight: 600,
+            children: t.owner
+          }
+        )
+      ] }, `bar-${t.id}`);
     }),
     \u6574\u3048\u305F.filter((t) => t.dependsOn && taskById.has(t.dependsOn)).map((t) => {
       const parent = taskById.get(t.dependsOn);
       const parentRow = rowOf.get(parent.id);
       const childRow = rowOf.get(t.id);
       const parentBarRight = \u5E2F\u306E\u53F3(parent.endIdx);
-      const parentMidY = yAt(parentRow) + rowH / 2;
       const childBarLeft = \u5E2F\u306E\u5DE6(t.startIdx);
-      const childMidY = yAt(childRow) + rowH / 2;
-      const arrowHeadSize = 8;
-      const arrowHeadTipGap = 10;
-      const tipX = childBarLeft - arrowHeadTipGap - arrowHeadSize;
-      const tipY = childMidY;
-      const startX = parentBarRight + 4;
-      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`;
-      return (
-        // 矢印は両端の帯が出てから描く。 帯が無い場所へ矢印だけが伸びると、
-        // 指す先の無い線になる (cdl#521)
-        drawing && \u4F38\u3073 < 1 ? null : /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-cdl-role": "gantt-arrow", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "path",
-            {
-              d: path,
-              fill: "none",
-              stroke: "var(--cdl-text-mute, #8a8678)",
-              strokeWidth: 1.75,
-              strokeLinejoin: "round",
-              strokeLinecap: "round"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "path",
-            {
-              d: arrowHeadPath,
-              fill: "var(--cdl-text-mute, #8a8678)",
-              stroke: "var(--cdl-text-mute, #8a8678)",
-              strokeWidth: 0.5,
-              strokeLinejoin: "round"
-            }
-          )
-        ] }, `dep-${parent.id}-${t.id}`)
-      );
+      const \u77E2\u3058\u308A\u306E\u5E45 = 11;
+      const \u77E2\u3058\u308A\u306E\u9AD8\u3055 = 7;
+      const \u4E38\u307F = \u5E2F\u306E\u9AD8\u3055 / 2;
+      const \u89AA\u306E\u5DE6 = \u5E2F\u306E\u5DE6(parent.startIdx);
+      const \u5B50\u306E\u53F3 = \u5E2F\u306E\u53F3(t.endIdx);
+      const \u5BC4\u305B = (\u5DE6, \u53F3) => Math.min(\u4E38\u307F, (\u53F3 - \u5DE6) / 2);
+      const \u51FA\u767AX = parentBarRight - \u5BC4\u305B(\u89AA\u306E\u5DE6, parentBarRight);
+      const \u51FA\u767AY = \u5E2F\u306E\u4E0A(parentRow) + \u5E2F\u306E\u9AD8\u3055;
+      const \u7740\u5730X = childBarLeft + \u5BC4\u305B(childBarLeft, \u5B50\u306E\u53F3);
+      const \u7740\u5730Y = \u5E2F\u306E\u4E0A(childRow);
+      const \u7E26\u306E\u7D42\u308F\u308AY = \u7740\u5730Y - \u77E2\u3058\u308A\u306E\u9AD8\u3055;
+      const \u624B = Math.max(6, (\u7E26\u306E\u7D42\u308F\u308AY - \u51FA\u767AY) * 0.55);
+      const path = `M ${\u51FA\u767AX} ${\u51FA\u767AY} C ${\u51FA\u767AX} ${\u51FA\u767AY + \u624B}, ${\u7740\u5730X} ${\u7E26\u306E\u7D42\u308F\u308AY - \u624B}, ${\u7740\u5730X} ${\u7E26\u306E\u7D42\u308F\u308AY}`;
+      const arrowHeadPath = `M ${\u7740\u5730X} ${\u7740\u5730Y} L ${\u7740\u5730X - \u77E2\u3058\u308A\u306E\u5E45 / 2} ${\u7E26\u306E\u7D42\u308F\u308AY} L ${\u7740\u5730X + \u77E2\u3058\u308A\u306E\u5E45 / 2} ${\u7E26\u306E\u7D42\u308F\u308AY} Z`;
+      return drawing && !(\u884C\u306E\u4F38\u3073(parentRow) >= 1 && \u884C\u306E\u4F38\u3073(childRow) >= 1) ? null : /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-cdl-role": "gantt-arrow", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: path,
+            fill: "none",
+            stroke: "var(--cdl-text-mute, #8a8678)",
+            strokeWidth: 2.4,
+            strokeLinejoin: "round",
+            strokeLinecap: "round"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: arrowHeadPath,
+            fill: "var(--cdl-text-mute, #8a8678)",
+            stroke: "var(--cdl-text-mute, #8a8678)",
+            strokeWidth: 0.5,
+            strokeLinejoin: "round"
+          }
+        )
+      ] }, `dep-${parent.id}-${t.id}`);
     })
   ] });
 }