@cardenelabs/cdl 0.67.0 → 0.68.0

package/CHANGELOG.md

@@ -5,6 +5,55 @@ 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
@@ -2851,7 +2900,8 @@ Initial OSS release.
 使わない = annotated tag を push しても GitHub Release は作られず、 Release を作っていない版で
 行き止まりになる。
 
-[Unreleased]: https://github.com/cardene777/cdl/compare/v0.67.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

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);
@@ -27047,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",
@@ -27057,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(
@@ -27067,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)",
@@ -27083,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",
@@ -27102,37 +27140,33 @@ 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);
       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(
-          "g",
+          "rect",
           {
-            ...drawing ? { transform: `translate(${bx} 0) scale(${\u3053\u306E\u884C} 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
-              }
-            )
+            "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 && rowH >= 22 && \u3053\u306E\u884C >= 1 && /* @__PURE__ */ jsxRuntime.jsx(
+        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 + rowH / 2 + 4,
+            y: by + \u5E2F\u306E\u9AD8\u3055 / 2 + 4,
             fontSize: 11,
             textAnchor: "middle",
             fill: "var(--cdl-node-fill, #ffffff)",
@@ -27147,28 +27181,29 @@ function GanttNode({
       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`;
-      const \u4E21\u7AEF\u304C\u51FA\u305F = \u884C\u306E\u4F38\u3073(parentRow) >= 1 && \u884C\u306E\u4F38\u3073(childRow) >= 1;
-      return drawing && !\u4E21\u7AEF\u304C\u51FA\u305F ? null : /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-cdl-role": "gantt-arrow", children: [
+      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: 1.75,
+            strokeWidth: 2.4,
             strokeLinejoin: "round",
             strokeLinecap: "round"
           }