@yorab/react-paint 0.2.2 → 0.3.0

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 (73) hide show
  1. package/Changelog.md +24 -0
  2. package/LICENSE.txt +21 -0
  3. package/README.md +6 -89
  4. package/dist/components/App.js +125 -102
  5. package/dist/components/Canvas.js +17 -14
  6. package/dist/components/settings/LayoutButton.js +3 -3
  7. package/dist/components/settings/Layouts.js +6 -19
  8. package/dist/components/settings/SettingsBar.js +3 -3
  9. package/dist/components/toolbox/EditTextBox.js +3 -2
  10. package/dist/components/toolbox/MenuGroup.js +1 -0
  11. package/dist/components/toolbox/PictureUrlInput.js +8 -7
  12. package/dist/hooks/useDrawableCanvas.js +19 -17
  13. package/dist/hooks/useResizeObserver.js +40 -0
  14. package/dist/hooks/useShapes.js +12 -8
  15. package/dist/styles.css +16 -17
  16. package/dist/utils/data.js +71 -19
  17. package/dist/utils/draw.js +53 -44
  18. package/dist/utils/file.js +26 -60
  19. package/dist/utils/intersect.js +18 -14
  20. package/dist/utils/selection.js +3 -3
  21. package/dist/utils/transform.js +18 -2
  22. package/package.json +6 -7
  23. package/dist/components/App.d.ts +0 -20
  24. package/dist/components/Canvas.d.ts +0 -28
  25. package/dist/components/common/Button.d.ts +0 -14
  26. package/dist/components/common/Loading.d.ts +0 -6
  27. package/dist/components/common/Modal.d.ts +0 -8
  28. package/dist/components/common/Panel.d.ts +0 -10
  29. package/dist/components/common/Snackbar.d.ts +0 -7
  30. package/dist/components/settings/ColorField.d.ts +0 -12
  31. package/dist/components/settings/DeleteButton.d.ts +0 -9
  32. package/dist/components/settings/FontFamilyField.d.ts +0 -10
  33. package/dist/components/settings/LayoutButton.d.ts +0 -8
  34. package/dist/components/settings/Layouts.d.ts +0 -18
  35. package/dist/components/settings/LineArrowField.d.ts +0 -10
  36. package/dist/components/settings/LineTypeField.d.ts +0 -14
  37. package/dist/components/settings/PointsNumberField.d.ts +0 -11
  38. package/dist/components/settings/RangeField.d.ts +0 -16
  39. package/dist/components/settings/SelectField.d.ts +0 -16
  40. package/dist/components/settings/SettingsBar.d.ts +0 -16
  41. package/dist/components/toolbox/EditTextBox.d.ts +0 -10
  42. package/dist/components/toolbox/LoadFileTool.d.ts +0 -11
  43. package/dist/components/toolbox/MenuGroup.d.ts +0 -23
  44. package/dist/components/toolbox/PictureUrlInput.d.ts +0 -7
  45. package/dist/components/toolbox/Tool.d.ts +0 -13
  46. package/dist/components/toolbox/Toolbar.d.ts +0 -20
  47. package/dist/components/toolbox/ToolbarGroup.d.ts +0 -18
  48. package/dist/constants/draw.d.ts +0 -2
  49. package/dist/constants/draw.js +0 -10
  50. package/dist/constants/icons.d.ts +0 -36
  51. package/dist/constants/shapes.d.ts +0 -5
  52. package/dist/constants/snackbar.d.ts +0 -11
  53. package/dist/constants/style.d.ts +0 -12
  54. package/dist/hooks/useComponent.d.ts +0 -9
  55. package/dist/hooks/useDrag.d.ts +0 -15
  56. package/dist/hooks/useDrawableCanvas.d.ts +0 -30
  57. package/dist/hooks/useKeyboard.d.ts +0 -15
  58. package/dist/hooks/useShapes.d.ts +0 -22
  59. package/dist/hooks/useSnackbar.d.ts +0 -16
  60. package/dist/schemas/drawableShape.json +0 -1021
  61. package/dist/types/Mode.d.ts +0 -51
  62. package/dist/types/Shapes.d.ts +0 -122
  63. package/dist/types/keyboard.d.ts +0 -15
  64. package/dist/utils/data.d.ts +0 -4
  65. package/dist/utils/draw.d.ts +0 -18
  66. package/dist/utils/file.d.ts +0 -33
  67. package/dist/utils/intersect.d.ts +0 -8
  68. package/dist/utils/selection.d.ts +0 -7
  69. package/dist/utils/shapeData.d.ts +0 -5
  70. package/dist/utils/string.d.ts +0 -3
  71. package/dist/utils/style.d.ts +0 -2
  72. package/dist/utils/toolbar.d.ts +0 -12
  73. package/dist/utils/transform.d.ts +0 -271
@@ -1,1021 +0,0 @@
1
- {
2
- "$schema": "http://json-schema.org/draft-07/schema#",
3
- "anyOf": [
4
- {
5
- "allOf": [
6
- {
7
- "properties": {
8
- "locked": {
9
- "type": "boolean"
10
- },
11
- "style": {
12
- "properties": {
13
- "fillColor": {
14
- "type": "string"
15
- },
16
- "fontFamily": {
17
- "type": "string"
18
- },
19
- "globalAlpha": {
20
- "type": "number"
21
- },
22
- "lineArrow": {
23
- "type": "number"
24
- },
25
- "lineDash": {
26
- "type": "number"
27
- },
28
- "lineWidth": {
29
- "type": "number"
30
- },
31
- "pointsCount": {
32
- "type": "number"
33
- },
34
- "strokeColor": {
35
- "type": "string"
36
- }
37
- },
38
- "type": "object"
39
- },
40
- "visible": {
41
- "type": "boolean"
42
- }
43
- },
44
- "type": "object"
45
- },
46
- {
47
- "properties": {
48
- "height": {
49
- "type": "number"
50
- },
51
- "width": {
52
- "type": "number"
53
- },
54
- "x": {
55
- "type": "number"
56
- },
57
- "y": {
58
- "type": "number"
59
- }
60
- },
61
- "type": "object"
62
- },
63
- {
64
- "properties": {
65
- "id": {
66
- "type": "string"
67
- },
68
- "rotation": {
69
- "type": "number"
70
- },
71
- "translation": {
72
- "items": [
73
- {
74
- "type": "number"
75
- },
76
- {
77
- "type": "number"
78
- }
79
- ],
80
- "maxItems": 2,
81
- "minItems": 2,
82
- "type": "array"
83
- }
84
- },
85
- "type": "object"
86
- },
87
- {
88
- "properties": {
89
- "type": {
90
- "enum": [
91
- "rect"
92
- ],
93
- "type": "string"
94
- }
95
- },
96
- "type": "object"
97
- }
98
- ]
99
- },
100
- {
101
- "allOf": [
102
- {
103
- "properties": {
104
- "locked": {
105
- "type": "boolean"
106
- },
107
- "style": {
108
- "properties": {
109
- "fillColor": {
110
- "type": "string"
111
- },
112
- "fontFamily": {
113
- "type": "string"
114
- },
115
- "globalAlpha": {
116
- "type": "number"
117
- },
118
- "lineArrow": {
119
- "type": "number"
120
- },
121
- "lineDash": {
122
- "type": "number"
123
- },
124
- "lineWidth": {
125
- "type": "number"
126
- },
127
- "pointsCount": {
128
- "type": "number"
129
- },
130
- "strokeColor": {
131
- "type": "string"
132
- }
133
- },
134
- "type": "object"
135
- },
136
- "visible": {
137
- "type": "boolean"
138
- }
139
- },
140
- "type": "object"
141
- },
142
- {
143
- "properties": {
144
- "height": {
145
- "type": "number"
146
- },
147
- "width": {
148
- "type": "number"
149
- },
150
- "x": {
151
- "type": "number"
152
- },
153
- "y": {
154
- "type": "number"
155
- }
156
- },
157
- "type": "object"
158
- },
159
- {
160
- "properties": {
161
- "id": {
162
- "type": "string"
163
- },
164
- "rotation": {
165
- "type": "number"
166
- },
167
- "translation": {
168
- "items": [
169
- {
170
- "type": "number"
171
- },
172
- {
173
- "type": "number"
174
- }
175
- ],
176
- "maxItems": 2,
177
- "minItems": 2,
178
- "type": "array"
179
- }
180
- },
181
- "type": "object"
182
- },
183
- {
184
- "properties": {
185
- "type": {
186
- "enum": [
187
- "square"
188
- ],
189
- "type": "string"
190
- }
191
- },
192
- "type": "object"
193
- }
194
- ]
195
- },
196
- {
197
- "allOf": [
198
- {
199
- "properties": {
200
- "locked": {
201
- "type": "boolean"
202
- },
203
- "style": {
204
- "properties": {
205
- "fillColor": {
206
- "type": "string"
207
- },
208
- "fontFamily": {
209
- "type": "string"
210
- },
211
- "globalAlpha": {
212
- "type": "number"
213
- },
214
- "lineArrow": {
215
- "type": "number"
216
- },
217
- "lineDash": {
218
- "type": "number"
219
- },
220
- "lineWidth": {
221
- "type": "number"
222
- },
223
- "pointsCount": {
224
- "type": "number"
225
- },
226
- "strokeColor": {
227
- "type": "string"
228
- }
229
- },
230
- "type": "object"
231
- },
232
- "visible": {
233
- "type": "boolean"
234
- }
235
- },
236
- "type": "object"
237
- },
238
- {
239
- "properties": {
240
- "height": {
241
- "type": "number"
242
- },
243
- "width": {
244
- "type": "number"
245
- },
246
- "x": {
247
- "type": "number"
248
- },
249
- "y": {
250
- "type": "number"
251
- }
252
- },
253
- "type": "object"
254
- },
255
- {
256
- "properties": {
257
- "src": {
258
- "type": "string"
259
- }
260
- },
261
- "type": "object"
262
- },
263
- {
264
- "properties": {
265
- "id": {
266
- "type": "string"
267
- },
268
- "rotation": {
269
- "type": "number"
270
- },
271
- "translation": {
272
- "items": [
273
- {
274
- "type": "number"
275
- },
276
- {
277
- "type": "number"
278
- }
279
- ],
280
- "maxItems": 2,
281
- "minItems": 2,
282
- "type": "array"
283
- }
284
- },
285
- "type": "object"
286
- },
287
- {
288
- "properties": {
289
- "type": {
290
- "enum": [
291
- "picture"
292
- ],
293
- "type": "string"
294
- }
295
- },
296
- "type": "object"
297
- }
298
- ]
299
- },
300
- {
301
- "allOf": [
302
- {
303
- "properties": {
304
- "locked": {
305
- "type": "boolean"
306
- },
307
- "style": {
308
- "properties": {
309
- "fillColor": {
310
- "type": "string"
311
- },
312
- "fontFamily": {
313
- "type": "string"
314
- },
315
- "globalAlpha": {
316
- "type": "number"
317
- },
318
- "lineArrow": {
319
- "type": "number"
320
- },
321
- "lineDash": {
322
- "type": "number"
323
- },
324
- "lineWidth": {
325
- "type": "number"
326
- },
327
- "pointsCount": {
328
- "type": "number"
329
- },
330
- "strokeColor": {
331
- "type": "string"
332
- }
333
- },
334
- "type": "object"
335
- },
336
- "visible": {
337
- "type": "boolean"
338
- }
339
- },
340
- "type": "object"
341
- },
342
- {
343
- "properties": {
344
- "height": {
345
- "type": "number"
346
- },
347
- "width": {
348
- "type": "number"
349
- },
350
- "x": {
351
- "type": "number"
352
- },
353
- "y": {
354
- "type": "number"
355
- }
356
- },
357
- "type": "object"
358
- },
359
- {
360
- "properties": {
361
- "fontSize": {
362
- "type": "number"
363
- },
364
- "value": {
365
- "items": {
366
- "type": "string"
367
- },
368
- "type": "array"
369
- }
370
- },
371
- "type": "object"
372
- },
373
- {
374
- "properties": {
375
- "id": {
376
- "type": "string"
377
- },
378
- "rotation": {
379
- "type": "number"
380
- },
381
- "translation": {
382
- "items": [
383
- {
384
- "type": "number"
385
- },
386
- {
387
- "type": "number"
388
- }
389
- ],
390
- "maxItems": 2,
391
- "minItems": 2,
392
- "type": "array"
393
- }
394
- },
395
- "type": "object"
396
- },
397
- {
398
- "properties": {
399
- "type": {
400
- "enum": [
401
- "text"
402
- ],
403
- "type": "string"
404
- }
405
- },
406
- "type": "object"
407
- }
408
- ]
409
- },
410
- {
411
- "allOf": [
412
- {
413
- "properties": {
414
- "locked": {
415
- "type": "boolean"
416
- },
417
- "style": {
418
- "properties": {
419
- "fillColor": {
420
- "type": "string"
421
- },
422
- "fontFamily": {
423
- "type": "string"
424
- },
425
- "globalAlpha": {
426
- "type": "number"
427
- },
428
- "lineArrow": {
429
- "type": "number"
430
- },
431
- "lineDash": {
432
- "type": "number"
433
- },
434
- "lineWidth": {
435
- "type": "number"
436
- },
437
- "pointsCount": {
438
- "type": "number"
439
- },
440
- "strokeColor": {
441
- "type": "string"
442
- }
443
- },
444
- "type": "object"
445
- },
446
- "visible": {
447
- "type": "boolean"
448
- }
449
- },
450
- "type": "object"
451
- },
452
- {
453
- "properties": {
454
- "points": {
455
- "items": [
456
- {
457
- "items": [
458
- {
459
- "type": "number"
460
- },
461
- {
462
- "type": "number"
463
- }
464
- ],
465
- "maxItems": 2,
466
- "minItems": 2,
467
- "type": "array"
468
- },
469
- {
470
- "items": [
471
- {
472
- "type": "number"
473
- },
474
- {
475
- "type": "number"
476
- }
477
- ],
478
- "maxItems": 2,
479
- "minItems": 2,
480
- "type": "array"
481
- }
482
- ],
483
- "maxItems": 2,
484
- "minItems": 2,
485
- "type": "array"
486
- }
487
- },
488
- "type": "object"
489
- },
490
- {
491
- "properties": {
492
- "id": {
493
- "type": "string"
494
- },
495
- "rotation": {
496
- "type": "number"
497
- },
498
- "translation": {
499
- "items": [
500
- {
501
- "type": "number"
502
- },
503
- {
504
- "type": "number"
505
- }
506
- ],
507
- "maxItems": 2,
508
- "minItems": 2,
509
- "type": "array"
510
- }
511
- },
512
- "type": "object"
513
- },
514
- {
515
- "properties": {
516
- "type": {
517
- "enum": [
518
- "line"
519
- ],
520
- "type": "string"
521
- }
522
- },
523
- "type": "object"
524
- }
525
- ]
526
- },
527
- {
528
- "allOf": [
529
- {
530
- "properties": {
531
- "locked": {
532
- "type": "boolean"
533
- },
534
- "style": {
535
- "properties": {
536
- "fillColor": {
537
- "type": "string"
538
- },
539
- "fontFamily": {
540
- "type": "string"
541
- },
542
- "globalAlpha": {
543
- "type": "number"
544
- },
545
- "lineArrow": {
546
- "type": "number"
547
- },
548
- "lineDash": {
549
- "type": "number"
550
- },
551
- "lineWidth": {
552
- "type": "number"
553
- },
554
- "pointsCount": {
555
- "type": "number"
556
- },
557
- "strokeColor": {
558
- "type": "string"
559
- }
560
- },
561
- "type": "object"
562
- },
563
- "visible": {
564
- "type": "boolean"
565
- }
566
- },
567
- "type": "object"
568
- },
569
- {
570
- "properties": {
571
- "points": {
572
- "items": {
573
- "items": [
574
- {
575
- "type": "number"
576
- },
577
- {
578
- "type": "number"
579
- }
580
- ],
581
- "maxItems": 2,
582
- "minItems": 2,
583
- "type": "array"
584
- },
585
- "type": "array"
586
- }
587
- },
588
- "type": "object"
589
- },
590
- {
591
- "properties": {
592
- "id": {
593
- "type": "string"
594
- },
595
- "rotation": {
596
- "type": "number"
597
- },
598
- "translation": {
599
- "items": [
600
- {
601
- "type": "number"
602
- },
603
- {
604
- "type": "number"
605
- }
606
- ],
607
- "maxItems": 2,
608
- "minItems": 2,
609
- "type": "array"
610
- }
611
- },
612
- "type": "object"
613
- },
614
- {
615
- "properties": {
616
- "type": {
617
- "enum": [
618
- "polygon"
619
- ],
620
- "type": "string"
621
- }
622
- },
623
- "type": "object"
624
- }
625
- ]
626
- },
627
- {
628
- "allOf": [
629
- {
630
- "properties": {
631
- "locked": {
632
- "type": "boolean"
633
- },
634
- "style": {
635
- "properties": {
636
- "fillColor": {
637
- "type": "string"
638
- },
639
- "fontFamily": {
640
- "type": "string"
641
- },
642
- "globalAlpha": {
643
- "type": "number"
644
- },
645
- "lineArrow": {
646
- "type": "number"
647
- },
648
- "lineDash": {
649
- "type": "number"
650
- },
651
- "lineWidth": {
652
- "type": "number"
653
- },
654
- "pointsCount": {
655
- "type": "number"
656
- },
657
- "strokeColor": {
658
- "type": "string"
659
- }
660
- },
661
- "type": "object"
662
- },
663
- "visible": {
664
- "type": "boolean"
665
- }
666
- },
667
- "type": "object"
668
- },
669
- {
670
- "properties": {
671
- "points": {
672
- "items": {
673
- "items": [
674
- {
675
- "type": "number"
676
- },
677
- {
678
- "type": "number"
679
- }
680
- ],
681
- "maxItems": 2,
682
- "minItems": 2,
683
- "type": "array"
684
- },
685
- "type": "array"
686
- }
687
- },
688
- "type": "object"
689
- },
690
- {
691
- "properties": {
692
- "id": {
693
- "type": "string"
694
- },
695
- "rotation": {
696
- "type": "number"
697
- },
698
- "translation": {
699
- "items": [
700
- {
701
- "type": "number"
702
- },
703
- {
704
- "type": "number"
705
- }
706
- ],
707
- "maxItems": 2,
708
- "minItems": 2,
709
- "type": "array"
710
- }
711
- },
712
- "type": "object"
713
- },
714
- {
715
- "properties": {
716
- "type": {
717
- "enum": [
718
- "curve"
719
- ],
720
- "type": "string"
721
- }
722
- },
723
- "type": "object"
724
- }
725
- ]
726
- },
727
- {
728
- "allOf": [
729
- {
730
- "properties": {
731
- "locked": {
732
- "type": "boolean"
733
- },
734
- "style": {
735
- "properties": {
736
- "fillColor": {
737
- "type": "string"
738
- },
739
- "fontFamily": {
740
- "type": "string"
741
- },
742
- "globalAlpha": {
743
- "type": "number"
744
- },
745
- "lineArrow": {
746
- "type": "number"
747
- },
748
- "lineDash": {
749
- "type": "number"
750
- },
751
- "lineWidth": {
752
- "type": "number"
753
- },
754
- "pointsCount": {
755
- "type": "number"
756
- },
757
- "strokeColor": {
758
- "type": "string"
759
- }
760
- },
761
- "type": "object"
762
- },
763
- "visible": {
764
- "type": "boolean"
765
- }
766
- },
767
- "type": "object"
768
- },
769
- {
770
- "properties": {
771
- "points": {
772
- "items": {
773
- "items": {
774
- "items": [
775
- {
776
- "type": "number"
777
- },
778
- {
779
- "type": "number"
780
- }
781
- ],
782
- "maxItems": 2,
783
- "minItems": 2,
784
- "type": "array"
785
- },
786
- "type": "array"
787
- },
788
- "type": "array"
789
- }
790
- },
791
- "type": "object"
792
- },
793
- {
794
- "properties": {
795
- "id": {
796
- "type": "string"
797
- },
798
- "rotation": {
799
- "type": "number"
800
- },
801
- "translation": {
802
- "items": [
803
- {
804
- "type": "number"
805
- },
806
- {
807
- "type": "number"
808
- }
809
- ],
810
- "maxItems": 2,
811
- "minItems": 2,
812
- "type": "array"
813
- }
814
- },
815
- "type": "object"
816
- },
817
- {
818
- "properties": {
819
- "type": {
820
- "enum": [
821
- "brush"
822
- ],
823
- "type": "string"
824
- }
825
- },
826
- "type": "object"
827
- }
828
- ]
829
- },
830
- {
831
- "allOf": [
832
- {
833
- "properties": {
834
- "locked": {
835
- "type": "boolean"
836
- },
837
- "style": {
838
- "properties": {
839
- "fillColor": {
840
- "type": "string"
841
- },
842
- "fontFamily": {
843
- "type": "string"
844
- },
845
- "globalAlpha": {
846
- "type": "number"
847
- },
848
- "lineArrow": {
849
- "type": "number"
850
- },
851
- "lineDash": {
852
- "type": "number"
853
- },
854
- "lineWidth": {
855
- "type": "number"
856
- },
857
- "pointsCount": {
858
- "type": "number"
859
- },
860
- "strokeColor": {
861
- "type": "string"
862
- }
863
- },
864
- "type": "object"
865
- },
866
- "visible": {
867
- "type": "boolean"
868
- }
869
- },
870
- "type": "object"
871
- },
872
- {
873
- "properties": {
874
- "radius": {
875
- "type": "number"
876
- },
877
- "x": {
878
- "type": "number"
879
- },
880
- "y": {
881
- "type": "number"
882
- }
883
- },
884
- "type": "object"
885
- },
886
- {
887
- "properties": {
888
- "id": {
889
- "type": "string"
890
- },
891
- "rotation": {
892
- "type": "number"
893
- },
894
- "translation": {
895
- "items": [
896
- {
897
- "type": "number"
898
- },
899
- {
900
- "type": "number"
901
- }
902
- ],
903
- "maxItems": 2,
904
- "minItems": 2,
905
- "type": "array"
906
- }
907
- },
908
- "type": "object"
909
- },
910
- {
911
- "properties": {
912
- "type": {
913
- "enum": [
914
- "circle"
915
- ],
916
- "type": "string"
917
- }
918
- },
919
- "type": "object"
920
- }
921
- ]
922
- },
923
- {
924
- "allOf": [
925
- {
926
- "properties": {
927
- "locked": {
928
- "type": "boolean"
929
- },
930
- "style": {
931
- "properties": {
932
- "fillColor": {
933
- "type": "string"
934
- },
935
- "fontFamily": {
936
- "type": "string"
937
- },
938
- "globalAlpha": {
939
- "type": "number"
940
- },
941
- "lineArrow": {
942
- "type": "number"
943
- },
944
- "lineDash": {
945
- "type": "number"
946
- },
947
- "lineWidth": {
948
- "type": "number"
949
- },
950
- "pointsCount": {
951
- "type": "number"
952
- },
953
- "strokeColor": {
954
- "type": "string"
955
- }
956
- },
957
- "type": "object"
958
- },
959
- "visible": {
960
- "type": "boolean"
961
- }
962
- },
963
- "type": "object"
964
- },
965
- {
966
- "properties": {
967
- "radiusX": {
968
- "type": "number"
969
- },
970
- "radiusY": {
971
- "type": "number"
972
- },
973
- "x": {
974
- "type": "number"
975
- },
976
- "y": {
977
- "type": "number"
978
- }
979
- },
980
- "type": "object"
981
- },
982
- {
983
- "properties": {
984
- "id": {
985
- "type": "string"
986
- },
987
- "rotation": {
988
- "type": "number"
989
- },
990
- "translation": {
991
- "items": [
992
- {
993
- "type": "number"
994
- },
995
- {
996
- "type": "number"
997
- }
998
- ],
999
- "maxItems": 2,
1000
- "minItems": 2,
1001
- "type": "array"
1002
- }
1003
- },
1004
- "type": "object"
1005
- },
1006
- {
1007
- "properties": {
1008
- "type": {
1009
- "enum": [
1010
- "ellipse"
1011
- ],
1012
- "type": "string"
1013
- }
1014
- },
1015
- "type": "object"
1016
- }
1017
- ]
1018
- }
1019
- ]
1020
- }
1021
-