@cardenelabs/cdl 0.6.1 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs CHANGED
@@ -20928,6 +20928,31 @@ function resolveJourneyData(steps, values) {
20928
20928
  return e.ok ? { ...s, emotion: e.value } : { ...s, emotion: e.value, unresolved: true };
20929
20929
  });
20930
20930
  }
20931
+ function resolveBoundText(raw, values) {
20932
+ if (!raw.includes("{")) return { value: raw, ok: true };
20933
+ const resolved = interpolate(raw, values);
20934
+ return hasUnresolvedRef(resolved) ? { value: resolved, ok: false } : { value: resolved, ok: true };
20935
+ }
20936
+ function resolveTreeData(nodes, values) {
20937
+ if (!nodes.some((n) => n.title.includes("{"))) return nodes;
20938
+ return nodes.map((n) => {
20939
+ const title = resolveBoundText(n.title, values);
20940
+ const \u89E3\u6C7A\u5F8C = { ...n, title: title.value };
20941
+ return title.ok ? \u89E3\u6C7A\u5F8C : { ...\u89E3\u6C7A\u5F8C, unresolved: true };
20942
+ });
20943
+ }
20944
+ function resolveMindData(data, values) {
20945
+ const \u8AAD\u3080 = data.rootTitle.includes("{") || data.branches.some((b) => b.title.includes("{"));
20946
+ if (!\u8AAD\u3080) return data;
20947
+ const root = resolveBoundText(data.rootTitle, values);
20948
+ const branches = data.branches.map((b) => {
20949
+ const title = resolveBoundText(b.title, values);
20950
+ const \u89E3\u6C7A\u5F8C2 = { ...b, title: title.value };
20951
+ return title.ok ? \u89E3\u6C7A\u5F8C2 : { ...\u89E3\u6C7A\u5F8C2, unresolved: true };
20952
+ });
20953
+ const \u89E3\u6C7A\u5F8C = { ...data, rootTitle: root.value, branches };
20954
+ return root.ok ? \u89E3\u6C7A\u5F8C : { ...\u89E3\u6C7A\u5F8C, unresolved: true };
20955
+ }
20931
20956
  function ChartLineNode({
20932
20957
  node,
20933
20958
  active,
@@ -21492,10 +21517,14 @@ function toneColor3(tone) {
21492
21517
  }
21493
21518
  var MIND_TONES = ["accent", "teal", "success", "warning", "info", "error"];
21494
21519
  var MIND_BOX_GAP = 24;
21495
- function MindMapNode({ node, active }) {
21520
+ function MindMapNode({
21521
+ node,
21522
+ active,
21523
+ stateValues = {}
21524
+ }) {
21496
21525
  const x0 = node.cx - node.w / 2;
21497
21526
  const y0 = node.cy - node.h / 2;
21498
- const mindData = node.mindData;
21527
+ const mindData = node.mindData ? resolveMindData(node.mindData, stateValues) : void 0;
21499
21528
  if (!mindData) return /* @__PURE__ */ jsxRuntime.jsx("g", { transform: `translate(${x0} ${y0})` });
21500
21529
  const PAD = 40;
21501
21530
  const canvasCx = node.w / 2;
@@ -21531,7 +21560,7 @@ function MindMapNode({ node, active }) {
21531
21560
  },
21532
21561
  `edge-${i}`
21533
21562
  )),
21534
- layout2.nodes.map((n) => /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
21563
+ layout2.nodes.map((n) => /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-cdl-unresolved": n.unresolved ? "true" : void 0, children: [
21535
21564
  /* @__PURE__ */ jsxRuntime.jsx(
21536
21565
  "rect",
21537
21566
  {
@@ -21572,7 +21601,8 @@ function computeMindMapLayout(mindData, cx, cy, canvasW, canvasH) {
21572
21601
  y: cy,
21573
21602
  w: rootW,
21574
21603
  h: rootH,
21575
- isRoot: true
21604
+ isRoot: true,
21605
+ ...mindData.unresolved ? { unresolved: true } : {}
21576
21606
  });
21577
21607
  const childrenOf = /* @__PURE__ */ new Map();
21578
21608
  for (const br of mindData.branches) {
@@ -21675,7 +21705,17 @@ function computeMindMapLayout(mindData, cx, cy, canvasW, canvasH) {
21675
21705
  );
21676
21706
  y = (ys[0] + ys[ys.length - 1]) / 2;
21677
21707
  }
21678
- nodes.push({ id: node.id, title: node.title, x, y, w, h, tone: myTone, isRoot: false });
21708
+ nodes.push({
21709
+ id: node.id,
21710
+ title: node.title,
21711
+ x,
21712
+ y,
21713
+ w,
21714
+ h,
21715
+ tone: myTone,
21716
+ isRoot: false,
21717
+ ...node.unresolved ? { unresolved: true } : {}
21718
+ });
21679
21719
  nodePos.set(node.id, { x, y });
21680
21720
  nodeSide.set(node.id, isLeft ? "left" : "right");
21681
21721
  nodeHalfW.set(node.id, w / 2);
@@ -21995,10 +22035,14 @@ function QuadrantNode({
21995
22035
  })
21996
22036
  ] });
21997
22037
  }
21998
- function TreeNode({ node, active }) {
22038
+ function TreeNode({
22039
+ node,
22040
+ active,
22041
+ stateValues = {}
22042
+ }) {
21999
22043
  const x0 = node.cx - node.w / 2;
22000
22044
  const y0 = node.cy - node.h / 2;
22001
- const treeNodes = node.treeData ?? [];
22045
+ const treeNodes = resolveTreeData(node.treeData ?? [], stateValues);
22002
22046
  const gradientId = `tree-root-grad-${node.id}`;
22003
22047
  const PAD_TOP = 40;
22004
22048
  const PAD_RIGHT = 24;
@@ -22053,60 +22097,68 @@ function TreeNode({ node, active }) {
22053
22097
  layout2.nodes.map((n) => {
22054
22098
  const accent = depthColors[Math.min(n.depth, depthColors.length - 1)] ?? depthColors[0];
22055
22099
  const isRoot = n.depth === 0;
22056
- return /* @__PURE__ */ jsxRuntime.jsx("g", { transform: `translate(${PAD_LEFT + n.x - n.w / 2} ${PAD_TOP + n.y - n.h / 2})`, children: isRoot ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
22057
- /* @__PURE__ */ jsxRuntime.jsx(
22058
- "rect",
22059
- {
22060
- "data-cdl-role": "tree-node",
22061
- x: 0,
22062
- y: 0,
22063
- width: n.w,
22064
- height: n.h,
22065
- rx: 12,
22066
- fill: `url(#${gradientId})`
22067
- }
22068
- ),
22069
- /* @__PURE__ */ jsxRuntime.jsx(
22070
- "text",
22071
- {
22072
- x: n.w / 2,
22073
- y: n.h / 2 + 5,
22074
- fontSize: 13,
22075
- fontWeight: 700,
22076
- textAnchor: "middle",
22077
- fill: "var(--cdl-text-on-tone, #ffffff)",
22078
- children: n.title
22079
- }
22080
- )
22081
- ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
22082
- /* @__PURE__ */ jsxRuntime.jsx(
22083
- "rect",
22084
- {
22085
- "data-cdl-role": "tree-node",
22086
- x: 0,
22087
- y: 0,
22088
- width: n.w,
22089
- height: n.h,
22090
- rx: 9,
22091
- fill: "var(--cdl-chip-fill, #f4f6fb)",
22092
- stroke: accent,
22093
- strokeWidth: 1.5
22094
- }
22095
- ),
22096
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: 0, y: 0, width: 4, height: n.h, rx: 2, fill: accent }),
22097
- /* @__PURE__ */ jsxRuntime.jsx(
22098
- "text",
22099
- {
22100
- x: n.w / 2 + 2,
22101
- y: n.h / 2 + 4,
22102
- fontSize: 12,
22103
- fontWeight: 600,
22104
- textAnchor: "middle",
22105
- fill: "var(--cdl-chip-text, #1a1f2a)",
22106
- children: n.title
22107
- }
22108
- )
22109
- ] }) }, `n-${n.id}`);
22100
+ return /* @__PURE__ */ jsxRuntime.jsx(
22101
+ "g",
22102
+ {
22103
+ "data-cdl-unresolved": n.unresolved ? "true" : void 0,
22104
+ transform: `translate(${PAD_LEFT + n.x - n.w / 2} ${PAD_TOP + n.y - n.h / 2})`,
22105
+ children: isRoot ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
22106
+ /* @__PURE__ */ jsxRuntime.jsx(
22107
+ "rect",
22108
+ {
22109
+ "data-cdl-role": "tree-node",
22110
+ x: 0,
22111
+ y: 0,
22112
+ width: n.w,
22113
+ height: n.h,
22114
+ rx: 12,
22115
+ fill: `url(#${gradientId})`
22116
+ }
22117
+ ),
22118
+ /* @__PURE__ */ jsxRuntime.jsx(
22119
+ "text",
22120
+ {
22121
+ x: n.w / 2,
22122
+ y: n.h / 2 + 5,
22123
+ fontSize: 13,
22124
+ fontWeight: 700,
22125
+ textAnchor: "middle",
22126
+ fill: "var(--cdl-text-on-tone, #ffffff)",
22127
+ children: n.title
22128
+ }
22129
+ )
22130
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
22131
+ /* @__PURE__ */ jsxRuntime.jsx(
22132
+ "rect",
22133
+ {
22134
+ "data-cdl-role": "tree-node",
22135
+ x: 0,
22136
+ y: 0,
22137
+ width: n.w,
22138
+ height: n.h,
22139
+ rx: 9,
22140
+ fill: "var(--cdl-chip-fill, #f4f6fb)",
22141
+ stroke: accent,
22142
+ strokeWidth: 1.5
22143
+ }
22144
+ ),
22145
+ /* @__PURE__ */ jsxRuntime.jsx("rect", { x: 0, y: 0, width: 4, height: n.h, rx: 2, fill: accent }),
22146
+ /* @__PURE__ */ jsxRuntime.jsx(
22147
+ "text",
22148
+ {
22149
+ x: n.w / 2 + 2,
22150
+ y: n.h / 2 + 4,
22151
+ fontSize: 12,
22152
+ fontWeight: 600,
22153
+ textAnchor: "middle",
22154
+ fill: "var(--cdl-chip-text, #1a1f2a)",
22155
+ children: n.title
22156
+ }
22157
+ )
22158
+ ] })
22159
+ },
22160
+ `n-${n.id}`
22161
+ );
22110
22162
  })
22111
22163
  ] });
22112
22164
  }
@@ -22169,7 +22221,16 @@ function computeTreeLayout(treeNodes, canvasW, canvasH) {
22169
22221
  }
22170
22222
  const y = depth * depthGap + depthGap / 2;
22171
22223
  posOf.set(n.id, { x, y });
22172
- nodes.push({ id: n.id, title: n.title, x, y, w: nodeW, h: nodeH, depth });
22224
+ nodes.push({
22225
+ id: n.id,
22226
+ title: n.title,
22227
+ x,
22228
+ y,
22229
+ w: nodeW,
22230
+ h: nodeH,
22231
+ depth,
22232
+ ...n.unresolved ? { unresolved: true } : {}
22233
+ });
22173
22234
  return x;
22174
22235
  };
22175
22236
  for (const r of roots) if (!placed.has(r.id)) place(r, 0);
@@ -26318,9 +26379,10 @@ function CdlNodeView({
26318
26379
  return /* @__PURE__ */ jsxRuntime.jsx(EventNode, { node: resolvedNode, active, progress });
26319
26380
  case "card":
26320
26381
  return /* @__PURE__ */ jsxRuntime.jsx(CardNode, { node: resolvedNode, active });
26321
- // 図表 7 種は payload の数と語が `{signal}` を取れるので stateValues を渡す
26322
- // (`render/payload-binding.ts` が描画直前に解決する)。 動かさない 2 種
26323
- // (mind-map / tree-hierarchy) は構造だけを持つため渡さない。
26382
+ // 図表 9 種は payload `{signal}` を取れるので stateValues を渡す
26383
+ // (`render/payload-binding.ts` が描画直前に解決する)。 取れる欄は種別で違い、
26384
+ // 数と語を取る 7 種に対し、mind-map / tree-hierarchy は **名前だけ** を取る (#467)
26385
+ // 親子の繋がりと、描かれない欄 (補足) は解決しない。
26324
26386
  case "chart-line":
26325
26387
  return /* @__PURE__ */ jsxRuntime.jsx(ChartLineNode, { node: resolvedNode, active, stateValues });
26326
26388
  case "chart-pie":
@@ -26330,13 +26392,13 @@ function CdlNodeView({
26330
26392
  case "gantt-timeline":
26331
26393
  return /* @__PURE__ */ jsxRuntime.jsx(GanttNode, { node: resolvedNode, active, stateValues });
26332
26394
  case "mind-map":
26333
- return /* @__PURE__ */ jsxRuntime.jsx(MindMapNode, { node: resolvedNode, active });
26395
+ return /* @__PURE__ */ jsxRuntime.jsx(MindMapNode, { node: resolvedNode, active, stateValues });
26334
26396
  case "funnel-stages":
26335
26397
  return /* @__PURE__ */ jsxRuntime.jsx(FunnelNode, { node: resolvedNode, active, stateValues });
26336
26398
  case "quadrant-matrix":
26337
26399
  return /* @__PURE__ */ jsxRuntime.jsx(QuadrantNode, { node: resolvedNode, active, stateValues });
26338
26400
  case "tree-hierarchy":
26339
- return /* @__PURE__ */ jsxRuntime.jsx(TreeNode, { node: resolvedNode, active });
26401
+ return /* @__PURE__ */ jsxRuntime.jsx(TreeNode, { node: resolvedNode, active, stateValues });
26340
26402
  case "journey-map":
26341
26403
  return /* @__PURE__ */ jsxRuntime.jsx(UserJourneyNode, { node: resolvedNode, active, stateValues });
26342
26404
  case "shape-file":