@cardenelabs/cdl 0.65.0 → 0.67.0

package/CHANGELOG.md

@@ -5,6 +5,87 @@ CDL (Chainome Diagram Language) の主要変更履歴。
 
 ## [Unreleased]
 
+## [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
+
+- **段の違う箱を繋ぐ矢印が、間の箱を貫くのを直した** (#867)
+
+  段の違う箱を横に繋ぐ経路は「横に走る → 縦に折れる → 横に走る」 の L 字を描く。 折れる位置は箱を避けて左右に
+  退くが、**退いた後に横の走りが箱を横切るかを一度も見ていなかった**。 退けた分だけ横の走りが伸びるため、
+  避けたはずの同じ箱を横切る。
+
+  段 0 に 検査 (x 40-360) と 記録 (x 1864-2184)、段 1 に背の高い 成形機 (x 648-968) と 塗装機 (x 1256-1576) を
+  並べ、成形機から記録へ引いた形。
+
+  ```
+  変更前 ... M 968 486 L 1630 486 Q 1644 486, 1644 472 L 1644 150 Q 1644 136, 1658 136 L 1864 136
+  変更後 ... M 968 486 L 1174 486 Q 1188 486, 1188 472 L 1188 150 Q 1188 136, 1202 136 L 1864 136
+  ```
+
+  変更前は `y = 486` の横の走りが `x = 968` から `1644` まで伸び、その間の 塗装機 (x 1256-1576、y 296-676) を
+  横切っていた。 絵の検査の `edge-node-cross` が 1 件出る形。
+
+  退く向きは「折れる位置を動かす量が少ない側」 だけで決めていた。 この形は右へ 228 と左へ 228 で並び、
+  同点を右に倒す規則が塞がる側を選んでいた。
+
+  直した点は 2 つ。
+
+  | 直した点 | 変更前 | 変更後 |
+  |---|---|---|
+  | 退く向き | 動かす量が少ない側 | 横の走りが横切らない側を先に見る。 左右で同じ時だけ動かす量が少ない側 |
+  | 退く判定の起点 | 縦の走りと説明文の帯だけ | 横の走りが箱を通る形も数える |
+
+  起点を広げないと、最初の折れる位置で既に横の走りが箱を横切っている形は 1 度も退かない。 繋ぎ元と同じ段に
+  箱を置き、折れる位置より手前に来るように並べると出る (実測 = 受付 → 出荷 の矢印が、間の 控え を横切る)。
+
+  横切るかの判定は箱の矩形そのもので行い、余白を足さない。 絵の検査が箱の矩形で貫通を数えるため、余白を足すと
+  「検査は通るのに経路だけ動く」 図が出る。 端がちょうど箱の縁に載る形も通さない = 箱の縁から出る線は必ず縁に
+  載るので、閉じた側にすると自分の出入口を障害物と読む。
+
+  dragon の見本帳 505 枚の辺 472 本を並べ直して突き合わせた結果、**変わった道筋は 0 本**。 横切る箱が無い
+  図では折れる位置が 2 つの箱のちょうど中間に残る。
+
+  dragon の見本帳で合流する矢印が間の部品を貫いた原因 (dragon#2011)。
+
 ## [0.65.0] - 2026-09-15
 
 ### Fixed
@@ -2770,7 +2851,9 @@ Initial OSS release.
 使わない = annotated tag を push しても GitHub Release は作られず、 Release を作っていない版で
 行き止まりになる。
 
-[Unreleased]: https://github.com/cardene777/cdl/compare/v0.65.0...HEAD
+[Unreleased]: https://github.com/cardene777/cdl/compare/v0.67.0...HEAD
+[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
 [0.64.0]: https://github.com/cardene777/cdl/compare/v0.63.0...v0.64.0

package/dist/index.cjs

@@ -18760,6 +18760,10 @@ function verticalCornerDir(from, to) {
 function cornerRadiusFor(\u534A\u5F84, ...\u8D70\u308A) {
   return Math.min(\u534A\u5F84, ...\u8D70\u308A.map((v) => Math.abs(v)));
 }
+function runCrossesBox(\u8D70\u308A, \u7BB1) {
+  if (\u8D70\u308A.y <= \u7BB1.cy - \u7BB1.h / 2 || \u8D70\u308A.y >= \u7BB1.cy + \u7BB1.h / 2) return false;
+  return \u7BB1.cx + \u7BB1.w / 2 > Math.min(\u8D70\u308A.x1, \u8D70\u308A.x2) && \u7BB1.cx - \u7BB1.w / 2 < Math.max(\u8D70\u308A.x1, \u8D70\u308A.x2);
+}
 var VERTICAL_DETOUR_EXIT = 45;
 function nearestBoxDistance(anchorX, dir, verticalTop, verticalBottom, boxes) {
   let nearest = Infinity;
@@ -19752,18 +19756,28 @@ function routePath(from, to, fromSide, toSide, obstacles = [], detourSide, _from
         const labelIntersect = oTop < labelBottom && oBottom > labelTop;
         return segIntersect || labelIntersect;
       };
+      const \u6A2A\u306E\u8D70\u308A\u304C\u585E\u304C\u308B = (mx) => labelObstacles.some((o) => {
+        if (o.id === from.id || o.id === to.id) return false;
+        return runCrossesBox({ y: A.y, x1: A.x, x2: mx }, o) || runCrossesBox({ y: B.y, x1: mx, x2: B.x }, o);
+      });
       let iter = 0;
       while (iter < 12) {
         const band = labelBand(midX2);
-        const hit = labelObstacles.find((o) => intersects(o, band));
+        const hit = labelObstacles.find((o) => intersects(o, band)) ?? labelObstacles.find(
+          (o) => o.id !== from.id && o.id !== to.id && (runCrossesBox({ y: A.y, x1: A.x, x2: midX2 }, o) || runCrossesBox({ y: B.y, x1: midX2, x2: B.x }, o))
+        );
         if (!hit) break;
         const hitLeft = hit.cx - hit.w / 2;
         const hitRight = hit.cx + hit.w / 2;
         const retreatRight = hitRight + labelHalfW + CLEARANCE_NODE_LABEL + 4;
         const retreatLeft = hitLeft - labelHalfW - CLEARANCE_NODE_LABEL - 4;
+        const \u53F3\u304C\u585E\u304C\u308B = \u6A2A\u306E\u8D70\u308A\u304C\u585E\u304C\u308B(retreatRight);
+        const \u5DE6\u304C\u585E\u304C\u308B = \u6A2A\u306E\u8D70\u308A\u304C\u585E\u304C\u308B(retreatLeft);
         const dRight = Math.abs(retreatRight - midX2);
         const dLeft = Math.abs(retreatLeft - midX2);
-        midX2 = dRight <= dLeft ? retreatRight : retreatLeft;
+        const \u6B21 = \u53F3\u304C\u585E\u304C\u308B === \u5DE6\u304C\u585E\u304C\u308B ? dRight <= dLeft ? retreatRight : retreatLeft : \u53F3\u304C\u585E\u304C\u308B ? retreatLeft : retreatRight;
+        if (\u6B21 === midX2) break;
+        midX2 = \u6B21;
         iter++;
       }
     }
@@ -27015,6 +27029,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: [
@@ -27089,12 +27104,13 @@ function GanttNode({
       const bx = \u5E2F\u306E\u5DE6(t.startIdx);
       const by = yAt(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(
+      const \u3053\u306E\u884C = \u884C\u306E\u4F38\u3073(row);
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "g",
+          {
+            ...drawing ? { transform: `translate(${bx} 0) scale(${\u3053\u306E\u884C} 1) translate(${-bx} 0)` } : {},
+            children: /* @__PURE__ */ jsxRuntime.jsx(
               "rect",
               {
                 "data-cdl-role": "gantt-bar",
@@ -27108,22 +27124,23 @@ function GanttNode({
                 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}`
-      );
+          }
+        ),
+        t.owner && rowH >= 22 && \u3053\u306E\u884C >= 1 && /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            "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,
+            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);
@@ -27143,33 +27160,30 @@ function GanttNode({
       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 \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: [
+        /* @__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}`);
     })
   ] });
 }