@yorab/react-paint 0.16.0 → 0.16.2

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