@cardenelabs/cdl 0.5.0 → 0.6.0

package/src/visual-validate.ts

@@ -87,6 +87,7 @@ import {
   segmentsCrossRect,
 } from "./layout/collisions";
 import { measureTextWidth } from "./layout/text-width";
+import { templateRefIds } from "./render/utils";
 import {
   bboxOverlaps,
   isNearAny,
@@ -164,7 +165,7 @@ export const MERMAID_PARITY_BASIS_VERSION = "11.16";
  * | classDiagram | classDiagram |
  * | gantt | gantt |
  * | quadrant | quadrantChart |
- * | mindMap / mindMapRadial | mindmap |
+ * | mindMap | mindmap |
  * | userJourney | journey |
  * | chart / pie | xyChart / pie |
  * | topology / infrastructure / network | architecture-beta (v11.1.0、 service / group / edge で構成を描く) |
@@ -190,8 +191,6 @@ export const MERMAID_COMPATIBLE_PRESETS: ReadonlySet<string> = new Set([
   "quad",
   "mindmap",
   "mind",
-  "mindmapradial",
-  "mindradial",
   "userjourney",
   "journey",
   "chart",
@@ -418,7 +417,6 @@ const MIN_NODE_W = 80;
 const MIN_NODE_H = 40;
 const MIN_FONT_SIZE = 12;
 const ROW_FORMAT = /^[^:]+:\s*.+$/;
-const PLACEHOLDER_RE = /\{(\w+)\}/g;
 
 function emptyCounts(): Record<VisualAxis, number> {
   return {
@@ -1864,7 +1862,11 @@ function runAxes(
   // 行を描かない種別の `rows` は画面に出ないので、 形式を要求しても意味がない。 書かれている
   // こと自体が破綻なのは Axis 68 (`rows-not-rendered`) が別に見る。
   const DIVIDER_ONLY = /^[─━—-]+$/;
-  const stateIds = new Set(diag.states.map((s) => s.id));
+  // `{名前}` で読める値。 他の値から自動で決まる値 (`derived`) も読めるので足す
+  const stateIds = new Set([
+    ...diag.states.map((s) => s.id),
+    ...(diag.derived ?? []).map((d) => d.id),
+  ]);
   for (const n of diag.nodes) {
     if (!n.rows) continue;
     if (!rendersRows(n.kind)) continue;
@@ -1874,11 +1876,9 @@ function runAxes(
       if (!ROW_FORMAT.test(row)) {
         push("row-format", `node "${n.id}" row "${row}" が "key: value" 形式でない`);
       }
-      let m: RegExpExecArray | null;
-      const re = new RegExp(PLACEHOLDER_RE);
-      while ((m = re.exec(row)) !== null) {
-        const id = m[1];
-        if (id && !stateIds.has(id)) {
+      // 名前の切り出しは描画側と同じ式を使う (`templateRefIds`)
+      for (const id of templateRefIds(row)) {
+        if (!stateIds.has(id)) {
           push("row-format", `node "${n.id}" row "${row}" placeholder "{${id}}" が未定義 state`);
         }
       }

package/src/kinds/mind-radial.tsx

@@ -1,209 +0,0 @@
-import type { JSX } from "react";
-import type { LaidNode, Tone, MindBranchNode } from "../types";
-import { TONE } from "../render/tone";
-
-const MIND_TONES: Tone[] = ["accent", "teal", "success", "warning", "info", "error"];
-
-/**
- * mind-radial kind ... mindMapRadial preset 用、 中心 + 8 方向 (45 度間隔) の
- * 放射状 branch 配置。 mind-map との違いは「第 1 階層を 45 度で 8 分割」 固定。
- *
- * デザイン方針 (batch3):
- *   - canvas 背景に subtle radial gradient (中心を強調)
- *   - 中心 circle を 2 重 (外周 halo + 本体) + drop shadow で目立たせる
- *   - 各 branch は tone-tinted rounded rect + 中心方向へ tapered edge
- *   - branch 番号 (方位) を dot annotation で示す
- */
-export function MindRadialNode({ node, active }: { node: LaidNode; active: boolean }): JSX.Element {
-  const x0 = node.cx - node.w / 2;
-  const y0 = node.cy - node.h / 2;
-  const mindData = node.mindData;
-  if (!mindData) return <g transform={`translate(${x0} ${y0})`} />;
-
-  const canvasCx = node.w / 2;
-  const canvasCy = node.h / 2;
-  const maxRadius = Math.min(node.w, node.h) / 2 - 100;
-  const gradientId = `mind-radial-bg-${node.id}`;
-  const shadowId = `mind-radial-shadow-${node.id}`;
-
-  const layout = computeRadialLayout(mindData, canvasCx, canvasCy, maxRadius);
-
-  return (
-    <g transform={`translate(${x0} ${y0})`}>
-      <defs>
-        <radialGradient id={gradientId} cx="50%" cy="50%" r="60%">
-          <stop offset="0%" stopColor="var(--cdl-tone-accent, #2d6a8f)" stopOpacity="0.14" />
-          <stop offset="55%" stopColor="var(--cdl-tone-accent, #2d6a8f)" stopOpacity="0.04" />
-          <stop offset="100%" stopColor="var(--cdl-tone-accent, #2d6a8f)" stopOpacity="0" />
-        </radialGradient>
-        <filter id={shadowId} x="-50%" y="-50%" width="200%" height="200%">
-          <feGaussianBlur in="SourceAlpha" stdDeviation="4" />
-          <feOffset dx="0" dy="2" result="offsetblur" />
-          <feComponentTransfer>
-            <feFuncA type="linear" slope="0.4" />
-          </feComponentTransfer>
-          <feMerge>
-            <feMergeNode />
-            <feMergeNode in="SourceGraphic" />
-          </feMerge>
-        </filter>
-      </defs>
-
-      <rect
-        data-cdl-role="node-body"
-        x={0}
-        y={0}
-        width={node.w}
-        height={node.h}
-        rx={16}
-        fill="var(--cdl-node-fill, #ffffff)"
-        stroke={active ? "var(--cdl-tone-accent, #2d6a8f)" : "var(--cdl-divider, #d4d4d8)"}
-        strokeWidth={active ? 3 : 1.25}
-      />
-
-      <circle
-        cx={canvasCx}
-        cy={canvasCy}
-        r={maxRadius + 40}
-        fill={`url(#${gradientId})`}
-        pointerEvents="none"
-      />
-
-      {layout.edges.map((e, i) => (
-        <line
-          key={`edge-${i}`}
-          data-cdl-role="mind-radial-edge"
-          x1={e.x1}
-          y1={e.y1}
-          x2={e.x2}
-          y2={e.y2}
-          stroke={toneColor(e.tone)}
-          strokeWidth={2.25}
-          strokeOpacity={0.7}
-          strokeLinecap="round"
-        />
-      ))}
-
-      {/* 中心の周りに敷く光の輪。 意図して淡く、 読ませる要素ではない。
-          役割を付けるのは、 consumer が色を当てたり検査から外したりできるようにするため
-          (役割の無い要素には CSS も検査も届かない)。 */}
-      <circle
-        data-cdl-role="mind-radial-halo"
-        cx={canvasCx}
-        cy={canvasCy}
-        r={56}
-        fill="var(--cdl-tone-accent, #2d6a8f)"
-        fillOpacity={0.18}
-      />
-      <circle
-        cx={canvasCx}
-        cy={canvasCy}
-        r={42}
-        fill="var(--cdl-tone-accent, #2d6a8f)"
-        filter={`url(#${shadowId})`}
-      />
-      <text
-        x={canvasCx}
-        y={canvasCy + 5}
-        fontSize={14}
-        fontWeight={700}
-        textAnchor="middle"
-        fill="var(--cdl-text-on-tone, #ffffff)"
-      >
-        {mindData.rootTitle}
-      </text>
-
-      {layout.nodes.filter((n) => !n.isRoot).map((n) => (
-        <g key={`n-${n.id}`}>
-          <rect
-            x={n.x - 62}
-            y={n.y - 22}
-            width={124}
-            height={44}
-            rx={12}
-            fill="var(--cdl-chip-fill, #f4f6fb)"
-            stroke={toneColor(n.tone)}
-            strokeWidth={2}
-          />
-          <circle
-            cx={n.x - 62 + 12}
-            cy={n.y}
-            r={5}
-            fill={toneColor(n.tone)}
-          />
-          <text
-            x={n.x + 6}
-            y={n.y + 5}
-            fontSize={13}
-            fontWeight={600}
-            textAnchor="middle"
-            fill="var(--cdl-chip-text, #1a1f2a)"
-          >
-            {n.title}
-          </text>
-        </g>
-      ))}
-    </g>
-  );
-}
-
-type LayoutNode = {
-  id: string;
-  title: string;
-  x: number;
-  y: number;
-  tone?: Tone;
-  isRoot: boolean;
-};
-
-type LayoutEdge = {
-  x1: number;
-  y1: number;
-  x2: number;
-  y2: number;
-  tone?: Tone;
-};
-
-function computeRadialLayout(
-  mindData: { rootId: string; rootTitle: string; branches: MindBranchNode[] },
-  cx: number,
-  cy: number,
-  maxRadius: number,
-): { nodes: LayoutNode[]; edges: LayoutEdge[] } {
-  const nodes: LayoutNode[] = [];
-  const edges: LayoutEdge[] = [];
-
-  nodes.push({ id: mindData.rootId, title: mindData.rootTitle, x: cx, y: cy, isRoot: true });
-
-  const childrenOf = new Map<string, MindBranchNode[]>();
-  for (const br of mindData.branches) {
-    if (!childrenOf.has(br.parent)) childrenOf.set(br.parent, []);
-    childrenOf.get(br.parent)!.push(br);
-  }
-
-  const firstLevel = childrenOf.get(mindData.rootId) ?? [];
-  const angleStep = (Math.PI * 2) / 8;
-  firstLevel.slice(0, 8).forEach((br, idx) => {
-    const angle = -Math.PI / 2 + angleStep * idx;
-    const tone = br.tone ?? MIND_TONES[idx % MIND_TONES.length]!;
-    const r = maxRadius;
-    const x = cx + r * Math.cos(angle);
-    const y = cy + r * Math.sin(angle);
-    nodes.push({ id: br.id, title: br.title, x, y, tone, isRoot: false });
-    const rootR = 42;
-    const branchR = 62;
-    const x1 = cx + rootR * Math.cos(angle);
-    const y1 = cy + rootR * Math.sin(angle);
-    const x2 = x - branchR * Math.cos(angle);
-    const y2 = y - 22 * Math.sin(angle);
-    edges.push({ x1, y1, x2, y2, tone });
-  });
-
-  return { nodes, edges };
-}
-
-
-function toneColor(tone: Tone | undefined): string {
-  if (!tone) return TONE.accent;
-  return TONE[tone];
-}