@antv/infographic 0.2.14 → 0.2.16
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/README.md +39 -5
- package/README.zh-CN.md +39 -5
- package/dist/infographic.min.js +168 -166
- package/dist/infographic.min.js.map +1 -1
- package/esm/designs/structures/index.d.ts +1 -0
- package/esm/designs/structures/index.js +1 -0
- package/esm/designs/structures/relation-dagre-flow.js +4 -139
- package/esm/designs/structures/sequence-interaction.d.ts +54 -0
- package/esm/designs/structures/sequence-interaction.js +461 -0
- package/esm/designs/structures/sequence-timeline.d.ts +1 -0
- package/esm/designs/structures/sequence-timeline.js +4 -2
- package/esm/designs/utils/geometry.d.ts +44 -0
- package/esm/designs/utils/geometry.js +244 -0
- package/esm/designs/utils/index.d.ts +1 -0
- package/esm/designs/utils/index.js +1 -0
- package/esm/editor/managers/sync-registry.d.ts +2 -1
- package/esm/editor/types/editor.d.ts +2 -1
- package/esm/editor/types/sync.d.ts +2 -1
- package/esm/editor/utils/object.js +46 -39
- package/esm/exporter/png.js +2 -2
- package/esm/exporter/svg.js +9 -1
- package/esm/exporter/types.d.ts +10 -0
- package/esm/options/types.d.ts +6 -0
- package/esm/runtime/Infographic.js +20 -7
- package/esm/syntax/index.js +40 -20
- package/esm/syntax/parser.js +80 -3
- package/esm/syntax/relations.js +26 -2
- package/esm/syntax/schema.js +1 -0
- package/esm/templates/built-in.js +5 -4
- package/esm/templates/sequence-interaction.d.ts +2 -0
- package/esm/templates/sequence-interaction.js +76 -0
- package/esm/types/data.d.ts +1 -0
- package/esm/utils/index.d.ts +1 -0
- package/esm/utils/index.js +1 -0
- package/esm/utils/measure-text.js +31 -3
- package/esm/utils/types.d.ts +16 -0
- package/esm/utils/types.js +12 -0
- package/esm/version.d.ts +1 -1
- package/esm/version.js +1 -1
- package/lib/designs/structures/index.d.ts +1 -0
- package/lib/designs/structures/index.js +1 -0
- package/lib/designs/structures/relation-dagre-flow.js +5 -140
- package/lib/designs/structures/sequence-interaction.d.ts +54 -0
- package/lib/designs/structures/sequence-interaction.js +465 -0
- package/lib/designs/structures/sequence-timeline.d.ts +1 -0
- package/lib/designs/structures/sequence-timeline.js +4 -2
- package/lib/designs/utils/geometry.d.ts +44 -0
- package/lib/designs/utils/geometry.js +256 -0
- package/lib/designs/utils/index.d.ts +1 -0
- package/lib/designs/utils/index.js +1 -0
- package/lib/editor/managers/sync-registry.d.ts +2 -1
- package/lib/editor/types/editor.d.ts +2 -1
- package/lib/editor/types/sync.d.ts +2 -1
- package/lib/editor/utils/object.js +45 -38
- package/lib/exporter/png.js +2 -2
- package/lib/exporter/svg.js +9 -1
- package/lib/exporter/types.d.ts +10 -0
- package/lib/options/types.d.ts +6 -0
- package/lib/runtime/Infographic.js +19 -6
- package/lib/syntax/index.js +40 -20
- package/lib/syntax/parser.js +80 -3
- package/lib/syntax/relations.js +26 -2
- package/lib/syntax/schema.js +1 -0
- package/lib/templates/built-in.js +5 -4
- package/lib/templates/sequence-interaction.d.ts +2 -0
- package/lib/templates/sequence-interaction.js +79 -0
- package/lib/types/data.d.ts +1 -0
- package/lib/utils/index.d.ts +1 -0
- package/lib/utils/index.js +1 -0
- package/lib/utils/measure-text.js +30 -2
- package/lib/utils/types.d.ts +16 -0
- package/lib/utils/types.js +13 -0
- package/lib/version.d.ts +1 -1
- package/lib/version.js +1 -1
- package/package.json +1 -1
- package/src/designs/structures/index.ts +1 -0
- package/src/designs/structures/relation-dagre-flow.tsx +14 -178
- package/src/designs/structures/sequence-interaction.tsx +931 -0
- package/src/designs/structures/sequence-timeline.tsx +18 -15
- package/src/designs/utils/geometry.tsx +315 -0
- package/src/designs/utils/index.ts +1 -0
- package/src/editor/managers/sync-registry.ts +2 -1
- package/src/editor/types/editor.ts +2 -1
- package/src/editor/types/sync.ts +3 -1
- package/src/editor/utils/object.ts +50 -40
- package/src/exporter/png.ts +3 -2
- package/src/exporter/svg.ts +14 -1
- package/src/exporter/types.ts +10 -0
- package/src/options/types.ts +7 -0
- package/src/runtime/Infographic.tsx +27 -17
- package/src/syntax/index.ts +51 -18
- package/src/syntax/parser.ts +101 -3
- package/src/syntax/relations.ts +29 -2
- package/src/syntax/schema.ts +1 -0
- package/src/templates/built-in.ts +4 -2
- package/src/templates/sequence-interaction.ts +101 -0
- package/src/types/data.ts +1 -0
- package/src/utils/index.ts +1 -0
- package/src/utils/measure-text.ts +35 -3
- package/src/utils/types.ts +61 -0
- package/src/version.ts +1 -1
|
@@ -0,0 +1,244 @@
|
|
|
1
|
+
import { jsx as _jsx } from "../../jsx-runtime.js";
|
|
2
|
+
import { Path, Polygon } from '../../jsx/index.js';
|
|
3
|
+
export const getMidPoint = (points) => {
|
|
4
|
+
if (points.length === 0)
|
|
5
|
+
return null;
|
|
6
|
+
if (points.length === 1)
|
|
7
|
+
return points[0];
|
|
8
|
+
let total = 0;
|
|
9
|
+
const segments = [];
|
|
10
|
+
for (let i = 0; i < points.length - 1; i += 1) {
|
|
11
|
+
const start = points[i];
|
|
12
|
+
const end = points[i + 1];
|
|
13
|
+
const length = Math.hypot(end[0] - start[0], end[1] - start[1]);
|
|
14
|
+
segments.push({ length, start, end });
|
|
15
|
+
total += length;
|
|
16
|
+
}
|
|
17
|
+
if (total === 0)
|
|
18
|
+
return points[0];
|
|
19
|
+
let target = total / 2;
|
|
20
|
+
for (let i = 0; i < segments.length; i += 1) {
|
|
21
|
+
const segment = segments[i];
|
|
22
|
+
if (target <= segment.length || i === segments.length - 1) {
|
|
23
|
+
const ratio = segment.length === 0
|
|
24
|
+
? 0
|
|
25
|
+
: Math.max(0, Math.min(1, target / segment.length));
|
|
26
|
+
return [
|
|
27
|
+
segment.start[0] + (segment.end[0] - segment.start[0]) * ratio,
|
|
28
|
+
segment.start[1] + (segment.end[1] - segment.start[1]) * ratio,
|
|
29
|
+
];
|
|
30
|
+
}
|
|
31
|
+
target -= segment.length;
|
|
32
|
+
}
|
|
33
|
+
return points[Math.floor(points.length / 2)];
|
|
34
|
+
};
|
|
35
|
+
export const createStraightPath = (points, dx, dy) => points
|
|
36
|
+
.map(([x, y], index) => {
|
|
37
|
+
const prefix = index === 0 ? 'M' : 'L';
|
|
38
|
+
return `${prefix} ${x + dx} ${y + dy}`;
|
|
39
|
+
})
|
|
40
|
+
.join(' ');
|
|
41
|
+
export const createRoundedPath = (points, radius, dx, dy) => {
|
|
42
|
+
if (points.length < 2)
|
|
43
|
+
return '';
|
|
44
|
+
const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
|
|
45
|
+
const toPoint = ([x, y]) => ({
|
|
46
|
+
x: x + dx,
|
|
47
|
+
y: y + dy,
|
|
48
|
+
});
|
|
49
|
+
const output = [];
|
|
50
|
+
const first = toPoint(points[0]);
|
|
51
|
+
output.push(`M ${first.x} ${first.y}`);
|
|
52
|
+
if (points.length === 2) {
|
|
53
|
+
const last = toPoint(points[1]);
|
|
54
|
+
output.push(`L ${last.x} ${last.y}`);
|
|
55
|
+
return output.join(' ');
|
|
56
|
+
}
|
|
57
|
+
for (let i = 1; i < points.length - 1; i += 1) {
|
|
58
|
+
const prev = points[i - 1];
|
|
59
|
+
const curr = points[i];
|
|
60
|
+
const next = points[i + 1];
|
|
61
|
+
const v0x = curr[0] - prev[0];
|
|
62
|
+
const v0y = curr[1] - prev[1];
|
|
63
|
+
const v1x = next[0] - curr[0];
|
|
64
|
+
const v1y = next[1] - curr[1];
|
|
65
|
+
const d0 = Math.hypot(v0x, v0y);
|
|
66
|
+
const d1 = Math.hypot(v1x, v1y);
|
|
67
|
+
if (d0 === 0 || d1 === 0) {
|
|
68
|
+
const currPoint = toPoint(curr);
|
|
69
|
+
output.push(`L ${currPoint.x} ${currPoint.y}`);
|
|
70
|
+
continue;
|
|
71
|
+
}
|
|
72
|
+
const r = clamp(radius, 0, Math.min(d0, d1) / 2);
|
|
73
|
+
if (r === 0) {
|
|
74
|
+
const currPoint = toPoint(curr);
|
|
75
|
+
output.push(`L ${currPoint.x} ${currPoint.y}`);
|
|
76
|
+
continue;
|
|
77
|
+
}
|
|
78
|
+
const u0x = v0x / d0;
|
|
79
|
+
const u0y = v0y / d0;
|
|
80
|
+
const u1x = v1x / d1;
|
|
81
|
+
const u1y = v1y / d1;
|
|
82
|
+
const start = toPoint([curr[0] - u0x * r, curr[1] - u0y * r]);
|
|
83
|
+
const end = toPoint([curr[0] + u1x * r, curr[1] + u1y * r]);
|
|
84
|
+
output.push(`L ${start.x} ${start.y}`);
|
|
85
|
+
const currPoint = toPoint(curr);
|
|
86
|
+
output.push(`Q ${currPoint.x} ${currPoint.y} ${end.x} ${end.y}`);
|
|
87
|
+
}
|
|
88
|
+
const last = toPoint(points[points.length - 1]);
|
|
89
|
+
output.push(`L ${last.x} ${last.y}`);
|
|
90
|
+
return output.join(' ');
|
|
91
|
+
};
|
|
92
|
+
export const createArrowElements = (x, y, angle, type, fillColor, edgeWidth, arrowSize) => {
|
|
93
|
+
const ux = Math.cos(angle);
|
|
94
|
+
const uy = Math.sin(angle);
|
|
95
|
+
const px = -uy;
|
|
96
|
+
const py = ux;
|
|
97
|
+
const length = arrowSize;
|
|
98
|
+
const halfWidth = arrowSize * 0.55;
|
|
99
|
+
if (type === 'arrow') {
|
|
100
|
+
const leftX = x - ux * length + px * halfWidth;
|
|
101
|
+
const leftY = y - uy * length + py * halfWidth;
|
|
102
|
+
const rightX = x - ux * length - px * halfWidth;
|
|
103
|
+
const rightY = y - uy * length - py * halfWidth;
|
|
104
|
+
return [
|
|
105
|
+
_jsx(Path, { d: `M ${leftX} ${leftY} L ${x} ${y} L ${rightX} ${rightY}`, stroke: fillColor, strokeWidth: Math.max(1.5, edgeWidth), strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }),
|
|
106
|
+
];
|
|
107
|
+
}
|
|
108
|
+
if (type === 'diamond') {
|
|
109
|
+
const diamondLength = length * 1.25;
|
|
110
|
+
const diamondWidth = halfWidth * 0.75;
|
|
111
|
+
const midX = x - ux * diamondLength * 0.5;
|
|
112
|
+
const midY = y - uy * diamondLength * 0.5;
|
|
113
|
+
const diamondPoints = [
|
|
114
|
+
{ x, y },
|
|
115
|
+
{ x: midX + px * diamondWidth, y: midY + py * diamondWidth },
|
|
116
|
+
{ x: x - ux * diamondLength, y: y - uy * diamondLength },
|
|
117
|
+
{ x: midX - px * diamondWidth, y: midY - py * diamondWidth },
|
|
118
|
+
];
|
|
119
|
+
return [
|
|
120
|
+
_jsx(Polygon, { points: diamondPoints, fill: fillColor, stroke: fillColor, strokeWidth: Math.max(1, edgeWidth * 0.8) }),
|
|
121
|
+
];
|
|
122
|
+
}
|
|
123
|
+
const trianglePoints = [
|
|
124
|
+
{ x, y },
|
|
125
|
+
{
|
|
126
|
+
x: x - ux * length + px * halfWidth,
|
|
127
|
+
y: y - uy * length + py * halfWidth,
|
|
128
|
+
},
|
|
129
|
+
{
|
|
130
|
+
x: x - ux * length - px * halfWidth,
|
|
131
|
+
y: y - uy * length - py * halfWidth,
|
|
132
|
+
},
|
|
133
|
+
];
|
|
134
|
+
return [
|
|
135
|
+
_jsx(Polygon, { points: trianglePoints, fill: fillColor, stroke: fillColor, strokeWidth: Math.max(1, edgeWidth * 0.8) }),
|
|
136
|
+
];
|
|
137
|
+
};
|
|
138
|
+
// LT: Left Top (radio), LC: Left Center (1/2), LB: Left Bottom (1 - radio)
|
|
139
|
+
// RT: Right Top (radio), RC: Right Center (1/2), RB: Right Bottom (1 - radio)
|
|
140
|
+
export const getNodesAnchors = (node) => {
|
|
141
|
+
const { x, y, width, height, radio = 0.25 } = node;
|
|
142
|
+
const q1H = height * radio;
|
|
143
|
+
const halfH = height * 0.5;
|
|
144
|
+
const q3H = height * (1 - radio);
|
|
145
|
+
return {
|
|
146
|
+
LT: { x, y: y + q1H },
|
|
147
|
+
LC: { x, y: y + halfH },
|
|
148
|
+
LB: { x, y: y + q3H },
|
|
149
|
+
RT: { x: x + width, y: y + q1H },
|
|
150
|
+
RC: { x: x + width, y: y + halfH },
|
|
151
|
+
RB: { x: x + width, y: y + q3H },
|
|
152
|
+
};
|
|
153
|
+
};
|
|
154
|
+
export const getTangentAngle = (points, t) => {
|
|
155
|
+
const len = points.length;
|
|
156
|
+
// Cubic Bezier (Self loop)
|
|
157
|
+
if (len === 4) {
|
|
158
|
+
const p0 = points[0], p1 = points[1], p2 = points[2], p3 = points[3];
|
|
159
|
+
if (t === 0) {
|
|
160
|
+
return Math.atan2(p1[1] - p0[1], p1[0] - p0[0]);
|
|
161
|
+
}
|
|
162
|
+
else {
|
|
163
|
+
return Math.atan2(p3[1] - p2[1], p3[0] - p2[0]);
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
// Quad Bezier (Curved)
|
|
167
|
+
if (len === 3) {
|
|
168
|
+
const p0 = points[0], p1 = points[1], p2 = points[2];
|
|
169
|
+
if (t === 0) {
|
|
170
|
+
return Math.atan2(p1[1] - p0[1], p1[0] - p0[0]);
|
|
171
|
+
}
|
|
172
|
+
else {
|
|
173
|
+
return Math.atan2(p2[1] - p1[1], p2[0] - p1[0]);
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
// Line
|
|
177
|
+
if (len === 2) {
|
|
178
|
+
const p0 = points[0], p1 = points[1];
|
|
179
|
+
const angle = Math.atan2(p1[1] - p0[1], p1[0] - p0[0]);
|
|
180
|
+
return angle;
|
|
181
|
+
}
|
|
182
|
+
return 0;
|
|
183
|
+
};
|
|
184
|
+
/**
|
|
185
|
+
* 计算贝塞尔曲线上任意 t (0-1) 位置的点
|
|
186
|
+
*/
|
|
187
|
+
export const getPointAtT = (points, t = 0.5) => {
|
|
188
|
+
const len = points.length;
|
|
189
|
+
if (len === 4) {
|
|
190
|
+
const [p0, p1, p2, p3] = points;
|
|
191
|
+
const mt = 1 - t;
|
|
192
|
+
// B(t) = (1-t)^3*P0 + 3(1-t)^2*t*P1 + 3(1-t)*t^2*P2 + t^3*P3
|
|
193
|
+
return [
|
|
194
|
+
Math.pow(mt, 3) * p0[0] +
|
|
195
|
+
3 * Math.pow(mt, 2) * t * p1[0] +
|
|
196
|
+
3 * mt * Math.pow(t, 2) * p2[0] +
|
|
197
|
+
Math.pow(t, 3) * p3[0],
|
|
198
|
+
Math.pow(mt, 3) * p0[1] +
|
|
199
|
+
3 * Math.pow(mt, 2) * t * p1[1] +
|
|
200
|
+
3 * mt * Math.pow(t, 2) * p2[1] +
|
|
201
|
+
Math.pow(t, 3) * p3[1],
|
|
202
|
+
];
|
|
203
|
+
}
|
|
204
|
+
if (len === 3) {
|
|
205
|
+
const [p0, p1, p2] = points;
|
|
206
|
+
const mt = 1 - t;
|
|
207
|
+
// B(t) = (1-t)^2*P0 + 2(1-t)*t*P1 + t^2*P2
|
|
208
|
+
return [
|
|
209
|
+
Math.pow(mt, 2) * p0[0] + 2 * mt * t * p1[0] + Math.pow(t, 2) * p2[0],
|
|
210
|
+
Math.pow(mt, 2) * p0[1] + 2 * mt * t * p1[1] + Math.pow(t, 2) * p2[1],
|
|
211
|
+
];
|
|
212
|
+
}
|
|
213
|
+
if (len === 2) {
|
|
214
|
+
const [p0, p1] = points;
|
|
215
|
+
return [p0[0] + (p1[0] - p0[0]) * t, p0[1] + (p1[1] - p0[1]) * t];
|
|
216
|
+
}
|
|
217
|
+
return points[0] || [0, 0];
|
|
218
|
+
};
|
|
219
|
+
export const getLabelPosition = (points, selfLoopOffset = 10) => {
|
|
220
|
+
const len = points.length;
|
|
221
|
+
// 默认取中点
|
|
222
|
+
const labelPoint = getPointAtT(points);
|
|
223
|
+
if (len === 4) {
|
|
224
|
+
// 针对自连接(len=4)的特殊偏移处理
|
|
225
|
+
labelPoint[0] += selfLoopOffset;
|
|
226
|
+
}
|
|
227
|
+
return labelPoint;
|
|
228
|
+
};
|
|
229
|
+
export const getEdgePathD = (points) => {
|
|
230
|
+
const len = points.length;
|
|
231
|
+
if (len === 4) {
|
|
232
|
+
const [p0, p1, p2, p3] = points;
|
|
233
|
+
return `M ${p0[0]} ${p0[1]} C ${p1[0]} ${p1[1]} ${p2[0]} ${p2[1]} ${p3[0]} ${p3[1]}`;
|
|
234
|
+
}
|
|
235
|
+
if (len === 3) {
|
|
236
|
+
const [p0, p1, p2] = points;
|
|
237
|
+
return `M ${p0[0]} ${p0[1]} Q ${p1[0]} ${p1[1]} ${p2[0]} ${p2[1]}`;
|
|
238
|
+
}
|
|
239
|
+
if (len === 2) {
|
|
240
|
+
const [p0, p1] = points;
|
|
241
|
+
return `M ${p0[0]} ${p0[1]} L ${p1[0]} ${p1[1]}`;
|
|
242
|
+
}
|
|
243
|
+
return '';
|
|
244
|
+
};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { InfographicOptionPath } from '../../options';
|
|
1
2
|
import { ISyncRegistry, SyncHandler } from '../types';
|
|
2
3
|
type OptionsGetter = () => any;
|
|
3
4
|
export declare class SyncRegistry implements ISyncRegistry {
|
|
@@ -6,7 +7,7 @@ export declare class SyncRegistry implements ISyncRegistry {
|
|
|
6
7
|
private isDispatching;
|
|
7
8
|
private isDestroyed;
|
|
8
9
|
constructor(getOptions: OptionsGetter);
|
|
9
|
-
register(path: string, handler: SyncHandler, options?: {
|
|
10
|
+
register(path: InfographicOptionPath | (string & {}), handler: SyncHandler, options?: {
|
|
10
11
|
immediate?: boolean;
|
|
11
12
|
}): () => void;
|
|
12
13
|
trigger(path: string, newVal: any, oldVal: any): void;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { InfographicOptionPath } from '../../options';
|
|
1
2
|
import type { ICommandManager } from './command';
|
|
2
3
|
import type { IInteractionManager } from './interaction';
|
|
3
4
|
import type { IPluginManager } from './plugin';
|
|
@@ -10,7 +11,7 @@ export interface IEditor {
|
|
|
10
11
|
state: IStateManager;
|
|
11
12
|
syncRegistry: ISyncRegistry;
|
|
12
13
|
getDocument(): SVGSVGElement;
|
|
13
|
-
registerSync(path: string, handler: SyncHandler, options?: {
|
|
14
|
+
registerSync(path: InfographicOptionPath | (string & {}), handler: SyncHandler, options?: {
|
|
14
15
|
immediate?: boolean;
|
|
15
16
|
}): () => void;
|
|
16
17
|
destroy(): void;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { InfographicOptionPath } from '../../options';
|
|
1
2
|
/**
|
|
2
3
|
* Sync callback
|
|
3
4
|
* @param newValue The new value after modification
|
|
@@ -12,7 +13,7 @@ export interface ISyncRegistry {
|
|
|
12
13
|
* @param options.immediate Whether to execute immediately (used for view initialization)
|
|
13
14
|
* @returns unregister function
|
|
14
15
|
*/
|
|
15
|
-
register(path: string, handler: SyncHandler, options?: {
|
|
16
|
+
register(path: InfographicOptionPath | (string & {}), handler: SyncHandler, options?: {
|
|
16
17
|
immediate?: boolean;
|
|
17
18
|
}): () => void;
|
|
18
19
|
/**
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { cloneDeep,
|
|
1
|
+
import { cloneDeep, isEqual, isPlainObject } from 'lodash-es';
|
|
2
2
|
/**
|
|
3
3
|
* Recursively applies properties from 'source' to 'target' and collects changes.
|
|
4
4
|
*
|
|
@@ -9,62 +9,69 @@ import { cloneDeep, get, isEqual, isPlainObject } from 'lodash-es';
|
|
|
9
9
|
*/
|
|
10
10
|
export function applyOptionUpdates(target, source, basePath = '', options) {
|
|
11
11
|
const { bubbleUp = false, collector } = options !== null && options !== void 0 ? options : {};
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
// Bubbling notification: from the deepest parent path to the shallowest
|
|
16
|
-
if (bubbleUp && collector && parentPathsToNotify.size > 0) {
|
|
17
|
-
// Sort by path depth in descending order (deepest first)
|
|
18
|
-
const sortedPaths = Array.from(parentPathsToNotify).sort((a, b) => {
|
|
19
|
-
const depthA = a === '' ? 0 : a.split('.').length;
|
|
20
|
-
const depthB = b === '' ? 0 : b.split('.').length;
|
|
21
|
-
return depthB - depthA;
|
|
22
|
-
});
|
|
23
|
-
for (const parentPath of sortedPaths) {
|
|
24
|
-
const newVal = parentPath ? get(target, parentPath) : target;
|
|
25
|
-
// For parent paths, we provide the cloned new value.
|
|
26
|
-
// oldVal is passed as undefined as tracking branch node state is complex.
|
|
27
|
-
collector(parentPath, cloneDeep(newVal), undefined);
|
|
28
|
-
}
|
|
12
|
+
const hasChange = applyOptionUpdatesInternal(target, source, basePath, collector, bubbleUp);
|
|
13
|
+
if (basePath === '' && hasChange && bubbleUp && collector) {
|
|
14
|
+
collector('', cloneDeep(target), undefined);
|
|
29
15
|
}
|
|
30
16
|
}
|
|
31
|
-
|
|
17
|
+
/**
|
|
18
|
+
* Internal recursive function.
|
|
19
|
+
* Returns true if any change occurred within this branch (or its children).
|
|
20
|
+
*/
|
|
21
|
+
function applyOptionUpdatesInternal(target, source, basePath, collector, bubbleUp) {
|
|
22
|
+
let hasChange = false;
|
|
32
23
|
Object.keys(source).forEach((key) => {
|
|
24
|
+
if (key === '__proto__' || key === 'constructor' || key === 'prototype') {
|
|
25
|
+
return;
|
|
26
|
+
}
|
|
33
27
|
const fullPath = basePath ? `${basePath}.${key}` : key;
|
|
34
28
|
const updateValue = source[key];
|
|
35
29
|
const oldValue = target[key];
|
|
30
|
+
let childChanged = false;
|
|
36
31
|
if (updateValue === undefined) {
|
|
37
|
-
delete
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
32
|
+
// Handle deletion: Only delete and notify if the key actually exists
|
|
33
|
+
if (key in target) {
|
|
34
|
+
delete target[key];
|
|
35
|
+
collector === null || collector === void 0 ? void 0 : collector(fullPath, undefined, oldValue);
|
|
36
|
+
childChanged = true;
|
|
37
|
+
}
|
|
41
38
|
}
|
|
42
39
|
else if (isPlainObject(updateValue)) {
|
|
43
|
-
|
|
40
|
+
// Handle nested object
|
|
41
|
+
const oldValueIsObject = isPlainObject(target[key]);
|
|
42
|
+
if (!oldValueIsObject) {
|
|
44
43
|
target[key] = {};
|
|
45
44
|
}
|
|
46
|
-
applyOptionUpdatesInternal(target[key], updateValue, fullPath, collector, bubbleUp
|
|
45
|
+
const grandChildChanged = applyOptionUpdatesInternal(target[key], updateValue, fullPath, collector, bubbleUp);
|
|
46
|
+
if (!oldValueIsObject) {
|
|
47
|
+
// Overwriting a primitive with an object is always a change.
|
|
48
|
+
childChanged = true;
|
|
49
|
+
// If the object was empty (grandChildChanged is false), we still need to report it.
|
|
50
|
+
if (!grandChildChanged) {
|
|
51
|
+
collector === null || collector === void 0 ? void 0 : collector(fullPath, target[key], oldValue);
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
else {
|
|
55
|
+
childChanged = grandChildChanged;
|
|
56
|
+
}
|
|
47
57
|
}
|
|
48
58
|
else {
|
|
59
|
+
// Handle primitive update
|
|
49
60
|
target[key] = updateValue;
|
|
50
61
|
if (!isEqual(updateValue, oldValue)) {
|
|
51
62
|
collector === null || collector === void 0 ? void 0 : collector(fullPath, updateValue, oldValue);
|
|
52
|
-
|
|
53
|
-
collectParentPaths(basePath, parentPathsToNotify);
|
|
63
|
+
childChanged = true;
|
|
54
64
|
}
|
|
55
65
|
}
|
|
66
|
+
if (childChanged) {
|
|
67
|
+
hasChange = true;
|
|
68
|
+
}
|
|
56
69
|
});
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
if (!path) {
|
|
63
|
-
set.add(''); // Root path
|
|
64
|
-
return;
|
|
65
|
-
}
|
|
66
|
-
const parts = path.split('.');
|
|
67
|
-
for (let i = parts.length; i >= 0; i--) {
|
|
68
|
-
set.add(parts.slice(0, i).join('.'));
|
|
70
|
+
// Bubbling: Notify if any child changed in this branch
|
|
71
|
+
// The recursion naturally ensures this happens in "deepest-first" (post-order) sequence.
|
|
72
|
+
if (hasChange && bubbleUp && basePath !== '') {
|
|
73
|
+
// Current target is now fully updated for this scope.
|
|
74
|
+
collector === null || collector === void 0 ? void 0 : collector(basePath, cloneDeep(target), undefined);
|
|
69
75
|
}
|
|
76
|
+
return hasChange;
|
|
70
77
|
}
|
package/esm/exporter/png.js
CHANGED
|
@@ -12,8 +12,8 @@ import { exportToSVG } from './svg.js';
|
|
|
12
12
|
export function exportToPNGString(svg_1) {
|
|
13
13
|
return __awaiter(this, arguments, void 0, function* (svg, options = {}) {
|
|
14
14
|
var _a;
|
|
15
|
-
const { dpr = (_a = globalThis.devicePixelRatio) !== null && _a !== void 0 ? _a : 2 } = options;
|
|
16
|
-
const node = yield exportToSVG(svg);
|
|
15
|
+
const { dpr = (_a = globalThis.devicePixelRatio) !== null && _a !== void 0 ? _a : 2, removeBackground = false } = options;
|
|
16
|
+
const node = yield exportToSVG(svg, { removeBackground });
|
|
17
17
|
const { width, height } = getViewBox(node);
|
|
18
18
|
return new Promise((resolve, reject) => {
|
|
19
19
|
try {
|
package/esm/exporter/svg.js
CHANGED
|
@@ -18,7 +18,7 @@ export function exportToSVGString(svg_1) {
|
|
|
18
18
|
}
|
|
19
19
|
export function exportToSVG(svg_1) {
|
|
20
20
|
return __awaiter(this, arguments, void 0, function* (svg, options = {}) {
|
|
21
|
-
const { embedResources = true, removeIds = false } = options;
|
|
21
|
+
const { removeBackground = false, embedResources = true, removeIds = false, } = options;
|
|
22
22
|
const clonedSVG = svg.cloneNode(true);
|
|
23
23
|
const { width, height } = getViewBox(svg);
|
|
24
24
|
setAttributes(clonedSVG, { width, height });
|
|
@@ -30,6 +30,9 @@ export function exportToSVG(svg_1) {
|
|
|
30
30
|
yield embedIcons(clonedSVG);
|
|
31
31
|
}
|
|
32
32
|
yield embedFonts(clonedSVG, embedResources);
|
|
33
|
+
if (removeBackground) {
|
|
34
|
+
removeSVGBackground(clonedSVG);
|
|
35
|
+
}
|
|
33
36
|
cleanSVG(clonedSVG);
|
|
34
37
|
return clonedSVG;
|
|
35
38
|
});
|
|
@@ -284,6 +287,11 @@ function cleanSVG(svg) {
|
|
|
284
287
|
removeUselessAttrs(svg);
|
|
285
288
|
clearDataset(svg);
|
|
286
289
|
}
|
|
290
|
+
function removeSVGBackground(svg) {
|
|
291
|
+
svg.style.removeProperty('background-color');
|
|
292
|
+
const background = getElementByRole(svg, "background" /* ElementTypeEnum.Background */);
|
|
293
|
+
background === null || background === void 0 ? void 0 : background.remove();
|
|
294
|
+
}
|
|
287
295
|
function removeBtnGroup(svg) {
|
|
288
296
|
const btnGroup = getElementByRole(svg, "btns-group" /* ElementTypeEnum.BtnsGroup */);
|
|
289
297
|
btnGroup === null || btnGroup === void 0 ? void 0 : btnGroup.remove();
|
package/esm/exporter/types.d.ts
CHANGED
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
export interface SVGExportOptions {
|
|
2
2
|
type: 'svg';
|
|
3
|
+
/**
|
|
4
|
+
* 是否移除背景(SVG 背景样式 + 背景矩形)
|
|
5
|
+
* @default false
|
|
6
|
+
*/
|
|
7
|
+
removeBackground?: boolean;
|
|
3
8
|
/**
|
|
4
9
|
* 是否将远程资源嵌入到 SVG 中
|
|
5
10
|
* @default true
|
|
@@ -13,6 +18,11 @@ export interface SVGExportOptions {
|
|
|
13
18
|
}
|
|
14
19
|
export interface PNGExportOptions {
|
|
15
20
|
type: 'png';
|
|
21
|
+
/**
|
|
22
|
+
* 是否移除背景(SVG 背景样式 + 背景矩形)
|
|
23
|
+
* @default false
|
|
24
|
+
*/
|
|
25
|
+
removeBackground?: boolean;
|
|
16
26
|
/**
|
|
17
27
|
* 设备像素比,默认为浏览器的 devicePixelRatio
|
|
18
28
|
* @default globalThis.devicePixelRatio || 2
|
package/esm/options/types.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ import type { DesignOptions, ParsedDesignsOptions } from '../designs';
|
|
|
2
2
|
import type { ElementProps, IInteraction, IPlugin } from '../editor';
|
|
3
3
|
import type { ThemeConfig } from '../themes';
|
|
4
4
|
import type { Data, Padding, ParsedData } from '../types';
|
|
5
|
+
import type { Path } from '../utils';
|
|
5
6
|
export interface InfographicOptions {
|
|
6
7
|
/** 容器,可以是选择器或者 HTMLElement */
|
|
7
8
|
container?: string | HTMLElement;
|
|
@@ -58,4 +59,9 @@ interface SVGOptions {
|
|
|
58
59
|
/** 是否启用背景 */
|
|
59
60
|
background?: boolean;
|
|
60
61
|
}
|
|
62
|
+
/**
|
|
63
|
+
* All valid property paths for Infographic Options.
|
|
64
|
+
* Use this to validate paths in SyncRegistry and other places.
|
|
65
|
+
*/
|
|
66
|
+
export type InfographicOptionPath = Path<UpdatableInfographicOptions>;
|
|
61
67
|
export {};
|
|
@@ -13,7 +13,7 @@ import { Editor } from '../editor/index.js';
|
|
|
13
13
|
import { exportToPNGString, exportToSVGString, } from '../exporter/index.js';
|
|
14
14
|
import { renderSVG } from '../jsx/index.js';
|
|
15
15
|
import { parseOptions, } from '../options/index.js';
|
|
16
|
-
import { Renderer } from '../renderer/index.js';
|
|
16
|
+
import { DEFAULT_FONT, Renderer, setDefaultFont } from '../renderer/index.js';
|
|
17
17
|
import { waitForSvgLoads } from '../resource/index.js';
|
|
18
18
|
import { parseSyntax } from '../syntax/index.js';
|
|
19
19
|
import { getTypes, parseSVG } from '../utils/index.js';
|
|
@@ -99,18 +99,31 @@ export class Infographic {
|
|
|
99
99
|
* Compose the SVG template
|
|
100
100
|
*/
|
|
101
101
|
compose(parsedOptions) {
|
|
102
|
-
|
|
102
|
+
var _a, _b;
|
|
103
|
+
const { design, data, themeConfig } = parsedOptions;
|
|
103
104
|
const { title, item, items, structure } = design;
|
|
104
105
|
const { component: Structure, props: structureProps } = structure;
|
|
105
106
|
const Title = title.component;
|
|
106
107
|
const Item = item.component;
|
|
107
108
|
const Items = items.map((it) => it.component);
|
|
108
|
-
|
|
109
|
-
const
|
|
110
|
-
|
|
111
|
-
|
|
109
|
+
// Apply theme font-family before measurement so measureText uses the correct font
|
|
110
|
+
const themeFontFamily = (_b = (_a = themeConfig === null || themeConfig === void 0 ? void 0 : themeConfig.base) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b['font-family'];
|
|
111
|
+
const previousDefaultFont = DEFAULT_FONT;
|
|
112
|
+
if (themeFontFamily)
|
|
113
|
+
setDefaultFont(themeFontFamily);
|
|
114
|
+
try {
|
|
115
|
+
const svg = renderSVG(_jsx(Structure, Object.assign({ data: data, Title: Title, Item: Item, Items: Items, options: parsedOptions }, structureProps)));
|
|
116
|
+
const template = parseSVG(svg);
|
|
117
|
+
if (!template) {
|
|
118
|
+
throw new Error('Failed to parse SVG template');
|
|
119
|
+
}
|
|
120
|
+
return template;
|
|
121
|
+
}
|
|
122
|
+
finally {
|
|
123
|
+
// Restore previous default font
|
|
124
|
+
if (themeFontFamily)
|
|
125
|
+
setDefaultFont(previousDefaultFont);
|
|
112
126
|
}
|
|
113
|
-
return template;
|
|
114
127
|
}
|
|
115
128
|
getTypes() {
|
|
116
129
|
const parsedOptions = this.parsedOptions;
|
package/esm/syntax/index.js
CHANGED
|
@@ -111,27 +111,47 @@ export function parseSyntax(input) {
|
|
|
111
111
|
const parsed = parseRelationsNode(relationsNode, errors, 'data.relations');
|
|
112
112
|
if (parsed.relations.length > 0 || parsed.items.length > 0) {
|
|
113
113
|
const current = ((_a = options.data) !== null && _a !== void 0 ? _a : {});
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
const
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
});
|
|
123
|
-
parsed.items.forEach((item) => {
|
|
124
|
-
const existing = itemMap.get(item.id);
|
|
125
|
-
if (existing) {
|
|
126
|
-
if (!existing.label && item.label)
|
|
127
|
-
existing.label = item.label;
|
|
114
|
+
// 优先使用已存在的数据列表 (sequences, lists, etc.)
|
|
115
|
+
const dataKeys = Object.keys(DataSchema.fields).filter((key) => key !== 'items' && key !== 'relations');
|
|
116
|
+
let hasStructuredData = false;
|
|
117
|
+
// 尝试找到一个非空的数据源
|
|
118
|
+
for (const key of dataKeys) {
|
|
119
|
+
if (Array.isArray(current[key]) && current[key].length > 0) {
|
|
120
|
+
hasStructuredData = true;
|
|
121
|
+
break;
|
|
128
122
|
}
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
123
|
+
}
|
|
124
|
+
// 如果 items 已包含层级结构数据(带 children),也视为结构化数据
|
|
125
|
+
if (!hasStructuredData &&
|
|
126
|
+
Array.isArray(current.items) &&
|
|
127
|
+
current.items.length > 0 &&
|
|
128
|
+
current.items.some((item) => Array.isArray(item.children) && item.children.length > 0)) {
|
|
129
|
+
hasStructuredData = true;
|
|
130
|
+
}
|
|
131
|
+
// 如果没有找到其他数据源,才尝试合并 items
|
|
132
|
+
if (!hasStructuredData) {
|
|
133
|
+
const existingItems = Array.isArray(current.items)
|
|
134
|
+
? current.items
|
|
135
|
+
: [];
|
|
136
|
+
const normalizedItems = normalizeItems(existingItems);
|
|
137
|
+
const itemMap = new Map();
|
|
138
|
+
normalizedItems.forEach((item) => {
|
|
139
|
+
if (item.id)
|
|
140
|
+
itemMap.set(item.id, item);
|
|
141
|
+
});
|
|
142
|
+
parsed.items.forEach((item) => {
|
|
143
|
+
const existing = itemMap.get(item.id);
|
|
144
|
+
if (existing) {
|
|
145
|
+
if (!existing.label && item.label)
|
|
146
|
+
existing.label = item.label;
|
|
147
|
+
}
|
|
148
|
+
else {
|
|
149
|
+
normalizedItems.push(item);
|
|
150
|
+
itemMap.set(item.id, item);
|
|
151
|
+
}
|
|
152
|
+
});
|
|
153
|
+
current.items = normalizedItems;
|
|
154
|
+
}
|
|
135
155
|
current.relations = parsed.relations;
|
|
136
156
|
options.data = current;
|
|
137
157
|
}
|