@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.
Files changed (101) hide show
  1. package/README.md +39 -5
  2. package/README.zh-CN.md +39 -5
  3. package/dist/infographic.min.js +168 -166
  4. package/dist/infographic.min.js.map +1 -1
  5. package/esm/designs/structures/index.d.ts +1 -0
  6. package/esm/designs/structures/index.js +1 -0
  7. package/esm/designs/structures/relation-dagre-flow.js +4 -139
  8. package/esm/designs/structures/sequence-interaction.d.ts +54 -0
  9. package/esm/designs/structures/sequence-interaction.js +461 -0
  10. package/esm/designs/structures/sequence-timeline.d.ts +1 -0
  11. package/esm/designs/structures/sequence-timeline.js +4 -2
  12. package/esm/designs/utils/geometry.d.ts +44 -0
  13. package/esm/designs/utils/geometry.js +244 -0
  14. package/esm/designs/utils/index.d.ts +1 -0
  15. package/esm/designs/utils/index.js +1 -0
  16. package/esm/editor/managers/sync-registry.d.ts +2 -1
  17. package/esm/editor/types/editor.d.ts +2 -1
  18. package/esm/editor/types/sync.d.ts +2 -1
  19. package/esm/editor/utils/object.js +46 -39
  20. package/esm/exporter/png.js +2 -2
  21. package/esm/exporter/svg.js +9 -1
  22. package/esm/exporter/types.d.ts +10 -0
  23. package/esm/options/types.d.ts +6 -0
  24. package/esm/runtime/Infographic.js +20 -7
  25. package/esm/syntax/index.js +40 -20
  26. package/esm/syntax/parser.js +80 -3
  27. package/esm/syntax/relations.js +26 -2
  28. package/esm/syntax/schema.js +1 -0
  29. package/esm/templates/built-in.js +5 -4
  30. package/esm/templates/sequence-interaction.d.ts +2 -0
  31. package/esm/templates/sequence-interaction.js +76 -0
  32. package/esm/types/data.d.ts +1 -0
  33. package/esm/utils/index.d.ts +1 -0
  34. package/esm/utils/index.js +1 -0
  35. package/esm/utils/measure-text.js +31 -3
  36. package/esm/utils/types.d.ts +16 -0
  37. package/esm/utils/types.js +12 -0
  38. package/esm/version.d.ts +1 -1
  39. package/esm/version.js +1 -1
  40. package/lib/designs/structures/index.d.ts +1 -0
  41. package/lib/designs/structures/index.js +1 -0
  42. package/lib/designs/structures/relation-dagre-flow.js +5 -140
  43. package/lib/designs/structures/sequence-interaction.d.ts +54 -0
  44. package/lib/designs/structures/sequence-interaction.js +465 -0
  45. package/lib/designs/structures/sequence-timeline.d.ts +1 -0
  46. package/lib/designs/structures/sequence-timeline.js +4 -2
  47. package/lib/designs/utils/geometry.d.ts +44 -0
  48. package/lib/designs/utils/geometry.js +256 -0
  49. package/lib/designs/utils/index.d.ts +1 -0
  50. package/lib/designs/utils/index.js +1 -0
  51. package/lib/editor/managers/sync-registry.d.ts +2 -1
  52. package/lib/editor/types/editor.d.ts +2 -1
  53. package/lib/editor/types/sync.d.ts +2 -1
  54. package/lib/editor/utils/object.js +45 -38
  55. package/lib/exporter/png.js +2 -2
  56. package/lib/exporter/svg.js +9 -1
  57. package/lib/exporter/types.d.ts +10 -0
  58. package/lib/options/types.d.ts +6 -0
  59. package/lib/runtime/Infographic.js +19 -6
  60. package/lib/syntax/index.js +40 -20
  61. package/lib/syntax/parser.js +80 -3
  62. package/lib/syntax/relations.js +26 -2
  63. package/lib/syntax/schema.js +1 -0
  64. package/lib/templates/built-in.js +5 -4
  65. package/lib/templates/sequence-interaction.d.ts +2 -0
  66. package/lib/templates/sequence-interaction.js +79 -0
  67. package/lib/types/data.d.ts +1 -0
  68. package/lib/utils/index.d.ts +1 -0
  69. package/lib/utils/index.js +1 -0
  70. package/lib/utils/measure-text.js +30 -2
  71. package/lib/utils/types.d.ts +16 -0
  72. package/lib/utils/types.js +13 -0
  73. package/lib/version.d.ts +1 -1
  74. package/lib/version.js +1 -1
  75. package/package.json +1 -1
  76. package/src/designs/structures/index.ts +1 -0
  77. package/src/designs/structures/relation-dagre-flow.tsx +14 -178
  78. package/src/designs/structures/sequence-interaction.tsx +931 -0
  79. package/src/designs/structures/sequence-timeline.tsx +18 -15
  80. package/src/designs/utils/geometry.tsx +315 -0
  81. package/src/designs/utils/index.ts +1 -0
  82. package/src/editor/managers/sync-registry.ts +2 -1
  83. package/src/editor/types/editor.ts +2 -1
  84. package/src/editor/types/sync.ts +3 -1
  85. package/src/editor/utils/object.ts +50 -40
  86. package/src/exporter/png.ts +3 -2
  87. package/src/exporter/svg.ts +14 -1
  88. package/src/exporter/types.ts +10 -0
  89. package/src/options/types.ts +7 -0
  90. package/src/runtime/Infographic.tsx +27 -17
  91. package/src/syntax/index.ts +51 -18
  92. package/src/syntax/parser.ts +101 -3
  93. package/src/syntax/relations.ts +29 -2
  94. package/src/syntax/schema.ts +1 -0
  95. package/src/templates/built-in.ts +4 -2
  96. package/src/templates/sequence-interaction.ts +101 -0
  97. package/src/types/data.ts +1 -0
  98. package/src/utils/index.ts +1 -0
  99. package/src/utils/measure-text.ts +35 -3
  100. package/src/utils/types.ts +61 -0
  101. 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,4 +1,5 @@
1
1
  export * from './color';
2
+ export * from './geometry';
2
3
  export * from './hierarchy-color';
3
4
  export * from './item';
4
5
  export * from './normalize-percent';
@@ -1,4 +1,5 @@
1
1
  export * from './color.js';
2
+ export * from './geometry.js';
2
3
  export * from './hierarchy-color.js';
3
4
  export * from './item.js';
4
5
  export * from './normalize-percent.js';
@@ -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, get, isEqual, isPlainObject } from 'lodash-es';
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
- // Set to store unique parent paths that need notification
13
- const parentPathsToNotify = new Set();
14
- applyOptionUpdatesInternal(target, source, basePath, collector, bubbleUp, parentPathsToNotify);
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
- function applyOptionUpdatesInternal(target, source, basePath, collector, bubbleUp, parentPathsToNotify) {
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 target[key];
38
- collector === null || collector === void 0 ? void 0 : collector(fullPath, undefined, oldValue);
39
- if (bubbleUp)
40
- collectParentPaths(basePath, parentPathsToNotify);
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
- if (!isPlainObject(target[key])) {
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, parentPathsToNotify);
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
- if (bubbleUp)
53
- collectParentPaths(basePath, parentPathsToNotify);
63
+ childChanged = true;
54
64
  }
55
65
  }
66
+ if (childChanged) {
67
+ hasChange = true;
68
+ }
56
69
  });
57
- }
58
- /**
59
- * Collects all parent paths of a given path and adds them to the provided set.
60
- */
61
- function collectParentPaths(path, set) {
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
  }
@@ -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 {
@@ -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();
@@ -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
@@ -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
- const { design, data } = parsedOptions;
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
- const svg = renderSVG(_jsx(Structure, Object.assign({ data: data, Title: Title, Item: Item, Items: Items, options: parsedOptions }, structureProps)));
109
- const template = parseSVG(svg);
110
- if (!template) {
111
- throw new Error('Failed to parse SVG template');
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;
@@ -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
- const existingItems = Array.isArray(current.items)
115
- ? current.items
116
- : [];
117
- const normalizedItems = normalizeItems(existingItems);
118
- const itemMap = new Map();
119
- normalizedItems.forEach((item) => {
120
- if (item.id)
121
- itemMap.set(item.id, item);
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
- else {
130
- normalizedItems.push(item);
131
- itemMap.set(item.id, item);
132
- }
133
- });
134
- current.items = normalizedItems;
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
  }