@cardenelabs/cdl 0.65.0 → 0.67.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.65.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}

package/src/layout/edges.ts

@@ -67,6 +67,25 @@ export function verticalCornerDir(from: number, to: number): 1 | -1 {
 export function cornerRadiusFor(半径: number, ...走り: readonly number[]): number {
   return Math.min(半径, ...走り.map((v) => Math.abs(v)));
 }
+
+/**
+ * 横に走る線が箱の中を通るか (`#867`)。
+ *
+ * 判定は箱そのもので行い、余白を足さない = 絵の検査 (`edge-node-cross`) が箱の矩形で
+ * 貫通を数えるため、余白を足すと「検査は通るのに経路だけ動く」 図が出る。
+ *
+ * 端がちょうど箱の縁に載る形は通さない (不等号は全て開いた側)。 箱の縁から出る線は必ず
+ * 縁に載るので、閉じた側にすると自分の出入口を障害物と読む。
+ */
+export function runCrossesBox(
+  走り: { readonly y: number; readonly x1: number; readonly x2: number },
+  箱: { readonly cx: number; readonly cy: number; readonly w: number; readonly h: number },
+): boolean {
+  if (走り.y <= 箱.cy - 箱.h / 2 || 走り.y >= 箱.cy + 箱.h / 2) return false;
+  return (
+    箱.cx + 箱.w / 2 > Math.min(走り.x1, 走り.x2) && 箱.cx - 箱.w / 2 < Math.max(走り.x1, 走り.x2)
+  );
+}
 /** 縦 detour が source から曲がるまで直進する距離 (world unit)。 EDGE_STUB_OUT を上回る。 */
 const VERTICAL_DETOUR_EXIT = 45;
 
@@ -1931,11 +1950,35 @@ function routePath(
         const labelIntersect = oTop < labelBottom && oBottom > labelTop;
         return segIntersect || labelIntersect;
       };
+      // 折れる位置を決めると、横の走りは A.x → midX と midX → B.x の 2 本になる。 この 2 本が
+      // 箱の中を通るかを見る (`#867`)。
+      //
+      // **退いた側で横の走りが伸びる**。 縦の走りだけを見て箱の向こう側へ退くと、避けたはずの
+      // 同じ箱を横の走りが横切る = 実測で「右へ 228 退く」 と「左へ 228 退く」 が並び、同点を
+      // 右に倒す規則が塞がる側を選んでいた (dragon#2011)。
+      const 横の走りが塞がる = (mx: number): boolean =>
+        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)
+          );
+        });
       // xDir 方向に obstacle を避けて midX を retreat する。
       let iter = 0;
       while (iter < 12) {
         const band = labelBand(midX);
-        const hit = labelObstacles.find((o) => intersects(o, band));
+        // 縦の走りと札の帯に当たる箱を先に探し、当たらなければ横の走りが通る箱を探す。
+        // 後者を見ないと、初期の midX で既に横の走りが箱を横切っている形は 1 度も退かない。
+        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: midX }, o) ||
+                runCrossesBox({ y: B.y, x1: midX, x2: B.x }, o)),
+          );
         if (!hit) break;
         // hit を xDir 方向に回避、 obstacle right/left から labelHalfW + clearance を確保
         // xDir=1 (右向き) なら hit.right + labelHalfW + clearance より右へ、
@@ -1945,10 +1988,24 @@ function routePath(
         const hitRight = hit.cx + hit.w / 2;
         const retreatRight = hitRight + labelHalfW + CLEARANCE_NODE_LABEL + 4;
         const retreatLeft = hitLeft - labelHalfW - CLEARANCE_NODE_LABEL - 4;
-        // 現 midX と近い方の retreat 側を選ぶ。 midX を大きく動かさない方向優先。
+        // 退く向きは「横の走りが箱を横切らない側」 を先に見る (`#867`)。 片方だけが塞がるなら
+        // 塞がらない側へ退く。 どちらも同じ (両方塞がる / 両方通る) 時だけ、今までどおり
+        // midX を大きく動かさない側を選ぶ。
+        const 右が塞がる = 横の走りが塞がる(retreatRight);
+        const 左が塞がる = 横の走りが塞がる(retreatLeft);
         const dRight = Math.abs(retreatRight - midX);
         const dLeft = Math.abs(retreatLeft - midX);
-        midX = dRight <= dLeft ? retreatRight : retreatLeft;
+        const 次 =
+          右が塞がる === 左が塞がる
+            ? dRight <= dLeft
+              ? retreatRight
+              : retreatLeft
+            : 右が塞がる
+              ? retreatLeft
+              : retreatRight;
+        // 同じ位置へ退こうとしたら止める。 進まない繰り返しは上限まで回すだけで形が変わらない。
+        if (次 === midX) break;
+        midX = 次;
         iter++;
       }
     }