@cardenelabs/cdl 0.13.1 → 0.14.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/CHANGELOG.md +28 -1
- package/dist/index.cjs +6103 -6056
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +5 -2
- package/dist/index.d.ts +5 -2
- package/dist/index.js +6103 -6056
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +188 -143
- package/dist/react.cjs.map +1 -1
- package/dist/react.js +188 -143
- package/dist/react.js.map +1 -1
- package/package.json +1 -1
- package/src/kinds/mind-map.tsx +52 -22
- package/src/kinds/tree.tsx +51 -21
- package/src/visual-validate.ts +90 -4
package/dist/react.cjs
CHANGED
|
@@ -6648,20 +6648,20 @@ function ChartLineNode({
|
|
|
6648
6648
|
const x0 = node.cx - node.w / 2;
|
|
6649
6649
|
const y0 = node.cy - node.h / 2;
|
|
6650
6650
|
const data = resolveChartData(node.chartData ?? [], stateValues);
|
|
6651
|
-
const
|
|
6652
|
-
const
|
|
6653
|
-
const
|
|
6654
|
-
const
|
|
6655
|
-
const canvasW = node.w -
|
|
6656
|
-
const canvasH = node.h -
|
|
6651
|
+
const PAD_TOP2 = 36;
|
|
6652
|
+
const PAD_RIGHT2 = 40;
|
|
6653
|
+
const PAD_BOTTOM2 = 56;
|
|
6654
|
+
const PAD_LEFT2 = 72;
|
|
6655
|
+
const canvasW = node.w - PAD_LEFT2 - PAD_RIGHT2;
|
|
6656
|
+
const canvasH = node.h - PAD_TOP2 - PAD_BOTTOM2;
|
|
6657
6657
|
const values = data.map((d) => d.value);
|
|
6658
6658
|
const vMin = values.length > 0 ? Math.min(...values) : 0;
|
|
6659
6659
|
const vMax = values.length > 0 ? Math.max(...values) : 1;
|
|
6660
6660
|
const vRange = vMax - vMin || 1;
|
|
6661
6661
|
const LABEL_ROOM = 20;
|
|
6662
|
-
const plotTop =
|
|
6662
|
+
const plotTop = PAD_TOP2 + LABEL_ROOM;
|
|
6663
6663
|
const plotH = Math.max(canvasH - LABEL_ROOM * 2, 1);
|
|
6664
|
-
const xAt = (idx) =>
|
|
6664
|
+
const xAt = (idx) => PAD_LEFT2 + (data.length <= 1 ? canvasW / 2 : canvasW * idx / (data.length - 1));
|
|
6665
6665
|
const yAt = (v) => plotTop + plotH - (v - vMin) / vRange * plotH;
|
|
6666
6666
|
const points = data.map((d, idx) => `${xAt(idx)},${yAt(d.value)}`).join(" ");
|
|
6667
6667
|
const \u70B9\u307E\u3067\u306E\u9577\u3055 = [];
|
|
@@ -6706,9 +6706,9 @@ function ChartLineNode({
|
|
|
6706
6706
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
6707
6707
|
"line",
|
|
6708
6708
|
{
|
|
6709
|
-
x1:
|
|
6709
|
+
x1: PAD_LEFT2,
|
|
6710
6710
|
y1: t.y,
|
|
6711
|
-
x2:
|
|
6711
|
+
x2: PAD_LEFT2 + canvasW,
|
|
6712
6712
|
y2: t.y,
|
|
6713
6713
|
stroke: "var(--cdl-divider, #d4d4d8)",
|
|
6714
6714
|
strokeWidth: 0.75,
|
|
@@ -6719,7 +6719,7 @@ function ChartLineNode({
|
|
|
6719
6719
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
6720
6720
|
"text",
|
|
6721
6721
|
{
|
|
6722
|
-
x:
|
|
6722
|
+
x: PAD_LEFT2 - 8,
|
|
6723
6723
|
y: t.y + 4,
|
|
6724
6724
|
fontSize: 11,
|
|
6725
6725
|
textAnchor: "end",
|
|
@@ -6731,9 +6731,9 @@ function ChartLineNode({
|
|
|
6731
6731
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
6732
6732
|
"line",
|
|
6733
6733
|
{
|
|
6734
|
-
x1:
|
|
6734
|
+
x1: PAD_LEFT2,
|
|
6735
6735
|
y1: plotTop + plotH,
|
|
6736
|
-
x2:
|
|
6736
|
+
x2: PAD_LEFT2 + canvasW,
|
|
6737
6737
|
y2: plotTop + plotH,
|
|
6738
6738
|
stroke: "var(--cdl-text-mute, #8a8678)",
|
|
6739
6739
|
strokeWidth: 1.25
|
|
@@ -6742,9 +6742,9 @@ function ChartLineNode({
|
|
|
6742
6742
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
6743
6743
|
"line",
|
|
6744
6744
|
{
|
|
6745
|
-
x1:
|
|
6745
|
+
x1: PAD_LEFT2,
|
|
6746
6746
|
y1: plotTop,
|
|
6747
|
-
x2:
|
|
6747
|
+
x2: PAD_LEFT2,
|
|
6748
6748
|
y2: plotTop + plotH,
|
|
6749
6749
|
stroke: "var(--cdl-text-mute, #8a8678)",
|
|
6750
6750
|
strokeWidth: 1.25
|
|
@@ -6812,7 +6812,7 @@ function ChartLineNode({
|
|
|
6812
6812
|
"text",
|
|
6813
6813
|
{
|
|
6814
6814
|
x: cx,
|
|
6815
|
-
y:
|
|
6815
|
+
y: PAD_TOP2 + canvasH + 20,
|
|
6816
6816
|
fontSize: 12,
|
|
6817
6817
|
textAnchor: "middle",
|
|
6818
6818
|
fill: "var(--cdl-text-dim, #5a6270)",
|
|
@@ -6835,13 +6835,13 @@ function ChartPieNode({
|
|
|
6835
6835
|
const y0 = node.cy - node.h / 2;
|
|
6836
6836
|
const data = resolveChartData(node.chartData ?? [], stateValues);
|
|
6837
6837
|
const total = data.reduce((acc, d) => acc + d.value, 0) || 1;
|
|
6838
|
-
const
|
|
6839
|
-
const
|
|
6840
|
-
const chartAreaH = node.h -
|
|
6838
|
+
const PAD_TOP2 = 20;
|
|
6839
|
+
const PAD_BOTTOM2 = 20;
|
|
6840
|
+
const chartAreaH = node.h - PAD_TOP2 - PAD_BOTTOM2;
|
|
6841
6841
|
const pieAreaW = node.w * 0.5;
|
|
6842
6842
|
const radius = Math.min(pieAreaW, chartAreaH) / 2 - 12;
|
|
6843
6843
|
const cx = pieAreaW / 2;
|
|
6844
|
-
const cy =
|
|
6844
|
+
const cy = PAD_TOP2 + chartAreaH / 2;
|
|
6845
6845
|
let cumAngle = -Math.PI / 2;
|
|
6846
6846
|
let cumFrac = 0;
|
|
6847
6847
|
const slices = data.map((d) => {
|
|
@@ -6865,7 +6865,7 @@ function ChartPieNode({
|
|
|
6865
6865
|
const \u958B\u304D\u59CB\u3081\u305F = (startFrac) => !drawing || \u958B\u304D > startFrac;
|
|
6866
6866
|
const legendX = pieAreaW + 8;
|
|
6867
6867
|
const legendGap = Math.min(28, chartAreaH / Math.max(data.length, 1));
|
|
6868
|
-
const legendStartY =
|
|
6868
|
+
const legendStartY = PAD_TOP2 + (chartAreaH - legendGap * data.length) / 2 + legendGap / 2;
|
|
6869
6869
|
return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
|
|
6870
6870
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
6871
6871
|
"rect",
|
|
@@ -6957,26 +6957,26 @@ function ChartBarNode({
|
|
|
6957
6957
|
const x0 = node.cx - node.w / 2;
|
|
6958
6958
|
const y0 = node.cy - node.h / 2;
|
|
6959
6959
|
const data = resolveChartData(node.chartData ?? [], stateValues);
|
|
6960
|
-
const
|
|
6961
|
-
const
|
|
6962
|
-
const
|
|
6963
|
-
const
|
|
6964
|
-
const canvasW = node.w -
|
|
6965
|
-
const canvasH = node.h -
|
|
6960
|
+
const PAD_TOP2 = 20;
|
|
6961
|
+
const PAD_RIGHT2 = 24;
|
|
6962
|
+
const PAD_BOTTOM2 = 44;
|
|
6963
|
+
const PAD_LEFT2 = 60;
|
|
6964
|
+
const canvasW = node.w - PAD_LEFT2 - PAD_RIGHT2;
|
|
6965
|
+
const canvasH = node.h - PAD_TOP2 - PAD_BOTTOM2;
|
|
6966
6966
|
const vMax = data.length > 0 ? Math.max(...data.map((d) => d.value)) : 1;
|
|
6967
6967
|
const vRange = vMax || 1;
|
|
6968
6968
|
const barGap = 10;
|
|
6969
6969
|
const barCount = data.length || 1;
|
|
6970
6970
|
const barW = (canvasW - barGap * (barCount + 1)) / barCount;
|
|
6971
|
-
const yAt = (v) =>
|
|
6972
|
-
const xAt = (idx) =>
|
|
6971
|
+
const yAt = (v) => PAD_TOP2 + canvasH - v / vRange * canvasH;
|
|
6972
|
+
const xAt = (idx) => PAD_LEFT2 + barGap + idx * (barW + barGap);
|
|
6973
6973
|
const gridCount = 4;
|
|
6974
6974
|
const gridTicks = Array.from({ length: gridCount + 1 }, (_, i) => {
|
|
6975
6975
|
const v = vMax * i / gridCount;
|
|
6976
6976
|
return { y: yAt(v), value: v };
|
|
6977
6977
|
});
|
|
6978
6978
|
const \u4F38\u3073 = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
|
|
6979
|
-
const \u6A2A\u8EF8\u306Ey =
|
|
6979
|
+
const \u6A2A\u8EF8\u306Ey = PAD_TOP2 + canvasH;
|
|
6980
6980
|
return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
|
|
6981
6981
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
6982
6982
|
"rect",
|
|
@@ -6996,9 +6996,9 @@ function ChartBarNode({
|
|
|
6996
6996
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
6997
6997
|
"line",
|
|
6998
6998
|
{
|
|
6999
|
-
x1:
|
|
6999
|
+
x1: PAD_LEFT2,
|
|
7000
7000
|
y1: t.y,
|
|
7001
|
-
x2:
|
|
7001
|
+
x2: PAD_LEFT2 + canvasW,
|
|
7002
7002
|
y2: t.y,
|
|
7003
7003
|
stroke: "var(--cdl-divider, #d4d4d8)",
|
|
7004
7004
|
strokeWidth: 0.75,
|
|
@@ -7009,7 +7009,7 @@ function ChartBarNode({
|
|
|
7009
7009
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
7010
7010
|
"text",
|
|
7011
7011
|
{
|
|
7012
|
-
x:
|
|
7012
|
+
x: PAD_LEFT2 - 8,
|
|
7013
7013
|
y: t.y + 4,
|
|
7014
7014
|
fontSize: 11,
|
|
7015
7015
|
textAnchor: "end",
|
|
@@ -7021,10 +7021,10 @@ function ChartBarNode({
|
|
|
7021
7021
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
7022
7022
|
"line",
|
|
7023
7023
|
{
|
|
7024
|
-
x1:
|
|
7025
|
-
y1:
|
|
7026
|
-
x2:
|
|
7027
|
-
y2:
|
|
7024
|
+
x1: PAD_LEFT2,
|
|
7025
|
+
y1: PAD_TOP2 + canvasH,
|
|
7026
|
+
x2: PAD_LEFT2 + canvasW,
|
|
7027
|
+
y2: PAD_TOP2 + canvasH,
|
|
7028
7028
|
stroke: "var(--cdl-text-mute, #8a8678)",
|
|
7029
7029
|
strokeWidth: 1.25
|
|
7030
7030
|
}
|
|
@@ -7032,7 +7032,7 @@ function ChartBarNode({
|
|
|
7032
7032
|
data.map((d, idx) => {
|
|
7033
7033
|
const bx = xAt(idx);
|
|
7034
7034
|
const by = yAt(d.value);
|
|
7035
|
-
const bh =
|
|
7035
|
+
const bh = PAD_TOP2 + canvasH - by;
|
|
7036
7036
|
const \u898B\u3048\u3066\u3044\u308B\u982D = \u6A2A\u8EF8\u306Ey - (\u6A2A\u8EF8\u306Ey - by) * \u4F38\u3073;
|
|
7037
7037
|
const \u68D2 = /* @__PURE__ */ jsxRuntime.jsx(
|
|
7038
7038
|
"rect",
|
|
@@ -7065,7 +7065,7 @@ function ChartBarNode({
|
|
|
7065
7065
|
"text",
|
|
7066
7066
|
{
|
|
7067
7067
|
x: bx + barW / 2,
|
|
7068
|
-
y:
|
|
7068
|
+
y: PAD_TOP2 + canvasH + 18,
|
|
7069
7069
|
fontSize: 12,
|
|
7070
7070
|
textAnchor: "middle",
|
|
7071
7071
|
fill: "var(--cdl-text-dim, #5a6270)",
|
|
@@ -7086,12 +7086,12 @@ function GanttNode({
|
|
|
7086
7086
|
const x0 = node.cx - node.w / 2;
|
|
7087
7087
|
const y0 = node.cy - node.h / 2;
|
|
7088
7088
|
const tasks = resolveGanttData(node.ganttData ?? [], stateValues);
|
|
7089
|
-
const
|
|
7090
|
-
const
|
|
7091
|
-
const
|
|
7092
|
-
const
|
|
7093
|
-
const canvasW = node.w -
|
|
7094
|
-
const canvasH = node.h -
|
|
7089
|
+
const PAD_TOP2 = 32;
|
|
7090
|
+
const PAD_RIGHT2 = 48;
|
|
7091
|
+
const PAD_BOTTOM2 = 44;
|
|
7092
|
+
const PAD_LEFT2 = 156;
|
|
7093
|
+
const canvasW = node.w - PAD_LEFT2 - PAD_RIGHT2;
|
|
7094
|
+
const canvasH = node.h - PAD_TOP2 - PAD_BOTTOM2;
|
|
7095
7095
|
const rowGap = 20;
|
|
7096
7096
|
const rowCount = tasks.length || 1;
|
|
7097
7097
|
const rowH = Math.max(28, (canvasH - rowGap * (rowCount + 1)) / rowCount);
|
|
@@ -7118,8 +7118,8 @@ function GanttNode({
|
|
|
7118
7118
|
const \u76EE\u76DB\u308A\u306E\u4E0A\u9650 = 200;
|
|
7119
7119
|
const \u76EE\u76DB\u308A\u306E\u9593\u9694 = Math.max(1, Math.ceil(maxIdx / \u76EE\u76DB\u308A\u306E\u4E0A\u9650));
|
|
7120
7120
|
const \u76EE\u76DB\u308A\u306E\u672C\u6570 = Math.ceil(maxIdx / \u76EE\u76DB\u308A\u306E\u9593\u9694);
|
|
7121
|
-
const xAt = (idx) =>
|
|
7122
|
-
const yAt = (row) =>
|
|
7121
|
+
const xAt = (idx) => PAD_LEFT2 + idx * cellW;
|
|
7122
|
+
const yAt = (row) => PAD_TOP2 + rowGap + row * (rowH + rowGap);
|
|
7123
7123
|
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() };
|
|
7124
7124
|
const \u7F6E\u304F = (\u8868, \u4F4D\u7F6E, label) => {
|
|
7125
7125
|
if (label !== "" && Number.isFinite(\u4F4D\u7F6E) && !\u8868.has(\u4F4D\u7F6E)) \u8868.set(\u4F4D\u7F6E, label);
|
|
@@ -7164,9 +7164,9 @@ function GanttNode({
|
|
|
7164
7164
|
{
|
|
7165
7165
|
"data-cdl-role": "gantt-grid",
|
|
7166
7166
|
x1: xAt(i),
|
|
7167
|
-
y1:
|
|
7167
|
+
y1: PAD_TOP2,
|
|
7168
7168
|
x2: xAt(i),
|
|
7169
|
-
y2:
|
|
7169
|
+
y2: PAD_TOP2 + canvasH,
|
|
7170
7170
|
stroke: "var(--cdl-divider, #d4d4d8)",
|
|
7171
7171
|
strokeWidth: 0.75,
|
|
7172
7172
|
strokeDasharray: "3 3",
|
|
@@ -7178,7 +7178,7 @@ function GanttNode({
|
|
|
7178
7178
|
{
|
|
7179
7179
|
"data-cdl-role": "gantt-tick",
|
|
7180
7180
|
x: xAt(i) + cellW / 2,
|
|
7181
|
-
y:
|
|
7181
|
+
y: PAD_TOP2 + canvasH + 18,
|
|
7182
7182
|
fontSize: 11,
|
|
7183
7183
|
textAnchor: "middle",
|
|
7184
7184
|
fill: "var(--cdl-text-dim, #5a6270)",
|
|
@@ -7190,9 +7190,9 @@ function GanttNode({
|
|
|
7190
7190
|
"line",
|
|
7191
7191
|
{
|
|
7192
7192
|
x1: xAt(maxIdx),
|
|
7193
|
-
y1:
|
|
7193
|
+
y1: PAD_TOP2,
|
|
7194
7194
|
x2: xAt(maxIdx),
|
|
7195
|
-
y2:
|
|
7195
|
+
y2: PAD_TOP2 + canvasH,
|
|
7196
7196
|
stroke: "var(--cdl-divider, #d4d4d8)",
|
|
7197
7197
|
strokeWidth: 0.75,
|
|
7198
7198
|
opacity: 0.5
|
|
@@ -7201,7 +7201,7 @@ function GanttNode({
|
|
|
7201
7201
|
\u6574\u3048\u305F.map((t, row) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
7202
7202
|
"text",
|
|
7203
7203
|
{
|
|
7204
|
-
x:
|
|
7204
|
+
x: PAD_LEFT2 - 12,
|
|
7205
7205
|
y: yAt(row) + rowH / 2 + 4,
|
|
7206
7206
|
fontSize: 12,
|
|
7207
7207
|
textAnchor: "end",
|
|
@@ -7358,6 +7358,24 @@ function \u7BB1\u306B\u7A4D\u3080(\u884C, \u7BB1\u306E\u5E45, \u7BB1\u306E\u9AD8
|
|
|
7358
7358
|
}
|
|
7359
7359
|
var MIND_TONES = ["accent", "teal", "success", "warning", "info", "error"];
|
|
7360
7360
|
var MIND_BOX_GAP = 24;
|
|
7361
|
+
var MIND_PAD = 40;
|
|
7362
|
+
function \u653E\u5C04\u306E\u4E2D\u8EAB(node, stateValues = {}) {
|
|
7363
|
+
const mindData = node.mindData ? resolveMindData(node.mindData, stateValues) : void 0;
|
|
7364
|
+
if (!mindData) return void 0;
|
|
7365
|
+
return computeMindMapLayout(
|
|
7366
|
+
mindData,
|
|
7367
|
+
node.w / 2,
|
|
7368
|
+
node.h / 2,
|
|
7369
|
+
node.w - MIND_PAD * 2,
|
|
7370
|
+
node.h - MIND_PAD * 2
|
|
7371
|
+
);
|
|
7372
|
+
}
|
|
7373
|
+
function \u653E\u5C04\u306E\u884C(n) {
|
|
7374
|
+
return [
|
|
7375
|
+
{ \u5F79\u5272: "title", text: n.title, fontSize: n.isRoot ? 15 : 13 },
|
|
7376
|
+
{ \u5F79\u5272: "subtitle", text: n.subtitle ?? "", fontSize: 9 }
|
|
7377
|
+
];
|
|
7378
|
+
}
|
|
7361
7379
|
function MindMapNode({
|
|
7362
7380
|
node,
|
|
7363
7381
|
active,
|
|
@@ -7367,14 +7385,8 @@ function MindMapNode({
|
|
|
7367
7385
|
}) {
|
|
7368
7386
|
const x0 = node.cx - node.w / 2;
|
|
7369
7387
|
const y0 = node.cy - node.h / 2;
|
|
7370
|
-
const
|
|
7371
|
-
if (!
|
|
7372
|
-
const PAD = 40;
|
|
7373
|
-
const canvasCx = node.w / 2;
|
|
7374
|
-
const canvasCy = node.h / 2;
|
|
7375
|
-
const canvasW = node.w - PAD * 2;
|
|
7376
|
-
const canvasH = node.h - PAD * 2;
|
|
7377
|
-
const layout2 = computeMindMapLayout(mindData, canvasCx, canvasCy, canvasW, canvasH);
|
|
7388
|
+
const layout2 = \u653E\u5C04\u306E\u4E2D\u8EAB(node, stateValues);
|
|
7389
|
+
if (!layout2) return /* @__PURE__ */ jsxRuntime.jsx("g", { transform: `translate(${x0} ${y0})` });
|
|
7378
7390
|
const \u4F38\u3073 = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
|
|
7379
7391
|
const \u6700\u5927\u6DF1\u3055 = layout2.nodes.reduce((m, n) => Math.max(m, n.depth), 0);
|
|
7380
7392
|
const \u7BB1\u304C\u51FA\u308B = (\u6DF1\u3055) => !drawing || \u6BB5\u306E\u4F38\u3073(\u4F38\u3073, \u6DF1\u3055, \u6700\u5927\u6DF1\u3055) >= 1;
|
|
@@ -7412,16 +7424,11 @@ function MindMapNode({
|
|
|
7412
7424
|
}),
|
|
7413
7425
|
layout2.nodes.map((n) => {
|
|
7414
7426
|
if (!\u7BB1\u304C\u51FA\u308B(n.depth)) return null;
|
|
7415
|
-
const \
|
|
7416
|
-
|
|
7417
|
-
{ \u5F79\u5272: "title", text: n.title, fontSize: n.isRoot ? 15 : 13 },
|
|
7418
|
-
{ \u5F79\u5272: "subtitle", text: n.subtitle ?? "", fontSize: 9 }
|
|
7419
|
-
],
|
|
7420
|
-
n.w,
|
|
7421
|
-
n.h
|
|
7422
|
-
);
|
|
7427
|
+
const \u6750\u6599 = \u653E\u5C04\u306E\u884C(n);
|
|
7428
|
+
const \u884C = \u7BB1\u306B\u7A4D\u3080(\u6750\u6599, n.w, n.h);
|
|
7423
7429
|
const \u88DC\u8DB3\u3042\u308A = (n.subtitle ?? "").trim() !== "";
|
|
7424
|
-
const \
|
|
7430
|
+
const \u540D\u524D = \u6750\u6599[0];
|
|
7431
|
+
const \u53CE\u3081\u305F\u540D\u524D = \u88DC\u8DB3\u3042\u308A ? void 0 : \u5E45\u306B\u53CE\u3081\u308B(\u540D\u524D.text, \u540D\u524D.fontSize, \u4F7F\u3048\u308B\u5E45(n.w));
|
|
7425
7432
|
const \u6587\u5B57\u306E\u8272 = n.isRoot ? "var(--cdl-text-on-tone, #ffffff)" : "var(--cdl-chip-text, #1a1f2a)";
|
|
7426
7433
|
return /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-cdl-unresolved": n.unresolved ? "true" : void 0, children: [
|
|
7427
7434
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -7700,13 +7707,13 @@ function FunnelNode({
|
|
|
7700
7707
|
const x0 = node.cx - node.w / 2;
|
|
7701
7708
|
const y0 = node.cy - node.h / 2;
|
|
7702
7709
|
const stages = resolveFunnelData(node.funnelData ?? [], stateValues);
|
|
7703
|
-
const
|
|
7704
|
-
const
|
|
7705
|
-
const
|
|
7706
|
-
const
|
|
7710
|
+
const PAD_TOP2 = 32;
|
|
7711
|
+
const PAD_RIGHT2 = 24;
|
|
7712
|
+
const PAD_BOTTOM2 = 32;
|
|
7713
|
+
const PAD_LEFT2 = 24;
|
|
7707
7714
|
const legendW = 160;
|
|
7708
|
-
const canvasW = node.w -
|
|
7709
|
-
const canvasH = node.h -
|
|
7715
|
+
const canvasW = node.w - PAD_LEFT2 - PAD_RIGHT2 - legendW;
|
|
7716
|
+
const canvasH = node.h - PAD_TOP2 - PAD_BOTTOM2;
|
|
7710
7717
|
const stageCount = stages.length || 1;
|
|
7711
7718
|
const gap = 4;
|
|
7712
7719
|
const stageH = (canvasH - gap * (stageCount - 1)) / stageCount;
|
|
@@ -7726,15 +7733,15 @@ function FunnelNode({
|
|
|
7726
7733
|
const \u6BB5 = stages.map((s, idx) => {
|
|
7727
7734
|
const prev = idx > 0 ? stages[idx - 1] : null;
|
|
7728
7735
|
const dropRate = prev && prev.count > 0 ? (prev.count - s.count) / prev.count * 100 : 0;
|
|
7729
|
-
const y =
|
|
7736
|
+
const y = PAD_TOP2 + idx * (stageH + gap);
|
|
7730
7737
|
const topW = widthAtStep(idx);
|
|
7731
7738
|
const bottomW = widthAtStep(idx + 1);
|
|
7732
|
-
const cx =
|
|
7739
|
+
const cx = PAD_LEFT2 + canvasW / 2;
|
|
7733
7740
|
const topX = cx - topW / 2;
|
|
7734
7741
|
const bottomX = cx - bottomW / 2;
|
|
7735
7742
|
const points = `${topX},${y} ${topX + topW},${y} ${bottomX + bottomW},${y + stageH} ${bottomX},${y + stageH}`;
|
|
7736
7743
|
const tone = toneByIndex(idx);
|
|
7737
|
-
const legendX =
|
|
7744
|
+
const legendX = PAD_LEFT2 + canvasW + 24;
|
|
7738
7745
|
return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
|
|
7739
7746
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
7740
7747
|
"polygon",
|
|
@@ -7798,7 +7805,7 @@ function FunnelNode({
|
|
|
7798
7805
|
strokeWidth: active ? 3 : 1.25
|
|
7799
7806
|
}
|
|
7800
7807
|
),
|
|
7801
|
-
drawing && /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: \u5207\u308A\u629C\u304Did, children: /* @__PURE__ */ jsxRuntime.jsx("rect", { x: 0, y: 0, width: node.w, height:
|
|
7808
|
+
drawing && /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: \u5207\u308A\u629C\u304Did, children: /* @__PURE__ */ jsxRuntime.jsx("rect", { x: 0, y: 0, width: node.w, height: PAD_TOP2 + canvasH * \u4F38\u3073 }) }) }),
|
|
7802
7809
|
drawing ? /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: `url(#${\u5207\u308A\u629C\u304Did})`, children: \u6BB5 }) : \u6BB5
|
|
7803
7810
|
] });
|
|
7804
7811
|
}
|
|
@@ -7823,8 +7830,8 @@ function QuadrantNode({
|
|
|
7823
7830
|
const raw = node.quadrantData;
|
|
7824
7831
|
if (!raw) return /* @__PURE__ */ jsxRuntime.jsx("g", { transform: `translate(${x0} ${y0})` });
|
|
7825
7832
|
const data = resolveQuadrantData(raw, stateValues);
|
|
7826
|
-
const
|
|
7827
|
-
const
|
|
7833
|
+
const PAD_TOP2 = 40;
|
|
7834
|
+
const PAD_BOTTOM2 = 56;
|
|
7828
7835
|
const AXIS_LABEL_FONT = 12;
|
|
7829
7836
|
const PAD_MIN = 60;
|
|
7830
7837
|
const ITEM_FONT = 13;
|
|
@@ -7836,12 +7843,12 @@ function QuadrantNode({
|
|
|
7836
7843
|
const wantRight = axisLabelPad(data.xAxis.right) - PAD_MIN;
|
|
7837
7844
|
const wantTotal = wantLeft + wantRight;
|
|
7838
7845
|
const padScale = wantTotal > padBudget && wantTotal > 0 ? padBudget / wantTotal : 1;
|
|
7839
|
-
const
|
|
7840
|
-
const
|
|
7841
|
-
const canvasW = node.w -
|
|
7842
|
-
const canvasH = node.h -
|
|
7843
|
-
const cx =
|
|
7844
|
-
const cy =
|
|
7846
|
+
const PAD_LEFT2 = PAD_MIN + wantLeft * padScale;
|
|
7847
|
+
const PAD_RIGHT2 = PAD_MIN + wantRight * padScale;
|
|
7848
|
+
const canvasW = node.w - PAD_LEFT2 - PAD_RIGHT2;
|
|
7849
|
+
const canvasH = node.h - PAD_TOP2 - PAD_BOTTOM2;
|
|
7850
|
+
const cx = PAD_LEFT2 + canvasW / 2;
|
|
7851
|
+
const cy = PAD_TOP2 + canvasH / 2;
|
|
7845
7852
|
const halfW = canvasW / 2;
|
|
7846
7853
|
const halfH = canvasH / 2;
|
|
7847
7854
|
const itemsBy = {
|
|
@@ -7877,16 +7884,16 @@ function QuadrantNode({
|
|
|
7877
7884
|
strokeWidth: active ? 3 : 1.25
|
|
7878
7885
|
}
|
|
7879
7886
|
),
|
|
7880
|
-
/* @__PURE__ */ jsxRuntime.jsx("rect", { "data-cdl-role": "quadrant-bg", x:
|
|
7881
|
-
/* @__PURE__ */ jsxRuntime.jsx("rect", { "data-cdl-role": "quadrant-bg", x: cx, y:
|
|
7882
|
-
/* @__PURE__ */ jsxRuntime.jsx("rect", { "data-cdl-role": "quadrant-bg", x:
|
|
7887
|
+
/* @__PURE__ */ jsxRuntime.jsx("rect", { "data-cdl-role": "quadrant-bg", x: PAD_LEFT2, y: PAD_TOP2, width: halfW, height: halfH, ...quadrantColor.topLeft }),
|
|
7888
|
+
/* @__PURE__ */ jsxRuntime.jsx("rect", { "data-cdl-role": "quadrant-bg", x: cx, y: PAD_TOP2, width: halfW, height: halfH, ...quadrantColor.topRight }),
|
|
7889
|
+
/* @__PURE__ */ jsxRuntime.jsx("rect", { "data-cdl-role": "quadrant-bg", x: PAD_LEFT2, y: cy, width: halfW, height: halfH, ...quadrantColor.bottomLeft }),
|
|
7883
7890
|
/* @__PURE__ */ jsxRuntime.jsx("rect", { "data-cdl-role": "quadrant-bg", x: cx, y: cy, width: halfW, height: halfH, ...quadrantColor.bottomRight }),
|
|
7884
7891
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
7885
7892
|
"rect",
|
|
7886
7893
|
{
|
|
7887
7894
|
"data-cdl-role": "quadrant-canvas",
|
|
7888
|
-
x:
|
|
7889
|
-
y:
|
|
7895
|
+
x: PAD_LEFT2,
|
|
7896
|
+
y: PAD_TOP2,
|
|
7890
7897
|
width: canvasW,
|
|
7891
7898
|
height: canvasH,
|
|
7892
7899
|
fill: "none",
|
|
@@ -7895,25 +7902,25 @@ function QuadrantNode({
|
|
|
7895
7902
|
rx: 8
|
|
7896
7903
|
}
|
|
7897
7904
|
),
|
|
7898
|
-
/* @__PURE__ */ jsxRuntime.jsx("line", { x1: cx, y1:
|
|
7899
|
-
/* @__PURE__ */ jsxRuntime.jsx("line", { x1:
|
|
7900
|
-
/* @__PURE__ */ jsxRuntime.jsx("text", { x:
|
|
7901
|
-
/* @__PURE__ */ jsxRuntime.jsx("text", { x: cx + halfW / 2, y:
|
|
7902
|
-
/* @__PURE__ */ jsxRuntime.jsx("text", { x:
|
|
7903
|
-
/* @__PURE__ */ jsxRuntime.jsx("text", { x: cx + halfW / 2, y:
|
|
7904
|
-
/* @__PURE__ */ jsxRuntime.jsxs("text", { x: cx, y:
|
|
7905
|
+
/* @__PURE__ */ jsxRuntime.jsx("line", { x1: cx, y1: PAD_TOP2, x2: cx, y2: PAD_TOP2 + canvasH, stroke: "var(--cdl-text-mute, #8a8678)", strokeWidth: 1.5 }),
|
|
7906
|
+
/* @__PURE__ */ jsxRuntime.jsx("line", { x1: PAD_LEFT2, y1: cy, x2: PAD_LEFT2 + canvasW, y2: cy, stroke: "var(--cdl-text-mute, #8a8678)", strokeWidth: 1.5 }),
|
|
7907
|
+
/* @__PURE__ */ jsxRuntime.jsx("text", { x: PAD_LEFT2 + halfW / 2, y: PAD_TOP2 + 22, fontSize: 13, fontWeight: 700, textAnchor: "middle", fill: quadrantAccent.topLeft, children: data.quadrantLabels.topLeft }),
|
|
7908
|
+
/* @__PURE__ */ jsxRuntime.jsx("text", { x: cx + halfW / 2, y: PAD_TOP2 + 22, fontSize: 13, fontWeight: 700, textAnchor: "middle", fill: quadrantAccent.topRight, children: data.quadrantLabels.topRight }),
|
|
7909
|
+
/* @__PURE__ */ jsxRuntime.jsx("text", { x: PAD_LEFT2 + halfW / 2, y: PAD_TOP2 + canvasH - 12, fontSize: 13, fontWeight: 700, textAnchor: "middle", fill: quadrantAccent.bottomLeft, children: data.quadrantLabels.bottomLeft }),
|
|
7910
|
+
/* @__PURE__ */ jsxRuntime.jsx("text", { x: cx + halfW / 2, y: PAD_TOP2 + canvasH - 12, fontSize: 13, fontWeight: 700, textAnchor: "middle", fill: quadrantAccent.bottomRight, children: data.quadrantLabels.bottomRight }),
|
|
7911
|
+
/* @__PURE__ */ jsxRuntime.jsxs("text", { x: cx, y: PAD_TOP2 - 12, fontSize: 12, fontWeight: 700, textAnchor: "middle", fill: "var(--cdl-text-dim, #5a6270)", children: [
|
|
7905
7912
|
"\u2191 ",
|
|
7906
7913
|
data.yAxis.top
|
|
7907
7914
|
] }),
|
|
7908
|
-
/* @__PURE__ */ jsxRuntime.jsxs("text", { x: cx, y:
|
|
7915
|
+
/* @__PURE__ */ jsxRuntime.jsxs("text", { x: cx, y: PAD_TOP2 + canvasH + 24, fontSize: 12, fontWeight: 700, textAnchor: "middle", fill: "var(--cdl-text-dim, #5a6270)", children: [
|
|
7909
7916
|
"\u2193 ",
|
|
7910
7917
|
data.yAxis.bottom
|
|
7911
7918
|
] }),
|
|
7912
|
-
/* @__PURE__ */ jsxRuntime.jsxs("text", { x:
|
|
7919
|
+
/* @__PURE__ */ jsxRuntime.jsxs("text", { x: PAD_LEFT2 - 12, y: cy + 4, fontSize: AXIS_LABEL_FONT, fontWeight: 700, textAnchor: "end", fill: "var(--cdl-text-dim, #5a6270)", children: [
|
|
7913
7920
|
"\u2190 ",
|
|
7914
7921
|
data.xAxis.left
|
|
7915
7922
|
] }),
|
|
7916
|
-
/* @__PURE__ */ jsxRuntime.jsxs("text", { x:
|
|
7923
|
+
/* @__PURE__ */ jsxRuntime.jsxs("text", { x: PAD_LEFT2 + canvasW + 12, y: cy + 4, fontSize: AXIS_LABEL_FONT, fontWeight: 700, textAnchor: "start", fill: "var(--cdl-text-dim, #5a6270)", children: [
|
|
7917
7924
|
data.xAxis.right,
|
|
7918
7925
|
" \u2192"
|
|
7919
7926
|
] }),
|
|
@@ -7922,8 +7929,8 @@ function QuadrantNode({
|
|
|
7922
7929
|
if (items.length === 0) return null;
|
|
7923
7930
|
const isLeft = q === "topLeft" || q === "bottomLeft";
|
|
7924
7931
|
const isTop = q === "topLeft" || q === "topRight";
|
|
7925
|
-
const qxStart = (isLeft ?
|
|
7926
|
-
const qyStart = (isTop ?
|
|
7932
|
+
const qxStart = (isLeft ? PAD_LEFT2 : cx) + 18;
|
|
7933
|
+
const qyStart = (isTop ? PAD_TOP2 : cy) + 44;
|
|
7927
7934
|
const qHalfW = halfW - 36;
|
|
7928
7935
|
const \u67A0\u306E\u4F59\u5730 = qHalfW;
|
|
7929
7936
|
if (\u67A0\u306E\u4F59\u5730 <= 0) return null;
|
|
@@ -7982,6 +7989,24 @@ function \u7BB1\u306E\u6587\u5B57({
|
|
|
7982
7989
|
r.\u5F79\u5272
|
|
7983
7990
|
));
|
|
7984
7991
|
}
|
|
7992
|
+
var PAD_TOP = 40;
|
|
7993
|
+
var PAD_RIGHT = 24;
|
|
7994
|
+
var PAD_BOTTOM = 40;
|
|
7995
|
+
var PAD_LEFT = 24;
|
|
7996
|
+
function \u6728\u306E\u4E2D\u8EAB(node, stateValues = {}) {
|
|
7997
|
+
const treeNodes = resolveTreeData(node.treeData ?? [], stateValues);
|
|
7998
|
+
return computeTreeLayout(
|
|
7999
|
+
treeNodes,
|
|
8000
|
+
node.w - PAD_LEFT - PAD_RIGHT,
|
|
8001
|
+
node.h - PAD_TOP - PAD_BOTTOM
|
|
8002
|
+
);
|
|
8003
|
+
}
|
|
8004
|
+
function \u6728\u306E\u884C(n) {
|
|
8005
|
+
return [
|
|
8006
|
+
{ \u5F79\u5272: "title", text: n.title, fontSize: n.depth === 0 ? 13 : 12 },
|
|
8007
|
+
{ \u5F79\u5272: "subtitle", text: n.subtitle ?? "", fontSize: 9 }
|
|
8008
|
+
];
|
|
8009
|
+
}
|
|
7985
8010
|
function TreeNode({
|
|
7986
8011
|
node,
|
|
7987
8012
|
active,
|
|
@@ -7991,15 +8016,8 @@ function TreeNode({
|
|
|
7991
8016
|
}) {
|
|
7992
8017
|
const x0 = node.cx - node.w / 2;
|
|
7993
8018
|
const y0 = node.cy - node.h / 2;
|
|
7994
|
-
const treeNodes = resolveTreeData(node.treeData ?? [], stateValues);
|
|
7995
8019
|
const gradientId = `tree-root-grad-${node.id}`;
|
|
7996
|
-
const
|
|
7997
|
-
const PAD_RIGHT = 24;
|
|
7998
|
-
const PAD_BOTTOM = 40;
|
|
7999
|
-
const PAD_LEFT = 24;
|
|
8000
|
-
const canvasW = node.w - PAD_LEFT - PAD_RIGHT;
|
|
8001
|
-
const canvasH = node.h - PAD_TOP - PAD_BOTTOM;
|
|
8002
|
-
const layout2 = computeTreeLayout(treeNodes, canvasW, canvasH);
|
|
8020
|
+
const layout2 = \u6728\u306E\u4E2D\u8EAB(node, stateValues);
|
|
8003
8021
|
const \u4F38\u3073 = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
|
|
8004
8022
|
const \u6700\u5927\u6DF1\u3055 = layout2.nodes.reduce((m, n) => Math.max(m, n.depth), 0);
|
|
8005
8023
|
const \u7BB1\u304C\u51FA\u308B = (\u6DF1\u3055) => !drawing || \u6BB5\u306E\u4F38\u3073(\u4F38\u3073, \u6DF1\u3055, \u6700\u5927\u6DF1\u3055) >= 1;
|
|
@@ -8052,16 +8070,11 @@ function TreeNode({
|
|
|
8052
8070
|
if (!\u7BB1\u304C\u51FA\u308B(n.depth)) return null;
|
|
8053
8071
|
const accent = depthColors[Math.min(n.depth, depthColors.length - 1)] ?? depthColors[0];
|
|
8054
8072
|
const isRoot = n.depth === 0;
|
|
8055
|
-
const \
|
|
8056
|
-
|
|
8057
|
-
{ \u5F79\u5272: "title", text: n.title, fontSize: isRoot ? 13 : 12 },
|
|
8058
|
-
{ \u5F79\u5272: "subtitle", text: n.subtitle ?? "", fontSize: 9 }
|
|
8059
|
-
],
|
|
8060
|
-
n.w,
|
|
8061
|
-
n.h
|
|
8062
|
-
);
|
|
8073
|
+
const \u6750\u6599 = \u6728\u306E\u884C(n);
|
|
8074
|
+
const \u884C = \u7BB1\u306B\u7A4D\u3080(\u6750\u6599, n.w, n.h);
|
|
8063
8075
|
const \u88DC\u8DB3\u3042\u308A = (n.subtitle ?? "").trim() !== "";
|
|
8064
|
-
const \
|
|
8076
|
+
const \u540D\u524D = \u6750\u6599[0];
|
|
8077
|
+
const \u53CE\u3081\u305F\u540D\u524D = \u88DC\u8DB3\u3042\u308A ? void 0 : \u5E45\u306B\u53CE\u3081\u308B(\u540D\u524D.text, \u540D\u524D.fontSize, \u4F7F\u3048\u308B\u5E45(n.w));
|
|
8065
8078
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
8066
8079
|
"g",
|
|
8067
8080
|
{
|
|
@@ -8267,12 +8280,12 @@ function UserJourneyNode({
|
|
|
8267
8280
|
const x0 = node.cx - node.w / 2;
|
|
8268
8281
|
const y0 = node.cy - node.h / 2;
|
|
8269
8282
|
const steps = resolveJourneyData(node.journeyData ?? [], stateValues);
|
|
8270
|
-
const
|
|
8271
|
-
const
|
|
8272
|
-
const
|
|
8273
|
-
const
|
|
8274
|
-
const canvasW = node.w -
|
|
8275
|
-
const canvasH = node.h -
|
|
8283
|
+
const PAD_TOP2 = 20;
|
|
8284
|
+
const PAD_RIGHT2 = 32;
|
|
8285
|
+
const PAD_BOTTOM2 = 108;
|
|
8286
|
+
const PAD_LEFT2 = 108;
|
|
8287
|
+
const canvasW = node.w - PAD_LEFT2 - PAD_RIGHT2;
|
|
8288
|
+
const canvasH = node.h - PAD_TOP2 - PAD_BOTTOM2;
|
|
8276
8289
|
const emotionRows = ["delighted", "happy", "neutral", "frustrated", "angry"];
|
|
8277
8290
|
const emotionScore = {
|
|
8278
8291
|
delighted: 4,
|
|
@@ -8297,8 +8310,8 @@ function UserJourneyNode({
|
|
|
8297
8310
|
};
|
|
8298
8311
|
const rowH = canvasH / 5;
|
|
8299
8312
|
const colW = canvasW / Math.max(steps.length, 1);
|
|
8300
|
-
const xAt = (idx) =>
|
|
8301
|
-
const yAt = (emotion) =>
|
|
8313
|
+
const xAt = (idx) => PAD_LEFT2 + (steps.length <= 1 ? canvasW / 2 : colW / 2 + colW * idx);
|
|
8314
|
+
const yAt = (emotion) => PAD_TOP2 + rowH / 2 + (4 - emotionScore[emotion]) * rowH;
|
|
8302
8315
|
const pts = steps.map((s, i) => ({ x: xAt(i), y: yAt(s.emotion) }));
|
|
8303
8316
|
const \u4F38\u3073 = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
|
|
8304
8317
|
const \u6BB5\u307E\u3067\u306E\u5272\u5408 = \u30D9\u30B8\u30A8\u306E\u7D2F\u7A4D\u5272\u5408(pts, (\u524D, \u5F8C) => {
|
|
@@ -8332,8 +8345,8 @@ function UserJourneyNode({
|
|
|
8332
8345
|
"rect",
|
|
8333
8346
|
{
|
|
8334
8347
|
"data-cdl-role": "journey-band",
|
|
8335
|
-
x:
|
|
8336
|
-
y:
|
|
8348
|
+
x: PAD_LEFT2,
|
|
8349
|
+
y: PAD_TOP2 + i * rowH,
|
|
8337
8350
|
width: canvasW,
|
|
8338
8351
|
height: rowH,
|
|
8339
8352
|
fill: emotionColor[e],
|
|
@@ -8343,8 +8356,8 @@ function UserJourneyNode({
|
|
|
8343
8356
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
8344
8357
|
"text",
|
|
8345
8358
|
{
|
|
8346
|
-
x:
|
|
8347
|
-
y:
|
|
8359
|
+
x: PAD_LEFT2 - 84,
|
|
8360
|
+
y: PAD_TOP2 + i * rowH + rowH / 2 + 5,
|
|
8348
8361
|
fontSize: 18,
|
|
8349
8362
|
textAnchor: "middle",
|
|
8350
8363
|
children: emotionEmoji[e]
|
|
@@ -8353,8 +8366,8 @@ function UserJourneyNode({
|
|
|
8353
8366
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
8354
8367
|
"text",
|
|
8355
8368
|
{
|
|
8356
|
-
x:
|
|
8357
|
-
y:
|
|
8369
|
+
x: PAD_LEFT2 - 14,
|
|
8370
|
+
y: PAD_TOP2 + i * rowH + rowH / 2 + 4,
|
|
8358
8371
|
fontSize: 12,
|
|
8359
8372
|
fontWeight: 600,
|
|
8360
8373
|
textAnchor: "end",
|
|
@@ -8368,9 +8381,9 @@ function UserJourneyNode({
|
|
|
8368
8381
|
{
|
|
8369
8382
|
"data-cdl-role": "node-column-divider",
|
|
8370
8383
|
x1: xAt(idx),
|
|
8371
|
-
y1:
|
|
8384
|
+
y1: PAD_TOP2,
|
|
8372
8385
|
x2: xAt(idx),
|
|
8373
|
-
y2:
|
|
8386
|
+
y2: PAD_TOP2 + canvasH,
|
|
8374
8387
|
stroke: "var(--cdl-row-divider, #7e848e)",
|
|
8375
8388
|
strokeDasharray: "4 4"
|
|
8376
8389
|
},
|
|
@@ -8434,7 +8447,7 @@ function UserJourneyNode({
|
|
|
8434
8447
|
"text",
|
|
8435
8448
|
{
|
|
8436
8449
|
x: xAt(idx),
|
|
8437
|
-
y:
|
|
8450
|
+
y: PAD_TOP2 + canvasH + 24,
|
|
8438
8451
|
fontSize: 12,
|
|
8439
8452
|
fontWeight: 700,
|
|
8440
8453
|
textAnchor: "middle",
|
|
@@ -8448,7 +8461,7 @@ function UserJourneyNode({
|
|
|
8448
8461
|
{
|
|
8449
8462
|
"data-cdl-role": "journey-chip",
|
|
8450
8463
|
x: xAt(idx) - 40,
|
|
8451
|
-
y:
|
|
8464
|
+
y: PAD_TOP2 + canvasH + 34,
|
|
8452
8465
|
width: 80,
|
|
8453
8466
|
height: 20,
|
|
8454
8467
|
rx: 10,
|
|
@@ -8463,7 +8476,7 @@ function UserJourneyNode({
|
|
|
8463
8476
|
"text",
|
|
8464
8477
|
{
|
|
8465
8478
|
x: xAt(idx),
|
|
8466
|
-
y:
|
|
8479
|
+
y: PAD_TOP2 + canvasH + 48,
|
|
8467
8480
|
fontSize: 10,
|
|
8468
8481
|
fontWeight: 600,
|
|
8469
8482
|
textAnchor: "middle",
|
|
@@ -8477,7 +8490,7 @@ function UserJourneyNode({
|
|
|
8477
8490
|
"rect",
|
|
8478
8491
|
{
|
|
8479
8492
|
x: xAt(idx) - 55,
|
|
8480
|
-
y:
|
|
8493
|
+
y: PAD_TOP2 + canvasH + 62,
|
|
8481
8494
|
width: 110,
|
|
8482
8495
|
height: 26,
|
|
8483
8496
|
rx: 13,
|
|
@@ -8490,7 +8503,7 @@ function UserJourneyNode({
|
|
|
8490
8503
|
"text",
|
|
8491
8504
|
{
|
|
8492
8505
|
x: xAt(idx),
|
|
8493
|
-
y:
|
|
8506
|
+
y: PAD_TOP2 + canvasH + 79,
|
|
8494
8507
|
fontSize: 10,
|
|
8495
8508
|
textAnchor: "middle",
|
|
8496
8509
|
fill: "var(--cdl-note-text, #7a5320)",
|
|
@@ -21754,6 +21767,7 @@ function emptyCounts() {
|
|
|
21754
21767
|
"node-inside-viewbox": 0,
|
|
21755
21768
|
"node-inside-lane": 0,
|
|
21756
21769
|
"shape-label-dropped": 0,
|
|
21770
|
+
"box-line-dropped": 0,
|
|
21757
21771
|
"edge-inside-viewbox": 0,
|
|
21758
21772
|
"lane-label-inside-viewbox": 0,
|
|
21759
21773
|
"lane-label-overlap": 0,
|
|
@@ -21771,6 +21785,12 @@ function emptyCounts() {
|
|
|
21771
21785
|
"validation-interrupted": 0
|
|
21772
21786
|
};
|
|
21773
21787
|
}
|
|
21788
|
+
function \u7A4D\u3080\u7BB1\u3092\u96C6\u3081\u308B(n) {
|
|
21789
|
+
const \u7BB1 = (b, \u884C) => ({ \u884C, w: b.w, h: b.h });
|
|
21790
|
+
if (n.kind === "tree-hierarchy") return \u6728\u306E\u4E2D\u8EAB(n).nodes.map((b) => \u7BB1(b, \u6728\u306E\u884C(b)));
|
|
21791
|
+
if (n.kind === "mind-map") return (\u653E\u5C04\u306E\u4E2D\u8EAB(n)?.nodes ?? []).map((b) => \u7BB1(b, \u653E\u5C04\u306E\u884C(b)));
|
|
21792
|
+
return [];
|
|
21793
|
+
}
|
|
21774
21794
|
function measureStubOut(segs) {
|
|
21775
21795
|
const first = segs[0];
|
|
21776
21796
|
const dx0 = first.x2 - first.x1;
|
|
@@ -22673,6 +22693,31 @@ function runAxes(laid, diag, violations, counts, push, profile, skippedAxes) {
|
|
|
22673
22693
|
"warn"
|
|
22674
22694
|
);
|
|
22675
22695
|
}
|
|
22696
|
+
for (const n of laid.nodes) {
|
|
22697
|
+
const \u7BB1 = \u7A4D\u3080\u7BB1\u3092\u96C6\u3081\u308B(n);
|
|
22698
|
+
if (\u7BB1.length === 0) continue;
|
|
22699
|
+
let \u5BFE\u8C61 = 0;
|
|
22700
|
+
const \u843D\u3061\u305F = [];
|
|
22701
|
+
for (const b of \u7BB1) {
|
|
22702
|
+
const \u5BA3\u8A00 = b.\u884C.slice(1).filter((r) => r.text.trim() !== "");
|
|
22703
|
+
if (\u5BA3\u8A00.length === 0) continue;
|
|
22704
|
+
\u5BFE\u8C61 += 1;
|
|
22705
|
+
const \u6B8B\u3063\u305F = new Set(\u7BB1\u306B\u7A4D\u3080(b.\u884C, b.w, b.h).map((r) => r.\u5F79\u5272));
|
|
22706
|
+
if (\u5BA3\u8A00.every((r) => \u6B8B\u3063\u305F.has(r.\u5F79\u5272))) continue;
|
|
22707
|
+
\u843D\u3061\u305F.push({ title: b.\u884C[0]?.text ?? "", h: b.h });
|
|
22708
|
+
}
|
|
22709
|
+
if (\u843D\u3061\u305F.length === 0) continue;
|
|
22710
|
+
const \u540D\u524D = \u843D\u3061\u305F.map((d) => `"${d.title}"`);
|
|
22711
|
+
const \u898B\u305B\u308B = \u540D\u524D.slice(0, 5).join(" / ");
|
|
22712
|
+
const \u6B8B\u308A = \u540D\u524D.length > 5 ? ` \u4ED6 ${\u540D\u524D.length - 5} \u4EF6` : "";
|
|
22713
|
+
const \u4F4E = Math.min(...\u843D\u3061\u305F.map((d) => d.h)).toFixed(1);
|
|
22714
|
+
const \u9AD8 = Math.max(...\u843D\u3061\u305F.map((d) => d.h)).toFixed(1);
|
|
22715
|
+
push(
|
|
22716
|
+
"box-line-dropped",
|
|
22717
|
+
`node "${n.id}" (${n.kind}) \u306F\u7BB1\u304C\u4F4E\u304F\u3001 \u66F8\u3044\u305F\u88DC\u8DB3\u304C ${\u843D\u3061\u305F.length}/${\u5BFE\u8C61} \u7BB1\u3067\u63CF\u304B\u308C\u306A\u3044 (${\u898B\u305B\u308B}${\u6B8B\u308A}\u3001 \u7BB1\u306E\u9AD8\u3055 ${\u4F4E === \u9AD8 ? \u4F4E : `${\u4F4E}\u301C${\u9AD8}`})\u3002 \u56F3\u3092\u9AD8\u304F\u3059\u308B\u304B\u6BB5\u3092\u6E1B\u3089\u3059\u304B\u3001 \u88DC\u8DB3\u3092\u6D88\u3059`,
|
|
22718
|
+
"warn"
|
|
22719
|
+
);
|
|
22720
|
+
}
|
|
22676
22721
|
for (const e of laid.edges) {
|
|
22677
22722
|
const segs = flattenPathSegments(extractPathSegments(e.d));
|
|
22678
22723
|
if (segs.length === 0) continue;
|