1 | import EventEmitter from '@antv/event-emitter';
|
2 | import type { AABB, BaseStyleProps } from '@antv/g';
|
3 | import type { Plugin } from '../plugins/types';
|
4 | import type { BehaviorOptions, ComboData, ComboOptions, EdgeData, EdgeOptions, GraphData, GraphOptions, LayoutOptions, NodeData, NodeOptions, PluginOptions, ThemeOptions, TransformOptions } from '../spec';
|
5 | import type { UpdateBehaviorOption } from '../spec/behavior';
|
6 | import type { UpdatePluginOption } from '../spec/plugin';
|
7 | import type { UpdateTransformOption } from '../spec/transform';
|
8 | import type { DataID, EdgeDirection, ElementDatum, ElementType, FitViewOptions, HierarchyKey, ID, IEvent, NodeLikeData, PartialEdgeData, PartialGraphData, PartialNodeLikeData, Point, State, ViewportAnimationEffectTiming } from '../types';
|
9 | import type { DataURLOptions } from './canvas';
|
10 | import { Canvas } from './canvas';
|
11 | import type { CollapseExpandNodeOptions } from './element';
|
12 | export declare class Graph extends EventEmitter {
|
13 | private options;
|
14 | |
15 |
|
16 |
|
17 | static defaultOptions: GraphOptions;
|
18 | |
19 |
|
20 |
|
21 |
|
22 |
|
23 | rendered: boolean;
|
24 | |
25 |
|
26 |
|
27 |
|
28 |
|
29 | destroyed: boolean;
|
30 | private context;
|
31 | constructor(options: GraphOptions);
|
32 | /**
|
33 | * <zh/> 获取配置项
|
34 | *
|
35 | * <en/> Get options
|
36 | * @returns <zh/> 配置项 | <en/> options
|
37 | * @apiCategory option
|
38 | */
|
39 | getOptions(): GraphOptions;
|
40 | /**
|
41 | * <zh/> 设置配置项
|
42 | *
|
43 | * <en/> Set options
|
44 | * @param options - <zh/> 配置项 | <en/> options
|
45 | * @remarks
|
46 | * <zh/> 要更新 devicePixelRatio、container 属性请销毁后重新创建实例
|
47 | *
|
48 | * <en/> To update devicePixelRatio and container properties, please destroy and recreate the instance
|
49 | * @apiCategory option
|
50 | */
|
51 | setOptions(options: GraphOptions): void;
|
52 | private _setOptions;
|
53 | /**
|
54 | * <zh/> 获取当前画布容器的尺寸
|
55 | *
|
56 | * <en/> Get the size of the current canvas container
|
57 | * @returns <zh/> 画布尺寸 | <en/> canvas size
|
58 | * @apiCategory canvas
|
59 | */
|
60 | getSize(): [number, number];
|
61 | /**
|
62 | * <zh/> 设置当前画布容器的尺寸
|
63 | *
|
64 | * <en/> Set the size of the current canvas container
|
65 | * @param width - <zh/> 画布宽度 | <en/> canvas width
|
66 | * @param height - <zh/> 画布高度 | <en/> canvas height
|
67 | * @apiCategory canvas
|
68 | */
|
69 | setSize(width: number, height: number): void;
|
70 | /**
|
71 | * <zh/> 设置当前图的缩放区间
|
72 | *
|
73 | * <en/> Get the zoom range of the current graph
|
74 | * @param zoomRange - <zh/> 缩放区间 | <en/> zoom range
|
75 | * @apiCategory viewport
|
76 | */
|
77 | setZoomRange(zoomRange: GraphOptions['zoomRange']): void;
|
78 | /**
|
79 | * <zh/> 获取当前图的缩放区间
|
80 | *
|
81 | * <en/> Get the zoom range of the current graph
|
82 | * @returns <zh/> 缩放区间 | <en/> zoom range
|
83 | * @apiCategory viewport
|
84 | */
|
85 | getZoomRange(): GraphOptions['zoomRange'];
|
86 | /**
|
87 | * <zh/> 设置节点样式映射
|
88 | *
|
89 | * <en/> Set node mapper
|
90 | * @param node - <zh/> 节点配置 | <en/> node options
|
91 | * @remarks
|
92 | * <zh/> 即 `options.node` 的值
|
93 | *
|
94 | * <en/> The value of `options.node`
|
95 | * @apiCategory element
|
96 | */
|
97 | setNode(node: NodeOptions): void;
|
98 | /**
|
99 | * <zh/> 设置边样式映射
|
100 | *
|
101 | * <en/> Set edge mapper
|
102 | * @param edge - <zh/> 边配置 | <en/> edge options
|
103 | * @remarks
|
104 | * <zh/> 即 `options.edge` 的值
|
105 | *
|
106 | * <en/> The value of `options.edge`
|
107 | * @apiCategory element
|
108 | */
|
109 | setEdge(edge: EdgeOptions): void;
|
110 | /**
|
111 | * <zh/> 设置组合样式映射
|
112 | *
|
113 | * <en/> Set combo mapper
|
114 | * @param combo - <zh/> 组合配置 | <en/> combo options
|
115 | * @remarks
|
116 | * <zh/> 即 `options.combo` 的值
|
117 | *
|
118 | * <en/> The value of `options.combo`
|
119 | * @apiCategory element
|
120 | */
|
121 | setCombo(combo: ComboOptions): void;
|
122 | /**
|
123 | * <zh/> 获取主题
|
124 | *
|
125 | * <en/> Get theme
|
126 | * @returns <zh/> 当前主题 | <en/> current theme
|
127 | * @apiCategory theme
|
128 | */
|
129 | getTheme(): ThemeOptions;
|
130 | /**
|
131 | * <zh/> 设置主题
|
132 | *
|
133 | * <en/> Set theme
|
134 | * @param theme - <zh/> 主题名 | <en/> theme name
|
135 | * @example
|
136 | * ```ts
|
137 | * graph.setTheme('dark');
|
138 | * ```
|
139 | * @apiCategory theme
|
140 | */
|
141 | setTheme(theme: ThemeOptions | ((prev: ThemeOptions) => ThemeOptions)): void;
|
142 | /**
|
143 | * <zh/> 设置布局
|
144 | *
|
145 | * <en/> Set layout
|
146 | * @param layout - <zh/> 布局配置 | <en/> layout options
|
147 | * @example
|
148 | * ```ts
|
149 | * graph.setLayout({
|
150 | * type: 'dagre',
|
151 | * })
|
152 | * ```
|
153 | * @apiCategory layout
|
154 | */
|
155 | setLayout(layout: LayoutOptions | ((prev: LayoutOptions) => LayoutOptions)): void;
|
156 | /**
|
157 | * <zh/> 获取布局配置
|
158 | *
|
159 | * <en/> Get layout options
|
160 | * @returns <zh/> 布局配置 | <en/> layout options
|
161 | * @apiCategory layout
|
162 | */
|
163 | getLayout(): LayoutOptions;
|
164 | /**
|
165 | * <zh/> 设置交互
|
166 | *
|
167 | * <en/> Set behaviors
|
168 | * @param behaviors - <zh/> 交互配置 | <en/> behavior options
|
169 | * @remarks
|
170 | * <zh/> 设置的交互会全量替换原有的交互,如果需要新增交互可以使用如下方式:
|
171 | *
|
172 | * <en/> The set behavior will completely replace the original behavior. If you need to add behavior, you can use the following method:
|
173 | *
|
174 | * ```ts
|
175 | * graph.setBehaviors((behaviors) => [...behaviors, { type: 'zoom-canvas' }])
|
176 | * ```
|
177 | * @apiCategory behavior
|
178 | */
|
179 | setBehaviors(behaviors: BehaviorOptions | ((prev: BehaviorOptions) => BehaviorOptions)): void;
|
180 | /**
|
181 | * <zh/> 更新指定的交互配置
|
182 | *
|
183 | * <en/> Update specified behavior options
|
184 | * @param behavior - <zh/> 交互配置 | <en/> behavior options
|
185 | * @remarks
|
186 | * <zh/> 如果要更新一个交互,那么必须在交互配置中指定 key 字段,例如:
|
187 | *
|
188 | * <en/> If you want to update a behavior, you must specify the key field in the behavior options, for example:
|
189 | * ```ts
|
190 | * {
|
191 | * behaviors: [{ type: 'zoom-canvas', key: 'zoom-canvas' }]
|
192 | * }
|
193 | *
|
194 | * graph.updateBehavior({ key: 'zoom-canvas', enable: false })
|
195 | * ```
|
196 | * @apiCategory behavior
|
197 | */
|
198 | updateBehavior(behavior: UpdateBehaviorOption): void;
|
199 | /**
|
200 | * <zh/> 获取交互配置
|
201 | *
|
202 | * <en/> Get behaviors options
|
203 | * @returns <zh/> 交互配置 | <en/> behavior options
|
204 | * @apiCategory behavior
|
205 | */
|
206 | getBehaviors(): BehaviorOptions;
|
207 | /**
|
208 | * <zh/> 设置插件配置
|
209 | *
|
210 | * <en/> Set plugins options
|
211 | * @param plugins - <zh/> 插件配置 | <en/> plugin options
|
212 | * @remarks
|
213 | * <zh/> 设置的插件会全量替换原有的插件配置,如果需要新增插件可以使用如下方式:
|
214 | *
|
215 | * <en/> The set plugin will completely replace the original plugin configuration. If you need to add a plugin, you can use the following method:
|
216 | * ```ts
|
217 | * graph.setPlugins((plugins) => [...plugins, { key: 'grid-line' }])
|
218 | * ```
|
219 | * @apiCategory plugin
|
220 | */
|
221 | setPlugins(plugins: PluginOptions | ((prev: PluginOptions) => PluginOptions)): void;
|
222 | /**
|
223 | * <zh/> 更新插件配置
|
224 | *
|
225 | * <en/> Update plugin options
|
226 | * @param plugin - <zh/> 插件配置 | <en/> plugin options
|
227 | * @remarks
|
228 | * <zh/> 如果要更新一个插件,那么必须在插件配置中指定 key 字段,例如:
|
229 | *
|
230 | * <en/> If you want to update a plugin, you must specify the key field in the plugin options, for example:
|
231 | * ```ts
|
232 | * {
|
233 | * plugins: [{ key: 'grid-line' }]
|
234 | * }
|
235 | *
|
236 | * graph.updatePlugin({ key: 'grid-line', follow: true })
|
237 | * ```
|
238 | * @apiCategory plugin
|
239 | */
|
240 | updatePlugin(plugin: UpdatePluginOption): void;
|
241 | /**
|
242 | * <zh/> 获取插件配置
|
243 | *
|
244 | * <en/> Get plugins options
|
245 | * @returns <zh/> 插件配置 | <en/> plugin options
|
246 | * @apiCategory plugin
|
247 | */
|
248 | getPlugins(): PluginOptions;
|
249 | /**
|
250 | * <zh/> 获取插件实例
|
251 | *
|
252 | * <en/> Get plugin instance
|
253 | * @param key - <zh/> 插件 key(在配置 plugin 时需要手动传入指定) | <en/> plugin key(need to be specified manually when configuring plugin)
|
254 | * @returns <zh/> 插件实例 | <en/> plugin instance
|
255 | * @remarks
|
256 | * <zh/> 一些插件提供了 API 方法可供调用,例如全屏插件可以调用 `request` 和 `exit` 方法来请求和退出全屏
|
257 | *
|
258 | * <en/> Some plugins provide API methods for calling, such as the full-screen plugin can call the `request` and `exit` methods to request and exit full-screen
|
259 | * ```ts
|
260 | * const fullscreen = graph.getPluginInstance('fullscreen');
|
261 | *
|
262 | * fullscreen.request();
|
263 | *
|
264 | * fullscreen.exit();
|
265 | * ```
|
266 | * @apiCategory plugin
|
267 | */
|
268 | getPluginInstance<T extends Plugin>(key: string): T;
|
269 | /**
|
270 | * <zh/> 设置数据转换器
|
271 | *
|
272 | * <en/> Set data transforms
|
273 | * @param transforms - <zh/> 数据转换配置 | <en/> data transform options
|
274 | * @remarks
|
275 | * <zh/> 数据转换器能够在图渲染过程中执行数据转换,目前支持在渲染前对绘制数据进行转化。
|
276 | *
|
277 | * <en/> Data transforms can perform data transformation during the rendering process of the graph. Currently, it supports transforming the drawing data before rendering.
|
278 | * @apiCategory transform
|
279 | */
|
280 | setTransforms(transforms: TransformOptions | ((prev: TransformOptions) => TransformOptions)): void;
|
281 | /**
|
282 | * <zh/> 更新数据转换器
|
283 | *
|
284 | * <en/> Update data transform
|
285 | * @param transform - <zh/> 数据转换器配置 | <en/> data transform options
|
286 | * @apiCategory transform
|
287 | */
|
288 | updateTransform(transform: UpdateTransformOption): void;
|
289 | /**
|
290 | * <zh/> 获取数据转换器配置
|
291 | *
|
292 | * <en/> Get data transforms options
|
293 | * @returns <zh/> 数据转换配置 | <en/> data transform options
|
294 | * @apiCategory transform
|
295 | */
|
296 | getTransforms(): TransformOptions;
|
297 | /**
|
298 | * <zh/> 获取图数据
|
299 | *
|
300 | * <en/> Get graph data
|
301 | * @returns <zh/> 图数据 | <en/> Graph data
|
302 | * <zh/> 获取当前图的数据,包括节点、边、组合数据
|
303 | *
|
304 | * <en/> Get the data of the current graph, including node, edge, and combo data
|
305 | * @apiCategory data
|
306 | */
|
307 | getData(): Required<GraphData>;
|
308 | /**
|
309 | * <zh/> 获取单个元素数据
|
310 | *
|
311 | * <en/> Get element data by ID
|
312 | * @param id - <zh/> 元素 ID | <en/> element ID
|
313 | * @returns <zh/> 元素数据 | <en/> element data
|
314 | * @remarks
|
315 | * <zh/> 直接获取元素的数据而不必考虑元素类型
|
316 | *
|
317 | * <en/> Get element data directly without considering the element type
|
318 | * @apiCategory data
|
319 | */
|
320 | getElementData(id: ID): ElementDatum;
|
321 | /**
|
322 | * <zh/> 批量获取多个元素数据
|
323 | *
|
324 | * <en/> Get multiple element data in batch
|
325 | * @param ids - <zh/> 元素 ID 数组 | <en/> element ID array
|
326 | * @remarks
|
327 | * <zh/> 直接获取元素的数据而不必考虑元素类型
|
328 | *
|
329 | * <en/> Get element data directly without considering the element type
|
330 | * @apiCategory data
|
331 | */
|
332 | getElementData(ids: ID[]): ElementDatum[];
|
333 | /**
|
334 | * <zh/> 获取所有节点数据
|
335 | *
|
336 | * <en/> Get all node data
|
337 | * @returns <zh/> 节点数据 | <en/> node data
|
338 | * @apiCategory data
|
339 | */
|
340 | getNodeData(): NodeData[];
|
341 | /**
|
342 | * <zh/> 获取单个节点数据
|
343 | *
|
344 | * <en/> Get single node data
|
345 | * @param id - <zh/> 节点 ID | <en/> node ID
|
346 | * @returns <zh/> 节点数据 | <en/> node data
|
347 | * @example
|
348 | * ```ts
|
349 | * const node1 = graph.getNodeData('node-1');
|
350 | * ```
|
351 | * @apiCategory data
|
352 | */
|
353 | getNodeData(id: ID): NodeData;
|
354 | /**
|
355 | * <zh/> 批量获取多个节点数据
|
356 | *
|
357 | * <en/> Get multiple node data in batch
|
358 | * @param ids - <zh/> 节点 ID 数组 | <en/> node ID array
|
359 | * @returns <zh/> 节点数据 | <en/> node data
|
360 | * @example
|
361 | * ```ts
|
362 | * const [node1, node2] = graph.getNodeData(['node-1', 'node-2']);
|
363 | * ```
|
364 | * @apiCategory data
|
365 | */
|
366 | getNodeData(ids: ID[]): NodeData[];
|
367 | /**
|
368 | * <zh/> 获取所有边数据
|
369 | *
|
370 | * <en/> Get all edge data
|
371 | * @returns <zh/> 边数据 | <en/> edge data
|
372 | * @apiCategory data
|
373 | */
|
374 | getEdgeData(): EdgeData[];
|
375 | /**
|
376 | * <zh/> 获取单条边数据
|
377 | *
|
378 | * <en/> Get single edge data
|
379 | * @param id - <zh/> 边 ID | <en/> edge ID
|
380 | * @returns <zh/> 边数据 | <en/> edge data
|
381 | * @example
|
382 | * ```ts
|
383 | * const edge1 = graph.getEdgeData('edge-1');
|
384 | * ```
|
385 | * @apiCategory data
|
386 | */
|
387 | getEdgeData(id: ID): EdgeData;
|
388 | /**
|
389 | * <zh/> 批量获取多条边数据
|
390 | *
|
391 | * <en/> Get multiple edge data in batch
|
392 | * @param ids - <zh/> 边 ID 数组 | <en/> edge ID array
|
393 | * @returns <zh/> 边数据 | <en/> edge data
|
394 | * @example
|
395 | * ```ts
|
396 | * const [edge1, edge2] = graph.getEdgeData(['edge-1', 'edge-2']);
|
397 | * ```
|
398 | * @apiCategory data
|
399 | */
|
400 | getEdgeData(ids: ID[]): EdgeData[];
|
401 | /**
|
402 | * <zh/> 获取所有组合数据
|
403 | *
|
404 | * <en/> Get all combo data
|
405 | * @returns <zh/> 组合数据 | <en/> combo data
|
406 | * @apiCategory data
|
407 | */
|
408 | getComboData(): ComboData[];
|
409 | /**
|
410 | * <zh/> 获取单个组合数据
|
411 | *
|
412 | * <en/> Get single combo data
|
413 | * @param id - <zh/> 组合ID | <en/> combo ID
|
414 | * @returns <zh/> 组合数据 | <en/> combo data
|
415 | * @example
|
416 | * ```ts
|
417 | * const combo1 = graph.getComboData('combo-1');
|
418 | * ```
|
419 | * @apiCategory data
|
420 | */
|
421 | getComboData(id: ID): ComboData;
|
422 | /**
|
423 | * <zh/> 批量获取多个组合数据
|
424 | *
|
425 | * <en/> Get multiple combo data in batch
|
426 | * @param ids - <zh/> 组合ID 数组 | <en/> combo ID array
|
427 | * @returns <zh/> 组合数据 | <en/> combo data
|
428 | * @example
|
429 | * ```ts
|
430 | * const [combo1, combo2] = graph.getComboData(['combo-1', 'combo-2']);
|
431 | * ```
|
432 | * @apiCategory data
|
433 | */
|
434 | getComboData(ids: ID[]): ComboData[];
|
435 | /**
|
436 | * <zh/> 设置全量数据
|
437 | *
|
438 | * <en/> Set full data
|
439 | * @param data - <zh/> 数据 | <en/> data
|
440 | * @remarks
|
441 | * <zh/> 设置全量数据会替换当前图中的所有数据,G6 会自动进行数据差异计算
|
442 | *
|
443 | * <en/> Setting full data will replace all data in the current graph, and G6 will automatically calculate the data difference
|
444 | * @apiCategory data
|
445 | */
|
446 | setData(data: GraphData | ((prev: GraphData) => GraphData)): void;
|
447 | /**
|
448 | * <zh/> 新增元素数据
|
449 | *
|
450 | * <en/> Add element data
|
451 | * @param data - <zh/> 元素数据 | <en/> element data
|
452 | * @example
|
453 | * ```ts
|
454 | * graph.addData({
|
455 | * nodes: [{ id: 'node-1' }, { id: 'node-2' }],
|
456 | * edges: [{ source: 'node-1', target: 'node-2' }],
|
457 | * });
|
458 | * ```
|
459 | * @apiCategory data
|
460 | */
|
461 | addData(data: GraphData | ((prev: GraphData) => GraphData)): void;
|
462 | /**
|
463 | * <zh/> 新增节点数据
|
464 | *
|
465 | * <en/> Add node data
|
466 | * @param data - <zh/> 节点数据 | <en/> node data
|
467 | * @example
|
468 | * ```ts
|
469 | * graph.addNodeData([{ id: 'node-1' }, { id: 'node-2' }]);
|
470 | * ```
|
471 | * @apiCategory data
|
472 | */
|
473 | addNodeData(data: NodeData[] | ((prev: NodeData[]) => NodeData[])): void;
|
474 | /**
|
475 | * <zh/> 新增边数据
|
476 | *
|
477 | * <en/> Add edge data
|
478 | * @param data - <zh/> 边数据 | <en/> edge data
|
479 | * @example
|
480 | * ```ts
|
481 | * graph.addEdgeData([{ source: 'node-1', target: 'node-2' }]);
|
482 | * ```
|
483 | * @apiCategory data
|
484 | */
|
485 | addEdgeData(data: EdgeData[] | ((prev: EdgeData[]) => EdgeData[])): void;
|
486 | /**
|
487 | * <zh/> 新增组合数据
|
488 | *
|
489 | * <en/> Add combo data
|
490 | * @param data - <zh/> 组合数据 | <en/> combo data
|
491 | * @example
|
492 | * ```ts
|
493 | * graph.addComboData([{ id: 'combo-1' }]);
|
494 | * ```
|
495 | * @apiCategory data
|
496 | */
|
497 | addComboData(data: ComboData[] | ((prev: ComboData[]) => ComboData[])): void;
|
498 | /**
|
499 | * <zh/> 为树图节点添加子节点数据
|
500 | *
|
501 | * <en/> Add child node data to the tree node
|
502 | * @param parentId - <zh/> 父节点 ID | <en/> parent node ID
|
503 | * @param childrenData - <zh/> 子节点数据 | <en/> child node data
|
504 | * @remarks
|
505 | * <zh/> 为组合添加子节点使用 addNodeData / addComboData 方法
|
506 | *
|
507 | * <en/> Use addNodeData / addComboData method to add child nodes to the combo
|
508 | * @apiCategory data
|
509 | */
|
510 | addChildrenData(parentId: ID, childrenData: NodeData[]): void;
|
511 | /**
|
512 | * <zh/> 更新元素数据
|
513 | *
|
514 | * <en/> Update element data
|
515 | * @param data - <zh/> 元素数据 | <en/> element data
|
516 | * @remarks
|
517 | * <zh/> 只需要传入需要更新的数据即可,不必传入完整的数据
|
518 | *
|
519 | * <en/> Just pass in the data that needs to be updated, no need to pass in the complete data
|
520 | * @example
|
521 | * ```ts
|
522 | * graph.updateData({
|
523 | * nodes: [{ id: 'node-1', style: { x: 100, y: 100 } }],
|
524 | * edges: [{ id: 'edge-1', style: { lineWidth: 2 } }]
|
525 | * });
|
526 | * ```
|
527 | * @apiCategory data
|
528 | */
|
529 | updateData(data: PartialGraphData | ((prev: GraphData) => PartialGraphData)): void;
|
530 | /**
|
531 | * <zh/> 更新节点数据
|
532 | *
|
533 | * <en/> Update node data
|
534 | * @param data - <zh/> 节点数据 | <en/> node data
|
535 | * @remarks
|
536 | * <zh/> 只需要传入需要更新的数据即可,不必传入完整的数据
|
537 | *
|
538 | * <en/> Just pass in the data that needs to be updated, no need to pass in the complete data
|
539 | * @example
|
540 | * ```ts
|
541 | * graph.updateNodeData([{ id: 'node-1', style: { x: 100, y: 100 } }]);
|
542 | * ```
|
543 | * @apiCategory data
|
544 | */
|
545 | updateNodeData(data: PartialNodeLikeData<NodeData>[] | ((prev: NodeData[]) => PartialNodeLikeData<NodeData>[])): void;
|
546 | /**
|
547 | * <zh/> 更新边数据
|
548 | *
|
549 | * <en/> Update edge data
|
550 | * @param data - <zh/> 边数据 | <en/> edge data
|
551 | * @remarks
|
552 | * <zh/> 只需要传入需要更新的数据即可,不必传入完整的数据
|
553 | *
|
554 | * <en/> Just pass in the data that needs to be updated, no need to pass in the complete data
|
555 | * @example
|
556 | * ```ts
|
557 | * graph.updateEdgeData([{ id: 'edge-1', style: { lineWidth: 2 } }]);
|
558 | * ```
|
559 | * @apiCategory data
|
560 | */
|
561 | updateEdgeData(data: PartialEdgeData<EdgeData>[] | ((prev: EdgeData[]) => PartialEdgeData<EdgeData>[])): void;
|
562 | /**
|
563 | * <zh/> 更新组合数据
|
564 | *
|
565 | * <en/> Update combo data
|
566 | * @param data - <zh/> 组合数据 | <en/> combo data
|
567 | * @remarks
|
568 | * <zh/> 只需要传入需要更新的数据即可,不必传入完整的数据
|
569 | *
|
570 | * <en/> Just pass in the data that needs to be updated, no need to pass in the complete data
|
571 | * @example
|
572 | * ```ts
|
573 | * graph.updateComboData([{ id: 'combo-1', style: { x: 100, y: 100 } }]);
|
574 | * ```
|
575 | * @apiCategory data
|
576 | */
|
577 | updateComboData(data: PartialNodeLikeData<ComboData>[] | ((prev: ComboData[]) => PartialNodeLikeData<ComboData>[])): void;
|
578 | /**
|
579 | * <zh/> 删除元素数据
|
580 | *
|
581 | * <en/> Remove element data
|
582 | * @param ids - <zh/> 元素 ID 数组 | <en/> element ID array
|
583 | * @example
|
584 | * ```ts
|
585 | * graph.removeData({
|
586 | * nodes: ['node-1', 'node-2'],
|
587 | * edges: ['edge-1'],
|
588 | * });
|
589 | * ```
|
590 | * @apiCategory data
|
591 | */
|
592 | removeData(ids: DataID | ((data: GraphData) => DataID)): void;
|
593 | /**
|
594 | * <zh/> 删除节点数据
|
595 | *
|
596 | * <en/> Remove node data
|
597 | * @param ids - <zh/> 节点 ID 数组 | <en/> node ID array
|
598 | * @example
|
599 | * ```ts
|
600 | * graph.removeNodeData(['node-1', 'node-2']);
|
601 | * ```
|
602 | * @apiCategory data
|
603 | */
|
604 | removeNodeData(ids: ID[] | ((data: NodeData[]) => ID[])): void;
|
605 | /**
|
606 | * <zh/> 删除边数据
|
607 | *
|
608 | * <en/> Remove edge data
|
609 | * @param ids - <zh/> 边 ID 数组 | <en/> edge ID array
|
610 | * @remarks
|
611 | * <zh/> 如果传入边数据时仅提供了 source 和 target,那么需要通过 `idOf` 方法获取边的实际 ID
|
612 | *
|
613 | * <en/> If only the source and target are provided when passing in the edge data, you need to get the actual ID of the edge through the `idOf` method
|
614 | * @example
|
615 | * ```ts
|
616 | * graph.removeEdgeData(['edge-1']);
|
617 | * ```
|
618 | * @apiCategory data
|
619 | */
|
620 | removeEdgeData(ids: ID[] | ((data: EdgeData[]) => ID[])): void;
|
621 | /**
|
622 | * <zh/> 删除组合数据
|
623 | *
|
624 | * <en/> Remove combo data
|
625 | * @param ids - <zh/> 组合 ID 数组 | <en/> 组合 ID array
|
626 | * @example
|
627 | * ```ts
|
628 | * graph.removeComboData(['combo-1']);
|
629 | * ```
|
630 | * @apiCategory data
|
631 | */
|
632 | removeComboData(ids: ID[] | ((data: ComboData[]) => ID[])): void;
|
633 | /**
|
634 | * <zh/> 获取元素类型
|
635 | *
|
636 | * <en/> Get element type
|
637 | * @param id - <zh/> 元素 ID | <en/> element ID
|
638 | * @returns <zh/> 元素类型 | <en/> element type
|
639 | * @apiCategory element
|
640 | */
|
641 | getElementType(id: ID): ElementType;
|
642 | /**
|
643 | * <zh/> 获取节点或组合关联边的数据
|
644 | *
|
645 | * <en/> Get edge data related to the node or combo
|
646 | * @param id - <zh/> 节点或组合ID | <en/> node or combo ID
|
647 | * @param direction - <zh/> 边的方向 | <en/> edge direction
|
648 | * @returns <zh/> 边数据 | <en/> edge data
|
649 | * @apiCategory data
|
650 | */
|
651 | getRelatedEdgesData(id: ID, direction?: EdgeDirection): EdgeData[];
|
652 | /**
|
653 | * <zh/> 获取节点或组合的一跳邻居节点数据
|
654 | *
|
655 | * <en/> Get the one-hop neighbor node data of the node or combo
|
656 | * @param id - <zh/> 节点或组合ID | <en/> node or combo ID
|
657 | * @returns <zh/> 邻居节点数据 | <en/> neighbor node data
|
658 | * @apiCategory data
|
659 | */
|
660 | getNeighborNodesData(id: ID): NodeData[];
|
661 | /**
|
662 | * <zh/> 获取节点或组合的祖先元素数据
|
663 | *
|
664 | * <en/> Get the ancestor element data of the node or combo
|
665 | * @param id - <zh/> 节点或组合ID | <en/> node or combo ID
|
666 | * @param hierarchy - <zh/> 指定树图层级关系还是组合层级关系 | <en/> specify tree or combo hierarchy relationship
|
667 | * @returns <zh/> 祖先元素数据 | <en/> ancestor element data
|
668 | * @remarks
|
669 | * <zh/> 数组中的顺序是从父节点到祖先节点
|
670 | *
|
671 | * <en/> The order in the array is from the parent node to the ancestor node
|
672 | * @apiCategory data
|
673 | */
|
674 | getAncestorsData(id: ID, hierarchy: HierarchyKey): NodeLikeData[];
|
675 | /**
|
676 | * <zh/> 获取节点或组合的父元素数据
|
677 | *
|
678 | * <en/> Get the parent element data of the node or combo
|
679 | * @param id - <zh/> 节点或组合ID | <en/> node or combo ID
|
680 | * @param hierarchy - <zh/> 指定树图层级关系还是组合层级关系 | <en/> specify tree or combo hierarchy relationship
|
681 | * @returns <zh/> 父元素数据 | <en/> parent element data
|
682 | * @apiCategory data
|
683 | */
|
684 | getParentData(id: ID, hierarchy: HierarchyKey): NodeLikeData | undefined;
|
685 | /**
|
686 | * <zh/> 获取节点或组合的子元素数据
|
687 | *
|
688 | * <en/> Get the child element data of the node or combo
|
689 | * @param id - <zh/> 节点或组合ID | <en/> node or combo ID
|
690 | * @returns <zh/> 子元素数据 | <en/> child element data
|
691 | * @apiCategory data
|
692 | */
|
693 | getChildrenData(id: ID): NodeLikeData[];
|
694 | /**
|
695 | * <zh/> 获取节点或组合的后代元素数据
|
696 | *
|
697 | * <en/> Get the descendant element data of the node or combo
|
698 | * @param id - <zh/> 节点或组合ID | <en/> node or combo ID
|
699 | * @returns <zh/> 后代元素数据 | <en/> descendant element data
|
700 | * @apiCategory data
|
701 | */
|
702 | getDescendantsData(id: ID): NodeLikeData[];
|
703 | /**
|
704 | * <zh/> 获取指定状态下的节点数据
|
705 | *
|
706 | * <en/> Get node data in a specific state
|
707 | * @param state - <zh/> 状态 | <en/> state
|
708 | * @returns <zh/> 节点数据 | <en/> node data
|
709 | * @example
|
710 | * ```ts
|
711 | * const nodes = graph.getElementDataByState('node', 'selected');
|
712 | * ```
|
713 | * @apiCategory data
|
714 | */
|
715 | getElementDataByState(elementType: 'node', state: State): NodeData[];
|
716 | /**
|
717 | * <zh/> 获取指定状态下的边数据
|
718 | *
|
719 | * <en/> Get edge data in a specific state
|
720 | * @param state - <zh/> 状态 | <en/> state
|
721 | * @returns <zh/> 边数据 | <en/> edge data
|
722 | * @example
|
723 | * ```ts
|
724 | * const nodes = graph.getElementDataByState('edge', 'selected');
|
725 | * ```
|
726 | * @apiCategory data
|
727 | */
|
728 | getElementDataByState(elementType: 'edge', state: State): EdgeData[];
|
729 | /**
|
730 | * <zh/> 获取指定状态下的组合数据
|
731 | *
|
732 | * <en/> Get combo data in a specific state
|
733 | * @param state - <zh/> 状态 | <en/> state
|
734 | * @returns <zh/> 组合数据 | <en/> combo data
|
735 | * @example
|
736 | * ```ts
|
737 | * const nodes = graph.getElementDataByState('node', 'selected');
|
738 | * ```
|
739 | * @apiCategory data
|
740 | */
|
741 | getElementDataByState(elementType: 'combo', state: State): ComboData[];
|
742 | private initCanvas;
|
743 | private updateCanvas;
|
744 | private initRuntime;
|
745 | private prepare;
|
746 | /**
|
747 | * <zh/> 执行渲染
|
748 | *
|
749 | * <en/> Render
|
750 | * @remarks
|
751 | * <zh/> 此过程会执行数据更新、绘制元素、执行布局
|
752 | *
|
753 | * > ⚠️ render 为异步方法,如果需要在 render 后执行一些操作,可以使用 `await graph.render()` 或者监听 GraphEvent.AFTER_RENDER 事件
|
754 | *
|
755 | * <en/> This process will execute data update, element rendering, and layout execution
|
756 | *
|
757 | * > ⚠️ render is an asynchronous method. If you need to perform some operations after render, you can use `await graph.render()` or listen to the GraphEvent.AFTER_RENDER event
|
758 | * @apiCategory render
|
759 | */
|
760 | render(): Promise<void>;
|
761 | /**
|
762 | * <zh/> 绘制元素
|
763 | *
|
764 | * <en/> Draw elements
|
765 | * @returns <zh/> 渲染结果 | <en/> draw result
|
766 | * @remarks
|
767 | * <zh/> 仅执行元素绘制,不会重新布局
|
768 | *
|
769 | * <zh/> ⚠️ draw 为异步方法,如果需要在 draw 后执行一些操作,可以使用 `await graph.draw()` 或者监听 GraphEvent.AFTER_DRAW 事件
|
770 | *
|
771 | * <en/> Only execute element drawing, no re-layout
|
772 | *
|
773 | * <en/> ⚠️ draw is an asynchronous method. If you need to perform some operations after draw, you can use `await graph.draw()` or listen to the GraphEvent.AFTER_DRAW event
|
774 | * @apiCategory render
|
775 | */
|
776 | draw(): Promise<void>;
|
777 | /**
|
778 | * <zh/> 执行布局
|
779 | *
|
780 | * <en/> Execute layout
|
781 | * @apiCategory layout
|
782 | */
|
783 | layout(): Promise<void>;
|
784 | /**
|
785 | * <zh/> 停止布局
|
786 | *
|
787 | * <en/> Stop layout
|
788 | * @remarks
|
789 | * <zh/> 适用于带有迭代动画的布局,目前有 `force` 属于此类布局,即停止力导布局的迭代,一般用于布局迭代时间过长情况下的手动停止迭代动画,例如在点击画布/节点的监听中调用
|
790 | *
|
791 | * <en/> Suitable for layouts with iterative animations. Currently, `force` belongs to this type of layout, that is, stop the iteration of the force-directed layout. It is generally used to manually stop the iteration animation when the layout iteration time is too long, such as calling in the click canvas/node listener
|
792 | * @apiCategory layout
|
793 | */
|
794 | stopLayout(): void;
|
795 | /**
|
796 | * <zh/> 清空画布元素
|
797 | *
|
798 | * <en/> Clear canvas elements
|
799 | * @apiCategory canvas
|
800 | */
|
801 | clear(): Promise<void>;
|
802 | /**
|
803 | * <zh/> 销毁当前图实例
|
804 | *
|
805 | * <en/> Destroy the current graph instance
|
806 | * @remarks
|
807 | * <zh/> 销毁后无法进行任何操作,如果需要重新使用,需要重新创建一个新的图实例
|
808 | *
|
809 | * <en/> After destruction, no operations can be performed. If you need to reuse it, you need to create a new graph instance
|
810 | * @apiCategory instance
|
811 | */
|
812 | destroy(): void;
|
813 | /**
|
814 | * <zh/> 获取画布实例
|
815 | *
|
816 | * <en/> Get canvas instance
|
817 | * @returns - <zh/> 画布实例 | <en/> canvas instance
|
818 | * @apiCategory canvas
|
819 | */
|
820 | getCanvas(): Canvas;
|
821 | /**
|
822 | * <zh/> 调整画布大小为图容器大小
|
823 | *
|
824 | * <en/> Resize the canvas to the size of the graph container
|
825 | * @apiCategory viewport
|
826 | */
|
827 | resize(): void;
|
828 | /**
|
829 | * <zh/> 调整画布大小为指定宽高
|
830 | *
|
831 | * <en/> Resize the canvas to the specified width and height
|
832 | * @param width - <zh/> 宽度 | <en/> width
|
833 | * @param height - <zh/> 高度 | <en/> height
|
834 | * @apiCategory viewport
|
835 | */
|
836 | resize(width: number, height: number): void;
|
837 | /**
|
838 | * <zh/> 将图缩放至合适大小并平移至视口中心
|
839 | *
|
840 | * <en/> Zoom the graph to fit the viewport and move it to the center of the viewport
|
841 | * @param options - <zh/> 适配配置 | <en/> fit options
|
842 | * @param animation - <zh/> 动画配置 | <en/> animation options
|
843 | * @apiCategory viewport
|
844 | */
|
845 | fitView(options?: FitViewOptions, animation?: ViewportAnimationEffectTiming): Promise<void>;
|
846 | /**
|
847 | * <zh/> 将图平移至视口中心
|
848 | *
|
849 | * <en/> Move the graph to the center of the viewport
|
850 | * @param animation - <zh/> 动画配置 | <en/> animation options
|
851 | * @apiCategory viewport
|
852 | */
|
853 | fitCenter(animation?: ViewportAnimationEffectTiming): Promise<void>;
|
854 | private autoFit;
|
855 | /**
|
856 | * <zh/> 聚焦元素
|
857 | *
|
858 | * <en/> Focus on element
|
859 | * @param id - <zh/> 元素 ID | <en/> element ID
|
860 | * @param animation - <zh/> 动画配置 | <en/> animation options
|
861 | * @remarks
|
862 | * <zh/> 移动图,使得元素对齐到视口中心
|
863 | *
|
864 | * <en/> Move the graph so that the element is aligned to the center of the viewport
|
865 | * @apiCategory viewport
|
866 | */
|
867 | focusElement(id: ID | ID[], animation?: ViewportAnimationEffectTiming): Promise<void>;
|
868 | /**
|
869 | * <zh/> 基于当前缩放比例进行缩放(相对缩放)
|
870 | *
|
871 | * <en/> Zoom based on the current zoom ratio (relative zoom)
|
872 | * @param ratio - <zh/> 缩放比例 | <en/> zoom ratio
|
873 | * @param animation - <zh/> 动画配置 | <en/> animation options
|
874 | * @param origin - <zh/> 缩放中心(视口坐标) | <en/> zoom center(viewport coordinates)
|
875 | * @remarks
|
876 | * <zh/>
|
877 | * - ratio > 1 放大
|
878 | * - ratio < 1 缩小
|
879 | *
|
880 | * <en/>
|
881 | * - ratio > 1 zoom in
|
882 | * - ratio < 1 zoom out
|
883 | * @apiCategory viewport
|
884 | */
|
885 | zoomBy(ratio: number, animation?: ViewportAnimationEffectTiming, origin?: Point): Promise<void>;
|
886 | /**
|
887 | * <zh/> 缩放画布至指定比例(绝对缩放)
|
888 | *
|
889 | * <en/> Zoom the canvas to the specified ratio (absolute zoom)
|
890 | * @param zoom - <zh/> 指定缩放比例 | <en/> specified zoom ratio
|
891 | * @param animation - <zh/> 动画配置 | <en/> animation options
|
892 | * @param origin - <zh/> 缩放中心(视口坐标) | <en/> zoom center(viewport coordinates)
|
893 | * @remarks
|
894 | * <zh/>
|
895 | * - zoom = 1 默认大小
|
896 | * - zoom > 1 放大
|
897 | * - zoom < 1 缩小
|
898 | *
|
899 | * <en/>
|
900 | * - zoom = 1 default size
|
901 | * - zoom > 1 zoom in
|
902 | * - zoom < 1 zoom out
|
903 | * @apiCategory viewport
|
904 | */
|
905 | zoomTo(zoom: number, animation?: ViewportAnimationEffectTiming, origin?: Point): Promise<void>;
|
906 | /**
|
907 | * <zh/> 获取当前缩放比例
|
908 | *
|
909 | * <en/> Get the current zoom ratio
|
910 | * @returns <zh/> 缩放比例 | <en/> zoom ratio
|
911 | * @apiCategory viewport
|
912 | */
|
913 | getZoom(): number;
|
914 | /**
|
915 | * <zh/> 基于当前旋转角度进行旋转(相对旋转)
|
916 | *
|
917 | * <en/> Rotate based on the current rotation angle (relative rotation)
|
918 | * @param angle - <zh/> 旋转角度 | <en/> rotation angle
|
919 | * @param animation - <zh/> 动画配置 | <en/> animation options
|
920 | * @param origin - <zh/> 旋转中心(视口坐标) | <en/> rotation center(viewport coordinates)
|
921 | * @apiCategory viewport
|
922 | */
|
923 | rotateBy(angle: number, animation?: ViewportAnimationEffectTiming, origin?: Point): Promise<void>;
|
924 | /**
|
925 | * <zh/> 旋转画布至指定角度 (绝对旋转)
|
926 | *
|
927 | * <en/> Rotate the canvas to the specified angle (absolute rotation)
|
928 | * @param angle - <zh/> 目标角度 | <en/> target angle
|
929 | * @param animation - <zh/> 动画配置 | <en/> animation options
|
930 | * @param origin - <zh/> 旋转中心(视口坐标) | <en/> rotation center(viewport coordinates)
|
931 | * @apiCategory viewport
|
932 | */
|
933 | rotateTo(angle: number, animation?: ViewportAnimationEffectTiming, origin?: Point): Promise<void>;
|
934 | /**
|
935 | * <zh/> 获取当前旋转角度
|
936 | *
|
937 | * <en/> Get the current rotation angle
|
938 | * @returns <zh/> 旋转角度 | <en/> rotation angle
|
939 | * @apiCategory viewport
|
940 | */
|
941 | getRotation(): number;
|
942 | /**
|
943 | * <zh/> 将图平移指定距离 (相对平移)
|
944 | *
|
945 | * <en/> Translate the graph by the specified distance (relative translation)
|
946 | * @param offset - <zh/> 偏移量 | <en/> offset
|
947 | * @param animation - <zh/> 动画配置 | <en/> animation options
|
948 | * @apiCategory viewport
|
949 | */
|
950 | translateBy(offset: Point, animation?: ViewportAnimationEffectTiming): Promise<void>;
|
951 | /**
|
952 | * <zh/> 将图平移至指定位置 (绝对平移)
|
953 | *
|
954 | * <en/> Translate the graph to the specified position (absolute translation)
|
955 | * @param position - <zh/> 指定位置 | <en/> specified position
|
956 | * @param animation - <zh/> 动画配置 | <en/> animation options
|
957 | * @apiCategory viewport
|
958 | */
|
959 | translateTo(position: Point, animation?: ViewportAnimationEffectTiming): Promise<void>;
|
960 | /**
|
961 | * <zh/> 获取图的位置
|
962 | *
|
963 | * <en/> Get the position of the graph
|
964 | * @returns <zh/> 图的位置 | <en/> position of the graph
|
965 | * @remarks
|
966 | * <zh/> 即画布原点在视口坐标系下的位置。默认状态下,图的位置为 [0, 0]
|
967 | *
|
968 | * <en/> That is, the position of the canvas origin in the viewport coordinate system. By default, the position of the graph is [0, 0]
|
969 | * @apiCategory viewport
|
970 | */
|
971 | getPosition(): Point;
|
972 | /**
|
973 | * <zh/> 将元素平移指定距离 (相对平移)
|
974 | *
|
975 | * <en/> Translate the element by the specified distance (relative translation)
|
976 | * @param id - <zh/> 元素 ID | <en/> element ID
|
977 | * @param offset - <zh/> 偏移量 | <en/> offset
|
978 | * @param animation - <zh/> 是否启用动画 | <en/> whether to enable animation
|
979 | * @apiCategory element
|
980 | */
|
981 | translateElementBy(id: ID, offset: Point, animation?: boolean): Promise<void>;
|
982 | /**
|
983 | * <zh/> 批量将元素平移指定距离 (相对平移)
|
984 | *
|
985 | * <en/> Batch translate elements by the specified distance (relative translation)
|
986 | * @param offsets - <zh/> 偏移量配置 | <en/> offset options
|
987 | * @param animation - <zh/> 是否启用动画 | <en/> whether to enable animation
|
988 | * @apiCategory element
|
989 | */
|
990 | translateElementBy(offsets: Record<ID, Point>, animation?: boolean): Promise<void>;
|
991 | /**
|
992 | * <zh/> 将元素平移至指定位置 (绝对平移)
|
993 | *
|
994 | * <en/> Translate the element to the specified position (absolute translation)
|
995 | * @param id - <zh/> 元素 ID | <en/> element ID
|
996 | * @param position - <zh/> 指定位置 | <en/> specified position
|
997 | * @param animation - <zh/> 是否启用动画 | <en/> whether to enable animation
|
998 | * @apiCategory element
|
999 | */
|
1000 | translateElementTo(id: ID, position: Point, animation?: boolean): Promise<void>;
|
1001 | /**
|
1002 | * <zh/> 批量将元素平移至指定位置 (绝对平移)
|
1003 | *
|
1004 | * <en/> Batch translate elements to the specified position (absolute translation)
|
1005 | * @param positions - <zh/> 位置配置 | <en/> position options
|
1006 | * @param animation - <zh/> 是否启用动画 | <en/> whether to enable animation
|
1007 | * @apiCategory element
|
1008 | */
|
1009 | translateElementTo(positions: Record<ID, Point>, animation?: boolean): Promise<void>;
|
1010 | /**
|
1011 | * <zh/> 获取元素位置
|
1012 | *
|
1013 | * <en/> Get element position
|
1014 | * @param id - <zh/> 元素 ID | <en/> element ID
|
1015 | * @returns <zh/> 元素位置 | <en/> element position
|
1016 | * @apiCategory element
|
1017 | */
|
1018 | getElementPosition(id: ID): Point;
|
1019 | /**
|
1020 | * <zh/> 获取元素渲染样式
|
1021 | *
|
1022 | * <en/> Get element rendering style
|
1023 | * @param id - <zh/> 元素 ID | <en/> element ID
|
1024 | * @returns <zh/> 元素渲染样式 | <en/> element rendering style
|
1025 | * @apiCategory element
|
1026 | */
|
1027 | getElementRenderStyle(id: ID): Record<string, any>;
|
1028 | /**
|
1029 | * <zh/> 设置元素可见性
|
1030 | *
|
1031 | * <en/> Set element visibility
|
1032 | * @param id - <zh/> 元素 ID | <en/> element ID
|
1033 | * @param visibility - <zh/> 可见性 | <en/> visibility
|
1034 | * @param animation - <zh/> 动画配置 | <en/> animation options
|
1035 | * @remarks
|
1036 | * <zh/> 可见性配置包括 `visible` 和 `hidden` 两种状态
|
1037 | *
|
1038 | * <en/> Visibility configuration includes two states: `visible` and `hidden`
|
1039 | * @apiCategory element
|
1040 | */
|
1041 | setElementVisibility(id: ID, visibility: BaseStyleProps['visibility'], animation?: boolean): Promise<void>;
|
1042 | /**
|
1043 | * <zh/> 批量设置元素可见性
|
1044 | *
|
1045 | * <en/> Batch set element visibility
|
1046 | * @param visibility - <zh/> 可见性配置 | <en/> visibility options
|
1047 | * @param animation - <zh/> 动画配置 | <en/> animation options
|
1048 | * @apiCategory element
|
1049 | */
|
1050 | setElementVisibility(visibility: Record<ID, BaseStyleProps['visibility']>, animation?: boolean): Promise<void>;
|
1051 | /**
|
1052 | * <zh/> 显示元素
|
1053 | *
|
1054 | * <en/> Show element
|
1055 | * @param id - <zh/> 元素 ID | <en/> element ID
|
1056 | * @param animation - <zh/> 是否启用动画 | <en/> whether to enable animation
|
1057 | * @apiCategory element
|
1058 | */
|
1059 | showElement(id: ID | ID[], animation?: boolean): Promise<void>;
|
1060 | /**
|
1061 | * <zh/> 隐藏元素
|
1062 | *
|
1063 | * <en/> Hide element
|
1064 | * @param id - <zh/> 元素 ID | <en/> element ID
|
1065 | * @param animation - <zh/> 是否启用动画 | <en/> whether to enable animation
|
1066 | * @apiCategory element
|
1067 | */
|
1068 | hideElement(id: ID | ID[], animation?: boolean): Promise<void>;
|
1069 | /**
|
1070 | * <zh/> 获取元素可见性
|
1071 | *
|
1072 | * <en/> Get element visibility
|
1073 | * @param id - <zh/> 元素 ID | <en/> element ID
|
1074 | * @returns <zh/> 元素可见性 | <en/> element visibility
|
1075 | * @apiCategory element
|
1076 | */
|
1077 | getElementVisibility(id: ID): BaseStyleProps['visibility'];
|
1078 | /**
|
1079 | * <zh/> 设置元素层级
|
1080 | *
|
1081 | * <en/> Set element z-index
|
1082 | * @param id - <zh/> 元素 ID | <en/> element ID
|
1083 | * @param zIndex - <zh/> 层级 | <en/> z-index
|
1084 | * @apiCategory element
|
1085 | */
|
1086 | setElementZIndex(id: ID, zIndex: number): Promise<void>;
|
1087 | /**
|
1088 | * <zh/> 批量设置元素层级
|
1089 | *
|
1090 | * <en/> Batch set element z-index
|
1091 | * @param zIndex - <zh/> 层级配置 | <en/> z-index options
|
1092 | * @apiCategory element
|
1093 | */
|
1094 | setElementZIndex(zIndex: Record<ID, number>): Promise<void>;
|
1095 | /**
|
1096 | * <zh/> 将元素置于最顶层
|
1097 | *
|
1098 | * <en/> Bring the element to the front
|
1099 | * @param id - <zh/> 元素 ID | <en/> element ID
|
1100 | * @apiCategory element
|
1101 | */
|
1102 | frontElement(id: ID | ID[]): Promise<void>;
|
1103 | /**
|
1104 | * <zh/> 获取元素层级
|
1105 | *
|
1106 | * <en/> Get element z-index
|
1107 | * @param id - <zh/> 元素 ID | <en/> element ID
|
1108 | * @returns <zh/> 元素层级 | <en/> element z-index
|
1109 | * @apiCategory element
|
1110 | */
|
1111 | getElementZIndex(id: ID): number;
|
1112 | /**
|
1113 | * <zh/> 设置元素状态
|
1114 | *
|
1115 | * <en/> Set element state
|
1116 | * @param id - <zh/> 元素 ID | <en/> element ID
|
1117 | * @param state - <zh/> 状态 | <en/> state
|
1118 | * @param animation - <zh/> 动画配置 | <en/> animation options
|
1119 | * @apiCategory element
|
1120 | */
|
1121 | setElementState(id: ID, state: State | State[], animation?: boolean): Promise<void>;
|
1122 | /**
|
1123 | * <zh/> 批量设置元素状态
|
1124 | *
|
1125 | * <en/> Batch set element state
|
1126 | * @param state - <zh/> 状态配置 | <en/> state options
|
1127 | * @param animation - <zh/> 动画配置 | <en/> animation options
|
1128 | * @apiCategory element
|
1129 | */
|
1130 | setElementState(state: Record<ID, State | State[]>, animation?: boolean): Promise<void>;
|
1131 | /**
|
1132 | * <zh/> 获取元素状态
|
1133 | *
|
1134 | * <en/> Get element state
|
1135 | * @param id - <zh/> 元素 ID | <en/> element ID
|
1136 | * @returns <zh/> 元素状态 | <en/> element state
|
1137 | * @apiCategory element
|
1138 | */
|
1139 | getElementState(id: ID): State[];
|
1140 | /**
|
1141 | * <zh/> 获取元素自身以及子节点在世界坐标系下的渲染包围盒
|
1142 | *
|
1143 | * <en/> Get the rendering bounding box of the element itself and its child nodes in the world coordinate system
|
1144 | * @param id - <zh/> 元素 ID | <en/> element ID
|
1145 | * @returns <zh/> 渲染包围盒 | <en/> render bounding box
|
1146 | * @apiCategory element
|
1147 | */
|
1148 | getElementRenderBounds(id: ID): AABB;
|
1149 | private isCollapsingExpanding;
|
1150 | /**
|
1151 | * <zh/> 收起元素
|
1152 | *
|
1153 | * <en/> Collapse element
|
1154 | * @param id - <zh/> 元素 ID | <en/> element ID
|
1155 | * @param options - <zh/> 是否启用动画或者配置收起节点的配置项 | <en/> whether to enable animation or the options of collapsing node
|
1156 | * @apiCategory element
|
1157 | */
|
1158 | collapseElement(id: ID, options?: boolean | CollapseExpandNodeOptions): Promise<void>;
|
1159 | /**
|
1160 | * <zh/> 展开元素
|
1161 | *
|
1162 | * <en/> Expand Element
|
1163 | * @param id - <zh/> 元素 ID | <en/> element ID
|
1164 | * @param animation - <zh/> 是否启用动画或者配置收起节点的配置项 | <en/> whether to enable animation or the options of collapsing node
|
1165 | * @param options
|
1166 | * @apiCategory element
|
1167 | */
|
1168 | expandElement(id: ID, options?: boolean | CollapseExpandNodeOptions): Promise<void>;
|
1169 | private setElementCollapsibility;
|
1170 | /**
|
1171 | * <zh/> 导出画布内容为 DataURL
|
1172 | *
|
1173 | * <en/> Export canvas content as DataURL
|
1174 | * @param options - <zh/> 导出配置 | <en/> export options
|
1175 | * @returns <zh/> DataURL | <en/> DataURL
|
1176 | * @apiCategory exportImage
|
1177 | */
|
1178 | toDataURL(options?: Partial<DataURLOptions>): Promise<string>;
|
1179 | /**
|
1180 | * <zh/> 给定的视窗 DOM 坐标,转换为画布上的绘制坐标
|
1181 | *
|
1182 | * <en/> Convert the given viewport DOM coordinates to the drawing coordinates on the canvas
|
1183 | * @param point - <zh/> 视窗坐标 | <en/> viewport coordinates
|
1184 | * @returns <zh/> 画布上的绘制坐标 | <en/> drawing coordinates on the canvas
|
1185 | * @apiCategory viewport
|
1186 | */
|
1187 | getCanvasByViewport(point: Point): Point;
|
1188 | /**
|
1189 | * <zh/> 给定画布上的绘制坐标,转换为视窗 DOM 的坐标
|
1190 | *
|
1191 | * <en/> Convert the given drawing coordinates on the canvas to the coordinates of the viewport DOM
|
1192 | * @param point - <zh/> 画布坐标 | <en/> canvas coordinates
|
1193 | * @returns <zh/> 视窗 DOM 的坐标 | <en/> coordinates of the viewport DOM
|
1194 | * @apiCategory viewport
|
1195 | */
|
1196 | getViewportByCanvas(point: Point): Point;
|
1197 | /**
|
1198 | * <zh/> 给定画布上的绘制坐标,转换为浏览器坐标
|
1199 | *
|
1200 | * <en/> Convert the given drawing coordinates on the canvas to browser coordinates
|
1201 | * @param point - <zh/> 画布坐标 | <en/> canvas coordinates
|
1202 | * @returns <zh/> 浏览器坐标 | <en/> browser coordinates
|
1203 | * @apiCategory viewport
|
1204 | */
|
1205 | getClientByCanvas(point: Point): Point;
|
1206 | /**
|
1207 | * <zh/> 给定的浏览器坐标,转换为画布上的绘制坐标
|
1208 | *
|
1209 | * <en/> Convert the given browser coordinates to drawing coordinates on the canvas
|
1210 | * @param point - <zh/> 浏览器坐标 | <en/> browser coordinates
|
1211 | * @returns <zh/> 画布上的绘制坐标 | <en/> drawing coordinates on the canvas
|
1212 | * @apiCategory viewport
|
1213 | */
|
1214 | getCanvasByClient(point: Point): Point;
|
1215 | /**
|
1216 | * <zh/> 获取视口中心的画布坐标
|
1217 | *
|
1218 | * <en/> Get the canvas coordinates of the viewport center
|
1219 | * @returns <zh/> 视口中心的画布坐标 | <en/> Canvas coordinates of the viewport center
|
1220 | * @apiCategory viewport
|
1221 | */
|
1222 | getViewportCenter(): Point;
|
1223 | /**
|
1224 | * <zh/> 获取视口中心的视口坐标
|
1225 | *
|
1226 | * <en/> Get the viewport coordinates of the viewport center
|
1227 | * @returns <zh/> 视口中心的视口坐标 | <en/> Viewport coordinates of the viewport center
|
1228 | * @apiCategory viewport
|
1229 | */
|
1230 | getCanvasCenter(): Point;
|
1231 | private onResize;
|
1232 | /**
|
1233 | * <zh/> 监听事件
|
1234 | *
|
1235 | * <en/> Listen to events
|
1236 | * @param eventName - <zh/> 事件名称 | <en/> event name
|
1237 | * @param callback - <zh/> 回调函数 | <en/> callback function
|
1238 | * @param once - <zh/> 是否只监听一次 | <en/> whether to listen only once
|
1239 | * @returns <zh/> Graph 实例 | <en/> Graph instance
|
1240 | * @apiCategory event
|
1241 | */
|
1242 | on<T extends IEvent = IEvent>(eventName: string, callback: (event: T) => void, once?: boolean): this;
|
1243 | /**
|
1244 | * <zh/> 一次性监听事件
|
1245 | *
|
1246 | * <en/> Listen to events once
|
1247 | * @param eventName - <zh/> 事件名称 | <en/> event name
|
1248 | * @param callback - <zh/> 回调函数 | <en/> callback function
|
1249 | * @returns <zh/> Graph 实例 | <en/> Graph instance
|
1250 | * @apiCategory event
|
1251 | */
|
1252 | once<T extends IEvent = IEvent>(eventName: string, callback: (event: T) => void): this;
|
1253 | /**
|
1254 | * <zh/> 移除全部事件监听
|
1255 | *
|
1256 | * <en/> Remove all event listeners
|
1257 | * @returns <zh/> Graph 实例 | <en/> Graph instance
|
1258 | * @apiCategory event
|
1259 | */
|
1260 | off(): this;
|
1261 | /**
|
1262 | * <zh/> 移除指定事件的全部监听
|
1263 | *
|
1264 | * <en/> Remove all listeners for the specified event
|
1265 | * @param eventName - <zh/> 事件名称 | <en/> event name
|
1266 | * @returns <zh/> Graph 实例 | <en/> Graph instance
|
1267 | * @apiCategory event
|
1268 | */
|
1269 | off(eventName: string): this;
|
1270 | /**
|
1271 | * <zh/> 移除事件监听
|
1272 | *
|
1273 | * <en/> Remove event listener
|
1274 | * @param eventName - <zh/> 事件名称 | <en/> event name
|
1275 | * @param callback - <zh/> 回调函数 | <en/> callback function
|
1276 | * @returns <zh/> Graph 实例 | <en/> Graph instance
|
1277 | * @apiCategory event
|
1278 | */
|
1279 | off(eventName: string, callback: (...args: any[]) => void): this;
|
1280 | }
|
1281 |
|
\ | No newline at end of file |