@cardenelabs/cdl 0.10.0 → 0.11.0

package/CHANGELOG.md

@@ -7,6 +7,24 @@ CDL (Chainome Diagram Language) の主要変更履歴。
 
 予定 ... feedback を反映した patch / minor。
 
+## [0.11.0] - 2026-08-21
+
+### Added
+
+- **棒と扇も段の進みでそれぞれの起点から描けるようにした** (#517)
+
+  段の `draw` は `0.10.0` で入ったが `chart-line` だけが対応していた。 対象を 3 種に広げ、
+  棒は横軸から上へ伸び、扇は 12 時から時計回りに開くようにした。 数字は棒の頭に付いて動き、
+  凡例はその扇が開き始めた時に出る。
+
+  **形を表す属性は触らない**。 折れ線が `points` を触らず dash で伸ばしたのと同じ制約で、
+  棒は足元を動かさない点にした倍率で包み、円は扇形の切り抜きで見える範囲だけを変える。
+  `rect` の `height` / `y` と `path` の `d` は進みに関わらず実値のまま = 図形の寸法から値を
+  測る利用側が、進みの途中で別の値を読まない。
+
+  対応種別の一覧を `validate.ts` の `DRAW_KINDS` が持ち、書けない種別を指した時の知らせも
+  そこから組み立てる。
+
 ## [0.10.0] - 2026-08-21
 
 ### Added
@@ -436,7 +454,8 @@ Initial OSS release.
 使わない = annotated tag を push しても GitHub Release は作られず、 Release を作っていない版で
 行き止まりになる。
 
-[Unreleased]: https://github.com/cardene777/cdl/compare/v0.10.0...HEAD
+[Unreleased]: https://github.com/cardene777/cdl/compare/v0.11.0...HEAD
+[0.11.0]: https://github.com/cardene777/cdl/compare/v0.10.0...v0.11.0
 [0.10.0]: https://github.com/cardene777/cdl/compare/v0.9.0...v0.10.0
 [0.9.0]: https://github.com/cardene777/cdl/compare/v0.8.0...v0.9.0
 [0.8.0]: https://github.com/cardene777/cdl/compare/v0.7.0...v0.8.0

package/SPEC.md

@@ -133,9 +133,21 @@ diagram.phase(id, {
 ため、 連続する phase で光り続ける図が実在し、 光っているかを引き金にすると値が動くだけの
 phase でも線を引き直すことになる。
 
-対象の node は phase の進み (0→1) に合わせて描かれる。 現在の対象種別は `chart-line` で、
-折れ線が左端から右へ伸び、 点と値の数字は線の先が届いた時に現れる (軸 / 格子 / 横軸の名前は
-最初から出る)。 `draw` を書かない図は従来どおり全長で描き、 DOM に dash 属性も付かない。
+対象の node は phase の進み (0→1) に合わせて描かれる。 起点は種別ごとに違う。
+
+| kind | 起点 | 動き | 添える値 |
+|---|---|---|---|
+| `chart-line` | 左端 | 線が右へ伸びる | 点と数字は線の先が届いた時 |
+| `chart-bar` | 横軸 | 棒が上へ伸びる | 数字は棒の頭に付いて動く |
+| `chart-pie` | 12 時 | 扇が時計回りに開く | 凡例はその扇が開き始めた時 |
+
+対応種別の一覧は `validate.ts` の `DRAW_KINDS` が持ち、 知らせの文面もそこから組み立てる。
+
+**形を表す属性は触らない**。 折れ線は `points` を、 棒は `rect` の `height` / `y` を、
+円は `path` の `d` を進みに関わらず実値のまま保ち、 見える範囲だけを変える (dash / 倍率 /
+切り抜き)。 図形の寸法から値を測る利用側が、 進みの途中で別の値を読まないようにするため。
+
+`draw` を書かない図は従来どおり全体を描き、 DOM に属性も要素も足さない。
 
 phase が定義されると自動的に。
 - 全 phase が timeline 化 (autoplay + loop)

package/dist/index.cjs

@@ -15864,6 +15864,7 @@ function nodeTemplateTexts(node) {
 
 // src/validate.ts
 var TONES2 = new Set(TONES);
+var DRAW_KINDS = /* @__PURE__ */ new Set(["chart-line", "chart-bar", "chart-pie"]);
 var KINDS = new Set(NODE_KINDS);
 var ENG_BANNED = /\b(FUNCTION|STORAGE|EVENT LOG|BALANCES MAPPING|READ|WRITE|EMIT|CALL)\b/;
 function validate(diag) {
@@ -15981,8 +15982,10 @@ function validate(diag) {
         continue;
       }
       const kind = diag.nodes.find((n) => n.id === id)?.kind;
-      if (kind !== "chart-line") {
-        warnings.push(`phase "${p.id}" \u306E draw "${id}" \u306F kind "${kind}" \u3067\u3001 \u5DE6\u304B\u3089\u63CF\u304F\u52D5\u304D\u3092\u6301\u305F\u306A\u3044 (\u5BFE\u8C61\u306F chart-line)`);
+      if (!DRAW_KINDS.has(String(kind))) {
+        warnings.push(
+          `phase "${p.id}" \u306E draw "${id}" \u306F kind "${kind}" \u3067\u3001 \u8D77\u70B9\u304B\u3089\u63CF\u304F\u52D5\u304D\u3092\u6301\u305F\u306A\u3044 (\u5BFE\u8C61\u306F ${[...DRAW_KINDS].join(" / ")})`
+        );
       }
     }
     for (const t of p.tweens) {
@@ -21467,8 +21470,11 @@ function ChartLineNode({
 function ChartPieNode({
   node,
   active,
-  stateValues = {}
+  stateValues = {},
+  drawing = false,
+  progress = 1
 }) {
+  const instanceId = react.useId().replace(/[^A-Za-z0-9_-]/g, "");
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
   const data = resolveChartData(node.chartData ?? [], stateValues);
@@ -21481,20 +21487,26 @@ function ChartPieNode({
   const cx = pieAreaW / 2;
   const cy = PAD_TOP + chartAreaH / 2;
   let cumAngle = -Math.PI / 2;
+  let cumFrac = 0;
   const slices = data.map((d) => {
     const frac = d.value / total;
     const angle = frac * Math.PI * 2;
     const a0 = cumAngle;
     const a1 = cumAngle + angle;
     cumAngle = a1;
+    const startFrac = cumFrac;
+    cumFrac += frac;
     const x1 = cx + radius * Math.cos(a0);
     const y1 = cy + radius * Math.sin(a0);
     const x2 = cx + radius * Math.cos(a1);
     const y2 = cy + radius * Math.sin(a1);
     const large = angle > Math.PI ? 1 : 0;
     const path = `M ${cx} ${cy} L ${x1} ${y1} A ${radius} ${radius} 0 ${large} 1 ${x2} ${y2} Z`;
-    return { d, frac, path };
+    return { d, frac, path, startFrac };
   });
+  const \u958B\u304D = drawing ? Math.min(1, Math.max(0, Number.isFinite(progress) ? progress : 1)) : 1;
+  const \u5207\u308A\u629C\u304Did = `cdl-pie-draw-${instanceId}`;
+  const \u958B\u304D\u59CB\u3081\u305F = (startFrac) => !drawing || \u958B\u304D > startFrac;
   const legendX = pieAreaW + 8;
   const legendGap = Math.min(28, chartAreaH / Math.max(data.length, 1));
   const legendStartY = PAD_TOP + (chartAreaH - legendGap * data.length) / 2 + legendGap / 2;
@@ -21513,7 +21525,8 @@ function ChartPieNode({
         strokeWidth: active ? 3 : 1.25
       }
     ),
-    slices.map((s, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+    drawing && /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: \u5207\u308A\u629C\u304Did, children: \u6247\u5F62\u306E\u5207\u308A\u629C\u304D(cx, cy, radius + 2, \u958B\u304D) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("g", { ...drawing ? { clipPath: `url(#${\u5207\u308A\u629C\u304Did})` } : {}, children: slices.map((s, idx) => /* @__PURE__ */ jsxRuntime.jsx(
       "path",
       {
         "data-cdl-role": "chart-pie-slice",
@@ -21525,8 +21538,8 @@ function ChartPieNode({
         strokeWidth: 1.5
       },
       `slice-${idx}`
-    )),
-    slices.map((s, idx) => /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${legendX} ${legendStartY + idx * legendGap})`, children: [
+    )) }),
+    slices.map((s, idx) => !\u958B\u304D\u59CB\u3081\u305F(s.startFrac) ? null : /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${legendX} ${legendStartY + idx * legendGap})`, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "rect",
         {
@@ -21564,6 +21577,15 @@ function ChartPieNode({
     ] }, `legend-${idx}`))
   ] });
 }
+function \u6247\u5F62\u306E\u5207\u308A\u629C\u304D(cx, cy, r, \u958B\u304D) {
+  if (\u958B\u304D <= 0) return null;
+  if (\u958B\u304D >= 1) return /* @__PURE__ */ jsxRuntime.jsx("circle", { cx, cy, r });
+  const a0 = -Math.PI / 2;
+  const a1 = a0 + \u958B\u304D * Math.PI * 2;
+  const large = \u958B\u304D > 0.5 ? 1 : 0;
+  const d = `M ${cx} ${cy} L ${cx + r * Math.cos(a0)} ${cy + r * Math.sin(a0)} A ${r} ${r} 0 ${large} 1 ${cx + r * Math.cos(a1)} ${cy + r * Math.sin(a1)} Z`;
+  return /* @__PURE__ */ jsxRuntime.jsx("path", { d });
+}
 var FALLBACK_ORDER = ["accent", "teal", "warning", "success", "info", "error"];
 function sliceColor(tone, idx) {
   if (tone) return TONE[tone];
@@ -21572,7 +21594,9 @@ function sliceColor(tone, idx) {
 function ChartBarNode({
   node,
   active,
-  stateValues = {}
+  stateValues = {},
+  drawing = false,
+  progress = 1
 }) {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -21595,6 +21619,8 @@ function ChartBarNode({
     const v = vMax * i / gridCount;
     return { y: yAt(v), value: v };
   });
+  const \u4F38\u3073 = drawing ? Math.min(1, Math.max(0, Number.isFinite(progress) ? progress : 1)) : 1;
+  const \u6A2A\u8EF8\u306Ey = PAD_TOP + canvasH;
   return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "rect",
@@ -21651,26 +21677,28 @@ function ChartBarNode({
       const bx = xAt(idx);
       const by = yAt(d.value);
       const bh = PAD_TOP + canvasH - by;
+      const \u898B\u3048\u3066\u3044\u308B\u982D = \u6A2A\u8EF8\u306Ey - (\u6A2A\u8EF8\u306Ey - by) * \u4F38\u3073;
+      const \u68D2 = /* @__PURE__ */ jsxRuntime.jsx(
+        "rect",
+        {
+          "data-cdl-role": "chart-bar",
+          "data-cdl-unresolved": d.unresolved ? "true" : void 0,
+          x: bx,
+          y: by,
+          width: barW,
+          height: bh,
+          rx: 2,
+          fill: "var(--cdl-tone-accent, #2d6a8f)",
+          fillOpacity: 0.9
+        }
+      );
       return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "rect",
-          {
-            "data-cdl-role": "chart-bar",
-            "data-cdl-unresolved": d.unresolved ? "true" : void 0,
-            x: bx,
-            y: by,
-            width: barW,
-            height: bh,
-            rx: 2,
-            fill: "var(--cdl-tone-accent, #2d6a8f)",
-            fillOpacity: 0.9
-          }
-        ),
+        drawing ? /* @__PURE__ */ jsxRuntime.jsx("g", { transform: `translate(0 ${\u6A2A\u8EF8\u306Ey}) scale(1 ${\u4F38\u3073}) translate(0 ${-\u6A2A\u8EF8\u306Ey})`, children: \u68D2 }) : \u68D2,
         /* @__PURE__ */ jsxRuntime.jsx(
           "text",
           {
             x: bx + barW / 2,
-            y: by - 6,
+            y: \u898B\u3048\u3066\u3044\u308B\u982D - 6,
             fontSize: 11,
             textAnchor: "middle",
             fill: "var(--cdl-text, #1a1f2a)",
@@ -26804,9 +26832,27 @@ function CdlNodeView({
           }
         );
       case "chart-pie":
-        return /* @__PURE__ */ jsxRuntime.jsx(ChartPieNode, { node: resolvedNode, active, stateValues });
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          ChartPieNode,
+          {
+            node: resolvedNode,
+            active,
+            stateValues,
+            drawing,
+            progress
+          }
+        );
       case "chart-bar":
-        return /* @__PURE__ */ jsxRuntime.jsx(ChartBarNode, { node: resolvedNode, active, stateValues });
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          ChartBarNode,
+          {
+            node: resolvedNode,
+            active,
+            stateValues,
+            drawing,
+            progress
+          }
+        );
       case "gantt-timeline":
         return /* @__PURE__ */ jsxRuntime.jsx(GanttNode, { node: resolvedNode, active, stateValues });
       case "mind-map":