@cardenelabs/cdl 0.67.0 → 0.68.0

package/package.json

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

@@ -29,9 +29,9 @@ export function GanttNode({
   const y0 = node.cy - node.h / 2;
   const tasks = resolveGanttData(node.ganttData ?? [], stateValues);
 
-  const PAD_TOP = 32;
+  const PAD_TOP = 46;
   const PAD_RIGHT = 48;
-  const PAD_BOTTOM = 44;
+  const PAD_BOTTOM = 26;
   const PAD_LEFT = 156;
   const canvasW = node.w - PAD_LEFT - PAD_RIGHT;
   const canvasH = node.h - PAD_TOP - PAD_BOTTOM;
@@ -39,6 +39,8 @@ export function GanttNode({
   const rowGap = 20;
   const rowCount = tasks.length || 1;
   const rowH = Math.max(28, (canvasH - rowGap * (rowCount + 1)) / rowCount);
+  /** 帯そのものの高さ。 行いっぱいに塗ると塊に見えるので細くして行の中で中央に置く */
+  const 帯の高さ = Math.min(rowH, 30);
 
   // 位置を先に整える (#468 Round 5)。 端も始まりも状態から来るため、 そのまま使うと
   // 図が壊れる形が 3 つある (いずれも実測)。
@@ -107,6 +109,8 @@ export function GanttNode({
 
   const xAt = (idx: number) => PAD_LEFT + idx * cellW;
   const yAt = (row: number) => PAD_TOP + rowGap + row * (rowH + rowGap);
+  /** 帯の上端。 行の真ん中に置く */
+  const 帯の上 = (row: number): number => yAt(row) + (rowH - 帯の高さ) / 2;
 
   // 目盛りの名前は task が持つ (開始と終了の両方)。 どちらも指していない位置は
   // **空にする** = index の数字をそのまま出すと、 月や四半期の並びに数字が 1 つ混ざって
@@ -213,6 +217,41 @@ export function GanttNode({
         strokeWidth={active ? 3 : 1.25}
       />
 
+      {/* 行の地。 1 行おきに薄く敷いて、名前と帯を横に繋いで読めるようにする */}
+      {整えた.map((t, row) =>
+        row % 2 === 0 ? null : (
+          <rect
+            key={`band-${t.id}`}
+            data-cdl-role="gantt-row"
+            x={PAD_LEFT}
+            y={yAt(row) - rowGap / 2}
+            width={canvasW}
+            height={rowH + rowGap}
+            fill="var(--cdl-surface-sunken, #f4f2ed)"
+            opacity={0.55}
+          />
+        ),
+      )}
+
+      {/* 期間の見出しの下の罫 */}
+      <line
+        x1={PAD_LEFT}
+        y1={PAD_TOP}
+        x2={PAD_LEFT + canvasW}
+        y2={PAD_TOP}
+        stroke="var(--cdl-divider, #d4d4d8)"
+        strokeWidth={1}
+      />
+      {/* 名前の列と図の境。 名前がどの行のものかを目で追える */}
+      <line
+        x1={PAD_LEFT}
+        y1={PAD_TOP}
+        x2={PAD_LEFT}
+        y2={PAD_TOP + canvasH}
+        stroke="var(--cdl-divider, #d4d4d8)"
+        strokeWidth={1}
+      />
+
       {gridLabels.map(({ 位置: i, label }) => (
         <g key={`grid-${i}`}>
           <line
@@ -222,15 +261,14 @@ export function GanttNode({
             x2={xAt(i)}
             y2={PAD_TOP + canvasH}
             stroke="var(--cdl-divider, #d4d4d8)"
-            strokeWidth={0.75}
-            strokeDasharray="3 3"
-            opacity={0.5}
+            strokeWidth={1}
+            opacity={0.45}
           />
           {label === "" ? null : (
             <text
               data-cdl-role="gantt-tick"
               x={xAt(i) + cellW / 2}
-              y={PAD_TOP + canvasH + 18}
+              y={PAD_TOP - 16}
               fontSize={11}
               textAnchor="middle"
               fill="var(--cdl-text-dim, #5a6270)"
@@ -247,14 +285,14 @@ export function GanttNode({
         x2={xAt(maxIdx)}
         y2={PAD_TOP + canvasH}
         stroke="var(--cdl-divider, #d4d4d8)"
-        strokeWidth={0.75}
-        opacity={0.5}
+        strokeWidth={1}
+        opacity={0.45}
       />
 
       {整えた.map((t, row) => (
         <text
           key={`label-${t.id}`}
-          x={PAD_LEFT - 12}
+          x={PAD_LEFT - 16}
           y={yAt(row) + rowH / 2 + 4}
           fontSize={12}
           textAnchor="end"
@@ -267,47 +305,49 @@ export function GanttNode({
 
       {整えた.map((t, row) => {
         const bx = 帯の左(t.startIdx);
-        const by = yAt(row);
+        const by = 帯の上(row);
         // 0 で切るのは二重。 余白が目盛りの幅の半分で頭打ちのため、 引いた結果は必ず
         // 目盛りの幅の半分以上になる = **この分岐に届く入力を今は作れない** (変異試験で確認)。
         // 余白の決め方を変えた時に負の幅を出さないために残す
         const bw = Math.max(0, 帯の右(t.endIdx) - bx);
         const この行 = 行の伸び(row);
+        /*
+         * 伸びは **幅そのもの** を変える (cdl#875)。
+         *
+         * 横倍率 (`scale(N 1)`) で伸ばすと丸い両端まで一緒に潰れ、伸びている間だけ
+         * 帯が角の詰まった四角に見えていた (実測 = 進み 0.31 で丸みの横幅が 15 から
+         * 4.65)。 幅を変えれば丸みは円のまま残り、短い帯は縦長の楕円へ素直に縮む。
+         *
+         * 倍率を帯の四角だけに掛ける形 (cdl#873) は、担当者の字が一緒に潰れるのを
+         * 止めるためだった。 幅で伸ばすなら字はそもそも影響を受けないので、包みごと
+         * 外す。
+         */
+        const 今の幅 = drawing ? bw * この行 : bw;
         return (
           <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>
+            <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={今の幅}
+              height={帯の高さ}
+              rx={帯の高さ / 2}
+              ry={帯の高さ / 2}
+              fill={toneColor(t.tone)}
+              fillOpacity={0.9}
+            />
             {/*
               担当者の字は帯の真ん中に置き、**その帯が伸び切ってから出す**。
               薄く出しながら伸ばす案は採らない = 中央は伸び切った後の位置なので、
               伸びている間は帯の無い所に字が浮く。
             */}
-            {t.owner && rowH >= 22 && この行 >= 1 && (
+            {t.owner && 帯の高さ >= 22 && この行 >= 1 && (
               <text
                 data-cdl-role="gantt-owner"
                 x={bx + bw / 2}
-                y={by + rowH / 2 + 4}
+                y={by + 帯の高さ / 2 + 4}
                 fontSize={11}
                 textAnchor="middle"
                 fill="var(--cdl-node-fill, #ffffff)"
@@ -327,45 +367,57 @@ export function GanttNode({
           const parentRow = rowOf.get(parent.id)!;
           const childRow = rowOf.get(t.id)!;
           const parentBarRight = 帯の右(parent.endIdx);
-          const parentMidY = yAt(parentRow) + rowH / 2;
           const childBarLeft = 帯の左(t.startIdx);
-          const childMidY = yAt(childRow) + rowH / 2;
-          const arrowHeadSize = 8;
-          // arrow head 三角形の頂点 (= tipX + arrowHeadSize) が bar 左辺の 10px 手前に来る
-          // ように配置、 「食い込み」 に見える視覚エラー完全排除
-          const arrowHeadTipGap = 10;
-          const tipX = childBarLeft - arrowHeadTipGap - arrowHeadSize;
-          const tipY = childMidY;
-          const startX = parentBarRight + 4;
-          // 親 bar の右端と 矢印の手前の間に縦線を通す余裕があるかで経路を分ける。
-          //
-          // 旧実装は `elbowX = Math.max(startX + 6, tipX - 6)` で、 子 bar が親の直後に始まると
-          // `elbowX > tipX` になり、 縦線が矢印より右に引かれてから左へ戻っていた。
-          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`;
-          // 矢印は両端の帯が出てから描く。 帯が無い場所へ矢印だけが伸びると、
-          // 指す先の無い線になる (cdl#521)。
-          //
-          // **見るのは両端の行の伸びで、図全体の進みではない** (cdl#873)。 行ごとに順へ
-          // 変えた後も全体の進みで見ると、帯が 4 本とも並んでから矢印がまとめて出る。
-          const 両端が出た = 行の伸び(parentRow) >= 1 && 行の伸び(childRow) >= 1;
+          /*
+           * 矢じりは **幅を高さより広く** 取る (cdl#875)。 帯が高さ 30 の丸帯なので、
+           * 細く尖った矢じりだと線だけが浮いて見える。 平たい三角にすると帯と同じ重さで
+           * 収まり、向きも読める。
+           */
+          const 矢じりの幅 = 11;
+          const 矢じりの高さ = 7;
+          /*
+           * 依存の線は **前の帯の下端から出て、次の帯の上端へ入る** 曲線 1 本 (cdl#875)。
+           *
+           * 横から入れようとすると、前の工程が終わってすぐ次が始まる形で隙間が 6 しかなく、
+           * 矢じりと曲がりに要る 18 が入らない。 折れ線だった頃はそこで右へ出てから左へ
+           * 戻る Z 字を描き、矢じりは帯に届かず宙に浮いていた。
+           *
+           * 上下に繋ぐと、行と行の間が必ず `rowGap` ぶん空いているので、どんな並びでも
+           * 同じ形で引ける。 出る所も入る所も帯の縁なので、線が帯から生えて帯に刺さる。
+           */
+          const 丸み = 帯の高さ / 2;
+          const 親の左 = 帯の左(parent.startIdx);
+          const 子の右 = 帯の右(t.endIdx);
+          /*
+           * 出入りの点は丸みの真ん中に取る (丸みの上から出すと縁を滑って見える)。
+           * ただし **目盛りが細かい図では帯が丸み 2 つぶんより狭くなる**。 その時は
+           * 丸みぶん寄せると帯の外へ出てしまうので、寄せ幅を帯の半分で頭打ちにする
+           * = 狭い帯では帯の真ん中から出る (位置 85 の実測 = 幅 3 の帯で 172.5 と
+           * 右端 160.5 がずれ、線が帯の外から生えていた)。
+           */
+          const 寄せ = (左: number, 右: number): number => Math.min(丸み, (右 - 左) / 2);
+          const 出発X = parentBarRight - 寄せ(親の左, parentBarRight);
+          const 出発Y = 帯の上(parentRow) + 帯の高さ;
+          const 着地X = childBarLeft + 寄せ(childBarLeft, 子の右);
+          const 着地Y = 帯の上(childRow);
+          const 縦の終わりY = 着地Y - 矢じりの高さ;
+          // 手の長さは行と行の間の高さで決める。 超えると帯を通り越してから戻る
+          const 手 = Math.max(6, (縦の終わりY - 出発Y) * 0.55);
+          const path =
+            `M ${出発X} ${出発Y}` +
+            ` C ${出発X} ${出発Y + 手}, ${着地X} ${縦の終わりY - 手}, ${着地X} ${縦の終わりY}`;
+          const arrowHeadPath =
+            `M ${着地X} ${着地Y}` +
+            ` L ${着地X - 矢じりの幅 / 2} ${縦の終わりY}` +
+            ` L ${着地X + 矢じりの幅 / 2} ${縦の終わりY} Z`;
           return (
-            (drawing && !両端が出た) ? null : (
+            (drawing && !(行の伸び(parentRow) >= 1 && 行の伸び(childRow) >= 1)) ? null : (
             <g key={`dep-${parent.id}-${t.id}`} data-cdl-role="gantt-arrow">
               <path
                 d={path}
                 fill="none"
                 stroke="var(--cdl-text-mute, #8a8678)"
-                strokeWidth={1.75}
+                strokeWidth={2.4}
                 strokeLinejoin="round"
                 strokeLinecap="round"
               />