@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,256 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.getEdgePathD = exports.getLabelPosition = exports.getPointAtT = exports.getTangentAngle = exports.getNodesAnchors = exports.createArrowElements = exports.createRoundedPath = exports.createStraightPath = exports.getMidPoint = void 0;
4
+ const jsx_runtime_1 = require("@antv/infographic/jsx-runtime");
5
+ const jsx_1 = require("../../jsx");
6
+ const getMidPoint = (points) => {
7
+ if (points.length === 0)
8
+ return null;
9
+ if (points.length === 1)
10
+ return points[0];
11
+ let total = 0;
12
+ const segments = [];
13
+ for (let i = 0; i < points.length - 1; i += 1) {
14
+ const start = points[i];
15
+ const end = points[i + 1];
16
+ const length = Math.hypot(end[0] - start[0], end[1] - start[1]);
17
+ segments.push({ length, start, end });
18
+ total += length;
19
+ }
20
+ if (total === 0)
21
+ return points[0];
22
+ let target = total / 2;
23
+ for (let i = 0; i < segments.length; i += 1) {
24
+ const segment = segments[i];
25
+ if (target <= segment.length || i === segments.length - 1) {
26
+ const ratio = segment.length === 0
27
+ ? 0
28
+ : Math.max(0, Math.min(1, target / segment.length));
29
+ return [
30
+ segment.start[0] + (segment.end[0] - segment.start[0]) * ratio,
31
+ segment.start[1] + (segment.end[1] - segment.start[1]) * ratio,
32
+ ];
33
+ }
34
+ target -= segment.length;
35
+ }
36
+ return points[Math.floor(points.length / 2)];
37
+ };
38
+ exports.getMidPoint = getMidPoint;
39
+ const createStraightPath = (points, dx, dy) => points
40
+ .map(([x, y], index) => {
41
+ const prefix = index === 0 ? 'M' : 'L';
42
+ return `${prefix} ${x + dx} ${y + dy}`;
43
+ })
44
+ .join(' ');
45
+ exports.createStraightPath = createStraightPath;
46
+ const createRoundedPath = (points, radius, dx, dy) => {
47
+ if (points.length < 2)
48
+ return '';
49
+ const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
50
+ const toPoint = ([x, y]) => ({
51
+ x: x + dx,
52
+ y: y + dy,
53
+ });
54
+ const output = [];
55
+ const first = toPoint(points[0]);
56
+ output.push(`M ${first.x} ${first.y}`);
57
+ if (points.length === 2) {
58
+ const last = toPoint(points[1]);
59
+ output.push(`L ${last.x} ${last.y}`);
60
+ return output.join(' ');
61
+ }
62
+ for (let i = 1; i < points.length - 1; i += 1) {
63
+ const prev = points[i - 1];
64
+ const curr = points[i];
65
+ const next = points[i + 1];
66
+ const v0x = curr[0] - prev[0];
67
+ const v0y = curr[1] - prev[1];
68
+ const v1x = next[0] - curr[0];
69
+ const v1y = next[1] - curr[1];
70
+ const d0 = Math.hypot(v0x, v0y);
71
+ const d1 = Math.hypot(v1x, v1y);
72
+ if (d0 === 0 || d1 === 0) {
73
+ const currPoint = toPoint(curr);
74
+ output.push(`L ${currPoint.x} ${currPoint.y}`);
75
+ continue;
76
+ }
77
+ const r = clamp(radius, 0, Math.min(d0, d1) / 2);
78
+ if (r === 0) {
79
+ const currPoint = toPoint(curr);
80
+ output.push(`L ${currPoint.x} ${currPoint.y}`);
81
+ continue;
82
+ }
83
+ const u0x = v0x / d0;
84
+ const u0y = v0y / d0;
85
+ const u1x = v1x / d1;
86
+ const u1y = v1y / d1;
87
+ const start = toPoint([curr[0] - u0x * r, curr[1] - u0y * r]);
88
+ const end = toPoint([curr[0] + u1x * r, curr[1] + u1y * r]);
89
+ output.push(`L ${start.x} ${start.y}`);
90
+ const currPoint = toPoint(curr);
91
+ output.push(`Q ${currPoint.x} ${currPoint.y} ${end.x} ${end.y}`);
92
+ }
93
+ const last = toPoint(points[points.length - 1]);
94
+ output.push(`L ${last.x} ${last.y}`);
95
+ return output.join(' ');
96
+ };
97
+ exports.createRoundedPath = createRoundedPath;
98
+ const createArrowElements = (x, y, angle, type, fillColor, edgeWidth, arrowSize) => {
99
+ const ux = Math.cos(angle);
100
+ const uy = Math.sin(angle);
101
+ const px = -uy;
102
+ const py = ux;
103
+ const length = arrowSize;
104
+ const halfWidth = arrowSize * 0.55;
105
+ if (type === 'arrow') {
106
+ const leftX = x - ux * length + px * halfWidth;
107
+ const leftY = y - uy * length + py * halfWidth;
108
+ const rightX = x - ux * length - px * halfWidth;
109
+ const rightY = y - uy * length - py * halfWidth;
110
+ return [
111
+ (0, jsx_runtime_1.jsx)(jsx_1.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" }),
112
+ ];
113
+ }
114
+ if (type === 'diamond') {
115
+ const diamondLength = length * 1.25;
116
+ const diamondWidth = halfWidth * 0.75;
117
+ const midX = x - ux * diamondLength * 0.5;
118
+ const midY = y - uy * diamondLength * 0.5;
119
+ const diamondPoints = [
120
+ { x, y },
121
+ { x: midX + px * diamondWidth, y: midY + py * diamondWidth },
122
+ { x: x - ux * diamondLength, y: y - uy * diamondLength },
123
+ { x: midX - px * diamondWidth, y: midY - py * diamondWidth },
124
+ ];
125
+ return [
126
+ (0, jsx_runtime_1.jsx)(jsx_1.Polygon, { points: diamondPoints, fill: fillColor, stroke: fillColor, strokeWidth: Math.max(1, edgeWidth * 0.8) }),
127
+ ];
128
+ }
129
+ const trianglePoints = [
130
+ { x, y },
131
+ {
132
+ x: x - ux * length + px * halfWidth,
133
+ y: y - uy * length + py * halfWidth,
134
+ },
135
+ {
136
+ x: x - ux * length - px * halfWidth,
137
+ y: y - uy * length - py * halfWidth,
138
+ },
139
+ ];
140
+ return [
141
+ (0, jsx_runtime_1.jsx)(jsx_1.Polygon, { points: trianglePoints, fill: fillColor, stroke: fillColor, strokeWidth: Math.max(1, edgeWidth * 0.8) }),
142
+ ];
143
+ };
144
+ exports.createArrowElements = createArrowElements;
145
+ // LT: Left Top (radio), LC: Left Center (1/2), LB: Left Bottom (1 - radio)
146
+ // RT: Right Top (radio), RC: Right Center (1/2), RB: Right Bottom (1 - radio)
147
+ const getNodesAnchors = (node) => {
148
+ const { x, y, width, height, radio = 0.25 } = node;
149
+ const q1H = height * radio;
150
+ const halfH = height * 0.5;
151
+ const q3H = height * (1 - radio);
152
+ return {
153
+ LT: { x, y: y + q1H },
154
+ LC: { x, y: y + halfH },
155
+ LB: { x, y: y + q3H },
156
+ RT: { x: x + width, y: y + q1H },
157
+ RC: { x: x + width, y: y + halfH },
158
+ RB: { x: x + width, y: y + q3H },
159
+ };
160
+ };
161
+ exports.getNodesAnchors = getNodesAnchors;
162
+ const getTangentAngle = (points, t) => {
163
+ const len = points.length;
164
+ // Cubic Bezier (Self loop)
165
+ if (len === 4) {
166
+ const p0 = points[0], p1 = points[1], p2 = points[2], p3 = points[3];
167
+ if (t === 0) {
168
+ return Math.atan2(p1[1] - p0[1], p1[0] - p0[0]);
169
+ }
170
+ else {
171
+ return Math.atan2(p3[1] - p2[1], p3[0] - p2[0]);
172
+ }
173
+ }
174
+ // Quad Bezier (Curved)
175
+ if (len === 3) {
176
+ const p0 = points[0], p1 = points[1], p2 = points[2];
177
+ if (t === 0) {
178
+ return Math.atan2(p1[1] - p0[1], p1[0] - p0[0]);
179
+ }
180
+ else {
181
+ return Math.atan2(p2[1] - p1[1], p2[0] - p1[0]);
182
+ }
183
+ }
184
+ // Line
185
+ if (len === 2) {
186
+ const p0 = points[0], p1 = points[1];
187
+ const angle = Math.atan2(p1[1] - p0[1], p1[0] - p0[0]);
188
+ return angle;
189
+ }
190
+ return 0;
191
+ };
192
+ exports.getTangentAngle = getTangentAngle;
193
+ /**
194
+ * 计算贝塞尔曲线上任意 t (0-1) 位置的点
195
+ */
196
+ const getPointAtT = (points, t = 0.5) => {
197
+ const len = points.length;
198
+ if (len === 4) {
199
+ const [p0, p1, p2, p3] = points;
200
+ const mt = 1 - t;
201
+ // B(t) = (1-t)^3*P0 + 3(1-t)^2*t*P1 + 3(1-t)*t^2*P2 + t^3*P3
202
+ return [
203
+ Math.pow(mt, 3) * p0[0] +
204
+ 3 * Math.pow(mt, 2) * t * p1[0] +
205
+ 3 * mt * Math.pow(t, 2) * p2[0] +
206
+ Math.pow(t, 3) * p3[0],
207
+ Math.pow(mt, 3) * p0[1] +
208
+ 3 * Math.pow(mt, 2) * t * p1[1] +
209
+ 3 * mt * Math.pow(t, 2) * p2[1] +
210
+ Math.pow(t, 3) * p3[1],
211
+ ];
212
+ }
213
+ if (len === 3) {
214
+ const [p0, p1, p2] = points;
215
+ const mt = 1 - t;
216
+ // B(t) = (1-t)^2*P0 + 2(1-t)*t*P1 + t^2*P2
217
+ return [
218
+ Math.pow(mt, 2) * p0[0] + 2 * mt * t * p1[0] + Math.pow(t, 2) * p2[0],
219
+ Math.pow(mt, 2) * p0[1] + 2 * mt * t * p1[1] + Math.pow(t, 2) * p2[1],
220
+ ];
221
+ }
222
+ if (len === 2) {
223
+ const [p0, p1] = points;
224
+ return [p0[0] + (p1[0] - p0[0]) * t, p0[1] + (p1[1] - p0[1]) * t];
225
+ }
226
+ return points[0] || [0, 0];
227
+ };
228
+ exports.getPointAtT = getPointAtT;
229
+ const getLabelPosition = (points, selfLoopOffset = 10) => {
230
+ const len = points.length;
231
+ // 默认取中点
232
+ const labelPoint = (0, exports.getPointAtT)(points);
233
+ if (len === 4) {
234
+ // 针对自连接(len=4)的特殊偏移处理
235
+ labelPoint[0] += selfLoopOffset;
236
+ }
237
+ return labelPoint;
238
+ };
239
+ exports.getLabelPosition = getLabelPosition;
240
+ const getEdgePathD = (points) => {
241
+ const len = points.length;
242
+ if (len === 4) {
243
+ const [p0, p1, p2, p3] = points;
244
+ return `M ${p0[0]} ${p0[1]} C ${p1[0]} ${p1[1]} ${p2[0]} ${p2[1]} ${p3[0]} ${p3[1]}`;
245
+ }
246
+ if (len === 3) {
247
+ const [p0, p1, p2] = points;
248
+ return `M ${p0[0]} ${p0[1]} Q ${p1[0]} ${p1[1]} ${p2[0]} ${p2[1]}`;
249
+ }
250
+ if (len === 2) {
251
+ const [p0, p1] = points;
252
+ return `M ${p0[0]} ${p0[1]} L ${p1[0]} ${p1[1]}`;
253
+ }
254
+ return '';
255
+ };
256
+ exports.getEdgePathD = getEdgePathD;
@@ -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';
@@ -15,6 +15,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
15
15
  };
16
16
  Object.defineProperty(exports, "__esModule", { value: true });
17
17
  __exportStar(require("./color"), exports);
18
+ __exportStar(require("./geometry"), exports);
18
19
  __exportStar(require("./hierarchy-color"), exports);
19
20
  __exportStar(require("./item"), exports);
20
21
  __exportStar(require("./normalize-percent"), exports);
@@ -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
  /**
@@ -12,62 +12,69 @@ const lodash_es_1 = require("lodash-es");
12
12
  */
13
13
  function applyOptionUpdates(target, source, basePath = '', options) {
14
14
  const { bubbleUp = false, collector } = options !== null && options !== void 0 ? options : {};
15
- // Set to store unique parent paths that need notification
16
- const parentPathsToNotify = new Set();
17
- applyOptionUpdatesInternal(target, source, basePath, collector, bubbleUp, parentPathsToNotify);
18
- // Bubbling notification: from the deepest parent path to the shallowest
19
- if (bubbleUp && collector && parentPathsToNotify.size > 0) {
20
- // Sort by path depth in descending order (deepest first)
21
- const sortedPaths = Array.from(parentPathsToNotify).sort((a, b) => {
22
- const depthA = a === '' ? 0 : a.split('.').length;
23
- const depthB = b === '' ? 0 : b.split('.').length;
24
- return depthB - depthA;
25
- });
26
- for (const parentPath of sortedPaths) {
27
- const newVal = parentPath ? (0, lodash_es_1.get)(target, parentPath) : target;
28
- // For parent paths, we provide the cloned new value.
29
- // oldVal is passed as undefined as tracking branch node state is complex.
30
- collector(parentPath, (0, lodash_es_1.cloneDeep)(newVal), undefined);
31
- }
15
+ const hasChange = applyOptionUpdatesInternal(target, source, basePath, collector, bubbleUp);
16
+ if (basePath === '' && hasChange && bubbleUp && collector) {
17
+ collector('', (0, lodash_es_1.cloneDeep)(target), undefined);
32
18
  }
33
19
  }
34
- function applyOptionUpdatesInternal(target, source, basePath, collector, bubbleUp, parentPathsToNotify) {
20
+ /**
21
+ * Internal recursive function.
22
+ * Returns true if any change occurred within this branch (or its children).
23
+ */
24
+ function applyOptionUpdatesInternal(target, source, basePath, collector, bubbleUp) {
25
+ let hasChange = false;
35
26
  Object.keys(source).forEach((key) => {
27
+ if (key === '__proto__' || key === 'constructor' || key === 'prototype') {
28
+ return;
29
+ }
36
30
  const fullPath = basePath ? `${basePath}.${key}` : key;
37
31
  const updateValue = source[key];
38
32
  const oldValue = target[key];
33
+ let childChanged = false;
39
34
  if (updateValue === undefined) {
40
- delete target[key];
41
- collector === null || collector === void 0 ? void 0 : collector(fullPath, undefined, oldValue);
42
- if (bubbleUp)
43
- collectParentPaths(basePath, parentPathsToNotify);
35
+ // Handle deletion: Only delete and notify if the key actually exists
36
+ if (key in target) {
37
+ delete target[key];
38
+ collector === null || collector === void 0 ? void 0 : collector(fullPath, undefined, oldValue);
39
+ childChanged = true;
40
+ }
44
41
  }
45
42
  else if ((0, lodash_es_1.isPlainObject)(updateValue)) {
46
- if (!(0, lodash_es_1.isPlainObject)(target[key])) {
43
+ // Handle nested object
44
+ const oldValueIsObject = (0, lodash_es_1.isPlainObject)(target[key]);
45
+ if (!oldValueIsObject) {
47
46
  target[key] = {};
48
47
  }
49
- applyOptionUpdatesInternal(target[key], updateValue, fullPath, collector, bubbleUp, parentPathsToNotify);
48
+ const grandChildChanged = applyOptionUpdatesInternal(target[key], updateValue, fullPath, collector, bubbleUp);
49
+ if (!oldValueIsObject) {
50
+ // Overwriting a primitive with an object is always a change.
51
+ childChanged = true;
52
+ // If the object was empty (grandChildChanged is false), we still need to report it.
53
+ if (!grandChildChanged) {
54
+ collector === null || collector === void 0 ? void 0 : collector(fullPath, target[key], oldValue);
55
+ }
56
+ }
57
+ else {
58
+ childChanged = grandChildChanged;
59
+ }
50
60
  }
51
61
  else {
62
+ // Handle primitive update
52
63
  target[key] = updateValue;
53
64
  if (!(0, lodash_es_1.isEqual)(updateValue, oldValue)) {
54
65
  collector === null || collector === void 0 ? void 0 : collector(fullPath, updateValue, oldValue);
55
- if (bubbleUp)
56
- collectParentPaths(basePath, parentPathsToNotify);
66
+ childChanged = true;
57
67
  }
58
68
  }
69
+ if (childChanged) {
70
+ hasChange = true;
71
+ }
59
72
  });
60
- }
61
- /**
62
- * Collects all parent paths of a given path and adds them to the provided set.
63
- */
64
- function collectParentPaths(path, set) {
65
- if (!path) {
66
- set.add(''); // Root path
67
- return;
68
- }
69
- const parts = path.split('.');
70
- for (let i = parts.length; i >= 0; i--) {
71
- set.add(parts.slice(0, i).join('.'));
73
+ // Bubbling: Notify if any child changed in this branch
74
+ // The recursion naturally ensures this happens in "deepest-first" (post-order) sequence.
75
+ if (hasChange && bubbleUp && basePath !== '') {
76
+ // Current target is now fully updated for this scope.
77
+ collector === null || collector === void 0 ? void 0 : collector(basePath, (0, lodash_es_1.cloneDeep)(target), undefined);
72
78
  }
79
+ return hasChange;
73
80
  }
@@ -15,8 +15,8 @@ const svg_1 = require("./svg");
15
15
  function exportToPNGString(svg_2) {
16
16
  return __awaiter(this, arguments, void 0, function* (svg, options = {}) {
17
17
  var _a;
18
- const { dpr = (_a = globalThis.devicePixelRatio) !== null && _a !== void 0 ? _a : 2 } = options;
19
- const node = yield (0, svg_1.exportToSVG)(svg);
18
+ const { dpr = (_a = globalThis.devicePixelRatio) !== null && _a !== void 0 ? _a : 2, removeBackground = false } = options;
19
+ const node = yield (0, svg_1.exportToSVG)(svg, { removeBackground });
20
20
  const { width, height } = (0, utils_1.getViewBox)(node);
21
21
  return new Promise((resolve, reject) => {
22
22
  try {
@@ -22,7 +22,7 @@ function exportToSVGString(svg_1) {
22
22
  }
23
23
  function exportToSVG(svg_1) {
24
24
  return __awaiter(this, arguments, void 0, function* (svg, options = {}) {
25
- const { embedResources = true, removeIds = false } = options;
25
+ const { removeBackground = false, embedResources = true, removeIds = false, } = options;
26
26
  const clonedSVG = svg.cloneNode(true);
27
27
  const { width, height } = (0, utils_1.getViewBox)(svg);
28
28
  (0, utils_1.setAttributes)(clonedSVG, { width, height });
@@ -34,6 +34,9 @@ function exportToSVG(svg_1) {
34
34
  yield embedIcons(clonedSVG);
35
35
  }
36
36
  yield (0, font_1.embedFonts)(clonedSVG, embedResources);
37
+ if (removeBackground) {
38
+ removeSVGBackground(clonedSVG);
39
+ }
37
40
  cleanSVG(clonedSVG);
38
41
  return clonedSVG;
39
42
  });
@@ -288,6 +291,11 @@ function cleanSVG(svg) {
288
291
  removeUselessAttrs(svg);
289
292
  clearDataset(svg);
290
293
  }
294
+ function removeSVGBackground(svg) {
295
+ svg.style.removeProperty('background-color');
296
+ const background = (0, utils_1.getElementByRole)(svg, "background" /* ElementTypeEnum.Background */);
297
+ background === null || background === void 0 ? void 0 : background.remove();
298
+ }
291
299
  function removeBtnGroup(svg) {
292
300
  const btnGroup = (0, utils_1.getElementByRole)(svg, "btns-group" /* ElementTypeEnum.BtnsGroup */);
293
301
  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 {};
@@ -105,18 +105,31 @@ class Infographic {
105
105
  * Compose the SVG template
106
106
  */
107
107
  compose(parsedOptions) {
108
- const { design, data } = parsedOptions;
108
+ var _a, _b;
109
+ const { design, data, themeConfig } = parsedOptions;
109
110
  const { title, item, items, structure } = design;
110
111
  const { component: Structure, props: structureProps } = structure;
111
112
  const Title = title.component;
112
113
  const Item = item.component;
113
114
  const Items = items.map((it) => it.component);
114
- const svg = (0, jsx_1.renderSVG)((0, jsx_runtime_1.jsx)(Structure, Object.assign({ data: data, Title: Title, Item: Item, Items: Items, options: parsedOptions }, structureProps)));
115
- const template = (0, utils_1.parseSVG)(svg);
116
- if (!template) {
117
- throw new Error('Failed to parse SVG template');
115
+ // Apply theme font-family before measurement so measureText uses the correct font
116
+ 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'];
117
+ const previousDefaultFont = renderer_1.DEFAULT_FONT;
118
+ if (themeFontFamily)
119
+ (0, renderer_1.setDefaultFont)(themeFontFamily);
120
+ try {
121
+ const svg = (0, jsx_1.renderSVG)((0, jsx_runtime_1.jsx)(Structure, Object.assign({ data: data, Title: Title, Item: Item, Items: Items, options: parsedOptions }, structureProps)));
122
+ const template = (0, utils_1.parseSVG)(svg);
123
+ if (!template) {
124
+ throw new Error('Failed to parse SVG template');
125
+ }
126
+ return template;
127
+ }
128
+ finally {
129
+ // Restore previous default font
130
+ if (themeFontFamily)
131
+ (0, renderer_1.setDefaultFont)(previousDefaultFont);
118
132
  }
119
- return template;
120
133
  }
121
134
  getTypes() {
122
135
  const parsedOptions = this.parsedOptions;
@@ -114,27 +114,47 @@ function parseSyntax(input) {
114
114
  const parsed = (0, relations_1.parseRelationsNode)(relationsNode, errors, 'data.relations');
115
115
  if (parsed.relations.length > 0 || parsed.items.length > 0) {
116
116
  const current = ((_a = options.data) !== null && _a !== void 0 ? _a : {});
117
- const existingItems = Array.isArray(current.items)
118
- ? current.items
119
- : [];
120
- const normalizedItems = normalizeItems(existingItems);
121
- const itemMap = new Map();
122
- normalizedItems.forEach((item) => {
123
- if (item.id)
124
- itemMap.set(item.id, item);
125
- });
126
- parsed.items.forEach((item) => {
127
- const existing = itemMap.get(item.id);
128
- if (existing) {
129
- if (!existing.label && item.label)
130
- existing.label = item.label;
117
+ // 优先使用已存在的数据列表 (sequences, lists, etc.)
118
+ const dataKeys = Object.keys(schema_1.DataSchema.fields).filter((key) => key !== 'items' && key !== 'relations');
119
+ let hasStructuredData = false;
120
+ // 尝试找到一个非空的数据源
121
+ for (const key of dataKeys) {
122
+ if (Array.isArray(current[key]) && current[key].length > 0) {
123
+ hasStructuredData = true;
124
+ break;
131
125
  }
132
- else {
133
- normalizedItems.push(item);
134
- itemMap.set(item.id, item);
135
- }
136
- });
137
- current.items = normalizedItems;
126
+ }
127
+ // 如果 items 已包含层级结构数据(带 children),也视为结构化数据
128
+ if (!hasStructuredData &&
129
+ Array.isArray(current.items) &&
130
+ current.items.length > 0 &&
131
+ current.items.some((item) => Array.isArray(item.children) && item.children.length > 0)) {
132
+ hasStructuredData = true;
133
+ }
134
+ // 如果没有找到其他数据源,才尝试合并 items
135
+ if (!hasStructuredData) {
136
+ const existingItems = Array.isArray(current.items)
137
+ ? current.items
138
+ : [];
139
+ const normalizedItems = normalizeItems(existingItems);
140
+ const itemMap = new Map();
141
+ normalizedItems.forEach((item) => {
142
+ if (item.id)
143
+ itemMap.set(item.id, item);
144
+ });
145
+ parsed.items.forEach((item) => {
146
+ const existing = itemMap.get(item.id);
147
+ if (existing) {
148
+ if (!existing.label && item.label)
149
+ existing.label = item.label;
150
+ }
151
+ else {
152
+ normalizedItems.push(item);
153
+ itemMap.set(item.id, item);
154
+ }
155
+ });
156
+ current.items = normalizedItems;
157
+ }
138
158
  current.relations = parsed.relations;
139
159
  options.data = current;
140
160
  }