@yorab/react-paint 0.16.1 → 0.16.3

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 (12) hide show
  1. package/dist/canvas/hooks/useReactPaint.d.ts +124 -2027
  2. package/dist/canvas/hooks/useShapes.d.ts +6 -1428
  3. package/dist/canvas/utils/file.d.ts +47 -26
  4. package/dist/canvas/utils/intersect.d.ts +1 -1
  5. package/dist/canvas/utils/selection.d.ts +1 -1
  6. package/dist/canvas/utils/shapes/path.d.ts +3 -3
  7. package/dist/canvas/utils/shapes/rectangle.d.ts +1 -1
  8. package/dist/common/types/Mode.d.ts +3 -0
  9. package/dist/common/types/Shapes.d.ts +32 -50
  10. package/dist/react-paint.js +857 -847
  11. package/dist/react-paint.umd.cjs +1 -1
  12. package/package.json +31 -14
package/dist/canvas/hooks/useReactPaint.d.ts CHANGED
@@ -1,8 +1,9 @@
1
1
  import { type OptionalOptions, type UtilsSettings } from './../../canvas/constants/app';
2
2
  import type { CanvasSize } from './../../common/types/Canvas';
3
3
  import type { SelectionModeData } from './../../common/types/Mode';
4
- import type { ExportedDrawableShape, Point, ShapeEntity, StateData } from './../../common/types/Shapes';
5
- import type { ToolsType } from './../../common/types/tools';
4
+ import type { ExportedDrawableShape, Point, SelectionType, ShapeEntity, StateData } from './../../common/types/Shapes';
5
+ import type { CustomTool, ToolsType } from './../../common/types/tools';
6
+ import { type CSSProperties } from 'react';
6
7
  type UseReactPaintProps = {
7
8
  width?: number | undefined;
8
9
  height?: number | undefined;
@@ -11,2036 +12,132 @@ type UseReactPaintProps = {
11
12
  disabled?: boolean | undefined;
12
13
  options?: OptionalOptions | undefined;
13
14
  };
14
- declare const useReactPaint: ({ width, height, shapes: defaultShapes, mode, disabled, options }?: UseReactPaintProps) => {
15
- annotationsProps: {
16
- style: {
17
- userSelect: "none";
18
- touchAction: string;
19
- transformOrigin: string;
20
- transform: string;
21
- '--react-paint-canvas-zoom': number;
22
- '--react-paint-canvas-offset-x': number;
23
- '--react-paint-canvas-offset-y': number;
24
- '--react-paint-app-canvaswidth': number;
25
- '--react-paint-app-canvasheight': number;
26
- };
15
+ type EditorProps = {
16
+ shapesRef: React.RefObject<ShapeEntity[]>;
17
+ addPictureShape: (fileOrUrl: File | string, maxWidth?: number, maxHeight?: number) => Promise<ShapeEntity>;
18
+ moveShapes: (startPositionShapeId: string, endPositionShapeId: string) => void;
19
+ toggleShapeVisibility: (shapes: ShapeEntity[]) => void;
20
+ toggleShapeLock: (shapeGroup: ShapeEntity[]) => void;
21
+ canGoBackward: boolean;
22
+ canGoForward: boolean;
23
+ canClear: boolean;
24
+ selectedShape: SelectionType | undefined;
25
+ saveShapes: () => void;
26
+ removeShape: (shapes: ShapeEntity[]) => void;
27
+ updateShape: (updatedShapes: ShapeEntity[], withSave?: boolean) => void;
28
+ backwardShape: () => void;
29
+ forwardShape: () => void;
30
+ refs: {
31
+ canvas: React.RefObject<HTMLCanvasElement | null>;
32
+ editor: React.RefObject<HTMLElement | null>;
33
+ setEditor: (node: HTMLElement | null) => void;
34
+ };
35
+ width: number;
36
+ height: number;
37
+ selectTool: (tool: ToolsType) => void;
38
+ selectShapes: (shapes: ShapeEntity[]) => void;
39
+ activeTool: ToolsType;
40
+ setActiveTool: React.Dispatch<React.SetStateAction<ToolsType>>;
41
+ setAvailableTools: React.Dispatch<React.SetStateAction<CustomTool[]>>;
42
+ isEditMode: boolean;
43
+ availableTools: CustomTool[];
44
+ gridGap: number;
45
+ setGridGap: React.Dispatch<React.SetStateAction<number>>;
46
+ loadFile: (file: File) => Promise<void>;
47
+ exportPicture: (view: 'fitToShapes' | 'defaultView' | 'currentZoom') => void;
48
+ exportData: () => void;
49
+ clearCanvas: () => void;
50
+ settings: UtilsSettings;
51
+ setCanvasZoom: (action: 'unzoom' | 'zoom' | 'default') => void;
52
+ resetZoom: () => void;
53
+ canvas: {
54
+ canGrow: boolean;
55
+ canShrink: boolean;
56
+ layersManipulation: boolean;
57
+ withExport: boolean;
58
+ withLoadAndSave: boolean;
59
+ withUploadPicture: boolean;
60
+ withUrlPicture: boolean;
61
+ };
62
+ };
63
+ type CanvasProps = {
64
+ shapesRef: React.RefObject<ShapeEntity[]>;
65
+ selectedShape: SelectionType | undefined;
66
+ selectionFrame: {
67
+ oldSelection: SelectionType | undefined;
68
+ frame: [Point, Point];
69
+ } | undefined;
70
+ hoveredShape: ShapeEntity | undefined;
71
+ addShape: (newShapes: ShapeEntity[]) => void;
72
+ setSelectedShape: React.Dispatch<React.SetStateAction<SelectionType | undefined>>;
73
+ setSelectionFrame: React.Dispatch<React.SetStateAction<{
74
+ oldSelection: SelectionType | undefined;
75
+ frame: [Point, Point];
76
+ } | undefined>>;
77
+ refreshSelectedShapes: (ctx: CanvasRenderingContext2D, cursorPosition: Point) => void;
78
+ refreshHoveredShape: (e: MouseEvent | TouchEvent, ctx: CanvasRenderingContext2D, cursorPosition: Point, isInsideMask: boolean) => void;
79
+ removeShape: (shapes: ShapeEntity[]) => void;
80
+ updateShape: (updatedShapes: ShapeEntity[], withSave?: boolean) => void;
81
+ duplicateShapes: (shapesToDuplicate: ShapeEntity[]) => void;
82
+ backwardShape: () => void;
83
+ forwardShape: () => void;
84
+ saveShapes: () => void;
85
+ refs: {
86
+ canvas: React.RefObject<HTMLCanvasElement | null>;
87
+ editor: React.RefObject<HTMLElement | null>;
88
+ setEditor: (node: HTMLElement | null) => void;
27
89
  };
28
- editorProps: {
29
- shapesRef: import("react").RefObject<(({
30
- id: string;
31
- computed: {
32
- borders: import("./../../common/types/Shapes").Rect;
33
- outerBorders: import("./../../common/types/Shapes").Rect;
34
- center: Point;
35
- boundingBox: import("./../../common/types/Shapes").Rect;
36
- };
37
- path?: Path2D | undefined;
38
- } & {
39
- rotation?: number;
40
- toolId?: string;
41
- visible?: boolean;
42
- locked?: boolean;
43
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
44
- } & import("./../../common/types/Shapes").Line & {
45
- type: "line";
46
- } & {
47
- selection?: import("./../../common/types/Shapes").SelectionLinesType | undefined;
48
- arrows?: import("./../../common/types/Shapes").TriangleEntity[];
49
- type: "line";
50
- }) | ({
51
- id: string;
52
- computed: {
53
- borders: import("./../../common/types/Shapes").Rect;
54
- outerBorders: import("./../../common/types/Shapes").Rect;
55
- center: Point;
56
- boundingBox: import("./../../common/types/Shapes").Rect;
57
- };
58
- path?: Path2D | undefined;
59
- } & {
60
- rotation?: number;
61
- toolId?: string;
62
- visible?: boolean;
63
- locked?: boolean;
64
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
65
- } & import("./../../common/types/Shapes").Rect & {
66
- src: string;
67
- } & {
68
- img: HTMLImageElement;
69
- flipX?: boolean;
70
- flipY?: boolean;
71
- ratio?: number;
72
- type: "picture";
73
- } & {
74
- img: HTMLImageElement;
75
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
76
- type: "picture";
77
- }) | ({
78
- id: string;
79
- computed: {
80
- borders: import("./../../common/types/Shapes").Rect;
81
- outerBorders: import("./../../common/types/Shapes").Rect;
82
- center: Point;
83
- boundingBox: import("./../../common/types/Shapes").Rect;
84
- };
85
- path?: Path2D | undefined;
86
- } & {
87
- rotation?: number;
88
- toolId?: string;
89
- visible?: boolean;
90
- locked?: boolean;
91
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
92
- } & import("./../../common/types/Shapes").Rect & {
93
- value: string[];
94
- fontSize: number;
95
- } & {
96
- flipX?: boolean;
97
- flipY?: boolean;
98
- ratio?: number;
99
- type: "text";
100
- } & {
101
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
102
- type: "text";
103
- }) | ({
104
- id: string;
105
- computed: {
106
- borders: import("./../../common/types/Shapes").Rect;
107
- outerBorders: import("./../../common/types/Shapes").Rect;
108
- center: Point;
109
- boundingBox: import("./../../common/types/Shapes").Rect;
110
- };
111
- path?: Path2D | undefined;
112
- } & {
113
- rotation?: number;
114
- toolId?: string;
115
- visible?: boolean;
116
- locked?: boolean;
117
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
118
- } & import("./../../common/types/Shapes").Rect & {
119
- type: "rect";
120
- } & {
121
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
122
- type: "rect";
123
- }) | ({
124
- id: string;
125
- computed: {
126
- borders: import("./../../common/types/Shapes").Rect;
127
- outerBorders: import("./../../common/types/Shapes").Rect;
128
- center: Point;
129
- boundingBox: import("./../../common/types/Shapes").Rect;
130
- };
131
- path?: Path2D | undefined;
132
- } & {
133
- rotation?: number;
134
- toolId?: string;
135
- visible?: boolean;
136
- locked?: boolean;
137
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
138
- } & import("./../../common/types/Shapes").Rect & {
139
- type: "square";
140
- } & {
141
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
142
- type: "square";
143
- }) | ({
144
- id: string;
145
- computed: {
146
- borders: import("./../../common/types/Shapes").Rect;
147
- outerBorders: import("./../../common/types/Shapes").Rect;
148
- center: Point;
149
- boundingBox: import("./../../common/types/Shapes").Rect;
150
- };
151
- path?: Path2D | undefined;
152
- } & {
153
- rotation?: number;
154
- toolId?: string;
155
- visible?: boolean;
156
- locked?: boolean;
157
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
158
- } & import("./../../common/types/Shapes").Circle & {
159
- type: "circle";
160
- } & {
161
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
162
- type: "circle";
163
- }) | ({
164
- id: string;
165
- computed: {
166
- borders: import("./../../common/types/Shapes").Rect;
167
- outerBorders: import("./../../common/types/Shapes").Rect;
168
- center: Point;
169
- boundingBox: import("./../../common/types/Shapes").Rect;
170
- };
171
- path?: Path2D | undefined;
172
- } & {
173
- rotation?: number;
174
- toolId?: string;
175
- visible?: boolean;
176
- locked?: boolean;
177
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
178
- } & import("./../../common/types/Shapes").Ellipse & {
179
- type: "ellipse";
180
- } & {
181
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
182
- type: "ellipse";
183
- }) | ({
184
- id: string;
185
- computed: {
186
- borders: import("./../../common/types/Shapes").Rect;
187
- outerBorders: import("./../../common/types/Shapes").Rect;
188
- center: Point;
189
- boundingBox: import("./../../common/types/Shapes").Rect;
190
- };
191
- path?: Path2D | undefined;
192
- } & {
193
- rotation?: number;
194
- toolId?: string;
195
- visible?: boolean;
196
- locked?: boolean;
197
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
198
- } & import("./../../common/types/Shapes").Polygon & {
199
- type: "polygon";
200
- } & {
201
- selection?: import("./../../common/types/Shapes").SelectionLinesType | undefined;
202
- type: "polygon";
203
- }) | ({
204
- id: string;
205
- computed: {
206
- borders: import("./../../common/types/Shapes").Rect;
207
- outerBorders: import("./../../common/types/Shapes").Rect;
208
- center: Point;
209
- boundingBox: import("./../../common/types/Shapes").Rect;
210
- };
211
- path?: Path2D | undefined;
212
- } & {
213
- rotation?: number;
214
- toolId?: string;
215
- visible?: boolean;
216
- locked?: boolean;
217
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
218
- } & import("./../../common/types/Shapes").Curve & {
219
- type: "curve";
220
- } & {
221
- selection?: import("./../../common/types/Shapes").SelectionLinesType | undefined;
222
- type: "curve";
223
- }) | ({
224
- id: string;
225
- computed: {
226
- borders: import("./../../common/types/Shapes").Rect;
227
- outerBorders: import("./../../common/types/Shapes").Rect;
228
- center: Point;
229
- boundingBox: import("./../../common/types/Shapes").Rect;
230
- };
231
- path?: Path2D | undefined;
232
- } & {
233
- rotation?: number;
234
- toolId?: string;
235
- visible?: boolean;
236
- locked?: boolean;
237
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
238
- } & import("./../../common/types/Shapes").Brush & {
239
- type: "brush";
240
- scaleX?: number;
241
- scaleY?: number;
242
- } & {
243
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
244
- type: "brush";
245
- }) | ({
246
- id: string;
247
- computed: {
248
- borders: import("./../../common/types/Shapes").Rect;
249
- outerBorders: import("./../../common/types/Shapes").Rect;
250
- center: Point;
251
- boundingBox: import("./../../common/types/Shapes").Rect;
252
- };
253
- path?: Path2D | undefined;
254
- } & {
255
- rotation?: number;
256
- toolId?: string;
257
- visible?: boolean;
258
- locked?: boolean;
259
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
260
- } & import("./../../common/types/Shapes").Rect & {
261
- shapes: ShapeEntity[];
262
- type: "group";
263
- } & {
264
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
265
- type: "group";
266
- }))[]>;
267
- addPictureShape: (fileOrUrl: File | string, maxWidth?: number, maxHeight?: number) => Promise<ShapeEntity<"picture">>;
268
- moveShapes: (startPositionShapeId: string, endPositionShapeId: string) => void;
269
- toggleShapeVisibility: (shapes: ShapeEntity[]) => void;
270
- toggleShapeLock: (shapeGroup: ShapeEntity[]) => void;
271
- canGoBackward: boolean;
272
- canGoForward: boolean;
273
- canClear: boolean;
274
- selectedShape: ({
275
- id: string;
276
- computed: {
277
- borders: import("./../../common/types/Shapes").Rect;
278
- outerBorders: import("./../../common/types/Shapes").Rect;
279
- center: Point;
280
- boundingBox: import("./../../common/types/Shapes").Rect;
281
- };
282
- path?: Path2D | undefined;
283
- } & {
284
- rotation?: number;
285
- toolId?: string;
286
- visible?: boolean;
287
- locked?: boolean;
288
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
289
- } & import("./../../common/types/Shapes").Line & {
290
- type: "line";
291
- } & {
292
- selection?: import("./../../common/types/Shapes").SelectionLinesType | undefined;
293
- arrows?: import("./../../common/types/Shapes").TriangleEntity[];
294
- type: "line";
295
- }) | ({
296
- id: string;
297
- computed: {
298
- borders: import("./../../common/types/Shapes").Rect;
299
- outerBorders: import("./../../common/types/Shapes").Rect;
300
- center: Point;
301
- boundingBox: import("./../../common/types/Shapes").Rect;
302
- };
303
- path?: Path2D | undefined;
304
- } & {
305
- rotation?: number;
306
- toolId?: string;
307
- visible?: boolean;
308
- locked?: boolean;
309
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
310
- } & import("./../../common/types/Shapes").Rect & {
311
- src: string;
312
- } & {
313
- img: HTMLImageElement;
314
- flipX?: boolean;
315
- flipY?: boolean;
316
- ratio?: number;
317
- type: "picture";
318
- } & {
319
- img: HTMLImageElement;
320
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
321
- type: "picture";
322
- }) | ({
323
- id: string;
324
- computed: {
325
- borders: import("./../../common/types/Shapes").Rect;
326
- outerBorders: import("./../../common/types/Shapes").Rect;
327
- center: Point;
328
- boundingBox: import("./../../common/types/Shapes").Rect;
329
- };
330
- path?: Path2D | undefined;
331
- } & {
332
- rotation?: number;
333
- toolId?: string;
334
- visible?: boolean;
335
- locked?: boolean;
336
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
337
- } & import("./../../common/types/Shapes").Rect & {
338
- value: string[];
339
- fontSize: number;
340
- } & {
341
- flipX?: boolean;
342
- flipY?: boolean;
343
- ratio?: number;
344
- type: "text";
345
- } & {
346
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
347
- type: "text";
348
- }) | ({
349
- id: string;
350
- computed: {
351
- borders: import("./../../common/types/Shapes").Rect;
352
- outerBorders: import("./../../common/types/Shapes").Rect;
353
- center: Point;
354
- boundingBox: import("./../../common/types/Shapes").Rect;
355
- };
356
- path?: Path2D | undefined;
357
- } & {
358
- rotation?: number;
359
- toolId?: string;
360
- visible?: boolean;
361
- locked?: boolean;
362
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
363
- } & import("./../../common/types/Shapes").Rect & {
364
- type: "rect";
365
- } & {
366
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
367
- type: "rect";
368
- }) | ({
369
- id: string;
370
- computed: {
371
- borders: import("./../../common/types/Shapes").Rect;
372
- outerBorders: import("./../../common/types/Shapes").Rect;
373
- center: Point;
374
- boundingBox: import("./../../common/types/Shapes").Rect;
375
- };
376
- path?: Path2D | undefined;
377
- } & {
378
- rotation?: number;
379
- toolId?: string;
380
- visible?: boolean;
381
- locked?: boolean;
382
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
383
- } & import("./../../common/types/Shapes").Rect & {
384
- type: "square";
385
- } & {
386
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
387
- type: "square";
388
- }) | ({
389
- id: string;
390
- computed: {
391
- borders: import("./../../common/types/Shapes").Rect;
392
- outerBorders: import("./../../common/types/Shapes").Rect;
393
- center: Point;
394
- boundingBox: import("./../../common/types/Shapes").Rect;
395
- };
396
- path?: Path2D | undefined;
397
- } & {
398
- rotation?: number;
399
- toolId?: string;
400
- visible?: boolean;
401
- locked?: boolean;
402
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
403
- } & import("./../../common/types/Shapes").Circle & {
404
- type: "circle";
405
- } & {
406
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
407
- type: "circle";
408
- }) | ({
409
- id: string;
410
- computed: {
411
- borders: import("./../../common/types/Shapes").Rect;
412
- outerBorders: import("./../../common/types/Shapes").Rect;
413
- center: Point;
414
- boundingBox: import("./../../common/types/Shapes").Rect;
415
- };
416
- path?: Path2D | undefined;
417
- } & {
418
- rotation?: number;
419
- toolId?: string;
420
- visible?: boolean;
421
- locked?: boolean;
422
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
423
- } & import("./../../common/types/Shapes").Ellipse & {
424
- type: "ellipse";
425
- } & {
426
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
427
- type: "ellipse";
428
- }) | ({
429
- id: string;
430
- computed: {
431
- borders: import("./../../common/types/Shapes").Rect;
432
- outerBorders: import("./../../common/types/Shapes").Rect;
433
- center: Point;
434
- boundingBox: import("./../../common/types/Shapes").Rect;
435
- };
436
- path?: Path2D | undefined;
437
- } & {
438
- rotation?: number;
439
- toolId?: string;
440
- visible?: boolean;
441
- locked?: boolean;
442
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
443
- } & import("./../../common/types/Shapes").Polygon & {
444
- type: "polygon";
445
- } & {
446
- selection?: import("./../../common/types/Shapes").SelectionLinesType | undefined;
447
- type: "polygon";
448
- }) | ({
449
- id: string;
450
- computed: {
451
- borders: import("./../../common/types/Shapes").Rect;
452
- outerBorders: import("./../../common/types/Shapes").Rect;
453
- center: Point;
454
- boundingBox: import("./../../common/types/Shapes").Rect;
455
- };
456
- path?: Path2D | undefined;
457
- } & {
458
- rotation?: number;
459
- toolId?: string;
460
- visible?: boolean;
461
- locked?: boolean;
462
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
463
- } & import("./../../common/types/Shapes").Curve & {
464
- type: "curve";
465
- } & {
466
- selection?: import("./../../common/types/Shapes").SelectionLinesType | undefined;
467
- type: "curve";
468
- }) | ({
469
- id: string;
470
- computed: {
471
- borders: import("./../../common/types/Shapes").Rect;
472
- outerBorders: import("./../../common/types/Shapes").Rect;
473
- center: Point;
474
- boundingBox: import("./../../common/types/Shapes").Rect;
475
- };
476
- path?: Path2D | undefined;
477
- } & {
478
- rotation?: number;
479
- toolId?: string;
480
- visible?: boolean;
481
- locked?: boolean;
482
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
483
- } & import("./../../common/types/Shapes").Brush & {
484
- type: "brush";
485
- scaleX?: number;
486
- scaleY?: number;
487
- } & {
488
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
489
- type: "brush";
490
- }) | ({
491
- id: string;
492
- computed: {
493
- borders: import("./../../common/types/Shapes").Rect;
494
- outerBorders: import("./../../common/types/Shapes").Rect;
495
- center: Point;
496
- boundingBox: import("./../../common/types/Shapes").Rect;
497
- };
498
- path?: Path2D | undefined;
499
- } & {
500
- rotation?: number;
501
- toolId?: string;
502
- visible?: boolean;
503
- locked?: boolean;
504
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
505
- } & import("./../../common/types/Shapes").Rect & {
506
- shapes: ShapeEntity[];
507
- type: "group";
508
- } & {
509
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
510
- type: "group";
511
- }) | undefined;
512
- saveShapes: () => void;
513
- removeShape: (shapes: ShapeEntity[]) => void;
514
- updateShape: (updatedShapes: ShapeEntity[], withSave?: boolean) => void;
515
- backwardShape: () => void;
516
- forwardShape: () => void;
517
- refs: {
518
- canvas: import("react").RefObject<HTMLCanvasElement | null>;
519
- editor: import("react").RefObject<HTMLElement | null>;
520
- setEditor: (node: HTMLElement | null) => void;
521
- };
522
- width: number;
523
- height: number;
524
- selectTool: (tool: ToolsType) => void;
525
- selectShapes: (shapes: ShapeEntity[]) => void;
526
- activeTool: ToolsType;
527
- setActiveTool: import("react").Dispatch<import("react").SetStateAction<ToolsType>>;
528
- setAvailableTools: import("react").Dispatch<import("react").SetStateAction<import("./../../common/types/tools").CustomTool[]>>;
529
- isEditMode: boolean;
530
- availableTools: import("./../../common/types/tools").CustomTool[];
531
- gridGap: number;
532
- setGridGap: import("react").Dispatch<import("react").SetStateAction<number>>;
533
- loadFile: (file: File) => Promise<void>;
534
- exportPicture: (view: "fitToShapes" | "defaultView" | "currentZoom") => void;
535
- exportData: () => void;
536
- clearCanvas: () => void;
537
- settings: UtilsSettings;
538
- setCanvasZoom: (action: "unzoom" | "zoom" | "default") => void;
539
- resetZoom: () => void;
540
- canvas: {
541
- canGrow: boolean;
542
- canShrink: boolean;
543
- layersManipulation: boolean;
544
- withExport: boolean;
545
- withLoadAndSave: boolean;
546
- withUploadPicture: boolean;
547
- withUrlPicture: boolean;
548
- };
90
+ width: number;
91
+ height: number;
92
+ selectShapes: (shapes: ShapeEntity[]) => void;
93
+ activeTool: ToolsType;
94
+ setActiveTool: React.Dispatch<React.SetStateAction<ToolsType>>;
95
+ isEditMode: boolean;
96
+ settings: UtilsSettings;
97
+ setCanvasZoom: (action: 'unzoom' | 'zoom' | 'default') => void;
98
+ resetZoom: () => void;
99
+ setCanvasSize: React.Dispatch<React.SetStateAction<CanvasSize>>;
100
+ setCanvasOffset: (offset: Point) => void;
101
+ isInsideComponent: boolean;
102
+ isInsideCanvas: boolean;
103
+ canvas: {
104
+ withSkeleton: boolean;
105
+ withFrameSelection: boolean;
106
+ canGrow: boolean;
107
+ canShrink: boolean;
549
108
  };
550
- canvasProps: {
551
- shapesRef: import("react").RefObject<(({
552
- id: string;
553
- computed: {
554
- borders: import("./../../common/types/Shapes").Rect;
555
- outerBorders: import("./../../common/types/Shapes").Rect;
556
- center: Point;
557
- boundingBox: import("./../../common/types/Shapes").Rect;
558
- };
559
- path?: Path2D | undefined;
560
- } & {
561
- rotation?: number;
562
- toolId?: string;
563
- visible?: boolean;
564
- locked?: boolean;
565
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
566
- } & import("./../../common/types/Shapes").Line & {
567
- type: "line";
568
- } & {
569
- selection?: import("./../../common/types/Shapes").SelectionLinesType | undefined;
570
- arrows?: import("./../../common/types/Shapes").TriangleEntity[];
571
- type: "line";
572
- }) | ({
573
- id: string;
574
- computed: {
575
- borders: import("./../../common/types/Shapes").Rect;
576
- outerBorders: import("./../../common/types/Shapes").Rect;
577
- center: Point;
578
- boundingBox: import("./../../common/types/Shapes").Rect;
579
- };
580
- path?: Path2D | undefined;
581
- } & {
582
- rotation?: number;
583
- toolId?: string;
584
- visible?: boolean;
585
- locked?: boolean;
586
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
587
- } & import("./../../common/types/Shapes").Rect & {
588
- src: string;
589
- } & {
590
- img: HTMLImageElement;
591
- flipX?: boolean;
592
- flipY?: boolean;
593
- ratio?: number;
594
- type: "picture";
595
- } & {
596
- img: HTMLImageElement;
597
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
598
- type: "picture";
599
- }) | ({
600
- id: string;
601
- computed: {
602
- borders: import("./../../common/types/Shapes").Rect;
603
- outerBorders: import("./../../common/types/Shapes").Rect;
604
- center: Point;
605
- boundingBox: import("./../../common/types/Shapes").Rect;
606
- };
607
- path?: Path2D | undefined;
608
- } & {
609
- rotation?: number;
610
- toolId?: string;
611
- visible?: boolean;
612
- locked?: boolean;
613
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
614
- } & import("./../../common/types/Shapes").Rect & {
615
- value: string[];
616
- fontSize: number;
617
- } & {
618
- flipX?: boolean;
619
- flipY?: boolean;
620
- ratio?: number;
621
- type: "text";
622
- } & {
623
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
624
- type: "text";
625
- }) | ({
626
- id: string;
627
- computed: {
628
- borders: import("./../../common/types/Shapes").Rect;
629
- outerBorders: import("./../../common/types/Shapes").Rect;
630
- center: Point;
631
- boundingBox: import("./../../common/types/Shapes").Rect;
632
- };
633
- path?: Path2D | undefined;
634
- } & {
635
- rotation?: number;
636
- toolId?: string;
637
- visible?: boolean;
638
- locked?: boolean;
639
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
640
- } & import("./../../common/types/Shapes").Rect & {
641
- type: "rect";
642
- } & {
643
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
644
- type: "rect";
645
- }) | ({
646
- id: string;
647
- computed: {
648
- borders: import("./../../common/types/Shapes").Rect;
649
- outerBorders: import("./../../common/types/Shapes").Rect;
650
- center: Point;
651
- boundingBox: import("./../../common/types/Shapes").Rect;
652
- };
653
- path?: Path2D | undefined;
654
- } & {
655
- rotation?: number;
656
- toolId?: string;
657
- visible?: boolean;
658
- locked?: boolean;
659
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
660
- } & import("./../../common/types/Shapes").Rect & {
661
- type: "square";
662
- } & {
663
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
664
- type: "square";
665
- }) | ({
666
- id: string;
667
- computed: {
668
- borders: import("./../../common/types/Shapes").Rect;
669
- outerBorders: import("./../../common/types/Shapes").Rect;
670
- center: Point;
671
- boundingBox: import("./../../common/types/Shapes").Rect;
672
- };
673
- path?: Path2D | undefined;
674
- } & {
675
- rotation?: number;
676
- toolId?: string;
677
- visible?: boolean;
678
- locked?: boolean;
679
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
680
- } & import("./../../common/types/Shapes").Circle & {
681
- type: "circle";
682
- } & {
683
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
684
- type: "circle";
685
- }) | ({
686
- id: string;
687
- computed: {
688
- borders: import("./../../common/types/Shapes").Rect;
689
- outerBorders: import("./../../common/types/Shapes").Rect;
690
- center: Point;
691
- boundingBox: import("./../../common/types/Shapes").Rect;
692
- };
693
- path?: Path2D | undefined;
694
- } & {
695
- rotation?: number;
696
- toolId?: string;
697
- visible?: boolean;
698
- locked?: boolean;
699
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
700
- } & import("./../../common/types/Shapes").Ellipse & {
701
- type: "ellipse";
702
- } & {
703
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
704
- type: "ellipse";
705
- }) | ({
706
- id: string;
707
- computed: {
708
- borders: import("./../../common/types/Shapes").Rect;
709
- outerBorders: import("./../../common/types/Shapes").Rect;
710
- center: Point;
711
- boundingBox: import("./../../common/types/Shapes").Rect;
712
- };
713
- path?: Path2D | undefined;
714
- } & {
715
- rotation?: number;
716
- toolId?: string;
717
- visible?: boolean;
718
- locked?: boolean;
719
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
720
- } & import("./../../common/types/Shapes").Polygon & {
721
- type: "polygon";
722
- } & {
723
- selection?: import("./../../common/types/Shapes").SelectionLinesType | undefined;
724
- type: "polygon";
725
- }) | ({
726
- id: string;
727
- computed: {
728
- borders: import("./../../common/types/Shapes").Rect;
729
- outerBorders: import("./../../common/types/Shapes").Rect;
730
- center: Point;
731
- boundingBox: import("./../../common/types/Shapes").Rect;
732
- };
733
- path?: Path2D | undefined;
734
- } & {
735
- rotation?: number;
736
- toolId?: string;
737
- visible?: boolean;
738
- locked?: boolean;
739
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
740
- } & import("./../../common/types/Shapes").Curve & {
741
- type: "curve";
742
- } & {
743
- selection?: import("./../../common/types/Shapes").SelectionLinesType | undefined;
744
- type: "curve";
745
- }) | ({
746
- id: string;
747
- computed: {
748
- borders: import("./../../common/types/Shapes").Rect;
749
- outerBorders: import("./../../common/types/Shapes").Rect;
750
- center: Point;
751
- boundingBox: import("./../../common/types/Shapes").Rect;
752
- };
753
- path?: Path2D | undefined;
754
- } & {
755
- rotation?: number;
756
- toolId?: string;
757
- visible?: boolean;
758
- locked?: boolean;
759
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
760
- } & import("./../../common/types/Shapes").Brush & {
761
- type: "brush";
762
- scaleX?: number;
763
- scaleY?: number;
764
- } & {
765
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
766
- type: "brush";
767
- }) | ({
768
- id: string;
769
- computed: {
770
- borders: import("./../../common/types/Shapes").Rect;
771
- outerBorders: import("./../../common/types/Shapes").Rect;
772
- center: Point;
773
- boundingBox: import("./../../common/types/Shapes").Rect;
774
- };
775
- path?: Path2D | undefined;
776
- } & {
777
- rotation?: number;
778
- toolId?: string;
779
- visible?: boolean;
780
- locked?: boolean;
781
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
782
- } & import("./../../common/types/Shapes").Rect & {
783
- shapes: ShapeEntity[];
784
- type: "group";
785
- } & {
786
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
787
- type: "group";
788
- }))[]>;
789
- selectedShape: ({
790
- id: string;
791
- computed: {
792
- borders: import("./../../common/types/Shapes").Rect;
793
- outerBorders: import("./../../common/types/Shapes").Rect;
794
- center: Point;
795
- boundingBox: import("./../../common/types/Shapes").Rect;
796
- };
797
- path?: Path2D | undefined;
798
- } & {
799
- rotation?: number;
800
- toolId?: string;
801
- visible?: boolean;
802
- locked?: boolean;
803
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
804
- } & import("./../../common/types/Shapes").Line & {
805
- type: "line";
806
- } & {
807
- selection?: import("./../../common/types/Shapes").SelectionLinesType | undefined;
808
- arrows?: import("./../../common/types/Shapes").TriangleEntity[];
809
- type: "line";
810
- }) | ({
811
- id: string;
812
- computed: {
813
- borders: import("./../../common/types/Shapes").Rect;
814
- outerBorders: import("./../../common/types/Shapes").Rect;
815
- center: Point;
816
- boundingBox: import("./../../common/types/Shapes").Rect;
817
- };
818
- path?: Path2D | undefined;
819
- } & {
820
- rotation?: number;
821
- toolId?: string;
822
- visible?: boolean;
823
- locked?: boolean;
824
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
825
- } & import("./../../common/types/Shapes").Rect & {
826
- src: string;
827
- } & {
828
- img: HTMLImageElement;
829
- flipX?: boolean;
830
- flipY?: boolean;
831
- ratio?: number;
832
- type: "picture";
833
- } & {
834
- img: HTMLImageElement;
835
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
836
- type: "picture";
837
- }) | ({
838
- id: string;
839
- computed: {
840
- borders: import("./../../common/types/Shapes").Rect;
841
- outerBorders: import("./../../common/types/Shapes").Rect;
842
- center: Point;
843
- boundingBox: import("./../../common/types/Shapes").Rect;
844
- };
845
- path?: Path2D | undefined;
846
- } & {
847
- rotation?: number;
848
- toolId?: string;
849
- visible?: boolean;
850
- locked?: boolean;
851
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
852
- } & import("./../../common/types/Shapes").Rect & {
853
- value: string[];
854
- fontSize: number;
855
- } & {
856
- flipX?: boolean;
857
- flipY?: boolean;
858
- ratio?: number;
859
- type: "text";
860
- } & {
861
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
862
- type: "text";
863
- }) | ({
864
- id: string;
865
- computed: {
866
- borders: import("./../../common/types/Shapes").Rect;
867
- outerBorders: import("./../../common/types/Shapes").Rect;
868
- center: Point;
869
- boundingBox: import("./../../common/types/Shapes").Rect;
870
- };
871
- path?: Path2D | undefined;
872
- } & {
873
- rotation?: number;
874
- toolId?: string;
875
- visible?: boolean;
876
- locked?: boolean;
877
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
878
- } & import("./../../common/types/Shapes").Rect & {
879
- type: "rect";
880
- } & {
881
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
882
- type: "rect";
883
- }) | ({
884
- id: string;
885
- computed: {
886
- borders: import("./../../common/types/Shapes").Rect;
887
- outerBorders: import("./../../common/types/Shapes").Rect;
888
- center: Point;
889
- boundingBox: import("./../../common/types/Shapes").Rect;
890
- };
891
- path?: Path2D | undefined;
892
- } & {
893
- rotation?: number;
894
- toolId?: string;
895
- visible?: boolean;
896
- locked?: boolean;
897
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
898
- } & import("./../../common/types/Shapes").Rect & {
899
- type: "square";
900
- } & {
901
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
902
- type: "square";
903
- }) | ({
904
- id: string;
905
- computed: {
906
- borders: import("./../../common/types/Shapes").Rect;
907
- outerBorders: import("./../../common/types/Shapes").Rect;
908
- center: Point;
909
- boundingBox: import("./../../common/types/Shapes").Rect;
910
- };
911
- path?: Path2D | undefined;
912
- } & {
913
- rotation?: number;
914
- toolId?: string;
915
- visible?: boolean;
916
- locked?: boolean;
917
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
918
- } & import("./../../common/types/Shapes").Circle & {
919
- type: "circle";
920
- } & {
921
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
922
- type: "circle";
923
- }) | ({
924
- id: string;
925
- computed: {
926
- borders: import("./../../common/types/Shapes").Rect;
927
- outerBorders: import("./../../common/types/Shapes").Rect;
928
- center: Point;
929
- boundingBox: import("./../../common/types/Shapes").Rect;
930
- };
931
- path?: Path2D | undefined;
932
- } & {
933
- rotation?: number;
934
- toolId?: string;
935
- visible?: boolean;
936
- locked?: boolean;
937
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
938
- } & import("./../../common/types/Shapes").Ellipse & {
939
- type: "ellipse";
940
- } & {
941
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
942
- type: "ellipse";
943
- }) | ({
944
- id: string;
945
- computed: {
946
- borders: import("./../../common/types/Shapes").Rect;
947
- outerBorders: import("./../../common/types/Shapes").Rect;
948
- center: Point;
949
- boundingBox: import("./../../common/types/Shapes").Rect;
950
- };
951
- path?: Path2D | undefined;
952
- } & {
953
- rotation?: number;
954
- toolId?: string;
955
- visible?: boolean;
956
- locked?: boolean;
957
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
958
- } & import("./../../common/types/Shapes").Polygon & {
959
- type: "polygon";
960
- } & {
961
- selection?: import("./../../common/types/Shapes").SelectionLinesType | undefined;
962
- type: "polygon";
963
- }) | ({
964
- id: string;
965
- computed: {
966
- borders: import("./../../common/types/Shapes").Rect;
967
- outerBorders: import("./../../common/types/Shapes").Rect;
968
- center: Point;
969
- boundingBox: import("./../../common/types/Shapes").Rect;
970
- };
971
- path?: Path2D | undefined;
972
- } & {
973
- rotation?: number;
974
- toolId?: string;
975
- visible?: boolean;
976
- locked?: boolean;
977
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
978
- } & import("./../../common/types/Shapes").Curve & {
979
- type: "curve";
980
- } & {
981
- selection?: import("./../../common/types/Shapes").SelectionLinesType | undefined;
982
- type: "curve";
983
- }) | ({
984
- id: string;
985
- computed: {
986
- borders: import("./../../common/types/Shapes").Rect;
987
- outerBorders: import("./../../common/types/Shapes").Rect;
988
- center: Point;
989
- boundingBox: import("./../../common/types/Shapes").Rect;
990
- };
991
- path?: Path2D | undefined;
992
- } & {
993
- rotation?: number;
994
- toolId?: string;
995
- visible?: boolean;
996
- locked?: boolean;
997
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
998
- } & import("./../../common/types/Shapes").Brush & {
999
- type: "brush";
1000
- scaleX?: number;
1001
- scaleY?: number;
1002
- } & {
1003
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
1004
- type: "brush";
1005
- }) | ({
1006
- id: string;
1007
- computed: {
1008
- borders: import("./../../common/types/Shapes").Rect;
1009
- outerBorders: import("./../../common/types/Shapes").Rect;
1010
- center: Point;
1011
- boundingBox: import("./../../common/types/Shapes").Rect;
1012
- };
1013
- path?: Path2D | undefined;
1014
- } & {
1015
- rotation?: number;
1016
- toolId?: string;
1017
- visible?: boolean;
1018
- locked?: boolean;
1019
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
1020
- } & import("./../../common/types/Shapes").Rect & {
1021
- shapes: ShapeEntity[];
1022
- type: "group";
1023
- } & {
1024
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
1025
- type: "group";
1026
- }) | undefined;
1027
- selectionFrame: {
1028
- oldSelection: import("./../../common/types/Shapes").SelectionType | undefined;
1029
- frame: [Point, Point];
1030
- } | undefined;
1031
- hoveredShape: ({
1032
- id: string;
1033
- computed: {
1034
- borders: import("./../../common/types/Shapes").Rect;
1035
- outerBorders: import("./../../common/types/Shapes").Rect;
1036
- center: Point;
1037
- boundingBox: import("./../../common/types/Shapes").Rect;
1038
- };
1039
- path?: Path2D | undefined;
1040
- } & {
1041
- rotation?: number;
1042
- toolId?: string;
1043
- visible?: boolean;
1044
- locked?: boolean;
1045
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
1046
- } & import("./../../common/types/Shapes").Line & {
1047
- type: "line";
1048
- } & {
1049
- selection?: import("./../../common/types/Shapes").SelectionLinesType | undefined;
1050
- arrows?: import("./../../common/types/Shapes").TriangleEntity[];
1051
- type: "line";
1052
- }) | ({
1053
- id: string;
1054
- computed: {
1055
- borders: import("./../../common/types/Shapes").Rect;
1056
- outerBorders: import("./../../common/types/Shapes").Rect;
1057
- center: Point;
1058
- boundingBox: import("./../../common/types/Shapes").Rect;
1059
- };
1060
- path?: Path2D | undefined;
1061
- } & {
1062
- rotation?: number;
1063
- toolId?: string;
1064
- visible?: boolean;
1065
- locked?: boolean;
1066
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
1067
- } & import("./../../common/types/Shapes").Rect & {
1068
- src: string;
1069
- } & {
1070
- img: HTMLImageElement;
1071
- flipX?: boolean;
1072
- flipY?: boolean;
1073
- ratio?: number;
1074
- type: "picture";
1075
- } & {
1076
- img: HTMLImageElement;
1077
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
1078
- type: "picture";
1079
- }) | ({
1080
- id: string;
1081
- computed: {
1082
- borders: import("./../../common/types/Shapes").Rect;
1083
- outerBorders: import("./../../common/types/Shapes").Rect;
1084
- center: Point;
1085
- boundingBox: import("./../../common/types/Shapes").Rect;
1086
- };
1087
- path?: Path2D | undefined;
1088
- } & {
1089
- rotation?: number;
1090
- toolId?: string;
1091
- visible?: boolean;
1092
- locked?: boolean;
1093
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
1094
- } & import("./../../common/types/Shapes").Rect & {
1095
- value: string[];
1096
- fontSize: number;
1097
- } & {
1098
- flipX?: boolean;
1099
- flipY?: boolean;
1100
- ratio?: number;
1101
- type: "text";
1102
- } & {
1103
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
1104
- type: "text";
1105
- }) | ({
1106
- id: string;
1107
- computed: {
1108
- borders: import("./../../common/types/Shapes").Rect;
1109
- outerBorders: import("./../../common/types/Shapes").Rect;
1110
- center: Point;
1111
- boundingBox: import("./../../common/types/Shapes").Rect;
1112
- };
1113
- path?: Path2D | undefined;
1114
- } & {
1115
- rotation?: number;
1116
- toolId?: string;
1117
- visible?: boolean;
1118
- locked?: boolean;
1119
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
1120
- } & import("./../../common/types/Shapes").Rect & {
1121
- type: "rect";
1122
- } & {
1123
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
1124
- type: "rect";
1125
- }) | ({
1126
- id: string;
1127
- computed: {
1128
- borders: import("./../../common/types/Shapes").Rect;
1129
- outerBorders: import("./../../common/types/Shapes").Rect;
1130
- center: Point;
1131
- boundingBox: import("./../../common/types/Shapes").Rect;
1132
- };
1133
- path?: Path2D | undefined;
1134
- } & {
1135
- rotation?: number;
1136
- toolId?: string;
1137
- visible?: boolean;
1138
- locked?: boolean;
1139
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
1140
- } & import("./../../common/types/Shapes").Rect & {
1141
- type: "square";
1142
- } & {
1143
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
1144
- type: "square";
1145
- }) | ({
1146
- id: string;
1147
- computed: {
1148
- borders: import("./../../common/types/Shapes").Rect;
1149
- outerBorders: import("./../../common/types/Shapes").Rect;
1150
- center: Point;
1151
- boundingBox: import("./../../common/types/Shapes").Rect;
1152
- };
1153
- path?: Path2D | undefined;
1154
- } & {
1155
- rotation?: number;
1156
- toolId?: string;
1157
- visible?: boolean;
1158
- locked?: boolean;
1159
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
1160
- } & import("./../../common/types/Shapes").Circle & {
1161
- type: "circle";
1162
- } & {
1163
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
1164
- type: "circle";
1165
- }) | ({
1166
- id: string;
1167
- computed: {
1168
- borders: import("./../../common/types/Shapes").Rect;
1169
- outerBorders: import("./../../common/types/Shapes").Rect;
1170
- center: Point;
1171
- boundingBox: import("./../../common/types/Shapes").Rect;
1172
- };
1173
- path?: Path2D | undefined;
1174
- } & {
1175
- rotation?: number;
1176
- toolId?: string;
1177
- visible?: boolean;
1178
- locked?: boolean;
1179
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
1180
- } & import("./../../common/types/Shapes").Ellipse & {
1181
- type: "ellipse";
1182
- } & {
1183
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
1184
- type: "ellipse";
1185
- }) | ({
1186
- id: string;
1187
- computed: {
1188
- borders: import("./../../common/types/Shapes").Rect;
1189
- outerBorders: import("./../../common/types/Shapes").Rect;
1190
- center: Point;
1191
- boundingBox: import("./../../common/types/Shapes").Rect;
1192
- };
1193
- path?: Path2D | undefined;
1194
- } & {
1195
- rotation?: number;
1196
- toolId?: string;
1197
- visible?: boolean;
1198
- locked?: boolean;
1199
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
1200
- } & import("./../../common/types/Shapes").Polygon & {
1201
- type: "polygon";
1202
- } & {
1203
- selection?: import("./../../common/types/Shapes").SelectionLinesType | undefined;
1204
- type: "polygon";
1205
- }) | ({
1206
- id: string;
1207
- computed: {
1208
- borders: import("./../../common/types/Shapes").Rect;
1209
- outerBorders: import("./../../common/types/Shapes").Rect;
1210
- center: Point;
1211
- boundingBox: import("./../../common/types/Shapes").Rect;
1212
- };
1213
- path?: Path2D | undefined;
1214
- } & {
1215
- rotation?: number;
1216
- toolId?: string;
1217
- visible?: boolean;
1218
- locked?: boolean;
1219
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
1220
- } & import("./../../common/types/Shapes").Curve & {
1221
- type: "curve";
1222
- } & {
1223
- selection?: import("./../../common/types/Shapes").SelectionLinesType | undefined;
1224
- type: "curve";
1225
- }) | ({
1226
- id: string;
1227
- computed: {
1228
- borders: import("./../../common/types/Shapes").Rect;
1229
- outerBorders: import("./../../common/types/Shapes").Rect;
1230
- center: Point;
1231
- boundingBox: import("./../../common/types/Shapes").Rect;
1232
- };
1233
- path?: Path2D | undefined;
1234
- } & {
1235
- rotation?: number;
1236
- toolId?: string;
1237
- visible?: boolean;
1238
- locked?: boolean;
1239
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
1240
- } & import("./../../common/types/Shapes").Brush & {
1241
- type: "brush";
1242
- scaleX?: number;
1243
- scaleY?: number;
1244
- } & {
1245
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
1246
- type: "brush";
1247
- }) | ({
1248
- id: string;
1249
- computed: {
1250
- borders: import("./../../common/types/Shapes").Rect;
1251
- outerBorders: import("./../../common/types/Shapes").Rect;
1252
- center: Point;
1253
- boundingBox: import("./../../common/types/Shapes").Rect;
1254
- };
1255
- path?: Path2D | undefined;
1256
- } & {
1257
- rotation?: number;
1258
- toolId?: string;
1259
- visible?: boolean;
1260
- locked?: boolean;
1261
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
1262
- } & import("./../../common/types/Shapes").Rect & {
1263
- shapes: ShapeEntity[];
1264
- type: "group";
1265
- } & {
1266
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
1267
- type: "group";
1268
- }) | undefined;
1269
- addShape: (newShapes: ShapeEntity[]) => void;
1270
- setSelectedShape: import("react").Dispatch<({
1271
- id: string;
1272
- computed: {
1273
- borders: import("./../../common/types/Shapes").Rect;
1274
- outerBorders: import("./../../common/types/Shapes").Rect;
1275
- center: Point;
1276
- boundingBox: import("./../../common/types/Shapes").Rect;
1277
- };
1278
- path?: Path2D | undefined;
1279
- } & {
1280
- rotation?: number;
1281
- toolId?: string;
1282
- visible?: boolean;
1283
- locked?: boolean;
1284
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
1285
- } & import("./../../common/types/Shapes").Line & {
1286
- type: "line";
1287
- } & {
1288
- selection?: import("./../../common/types/Shapes").SelectionLinesType | undefined;
1289
- arrows?: import("./../../common/types/Shapes").TriangleEntity[];
1290
- type: "line";
1291
- }) | ({
1292
- id: string;
1293
- computed: {
1294
- borders: import("./../../common/types/Shapes").Rect;
1295
- outerBorders: import("./../../common/types/Shapes").Rect;
1296
- center: Point;
1297
- boundingBox: import("./../../common/types/Shapes").Rect;
1298
- };
1299
- path?: Path2D | undefined;
1300
- } & {
1301
- rotation?: number;
1302
- toolId?: string;
1303
- visible?: boolean;
1304
- locked?: boolean;
1305
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
1306
- } & import("./../../common/types/Shapes").Rect & {
1307
- src: string;
1308
- } & {
1309
- img: HTMLImageElement;
1310
- flipX?: boolean;
1311
- flipY?: boolean;
1312
- ratio?: number;
1313
- type: "picture";
1314
- } & {
1315
- img: HTMLImageElement;
1316
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
1317
- type: "picture";
1318
- }) | ({
1319
- id: string;
1320
- computed: {
1321
- borders: import("./../../common/types/Shapes").Rect;
1322
- outerBorders: import("./../../common/types/Shapes").Rect;
1323
- center: Point;
1324
- boundingBox: import("./../../common/types/Shapes").Rect;
1325
- };
1326
- path?: Path2D | undefined;
1327
- } & {
1328
- rotation?: number;
1329
- toolId?: string;
1330
- visible?: boolean;
1331
- locked?: boolean;
1332
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
1333
- } & import("./../../common/types/Shapes").Rect & {
1334
- value: string[];
1335
- fontSize: number;
1336
- } & {
1337
- flipX?: boolean;
1338
- flipY?: boolean;
1339
- ratio?: number;
1340
- type: "text";
1341
- } & {
1342
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
1343
- type: "text";
1344
- }) | ({
1345
- id: string;
1346
- computed: {
1347
- borders: import("./../../common/types/Shapes").Rect;
1348
- outerBorders: import("./../../common/types/Shapes").Rect;
1349
- center: Point;
1350
- boundingBox: import("./../../common/types/Shapes").Rect;
1351
- };
1352
- path?: Path2D | undefined;
1353
- } & {
1354
- rotation?: number;
1355
- toolId?: string;
1356
- visible?: boolean;
1357
- locked?: boolean;
1358
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
1359
- } & import("./../../common/types/Shapes").Rect & {
1360
- type: "rect";
1361
- } & {
1362
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
1363
- type: "rect";
1364
- }) | ({
1365
- id: string;
1366
- computed: {
1367
- borders: import("./../../common/types/Shapes").Rect;
1368
- outerBorders: import("./../../common/types/Shapes").Rect;
1369
- center: Point;
1370
- boundingBox: import("./../../common/types/Shapes").Rect;
1371
- };
1372
- path?: Path2D | undefined;
1373
- } & {
1374
- rotation?: number;
1375
- toolId?: string;
1376
- visible?: boolean;
1377
- locked?: boolean;
1378
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
1379
- } & import("./../../common/types/Shapes").Rect & {
1380
- type: "square";
1381
- } & {
1382
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
1383
- type: "square";
1384
- }) | ({
1385
- id: string;
1386
- computed: {
1387
- borders: import("./../../common/types/Shapes").Rect;
1388
- outerBorders: import("./../../common/types/Shapes").Rect;
1389
- center: Point;
1390
- boundingBox: import("./../../common/types/Shapes").Rect;
1391
- };
1392
- path?: Path2D | undefined;
1393
- } & {
1394
- rotation?: number;
1395
- toolId?: string;
1396
- visible?: boolean;
1397
- locked?: boolean;
1398
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
1399
- } & import("./../../common/types/Shapes").Circle & {
1400
- type: "circle";
1401
- } & {
1402
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
1403
- type: "circle";
1404
- }) | ({
1405
- id: string;
1406
- computed: {
1407
- borders: import("./../../common/types/Shapes").Rect;
1408
- outerBorders: import("./../../common/types/Shapes").Rect;
1409
- center: Point;
1410
- boundingBox: import("./../../common/types/Shapes").Rect;
1411
- };
1412
- path?: Path2D | undefined;
1413
- } & {
1414
- rotation?: number;
1415
- toolId?: string;
1416
- visible?: boolean;
1417
- locked?: boolean;
1418
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
1419
- } & import("./../../common/types/Shapes").Ellipse & {
1420
- type: "ellipse";
1421
- } & {
1422
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
1423
- type: "ellipse";
1424
- }) | ({
1425
- id: string;
1426
- computed: {
1427
- borders: import("./../../common/types/Shapes").Rect;
1428
- outerBorders: import("./../../common/types/Shapes").Rect;
1429
- center: Point;
1430
- boundingBox: import("./../../common/types/Shapes").Rect;
1431
- };
1432
- path?: Path2D | undefined;
1433
- } & {
1434
- rotation?: number;
1435
- toolId?: string;
1436
- visible?: boolean;
1437
- locked?: boolean;
1438
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
1439
- } & import("./../../common/types/Shapes").Polygon & {
1440
- type: "polygon";
1441
- } & {
1442
- selection?: import("./../../common/types/Shapes").SelectionLinesType | undefined;
1443
- type: "polygon";
1444
- }) | ({
1445
- id: string;
1446
- computed: {
1447
- borders: import("./../../common/types/Shapes").Rect;
1448
- outerBorders: import("./../../common/types/Shapes").Rect;
1449
- center: Point;
1450
- boundingBox: import("./../../common/types/Shapes").Rect;
1451
- };
1452
- path?: Path2D | undefined;
1453
- } & {
1454
- rotation?: number;
1455
- toolId?: string;
1456
- visible?: boolean;
1457
- locked?: boolean;
1458
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
1459
- } & import("./../../common/types/Shapes").Curve & {
1460
- type: "curve";
1461
- } & {
1462
- selection?: import("./../../common/types/Shapes").SelectionLinesType | undefined;
1463
- type: "curve";
1464
- }) | ({
1465
- id: string;
1466
- computed: {
1467
- borders: import("./../../common/types/Shapes").Rect;
1468
- outerBorders: import("./../../common/types/Shapes").Rect;
1469
- center: Point;
1470
- boundingBox: import("./../../common/types/Shapes").Rect;
1471
- };
1472
- path?: Path2D | undefined;
1473
- } & {
1474
- rotation?: number;
1475
- toolId?: string;
1476
- visible?: boolean;
1477
- locked?: boolean;
1478
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
1479
- } & import("./../../common/types/Shapes").Brush & {
1480
- type: "brush";
1481
- scaleX?: number;
1482
- scaleY?: number;
1483
- } & {
1484
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
1485
- type: "brush";
1486
- }) | ({
1487
- id: string;
1488
- computed: {
1489
- borders: import("./../../common/types/Shapes").Rect;
1490
- outerBorders: import("./../../common/types/Shapes").Rect;
1491
- center: Point;
1492
- boundingBox: import("./../../common/types/Shapes").Rect;
1493
- };
1494
- path?: Path2D | undefined;
1495
- } & {
1496
- rotation?: number;
1497
- toolId?: string;
1498
- visible?: boolean;
1499
- locked?: boolean;
1500
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
1501
- } & import("./../../common/types/Shapes").Rect & {
1502
- shapes: ShapeEntity[];
1503
- type: "group";
1504
- } & {
1505
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
1506
- type: "group";
1507
- }) | ((prevState: ({
1508
- id: string;
1509
- computed: {
1510
- borders: import("./../../common/types/Shapes").Rect;
1511
- outerBorders: import("./../../common/types/Shapes").Rect;
1512
- center: Point;
1513
- boundingBox: import("./../../common/types/Shapes").Rect;
1514
- };
1515
- path?: Path2D | undefined;
1516
- } & {
1517
- rotation?: number;
1518
- toolId?: string;
1519
- visible?: boolean;
1520
- locked?: boolean;
1521
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
1522
- } & import("./../../common/types/Shapes").Line & {
1523
- type: "line";
1524
- } & {
1525
- selection?: import("./../../common/types/Shapes").SelectionLinesType | undefined;
1526
- arrows?: import("./../../common/types/Shapes").TriangleEntity[];
1527
- type: "line";
1528
- }) | ({
1529
- id: string;
1530
- computed: {
1531
- borders: import("./../../common/types/Shapes").Rect;
1532
- outerBorders: import("./../../common/types/Shapes").Rect;
1533
- center: Point;
1534
- boundingBox: import("./../../common/types/Shapes").Rect;
1535
- };
1536
- path?: Path2D | undefined;
1537
- } & {
1538
- rotation?: number;
1539
- toolId?: string;
1540
- visible?: boolean;
1541
- locked?: boolean;
1542
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
1543
- } & import("./../../common/types/Shapes").Rect & {
1544
- src: string;
1545
- } & {
1546
- img: HTMLImageElement;
1547
- flipX?: boolean;
1548
- flipY?: boolean;
1549
- ratio?: number;
1550
- type: "picture";
1551
- } & {
1552
- img: HTMLImageElement;
1553
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
1554
- type: "picture";
1555
- }) | ({
1556
- id: string;
1557
- computed: {
1558
- borders: import("./../../common/types/Shapes").Rect;
1559
- outerBorders: import("./../../common/types/Shapes").Rect;
1560
- center: Point;
1561
- boundingBox: import("./../../common/types/Shapes").Rect;
1562
- };
1563
- path?: Path2D | undefined;
1564
- } & {
1565
- rotation?: number;
1566
- toolId?: string;
1567
- visible?: boolean;
1568
- locked?: boolean;
1569
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
1570
- } & import("./../../common/types/Shapes").Rect & {
1571
- value: string[];
1572
- fontSize: number;
1573
- } & {
1574
- flipX?: boolean;
1575
- flipY?: boolean;
1576
- ratio?: number;
1577
- type: "text";
1578
- } & {
1579
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
1580
- type: "text";
1581
- }) | ({
1582
- id: string;
1583
- computed: {
1584
- borders: import("./../../common/types/Shapes").Rect;
1585
- outerBorders: import("./../../common/types/Shapes").Rect;
1586
- center: Point;
1587
- boundingBox: import("./../../common/types/Shapes").Rect;
1588
- };
1589
- path?: Path2D | undefined;
1590
- } & {
1591
- rotation?: number;
1592
- toolId?: string;
1593
- visible?: boolean;
1594
- locked?: boolean;
1595
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
1596
- } & import("./../../common/types/Shapes").Rect & {
1597
- type: "rect";
1598
- } & {
1599
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
1600
- type: "rect";
1601
- }) | ({
1602
- id: string;
1603
- computed: {
1604
- borders: import("./../../common/types/Shapes").Rect;
1605
- outerBorders: import("./../../common/types/Shapes").Rect;
1606
- center: Point;
1607
- boundingBox: import("./../../common/types/Shapes").Rect;
1608
- };
1609
- path?: Path2D | undefined;
1610
- } & {
1611
- rotation?: number;
1612
- toolId?: string;
1613
- visible?: boolean;
1614
- locked?: boolean;
1615
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
1616
- } & import("./../../common/types/Shapes").Rect & {
1617
- type: "square";
1618
- } & {
1619
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
1620
- type: "square";
1621
- }) | ({
1622
- id: string;
1623
- computed: {
1624
- borders: import("./../../common/types/Shapes").Rect;
1625
- outerBorders: import("./../../common/types/Shapes").Rect;
1626
- center: Point;
1627
- boundingBox: import("./../../common/types/Shapes").Rect;
1628
- };
1629
- path?: Path2D | undefined;
1630
- } & {
1631
- rotation?: number;
1632
- toolId?: string;
1633
- visible?: boolean;
1634
- locked?: boolean;
1635
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
1636
- } & import("./../../common/types/Shapes").Circle & {
1637
- type: "circle";
1638
- } & {
1639
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
1640
- type: "circle";
1641
- }) | ({
1642
- id: string;
1643
- computed: {
1644
- borders: import("./../../common/types/Shapes").Rect;
1645
- outerBorders: import("./../../common/types/Shapes").Rect;
1646
- center: Point;
1647
- boundingBox: import("./../../common/types/Shapes").Rect;
1648
- };
1649
- path?: Path2D | undefined;
1650
- } & {
1651
- rotation?: number;
1652
- toolId?: string;
1653
- visible?: boolean;
1654
- locked?: boolean;
1655
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
1656
- } & import("./../../common/types/Shapes").Ellipse & {
1657
- type: "ellipse";
1658
- } & {
1659
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
1660
- type: "ellipse";
1661
- }) | ({
1662
- id: string;
1663
- computed: {
1664
- borders: import("./../../common/types/Shapes").Rect;
1665
- outerBorders: import("./../../common/types/Shapes").Rect;
1666
- center: Point;
1667
- boundingBox: import("./../../common/types/Shapes").Rect;
1668
- };
1669
- path?: Path2D | undefined;
1670
- } & {
1671
- rotation?: number;
1672
- toolId?: string;
1673
- visible?: boolean;
1674
- locked?: boolean;
1675
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
1676
- } & import("./../../common/types/Shapes").Polygon & {
1677
- type: "polygon";
1678
- } & {
1679
- selection?: import("./../../common/types/Shapes").SelectionLinesType | undefined;
1680
- type: "polygon";
1681
- }) | ({
1682
- id: string;
1683
- computed: {
1684
- borders: import("./../../common/types/Shapes").Rect;
1685
- outerBorders: import("./../../common/types/Shapes").Rect;
1686
- center: Point;
1687
- boundingBox: import("./../../common/types/Shapes").Rect;
1688
- };
1689
- path?: Path2D | undefined;
1690
- } & {
1691
- rotation?: number;
1692
- toolId?: string;
1693
- visible?: boolean;
1694
- locked?: boolean;
1695
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
1696
- } & import("./../../common/types/Shapes").Curve & {
1697
- type: "curve";
1698
- } & {
1699
- selection?: import("./../../common/types/Shapes").SelectionLinesType | undefined;
1700
- type: "curve";
1701
- }) | ({
1702
- id: string;
1703
- computed: {
1704
- borders: import("./../../common/types/Shapes").Rect;
1705
- outerBorders: import("./../../common/types/Shapes").Rect;
1706
- center: Point;
1707
- boundingBox: import("./../../common/types/Shapes").Rect;
1708
- };
1709
- path?: Path2D | undefined;
1710
- } & {
1711
- rotation?: number;
1712
- toolId?: string;
1713
- visible?: boolean;
1714
- locked?: boolean;
1715
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
1716
- } & import("./../../common/types/Shapes").Brush & {
1717
- type: "brush";
1718
- scaleX?: number;
1719
- scaleY?: number;
1720
- } & {
1721
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
1722
- type: "brush";
1723
- }) | ({
1724
- id: string;
1725
- computed: {
1726
- borders: import("./../../common/types/Shapes").Rect;
1727
- outerBorders: import("./../../common/types/Shapes").Rect;
1728
- center: Point;
1729
- boundingBox: import("./../../common/types/Shapes").Rect;
1730
- };
1731
- path?: Path2D | undefined;
1732
- } & {
1733
- rotation?: number;
1734
- toolId?: string;
1735
- visible?: boolean;
1736
- locked?: boolean;
1737
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
1738
- } & import("./../../common/types/Shapes").Rect & {
1739
- shapes: ShapeEntity[];
1740
- type: "group";
1741
- } & {
1742
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
1743
- type: "group";
1744
- }) | undefined) => ({
1745
- id: string;
1746
- computed: {
1747
- borders: import("./../../common/types/Shapes").Rect;
1748
- outerBorders: import("./../../common/types/Shapes").Rect;
1749
- center: Point;
1750
- boundingBox: import("./../../common/types/Shapes").Rect;
1751
- };
1752
- path?: Path2D | undefined;
1753
- } & {
1754
- rotation?: number;
1755
- toolId?: string;
1756
- visible?: boolean;
1757
- locked?: boolean;
1758
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
1759
- } & import("./../../common/types/Shapes").Line & {
1760
- type: "line";
1761
- } & {
1762
- selection?: import("./../../common/types/Shapes").SelectionLinesType | undefined;
1763
- arrows?: import("./../../common/types/Shapes").TriangleEntity[];
1764
- type: "line";
1765
- }) | ({
1766
- id: string;
1767
- computed: {
1768
- borders: import("./../../common/types/Shapes").Rect;
1769
- outerBorders: import("./../../common/types/Shapes").Rect;
1770
- center: Point;
1771
- boundingBox: import("./../../common/types/Shapes").Rect;
1772
- };
1773
- path?: Path2D | undefined;
1774
- } & {
1775
- rotation?: number;
1776
- toolId?: string;
1777
- visible?: boolean;
1778
- locked?: boolean;
1779
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
1780
- } & import("./../../common/types/Shapes").Rect & {
1781
- src: string;
1782
- } & {
1783
- img: HTMLImageElement;
1784
- flipX?: boolean;
1785
- flipY?: boolean;
1786
- ratio?: number;
1787
- type: "picture";
1788
- } & {
1789
- img: HTMLImageElement;
1790
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
1791
- type: "picture";
1792
- }) | ({
1793
- id: string;
1794
- computed: {
1795
- borders: import("./../../common/types/Shapes").Rect;
1796
- outerBorders: import("./../../common/types/Shapes").Rect;
1797
- center: Point;
1798
- boundingBox: import("./../../common/types/Shapes").Rect;
1799
- };
1800
- path?: Path2D | undefined;
1801
- } & {
1802
- rotation?: number;
1803
- toolId?: string;
1804
- visible?: boolean;
1805
- locked?: boolean;
1806
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
1807
- } & import("./../../common/types/Shapes").Rect & {
1808
- value: string[];
1809
- fontSize: number;
1810
- } & {
1811
- flipX?: boolean;
1812
- flipY?: boolean;
1813
- ratio?: number;
1814
- type: "text";
1815
- } & {
1816
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
1817
- type: "text";
1818
- }) | ({
1819
- id: string;
1820
- computed: {
1821
- borders: import("./../../common/types/Shapes").Rect;
1822
- outerBorders: import("./../../common/types/Shapes").Rect;
1823
- center: Point;
1824
- boundingBox: import("./../../common/types/Shapes").Rect;
1825
- };
1826
- path?: Path2D | undefined;
1827
- } & {
1828
- rotation?: number;
1829
- toolId?: string;
1830
- visible?: boolean;
1831
- locked?: boolean;
1832
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
1833
- } & import("./../../common/types/Shapes").Rect & {
1834
- type: "rect";
1835
- } & {
1836
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
1837
- type: "rect";
1838
- }) | ({
1839
- id: string;
1840
- computed: {
1841
- borders: import("./../../common/types/Shapes").Rect;
1842
- outerBorders: import("./../../common/types/Shapes").Rect;
1843
- center: Point;
1844
- boundingBox: import("./../../common/types/Shapes").Rect;
1845
- };
1846
- path?: Path2D | undefined;
1847
- } & {
1848
- rotation?: number;
1849
- toolId?: string;
1850
- visible?: boolean;
1851
- locked?: boolean;
1852
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
1853
- } & import("./../../common/types/Shapes").Rect & {
1854
- type: "square";
1855
- } & {
1856
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
1857
- type: "square";
1858
- }) | ({
1859
- id: string;
1860
- computed: {
1861
- borders: import("./../../common/types/Shapes").Rect;
1862
- outerBorders: import("./../../common/types/Shapes").Rect;
1863
- center: Point;
1864
- boundingBox: import("./../../common/types/Shapes").Rect;
1865
- };
1866
- path?: Path2D | undefined;
1867
- } & {
1868
- rotation?: number;
1869
- toolId?: string;
1870
- visible?: boolean;
1871
- locked?: boolean;
1872
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
1873
- } & import("./../../common/types/Shapes").Circle & {
1874
- type: "circle";
1875
- } & {
1876
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
1877
- type: "circle";
1878
- }) | ({
1879
- id: string;
1880
- computed: {
1881
- borders: import("./../../common/types/Shapes").Rect;
1882
- outerBorders: import("./../../common/types/Shapes").Rect;
1883
- center: Point;
1884
- boundingBox: import("./../../common/types/Shapes").Rect;
1885
- };
1886
- path?: Path2D | undefined;
1887
- } & {
1888
- rotation?: number;
1889
- toolId?: string;
1890
- visible?: boolean;
1891
- locked?: boolean;
1892
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
1893
- } & import("./../../common/types/Shapes").Ellipse & {
1894
- type: "ellipse";
1895
- } & {
1896
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
1897
- type: "ellipse";
1898
- }) | ({
1899
- id: string;
1900
- computed: {
1901
- borders: import("./../../common/types/Shapes").Rect;
1902
- outerBorders: import("./../../common/types/Shapes").Rect;
1903
- center: Point;
1904
- boundingBox: import("./../../common/types/Shapes").Rect;
1905
- };
1906
- path?: Path2D | undefined;
1907
- } & {
1908
- rotation?: number;
1909
- toolId?: string;
1910
- visible?: boolean;
1911
- locked?: boolean;
1912
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
1913
- } & import("./../../common/types/Shapes").Polygon & {
1914
- type: "polygon";
1915
- } & {
1916
- selection?: import("./../../common/types/Shapes").SelectionLinesType | undefined;
1917
- type: "polygon";
1918
- }) | ({
1919
- id: string;
1920
- computed: {
1921
- borders: import("./../../common/types/Shapes").Rect;
1922
- outerBorders: import("./../../common/types/Shapes").Rect;
1923
- center: Point;
1924
- boundingBox: import("./../../common/types/Shapes").Rect;
1925
- };
1926
- path?: Path2D | undefined;
1927
- } & {
1928
- rotation?: number;
1929
- toolId?: string;
1930
- visible?: boolean;
1931
- locked?: boolean;
1932
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
1933
- } & import("./../../common/types/Shapes").Curve & {
1934
- type: "curve";
1935
- } & {
1936
- selection?: import("./../../common/types/Shapes").SelectionLinesType | undefined;
1937
- type: "curve";
1938
- }) | ({
1939
- id: string;
1940
- computed: {
1941
- borders: import("./../../common/types/Shapes").Rect;
1942
- outerBorders: import("./../../common/types/Shapes").Rect;
1943
- center: Point;
1944
- boundingBox: import("./../../common/types/Shapes").Rect;
1945
- };
1946
- path?: Path2D | undefined;
1947
- } & {
1948
- rotation?: number;
1949
- toolId?: string;
1950
- visible?: boolean;
1951
- locked?: boolean;
1952
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
1953
- } & import("./../../common/types/Shapes").Brush & {
1954
- type: "brush";
1955
- scaleX?: number;
1956
- scaleY?: number;
1957
- } & {
1958
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
1959
- type: "brush";
1960
- }) | ({
1961
- id: string;
1962
- computed: {
1963
- borders: import("./../../common/types/Shapes").Rect;
1964
- outerBorders: import("./../../common/types/Shapes").Rect;
1965
- center: Point;
1966
- boundingBox: import("./../../common/types/Shapes").Rect;
1967
- };
1968
- path?: Path2D | undefined;
1969
- } & {
1970
- rotation?: number;
1971
- toolId?: string;
1972
- visible?: boolean;
1973
- locked?: boolean;
1974
- style?: import("./../../common/types/Shapes").StyleShape | undefined;
1975
- } & import("./../../common/types/Shapes").Rect & {
1976
- shapes: ShapeEntity[];
1977
- type: "group";
1978
- } & {
1979
- selection?: import("./../../common/types/Shapes").SelectionDefaultType | undefined;
1980
- type: "group";
1981
- }) | undefined) | undefined>;
1982
- setSelectionFrame: import("react").Dispatch<import("react").SetStateAction<{
1983
- oldSelection: import("./../../common/types/Shapes").SelectionType | undefined;
1984
- frame: [Point, Point];
1985
- } | undefined>>;
1986
- refreshSelectedShapes: (ctx: CanvasRenderingContext2D, cursorPosition: Point) => void;
1987
- refreshHoveredShape: (e: MouseEvent | TouchEvent, ctx: CanvasRenderingContext2D, cursorPosition: Point, isInsideMask: boolean) => void;
1988
- removeShape: (shapes: ShapeEntity[]) => void;
1989
- updateShape: (updatedShapes: ShapeEntity[], withSave?: boolean) => void;
1990
- duplicateShapes: (shapesToDuplicate: ShapeEntity[]) => void;
1991
- backwardShape: () => void;
1992
- forwardShape: () => void;
1993
- saveShapes: () => void;
1994
- refs: {
1995
- canvas: import("react").RefObject<HTMLCanvasElement | null>;
1996
- editor: import("react").RefObject<HTMLElement | null>;
1997
- setEditor: (node: HTMLElement | null) => void;
1998
- };
1999
- width: number;
2000
- height: number;
2001
- settings: UtilsSettings;
2002
- setCanvasSize: import("react").Dispatch<import("react").SetStateAction<CanvasSize>>;
2003
- setCanvasOffset: (newOffset: Point) => void;
2004
- setCanvasZoom: (action: "unzoom" | "zoom" | "default") => void;
2005
- resetZoom: () => void;
2006
- selectShapes: (shapes: ShapeEntity[]) => void;
2007
- activeTool: ToolsType;
2008
- setActiveTool: import("react").Dispatch<import("react").SetStateAction<ToolsType>>;
2009
- isInsideComponent: boolean;
2010
- isInsideCanvas: boolean;
2011
- isEditMode: boolean;
2012
- canvas: {
2013
- withSkeleton: boolean;
2014
- withFrameSelection: boolean;
2015
- canGrow: boolean;
2016
- canShrink: boolean;
2017
- };
2018
- canvasOffsetStartData: {
2019
- start: Point;
2020
- originalOffset: Point;
2021
- } | undefined;
2022
- setCanvasOffsetStartData: import("react").Dispatch<import("react").SetStateAction<{
2023
- start: Point;
2024
- originalOffset: Point;
2025
- } | undefined>>;
2026
- selectionMode: SelectionModeData<number | Point>;
2027
- setSelectionMode: import("react").Dispatch<import("react").SetStateAction<SelectionModeData<number | Point>>>;
2028
- setCanvasMoveAcceleration: import("react").Dispatch<import("react").SetStateAction<Point>>;
2029
- isShiftPressed: boolean;
2030
- isAltPressed: boolean;
2031
- isSpacePressed: boolean;
2032
- setShiftPressed: import("react").Dispatch<import("react").SetStateAction<boolean>>;
2033
- setAltPressed: import("react").Dispatch<import("react").SetStateAction<boolean>>;
2034
- setIsSpacePressed: import("react").Dispatch<import("react").SetStateAction<boolean>>;
109
+ canvasOffsetStartData: {
110
+ start: Point;
111
+ originalOffset: Point;
112
+ } | undefined;
113
+ setCanvasOffsetStartData: React.Dispatch<React.SetStateAction<{
114
+ start: Point;
115
+ originalOffset: Point;
116
+ } | undefined>>;
117
+ selectionMode: SelectionModeData<number | Point>;
118
+ setSelectionMode: React.Dispatch<React.SetStateAction<SelectionModeData<number | Point>>>;
119
+ setCanvasMoveAcceleration: React.Dispatch<React.SetStateAction<Point>>;
120
+ isShiftPressed: boolean;
121
+ isAltPressed: boolean;
122
+ isSpacePressed: boolean;
123
+ setShiftPressed: React.Dispatch<React.SetStateAction<boolean>>;
124
+ setAltPressed: React.Dispatch<React.SetStateAction<boolean>>;
125
+ setIsSpacePressed: React.Dispatch<React.SetStateAction<boolean>>;
126
+ };
127
+ export type UseReactPaintReturnType = {
128
+ annotationsProps: {
129
+ style: CSSProperties;
2035
130
  };
2036
- registerEvent: (event: "dataChanged", fn: (data: StateData, source: "user" | "remote") => void) => void;
2037
- unregisterEvent: (event: "dataChanged", fn?: (data: StateData, source: "user" | "remote") => void) => void;
131
+ editorProps: EditorProps;
132
+ canvasProps: CanvasProps;
133
+ registerEvent: (event: 'dataChanged', fn: (data: StateData, source: 'user' | 'remote') => void) => void;
134
+ unregisterEvent: (event: 'dataChanged', fn?: (data: StateData, source: 'user' | 'remote') => void) => void;
2038
135
  resetCanvas: (json?: ExportedDrawableShape[], clearHistory?: boolean) => void;
2039
136
  resetZoom: () => void;
2040
- getCurrentImage: (view: "fitToShapes" | "defaultView" | "currentZoom") => string;
137
+ getCurrentImage: (view: 'fitToShapes' | 'defaultView' | 'currentZoom') => string;
2041
138
  getCurrentData: () => StateData;
2042
- setCanvasOffset: (newOffset: Point) => void;
2043
- setCanvasZoom: (action: "unzoom" | "zoom" | "default") => void;
139
+ setCanvasOffset: (offset: Point) => void;
140
+ setCanvasZoom: (action: 'unzoom' | 'zoom' | 'default') => void;
2044
141
  };
2045
- export type UseReactPaintReturnType = ReturnType<typeof useReactPaint>;
142
+ declare const useReactPaint: ({ width, height, shapes: defaultShapes, mode, disabled, options }?: UseReactPaintProps) => UseReactPaintReturnType;
2046
143
  export default useReactPaint;