react-design-editor 0.0.50 → 0.0.52

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (100) hide show
  1. package/dist/react-design-editor.js +7739 -7114
  2. package/dist/react-design-editor.min.js +1 -1
  3. package/dist/react-design-editor.min.js.LICENSE.txt +2 -0
  4. package/lib/Canvas.d.ts +18 -18
  5. package/lib/Canvas.js +172 -172
  6. package/lib/CanvasObject.d.ts +10 -10
  7. package/lib/CanvasObject.js +96 -96
  8. package/lib/constants/code.d.ts +19 -19
  9. package/lib/constants/code.js +22 -22
  10. package/lib/constants/defaults.d.ts +38 -38
  11. package/lib/constants/defaults.js +69 -69
  12. package/lib/constants/index.d.ts +3 -3
  13. package/lib/constants/index.js +26 -26
  14. package/lib/handlers/AlignmentHandler.d.ts +18 -18
  15. package/lib/handlers/AlignmentHandler.js +58 -58
  16. package/lib/handlers/AnimationHandler.d.ts +50 -50
  17. package/lib/handlers/AnimationHandler.js +346 -346
  18. package/lib/handlers/ChartHandler.d.ts +8 -8
  19. package/lib/handlers/ChartHandler.js +8 -8
  20. package/lib/handlers/ContextmenuHandler.d.ts +28 -28
  21. package/lib/handlers/ContextmenuHandler.js +65 -65
  22. package/lib/handlers/CropHandler.d.ts +43 -43
  23. package/lib/handlers/CropHandler.js +261 -261
  24. package/lib/handlers/CustomHandler.d.ts +7 -7
  25. package/lib/handlers/CustomHandler.js +10 -10
  26. package/lib/handlers/DrawingHandler.d.ts +28 -28
  27. package/lib/handlers/DrawingHandler.js +318 -318
  28. package/lib/handlers/ElementHandler.d.ts +80 -80
  29. package/lib/handlers/ElementHandler.js +154 -154
  30. package/lib/handlers/EventHandler.d.ts +170 -170
  31. package/lib/handlers/EventHandler.js +880 -880
  32. package/lib/handlers/FiberHandler.d.ts +6 -6
  33. package/lib/handlers/FiberHandler.js +23 -23
  34. package/lib/handlers/GridHandler.d.ts +19 -19
  35. package/lib/handlers/GridHandler.js +77 -77
  36. package/lib/handlers/GuidelineHandler.d.ts +61 -61
  37. package/lib/handlers/GuidelineHandler.js +315 -315
  38. package/lib/handlers/Handler.d.ts +618 -618
  39. package/lib/handlers/Handler.js +1645 -1645
  40. package/lib/handlers/ImageHandler.d.ts +307 -307
  41. package/lib/handlers/ImageHandler.js +528 -528
  42. package/lib/handlers/InteractionHandler.d.ts +45 -45
  43. package/lib/handlers/InteractionHandler.js +168 -164
  44. package/lib/handlers/LinkHandler.d.ts +115 -115
  45. package/lib/handlers/LinkHandler.js +247 -247
  46. package/lib/handlers/NodeHandler.d.ts +50 -50
  47. package/lib/handlers/NodeHandler.js +274 -274
  48. package/lib/handlers/PortHandler.d.ts +22 -22
  49. package/lib/handlers/PortHandler.js +179 -179
  50. package/lib/handlers/ShortcutHandler.d.ts +119 -119
  51. package/lib/handlers/ShortcutHandler.js +151 -151
  52. package/lib/handlers/TooltipHandler.d.ts +33 -33
  53. package/lib/handlers/TooltipHandler.js +91 -91
  54. package/lib/handlers/TransactionHandler.d.ts +59 -59
  55. package/lib/handlers/TransactionHandler.js +137 -137
  56. package/lib/handlers/WorkareaHandler.d.ts +43 -43
  57. package/lib/handlers/WorkareaHandler.js +354 -354
  58. package/lib/handlers/ZoomHandler.d.ts +48 -48
  59. package/lib/handlers/ZoomHandler.js +143 -143
  60. package/lib/handlers/index.d.ts +23 -23
  61. package/lib/handlers/index.js +48 -48
  62. package/lib/index.d.ts +6 -6
  63. package/lib/index.js +20 -20
  64. package/lib/objects/Arrow.d.ts +2 -2
  65. package/lib/objects/Arrow.js +40 -40
  66. package/lib/objects/Chart.d.ts +10 -10
  67. package/lib/objects/Chart.js +117 -117
  68. package/lib/objects/CirclePort.d.ts +2 -2
  69. package/lib/objects/CirclePort.js +28 -28
  70. package/lib/objects/Cube.d.ts +5 -5
  71. package/lib/objects/Cube.js +71 -71
  72. package/lib/objects/CurvedLink.d.ts +2 -2
  73. package/lib/objects/CurvedLink.js +51 -51
  74. package/lib/objects/Element.d.ts +13 -13
  75. package/lib/objects/Element.js +77 -77
  76. package/lib/objects/Gif.d.ts +3 -3
  77. package/lib/objects/Gif.js +41 -41
  78. package/lib/objects/Iframe.d.ts +9 -9
  79. package/lib/objects/Iframe.js +63 -63
  80. package/lib/objects/Line.d.ts +2 -2
  81. package/lib/objects/Line.js +24 -24
  82. package/lib/objects/Link.d.ts +15 -15
  83. package/lib/objects/Link.js +107 -107
  84. package/lib/objects/Node.d.ts +59 -59
  85. package/lib/objects/Node.js +271 -271
  86. package/lib/objects/OrthogonalLink.d.ts +2 -2
  87. package/lib/objects/OrthogonalLink.js +54 -54
  88. package/lib/objects/Port.d.ts +12 -12
  89. package/lib/objects/Port.js +28 -28
  90. package/lib/objects/Svg.d.ts +12 -12
  91. package/lib/objects/Svg.js +93 -93
  92. package/lib/objects/Video.d.ts +14 -14
  93. package/lib/objects/Video.js +113 -113
  94. package/lib/objects/index.d.ts +15 -15
  95. package/lib/objects/index.js +32 -32
  96. package/lib/utils/ObjectUtil.d.ts +408 -408
  97. package/lib/utils/ObjectUtil.js +13 -13
  98. package/lib/utils/index.d.ts +1 -1
  99. package/lib/utils/index.js +13 -13
  100. package/package.json +1 -1
@@ -1,618 +1,618 @@
1
- /// <reference types="react" />
2
- import { fabric } from 'fabric';
3
- import { AlignmentHandler, AnimationHandler, ChartHandler, ContextmenuHandler, CropHandler, CustomHandler, DrawingHandler, ElementHandler, EventHandler, GridHandler, GuidelineHandler, ImageHandler, InteractionHandler, LinkHandler, NodeHandler, PortHandler, ShortcutHandler, TooltipHandler, TransactionHandler, WorkareaHandler, ZoomHandler } from '.';
4
- import { CanvasOption, FabricCanvas, FabricGroup, FabricImage, FabricObject, FabricObjectOption, FabricObjects, GridOption, GuidelineOption, InteractionMode, KeyEvent, WorkareaObject, WorkareaOption } from '../utils';
5
- import { TransactionEvent } from './TransactionHandler';
6
- export interface HandlerCallback {
7
- /**
8
- * When has been added object in Canvas, Called function
9
- *
10
- */
11
- onAdd?: (object: FabricObject) => void;
12
- /**
13
- * Return contextmenu element
14
- *
15
- */
16
- onContext?: (el: HTMLDivElement, e: React.MouseEvent, target?: FabricObject) => Promise<any> | any;
17
- /**
18
- * Return tooltip element
19
- *
20
- */
21
- onTooltip?: (el: HTMLDivElement, target?: FabricObject) => Promise<any> | any;
22
- /**
23
- * When zoom, Called function
24
- */
25
- onZoom?: (zoomRatio: number) => void;
26
- /**
27
- * When clicked object, Called function
28
- *
29
- */
30
- onClick?: (canvas: FabricCanvas, target: FabricObject) => void;
31
- /**
32
- * When double clicked object, Called function
33
- *
34
- */
35
- onDblClick?: (canvas: FabricCanvas, target: FabricObject) => void;
36
- /**
37
- * When modified object, Called function
38
- */
39
- onModified?: (target: FabricObject) => void;
40
- /**
41
- * When select object, Called function
42
- *
43
- */
44
- onSelect?: (target: FabricObject) => void;
45
- /**
46
- * When has been removed object in Canvas, Called function
47
- *
48
- */
49
- onRemove?: (target: FabricObject) => void;
50
- /**
51
- * When has been undo or redo, Called function
52
- *
53
- */
54
- onTransaction?: (transaction: TransactionEvent) => void;
55
- /**
56
- * When has been changed interaction mode, Called function
57
- *
58
- */
59
- onInteraction?: (interactionMode: InteractionMode) => void;
60
- /**
61
- * When canvas has been loaded
62
- *
63
- */
64
- onLoad?: (handler: Handler, canvas?: fabric.Canvas) => void;
65
- }
66
- export interface HandlerOption {
67
- /**
68
- * Canvas id
69
- * @type {string}
70
- */
71
- id?: string;
72
- /**
73
- * Canvas object
74
- * @type {FabricCanvas}
75
- */
76
- canvas?: FabricCanvas;
77
- /**
78
- * Canvas parent element
79
- * @type {HTMLDivElement}
80
- */
81
- container?: HTMLDivElement;
82
- /**
83
- * Canvas editable
84
- * @type {boolean}
85
- */
86
- editable?: boolean;
87
- /**
88
- * Canvas interaction mode
89
- * @type {InteractionMode}
90
- */
91
- interactionMode?: InteractionMode;
92
- /**
93
- * Persist properties for object
94
- * @type {string[]}
95
- */
96
- propertiesToInclude?: string[];
97
- /**
98
- * Minimum zoom ratio
99
- * @type {number}
100
- */
101
- minZoom?: number;
102
- /**
103
- * Maximum zoom ratio
104
- * @type {number}
105
- */
106
- maxZoom?: number;
107
- /**
108
- * Workarea option
109
- * @type {WorkareaOption}
110
- */
111
- workareaOption?: WorkareaOption;
112
- /**
113
- * Canvas option
114
- * @type {CanvasOption}
115
- */
116
- canvasOption?: CanvasOption;
117
- /**
118
- * Grid option
119
- * @type {GridOption}
120
- */
121
- gridOption?: GridOption;
122
- /**
123
- * Default option for Fabric Object
124
- * @type {FabricObjectOption}
125
- */
126
- objectOption?: FabricObjectOption;
127
- /**
128
- * Guideline option
129
- * @type {GuidelineOption}
130
- */
131
- guidelineOption?: GuidelineOption;
132
- /**
133
- * Whether to use zoom
134
- * @type {boolean}
135
- */
136
- zoomEnabled?: boolean;
137
- /**
138
- * ActiveSelection option
139
- * @type {Partial<FabricObjectOption<fabric.ActiveSelection>>}
140
- */
141
- activeSelectionOption?: Partial<FabricObjectOption<fabric.ActiveSelection>>;
142
- /**
143
- * Canvas width
144
- * @type {number}
145
- */
146
- width?: number;
147
- /**
148
- * Canvas height
149
- * @type {number}
150
- */
151
- height?: number;
152
- /**
153
- * Keyboard event in Canvas
154
- * @type {KeyEvent}
155
- */
156
- keyEvent?: KeyEvent;
157
- /**
158
- * Append custom objects
159
- * @type {{ [key: string]: any }}
160
- */
161
- fabricObjects?: FabricObjects;
162
- handlers?: {
163
- [key: string]: CustomHandler;
164
- };
165
- [key: string]: any;
166
- }
167
- export declare type HandlerOptions = HandlerOption & HandlerCallback;
168
- /**
169
- * Main handler for Canvas
170
- * @class Handler
171
- * @implements {HandlerOptions}
172
- */
173
- declare class Handler implements HandlerOptions {
174
- id: string;
175
- canvas: FabricCanvas;
176
- workarea: WorkareaObject;
177
- container: HTMLDivElement;
178
- editable: boolean;
179
- interactionMode: InteractionMode;
180
- minZoom: number;
181
- maxZoom: number;
182
- propertiesToInclude?: string[];
183
- workareaOption?: WorkareaOption;
184
- canvasOption?: CanvasOption;
185
- gridOption?: GridOption;
186
- objectOption?: FabricObjectOption;
187
- guidelineOption?: GuidelineOption;
188
- keyEvent?: KeyEvent;
189
- activeSelectionOption?: Partial<FabricObjectOption<fabric.ActiveSelection>>;
190
- fabricObjects?: FabricObjects;
191
- zoomEnabled?: boolean;
192
- width?: number;
193
- height?: number;
194
- onAdd?: (object: FabricObject) => void;
195
- onContext?: (el: HTMLDivElement, e: React.MouseEvent, target?: FabricObject) => Promise<any>;
196
- onTooltip?: (el: HTMLDivElement, target?: FabricObject) => Promise<any>;
197
- onZoom?: (zoomRatio: number) => void;
198
- onClick?: (canvas: FabricCanvas, target: FabricObject) => void;
199
- onDblClick?: (canvas: FabricCanvas, target: FabricObject) => void;
200
- onModified?: (target: FabricObject) => void;
201
- onSelect?: (target: FabricObject) => void;
202
- onRemove?: (target: FabricObject) => void;
203
- onTransaction?: (transaction: TransactionEvent) => void;
204
- onInteraction?: (interactionMode: InteractionMode) => void;
205
- onLoad?: (handler: Handler, canvas?: fabric.Canvas) => void;
206
- imageHandler: ImageHandler;
207
- chartHandler: ChartHandler;
208
- elementHandler: ElementHandler;
209
- cropHandler: CropHandler;
210
- animationHandler: AnimationHandler;
211
- contextmenuHandler: ContextmenuHandler;
212
- tooltipHandler: TooltipHandler;
213
- zoomHandler: ZoomHandler;
214
- workareaHandler: WorkareaHandler;
215
- interactionHandler: InteractionHandler;
216
- transactionHandler: TransactionHandler;
217
- gridHandler: GridHandler;
218
- portHandler: PortHandler;
219
- linkHandler: LinkHandler;
220
- nodeHandler: NodeHandler;
221
- alignmentHandler: AlignmentHandler;
222
- guidelineHandler: GuidelineHandler;
223
- eventHandler: EventHandler;
224
- drawingHandler: DrawingHandler;
225
- shortcutHandler: ShortcutHandler;
226
- handlers: {
227
- [key: string]: CustomHandler;
228
- };
229
- objectMap: Record<string, FabricObject>;
230
- objects: FabricObject[];
231
- activeLine?: any;
232
- activeShape?: any;
233
- zoom: number;
234
- prevTarget?: FabricObject;
235
- target?: FabricObject;
236
- pointArray?: any[];
237
- lineArray?: any[];
238
- isCut: boolean;
239
- private isRequsetAnimFrame;
240
- private requestFrame;
241
- /**
242
- * Copied object
243
- *
244
- * @private
245
- * @type {*}
246
- */
247
- private clipboard;
248
- constructor(options: HandlerOptions);
249
- /**
250
- * Initialize handler
251
- *
252
- * @author salgum1114
253
- * @param {HandlerOptions} options
254
- */
255
- initialize(options: HandlerOptions): void;
256
- /**
257
- * Init class fields
258
- * @param {HandlerOptions} options
259
- */
260
- initOption: (options: HandlerOptions) => void;
261
- /**
262
- * Initialize callback
263
- * @param {HandlerOptions} options
264
- */
265
- initCallback: (options: HandlerOptions) => void;
266
- /**
267
- * Initialize handlers
268
- *
269
- */
270
- initHandler: () => void;
271
- /**
272
- * Get primary object
273
- * @returns {FabricObject[]}
274
- */
275
- getObjects: () => FabricObject[];
276
- /**
277
- * Set key pair
278
- * @param {keyof FabricObject} key
279
- * @param {*} value
280
- * @returns
281
- */
282
- set: (key: keyof FabricObject, value: any) => void;
283
- /**
284
- * Set option
285
- * @param {Partial<FabricObject>} option
286
- * @returns
287
- */
288
- setObject: (option: Partial<FabricObject>) => void;
289
- /**
290
- * Set key pair by object
291
- * @param {FabricObject} obj
292
- * @param {string} key
293
- * @param {*} value
294
- * @returns
295
- */
296
- setByObject: (obj: any, key: string, value: any) => void;
297
- /**
298
- * Set key pair by id
299
- * @param {string} id
300
- * @param {string} key
301
- * @param {*} value
302
- */
303
- setById: (id: string, key: string, value: any) => void;
304
- /**
305
- * Set partial by object
306
- * @param {FabricObject} obj
307
- * @param {FabricObjectOption} option
308
- * @returns
309
- */
310
- setByPartial: (obj: FabricObject, option: FabricObjectOption) => void;
311
- /**
312
- * Set shadow
313
- * @param {fabric.Shadow} option
314
- * @returns
315
- */
316
- setShadow: (option: fabric.IShadowOptions) => void;
317
- /**
318
- * Set the image
319
- * @param {FabricImage} obj
320
- * @param {(File | string)} [source]
321
- * @returns
322
- */
323
- setImage: (obj: FabricImage, source?: File | string) => Promise<FabricImage>;
324
- /**
325
- * Set image by id
326
- * @param {string} id
327
- * @param {*} source
328
- * @returns
329
- */
330
- setImageById: (id: string, source: any) => Promise<FabricImage>;
331
- /**
332
- * Set visible
333
- * @param {boolean} [visible]
334
- * @returns
335
- */
336
- setVisible: (visible?: boolean) => void;
337
- /**
338
- * Set the position on Object
339
- *
340
- * @param {FabricObject} obj
341
- * @param {boolean} [centered]
342
- */
343
- centerObject: (obj: FabricObject, centered?: boolean) => void;
344
- /**
345
- * Add object
346
- * @param {FabricObjectOption} obj
347
- * @param {boolean} [centered=true]
348
- * @param {boolean} [loaded=false]
349
- * @param {boolean} [group=false]
350
- * @returns
351
- */
352
- add: (obj: FabricObjectOption, centered?: boolean, loaded?: boolean, group?: boolean) => FabricObject<fabric.Object>;
353
- /**
354
- * Add group object
355
- *
356
- * @param {FabricGroup} obj
357
- * @param {boolean} [centered=true]
358
- * @param {boolean} [loaded=false]
359
- * @returns
360
- */
361
- addGroup: (obj: FabricGroup) => FabricGroup;
362
- /**
363
- * Add iamge object
364
- * @param {FabricImage} obj
365
- * @returns
366
- */
367
- addImage: (obj: FabricImage) => FabricImage;
368
- /**
369
- * Remove object
370
- * @param {FabricObject} target
371
- * @returns {any}
372
- */
373
- remove: (target?: FabricObject) => void;
374
- /**
375
- * Remove object by id
376
- * @param {string} id
377
- */
378
- removeById: (id: string) => void;
379
- /**
380
- * Delete at origin object list
381
- * @param {string} id
382
- */
383
- removeOriginById: (id: string) => void;
384
- /**
385
- * Duplicate object
386
- * @returns
387
- */
388
- duplicate: () => void;
389
- /**
390
- * Duplicate object by id
391
- * @param {string} id
392
- * @returns
393
- */
394
- duplicateById: (id: string) => boolean;
395
- /**
396
- * Cut object
397
- *
398
- */
399
- cut: () => void;
400
- /**
401
- * Copy to clipboard
402
- *
403
- * @param {*} value
404
- */
405
- copyToClipboard: (value: any) => void;
406
- /**
407
- * Copy object
408
- *
409
- * @returns
410
- */
411
- copy: () => boolean;
412
- /**
413
- * Paste object
414
- *
415
- * @returns
416
- */
417
- paste: () => boolean;
418
- /**
419
- * Find object by object
420
- * @param {FabricObject} obj
421
- */
422
- find: (obj: FabricObject) => FabricObject<fabric.Object>;
423
- /**
424
- * Find object by id
425
- * @param {string} id
426
- * @returns {(FabricObject | null)}
427
- */
428
- findById: (id: string) => FabricObject | null;
429
- /**
430
- * Find object in origin list
431
- * @param {string} id
432
- * @returns
433
- */
434
- findOriginById: (id: string) => FabricObject<fabric.Object>;
435
- /**
436
- * Return origin object list
437
- * @param {string} id
438
- * @returns
439
- */
440
- findOriginByIdWithIndex: (id: string) => {
441
- object?: undefined;
442
- index?: undefined;
443
- } | {
444
- object: undefined;
445
- index: number;
446
- };
447
- /**
448
- * Select object
449
- * @param {FabricObject} obj
450
- * @param {boolean} [find]
451
- */
452
- select: (obj: FabricObject, find?: boolean) => void;
453
- /**
454
- * Select by id
455
- * @param {string} id
456
- */
457
- selectById: (id: string) => void;
458
- /**
459
- * Select all
460
- * @returns
461
- */
462
- selectAll: () => void;
463
- /**
464
- * Save origin width, height
465
- * @param {FabricObject} obj
466
- * @param {number} width
467
- * @param {number} height
468
- */
469
- originScaleToResize: (obj: FabricObject, width: number, height: number) => void;
470
- /**
471
- * When set the width, height, Adjust the size
472
- * @param {number} width
473
- * @param {number} height
474
- */
475
- scaleToResize: (width: number, height: number) => void;
476
- /**
477
- * Import json
478
- * @param {*} json
479
- * @param {(canvas: FabricCanvas) => void} [callback]
480
- */
481
- importJSON: (json: any, callback?: (canvas: FabricCanvas) => void) => Promise<FabricCanvas<fabric.Canvas>>;
482
- /**
483
- * Export json
484
- */
485
- exportJSON: () => FabricObject<fabric.Object>[];
486
- /**
487
- * Active selection to group
488
- * @returns
489
- */
490
- toGroup: (target?: FabricObject) => FabricObject<fabric.Group>;
491
- /**
492
- * Group to active selection
493
- * @returns
494
- */
495
- toActiveSelection: (target?: FabricObject) => any;
496
- /**
497
- * Bring forward
498
- */
499
- bringForward: () => void;
500
- /**
501
- * Bring to front
502
- */
503
- bringToFront: () => void;
504
- /**
505
- * Send backwards
506
- * @returns
507
- */
508
- sendBackwards: () => void;
509
- /**
510
- * Send to back
511
- */
512
- sendToBack: () => void;
513
- /**
514
- * Clear canvas
515
- * @param {boolean} [includeWorkarea=false]
516
- */
517
- clear: (includeWorkarea?: boolean) => void;
518
- /**
519
- * Start request animation frame
520
- */
521
- startRequestAnimFrame: () => void;
522
- /**
523
- * Stop request animation frame
524
- */
525
- stopRequestAnimFrame: () => void;
526
- /**
527
- * Save target object as image
528
- * @param {FabricObject} targetObject
529
- * @param {string} [option={ name: 'New Image', format: 'png', quality: 1 }]
530
- */
531
- saveImage: (targetObject: FabricObject, option?: {
532
- name: string;
533
- format: string;
534
- quality: number;
535
- }) => void;
536
- /**
537
- * Save canvas as image
538
- * @param {string} [option={ name: 'New Image', format: 'png', quality: 1 }]
539
- */
540
- saveCanvasImage: (option?: {
541
- name: string;
542
- format: string;
543
- quality: number;
544
- }) => void;
545
- /**
546
- * Sets "angle" of an instance with centered rotation
547
- *
548
- * @param {number} angle
549
- */
550
- rotate: (angle: number) => void;
551
- /**
552
- * Destroy canvas
553
- *
554
- */
555
- destroy: () => void;
556
- /**
557
- * Set canvas option
558
- *
559
- * @param {CanvasOption} canvasOption
560
- */
561
- setCanvasOption: (canvasOption: CanvasOption) => void;
562
- /**
563
- * Set keyboard event
564
- *
565
- * @param {KeyEvent} keyEvent
566
- */
567
- setKeyEvent: (keyEvent: KeyEvent) => void;
568
- /**
569
- * Set fabric objects
570
- *
571
- * @param {FabricObjects} fabricObjects
572
- */
573
- setFabricObjects: (fabricObjects: FabricObjects) => void;
574
- /**
575
- * Set workarea option
576
- *
577
- * @param {WorkareaOption} workareaOption
578
- */
579
- setWorkareaOption: (workareaOption: WorkareaOption) => void;
580
- /**
581
- * Set guideline option
582
- *
583
- * @param {GuidelineOption} guidelineOption
584
- */
585
- setGuidelineOption: (guidelineOption: GuidelineOption) => void;
586
- /**
587
- * Set grid option
588
- *
589
- * @param {GridOption} gridOption
590
- */
591
- setGridOption: (gridOption: GridOption) => void;
592
- /**
593
- * Set object option
594
- *
595
- * @param {FabricObjectOption} objectOption
596
- */
597
- setObjectOption: (objectOption: FabricObjectOption) => void;
598
- /**
599
- * Set activeSelection option
600
- *
601
- * @param {Partial<FabricObjectOption<fabric.ActiveSelection>>} activeSelectionOption
602
- */
603
- setActiveSelectionOption: (activeSelectionOption: Partial<FabricObjectOption<fabric.ActiveSelection>>) => void;
604
- /**
605
- * Set propertiesToInclude
606
- *
607
- * @param {string[]} propertiesToInclude
608
- */
609
- setPropertiesToInclude: (propertiesToInclude: string[]) => void;
610
- /**
611
- * Register custom handler
612
- *
613
- * @param {string} name
614
- * @param {typeof CustomHandler} handler
615
- */
616
- registerHandler: (name: string, handler: typeof CustomHandler) => CustomHandler;
617
- }
618
- export default Handler;
1
+ /// <reference types="react" />
2
+ import { fabric } from 'fabric';
3
+ import { AlignmentHandler, AnimationHandler, ChartHandler, ContextmenuHandler, CropHandler, CustomHandler, DrawingHandler, ElementHandler, EventHandler, GridHandler, GuidelineHandler, ImageHandler, InteractionHandler, LinkHandler, NodeHandler, PortHandler, ShortcutHandler, TooltipHandler, TransactionHandler, WorkareaHandler, ZoomHandler } from '.';
4
+ import { CanvasOption, FabricCanvas, FabricGroup, FabricImage, FabricObject, FabricObjectOption, FabricObjects, GridOption, GuidelineOption, InteractionMode, KeyEvent, WorkareaObject, WorkareaOption } from '../utils';
5
+ import { TransactionEvent } from './TransactionHandler';
6
+ export interface HandlerCallback {
7
+ /**
8
+ * When has been added object in Canvas, Called function
9
+ *
10
+ */
11
+ onAdd?: (object: FabricObject) => void;
12
+ /**
13
+ * Return contextmenu element
14
+ *
15
+ */
16
+ onContext?: (el: HTMLDivElement, e: React.MouseEvent, target?: FabricObject) => Promise<any> | any;
17
+ /**
18
+ * Return tooltip element
19
+ *
20
+ */
21
+ onTooltip?: (el: HTMLDivElement, target?: FabricObject) => Promise<any> | any;
22
+ /**
23
+ * When zoom, Called function
24
+ */
25
+ onZoom?: (zoomRatio: number) => void;
26
+ /**
27
+ * When clicked object, Called function
28
+ *
29
+ */
30
+ onClick?: (canvas: FabricCanvas, target: FabricObject) => void;
31
+ /**
32
+ * When double clicked object, Called function
33
+ *
34
+ */
35
+ onDblClick?: (canvas: FabricCanvas, target: FabricObject) => void;
36
+ /**
37
+ * When modified object, Called function
38
+ */
39
+ onModified?: (target: FabricObject) => void;
40
+ /**
41
+ * When select object, Called function
42
+ *
43
+ */
44
+ onSelect?: (target: FabricObject) => void;
45
+ /**
46
+ * When has been removed object in Canvas, Called function
47
+ *
48
+ */
49
+ onRemove?: (target: FabricObject) => void;
50
+ /**
51
+ * When has been undo or redo, Called function
52
+ *
53
+ */
54
+ onTransaction?: (transaction: TransactionEvent) => void;
55
+ /**
56
+ * When has been changed interaction mode, Called function
57
+ *
58
+ */
59
+ onInteraction?: (interactionMode: InteractionMode) => void;
60
+ /**
61
+ * When canvas has been loaded
62
+ *
63
+ */
64
+ onLoad?: (handler: Handler, canvas?: fabric.Canvas) => void;
65
+ }
66
+ export interface HandlerOption {
67
+ /**
68
+ * Canvas id
69
+ * @type {string}
70
+ */
71
+ id?: string;
72
+ /**
73
+ * Canvas object
74
+ * @type {FabricCanvas}
75
+ */
76
+ canvas?: FabricCanvas;
77
+ /**
78
+ * Canvas parent element
79
+ * @type {HTMLDivElement}
80
+ */
81
+ container?: HTMLDivElement;
82
+ /**
83
+ * Canvas editable
84
+ * @type {boolean}
85
+ */
86
+ editable?: boolean;
87
+ /**
88
+ * Canvas interaction mode
89
+ * @type {InteractionMode}
90
+ */
91
+ interactionMode?: InteractionMode;
92
+ /**
93
+ * Persist properties for object
94
+ * @type {string[]}
95
+ */
96
+ propertiesToInclude?: string[];
97
+ /**
98
+ * Minimum zoom ratio
99
+ * @type {number}
100
+ */
101
+ minZoom?: number;
102
+ /**
103
+ * Maximum zoom ratio
104
+ * @type {number}
105
+ */
106
+ maxZoom?: number;
107
+ /**
108
+ * Workarea option
109
+ * @type {WorkareaOption}
110
+ */
111
+ workareaOption?: WorkareaOption;
112
+ /**
113
+ * Canvas option
114
+ * @type {CanvasOption}
115
+ */
116
+ canvasOption?: CanvasOption;
117
+ /**
118
+ * Grid option
119
+ * @type {GridOption}
120
+ */
121
+ gridOption?: GridOption;
122
+ /**
123
+ * Default option for Fabric Object
124
+ * @type {FabricObjectOption}
125
+ */
126
+ objectOption?: FabricObjectOption;
127
+ /**
128
+ * Guideline option
129
+ * @type {GuidelineOption}
130
+ */
131
+ guidelineOption?: GuidelineOption;
132
+ /**
133
+ * Whether to use zoom
134
+ * @type {boolean}
135
+ */
136
+ zoomEnabled?: boolean;
137
+ /**
138
+ * ActiveSelection option
139
+ * @type {Partial<FabricObjectOption<fabric.ActiveSelection>>}
140
+ */
141
+ activeSelectionOption?: Partial<FabricObjectOption<fabric.ActiveSelection>>;
142
+ /**
143
+ * Canvas width
144
+ * @type {number}
145
+ */
146
+ width?: number;
147
+ /**
148
+ * Canvas height
149
+ * @type {number}
150
+ */
151
+ height?: number;
152
+ /**
153
+ * Keyboard event in Canvas
154
+ * @type {KeyEvent}
155
+ */
156
+ keyEvent?: KeyEvent;
157
+ /**
158
+ * Append custom objects
159
+ * @type {{ [key: string]: any }}
160
+ */
161
+ fabricObjects?: FabricObjects;
162
+ handlers?: {
163
+ [key: string]: CustomHandler;
164
+ };
165
+ [key: string]: any;
166
+ }
167
+ export declare type HandlerOptions = HandlerOption & HandlerCallback;
168
+ /**
169
+ * Main handler for Canvas
170
+ * @class Handler
171
+ * @implements {HandlerOptions}
172
+ */
173
+ declare class Handler implements HandlerOptions {
174
+ id: string;
175
+ canvas: FabricCanvas;
176
+ workarea: WorkareaObject;
177
+ container: HTMLDivElement;
178
+ editable: boolean;
179
+ interactionMode: InteractionMode;
180
+ minZoom: number;
181
+ maxZoom: number;
182
+ propertiesToInclude?: string[];
183
+ workareaOption?: WorkareaOption;
184
+ canvasOption?: CanvasOption;
185
+ gridOption?: GridOption;
186
+ objectOption?: FabricObjectOption;
187
+ guidelineOption?: GuidelineOption;
188
+ keyEvent?: KeyEvent;
189
+ activeSelectionOption?: Partial<FabricObjectOption<fabric.ActiveSelection>>;
190
+ fabricObjects?: FabricObjects;
191
+ zoomEnabled?: boolean;
192
+ width?: number;
193
+ height?: number;
194
+ onAdd?: (object: FabricObject) => void;
195
+ onContext?: (el: HTMLDivElement, e: React.MouseEvent, target?: FabricObject) => Promise<any>;
196
+ onTooltip?: (el: HTMLDivElement, target?: FabricObject) => Promise<any>;
197
+ onZoom?: (zoomRatio: number) => void;
198
+ onClick?: (canvas: FabricCanvas, target: FabricObject) => void;
199
+ onDblClick?: (canvas: FabricCanvas, target: FabricObject) => void;
200
+ onModified?: (target: FabricObject) => void;
201
+ onSelect?: (target: FabricObject) => void;
202
+ onRemove?: (target: FabricObject) => void;
203
+ onTransaction?: (transaction: TransactionEvent) => void;
204
+ onInteraction?: (interactionMode: InteractionMode) => void;
205
+ onLoad?: (handler: Handler, canvas?: fabric.Canvas) => void;
206
+ imageHandler: ImageHandler;
207
+ chartHandler: ChartHandler;
208
+ elementHandler: ElementHandler;
209
+ cropHandler: CropHandler;
210
+ animationHandler: AnimationHandler;
211
+ contextmenuHandler: ContextmenuHandler;
212
+ tooltipHandler: TooltipHandler;
213
+ zoomHandler: ZoomHandler;
214
+ workareaHandler: WorkareaHandler;
215
+ interactionHandler: InteractionHandler;
216
+ transactionHandler: TransactionHandler;
217
+ gridHandler: GridHandler;
218
+ portHandler: PortHandler;
219
+ linkHandler: LinkHandler;
220
+ nodeHandler: NodeHandler;
221
+ alignmentHandler: AlignmentHandler;
222
+ guidelineHandler: GuidelineHandler;
223
+ eventHandler: EventHandler;
224
+ drawingHandler: DrawingHandler;
225
+ shortcutHandler: ShortcutHandler;
226
+ handlers: {
227
+ [key: string]: CustomHandler;
228
+ };
229
+ objectMap: Record<string, FabricObject>;
230
+ objects: FabricObject[];
231
+ activeLine?: any;
232
+ activeShape?: any;
233
+ zoom: number;
234
+ prevTarget?: FabricObject;
235
+ target?: FabricObject;
236
+ pointArray?: any[];
237
+ lineArray?: any[];
238
+ isCut: boolean;
239
+ private isRequsetAnimFrame;
240
+ private requestFrame;
241
+ /**
242
+ * Copied object
243
+ *
244
+ * @private
245
+ * @type {*}
246
+ */
247
+ private clipboard;
248
+ constructor(options: HandlerOptions);
249
+ /**
250
+ * Initialize handler
251
+ *
252
+ * @author salgum1114
253
+ * @param {HandlerOptions} options
254
+ */
255
+ initialize(options: HandlerOptions): void;
256
+ /**
257
+ * Init class fields
258
+ * @param {HandlerOptions} options
259
+ */
260
+ initOption: (options: HandlerOptions) => void;
261
+ /**
262
+ * Initialize callback
263
+ * @param {HandlerOptions} options
264
+ */
265
+ initCallback: (options: HandlerOptions) => void;
266
+ /**
267
+ * Initialize handlers
268
+ *
269
+ */
270
+ initHandler: () => void;
271
+ /**
272
+ * Get primary object
273
+ * @returns {FabricObject[]}
274
+ */
275
+ getObjects: () => FabricObject[];
276
+ /**
277
+ * Set key pair
278
+ * @param {keyof FabricObject} key
279
+ * @param {*} value
280
+ * @returns
281
+ */
282
+ set: (key: keyof FabricObject, value: any) => void;
283
+ /**
284
+ * Set option
285
+ * @param {Partial<FabricObject>} option
286
+ * @returns
287
+ */
288
+ setObject: (option: Partial<FabricObject>) => void;
289
+ /**
290
+ * Set key pair by object
291
+ * @param {FabricObject} obj
292
+ * @param {string} key
293
+ * @param {*} value
294
+ * @returns
295
+ */
296
+ setByObject: (obj: any, key: string, value: any) => void;
297
+ /**
298
+ * Set key pair by id
299
+ * @param {string} id
300
+ * @param {string} key
301
+ * @param {*} value
302
+ */
303
+ setById: (id: string, key: string, value: any) => void;
304
+ /**
305
+ * Set partial by object
306
+ * @param {FabricObject} obj
307
+ * @param {FabricObjectOption} option
308
+ * @returns
309
+ */
310
+ setByPartial: (obj: FabricObject, option: FabricObjectOption) => void;
311
+ /**
312
+ * Set shadow
313
+ * @param {fabric.Shadow} option
314
+ * @returns
315
+ */
316
+ setShadow: (option: fabric.IShadowOptions) => void;
317
+ /**
318
+ * Set the image
319
+ * @param {FabricImage} obj
320
+ * @param {(File | string)} [source]
321
+ * @returns
322
+ */
323
+ setImage: (obj: FabricImage, source?: File | string) => Promise<FabricImage>;
324
+ /**
325
+ * Set image by id
326
+ * @param {string} id
327
+ * @param {*} source
328
+ * @returns
329
+ */
330
+ setImageById: (id: string, source: any) => Promise<FabricImage>;
331
+ /**
332
+ * Set visible
333
+ * @param {boolean} [visible]
334
+ * @returns
335
+ */
336
+ setVisible: (visible?: boolean) => void;
337
+ /**
338
+ * Set the position on Object
339
+ *
340
+ * @param {FabricObject} obj
341
+ * @param {boolean} [centered]
342
+ */
343
+ centerObject: (obj: FabricObject, centered?: boolean) => void;
344
+ /**
345
+ * Add object
346
+ * @param {FabricObjectOption} obj
347
+ * @param {boolean} [centered=true]
348
+ * @param {boolean} [loaded=false]
349
+ * @param {boolean} [group=false]
350
+ * @returns
351
+ */
352
+ add: (obj: FabricObjectOption, centered?: boolean, loaded?: boolean, group?: boolean) => FabricObject<fabric.Object>;
353
+ /**
354
+ * Add group object
355
+ *
356
+ * @param {FabricGroup} obj
357
+ * @param {boolean} [centered=true]
358
+ * @param {boolean} [loaded=false]
359
+ * @returns
360
+ */
361
+ addGroup: (obj: FabricGroup) => FabricGroup;
362
+ /**
363
+ * Add iamge object
364
+ * @param {FabricImage} obj
365
+ * @returns
366
+ */
367
+ addImage: (obj: FabricImage) => FabricImage;
368
+ /**
369
+ * Remove object
370
+ * @param {FabricObject} target
371
+ * @returns {any}
372
+ */
373
+ remove: (target?: FabricObject) => void;
374
+ /**
375
+ * Remove object by id
376
+ * @param {string} id
377
+ */
378
+ removeById: (id: string) => void;
379
+ /**
380
+ * Delete at origin object list
381
+ * @param {string} id
382
+ */
383
+ removeOriginById: (id: string) => void;
384
+ /**
385
+ * Duplicate object
386
+ * @returns
387
+ */
388
+ duplicate: () => void;
389
+ /**
390
+ * Duplicate object by id
391
+ * @param {string} id
392
+ * @returns
393
+ */
394
+ duplicateById: (id: string) => boolean;
395
+ /**
396
+ * Cut object
397
+ *
398
+ */
399
+ cut: () => void;
400
+ /**
401
+ * Copy to clipboard
402
+ *
403
+ * @param {*} value
404
+ */
405
+ copyToClipboard: (value: any) => void;
406
+ /**
407
+ * Copy object
408
+ *
409
+ * @returns
410
+ */
411
+ copy: () => boolean;
412
+ /**
413
+ * Paste object
414
+ *
415
+ * @returns
416
+ */
417
+ paste: () => boolean;
418
+ /**
419
+ * Find object by object
420
+ * @param {FabricObject} obj
421
+ */
422
+ find: (obj: FabricObject) => FabricObject<fabric.Object>;
423
+ /**
424
+ * Find object by id
425
+ * @param {string} id
426
+ * @returns {(FabricObject | null)}
427
+ */
428
+ findById: (id: string) => FabricObject | null;
429
+ /**
430
+ * Find object in origin list
431
+ * @param {string} id
432
+ * @returns
433
+ */
434
+ findOriginById: (id: string) => FabricObject<fabric.Object>;
435
+ /**
436
+ * Return origin object list
437
+ * @param {string} id
438
+ * @returns
439
+ */
440
+ findOriginByIdWithIndex: (id: string) => {
441
+ object?: undefined;
442
+ index?: undefined;
443
+ } | {
444
+ object: undefined;
445
+ index: number;
446
+ };
447
+ /**
448
+ * Select object
449
+ * @param {FabricObject} obj
450
+ * @param {boolean} [find]
451
+ */
452
+ select: (obj: FabricObject, find?: boolean) => void;
453
+ /**
454
+ * Select by id
455
+ * @param {string} id
456
+ */
457
+ selectById: (id: string) => void;
458
+ /**
459
+ * Select all
460
+ * @returns
461
+ */
462
+ selectAll: () => void;
463
+ /**
464
+ * Save origin width, height
465
+ * @param {FabricObject} obj
466
+ * @param {number} width
467
+ * @param {number} height
468
+ */
469
+ originScaleToResize: (obj: FabricObject, width: number, height: number) => void;
470
+ /**
471
+ * When set the width, height, Adjust the size
472
+ * @param {number} width
473
+ * @param {number} height
474
+ */
475
+ scaleToResize: (width: number, height: number) => void;
476
+ /**
477
+ * Import json
478
+ * @param {*} json
479
+ * @param {(canvas: FabricCanvas) => void} [callback]
480
+ */
481
+ importJSON: (json: any, callback?: (canvas: FabricCanvas) => void) => Promise<FabricCanvas<fabric.Canvas>>;
482
+ /**
483
+ * Export json
484
+ */
485
+ exportJSON: () => FabricObject<fabric.Object>[];
486
+ /**
487
+ * Active selection to group
488
+ * @returns
489
+ */
490
+ toGroup: (target?: FabricObject) => FabricObject<fabric.Group>;
491
+ /**
492
+ * Group to active selection
493
+ * @returns
494
+ */
495
+ toActiveSelection: (target?: FabricObject) => any;
496
+ /**
497
+ * Bring forward
498
+ */
499
+ bringForward: () => void;
500
+ /**
501
+ * Bring to front
502
+ */
503
+ bringToFront: () => void;
504
+ /**
505
+ * Send backwards
506
+ * @returns
507
+ */
508
+ sendBackwards: () => void;
509
+ /**
510
+ * Send to back
511
+ */
512
+ sendToBack: () => void;
513
+ /**
514
+ * Clear canvas
515
+ * @param {boolean} [includeWorkarea=false]
516
+ */
517
+ clear: (includeWorkarea?: boolean) => void;
518
+ /**
519
+ * Start request animation frame
520
+ */
521
+ startRequestAnimFrame: () => void;
522
+ /**
523
+ * Stop request animation frame
524
+ */
525
+ stopRequestAnimFrame: () => void;
526
+ /**
527
+ * Save target object as image
528
+ * @param {FabricObject} targetObject
529
+ * @param {string} [option={ name: 'New Image', format: 'png', quality: 1 }]
530
+ */
531
+ saveImage: (targetObject: FabricObject, option?: {
532
+ name: string;
533
+ format: string;
534
+ quality: number;
535
+ }) => void;
536
+ /**
537
+ * Save canvas as image
538
+ * @param {string} [option={ name: 'New Image', format: 'png', quality: 1 }]
539
+ */
540
+ saveCanvasImage: (option?: {
541
+ name: string;
542
+ format: string;
543
+ quality: number;
544
+ }) => void;
545
+ /**
546
+ * Sets "angle" of an instance with centered rotation
547
+ *
548
+ * @param {number} angle
549
+ */
550
+ rotate: (angle: number) => void;
551
+ /**
552
+ * Destroy canvas
553
+ *
554
+ */
555
+ destroy: () => void;
556
+ /**
557
+ * Set canvas option
558
+ *
559
+ * @param {CanvasOption} canvasOption
560
+ */
561
+ setCanvasOption: (canvasOption: CanvasOption) => void;
562
+ /**
563
+ * Set keyboard event
564
+ *
565
+ * @param {KeyEvent} keyEvent
566
+ */
567
+ setKeyEvent: (keyEvent: KeyEvent) => void;
568
+ /**
569
+ * Set fabric objects
570
+ *
571
+ * @param {FabricObjects} fabricObjects
572
+ */
573
+ setFabricObjects: (fabricObjects: FabricObjects) => void;
574
+ /**
575
+ * Set workarea option
576
+ *
577
+ * @param {WorkareaOption} workareaOption
578
+ */
579
+ setWorkareaOption: (workareaOption: WorkareaOption) => void;
580
+ /**
581
+ * Set guideline option
582
+ *
583
+ * @param {GuidelineOption} guidelineOption
584
+ */
585
+ setGuidelineOption: (guidelineOption: GuidelineOption) => void;
586
+ /**
587
+ * Set grid option
588
+ *
589
+ * @param {GridOption} gridOption
590
+ */
591
+ setGridOption: (gridOption: GridOption) => void;
592
+ /**
593
+ * Set object option
594
+ *
595
+ * @param {FabricObjectOption} objectOption
596
+ */
597
+ setObjectOption: (objectOption: FabricObjectOption) => void;
598
+ /**
599
+ * Set activeSelection option
600
+ *
601
+ * @param {Partial<FabricObjectOption<fabric.ActiveSelection>>} activeSelectionOption
602
+ */
603
+ setActiveSelectionOption: (activeSelectionOption: Partial<FabricObjectOption<fabric.ActiveSelection>>) => void;
604
+ /**
605
+ * Set propertiesToInclude
606
+ *
607
+ * @param {string[]} propertiesToInclude
608
+ */
609
+ setPropertiesToInclude: (propertiesToInclude: string[]) => void;
610
+ /**
611
+ * Register custom handler
612
+ *
613
+ * @param {string} name
614
+ * @param {typeof CustomHandler} handler
615
+ */
616
+ registerHandler: (name: string, handler: typeof CustomHandler) => CustomHandler;
617
+ }
618
+ export default Handler;