@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.
- package/README.md +5 -5
- package/dist/components/App.js +236 -423
- package/dist/components/Canvas.js +120 -139
- package/dist/components/common/Button.js +41 -50
- package/dist/components/common/Loading.js +24 -33
- package/dist/components/common/Modal.js +18 -17
- package/dist/components/common/Panel.js +20 -28
- package/dist/components/common/Snackbar.js +31 -38
- package/dist/components/settings/ColorField.js +59 -68
- package/dist/components/settings/DeleteButton.js +10 -9
- package/dist/components/settings/FontFamilyField.js +25 -20
- package/dist/components/settings/LayoutButton.js +11 -9
- package/dist/components/settings/Layouts.js +111 -111
- package/dist/components/settings/LineArrowField.js +25 -22
- package/dist/components/settings/LineTypeField.js +23 -20
- package/dist/components/settings/PointsNumberField.js +14 -13
- package/dist/components/settings/RangeField.js +35 -47
- package/dist/components/settings/SelectField.js +34 -43
- package/dist/components/settings/SettingsBar.js +100 -121
- package/dist/components/settings/ToggleField.js +18 -25
- package/dist/components/toolbox/EditTextBox.js +62 -49
- package/dist/components/toolbox/LoadFileTool.js +19 -21
- package/dist/components/toolbox/MenuGroup.js +66 -100
- package/dist/components/toolbox/PictureUrlInput.js +33 -62
- package/dist/components/toolbox/Tool.js +13 -13
- package/dist/components/toolbox/Toolbar.js +79 -113
- package/dist/components/toolbox/ToolbarGroup.js +60 -63
- package/dist/constants/app.js +51 -0
- package/dist/constants/icons.js +42 -48
- package/dist/constants/loading.js +8 -0
- package/dist/constants/shapes.js +10 -8
- package/dist/constants/snackbar.js +7 -15
- package/dist/constants/style.js +21 -18
- package/dist/constants/tools.js +99 -103
- package/dist/hooks/useComponent.js +15 -20
- package/dist/hooks/useDoubleClick.js +12 -12
- package/dist/hooks/useDrag.js +24 -32
- package/dist/hooks/useDrawableCanvas.js +106 -122
- package/dist/hooks/useKeyboard.js +80 -63
- package/dist/hooks/useResizeObserver.js +18 -16
- package/dist/hooks/useShapes.js +92 -144
- package/dist/hooks/useSnackbar.js +28 -58
- package/dist/styles.css +16 -13
- package/dist/types/Mode.js +1 -13
- package/dist/types/Shapes.js +1 -17
- package/dist/types/snackbar.js +5 -0
- package/dist/types/tools.js +1 -18
- package/dist/utils/canvas.js +49 -0
- package/dist/utils/data.js +15 -274
- package/dist/utils/dom.js +12 -0
- package/dist/utils/file.js +75 -120
- package/dist/utils/intersect.js +54 -131
- package/dist/utils/migration.js +59 -0
- package/dist/utils/selection.js +18 -20
- package/dist/utils/shapes/brush.js +135 -0
- package/dist/utils/shapes/circle.js +93 -0
- package/dist/utils/shapes/curve.js +55 -0
- package/dist/utils/shapes/default.js +73 -0
- package/dist/utils/shapes/ellipse.js +101 -0
- package/dist/utils/shapes/grid.js +36 -0
- package/dist/utils/shapes/index.js +341 -0
- package/dist/utils/shapes/line.js +179 -0
- package/dist/utils/shapes/picture.js +88 -0
- package/dist/utils/shapes/polygon.js +69 -0
- package/dist/utils/shapes/rectangle.js +100 -0
- package/dist/utils/shapes/text.js +128 -0
- package/dist/utils/shapes/triangle.js +24 -0
- package/dist/utils/string.js +10 -16
- package/dist/utils/style.js +11 -13
- package/dist/utils/toolbar.js +35 -49
- package/dist/utils/transform.js +47 -339
- package/dist/utils/trigo.js +42 -0
- package/package.json +6 -6
- package/Changelog.md +0 -119
- package/dist/types/keyboard.js +0 -28
- package/dist/utils/draw.js +0 -461
- package/dist/utils/shapeData.js +0 -173
package/dist/utils/shapeData.js
DELETED
|
@@ -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;
|