react-design-editor 0.0.50 → 0.0.51
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/react-design-editor.js +7739 -7114
- package/dist/react-design-editor.min.js +1 -1
- package/dist/react-design-editor.min.js.LICENSE.txt +2 -0
- package/lib/Canvas.d.ts +18 -18
- package/lib/Canvas.js +172 -172
- package/lib/CanvasObject.d.ts +10 -10
- package/lib/CanvasObject.js +96 -96
- package/lib/constants/code.d.ts +19 -19
- package/lib/constants/code.js +22 -22
- package/lib/constants/defaults.d.ts +38 -38
- package/lib/constants/defaults.js +69 -69
- package/lib/constants/index.d.ts +3 -3
- package/lib/constants/index.js +26 -26
- package/lib/handlers/AlignmentHandler.d.ts +18 -18
- package/lib/handlers/AlignmentHandler.js +58 -58
- package/lib/handlers/AnimationHandler.d.ts +50 -50
- package/lib/handlers/AnimationHandler.js +346 -346
- package/lib/handlers/ChartHandler.d.ts +8 -8
- package/lib/handlers/ChartHandler.js +8 -8
- package/lib/handlers/ContextmenuHandler.d.ts +28 -28
- package/lib/handlers/ContextmenuHandler.js +65 -65
- package/lib/handlers/CropHandler.d.ts +43 -43
- package/lib/handlers/CropHandler.js +261 -261
- package/lib/handlers/CustomHandler.d.ts +7 -7
- package/lib/handlers/CustomHandler.js +10 -10
- package/lib/handlers/DrawingHandler.d.ts +28 -28
- package/lib/handlers/DrawingHandler.js +318 -318
- package/lib/handlers/ElementHandler.d.ts +80 -80
- package/lib/handlers/ElementHandler.js +154 -154
- package/lib/handlers/EventHandler.d.ts +170 -170
- package/lib/handlers/EventHandler.js +880 -880
- package/lib/handlers/FiberHandler.d.ts +6 -6
- package/lib/handlers/FiberHandler.js +23 -23
- package/lib/handlers/GridHandler.d.ts +19 -19
- package/lib/handlers/GridHandler.js +77 -77
- package/lib/handlers/GuidelineHandler.d.ts +61 -61
- package/lib/handlers/GuidelineHandler.js +315 -315
- package/lib/handlers/Handler.d.ts +618 -618
- package/lib/handlers/Handler.js +1645 -1645
- package/lib/handlers/ImageHandler.d.ts +307 -307
- package/lib/handlers/ImageHandler.js +528 -528
- package/lib/handlers/InteractionHandler.d.ts +45 -45
- package/lib/handlers/InteractionHandler.js +168 -164
- package/lib/handlers/LinkHandler.d.ts +115 -115
- package/lib/handlers/LinkHandler.js +247 -247
- package/lib/handlers/NodeHandler.d.ts +50 -50
- package/lib/handlers/NodeHandler.js +274 -274
- package/lib/handlers/PortHandler.d.ts +22 -22
- package/lib/handlers/PortHandler.js +179 -179
- package/lib/handlers/ShortcutHandler.d.ts +119 -119
- package/lib/handlers/ShortcutHandler.js +151 -151
- package/lib/handlers/TooltipHandler.d.ts +33 -33
- package/lib/handlers/TooltipHandler.js +91 -91
- package/lib/handlers/TransactionHandler.d.ts +59 -59
- package/lib/handlers/TransactionHandler.js +137 -137
- package/lib/handlers/WorkareaHandler.d.ts +43 -43
- package/lib/handlers/WorkareaHandler.js +354 -354
- package/lib/handlers/ZoomHandler.d.ts +48 -48
- package/lib/handlers/ZoomHandler.js +143 -143
- package/lib/handlers/index.d.ts +23 -23
- package/lib/handlers/index.js +48 -48
- package/lib/index.d.ts +6 -6
- package/lib/index.js +20 -20
- package/lib/objects/Arrow.d.ts +2 -2
- package/lib/objects/Arrow.js +40 -40
- package/lib/objects/Chart.d.ts +10 -10
- package/lib/objects/Chart.js +117 -117
- package/lib/objects/CirclePort.d.ts +2 -2
- package/lib/objects/CirclePort.js +28 -28
- package/lib/objects/Cube.d.ts +5 -5
- package/lib/objects/Cube.js +71 -71
- package/lib/objects/CurvedLink.d.ts +2 -2
- package/lib/objects/CurvedLink.js +51 -51
- package/lib/objects/Element.d.ts +13 -13
- package/lib/objects/Element.js +77 -77
- package/lib/objects/Gif.d.ts +3 -3
- package/lib/objects/Gif.js +41 -41
- package/lib/objects/Iframe.d.ts +9 -9
- package/lib/objects/Iframe.js +63 -63
- package/lib/objects/Line.d.ts +2 -2
- package/lib/objects/Line.js +24 -24
- package/lib/objects/Link.d.ts +15 -15
- package/lib/objects/Link.js +107 -107
- package/lib/objects/Node.d.ts +59 -59
- package/lib/objects/Node.js +271 -271
- package/lib/objects/OrthogonalLink.d.ts +2 -2
- package/lib/objects/OrthogonalLink.js +54 -54
- package/lib/objects/Port.d.ts +12 -12
- package/lib/objects/Port.js +28 -28
- package/lib/objects/Svg.d.ts +12 -12
- package/lib/objects/Svg.js +93 -93
- package/lib/objects/Video.d.ts +14 -14
- package/lib/objects/Video.js +113 -113
- package/lib/objects/index.d.ts +15 -15
- package/lib/objects/index.js +32 -32
- package/lib/utils/ObjectUtil.d.ts +408 -408
- package/lib/utils/ObjectUtil.js +13 -13
- package/lib/utils/index.d.ts +1 -1
- package/lib/utils/index.js +13 -13
- package/package.json +1 -1
|
@@ -1,408 +1,408 @@
|
|
|
1
|
-
/// <reference types="animejs" />
|
|
2
|
-
import { fabric } from 'fabric';
|
|
3
|
-
import { IFilter } from '../handlers/ImageHandler';
|
|
4
|
-
export declare type AnimationType = 'fade' | 'bounce' | 'shake' | 'scaling' | 'rotation' | 'flash' | 'custom' | 'none';
|
|
5
|
-
export interface AnimationProperty {
|
|
6
|
-
delay?: number;
|
|
7
|
-
duration?: number;
|
|
8
|
-
autoplay?: boolean;
|
|
9
|
-
loop?: boolean | number;
|
|
10
|
-
type: AnimationType;
|
|
11
|
-
offset?: number;
|
|
12
|
-
opacity?: number;
|
|
13
|
-
bounce?: 'vertical' | 'horizontal';
|
|
14
|
-
shake?: 'vertical' | 'horizontal';
|
|
15
|
-
scale?: number;
|
|
16
|
-
angle?: number;
|
|
17
|
-
fill?: string | fabric.Pattern;
|
|
18
|
-
stroke?: string;
|
|
19
|
-
}
|
|
20
|
-
export interface LinkProperty {
|
|
21
|
-
enabled?: boolean;
|
|
22
|
-
type?: string;
|
|
23
|
-
state?: string;
|
|
24
|
-
[key: string]: any;
|
|
25
|
-
}
|
|
26
|
-
export interface TooltipProperty {
|
|
27
|
-
enabled?: boolean;
|
|
28
|
-
type?: string;
|
|
29
|
-
template?: string;
|
|
30
|
-
}
|
|
31
|
-
export interface TriggerProperty {
|
|
32
|
-
enabled?: boolean;
|
|
33
|
-
type?: string;
|
|
34
|
-
script?: string;
|
|
35
|
-
effect?: string;
|
|
36
|
-
}
|
|
37
|
-
export interface FabricCanvasOption {
|
|
38
|
-
wrapperEl?: HTMLElement;
|
|
39
|
-
}
|
|
40
|
-
export declare type FabricCanvas<T extends any = fabric.Canvas> = T & FabricCanvasOption;
|
|
41
|
-
export declare type FabricObjectOption<T extends any = fabric.IObjectOptions> = T & {
|
|
42
|
-
/**
|
|
43
|
-
* Object id
|
|
44
|
-
* @type {string}
|
|
45
|
-
*/
|
|
46
|
-
id?: string;
|
|
47
|
-
/**
|
|
48
|
-
* Parent object id
|
|
49
|
-
* @type {string}
|
|
50
|
-
*/
|
|
51
|
-
parentId?: string;
|
|
52
|
-
/**
|
|
53
|
-
* Original opacity
|
|
54
|
-
* @type {number}
|
|
55
|
-
*/
|
|
56
|
-
originOpacity?: number;
|
|
57
|
-
/**
|
|
58
|
-
* Original top position
|
|
59
|
-
* @type {number}
|
|
60
|
-
*/
|
|
61
|
-
originTop?: number;
|
|
62
|
-
/**
|
|
63
|
-
* Original left position
|
|
64
|
-
* @type {number}
|
|
65
|
-
*/
|
|
66
|
-
originLeft?: number;
|
|
67
|
-
/**
|
|
68
|
-
* Original scale X
|
|
69
|
-
* @type {number}
|
|
70
|
-
*/
|
|
71
|
-
originScaleX?: number;
|
|
72
|
-
/**
|
|
73
|
-
* Original scale Y
|
|
74
|
-
* @type {number}
|
|
75
|
-
*/
|
|
76
|
-
originScaleY?: number;
|
|
77
|
-
/**
|
|
78
|
-
* Original angle
|
|
79
|
-
* @type {number}
|
|
80
|
-
*/
|
|
81
|
-
originAngle?: number;
|
|
82
|
-
/**
|
|
83
|
-
* Original fill color
|
|
84
|
-
*
|
|
85
|
-
* @type {(string | fabric.Pattern | fabric.Gradient)}
|
|
86
|
-
*/
|
|
87
|
-
originFill?: string | fabric.Pattern | fabric.Gradient;
|
|
88
|
-
/**
|
|
89
|
-
* Original stroke color
|
|
90
|
-
* @type {string}
|
|
91
|
-
*/
|
|
92
|
-
originStroke?: string;
|
|
93
|
-
/**
|
|
94
|
-
* Original rotation
|
|
95
|
-
*
|
|
96
|
-
* @type {number}
|
|
97
|
-
*/
|
|
98
|
-
originRotation?: number;
|
|
99
|
-
/**
|
|
100
|
-
* Object editable
|
|
101
|
-
* @type {boolean}
|
|
102
|
-
*/
|
|
103
|
-
editable?: boolean;
|
|
104
|
-
/**
|
|
105
|
-
* Object Super type
|
|
106
|
-
* @type {string}
|
|
107
|
-
*/
|
|
108
|
-
superType?: string;
|
|
109
|
-
/**
|
|
110
|
-
* @description
|
|
111
|
-
* @type {string}
|
|
112
|
-
*/
|
|
113
|
-
description?: string;
|
|
114
|
-
/**
|
|
115
|
-
* Animation property
|
|
116
|
-
* @type {AnimationProperty}
|
|
117
|
-
*/
|
|
118
|
-
animation?: AnimationProperty;
|
|
119
|
-
/**
|
|
120
|
-
* Anime instance
|
|
121
|
-
* @type {anime.AnimeInstance}
|
|
122
|
-
*/
|
|
123
|
-
anime?: anime.AnimeInstance;
|
|
124
|
-
/**
|
|
125
|
-
* Tooltip property
|
|
126
|
-
* @type {TooltipProperty}
|
|
127
|
-
*/
|
|
128
|
-
tooltip?: TooltipProperty;
|
|
129
|
-
/**
|
|
130
|
-
* Link property
|
|
131
|
-
* @type {LinkProperty}
|
|
132
|
-
*/
|
|
133
|
-
link?: LinkProperty;
|
|
134
|
-
/**
|
|
135
|
-
* Is running animation
|
|
136
|
-
* @type {boolean}
|
|
137
|
-
*/
|
|
138
|
-
animating?: boolean;
|
|
139
|
-
/**
|
|
140
|
-
* Object class
|
|
141
|
-
* @type {string}
|
|
142
|
-
*/
|
|
143
|
-
class?: string;
|
|
144
|
-
/**
|
|
145
|
-
* Is possible delete
|
|
146
|
-
* @type {boolean}
|
|
147
|
-
*/
|
|
148
|
-
deletable?: boolean;
|
|
149
|
-
/**
|
|
150
|
-
* Is enable double click
|
|
151
|
-
* @type {boolean}
|
|
152
|
-
*/
|
|
153
|
-
dblclick?: boolean;
|
|
154
|
-
/**
|
|
155
|
-
* Is possible clone
|
|
156
|
-
* @type {boolean}
|
|
157
|
-
*/
|
|
158
|
-
cloneable?: boolean;
|
|
159
|
-
/**
|
|
160
|
-
* Is locked object
|
|
161
|
-
* @type {boolean}
|
|
162
|
-
*/
|
|
163
|
-
locked?: boolean;
|
|
164
|
-
/**
|
|
165
|
-
* This property replaces "angle"
|
|
166
|
-
*
|
|
167
|
-
* @type {number}
|
|
168
|
-
*/
|
|
169
|
-
rotation?: number;
|
|
170
|
-
/**
|
|
171
|
-
* Whether it can be clicked
|
|
172
|
-
*
|
|
173
|
-
* @type {boolean}
|
|
174
|
-
*/
|
|
175
|
-
clickable?: boolean;
|
|
176
|
-
[key: string]: any;
|
|
177
|
-
};
|
|
178
|
-
export declare type FabricObject<T extends any = fabric.Object> = T & FabricObjectOption;
|
|
179
|
-
export declare type FabricGroup = FabricObject<fabric.Group> & {
|
|
180
|
-
/**
|
|
181
|
-
* Object that config group
|
|
182
|
-
* @type {FabricObject[]}
|
|
183
|
-
*/
|
|
184
|
-
objects?: FabricObject[];
|
|
185
|
-
};
|
|
186
|
-
export declare type FabricImage = FabricObject & fabric.Image & {
|
|
187
|
-
/**
|
|
188
|
-
* Image URL
|
|
189
|
-
* @type {string}
|
|
190
|
-
*/
|
|
191
|
-
src?: string;
|
|
192
|
-
/**
|
|
193
|
-
* Image File or Blob
|
|
194
|
-
* @type {File}
|
|
195
|
-
*/
|
|
196
|
-
file?: File;
|
|
197
|
-
/**
|
|
198
|
-
* Image Filter
|
|
199
|
-
* @type {IFilter[]}
|
|
200
|
-
*/
|
|
201
|
-
filters?: IFilter[];
|
|
202
|
-
_element?: any;
|
|
203
|
-
};
|
|
204
|
-
export interface FabricElement extends FabricObject<fabric.Rect> {
|
|
205
|
-
/**
|
|
206
|
-
* Wrapped Element
|
|
207
|
-
* @type {HTMLDivElement}
|
|
208
|
-
*/
|
|
209
|
-
container: HTMLDivElement;
|
|
210
|
-
/**
|
|
211
|
-
* Target Element
|
|
212
|
-
* @type {HTMLDivElement}
|
|
213
|
-
*/
|
|
214
|
-
element: HTMLDivElement;
|
|
215
|
-
/**
|
|
216
|
-
* Source of Element Object
|
|
217
|
-
*/
|
|
218
|
-
setSource: (source: any) => void;
|
|
219
|
-
}
|
|
220
|
-
export declare type WorkareaLayout = 'fixed' | 'responsive' | 'fullscreen';
|
|
221
|
-
export interface WorkareaOption {
|
|
222
|
-
/**
|
|
223
|
-
* Image URL
|
|
224
|
-
* @type {string}
|
|
225
|
-
*/
|
|
226
|
-
src?: string;
|
|
227
|
-
/**
|
|
228
|
-
* Image File or Blbo
|
|
229
|
-
* @type {File}
|
|
230
|
-
*/
|
|
231
|
-
file?: File;
|
|
232
|
-
/**
|
|
233
|
-
* Workarea Width
|
|
234
|
-
* @type {number}
|
|
235
|
-
*/
|
|
236
|
-
width?: number;
|
|
237
|
-
/**
|
|
238
|
-
* Workarea Height
|
|
239
|
-
* @type {number}
|
|
240
|
-
*/
|
|
241
|
-
height?: number;
|
|
242
|
-
/**
|
|
243
|
-
* Workarea Background Color
|
|
244
|
-
* @type {string}
|
|
245
|
-
*/
|
|
246
|
-
backgroundColor?: string;
|
|
247
|
-
/**
|
|
248
|
-
* Workarea Layout Type
|
|
249
|
-
* @type {WorkareaLayout}
|
|
250
|
-
*/
|
|
251
|
-
layout?: WorkareaLayout;
|
|
252
|
-
}
|
|
253
|
-
export declare type WorkareaObject = FabricImage & {
|
|
254
|
-
/**
|
|
255
|
-
* Workarea Layout Type
|
|
256
|
-
* @type {WorkareaLayout}
|
|
257
|
-
*/
|
|
258
|
-
layout?: WorkareaLayout;
|
|
259
|
-
/**
|
|
260
|
-
* Workarea Image Element
|
|
261
|
-
* @type {HTMLImageElement}
|
|
262
|
-
*/
|
|
263
|
-
_element?: HTMLImageElement;
|
|
264
|
-
/**
|
|
265
|
-
* Whether exist the element
|
|
266
|
-
* @type {boolean}
|
|
267
|
-
*/
|
|
268
|
-
isElement?: boolean;
|
|
269
|
-
/**
|
|
270
|
-
* Stored width in workarea
|
|
271
|
-
* @type {number}
|
|
272
|
-
*/
|
|
273
|
-
workareaWidth?: number;
|
|
274
|
-
/**
|
|
275
|
-
* Stored height in workarea
|
|
276
|
-
* @type {number}
|
|
277
|
-
*/
|
|
278
|
-
workareaHeight?: number;
|
|
279
|
-
};
|
|
280
|
-
export interface CanvasOption extends fabric.ICanvasOptions {
|
|
281
|
-
/**
|
|
282
|
-
* Unique id of Canvas
|
|
283
|
-
* @type {string}
|
|
284
|
-
*/
|
|
285
|
-
id?: string;
|
|
286
|
-
}
|
|
287
|
-
export interface GridOption {
|
|
288
|
-
/**
|
|
289
|
-
* Whether should be enabled
|
|
290
|
-
* @type {boolean}
|
|
291
|
-
*/
|
|
292
|
-
enabled?: boolean;
|
|
293
|
-
/**
|
|
294
|
-
* Grid interval
|
|
295
|
-
* @type {number}
|
|
296
|
-
*/
|
|
297
|
-
grid?: number;
|
|
298
|
-
/**
|
|
299
|
-
* When had moved object, whether should adjust position on grid interval
|
|
300
|
-
* @type {boolean}
|
|
301
|
-
*/
|
|
302
|
-
snapToGrid?: boolean;
|
|
303
|
-
/**
|
|
304
|
-
* Grid line color
|
|
305
|
-
*
|
|
306
|
-
* @type {string}
|
|
307
|
-
*/
|
|
308
|
-
lineColor?: string;
|
|
309
|
-
/**
|
|
310
|
-
* Grid border color
|
|
311
|
-
*
|
|
312
|
-
* @type {string}
|
|
313
|
-
*/
|
|
314
|
-
borderColor?: string;
|
|
315
|
-
}
|
|
316
|
-
export interface GuidelineOption {
|
|
317
|
-
/**
|
|
318
|
-
* When have moved object, whether should show guideline
|
|
319
|
-
* @type {boolean}
|
|
320
|
-
*/
|
|
321
|
-
enabled?: boolean;
|
|
322
|
-
}
|
|
323
|
-
export interface KeyEvent {
|
|
324
|
-
/**
|
|
325
|
-
* Arrow key
|
|
326
|
-
* @type {boolean}
|
|
327
|
-
*/
|
|
328
|
-
move?: boolean;
|
|
329
|
-
/**
|
|
330
|
-
* Ctrl + A
|
|
331
|
-
* @type {boolean}
|
|
332
|
-
*/
|
|
333
|
-
all?: boolean;
|
|
334
|
-
/**
|
|
335
|
-
* Ctrl + C
|
|
336
|
-
* @type {boolean}
|
|
337
|
-
*/
|
|
338
|
-
copy?: boolean;
|
|
339
|
-
/**
|
|
340
|
-
* Ctrl + P
|
|
341
|
-
* @type {boolean}
|
|
342
|
-
*/
|
|
343
|
-
paste?: boolean;
|
|
344
|
-
/**
|
|
345
|
-
* Escape
|
|
346
|
-
* @type {boolean}
|
|
347
|
-
*/
|
|
348
|
-
esc?: boolean;
|
|
349
|
-
/**
|
|
350
|
-
* Delete or Backspace
|
|
351
|
-
* @type {boolean}
|
|
352
|
-
*/
|
|
353
|
-
del?: boolean;
|
|
354
|
-
/**
|
|
355
|
-
* When have copied object, whether should copy object option on clipboard
|
|
356
|
-
* @type {boolean}
|
|
357
|
-
*/
|
|
358
|
-
clipboard?: boolean;
|
|
359
|
-
/**
|
|
360
|
-
* Ctrl + Z, Ctrl + Y
|
|
361
|
-
* @type {boolean}
|
|
362
|
-
*/
|
|
363
|
-
transaction?: boolean;
|
|
364
|
-
/**
|
|
365
|
-
* Plus, Minus
|
|
366
|
-
*
|
|
367
|
-
* @type {boolean}
|
|
368
|
-
*/
|
|
369
|
-
zoom?: boolean;
|
|
370
|
-
/**
|
|
371
|
-
* Ctrl + X
|
|
372
|
-
*
|
|
373
|
-
* @type {boolean}
|
|
374
|
-
*/
|
|
375
|
-
cut?: boolean;
|
|
376
|
-
grab?: boolean;
|
|
377
|
-
}
|
|
378
|
-
export declare type InteractionMode = 'selection' | 'grab' | 'polygon' | 'line' | 'arrow' | 'link' | 'crop';
|
|
379
|
-
export interface FabricEvent<T extends any = Event> extends Omit<fabric.IEvent, 'e'> {
|
|
380
|
-
e: T;
|
|
381
|
-
target?: FabricObject;
|
|
382
|
-
subTargets?: FabricObject[];
|
|
383
|
-
button?: number;
|
|
384
|
-
isClick?: boolean;
|
|
385
|
-
pointer?: fabric.Point;
|
|
386
|
-
absolutePointer?: fabric.Point;
|
|
387
|
-
transform?: {
|
|
388
|
-
corner: string;
|
|
389
|
-
original: FabricObject;
|
|
390
|
-
originX: string;
|
|
391
|
-
originY: string;
|
|
392
|
-
width: number;
|
|
393
|
-
};
|
|
394
|
-
}
|
|
395
|
-
export declare type FabricObjects = {
|
|
396
|
-
[key: string]: {
|
|
397
|
-
create: (...args: any) => FabricObject;
|
|
398
|
-
};
|
|
399
|
-
};
|
|
400
|
-
/**
|
|
401
|
-
* toObject util
|
|
402
|
-
* @param {*} obj
|
|
403
|
-
* @param {string[]} propertiesToInclude
|
|
404
|
-
* @param {{ [key: string]: any }} [properties]
|
|
405
|
-
*/
|
|
406
|
-
export declare const toObject: (obj: any, propertiesToInclude: string[], properties?: {
|
|
407
|
-
[key: string]: any;
|
|
408
|
-
}) => any;
|
|
1
|
+
/// <reference types="animejs" />
|
|
2
|
+
import { fabric } from 'fabric';
|
|
3
|
+
import { IFilter } from '../handlers/ImageHandler';
|
|
4
|
+
export declare type AnimationType = 'fade' | 'bounce' | 'shake' | 'scaling' | 'rotation' | 'flash' | 'custom' | 'none';
|
|
5
|
+
export interface AnimationProperty {
|
|
6
|
+
delay?: number;
|
|
7
|
+
duration?: number;
|
|
8
|
+
autoplay?: boolean;
|
|
9
|
+
loop?: boolean | number;
|
|
10
|
+
type: AnimationType;
|
|
11
|
+
offset?: number;
|
|
12
|
+
opacity?: number;
|
|
13
|
+
bounce?: 'vertical' | 'horizontal';
|
|
14
|
+
shake?: 'vertical' | 'horizontal';
|
|
15
|
+
scale?: number;
|
|
16
|
+
angle?: number;
|
|
17
|
+
fill?: string | fabric.Pattern;
|
|
18
|
+
stroke?: string;
|
|
19
|
+
}
|
|
20
|
+
export interface LinkProperty {
|
|
21
|
+
enabled?: boolean;
|
|
22
|
+
type?: string;
|
|
23
|
+
state?: string;
|
|
24
|
+
[key: string]: any;
|
|
25
|
+
}
|
|
26
|
+
export interface TooltipProperty {
|
|
27
|
+
enabled?: boolean;
|
|
28
|
+
type?: string;
|
|
29
|
+
template?: string;
|
|
30
|
+
}
|
|
31
|
+
export interface TriggerProperty {
|
|
32
|
+
enabled?: boolean;
|
|
33
|
+
type?: string;
|
|
34
|
+
script?: string;
|
|
35
|
+
effect?: string;
|
|
36
|
+
}
|
|
37
|
+
export interface FabricCanvasOption {
|
|
38
|
+
wrapperEl?: HTMLElement;
|
|
39
|
+
}
|
|
40
|
+
export declare type FabricCanvas<T extends any = fabric.Canvas> = T & FabricCanvasOption;
|
|
41
|
+
export declare type FabricObjectOption<T extends any = fabric.IObjectOptions> = T & {
|
|
42
|
+
/**
|
|
43
|
+
* Object id
|
|
44
|
+
* @type {string}
|
|
45
|
+
*/
|
|
46
|
+
id?: string;
|
|
47
|
+
/**
|
|
48
|
+
* Parent object id
|
|
49
|
+
* @type {string}
|
|
50
|
+
*/
|
|
51
|
+
parentId?: string;
|
|
52
|
+
/**
|
|
53
|
+
* Original opacity
|
|
54
|
+
* @type {number}
|
|
55
|
+
*/
|
|
56
|
+
originOpacity?: number;
|
|
57
|
+
/**
|
|
58
|
+
* Original top position
|
|
59
|
+
* @type {number}
|
|
60
|
+
*/
|
|
61
|
+
originTop?: number;
|
|
62
|
+
/**
|
|
63
|
+
* Original left position
|
|
64
|
+
* @type {number}
|
|
65
|
+
*/
|
|
66
|
+
originLeft?: number;
|
|
67
|
+
/**
|
|
68
|
+
* Original scale X
|
|
69
|
+
* @type {number}
|
|
70
|
+
*/
|
|
71
|
+
originScaleX?: number;
|
|
72
|
+
/**
|
|
73
|
+
* Original scale Y
|
|
74
|
+
* @type {number}
|
|
75
|
+
*/
|
|
76
|
+
originScaleY?: number;
|
|
77
|
+
/**
|
|
78
|
+
* Original angle
|
|
79
|
+
* @type {number}
|
|
80
|
+
*/
|
|
81
|
+
originAngle?: number;
|
|
82
|
+
/**
|
|
83
|
+
* Original fill color
|
|
84
|
+
*
|
|
85
|
+
* @type {(string | fabric.Pattern | fabric.Gradient)}
|
|
86
|
+
*/
|
|
87
|
+
originFill?: string | fabric.Pattern | fabric.Gradient;
|
|
88
|
+
/**
|
|
89
|
+
* Original stroke color
|
|
90
|
+
* @type {string}
|
|
91
|
+
*/
|
|
92
|
+
originStroke?: string;
|
|
93
|
+
/**
|
|
94
|
+
* Original rotation
|
|
95
|
+
*
|
|
96
|
+
* @type {number}
|
|
97
|
+
*/
|
|
98
|
+
originRotation?: number;
|
|
99
|
+
/**
|
|
100
|
+
* Object editable
|
|
101
|
+
* @type {boolean}
|
|
102
|
+
*/
|
|
103
|
+
editable?: boolean;
|
|
104
|
+
/**
|
|
105
|
+
* Object Super type
|
|
106
|
+
* @type {string}
|
|
107
|
+
*/
|
|
108
|
+
superType?: string;
|
|
109
|
+
/**
|
|
110
|
+
* @description
|
|
111
|
+
* @type {string}
|
|
112
|
+
*/
|
|
113
|
+
description?: string;
|
|
114
|
+
/**
|
|
115
|
+
* Animation property
|
|
116
|
+
* @type {AnimationProperty}
|
|
117
|
+
*/
|
|
118
|
+
animation?: AnimationProperty;
|
|
119
|
+
/**
|
|
120
|
+
* Anime instance
|
|
121
|
+
* @type {anime.AnimeInstance}
|
|
122
|
+
*/
|
|
123
|
+
anime?: anime.AnimeInstance;
|
|
124
|
+
/**
|
|
125
|
+
* Tooltip property
|
|
126
|
+
* @type {TooltipProperty}
|
|
127
|
+
*/
|
|
128
|
+
tooltip?: TooltipProperty;
|
|
129
|
+
/**
|
|
130
|
+
* Link property
|
|
131
|
+
* @type {LinkProperty}
|
|
132
|
+
*/
|
|
133
|
+
link?: LinkProperty;
|
|
134
|
+
/**
|
|
135
|
+
* Is running animation
|
|
136
|
+
* @type {boolean}
|
|
137
|
+
*/
|
|
138
|
+
animating?: boolean;
|
|
139
|
+
/**
|
|
140
|
+
* Object class
|
|
141
|
+
* @type {string}
|
|
142
|
+
*/
|
|
143
|
+
class?: string;
|
|
144
|
+
/**
|
|
145
|
+
* Is possible delete
|
|
146
|
+
* @type {boolean}
|
|
147
|
+
*/
|
|
148
|
+
deletable?: boolean;
|
|
149
|
+
/**
|
|
150
|
+
* Is enable double click
|
|
151
|
+
* @type {boolean}
|
|
152
|
+
*/
|
|
153
|
+
dblclick?: boolean;
|
|
154
|
+
/**
|
|
155
|
+
* Is possible clone
|
|
156
|
+
* @type {boolean}
|
|
157
|
+
*/
|
|
158
|
+
cloneable?: boolean;
|
|
159
|
+
/**
|
|
160
|
+
* Is locked object
|
|
161
|
+
* @type {boolean}
|
|
162
|
+
*/
|
|
163
|
+
locked?: boolean;
|
|
164
|
+
/**
|
|
165
|
+
* This property replaces "angle"
|
|
166
|
+
*
|
|
167
|
+
* @type {number}
|
|
168
|
+
*/
|
|
169
|
+
rotation?: number;
|
|
170
|
+
/**
|
|
171
|
+
* Whether it can be clicked
|
|
172
|
+
*
|
|
173
|
+
* @type {boolean}
|
|
174
|
+
*/
|
|
175
|
+
clickable?: boolean;
|
|
176
|
+
[key: string]: any;
|
|
177
|
+
};
|
|
178
|
+
export declare type FabricObject<T extends any = fabric.Object> = T & FabricObjectOption;
|
|
179
|
+
export declare type FabricGroup = FabricObject<fabric.Group> & {
|
|
180
|
+
/**
|
|
181
|
+
* Object that config group
|
|
182
|
+
* @type {FabricObject[]}
|
|
183
|
+
*/
|
|
184
|
+
objects?: FabricObject[];
|
|
185
|
+
};
|
|
186
|
+
export declare type FabricImage = FabricObject & fabric.Image & {
|
|
187
|
+
/**
|
|
188
|
+
* Image URL
|
|
189
|
+
* @type {string}
|
|
190
|
+
*/
|
|
191
|
+
src?: string;
|
|
192
|
+
/**
|
|
193
|
+
* Image File or Blob
|
|
194
|
+
* @type {File}
|
|
195
|
+
*/
|
|
196
|
+
file?: File;
|
|
197
|
+
/**
|
|
198
|
+
* Image Filter
|
|
199
|
+
* @type {IFilter[]}
|
|
200
|
+
*/
|
|
201
|
+
filters?: IFilter[];
|
|
202
|
+
_element?: any;
|
|
203
|
+
};
|
|
204
|
+
export interface FabricElement extends FabricObject<fabric.Rect> {
|
|
205
|
+
/**
|
|
206
|
+
* Wrapped Element
|
|
207
|
+
* @type {HTMLDivElement}
|
|
208
|
+
*/
|
|
209
|
+
container: HTMLDivElement;
|
|
210
|
+
/**
|
|
211
|
+
* Target Element
|
|
212
|
+
* @type {HTMLDivElement}
|
|
213
|
+
*/
|
|
214
|
+
element: HTMLDivElement;
|
|
215
|
+
/**
|
|
216
|
+
* Source of Element Object
|
|
217
|
+
*/
|
|
218
|
+
setSource: (source: any) => void;
|
|
219
|
+
}
|
|
220
|
+
export declare type WorkareaLayout = 'fixed' | 'responsive' | 'fullscreen';
|
|
221
|
+
export interface WorkareaOption {
|
|
222
|
+
/**
|
|
223
|
+
* Image URL
|
|
224
|
+
* @type {string}
|
|
225
|
+
*/
|
|
226
|
+
src?: string;
|
|
227
|
+
/**
|
|
228
|
+
* Image File or Blbo
|
|
229
|
+
* @type {File}
|
|
230
|
+
*/
|
|
231
|
+
file?: File;
|
|
232
|
+
/**
|
|
233
|
+
* Workarea Width
|
|
234
|
+
* @type {number}
|
|
235
|
+
*/
|
|
236
|
+
width?: number;
|
|
237
|
+
/**
|
|
238
|
+
* Workarea Height
|
|
239
|
+
* @type {number}
|
|
240
|
+
*/
|
|
241
|
+
height?: number;
|
|
242
|
+
/**
|
|
243
|
+
* Workarea Background Color
|
|
244
|
+
* @type {string}
|
|
245
|
+
*/
|
|
246
|
+
backgroundColor?: string;
|
|
247
|
+
/**
|
|
248
|
+
* Workarea Layout Type
|
|
249
|
+
* @type {WorkareaLayout}
|
|
250
|
+
*/
|
|
251
|
+
layout?: WorkareaLayout;
|
|
252
|
+
}
|
|
253
|
+
export declare type WorkareaObject = FabricImage & {
|
|
254
|
+
/**
|
|
255
|
+
* Workarea Layout Type
|
|
256
|
+
* @type {WorkareaLayout}
|
|
257
|
+
*/
|
|
258
|
+
layout?: WorkareaLayout;
|
|
259
|
+
/**
|
|
260
|
+
* Workarea Image Element
|
|
261
|
+
* @type {HTMLImageElement}
|
|
262
|
+
*/
|
|
263
|
+
_element?: HTMLImageElement;
|
|
264
|
+
/**
|
|
265
|
+
* Whether exist the element
|
|
266
|
+
* @type {boolean}
|
|
267
|
+
*/
|
|
268
|
+
isElement?: boolean;
|
|
269
|
+
/**
|
|
270
|
+
* Stored width in workarea
|
|
271
|
+
* @type {number}
|
|
272
|
+
*/
|
|
273
|
+
workareaWidth?: number;
|
|
274
|
+
/**
|
|
275
|
+
* Stored height in workarea
|
|
276
|
+
* @type {number}
|
|
277
|
+
*/
|
|
278
|
+
workareaHeight?: number;
|
|
279
|
+
};
|
|
280
|
+
export interface CanvasOption extends fabric.ICanvasOptions {
|
|
281
|
+
/**
|
|
282
|
+
* Unique id of Canvas
|
|
283
|
+
* @type {string}
|
|
284
|
+
*/
|
|
285
|
+
id?: string;
|
|
286
|
+
}
|
|
287
|
+
export interface GridOption {
|
|
288
|
+
/**
|
|
289
|
+
* Whether should be enabled
|
|
290
|
+
* @type {boolean}
|
|
291
|
+
*/
|
|
292
|
+
enabled?: boolean;
|
|
293
|
+
/**
|
|
294
|
+
* Grid interval
|
|
295
|
+
* @type {number}
|
|
296
|
+
*/
|
|
297
|
+
grid?: number;
|
|
298
|
+
/**
|
|
299
|
+
* When had moved object, whether should adjust position on grid interval
|
|
300
|
+
* @type {boolean}
|
|
301
|
+
*/
|
|
302
|
+
snapToGrid?: boolean;
|
|
303
|
+
/**
|
|
304
|
+
* Grid line color
|
|
305
|
+
*
|
|
306
|
+
* @type {string}
|
|
307
|
+
*/
|
|
308
|
+
lineColor?: string;
|
|
309
|
+
/**
|
|
310
|
+
* Grid border color
|
|
311
|
+
*
|
|
312
|
+
* @type {string}
|
|
313
|
+
*/
|
|
314
|
+
borderColor?: string;
|
|
315
|
+
}
|
|
316
|
+
export interface GuidelineOption {
|
|
317
|
+
/**
|
|
318
|
+
* When have moved object, whether should show guideline
|
|
319
|
+
* @type {boolean}
|
|
320
|
+
*/
|
|
321
|
+
enabled?: boolean;
|
|
322
|
+
}
|
|
323
|
+
export interface KeyEvent {
|
|
324
|
+
/**
|
|
325
|
+
* Arrow key
|
|
326
|
+
* @type {boolean}
|
|
327
|
+
*/
|
|
328
|
+
move?: boolean;
|
|
329
|
+
/**
|
|
330
|
+
* Ctrl + A
|
|
331
|
+
* @type {boolean}
|
|
332
|
+
*/
|
|
333
|
+
all?: boolean;
|
|
334
|
+
/**
|
|
335
|
+
* Ctrl + C
|
|
336
|
+
* @type {boolean}
|
|
337
|
+
*/
|
|
338
|
+
copy?: boolean;
|
|
339
|
+
/**
|
|
340
|
+
* Ctrl + P
|
|
341
|
+
* @type {boolean}
|
|
342
|
+
*/
|
|
343
|
+
paste?: boolean;
|
|
344
|
+
/**
|
|
345
|
+
* Escape
|
|
346
|
+
* @type {boolean}
|
|
347
|
+
*/
|
|
348
|
+
esc?: boolean;
|
|
349
|
+
/**
|
|
350
|
+
* Delete or Backspace
|
|
351
|
+
* @type {boolean}
|
|
352
|
+
*/
|
|
353
|
+
del?: boolean;
|
|
354
|
+
/**
|
|
355
|
+
* When have copied object, whether should copy object option on clipboard
|
|
356
|
+
* @type {boolean}
|
|
357
|
+
*/
|
|
358
|
+
clipboard?: boolean;
|
|
359
|
+
/**
|
|
360
|
+
* Ctrl + Z, Ctrl + Y
|
|
361
|
+
* @type {boolean}
|
|
362
|
+
*/
|
|
363
|
+
transaction?: boolean;
|
|
364
|
+
/**
|
|
365
|
+
* Plus, Minus
|
|
366
|
+
*
|
|
367
|
+
* @type {boolean}
|
|
368
|
+
*/
|
|
369
|
+
zoom?: boolean;
|
|
370
|
+
/**
|
|
371
|
+
* Ctrl + X
|
|
372
|
+
*
|
|
373
|
+
* @type {boolean}
|
|
374
|
+
*/
|
|
375
|
+
cut?: boolean;
|
|
376
|
+
grab?: boolean;
|
|
377
|
+
}
|
|
378
|
+
export declare type InteractionMode = 'selection' | 'grab' | 'polygon' | 'line' | 'arrow' | 'link' | 'crop';
|
|
379
|
+
export interface FabricEvent<T extends any = Event> extends Omit<fabric.IEvent, 'e'> {
|
|
380
|
+
e: T;
|
|
381
|
+
target?: FabricObject;
|
|
382
|
+
subTargets?: FabricObject[];
|
|
383
|
+
button?: number;
|
|
384
|
+
isClick?: boolean;
|
|
385
|
+
pointer?: fabric.Point;
|
|
386
|
+
absolutePointer?: fabric.Point;
|
|
387
|
+
transform?: {
|
|
388
|
+
corner: string;
|
|
389
|
+
original: FabricObject;
|
|
390
|
+
originX: string;
|
|
391
|
+
originY: string;
|
|
392
|
+
width: number;
|
|
393
|
+
};
|
|
394
|
+
}
|
|
395
|
+
export declare type FabricObjects = {
|
|
396
|
+
[key: string]: {
|
|
397
|
+
create: (...args: any) => FabricObject;
|
|
398
|
+
};
|
|
399
|
+
};
|
|
400
|
+
/**
|
|
401
|
+
* toObject util
|
|
402
|
+
* @param {*} obj
|
|
403
|
+
* @param {string[]} propertiesToInclude
|
|
404
|
+
* @param {{ [key: string]: any }} [properties]
|
|
405
|
+
*/
|
|
406
|
+
export declare const toObject: (obj: any, propertiesToInclude: string[], properties?: {
|
|
407
|
+
[key: string]: any;
|
|
408
|
+
}) => any;
|