@8btc/whiteboard 0.0.20-alpha.4 → 0.0.20-alpha.40
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/adapter/maze.d.ts +41 -0
- package/dist/adapter/maze.js +225 -136
- package/dist/{const-CNw7pZuI.js → const-B6DtCQRi.js} +12 -5
- package/dist/index.css +1 -1
- package/dist/index.d.ts +823 -533
- package/dist/index.js +7264 -17864
- package/dist/maze.d.ts +829 -535
- package/package.json +24 -11
package/dist/maze.d.ts
CHANGED
|
@@ -1,11 +1,30 @@
|
|
|
1
1
|
import { default as default_2 } from 'konva';
|
|
2
|
+
import { Editor } from '@tiptap/core';
|
|
3
|
+
import { Transformer as Transformer_2 } from 'konva/lib/shapes/Transformer';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* 箭头节点配置
|
|
7
|
+
*/
|
|
8
|
+
declare type ArrowNodeConfig = BaseNodeConfig & default_2.ArrowConfig & Partial<NodeStyle> & {
|
|
9
|
+
$_type: "arrow";
|
|
10
|
+
};
|
|
2
11
|
|
|
3
12
|
declare interface BaseNodeConfig {
|
|
4
13
|
id: string;
|
|
5
14
|
x: number;
|
|
6
15
|
y: number;
|
|
16
|
+
visible?: boolean;
|
|
17
|
+
$_listening?: boolean;
|
|
7
18
|
}
|
|
8
19
|
|
|
20
|
+
/**
|
|
21
|
+
* 笔刷节点配置(自由绘制)
|
|
22
|
+
*/
|
|
23
|
+
declare type BrushNodeConfig = BaseNodeConfig & default_2.LineConfig & Partial<NodeStyle> & {
|
|
24
|
+
$_type: "brush";
|
|
25
|
+
points: number[];
|
|
26
|
+
};
|
|
27
|
+
|
|
9
28
|
/**
|
|
10
29
|
* 计算内容左下角的插入位置
|
|
11
30
|
* @param api Canvas API 实例
|
|
@@ -21,14 +40,16 @@ export declare function calculateBottomLeftOfCanvasContent(api: CanvasApi | null
|
|
|
21
40
|
* 继承自 CanvasCore,只暴露必要的公开方法
|
|
22
41
|
*/
|
|
23
42
|
declare class CanvasApi extends CanvasCore {
|
|
43
|
+
#private;
|
|
44
|
+
constructor(el: HTMLDivElement, options?: ConstructorParameters<typeof CanvasCore>[1]);
|
|
45
|
+
dispose(): void;
|
|
24
46
|
/**
|
|
25
47
|
* 获取所有可用的工具类型
|
|
26
48
|
*/
|
|
27
|
-
getAvailableTools():
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
setToolType(type: ToolType): void;
|
|
49
|
+
getAvailableTools(): Array<{
|
|
50
|
+
type: ToolType;
|
|
51
|
+
meta?: Record<string, any>;
|
|
52
|
+
}>;
|
|
32
53
|
/**
|
|
33
54
|
* 手动创建多个节点
|
|
34
55
|
* 如果你不知道自己在干什么,请使用更高层的封装方法,如 createImageNode
|
|
@@ -50,592 +71,865 @@ declare class CanvasApi extends CanvasCore {
|
|
|
50
71
|
y: number;
|
|
51
72
|
}): void;
|
|
52
73
|
/**
|
|
53
|
-
*
|
|
54
|
-
* @param
|
|
55
|
-
* @returns DataURL
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
74
|
+
* 导出指定图片节点的底图、笔刷透明图和合成图
|
|
75
|
+
* @param imageId - 图片节点 ID
|
|
76
|
+
* @returns { base, brushOnly, composite } 三张 DataURL,若图片不存在返回 null
|
|
77
|
+
*/
|
|
78
|
+
exportImageWithBrush(imageId: string, options?: {
|
|
79
|
+
pixelRatio?: number;
|
|
80
|
+
}): {
|
|
81
|
+
base: string;
|
|
82
|
+
brushOnly: string;
|
|
83
|
+
composite: string;
|
|
84
|
+
} | null;
|
|
85
|
+
/**
|
|
86
|
+
* 删除指定图片节点关联的所有笔刷节点
|
|
87
|
+
* @param imageId - 图片节点 ID
|
|
88
|
+
*/
|
|
89
|
+
clearImageBrushNodes(imageId: string): void;
|
|
90
|
+
/**
|
|
91
|
+
* 导出全部图形为图片
|
|
92
|
+
* @param options - 导出配置
|
|
93
|
+
* @returns DataURL 格式的图片数据
|
|
94
|
+
*/
|
|
95
|
+
exportAsImage(options?: {
|
|
96
|
+
pixelRatio?: number;
|
|
97
|
+
mimeType?: string;
|
|
98
|
+
quality?: number;
|
|
99
|
+
}): string;
|
|
100
|
+
/**
|
|
101
|
+
* 导出当前选区为图片
|
|
102
|
+
* @param options - 导出配置
|
|
103
|
+
* @returns DataURL 格式的图片数据,如果没有选区则返回 null
|
|
104
|
+
*/
|
|
105
|
+
exportSelectionAsImage(options?: {
|
|
106
|
+
pixelRatio?: number;
|
|
107
|
+
mimeType?: string;
|
|
108
|
+
quality?: number;
|
|
109
|
+
padding?: number;
|
|
110
|
+
}): string | null;
|
|
111
|
+
/**
|
|
112
|
+
* 导出带有标注的图片节点为图片
|
|
113
|
+
* @param id - 图片节点 ID
|
|
114
|
+
* @returns DataURL 格式的图片数据,如果节点或者 marker 不存在则返回 null
|
|
115
|
+
*/
|
|
116
|
+
exportImageWithMarker(id: string, options?: {
|
|
117
|
+
pixelRatio?: number;
|
|
118
|
+
mimeType?: string;
|
|
119
|
+
quality?: number;
|
|
120
|
+
markerScale?: number;
|
|
121
|
+
}): string | null;
|
|
122
|
+
/**
|
|
123
|
+
* 删除当前选中的节点
|
|
124
|
+
* 如果删除的是 image 节点,会同步删除所有关联的 image-marker
|
|
125
|
+
*/
|
|
126
|
+
deleteSelectedNodes(): void;
|
|
127
|
+
/**
|
|
128
|
+
* 对指定图片节点(或当前选中节点)进入裁剪模式
|
|
129
|
+
* @param id - 图片节点 ID,不传则使用当前选中节点
|
|
130
|
+
*/
|
|
131
|
+
startImageCrop(id?: string): void;
|
|
132
|
+
/**
|
|
133
|
+
* 确认裁剪并退出裁剪模式(保存结果)
|
|
134
|
+
* @param id - 图片节点 ID,不传则使用当前选中节点
|
|
135
|
+
*/
|
|
136
|
+
confirmImageCrop(id?: string): void;
|
|
137
|
+
/**
|
|
138
|
+
* 重置指定图片节点(或当前选中节点)的裁剪,还原为完整图片
|
|
139
|
+
* @param id - 图片节点 ID,不传则使用当前选中节点
|
|
140
|
+
*/
|
|
141
|
+
resetImageCrop(id?: string): void;
|
|
142
|
+
/**
|
|
143
|
+
* 设置裁剪模式下底图的缩放倍数(≥1,以裁剪框中心为锚点)
|
|
144
|
+
* @param id - 图片节点 ID
|
|
145
|
+
* @param scale - 缩放倍数
|
|
146
|
+
*/
|
|
147
|
+
setCropOverlayScale(id: string, scale: number): void;
|
|
148
|
+
/**
|
|
149
|
+
* 设置裁剪模式下底图的透明度(0~1)
|
|
150
|
+
* @param id - 图片节点 ID
|
|
151
|
+
* @param opacity - 透明度值
|
|
152
|
+
*/
|
|
153
|
+
setCropOverlayOpacity(id: string, opacity: number): void;
|
|
154
|
+
/**
|
|
155
|
+
* 选中指定节点
|
|
156
|
+
* @param nodeIds - 要选中的节点 ID 数组,不传则取消所有选中
|
|
157
|
+
* @param multiSelect - 是否多选(追加到已选中节点),默认 false
|
|
158
|
+
*/
|
|
159
|
+
selectNodes(nodeIds?: string[], multiSelect?: boolean): void;
|
|
160
|
+
/**
|
|
161
|
+
* 更新节点样式属性
|
|
162
|
+
* @param nodeIds - 要更新的节点 ID 数组
|
|
163
|
+
* @param config - 要更新的属性配置
|
|
164
|
+
*/
|
|
165
|
+
updateNodes(nodeIds: string[], config: Partial<NodeConfig>): void;
|
|
166
|
+
/**
|
|
167
|
+
* 更新选中节点的样式属性
|
|
168
|
+
* @param config - 要更新的属性配置
|
|
169
|
+
*/
|
|
170
|
+
updateSelectedNodes(config: Partial<NodeConfig>): void;
|
|
171
|
+
/**
|
|
172
|
+
* 删除指定的节点
|
|
173
|
+
* 如果删除的是 image 节点,会同步删除所有关联的 image-marker
|
|
174
|
+
* @param nodeIds - 要删除的节点 ID 数组
|
|
175
|
+
* @returns 被删除的节点数据数组
|
|
176
|
+
*/
|
|
177
|
+
deleteNodes(nodeIds: string[]): NodeConfig[];
|
|
178
|
+
/**
|
|
179
|
+
* 将节点移动到最上层
|
|
180
|
+
*/
|
|
181
|
+
moveNodesToTop(nodeIds: string[]): void;
|
|
182
|
+
/**
|
|
183
|
+
* 将节点移动到最下层
|
|
184
|
+
*/
|
|
185
|
+
moveNodesToBottom(nodeIds: string[]): void;
|
|
186
|
+
moveNodesUp(nodeIds: string[]): void;
|
|
187
|
+
moveNodesDown(nodeIds: string[]): void;
|
|
188
|
+
/**
|
|
189
|
+
* 按照给定的 ID 数组顺序重新排列节点
|
|
190
|
+
* 数组中的第一个节点将位于最底层,最后一个节点位于最顶层
|
|
191
|
+
* @param nodeIds - 节点 ID 数组,按从底层到顶层的顺序排列
|
|
192
|
+
*/
|
|
193
|
+
reorderNodes(nodeIds: string[]): void;
|
|
194
|
+
/**
|
|
195
|
+
* 滚动到内容区域
|
|
196
|
+
* - 如果提供了 nodeIds,将指定的节点居中显示
|
|
197
|
+
* - 如果没有提供 nodeIds 但有选中的节点,将选中节点居中显示
|
|
198
|
+
* - 如果没有选中节点,将所有内容居中显示
|
|
199
|
+
* @param options - 配置选项
|
|
200
|
+
* @param options.padding - 内容周围的留白,默认 50px
|
|
201
|
+
* @param options.scale - 是否自动调整缩放以适应内容,默认 false
|
|
202
|
+
* @param options.nodeIds - 要滚动到的节点 ID 数组
|
|
203
|
+
*/
|
|
204
|
+
scrollToContent(options?: {
|
|
205
|
+
padding?: number;
|
|
206
|
+
scale?: boolean;
|
|
207
|
+
nodeIds?: string[];
|
|
208
|
+
}): void;
|
|
209
|
+
/**
|
|
210
|
+
* 导出当前状态
|
|
211
|
+
*/
|
|
212
|
+
save(): CanvasSnapshot;
|
|
213
|
+
/**
|
|
214
|
+
* 从状态中恢复画布
|
|
215
|
+
*/
|
|
216
|
+
restore(state: CanvasSnapshot): void;
|
|
217
|
+
/**
|
|
218
|
+
* 聚焦到指定节点
|
|
219
|
+
* 选中指定的节点并滚动到这些节点的位置
|
|
220
|
+
* @param nodeIds - 要聚焦的节点 ID 数组
|
|
221
|
+
* @param options - 滚动配置选项
|
|
222
|
+
* @param options.padding - 内容周围的留白,默认 50px
|
|
223
|
+
* @param options.scale - 是否自动调整缩放以适应内容,默认 false
|
|
224
|
+
*/
|
|
225
|
+
focusNodes(nodeIds: string[], options?: {
|
|
226
|
+
padding?: number;
|
|
227
|
+
scale?: boolean;
|
|
228
|
+
}): void;
|
|
229
|
+
/**
|
|
230
|
+
* 切换指定节点的可见性
|
|
231
|
+
* @param nodeId - 要切换可见性的节点 ID
|
|
232
|
+
*/
|
|
233
|
+
toggleNodeVisibility(nodeId: string): void;
|
|
234
|
+
/**
|
|
235
|
+
* 切换指定节点的锁定状态
|
|
236
|
+
* 锁定的节点无法被选中和交互(listening = false)
|
|
237
|
+
* @param nodeId - 要切换锁定状态的节点 ID
|
|
238
|
+
*/
|
|
239
|
+
toggleNodeLock(nodeId: string): void;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
declare class CanvasCore extends CanvasStore {
|
|
243
|
+
#private;
|
|
244
|
+
isEditingText: boolean;
|
|
245
|
+
constructor(el: HTMLDivElement, options?: {
|
|
246
|
+
state?: CanvasSnapshot;
|
|
247
|
+
theme?: Theme;
|
|
248
|
+
});
|
|
249
|
+
/**
|
|
250
|
+
* 获取当前主题
|
|
251
|
+
*/
|
|
252
|
+
getTheme(): Theme;
|
|
253
|
+
/**
|
|
254
|
+
* 设置主题并重新渲染
|
|
255
|
+
*/
|
|
256
|
+
setTheme(theme: Theme): void;
|
|
257
|
+
/**
|
|
258
|
+
* 获取 CanvasStage 实例
|
|
259
|
+
*/
|
|
260
|
+
getCanvasStage(): CanvasStage;
|
|
261
|
+
/**
|
|
262
|
+
* 获取 CanvasTransformer 实例
|
|
263
|
+
*/
|
|
264
|
+
getCanvasTransformer(): CanvasTransformer;
|
|
265
|
+
/**
|
|
266
|
+
* 获取 Konva.Transformer 实例
|
|
267
|
+
*/
|
|
268
|
+
getTransformer(): Transformer_2;
|
|
269
|
+
/**
|
|
270
|
+
* 获取 Konva.Stage 实例
|
|
271
|
+
*/
|
|
272
|
+
getStage(): default_2.Stage;
|
|
273
|
+
/**
|
|
274
|
+
* 获取 Stage 容器元素
|
|
275
|
+
*/
|
|
276
|
+
getContainer(): HTMLDivElement;
|
|
277
|
+
/**
|
|
278
|
+
* 获取主图层
|
|
279
|
+
*/
|
|
280
|
+
getMainLayer(): default_2.Layer;
|
|
281
|
+
/**
|
|
282
|
+
* 获取当前工具类型
|
|
283
|
+
*/
|
|
284
|
+
getToolType(): ToolType;
|
|
285
|
+
/**
|
|
286
|
+
* 获取当前工具的元数据
|
|
287
|
+
*/
|
|
288
|
+
getToolMeta(): Record<string, any> | undefined;
|
|
289
|
+
/**
|
|
290
|
+
* 设置当前工具类型(内部使用)
|
|
291
|
+
*
|
|
292
|
+
* toolMeta 是一个可选的对象,可以包含与当前工具相关的任何额外信息。例如,在绘制图形时,toolMeta 可以包含初始位置、颜色、线条样式等信息。这样,在处理工具逻辑时,就可以访问这些元数据来实现更复杂的行为。
|
|
293
|
+
*
|
|
294
|
+
* - polygon 工具可以在 toolMeta 中包含一个 $_shape 字段,指示要绘制的多边形形状(如 triangle、rectangle、pentagon 等),以便在创建草稿节点时生成对应形状的点数据。
|
|
295
|
+
*/
|
|
296
|
+
setToolType(type: ToolType, toolMeta?: any): void;
|
|
297
|
+
/**
|
|
298
|
+
* 根据 ID 获取 Canvas 节点实例
|
|
299
|
+
*/
|
|
300
|
+
getCanvasNodeById(id: string): CanvasNode | null;
|
|
301
|
+
/**
|
|
302
|
+
* 设置是否可拖拽(内部使用)
|
|
303
|
+
*/
|
|
304
|
+
protected setDraggable(draggable: boolean): void;
|
|
305
|
+
/* Excluded from this release type: _setCursor */
|
|
306
|
+
/* Excluded from this release type: _resetCursor */
|
|
307
|
+
/**
|
|
308
|
+
* 获取当前 Stage 缩放比例
|
|
309
|
+
*/
|
|
310
|
+
getStageScale(): number;
|
|
311
|
+
/* Excluded from this release type: _updateViewport */
|
|
312
|
+
protected createNodes(nodes: NodeConfig[], addToHistory: boolean): void;
|
|
313
|
+
/**
|
|
314
|
+
* 创建图片标注节点(内部使用)
|
|
315
|
+
*/
|
|
316
|
+
protected createImageMarkerNode(parentImageId: string, startPosition: {
|
|
317
|
+
x: number;
|
|
318
|
+
y: number;
|
|
319
|
+
}, endPosition: {
|
|
320
|
+
x: number;
|
|
321
|
+
y: number;
|
|
322
|
+
}, imageBounds: {
|
|
323
|
+
x: number;
|
|
324
|
+
y: number;
|
|
325
|
+
width: number;
|
|
326
|
+
height: number;
|
|
327
|
+
}): void;
|
|
328
|
+
/* Excluded from this release type: _findImageAtPosition */
|
|
329
|
+
/* Excluded from this release type: _setDrawingPosition */
|
|
330
|
+
/* Excluded from this release type: _updateDrawingPosition */
|
|
331
|
+
/* Excluded from this release type: _createDraftNode */
|
|
332
|
+
/* Excluded from this release type: _updateDraftNode */
|
|
333
|
+
/* Excluded from this release type: _appendBrushPoint */
|
|
334
|
+
/* Excluded from this release type: _finalizeDraftNode */
|
|
335
|
+
/* Excluded from this release type: _createTextNodeAtDrawingPosition */
|
|
336
|
+
/* Excluded from this release type: _createSelectRect */
|
|
337
|
+
_updateSelectRect(): void;
|
|
338
|
+
/* Excluded from this release type: _finalizeSelectRect */
|
|
339
|
+
/* Excluded from this release type: _selectNodes */
|
|
340
|
+
/* Excluded from this release type: deleteNodes */
|
|
341
|
+
/* Excluded from this release type: deleteSelectedNodes */
|
|
342
|
+
/* Excluded from this release type: _getKeyboardEl */
|
|
343
|
+
/**
|
|
344
|
+
* 销毁 canvas
|
|
345
|
+
*/
|
|
346
|
+
dispose(): void;
|
|
347
|
+
/* Excluded from this release type: _rebuildStateAfterNodeChange */
|
|
348
|
+
/**
|
|
349
|
+
* 实现父类的状态同步方法
|
|
350
|
+
* 当 undo/redo 时被调用
|
|
351
|
+
*/
|
|
352
|
+
protected _renderCanvas(state: CanvasSnapshot): void;
|
|
353
|
+
_showContextMenu(data: {
|
|
354
|
+
x: number;
|
|
355
|
+
y: number;
|
|
356
|
+
clientX: number;
|
|
357
|
+
clientY: number;
|
|
358
|
+
targetIds: string[];
|
|
359
|
+
}): void;
|
|
360
|
+
_syncNodesZIndexToStore(): void;
|
|
361
|
+
_registerTextEditor(editor: Editor): void;
|
|
362
|
+
_unregisterTextEditor(): void;
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
/**
|
|
366
|
+
* 状态事件类型定义
|
|
367
|
+
*/
|
|
368
|
+
declare type CanvasEvents = {
|
|
369
|
+
"state:change": CanvasSnapshot;
|
|
370
|
+
"state:undo": CanvasSnapshot;
|
|
371
|
+
"state:redo": CanvasSnapshot;
|
|
372
|
+
"state:reset": CanvasSnapshot;
|
|
373
|
+
"viewport:change": CanvasSnapshot["viewport"];
|
|
374
|
+
"viewport:scale:change": number;
|
|
375
|
+
"transformer:positionChange": TransformerPosition | null;
|
|
376
|
+
"toolType:change": {
|
|
377
|
+
type: CanvasSnapshot["toolType"];
|
|
378
|
+
meta?: Record<string, any>;
|
|
379
|
+
};
|
|
380
|
+
"theme:change": Theme;
|
|
381
|
+
"nodes:created": NodeConfig[];
|
|
382
|
+
"nodes:deleted": NodeConfig[];
|
|
383
|
+
"nodes:selected": string[];
|
|
384
|
+
"contextmenu:show": {
|
|
385
|
+
x: number;
|
|
386
|
+
y: number;
|
|
387
|
+
clientX: number;
|
|
388
|
+
clientY: number;
|
|
389
|
+
targetIds: string[];
|
|
390
|
+
};
|
|
391
|
+
"nodes:sorted": string[];
|
|
392
|
+
"texteditor:register": any;
|
|
393
|
+
"texteditor:unregister": void;
|
|
394
|
+
/** 进入裁剪模式:携带裁剪框在容器内的初始位置(px) */
|
|
395
|
+
"crop:start": {
|
|
396
|
+
nodeId: string;
|
|
397
|
+
x: number;
|
|
398
|
+
y: number;
|
|
399
|
+
width: number;
|
|
400
|
+
height: number;
|
|
401
|
+
};
|
|
402
|
+
/** 退出裁剪模式 */
|
|
403
|
+
"crop:end": {
|
|
404
|
+
nodeId: string;
|
|
405
|
+
};
|
|
406
|
+
/** 裁剪框位置/尺寸更新(用于同步工具栏位置) */
|
|
407
|
+
"crop:frameChange": {
|
|
408
|
+
nodeId: string;
|
|
409
|
+
x: number;
|
|
410
|
+
y: number;
|
|
411
|
+
width: number;
|
|
412
|
+
height: number;
|
|
413
|
+
};
|
|
414
|
+
};
|
|
415
|
+
|
|
416
|
+
declare interface CanvasNode {
|
|
417
|
+
getID(): string;
|
|
418
|
+
getElement(): default_2.Shape | default_2.Group;
|
|
419
|
+
getConfig(): NodeConfig;
|
|
420
|
+
syncConfigFromElement(): void;
|
|
421
|
+
update(config: Partial<NodeConfig>): void;
|
|
422
|
+
destroy(): void;
|
|
423
|
+
}
|
|
424
|
+
|
|
425
|
+
declare interface CanvasSnapshot {
|
|
426
|
+
viewport: Viewport;
|
|
427
|
+
toolType: ToolType;
|
|
428
|
+
toolMeta?: any;
|
|
429
|
+
selectedNodeIds?: string[];
|
|
430
|
+
nodes?: NodeConfig[];
|
|
431
|
+
}
|
|
432
|
+
|
|
433
|
+
/**
|
|
434
|
+
* CanvasStage 封装了 Konva.Stage 的核心功能
|
|
435
|
+
* 提供视口管理、事件处理、拖拽和缩放等能力
|
|
436
|
+
*/
|
|
437
|
+
declare class CanvasStage {
|
|
438
|
+
#private;
|
|
439
|
+
constructor(core: CanvasCore, config: StageConfig);
|
|
440
|
+
/**
|
|
441
|
+
* 获取原生 Konva.Stage 实例
|
|
442
|
+
*/
|
|
443
|
+
getStage(): default_2.Stage;
|
|
444
|
+
/**
|
|
445
|
+
* 获取当前视口状态
|
|
446
|
+
*/
|
|
447
|
+
getViewport(): ViewportState;
|
|
448
|
+
/**
|
|
449
|
+
* 设置视口(包括位置、缩放和尺寸)
|
|
450
|
+
*/
|
|
451
|
+
setViewport(viewport: Partial<ViewportState>): void;
|
|
452
|
+
/**
|
|
453
|
+
* 设置是否可拖拽
|
|
454
|
+
*/
|
|
455
|
+
setDraggable(draggable: boolean): void;
|
|
456
|
+
/**
|
|
457
|
+
* 设置光标样式
|
|
458
|
+
*/
|
|
459
|
+
setCursor(cursor: string): void;
|
|
460
|
+
/**
|
|
461
|
+
* 重置光标样式
|
|
462
|
+
*/
|
|
463
|
+
resetCursor(): void;
|
|
464
|
+
destroy(): void;
|
|
465
|
+
}
|
|
466
|
+
|
|
467
|
+
/**
|
|
468
|
+
* CanvasStore 类负责管理画布的状态
|
|
469
|
+
* 包括历史记录(past/present/future)和状态监听
|
|
470
|
+
*/
|
|
471
|
+
declare abstract class CanvasStore {
|
|
472
|
+
#private;
|
|
473
|
+
constructor(initialState: CanvasSnapshot);
|
|
474
|
+
/**
|
|
475
|
+
* 获取当前状态
|
|
476
|
+
*/
|
|
477
|
+
getState(): CanvasSnapshot;
|
|
478
|
+
/**
|
|
479
|
+
* 获取完整历史状态
|
|
480
|
+
*/
|
|
481
|
+
getHistory(): HistoryState<CanvasSnapshot>;
|
|
482
|
+
/**
|
|
483
|
+
* 是否可以撤销
|
|
484
|
+
*/
|
|
485
|
+
canUndo(): boolean;
|
|
486
|
+
/**
|
|
487
|
+
* 是否可以重做
|
|
488
|
+
*/
|
|
489
|
+
canRedo(): boolean;
|
|
490
|
+
/**
|
|
491
|
+
* 订阅状态事件
|
|
492
|
+
*/
|
|
493
|
+
on<K extends keyof CanvasEvents>(event: K, handler: (data: CanvasEvents[K]) => void): void;
|
|
494
|
+
/**
|
|
495
|
+
* 取消订阅状态事件
|
|
496
|
+
*/
|
|
497
|
+
off<K extends keyof CanvasEvents>(event: K, handler: (data: CanvasEvents[K]) => void): void;
|
|
498
|
+
/* Excluded from this release type: _emit */
|
|
499
|
+
/**
|
|
500
|
+
* 撤销操作
|
|
501
|
+
*/
|
|
502
|
+
undo(): void;
|
|
503
|
+
/**
|
|
504
|
+
* 重做操作
|
|
505
|
+
*/
|
|
506
|
+
redo(): void;
|
|
507
|
+
/**
|
|
508
|
+
* 重置历史记录
|
|
509
|
+
*/
|
|
510
|
+
resetHistory(): void;
|
|
511
|
+
/**
|
|
512
|
+
* 更新状态
|
|
513
|
+
* @param partial - 部分状态更新
|
|
514
|
+
* @param addToHistory - 是否添加到历史记录
|
|
515
|
+
*/
|
|
516
|
+
protected _updateState(partial: Partial<CanvasSnapshot>, addToHistory: boolean): void;
|
|
517
|
+
/**
|
|
518
|
+
* 同步状态到 canvas 系统(由子类实现)
|
|
519
|
+
* @param _state - 要同步的状态
|
|
520
|
+
*/
|
|
521
|
+
protected abstract _renderCanvas(_state: CanvasSnapshot): void;
|
|
522
|
+
/**
|
|
523
|
+
* 清理资源
|
|
524
|
+
*/
|
|
525
|
+
protected _dispose(): void;
|
|
526
|
+
}
|
|
527
|
+
|
|
528
|
+
/**
|
|
529
|
+
* CanvasTransformer 封装了 Konva.Transformer 的核心功能
|
|
530
|
+
* 提供变换器管理、位置计算、事件处理等能力
|
|
531
|
+
*/
|
|
532
|
+
declare class CanvasTransformer {
|
|
533
|
+
#private;
|
|
534
|
+
constructor(core: CanvasCore, config?: TransformerConfig);
|
|
535
|
+
/**
|
|
536
|
+
* 获取原生 Konva.Transformer 实例
|
|
537
|
+
*/
|
|
538
|
+
getTransformer(): default_2.Transformer;
|
|
539
|
+
/**
|
|
540
|
+
* 获取 Transformer 的位置信息
|
|
541
|
+
*/
|
|
542
|
+
getPosition(): TransformerPosition | null;
|
|
543
|
+
/**
|
|
544
|
+
* 设置要变换的节点
|
|
545
|
+
*/
|
|
546
|
+
setNodes(nodes: default_2.Node[]): void;
|
|
547
|
+
/**
|
|
548
|
+
* 获取当前变换的节点
|
|
549
|
+
*/
|
|
550
|
+
getNodes(): default_2.Node[];
|
|
551
|
+
/**
|
|
552
|
+
* 清除所有节点
|
|
553
|
+
*/
|
|
554
|
+
clearNodes(): void;
|
|
555
|
+
/**
|
|
556
|
+
* emit Transformer 位置
|
|
557
|
+
*/
|
|
558
|
+
emitPositionChange(): void;
|
|
559
|
+
/**
|
|
560
|
+
* 销毁 Transformer
|
|
561
|
+
*/
|
|
562
|
+
destroy(): void;
|
|
563
|
+
}
|
|
564
|
+
|
|
565
|
+
/**
|
|
566
|
+
* 根据字体识别结果在选区附近创建可编辑的 rich-text 节点
|
|
567
|
+
*/
|
|
568
|
+
export declare function createRichTextFromFontReplace(api: CanvasApi | null | undefined, params: {
|
|
569
|
+
text: string;
|
|
570
|
+
fontFamily: string;
|
|
571
|
+
fontId: string;
|
|
572
|
+
fontSize: number;
|
|
573
|
+
letterSpacing: number;
|
|
574
|
+
fontWeight: number;
|
|
575
|
+
fontColor: string;
|
|
576
|
+
lineHeight: number;
|
|
577
|
+
position: {
|
|
578
|
+
x: number;
|
|
579
|
+
y: number;
|
|
580
|
+
};
|
|
581
|
+
width: number;
|
|
582
|
+
}): string | undefined;
|
|
583
|
+
|
|
95
584
|
/**
|
|
96
|
-
*
|
|
97
|
-
*
|
|
585
|
+
* 图片裁剪变换数据
|
|
586
|
+
* 描述图像位图在裁剪区域内的位置、缩放和旋转
|
|
98
587
|
*/
|
|
99
|
-
|
|
588
|
+
declare type CropTransform = {
|
|
589
|
+
x: number;
|
|
590
|
+
y: number;
|
|
591
|
+
width: number;
|
|
592
|
+
height: number;
|
|
593
|
+
rotation: number;
|
|
594
|
+
scaleX: number;
|
|
595
|
+
scaleY: number;
|
|
596
|
+
};
|
|
597
|
+
|
|
100
598
|
/**
|
|
101
|
-
*
|
|
102
|
-
* 如果删除的是 image 节点,会同步删除所有关联的 image-marker
|
|
103
|
-
* @param nodeIds - 要删除的节点 ID 数组
|
|
104
|
-
* @returns 被删除的节点数据数组
|
|
599
|
+
* 椭圆节点配置
|
|
105
600
|
*/
|
|
106
|
-
|
|
601
|
+
declare type EllipseNodeConfig = BaseNodeConfig & default_2.EllipseConfig & Partial<NodeStyle> & {
|
|
602
|
+
$_type: "ellipse";
|
|
603
|
+
};
|
|
604
|
+
|
|
107
605
|
/**
|
|
108
|
-
*
|
|
606
|
+
* 导出 font-replace 选区数据,用于发送到后端
|
|
109
607
|
*/
|
|
110
|
-
|
|
608
|
+
export declare function exportFontReplaceRegion(api: CanvasApi | null | undefined, fontReplaceNodeId: string): Promise<FontReplaceObj | null>;
|
|
609
|
+
|
|
111
610
|
/**
|
|
112
|
-
*
|
|
611
|
+
* 根据图片标注裁剪图片并返回 base64 字符串
|
|
612
|
+
* @param api Canvas API 实例
|
|
613
|
+
* @param imageMarkerNodeId 图片标注节点 ID
|
|
614
|
+
* @returns Promise<string | null> 裁剪后的图片 base64 字符串,失败返回 null
|
|
113
615
|
*/
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
moveNodesDown(nodeIds: string[]): void;
|
|
616
|
+
export declare function exportMarkedRegion(api: CanvasApi | null | undefined, imageMarkerNodeId: string): Promise<string | null>;
|
|
617
|
+
|
|
117
618
|
/**
|
|
118
|
-
*
|
|
119
|
-
*
|
|
120
|
-
*
|
|
121
|
-
*
|
|
122
|
-
* @param options - 配置选项
|
|
123
|
-
* @param options.padding - 内容周围的留白,默认 50px
|
|
124
|
-
* @param options.scale - 是否自动调整缩放以适应内容,默认 false
|
|
125
|
-
* @param options.nodeIds - 要滚动到的节点 ID 数组
|
|
619
|
+
* 导出当前选中节点为图片
|
|
620
|
+
* 如果选中的节点中只有一个图片节点,则直接返回该图片的原始 URL
|
|
621
|
+
* @param api
|
|
622
|
+
* @returns
|
|
126
623
|
*/
|
|
127
|
-
|
|
624
|
+
export declare function exportSelectionAsImage(api: CanvasApi | null | undefined, options?: {
|
|
625
|
+
pixelRatio?: number;
|
|
626
|
+
mimeType?: string;
|
|
627
|
+
quality?: number;
|
|
128
628
|
padding?: number;
|
|
129
|
-
|
|
130
|
-
nodeIds?: string[];
|
|
131
|
-
}): void;
|
|
132
|
-
/**
|
|
133
|
-
* 导出当前状态
|
|
134
|
-
*/
|
|
135
|
-
save(): CanvasSnapshot;
|
|
136
|
-
/**
|
|
137
|
-
* 从状态中恢复画布
|
|
138
|
-
*/
|
|
139
|
-
restore(state: CanvasSnapshot): void;
|
|
140
|
-
}
|
|
629
|
+
}): string | null;
|
|
141
630
|
|
|
142
|
-
declare class CanvasCore extends CanvasStore {
|
|
143
|
-
#private;
|
|
144
|
-
constructor(el: HTMLDivElement, options?: {
|
|
145
|
-
state?: CanvasSnapshot;
|
|
146
|
-
theme?: Theme;
|
|
147
|
-
});
|
|
148
|
-
/**
|
|
149
|
-
* 获取当前主题
|
|
150
|
-
*/
|
|
151
|
-
getTheme(): Theme;
|
|
152
|
-
/**
|
|
153
|
-
* 设置主题并重新渲染
|
|
154
|
-
*/
|
|
155
|
-
setTheme(theme: Theme): void;
|
|
156
|
-
/**
|
|
157
|
-
* 获取 CanvasStage 实例
|
|
158
|
-
*/
|
|
159
|
-
getCanvasStage(): CanvasStage;
|
|
160
|
-
/**
|
|
161
|
-
* 获取 CanvasTransformer 实例
|
|
162
|
-
*/
|
|
163
|
-
getCanvasTransformer(): CanvasTransformer;
|
|
164
|
-
/**
|
|
165
|
-
* 获取 Konva.Stage 实例
|
|
166
|
-
*/
|
|
167
|
-
getStage(): default_2.Stage;
|
|
168
631
|
/**
|
|
169
|
-
*
|
|
632
|
+
* 字体替换选区节点配置
|
|
170
633
|
*/
|
|
171
|
-
|
|
634
|
+
declare type FontReplaceNodeConfig = BaseNodeConfig & default_2.RectConfig & Partial<NodeStyle> & {
|
|
635
|
+
$_type: "font-replace";
|
|
636
|
+
width: number;
|
|
637
|
+
height: number;
|
|
638
|
+
$_parentId: string;
|
|
639
|
+
$_relativeBox: {
|
|
640
|
+
start: {
|
|
641
|
+
ratioX: number;
|
|
642
|
+
ratioY: number;
|
|
643
|
+
};
|
|
644
|
+
end: {
|
|
645
|
+
ratioX: number;
|
|
646
|
+
ratioY: number;
|
|
647
|
+
};
|
|
648
|
+
};
|
|
649
|
+
$_status: "selecting" | "confirming" | "processing" | "done" | "error";
|
|
650
|
+
$_bounds?: {
|
|
651
|
+
x: number;
|
|
652
|
+
y: number;
|
|
653
|
+
width: number;
|
|
654
|
+
height: number;
|
|
655
|
+
};
|
|
656
|
+
};
|
|
657
|
+
|
|
172
658
|
/**
|
|
173
|
-
*
|
|
174
|
-
*/
|
|
175
|
-
|
|
659
|
+
* Font-Replace 选区数据结构(前端 → 后端)
|
|
660
|
+
*/
|
|
661
|
+
export declare interface FontReplaceObj {
|
|
662
|
+
/** 选区裁剪后的 base64 图片 */
|
|
663
|
+
region_image: string;
|
|
664
|
+
/** 原图完整 URL(含标注框,用于 NanoBanana 擦除) */
|
|
665
|
+
edit_urls: string[];
|
|
666
|
+
/** 擦除提示词 */
|
|
667
|
+
prompt: string;
|
|
668
|
+
/** 选区在原图中的相对位置 */
|
|
669
|
+
relative_box: {
|
|
670
|
+
start: {
|
|
671
|
+
ratioX: number;
|
|
672
|
+
ratioY: number;
|
|
673
|
+
};
|
|
674
|
+
end: {
|
|
675
|
+
ratioX: number;
|
|
676
|
+
ratioY: number;
|
|
677
|
+
};
|
|
678
|
+
};
|
|
679
|
+
/** 原图节点 ID */
|
|
680
|
+
image_node_id: string;
|
|
681
|
+
/** font-replace 节点 ID */
|
|
682
|
+
font_replace_node_id: string;
|
|
683
|
+
/** 原图真实像素宽度 */
|
|
684
|
+
natural_width?: number;
|
|
685
|
+
/** 原图真实像素高度 */
|
|
686
|
+
natural_height?: number;
|
|
687
|
+
}
|
|
688
|
+
|
|
689
|
+
declare type HistoryState<T> = {
|
|
690
|
+
past: T[];
|
|
691
|
+
present: T;
|
|
692
|
+
future: T[];
|
|
693
|
+
};
|
|
694
|
+
|
|
176
695
|
/**
|
|
177
|
-
*
|
|
696
|
+
* HTML 节点配置
|
|
178
697
|
*/
|
|
179
|
-
|
|
698
|
+
declare type HtmlNodeConfig = BaseNodeConfig & default_2.RectConfig & Partial<NodeStyle> & {
|
|
699
|
+
$_type: "html";
|
|
700
|
+
$_actualType: string;
|
|
701
|
+
$_htmlContent: string;
|
|
702
|
+
};
|
|
703
|
+
|
|
180
704
|
/**
|
|
181
|
-
*
|
|
705
|
+
* 图片笔刷节点配置(仅在绑定图片范围内涂抹)
|
|
182
706
|
*/
|
|
183
|
-
|
|
707
|
+
declare type ImageBrushNodeConfig = BaseNodeConfig & default_2.LineConfig & Partial<NodeStyle> & {
|
|
708
|
+
$_type: "image-brush";
|
|
709
|
+
points: number[];
|
|
710
|
+
$_imageId: string;
|
|
711
|
+
$_imageBounds: {
|
|
712
|
+
x: number;
|
|
713
|
+
y: number;
|
|
714
|
+
width: number;
|
|
715
|
+
height: number;
|
|
716
|
+
};
|
|
717
|
+
};
|
|
718
|
+
|
|
184
719
|
/**
|
|
185
|
-
*
|
|
720
|
+
* 图片标注节点配置
|
|
186
721
|
*/
|
|
187
|
-
|
|
722
|
+
declare type ImageMarkerNodeConfig = BaseNodeConfig & default_2.RectConfig & Partial<NodeStyle> & {
|
|
723
|
+
$_type: "image-marker";
|
|
724
|
+
width: number;
|
|
725
|
+
height: number;
|
|
726
|
+
$_markerNumber: number;
|
|
727
|
+
$_parentId: string;
|
|
728
|
+
$_relativeBox: {
|
|
729
|
+
start: {
|
|
730
|
+
ratioX: number;
|
|
731
|
+
ratioY: number;
|
|
732
|
+
};
|
|
733
|
+
end: {
|
|
734
|
+
ratioX: number;
|
|
735
|
+
ratioY: number;
|
|
736
|
+
};
|
|
737
|
+
};
|
|
738
|
+
$_bounds?: {
|
|
739
|
+
x: number;
|
|
740
|
+
y: number;
|
|
741
|
+
width: number;
|
|
742
|
+
height: number;
|
|
743
|
+
};
|
|
744
|
+
};
|
|
745
|
+
|
|
188
746
|
/**
|
|
189
|
-
*
|
|
190
|
-
*/
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
747
|
+
* 图片节点配置
|
|
748
|
+
*/
|
|
749
|
+
declare type ImageNodeConfig = BaseNodeConfig & Omit<default_2.ImageConfig, "image"> & Partial<NodeStyle> & {
|
|
750
|
+
$_type: "image";
|
|
751
|
+
$_imageUrl: string;
|
|
752
|
+
$_cropTransform?: CropTransform | null;
|
|
753
|
+
$_applyBlurFilter?: boolean;
|
|
754
|
+
$_applyBrightnessFilter?: boolean;
|
|
755
|
+
$_applyRGBFilter?: boolean;
|
|
756
|
+
$_applyHSLFilter?: boolean;
|
|
757
|
+
red?: number;
|
|
758
|
+
green?: number;
|
|
759
|
+
blue?: number;
|
|
760
|
+
hue?: number;
|
|
761
|
+
saturation?: number;
|
|
762
|
+
luminance?: number;
|
|
763
|
+
image?: CanvasImageSource | undefined;
|
|
764
|
+
};
|
|
765
|
+
|
|
194
766
|
/**
|
|
195
|
-
*
|
|
767
|
+
* 在当前 canvas 内容左下角插入图片节点
|
|
768
|
+
* @param api Canvas API 实例
|
|
769
|
+
* @param imageUrl 图片 URL 或 URL 数组
|
|
770
|
+
* @returns Promise<string[] | undefined> 返回插入的图片节点 ID 数组
|
|
196
771
|
*/
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
protected createNodes(nodes: NodeConfig[], addToHistory: boolean): void;
|
|
772
|
+
export declare function insertImageBesideContent(api: CanvasApi | null | undefined, imageUrl: string | string[]): Promise<string[] | undefined>;
|
|
773
|
+
|
|
200
774
|
/**
|
|
201
|
-
*
|
|
775
|
+
* 在指定位置插入图片节点
|
|
776
|
+
* @param api Canvas API 实例
|
|
777
|
+
* @param imageUrls 图片 URL 或 URL 数组
|
|
778
|
+
* @param position 插入位置 { x, y }
|
|
779
|
+
* @param options 可选配置
|
|
780
|
+
* @returns Promise<string[] | undefined> 返回插入的图片节点 ID 数组
|
|
202
781
|
*/
|
|
203
|
-
|
|
204
|
-
x: number;
|
|
205
|
-
y: number;
|
|
206
|
-
}, endPosition: {
|
|
207
|
-
x: number;
|
|
208
|
-
y: number;
|
|
209
|
-
}, imageBounds: {
|
|
782
|
+
export declare function insertImagesAtPosition(api: CanvasApi | null | undefined, imageUrls: string | string[], position: {
|
|
210
783
|
x: number;
|
|
211
784
|
y: number;
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
/* Excluded from this release type: _updateDraftNode */
|
|
220
|
-
/* Excluded from this release type: _finalizeDraftNode */
|
|
221
|
-
/* Excluded from this release type: _createTextNodeAtDrawingPosition */
|
|
222
|
-
/* Excluded from this release type: _createSelectRect */
|
|
223
|
-
_updateSelectRect(): void;
|
|
224
|
-
/* Excluded from this release type: _finalizeSelectRect */
|
|
225
|
-
/* Excluded from this release type: _selectNodes */
|
|
226
|
-
/* Excluded from this release type: deleteNodes */
|
|
227
|
-
/* Excluded from this release type: deleteSelectedNodes */
|
|
228
|
-
/**
|
|
229
|
-
* 销毁 canvas
|
|
230
|
-
*/
|
|
231
|
-
dispose(): void;
|
|
232
|
-
/* Excluded from this release type: _rebuildStateAfterNodeChange */
|
|
785
|
+
}, options?: {
|
|
786
|
+
spacing?: number;
|
|
787
|
+
scrollToView?: boolean;
|
|
788
|
+
direction?: "horizontal" | "vertical";
|
|
789
|
+
reuseExisting?: boolean;
|
|
790
|
+
}): Promise<string[] | undefined>;
|
|
791
|
+
|
|
233
792
|
/**
|
|
234
|
-
*
|
|
235
|
-
*
|
|
793
|
+
* 在当前选中节点右侧插入 loading 图片节点
|
|
794
|
+
* @param api Canvas API 实例
|
|
795
|
+
* @param imageUrl 图片 URL
|
|
796
|
+
* @returns string | undefined 返回插入的 loading 图片节点 ID,如果未插入则返回 undefined
|
|
236
797
|
*/
|
|
237
|
-
|
|
238
|
-
_showContextMenu(data: {
|
|
239
|
-
x: number;
|
|
240
|
-
y: number;
|
|
241
|
-
clientX: number;
|
|
242
|
-
clientY: number;
|
|
243
|
-
targetIds: string[];
|
|
244
|
-
}): void;
|
|
245
|
-
_syncNodesZIndexToStore(): void;
|
|
246
|
-
}
|
|
798
|
+
export declare function insertLoadingImageBesideSelection(api: CanvasApi | null | undefined, imageUrl: string): string | undefined;
|
|
247
799
|
|
|
248
|
-
|
|
249
|
-
* 状态事件类型定义
|
|
250
|
-
*/
|
|
251
|
-
declare type CanvasEvents = {
|
|
252
|
-
"state:change": CanvasSnapshot;
|
|
253
|
-
"state:undo": CanvasSnapshot;
|
|
254
|
-
"state:redo": CanvasSnapshot;
|
|
255
|
-
"state:reset": CanvasSnapshot;
|
|
256
|
-
"viewport:change": CanvasSnapshot["viewport"];
|
|
257
|
-
"viewport:scale:change": number;
|
|
258
|
-
"transformer:positionChange": TransformerPosition | null;
|
|
259
|
-
"toolType:change": CanvasSnapshot["toolType"];
|
|
260
|
-
"theme:change": Theme;
|
|
261
|
-
"nodes:created": NodeConfig[];
|
|
262
|
-
"nodes:deleted": NodeConfig[];
|
|
263
|
-
"nodes:selected": string[];
|
|
264
|
-
"contextmenu:show": {
|
|
800
|
+
export declare function insertVideoAtPosition(api: CanvasApi | null | undefined, videoUrl: string, coverUrl: string, position: {
|
|
265
801
|
x: number;
|
|
266
802
|
y: number;
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
}
|
|
271
|
-
"nodes:sorted": string[];
|
|
272
|
-
};
|
|
273
|
-
|
|
274
|
-
declare interface CanvasNode {
|
|
275
|
-
getID(): string;
|
|
276
|
-
getElement(): default_2.Shape | default_2.Group;
|
|
277
|
-
getConfig(): NodeConfig;
|
|
278
|
-
syncConfigFromElement(): void;
|
|
279
|
-
update(config: Partial<NodeConfig>): void;
|
|
280
|
-
destroy(): void;
|
|
281
|
-
}
|
|
803
|
+
}, options?: {
|
|
804
|
+
scrollToView?: boolean;
|
|
805
|
+
reuseExisting?: boolean;
|
|
806
|
+
}): Promise<string | undefined>;
|
|
282
807
|
|
|
283
|
-
declare
|
|
284
|
-
viewport: Viewport;
|
|
285
|
-
toolType: ToolType;
|
|
286
|
-
selectedNodeIds?: string[];
|
|
287
|
-
nodes?: NodeConfig[];
|
|
288
|
-
}
|
|
808
|
+
export declare function insertVideoBesideContent(api: CanvasApi | null | undefined, videoUrl: string, coverUrl: string): Promise<string | undefined>;
|
|
289
809
|
|
|
290
|
-
/**
|
|
291
|
-
* CanvasStage 封装了 Konva.Stage 的核心功能
|
|
292
|
-
* 提供视口管理、事件处理、拖拽和缩放等能力
|
|
293
|
-
*/
|
|
294
|
-
declare class CanvasStage {
|
|
295
|
-
#private;
|
|
296
|
-
constructor(core: CanvasCore, config: StageConfig);
|
|
297
|
-
/**
|
|
298
|
-
* 获取原生 Konva.Stage 实例
|
|
299
|
-
*/
|
|
300
|
-
getStage(): default_2.Stage;
|
|
301
|
-
/**
|
|
302
|
-
* 获取当前视口状态
|
|
303
|
-
*/
|
|
304
|
-
getViewport(): ViewportState;
|
|
305
|
-
/**
|
|
306
|
-
* 设置视口(包括位置、缩放和尺寸)
|
|
307
|
-
*/
|
|
308
|
-
setViewport(viewport: Partial<ViewportState>): void;
|
|
309
810
|
/**
|
|
310
|
-
*
|
|
811
|
+
* 节点配置联合类型(判别联合)
|
|
812
|
+
* 根据 $_type 字段可以自动推断出对应节点的特定字段
|
|
311
813
|
*/
|
|
312
|
-
|
|
313
|
-
/**
|
|
314
|
-
* 设置光标样式
|
|
315
|
-
*/
|
|
316
|
-
setCursor(cursor: string): void;
|
|
317
|
-
/**
|
|
318
|
-
* 重置光标样式
|
|
319
|
-
*/
|
|
320
|
-
resetCursor(): void;
|
|
321
|
-
/**
|
|
322
|
-
* 销毁 Stage
|
|
323
|
-
*/
|
|
324
|
-
destroy(): void;
|
|
325
|
-
}
|
|
814
|
+
declare type NodeConfig = RectangleNodeConfig | ImageNodeConfig | ImageMarkerNodeConfig | HtmlNodeConfig | TextNodeConfig | RichTextNodeConfig | VideoNodeConfig | StarNodeConfig | EllipseNodeConfig | PolygonNodeConfig | ArrowNodeConfig | BrushNodeConfig | ImageBrushNodeConfig | FontReplaceNodeConfig;
|
|
326
815
|
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
constructor(initialState: CanvasSnapshot);
|
|
334
|
-
/**
|
|
335
|
-
* 获取当前状态
|
|
336
|
-
*/
|
|
337
|
-
getState(): CanvasSnapshot;
|
|
338
|
-
/**
|
|
339
|
-
* 获取完整历史状态
|
|
340
|
-
*/
|
|
341
|
-
getHistory(): HistoryState<CanvasSnapshot>;
|
|
342
|
-
/**
|
|
343
|
-
* 是否可以撤销
|
|
344
|
-
*/
|
|
345
|
-
canUndo(): boolean;
|
|
346
|
-
/**
|
|
347
|
-
* 是否可以重做
|
|
348
|
-
*/
|
|
349
|
-
canRedo(): boolean;
|
|
350
|
-
/**
|
|
351
|
-
* 订阅状态事件
|
|
352
|
-
*/
|
|
353
|
-
on<K extends keyof CanvasEvents>(event: K, handler: (data: CanvasEvents[K]) => void): void;
|
|
354
|
-
/**
|
|
355
|
-
* 取消订阅状态事件
|
|
356
|
-
*/
|
|
357
|
-
off<K extends keyof CanvasEvents>(event: K, handler: (data: CanvasEvents[K]) => void): void;
|
|
358
|
-
/* Excluded from this release type: _emit */
|
|
359
|
-
/**
|
|
360
|
-
* 撤销操作
|
|
361
|
-
*/
|
|
362
|
-
undo(): void;
|
|
363
|
-
/**
|
|
364
|
-
* 重做操作
|
|
365
|
-
*/
|
|
366
|
-
redo(): void;
|
|
367
|
-
/**
|
|
368
|
-
* 重置历史记录
|
|
369
|
-
*/
|
|
370
|
-
resetHistory(): void;
|
|
371
|
-
/**
|
|
372
|
-
* 更新状态
|
|
373
|
-
* @param partial - 部分状态更新
|
|
374
|
-
* @param addToHistory - 是否添加到历史记录
|
|
375
|
-
*/
|
|
376
|
-
protected _updateState(partial: Partial<CanvasSnapshot>, addToHistory: boolean): void;
|
|
377
|
-
/**
|
|
378
|
-
* 同步状态到 canvas 系统(由子类实现)
|
|
379
|
-
* @param _state - 要同步的状态
|
|
380
|
-
*/
|
|
381
|
-
protected abstract _renderCanvas(_state: CanvasSnapshot): void;
|
|
382
|
-
/**
|
|
383
|
-
* 清理资源
|
|
384
|
-
*/
|
|
385
|
-
protected _dispose(): void;
|
|
386
|
-
}
|
|
816
|
+
declare interface NodeStyle {
|
|
817
|
+
$_strokeColor: ThemeKeysStartingWith<"theme.stroke-color."> | string;
|
|
818
|
+
$_fillColor: ThemeKeysStartingWith<"theme.fill-color."> | string;
|
|
819
|
+
}
|
|
820
|
+
|
|
821
|
+
declare type NodeType = "rectangle" | "image" | "image-marker" | "html" | "text" | "rich-text" | "video" | "star" | "ellipse" | "polygon" | "arrow" | "brush" | "image-brush" | "font-replace";
|
|
387
822
|
|
|
388
|
-
/**
|
|
389
|
-
* CanvasTransformer 封装了 Konva.Transformer 的核心功能
|
|
390
|
-
* 提供变换器管理、位置计算、事件处理等能力
|
|
391
|
-
*/
|
|
392
|
-
declare class CanvasTransformer {
|
|
393
|
-
#private;
|
|
394
|
-
constructor(core: CanvasCore, config?: TransformerConfig);
|
|
395
|
-
/**
|
|
396
|
-
* 获取原生 Konva.Transformer 实例
|
|
397
|
-
*/
|
|
398
|
-
getTransformer(): default_2.Transformer;
|
|
399
|
-
/**
|
|
400
|
-
* 获取 Transformer 的位置信息
|
|
401
|
-
*/
|
|
402
|
-
getPosition(): TransformerPosition | null;
|
|
403
|
-
/**
|
|
404
|
-
* 设置要变换的节点
|
|
405
|
-
*/
|
|
406
|
-
setNodes(nodes: default_2.Node[]): void;
|
|
407
|
-
/**
|
|
408
|
-
* 获取当前变换的节点
|
|
409
|
-
*/
|
|
410
|
-
getNodes(): default_2.Node[];
|
|
411
823
|
/**
|
|
412
|
-
*
|
|
824
|
+
* 多边形节点配置
|
|
413
825
|
*/
|
|
414
|
-
|
|
826
|
+
declare type PolygonNodeConfig = BaseNodeConfig & default_2.LineConfig & Partial<NodeStyle> & {
|
|
827
|
+
$_type: "polygon";
|
|
828
|
+
$_shape: "triangle" | "diamond" | "hexagon";
|
|
829
|
+
};
|
|
830
|
+
|
|
415
831
|
/**
|
|
416
|
-
*
|
|
832
|
+
* 矩形节点配置
|
|
417
833
|
*/
|
|
418
|
-
|
|
834
|
+
declare type RectangleNodeConfig = BaseNodeConfig & default_2.RectConfig & Partial<NodeStyle> & {
|
|
835
|
+
$_type: "rectangle";
|
|
836
|
+
width: number;
|
|
837
|
+
height: number;
|
|
838
|
+
};
|
|
839
|
+
|
|
419
840
|
/**
|
|
420
|
-
*
|
|
841
|
+
* 替换图片节点的图片 URL(用擦除后的图片替换原图)
|
|
421
842
|
*/
|
|
422
|
-
|
|
423
|
-
}
|
|
843
|
+
export declare function replaceImageUrl(api: CanvasApi | null | undefined, imageNodeId: string, newImageUrl: string): void;
|
|
424
844
|
|
|
425
|
-
|
|
426
|
-
* 根据图片标注裁剪图片并返回 base64 字符串
|
|
427
|
-
* @param api Canvas API 实例
|
|
428
|
-
* @param imageMarkerNodeId 图片标注节点 ID
|
|
429
|
-
* @returns Promise<string | null> 裁剪后的图片 base64 字符串,失败返回 null
|
|
430
|
-
*/
|
|
431
|
-
export declare function exportMarkedRegion(api: CanvasApi | null | undefined, imageMarkerNodeId: string): Promise<string | null>;
|
|
845
|
+
export declare function replaceLoadingImageNode(api: CanvasApi | null | undefined, loadingNodeId: string, imageUrls: string | string[]): void;
|
|
432
846
|
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
* @returns
|
|
438
|
-
*/
|
|
439
|
-
export declare function exportSelectionAsImage(api: CanvasApi | null | undefined): string | null;
|
|
847
|
+
declare type RichTextNodeConfig = BaseNodeConfig & default_2.ImageConfig & Partial<NodeStyle> & {
|
|
848
|
+
$_type: "rich-text";
|
|
849
|
+
$_htmlContent: string;
|
|
850
|
+
};
|
|
440
851
|
|
|
441
|
-
declare type
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
852
|
+
declare type StageConfig = {
|
|
853
|
+
container: HTMLDivElement;
|
|
854
|
+
width: number;
|
|
855
|
+
height: number;
|
|
856
|
+
draggable?: boolean;
|
|
857
|
+
className?: string;
|
|
858
|
+
};
|
|
446
859
|
|
|
447
|
-
/**
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
declare type
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
$_htmlContent: string;
|
|
454
|
-
};
|
|
860
|
+
/**
|
|
861
|
+
* 星形节点配置
|
|
862
|
+
*/
|
|
863
|
+
declare type StarNodeConfig = BaseNodeConfig & default_2.StarConfig & Partial<NodeStyle> & {
|
|
864
|
+
$_type: "star";
|
|
865
|
+
};
|
|
455
866
|
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
867
|
+
declare type TextNodeConfig = BaseNodeConfig & default_2.TextConfig & Partial<NodeStyle> & {
|
|
868
|
+
$_type: "text";
|
|
869
|
+
text: string;
|
|
870
|
+
};
|
|
871
|
+
|
|
872
|
+
declare interface Theme {
|
|
873
|
+
"theme.select-rect-border": string;
|
|
874
|
+
"theme.select-rect-fill": string;
|
|
875
|
+
"theme.image-marker-color": string;
|
|
876
|
+
"theme.stroke-color.1": string;
|
|
877
|
+
"theme.stroke-color.2": string;
|
|
878
|
+
"theme.stroke-color.3": string;
|
|
879
|
+
"theme.stroke-color.4": string;
|
|
880
|
+
"theme.stroke-color.5": string;
|
|
881
|
+
"theme.stroke-color.6": string;
|
|
882
|
+
"theme.fill-color.1": string;
|
|
883
|
+
"theme.fill-color.2": string;
|
|
884
|
+
"theme.fill-color.3": string;
|
|
885
|
+
"theme.fill-color.4": string;
|
|
886
|
+
"theme.fill-color.5": string;
|
|
887
|
+
"theme.fill-color.6": string;
|
|
888
|
+
}
|
|
889
|
+
|
|
890
|
+
declare type ThemeKeysStartingWith<Prefix extends string> = Extract<keyof Theme, `${Prefix}${string}`>;
|
|
891
|
+
|
|
892
|
+
declare type ToolType = "select" | "hand" | "rectangle" | "star" | "image-marker" | "text" | "rich-text" | "ellipse" | "polygon" | "arrow" | "brush" | "image-brush" | "font-replace";
|
|
893
|
+
|
|
894
|
+
declare type TransformerConfig = {
|
|
895
|
+
rotateEnabled?: boolean;
|
|
896
|
+
ignoreStroke?: boolean;
|
|
897
|
+
anchorSize?: number;
|
|
898
|
+
borderDash?: number[];
|
|
899
|
+
anchorCornerRadius?: number;
|
|
900
|
+
padding?: number;
|
|
474
901
|
};
|
|
475
|
-
|
|
902
|
+
|
|
903
|
+
/**
|
|
904
|
+
* 变换器(Transformer)位置信息
|
|
905
|
+
*/
|
|
906
|
+
declare interface TransformerPosition {
|
|
476
907
|
x: number;
|
|
477
908
|
y: number;
|
|
478
909
|
width: number;
|
|
479
910
|
height: number;
|
|
911
|
+
rotation?: number;
|
|
912
|
+
}
|
|
913
|
+
|
|
914
|
+
declare type VideoNodeConfig = BaseNodeConfig & Omit<default_2.ImageConfig, "image"> & Partial<NodeStyle> & {
|
|
915
|
+
$_type: "video";
|
|
916
|
+
$_videoUrl: string;
|
|
917
|
+
$_coverUrl: string;
|
|
918
|
+
image?: CanvasImageSource | undefined;
|
|
480
919
|
};
|
|
481
|
-
};
|
|
482
|
-
|
|
483
|
-
/**
|
|
484
|
-
* 图片节点配置
|
|
485
|
-
*/
|
|
486
|
-
declare type ImageNodeConfig = BaseNodeConfig & Omit<default_2.ImageConfig, "image"> & Partial<NodeStyle> & {
|
|
487
|
-
$_type: "image";
|
|
488
|
-
$_imageUrl: string;
|
|
489
|
-
image?: CanvasImageSource | undefined;
|
|
490
|
-
};
|
|
491
|
-
|
|
492
|
-
/**
|
|
493
|
-
* 在当前 canvas 内容左下角插入图片节点
|
|
494
|
-
* @param api Canvas API 实例
|
|
495
|
-
* @param imageUrl 图片 URL 或 URL 数组
|
|
496
|
-
* @returns Promise<string[] | undefined> 返回插入的图片节点 ID 数组
|
|
497
|
-
*/
|
|
498
|
-
export declare function insertImageBesideContent(api: CanvasApi | null | undefined, imageUrl: string | string[]): Promise<string[] | undefined>;
|
|
499
|
-
|
|
500
|
-
/**
|
|
501
|
-
* 在指定位置插入图片节点
|
|
502
|
-
* @param api Canvas API 实例
|
|
503
|
-
* @param imageUrls 图片 URL 或 URL 数组
|
|
504
|
-
* @param position 插入位置 { x, y }
|
|
505
|
-
* @param options 可选配置
|
|
506
|
-
* @returns Promise<string[] | undefined> 返回插入的图片节点 ID 数组
|
|
507
|
-
*/
|
|
508
|
-
export declare function insertImagesAtPosition(api: CanvasApi | null | undefined, imageUrls: string | string[], position: {
|
|
509
|
-
x: number;
|
|
510
|
-
y: number;
|
|
511
|
-
}, options?: {
|
|
512
|
-
spacing?: number;
|
|
513
|
-
scrollToView?: boolean;
|
|
514
|
-
direction?: "horizontal" | "vertical";
|
|
515
|
-
reuseExisting?: boolean;
|
|
516
|
-
}): Promise<string[] | undefined>;
|
|
517
|
-
|
|
518
|
-
/**
|
|
519
|
-
* 在当前选中节点右侧插入 loading 图片节点
|
|
520
|
-
* @param api Canvas API 实例
|
|
521
|
-
* @param imageUrl 图片 URL
|
|
522
|
-
* @returns string | undefined 返回插入的 loading 图片节点 ID,如果未插入则返回 undefined
|
|
523
|
-
*/
|
|
524
|
-
export declare function insertLoadingImageBesideSelection(api: CanvasApi | null | undefined, imageUrl: string): string | undefined;
|
|
525
|
-
|
|
526
|
-
export declare function insertVideoAtPosition(api: CanvasApi | null | undefined, videoUrl: string, coverUrl: string, position: {
|
|
527
|
-
x: number;
|
|
528
|
-
y: number;
|
|
529
|
-
}, options?: {
|
|
530
|
-
scrollToView?: boolean;
|
|
531
|
-
reuseExisting?: boolean;
|
|
532
|
-
}): Promise<string | undefined>;
|
|
533
|
-
|
|
534
|
-
export declare function insertVideoBesideContent(api: CanvasApi | null | undefined, videoUrl: string, coverUrl: string): Promise<string | undefined>;
|
|
535
|
-
|
|
536
|
-
/**
|
|
537
|
-
* 节点配置联合类型(判别联合)
|
|
538
|
-
* 根据 $_type 字段可以自动推断出对应节点的特定字段
|
|
539
|
-
*/
|
|
540
|
-
declare type NodeConfig = RectangleNodeConfig | ImageNodeConfig | ImageMarkerNodeConfig | HtmlNodeConfig | TextNodeConfig | RichTextNodeConfig | VideoNodeConfig;
|
|
541
|
-
|
|
542
|
-
declare interface NodeStyle {
|
|
543
|
-
$_strokeColor: ThemeKeysStartingWith<"theme.stroke-color."> | string;
|
|
544
|
-
$_fillColor: ThemeKeysStartingWith<"theme.fill-color."> | string;
|
|
545
|
-
}
|
|
546
|
-
|
|
547
|
-
declare type NodeType = "rectangle" | "image" | "image-marker" | "html" | "text" | "rich-text" | "video";
|
|
548
|
-
|
|
549
|
-
/**
|
|
550
|
-
* 矩形节点配置
|
|
551
|
-
*/
|
|
552
|
-
declare type RectangleNodeConfig = BaseNodeConfig & default_2.RectConfig & Partial<NodeStyle> & {
|
|
553
|
-
$_type: "rectangle";
|
|
554
|
-
width: number;
|
|
555
|
-
height: number;
|
|
556
|
-
};
|
|
557
|
-
|
|
558
|
-
export declare function replaceLoadingImageNode(api: CanvasApi | null | undefined, loadingNodeId: string, imageUrls: string | string[]): void;
|
|
559
|
-
|
|
560
|
-
declare type RichTextNodeConfig = BaseNodeConfig & default_2.RectConfig & Partial<NodeStyle> & {
|
|
561
|
-
$_type: "rich-text";
|
|
562
|
-
$_htmlContent: string;
|
|
563
|
-
};
|
|
564
|
-
|
|
565
|
-
declare type StageConfig = {
|
|
566
|
-
container: HTMLDivElement;
|
|
567
|
-
width: number;
|
|
568
|
-
height: number;
|
|
569
|
-
draggable?: boolean;
|
|
570
|
-
className?: string;
|
|
571
|
-
};
|
|
572
|
-
|
|
573
|
-
declare type TextNodeConfig = BaseNodeConfig & default_2.TextConfig & Partial<NodeStyle> & {
|
|
574
|
-
$_type: "text";
|
|
575
|
-
text: string;
|
|
576
|
-
};
|
|
577
|
-
|
|
578
|
-
declare interface Theme {
|
|
579
|
-
"theme.select-rect-border": string;
|
|
580
|
-
"theme.select-rect-fill": string;
|
|
581
|
-
"theme.image-marker-color": string;
|
|
582
|
-
"theme.stroke-color.1": string;
|
|
583
|
-
"theme.stroke-color.2": string;
|
|
584
|
-
"theme.stroke-color.3": string;
|
|
585
|
-
"theme.stroke-color.4": string;
|
|
586
|
-
"theme.stroke-color.5": string;
|
|
587
|
-
"theme.stroke-color.6": string;
|
|
588
|
-
"theme.fill-color.1": string;
|
|
589
|
-
"theme.fill-color.2": string;
|
|
590
|
-
"theme.fill-color.3": string;
|
|
591
|
-
"theme.fill-color.4": string;
|
|
592
|
-
"theme.fill-color.5": string;
|
|
593
|
-
"theme.fill-color.6": string;
|
|
594
|
-
}
|
|
595
|
-
|
|
596
|
-
declare type ThemeKeysStartingWith<Prefix extends string> = Extract<keyof Theme, `${Prefix}${string}`>;
|
|
597
|
-
|
|
598
|
-
declare type ToolType = "select" | "hand" | "rectangle" | "image-marker" | "text" | "rich-text";
|
|
599
|
-
|
|
600
|
-
declare type TransformerConfig = {
|
|
601
|
-
rotateEnabled?: boolean;
|
|
602
|
-
ignoreStroke?: boolean;
|
|
603
|
-
anchorSize?: number;
|
|
604
|
-
borderDash?: number[];
|
|
605
|
-
anchorCornerRadius?: number;
|
|
606
|
-
padding?: number;
|
|
607
|
-
};
|
|
608
|
-
|
|
609
|
-
/**
|
|
610
|
-
* 变换器(Transformer)位置信息
|
|
611
|
-
*/
|
|
612
|
-
declare interface TransformerPosition {
|
|
613
|
-
x: number;
|
|
614
|
-
y: number;
|
|
615
|
-
width: number;
|
|
616
|
-
height: number;
|
|
617
|
-
rotation?: number;
|
|
618
|
-
}
|
|
619
920
|
|
|
620
|
-
declare
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
};
|
|
626
|
-
|
|
627
|
-
declare interface Viewport {
|
|
628
|
-
x: number;
|
|
629
|
-
y: number;
|
|
630
|
-
scale: number;
|
|
631
|
-
}
|
|
921
|
+
declare interface Viewport {
|
|
922
|
+
x: number;
|
|
923
|
+
y: number;
|
|
924
|
+
scale: number;
|
|
925
|
+
}
|
|
632
926
|
|
|
633
|
-
declare type ViewportState = {
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
};
|
|
927
|
+
declare type ViewportState = {
|
|
928
|
+
x: number;
|
|
929
|
+
y: number;
|
|
930
|
+
scale: number;
|
|
931
|
+
width?: number;
|
|
932
|
+
height?: number;
|
|
933
|
+
};
|
|
640
934
|
|
|
641
|
-
export { }
|
|
935
|
+
export { }
|