@yorab/react-paint 0.6.4 → 0.7.1

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 (77) hide show
  1. package/README.md +5 -5
  2. package/dist/components/App.js +236 -423
  3. package/dist/components/Canvas.js +120 -139
  4. package/dist/components/common/Button.js +41 -50
  5. package/dist/components/common/Loading.js +24 -33
  6. package/dist/components/common/Modal.js +18 -17
  7. package/dist/components/common/Panel.js +20 -28
  8. package/dist/components/common/Snackbar.js +31 -38
  9. package/dist/components/settings/ColorField.js +59 -68
  10. package/dist/components/settings/DeleteButton.js +10 -9
  11. package/dist/components/settings/FontFamilyField.js +25 -20
  12. package/dist/components/settings/LayoutButton.js +11 -9
  13. package/dist/components/settings/Layouts.js +111 -111
  14. package/dist/components/settings/LineArrowField.js +25 -22
  15. package/dist/components/settings/LineTypeField.js +23 -20
  16. package/dist/components/settings/PointsNumberField.js +14 -13
  17. package/dist/components/settings/RangeField.js +35 -47
  18. package/dist/components/settings/SelectField.js +34 -43
  19. package/dist/components/settings/SettingsBar.js +100 -121
  20. package/dist/components/settings/ToggleField.js +18 -25
  21. package/dist/components/toolbox/EditTextBox.js +62 -49
  22. package/dist/components/toolbox/LoadFileTool.js +19 -21
  23. package/dist/components/toolbox/MenuGroup.js +66 -100
  24. package/dist/components/toolbox/PictureUrlInput.js +33 -62
  25. package/dist/components/toolbox/Tool.js +13 -13
  26. package/dist/components/toolbox/Toolbar.js +79 -113
  27. package/dist/components/toolbox/ToolbarGroup.js +60 -63
  28. package/dist/constants/app.js +51 -0
  29. package/dist/constants/icons.js +42 -48
  30. package/dist/constants/loading.js +8 -0
  31. package/dist/constants/shapes.js +10 -8
  32. package/dist/constants/snackbar.js +7 -15
  33. package/dist/constants/style.js +21 -18
  34. package/dist/constants/tools.js +99 -103
  35. package/dist/hooks/useComponent.js +15 -20
  36. package/dist/hooks/useDoubleClick.js +12 -12
  37. package/dist/hooks/useDrag.js +24 -32
  38. package/dist/hooks/useDrawableCanvas.js +106 -122
  39. package/dist/hooks/useKeyboard.js +80 -63
  40. package/dist/hooks/useResizeObserver.js +18 -16
  41. package/dist/hooks/useShapes.js +92 -144
  42. package/dist/hooks/useSnackbar.js +28 -58
  43. package/dist/styles.css +16 -13
  44. package/dist/types/Mode.js +1 -13
  45. package/dist/types/Shapes.js +1 -17
  46. package/dist/types/snackbar.js +5 -0
  47. package/dist/types/tools.js +1 -18
  48. package/dist/utils/canvas.js +49 -0
  49. package/dist/utils/data.js +15 -274
  50. package/dist/utils/dom.js +12 -0
  51. package/dist/utils/file.js +75 -120
  52. package/dist/utils/intersect.js +54 -131
  53. package/dist/utils/migration.js +59 -0
  54. package/dist/utils/selection.js +18 -20
  55. package/dist/utils/shapes/brush.js +135 -0
  56. package/dist/utils/shapes/circle.js +93 -0
  57. package/dist/utils/shapes/curve.js +55 -0
  58. package/dist/utils/shapes/default.js +73 -0
  59. package/dist/utils/shapes/ellipse.js +101 -0
  60. package/dist/utils/shapes/grid.js +36 -0
  61. package/dist/utils/shapes/index.js +341 -0
  62. package/dist/utils/shapes/line.js +179 -0
  63. package/dist/utils/shapes/picture.js +88 -0
  64. package/dist/utils/shapes/polygon.js +69 -0
  65. package/dist/utils/shapes/rectangle.js +100 -0
  66. package/dist/utils/shapes/text.js +128 -0
  67. package/dist/utils/shapes/triangle.js +24 -0
  68. package/dist/utils/string.js +10 -16
  69. package/dist/utils/style.js +11 -13
  70. package/dist/utils/toolbar.js +35 -49
  71. package/dist/utils/transform.js +47 -339
  72. package/dist/utils/trigo.js +42 -0
  73. package/package.json +6 -6
  74. package/Changelog.md +0 -119
  75. package/dist/types/keyboard.js +0 -28
  76. package/dist/utils/draw.js +0 -461
  77. package/dist/utils/shapeData.js +0 -173
@@ -1,173 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.getShapeInfos = void 0;
9
-
10
- var _fp = _interopRequireDefault(require("lodash/fp"));
11
-
12
- var getLineBorder = function getLineBorder(line, selectionPadding) {
13
- var x = Math.min(line.points[0][0], line.points[1][0]) - selectionPadding;
14
- var width = Math.abs(line.points[0][0] - line.points[1][0]) + selectionPadding * 2;
15
- var y = Math.min(line.points[0][1], line.points[1][1]) - selectionPadding;
16
- var height = Math.abs(line.points[0][1] - line.points[1][1]) + selectionPadding * 2;
17
- return {
18
- x: x,
19
- width: width,
20
- y: y,
21
- height: height
22
- };
23
- };
24
-
25
- var getBrushBorder = function getBrushBorder(brush, selectionPadding) {
26
- var brushPoints = _fp["default"].flatMap(function (points) {
27
- return points;
28
- }, brush.points);
29
-
30
- var minX = _fp["default"].flow(_fp["default"].map(function (point) {
31
- return point[0];
32
- }), _fp["default"].min, _fp["default"].add(-selectionPadding))(brushPoints);
33
-
34
- var maxX = _fp["default"].flow(_fp["default"].map(function (point) {
35
- return point[0];
36
- }), _fp["default"].max, _fp["default"].add(selectionPadding))(brushPoints);
37
-
38
- var minY = _fp["default"].flow(_fp["default"].map(function (point) {
39
- return point[1];
40
- }), _fp["default"].min, _fp["default"].add(-selectionPadding))(brushPoints);
41
-
42
- var maxY = _fp["default"].flow(_fp["default"].map(function (point) {
43
- return point[1];
44
- }), _fp["default"].max, _fp["default"].add(selectionPadding))(brushPoints);
45
-
46
- return {
47
- x: minX,
48
- width: maxX - minX,
49
- y: minY,
50
- height: maxY - minY
51
- };
52
- };
53
-
54
- var getPolygonBorder = function getPolygonBorder(polygon, selectionPadding) {
55
- var minX = _fp["default"].flow(_fp["default"].map(function (point) {
56
- return point[0];
57
- }), _fp["default"].min, _fp["default"].add(-selectionPadding))(polygon.points);
58
-
59
- var maxX = _fp["default"].flow(_fp["default"].map(function (point) {
60
- return point[0];
61
- }), _fp["default"].max, _fp["default"].add(selectionPadding))(polygon.points);
62
-
63
- var minY = _fp["default"].flow(_fp["default"].map(function (point) {
64
- return point[1];
65
- }), _fp["default"].min, _fp["default"].add(-selectionPadding))(polygon.points);
66
-
67
- var maxY = _fp["default"].flow(_fp["default"].map(function (point) {
68
- return point[1];
69
- }), _fp["default"].max, _fp["default"].add(selectionPadding))(polygon.points);
70
-
71
- return {
72
- x: minX,
73
- width: maxX - minX,
74
- y: minY,
75
- height: maxY - minY
76
- };
77
- };
78
-
79
- var getCurveBorder = getPolygonBorder;
80
-
81
- var getRectBorder = function getRectBorder(rect, selectionPadding) {
82
- return {
83
- x: rect.x - selectionPadding,
84
- width: rect.width + selectionPadding * 2,
85
- y: rect.y - selectionPadding,
86
- height: rect.height + selectionPadding * 2
87
- };
88
- };
89
-
90
- var getTextBorder = function getTextBorder(text, selectionPadding) {
91
- return {
92
- x: text.x - selectionPadding,
93
- width: text.width + selectionPadding * 2,
94
- y: text.y - selectionPadding,
95
- height: text.height + selectionPadding * 2
96
- };
97
- };
98
-
99
- var getPictureBorder = function getPictureBorder(picture, selectionPadding) {
100
- return getRectBorder(picture, selectionPadding);
101
- };
102
-
103
- var getCircleBorder = function getCircleBorder(circle, selectionPadding) {
104
- return {
105
- x: circle.x - circle.radius - selectionPadding,
106
- width: (circle.radius + selectionPadding) * 2,
107
- y: circle.y - circle.radius - selectionPadding,
108
- height: (circle.radius + selectionPadding) * 2
109
- };
110
- };
111
-
112
- var getEllipseBorder = function getEllipseBorder(ellipse, selectionPadding) {
113
- return {
114
- x: ellipse.x - ellipse.radiusX - selectionPadding,
115
- width: (ellipse.radiusX + selectionPadding) * 2,
116
- y: ellipse.y - ellipse.radiusY - selectionPadding,
117
- height: (ellipse.radiusY + selectionPadding) * 2
118
- };
119
- };
120
-
121
- var getShapeBorders = function getShapeBorders(marker, selectionPadding) {
122
- switch (marker.type) {
123
- case 'brush':
124
- return getBrushBorder(marker, selectionPadding);
125
-
126
- case 'line':
127
- return getLineBorder(marker, selectionPadding);
128
-
129
- case 'polygon':
130
- return getPolygonBorder(marker, selectionPadding);
131
-
132
- case 'curve':
133
- return getCurveBorder(marker, selectionPadding);
134
-
135
- case 'circle':
136
- return getCircleBorder(marker, selectionPadding);
137
-
138
- case 'ellipse':
139
- return getEllipseBorder(marker, selectionPadding);
140
-
141
- case 'rect':
142
- case 'square':
143
- return getRectBorder(marker, selectionPadding);
144
-
145
- case 'text':
146
- return getTextBorder(marker, selectionPadding);
147
-
148
- case 'picture':
149
- return getPictureBorder(marker, selectionPadding);
150
- }
151
-
152
- return {
153
- x: 0,
154
- y: 0,
155
- width: 0,
156
- height: 0
157
- };
158
- };
159
-
160
- var getShapeCenter = function getShapeCenter(borders) {
161
- return [borders.x + borders.width / 2, borders.y + borders.height / 2];
162
- };
163
-
164
- var getShapeInfos = function getShapeInfos(shape, selectionPadding) {
165
- var borders = getShapeBorders(shape, selectionPadding);
166
- var center = getShapeCenter(borders);
167
- return {
168
- borders: borders,
169
- center: center
170
- };
171
- };
172
-
173
- exports.getShapeInfos = getShapeInfos;