@yorab/react-paint 0.6.5 → 0.6.6
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 +2 -0
- package/dist/components/App.js +224 -384
- package/dist/components/Canvas.js +104 -114
- package/dist/components/common/Button.js +41 -50
- package/dist/components/common/Loading.js +21 -33
- package/dist/components/common/Modal.js +18 -17
- package/dist/components/common/Panel.js +20 -24
- package/dist/components/common/Snackbar.js +27 -34
- package/dist/components/settings/ColorField.js +59 -68
- package/dist/components/settings/DeleteButton.js +10 -9
- package/dist/components/settings/FontFamilyField.js +24 -19
- package/dist/components/settings/LayoutButton.js +11 -9
- package/dist/components/settings/Layouts.js +93 -103
- 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 +95 -118
- package/dist/components/settings/ToggleField.js +18 -25
- package/dist/components/toolbox/EditTextBox.js +53 -42
- package/dist/components/toolbox/LoadFileTool.js +19 -21
- package/dist/components/toolbox/MenuGroup.js +60 -96
- package/dist/components/toolbox/PictureUrlInput.js +33 -62
- package/dist/components/toolbox/Tool.js +13 -13
- package/dist/components/toolbox/Toolbar.js +74 -106
- package/dist/components/toolbox/ToolbarGroup.js +41 -57
- package/dist/constants/icons.js +43 -43
- package/dist/constants/shapes.js +6 -6
- package/dist/constants/snackbar.js +3 -3
- package/dist/constants/style.js +13 -13
- package/dist/constants/tools.js +80 -80
- package/dist/hooks/useComponent.js +12 -19
- package/dist/hooks/useDoubleClick.js +12 -12
- package/dist/hooks/useDrag.js +24 -32
- package/dist/hooks/useDrawableCanvas.js +86 -100
- package/dist/hooks/useKeyboard.js +26 -36
- package/dist/hooks/useResizeObserver.js +18 -16
- package/dist/hooks/useShapes.js +91 -143
- package/dist/hooks/useSnackbar.js +28 -58
- package/dist/styles.css +55 -55
- package/dist/types/Mode.js +1 -1
- package/dist/types/Shapes.js +1 -1
- package/dist/types/keyboard.js +2 -2
- package/dist/types/tools.js +1 -1
- package/dist/utils/data.js +91 -107
- package/dist/utils/draw.js +116 -146
- package/dist/utils/file.js +69 -119
- package/dist/utils/intersect.js +57 -97
- package/dist/utils/selection.js +12 -12
- package/dist/utils/shapeData.js +33 -51
- package/dist/utils/string.js +10 -16
- package/dist/utils/style.js +1 -1
- package/dist/utils/toolbar.js +26 -38
- package/dist/utils/transform.js +183 -239
- package/package.json +6 -5
- package/Changelog.md +0 -123
package/dist/utils/shapeData.js
CHANGED
|
@@ -9,39 +9,29 @@ exports.getShapeInfos = void 0;
|
|
|
9
9
|
|
|
10
10
|
var _fp = _interopRequireDefault(require("lodash/fp"));
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
12
|
+
const getLineBorder = (line, selectionPadding) => {
|
|
13
|
+
const x = Math.min(line.points[0][0], line.points[1][0]) - selectionPadding;
|
|
14
|
+
const width = Math.abs(line.points[0][0] - line.points[1][0]) + selectionPadding * 2;
|
|
15
|
+
const y = Math.min(line.points[0][1], line.points[1][1]) - selectionPadding;
|
|
16
|
+
const height = Math.abs(line.points[0][1] - line.points[1][1]) + selectionPadding * 2;
|
|
17
17
|
return {
|
|
18
|
-
x
|
|
19
|
-
width
|
|
20
|
-
y
|
|
21
|
-
height
|
|
18
|
+
x,
|
|
19
|
+
width,
|
|
20
|
+
y,
|
|
21
|
+
height
|
|
22
22
|
};
|
|
23
23
|
};
|
|
24
24
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
return points;
|
|
28
|
-
}, brush.points);
|
|
25
|
+
const getBrushBorder = (brush, selectionPadding) => {
|
|
26
|
+
const brushPoints = _fp.default.flatMap(points => points, brush.points);
|
|
29
27
|
|
|
30
|
-
|
|
31
|
-
return point[0];
|
|
32
|
-
}), _fp["default"].min, _fp["default"].add(-selectionPadding))(brushPoints);
|
|
28
|
+
const minX = _fp.default.flow(_fp.default.map(point => point[0]), _fp.default.min, _fp.default.add(-selectionPadding))(brushPoints);
|
|
33
29
|
|
|
34
|
-
|
|
35
|
-
return point[0];
|
|
36
|
-
}), _fp["default"].max, _fp["default"].add(selectionPadding))(brushPoints);
|
|
30
|
+
const maxX = _fp.default.flow(_fp.default.map(point => point[0]), _fp.default.max, _fp.default.add(selectionPadding))(brushPoints);
|
|
37
31
|
|
|
38
|
-
|
|
39
|
-
return point[1];
|
|
40
|
-
}), _fp["default"].min, _fp["default"].add(-selectionPadding))(brushPoints);
|
|
32
|
+
const minY = _fp.default.flow(_fp.default.map(point => point[1]), _fp.default.min, _fp.default.add(-selectionPadding))(brushPoints);
|
|
41
33
|
|
|
42
|
-
|
|
43
|
-
return point[1];
|
|
44
|
-
}), _fp["default"].max, _fp["default"].add(selectionPadding))(brushPoints);
|
|
34
|
+
const maxY = _fp.default.flow(_fp.default.map(point => point[1]), _fp.default.max, _fp.default.add(selectionPadding))(brushPoints);
|
|
45
35
|
|
|
46
36
|
return {
|
|
47
37
|
x: minX,
|
|
@@ -51,22 +41,14 @@ var getBrushBorder = function getBrushBorder(brush, selectionPadding) {
|
|
|
51
41
|
};
|
|
52
42
|
};
|
|
53
43
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
return point[0];
|
|
57
|
-
}), _fp["default"].min, _fp["default"].add(-selectionPadding))(polygon.points);
|
|
44
|
+
const getPolygonBorder = (polygon, selectionPadding) => {
|
|
45
|
+
const minX = _fp.default.flow(_fp.default.map(point => point[0]), _fp.default.min, _fp.default.add(-selectionPadding))(polygon.points);
|
|
58
46
|
|
|
59
|
-
|
|
60
|
-
return point[0];
|
|
61
|
-
}), _fp["default"].max, _fp["default"].add(selectionPadding))(polygon.points);
|
|
47
|
+
const maxX = _fp.default.flow(_fp.default.map(point => point[0]), _fp.default.max, _fp.default.add(selectionPadding))(polygon.points);
|
|
62
48
|
|
|
63
|
-
|
|
64
|
-
return point[1];
|
|
65
|
-
}), _fp["default"].min, _fp["default"].add(-selectionPadding))(polygon.points);
|
|
49
|
+
const minY = _fp.default.flow(_fp.default.map(point => point[1]), _fp.default.min, _fp.default.add(-selectionPadding))(polygon.points);
|
|
66
50
|
|
|
67
|
-
|
|
68
|
-
return point[1];
|
|
69
|
-
}), _fp["default"].max, _fp["default"].add(selectionPadding))(polygon.points);
|
|
51
|
+
const maxY = _fp.default.flow(_fp.default.map(point => point[1]), _fp.default.max, _fp.default.add(selectionPadding))(polygon.points);
|
|
70
52
|
|
|
71
53
|
return {
|
|
72
54
|
x: minX,
|
|
@@ -76,9 +58,9 @@ var getPolygonBorder = function getPolygonBorder(polygon, selectionPadding) {
|
|
|
76
58
|
};
|
|
77
59
|
};
|
|
78
60
|
|
|
79
|
-
|
|
61
|
+
const getCurveBorder = getPolygonBorder;
|
|
80
62
|
|
|
81
|
-
|
|
63
|
+
const getRectBorder = (rect, selectionPadding) => {
|
|
82
64
|
return {
|
|
83
65
|
x: rect.x - selectionPadding,
|
|
84
66
|
width: rect.width + selectionPadding * 2,
|
|
@@ -87,7 +69,7 @@ var getRectBorder = function getRectBorder(rect, selectionPadding) {
|
|
|
87
69
|
};
|
|
88
70
|
};
|
|
89
71
|
|
|
90
|
-
|
|
72
|
+
const getTextBorder = (text, selectionPadding) => {
|
|
91
73
|
return {
|
|
92
74
|
x: text.x - selectionPadding,
|
|
93
75
|
width: text.width + selectionPadding * 2,
|
|
@@ -96,11 +78,11 @@ var getTextBorder = function getTextBorder(text, selectionPadding) {
|
|
|
96
78
|
};
|
|
97
79
|
};
|
|
98
80
|
|
|
99
|
-
|
|
81
|
+
const getPictureBorder = (picture, selectionPadding) => {
|
|
100
82
|
return getRectBorder(picture, selectionPadding);
|
|
101
83
|
};
|
|
102
84
|
|
|
103
|
-
|
|
85
|
+
const getCircleBorder = (circle, selectionPadding) => {
|
|
104
86
|
return {
|
|
105
87
|
x: circle.x - circle.radius - selectionPadding,
|
|
106
88
|
width: (circle.radius + selectionPadding) * 2,
|
|
@@ -109,7 +91,7 @@ var getCircleBorder = function getCircleBorder(circle, selectionPadding) {
|
|
|
109
91
|
};
|
|
110
92
|
};
|
|
111
93
|
|
|
112
|
-
|
|
94
|
+
const getEllipseBorder = (ellipse, selectionPadding) => {
|
|
113
95
|
return {
|
|
114
96
|
x: ellipse.x - ellipse.radiusX - selectionPadding,
|
|
115
97
|
width: (ellipse.radiusX + selectionPadding) * 2,
|
|
@@ -118,7 +100,7 @@ var getEllipseBorder = function getEllipseBorder(ellipse, selectionPadding) {
|
|
|
118
100
|
};
|
|
119
101
|
};
|
|
120
102
|
|
|
121
|
-
|
|
103
|
+
const getShapeBorders = (marker, selectionPadding) => {
|
|
122
104
|
switch (marker.type) {
|
|
123
105
|
case 'brush':
|
|
124
106
|
return getBrushBorder(marker, selectionPadding);
|
|
@@ -157,16 +139,16 @@ var getShapeBorders = function getShapeBorders(marker, selectionPadding) {
|
|
|
157
139
|
};
|
|
158
140
|
};
|
|
159
141
|
|
|
160
|
-
|
|
142
|
+
const getShapeCenter = borders => {
|
|
161
143
|
return [borders.x + borders.width / 2, borders.y + borders.height / 2];
|
|
162
144
|
};
|
|
163
145
|
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
146
|
+
const getShapeInfos = (shape, selectionPadding) => {
|
|
147
|
+
const borders = getShapeBorders(shape, selectionPadding);
|
|
148
|
+
const center = getShapeCenter(borders);
|
|
167
149
|
return {
|
|
168
|
-
borders
|
|
169
|
-
center
|
|
150
|
+
borders,
|
|
151
|
+
center
|
|
170
152
|
};
|
|
171
153
|
};
|
|
172
154
|
|
package/dist/utils/string.js
CHANGED
|
@@ -9,34 +9,28 @@ exports.decodeHtmlEntities = exports.convertStringArrayToDivContent = exports.co
|
|
|
9
9
|
|
|
10
10
|
var _fp = _interopRequireDefault(require("lodash/fp"));
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
const stripBrRegexp = /<br(\/?\s?)>/g;
|
|
13
|
+
const stripDivRegexp = /<(\/)?div(\/?\s?)>/g;
|
|
14
14
|
|
|
15
|
-
|
|
16
|
-
return toConvert.map(
|
|
17
|
-
return "<div>".concat(val === '' ? '<br/>' : val, "</div>");
|
|
18
|
-
}).join('');
|
|
15
|
+
const convertStringArrayToDivContent = toConvert => {
|
|
16
|
+
return toConvert.map(val => "<div>".concat(val === '' ? '<br/>' : val, "</div>")).join('');
|
|
19
17
|
};
|
|
20
18
|
|
|
21
19
|
exports.convertStringArrayToDivContent = convertStringArrayToDivContent;
|
|
22
20
|
|
|
23
|
-
|
|
24
|
-
|
|
21
|
+
const decodeHtmlEntities = html => {
|
|
22
|
+
const textareaElement = document.createElement('textarea');
|
|
25
23
|
textareaElement.innerHTML = html;
|
|
26
24
|
return textareaElement.value;
|
|
27
25
|
};
|
|
28
26
|
|
|
29
27
|
exports.decodeHtmlEntities = decodeHtmlEntities;
|
|
30
28
|
|
|
31
|
-
|
|
32
|
-
return _fp
|
|
33
|
-
|
|
34
|
-
}, function (divContent) {
|
|
35
|
-
return divContent.split('<div>');
|
|
36
|
-
}, _fp["default"].flatMap(function (val) {
|
|
37
|
-
var newVal = val.replaceAll(stripDivRegexp, '');
|
|
29
|
+
const convertDivContentToStringArray = toConvert => {
|
|
30
|
+
return _fp.default.flow(divContent => decodeHtmlEntities(divContent), divContent => divContent.split('<div>'), _fp.default.flatMap(val => {
|
|
31
|
+
const newVal = val.replaceAll(stripDivRegexp, '');
|
|
38
32
|
return newVal === '' ? undefined : newVal.replaceAll(stripBrRegexp, '');
|
|
39
|
-
}), _fp
|
|
33
|
+
}), _fp.default.reject(_fp.default.isUndefined))(toConvert);
|
|
40
34
|
};
|
|
41
35
|
|
|
42
36
|
exports.convertDivContentToStringArray = convertDivContentToStringArray;
|
package/dist/utils/style.js
CHANGED
|
@@ -9,7 +9,7 @@ var _Shapes = require("../types/Shapes");
|
|
|
9
9
|
|
|
10
10
|
var _icons = require("../constants/icons");
|
|
11
11
|
|
|
12
|
-
|
|
12
|
+
const getShapePicture = shape => {
|
|
13
13
|
switch (shape) {
|
|
14
14
|
case _Shapes.ShapeEnum.brush:
|
|
15
15
|
return _icons.brushIcon;
|
package/dist/utils/toolbar.js
CHANGED
|
@@ -7,86 +7,74 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
});
|
|
8
8
|
exports.sanitizeTools = exports.getCurrentStructure = void 0;
|
|
9
9
|
|
|
10
|
-
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
11
|
-
|
|
12
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
13
|
-
|
|
14
10
|
var _Shapes = require("../types/Shapes");
|
|
15
11
|
|
|
16
12
|
var _fp = _interopRequireDefault(require("lodash/fp"));
|
|
17
13
|
|
|
18
14
|
var _tools = require("../constants/tools");
|
|
19
15
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
var getCurrentStructure = function getCurrentStructure(availableTools, defaultStructure) {
|
|
25
|
-
return _fp["default"].flow(_fp["default"].flatMap(function (group) {
|
|
26
|
-
if (!_fp["default"].isObject(group)) {
|
|
27
|
-
return _fp["default"].filter({
|
|
16
|
+
const getCurrentStructure = (availableTools, defaultStructure) => {
|
|
17
|
+
return _fp.default.flow(_fp.default.flatMap(group => {
|
|
18
|
+
if (!_fp.default.isObject(group)) {
|
|
19
|
+
return _fp.default.filter({
|
|
28
20
|
type: group
|
|
29
21
|
}, availableTools);
|
|
30
22
|
}
|
|
31
23
|
|
|
32
|
-
|
|
33
|
-
return _fp["default"].includes(tool.type, group.toolsType);
|
|
34
|
-
}, availableTools);
|
|
24
|
+
const toolsType = _fp.default.filter(tool => _fp.default.includes(tool.type, group.toolsType), availableTools);
|
|
35
25
|
|
|
36
26
|
if (!toolsType) return null;
|
|
37
|
-
return
|
|
38
|
-
toolsType
|
|
39
|
-
}
|
|
40
|
-
}), _fp
|
|
27
|
+
return { ...group,
|
|
28
|
+
toolsType
|
|
29
|
+
};
|
|
30
|
+
}), _fp.default.compact)(defaultStructure);
|
|
41
31
|
};
|
|
42
32
|
|
|
43
33
|
exports.getCurrentStructure = getCurrentStructure;
|
|
44
34
|
|
|
45
|
-
|
|
46
|
-
|
|
35
|
+
const sanitizeTools = function (tools) {
|
|
36
|
+
let withPicture = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
47
37
|
|
|
48
|
-
|
|
49
|
-
if (_fp
|
|
38
|
+
const customizer = (objValue, srcValue) => {
|
|
39
|
+
if (_fp.default.isArray(objValue)) {
|
|
50
40
|
return srcValue;
|
|
51
41
|
}
|
|
52
42
|
};
|
|
53
43
|
|
|
54
|
-
return _fp
|
|
55
|
-
if (!_fp
|
|
44
|
+
return _fp.default.flow(_fp.default.map(tool => {
|
|
45
|
+
if (!_fp.default.isObject(tool)) return null;
|
|
56
46
|
|
|
57
|
-
switch (_fp
|
|
47
|
+
switch (_fp.default.get('type', tool)) {
|
|
58
48
|
case _Shapes.ShapeEnum.brush:
|
|
59
|
-
return _fp
|
|
49
|
+
return _fp.default.mergeWith(customizer, _tools.DEFAULT_SHAPE_BRUSH, tool);
|
|
60
50
|
|
|
61
51
|
case _Shapes.ShapeEnum.circle:
|
|
62
|
-
return _fp
|
|
52
|
+
return _fp.default.mergeWith(customizer, _tools.DEFAULT_SHAPE_CIRCLE, tool);
|
|
63
53
|
|
|
64
54
|
case _Shapes.ShapeEnum.curve:
|
|
65
|
-
return _fp
|
|
55
|
+
return _fp.default.mergeWith(customizer, _tools.DEFAULT_SHAPE_CURVE, tool);
|
|
66
56
|
|
|
67
57
|
case _Shapes.ShapeEnum.ellipse:
|
|
68
|
-
return _fp
|
|
58
|
+
return _fp.default.mergeWith(customizer, _tools.DEFAULT_SHAPE_ELLIPSE, tool);
|
|
69
59
|
|
|
70
60
|
case _Shapes.ShapeEnum.line:
|
|
71
|
-
return _fp
|
|
61
|
+
return _fp.default.mergeWith(customizer, _tools.DEFAULT_SHAPE_LINE, tool);
|
|
72
62
|
|
|
73
63
|
case _Shapes.ShapeEnum.polygon:
|
|
74
|
-
return _fp
|
|
64
|
+
return _fp.default.mergeWith(customizer, _tools.DEFAULT_SHAPE_POLYGON, tool);
|
|
75
65
|
|
|
76
66
|
case _Shapes.ShapeEnum.rect:
|
|
77
|
-
return _fp
|
|
67
|
+
return _fp.default.mergeWith(customizer, _tools.DEFAULT_SHAPE_RECT, tool);
|
|
78
68
|
|
|
79
69
|
case _Shapes.ShapeEnum.square:
|
|
80
|
-
return _fp
|
|
70
|
+
return _fp.default.mergeWith(customizer, _tools.DEFAULT_SHAPE_SQUARE, tool);
|
|
81
71
|
|
|
82
72
|
case _Shapes.ShapeEnum.text:
|
|
83
|
-
return _fp
|
|
73
|
+
return _fp.default.mergeWith(customizer, _tools.DEFAULT_SHAPE_TEXT, tool);
|
|
84
74
|
}
|
|
85
75
|
|
|
86
76
|
return null;
|
|
87
|
-
}),
|
|
88
|
-
return withPicture ? [].concat((0, _toConsumableArray2["default"])(tools), [_tools.DEFAULT_SHAPE_PICTURE]) : tools;
|
|
89
|
-
}, _fp["default"].compact)(tools);
|
|
77
|
+
}), tools => withPicture ? [...tools, _tools.DEFAULT_SHAPE_PICTURE] : tools, _fp.default.compact)(tools);
|
|
90
78
|
};
|
|
91
79
|
|
|
92
80
|
exports.sanitizeTools = sanitizeTools;
|