@cardenelabs/cdl 0.6.0 → 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 +131 -67
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +23 -1
- package/dist/index.d.ts +23 -1
- package/dist/index.js +130 -68
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +129 -67
- package/dist/react.cjs.map +1 -1
- package/dist/react.js +129 -67
- package/dist/react.js.map +1 -1
- package/package.json +1 -1
- package/src/index.ts +16 -0
- package/src/kinds/mind-map.tsx +27 -4
- package/src/kinds/tree.tsx +29 -4
- package/src/render/nodes.tsx +6 -5
- package/src/render/payload-binding.ts +65 -3
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({
|
|
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({
|
|
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({
|
|
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(
|
|
22057
|
-
|
|
22058
|
-
|
|
22059
|
-
|
|
22060
|
-
|
|
22061
|
-
|
|
22062
|
-
|
|
22063
|
-
|
|
22064
|
-
|
|
22065
|
-
|
|
22066
|
-
|
|
22067
|
-
|
|
22068
|
-
|
|
22069
|
-
|
|
22070
|
-
|
|
22071
|
-
|
|
22072
|
-
|
|
22073
|
-
|
|
22074
|
-
|
|
22075
|
-
|
|
22076
|
-
|
|
22077
|
-
|
|
22078
|
-
|
|
22079
|
-
|
|
22080
|
-
|
|
22081
|
-
|
|
22082
|
-
|
|
22083
|
-
|
|
22084
|
-
|
|
22085
|
-
|
|
22086
|
-
|
|
22087
|
-
|
|
22088
|
-
|
|
22089
|
-
|
|
22090
|
-
|
|
22091
|
-
|
|
22092
|
-
|
|
22093
|
-
|
|
22094
|
-
|
|
22095
|
-
|
|
22096
|
-
|
|
22097
|
-
|
|
22098
|
-
|
|
22099
|
-
|
|
22100
|
-
|
|
22101
|
-
y: n.h
|
|
22102
|
-
|
|
22103
|
-
|
|
22104
|
-
|
|
22105
|
-
|
|
22106
|
-
|
|
22107
|
-
|
|
22108
|
-
|
|
22109
|
-
|
|
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({
|
|
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
|
-
// 図表
|
|
26322
|
-
// (`render/payload-binding.ts` が描画直前に解決する)。
|
|
26323
|
-
//
|
|
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":
|
|
@@ -28104,6 +28166,7 @@ exports.computeFormulaKey = computeFormulaKey;
|
|
|
28104
28166
|
exports.computeInputSignalKey = computeInputSignalKey;
|
|
28105
28167
|
exports.computeScrollProgress = computeScrollProgress;
|
|
28106
28168
|
exports.computeScrollTriggerKey = computeScrollTriggerKey;
|
|
28169
|
+
exports.computeStateValues = computeStateValues;
|
|
28107
28170
|
exports.computeViewportScale = computeViewportScale;
|
|
28108
28171
|
exports.computed = computed;
|
|
28109
28172
|
exports.countEdgeCrossings = countEdgeCrossings;
|
|
@@ -28124,6 +28187,7 @@ exports.gantt = gantt;
|
|
|
28124
28187
|
exports.hasInteractivePrimitives = hasInteractivePrimitives;
|
|
28125
28188
|
exports.infrastructure = infrastructure;
|
|
28126
28189
|
exports.inputDefaultValue = inputDefaultValue;
|
|
28190
|
+
exports.interpolate = interpolate;
|
|
28127
28191
|
exports.isLargeText = isLargeText;
|
|
28128
28192
|
exports.labelInitClearance = labelInitClearance;
|
|
28129
28193
|
exports.layout = layout;
|