@cardenelabs/cdl 0.66.0 → 0.68.0

package/dist/react.js

@@ -14434,15 +14434,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));
@@ -14468,6 +14469,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);
@@ -14489,6 +14491,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__ */ jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
@@ -14506,6 +14509,43 @@ function GanttNode({
         strokeWidth: active ? 3 : 1.25
       }
     ),
+    \u6574\u3048\u305F.map(
+      (t, row) => row % 2 === 0 ? null : /* @__PURE__ */ 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__ */ jsx(
+      "line",
+      {
+        x1: PAD_LEFT2,
+        y1: PAD_TOP2,
+        x2: PAD_LEFT2 + canvasW,
+        y2: PAD_TOP2,
+        stroke: "var(--cdl-divider, #d4d4d8)",
+        strokeWidth: 1
+      }
+    ),
+    /* @__PURE__ */ 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__ */ jsxs("g", { children: [
       /* @__PURE__ */ jsx(
         "line",
@@ -14516,9 +14556,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__ */ jsx(
@@ -14526,7 +14565,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)",
@@ -14542,14 +14581,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__ */ jsx(
       "text",
       {
-        x: PAD_LEFT2 - 12,
+        x: PAD_LEFT2 - 16,
         y: yAt(row) + rowH / 2 + 4,
         fontSize: 12,
         textAnchor: "end",
@@ -14561,89 +14600,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__ */ jsxs(
-        "g",
-        {
-          ...drawing ? { transform: `translate(${bx} 0) scale(${\u4F38\u3073} 1) translate(${-bx} 0)` } : {},
-          children: [
-            /* @__PURE__ */ 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__ */ 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__ */ jsxs("g", { children: [
+        /* @__PURE__ */ 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__ */ 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__ */ jsxs("g", { "data-cdl-role": "gantt-arrow", children: [
-          /* @__PURE__ */ jsx(
-            "path",
-            {
-              d: path,
-              fill: "none",
-              stroke: "var(--cdl-text-mute, #8a8678)",
-              strokeWidth: 1.75,
-              strokeLinejoin: "round",
-              strokeLinecap: "round"
-            }
-          ),
-          /* @__PURE__ */ 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__ */ jsxs("g", { "data-cdl-role": "gantt-arrow", children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: path,
+            fill: "none",
+            stroke: "var(--cdl-text-mute, #8a8678)",
+            strokeWidth: 2.4,
+            strokeLinejoin: "round",
+            strokeLinecap: "round"
+          }
+        ),
+        /* @__PURE__ */ 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}`);
     })
   ] });
 }