@yorab/react-paint 0.7.5 → 0.8.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.
- package/dist/components/App.d.ts +20 -0
- package/dist/components/Canvas.d.ts +38 -0
- package/dist/components/common/Button.d.ts +16 -0
- package/dist/components/common/Loading.d.ts +7 -0
- package/dist/components/common/Modal.d.ts +10 -0
- package/dist/components/common/Panel.d.ts +13 -0
- package/dist/components/common/Snackbar.d.ts +8 -0
- package/dist/components/settings/ColorField.d.ts +15 -0
- package/dist/components/settings/DeleteButton.d.ts +9 -0
- package/dist/components/settings/FontFamilyField.d.ts +12 -0
- package/dist/components/settings/LayoutButton.d.ts +8 -0
- package/dist/components/settings/Layouts.d.ts +19 -0
- package/dist/components/settings/LineArrowField.d.ts +12 -0
- package/dist/components/settings/LineTypeField.d.ts +16 -0
- package/dist/components/settings/PointsNumberField.d.ts +13 -0
- package/dist/components/settings/RangeField.d.ts +18 -0
- package/dist/components/settings/SelectField.d.ts +18 -0
- package/dist/components/settings/SettingsBar.d.ts +19 -0
- package/dist/components/settings/ToggleField.d.ts +12 -0
- package/dist/components/toolbox/EditTextBox.d.ts +14 -0
- package/dist/components/toolbox/LoadFileTool.d.ts +12 -0
- package/dist/components/toolbox/MenuGroup.d.ts +35 -0
- package/dist/components/toolbox/PictureUrlInput.d.ts +8 -0
- package/dist/components/toolbox/Tool.d.ts +12 -0
- package/dist/components/toolbox/Toolbar.d.ts +27 -0
- package/dist/components/toolbox/ToolbarGroup.d.ts +18 -0
- package/dist/constants/app.d.ts +41 -0
- package/dist/constants/icons.d.ts +41 -0
- package/dist/constants/loading.d.ts +1 -0
- package/dist/constants/picture.d.ts +1 -0
- package/dist/constants/shapes.d.ts +8 -0
- package/dist/constants/snackbar.d.ts +7 -0
- package/dist/constants/style.d.ts +17 -0
- package/dist/constants/tools.d.ts +32 -0
- package/dist/hooks/useComponent.d.ts +9 -0
- package/dist/hooks/useDoubleClick.d.ts +5 -0
- package/dist/hooks/useDrag.d.ts +15 -0
- package/dist/hooks/useDrawableCanvas.d.ts +37 -0
- package/dist/hooks/useKeyboard.d.ts +18 -0
- package/dist/hooks/useResizeObserver.d.ts +7 -0
- package/dist/hooks/useShapes.d.ts +22 -0
- package/dist/hooks/useSnackbar.d.ts +10 -0
- package/dist/react-paint.css +1 -0
- package/dist/react-paint.js +9109 -0
- package/dist/react-paint.umd.cjs +53 -0
- package/dist/types/Mode.d.ts +43 -0
- package/dist/types/Shapes.d.ts +112 -0
- package/dist/types/snackbar.d.ts +7 -0
- package/dist/types/tools.d.ts +124 -0
- package/dist/types/utils.d.ts +3 -0
- package/dist/utils/canvas.d.ts +10 -0
- package/dist/utils/data.d.ts +225 -0
- package/dist/utils/dom.d.ts +1 -0
- package/dist/utils/file.d.ts +10 -0
- package/dist/utils/intersect.d.ts +6 -0
- package/dist/utils/migration.d.ts +165 -0
- package/dist/utils/selection.d.ts +7 -0
- package/dist/utils/shapes/brush.d.ts +55 -0
- package/dist/utils/shapes/circle.d.ts +13 -0
- package/dist/utils/shapes/curve.d.ts +11 -0
- package/dist/utils/shapes/default.d.ts +10 -0
- package/dist/utils/shapes/ellipse.d.ts +13 -0
- package/dist/utils/shapes/grid.d.ts +3 -0
- package/dist/utils/shapes/index.d.ts +245 -0
- package/dist/utils/shapes/line.d.ts +23 -0
- package/dist/utils/shapes/picture.d.ts +6 -0
- package/dist/utils/shapes/polygon.d.ts +11 -0
- package/dist/utils/shapes/rectangle.d.ts +26 -0
- package/dist/utils/shapes/text.d.ts +48 -0
- package/dist/utils/shapes/triangle.d.ts +2 -0
- package/dist/utils/string.d.ts +3 -0
- package/dist/utils/style.d.ts +2 -0
- package/dist/utils/toolbar.d.ts +13 -0
- package/dist/utils/transform.d.ts +8 -0
- package/dist/utils/trigo.d.ts +10 -0
- package/package.json +51 -56
- package/dist/components/App.js +0 -496
- package/dist/components/Canvas.js +0 -194
- package/dist/components/common/Button.js +0 -88
- package/dist/components/common/Loading.js +0 -57
- package/dist/components/common/Modal.js +0 -46
- package/dist/components/common/Panel.js +0 -43
- package/dist/components/common/Snackbar.js +0 -68
- package/dist/components/settings/ColorField.js +0 -125
- package/dist/components/settings/DeleteButton.js +0 -37
- package/dist/components/settings/FontFamilyField.js +0 -67
- package/dist/components/settings/LayoutButton.js +0 -39
- package/dist/components/settings/Layouts.js +0 -214
- package/dist/components/settings/LineArrowField.js +0 -67
- package/dist/components/settings/LineTypeField.js +0 -65
- package/dist/components/settings/PointsNumberField.js +0 -45
- package/dist/components/settings/RangeField.js +0 -82
- package/dist/components/settings/SelectField.js +0 -81
- package/dist/components/settings/SettingsBar.js +0 -383
- package/dist/components/settings/ToggleField.js +0 -49
- package/dist/components/toolbox/EditTextBox.js +0 -138
- package/dist/components/toolbox/LoadFileTool.js +0 -58
- package/dist/components/toolbox/MenuGroup.js +0 -173
- package/dist/components/toolbox/PictureUrlInput.js +0 -68
- package/dist/components/toolbox/Tool.js +0 -41
- package/dist/components/toolbox/Toolbar.js +0 -203
- package/dist/components/toolbox/ToolbarGroup.js +0 -134
- package/dist/constants/app.js +0 -51
- package/dist/constants/icons.js +0 -88
- package/dist/constants/loading.js +0 -8
- package/dist/constants/picture.js +0 -8
- package/dist/constants/shapes.js +0 -20
- package/dist/constants/snackbar.js +0 -15
- package/dist/constants/style.js +0 -35
- package/dist/constants/tools.js +0 -424
- package/dist/hooks/useComponent.js +0 -47
- package/dist/hooks/useDoubleClick.js +0 -46
- package/dist/hooks/useDrag.js +0 -92
- package/dist/hooks/useDrawableCanvas.js +0 -230
- package/dist/hooks/useKeyboard.js +0 -142
- package/dist/hooks/useResizeObserver.js +0 -42
- package/dist/hooks/useShapes.js +0 -184
- package/dist/hooks/useSnackbar.js +0 -56
- package/dist/styles.css +0 -91
- package/dist/types/Mode.js +0 -5
- package/dist/types/Shapes.js +0 -5
- package/dist/types/snackbar.js +0 -5
- package/dist/types/tools.js +0 -5
- package/dist/types/utils.js +0 -5
- package/dist/utils/canvas.js +0 -49
- package/dist/utils/data.js +0 -49
- package/dist/utils/dom.js +0 -12
- package/dist/utils/file.js +0 -171
- package/dist/utils/intersect.js +0 -122
- package/dist/utils/migration.js +0 -59
- package/dist/utils/selection.js +0 -86
- package/dist/utils/shapes/brush.js +0 -135
- package/dist/utils/shapes/circle.js +0 -93
- package/dist/utils/shapes/curve.js +0 -55
- package/dist/utils/shapes/default.js +0 -73
- package/dist/utils/shapes/ellipse.js +0 -101
- package/dist/utils/shapes/grid.js +0 -36
- package/dist/utils/shapes/index.js +0 -341
- package/dist/utils/shapes/line.js +0 -179
- package/dist/utils/shapes/picture.js +0 -103
- package/dist/utils/shapes/polygon.js +0 -69
- package/dist/utils/shapes/rectangle.js +0 -100
- package/dist/utils/shapes/text.js +0 -128
- package/dist/utils/shapes/triangle.js +0 -24
- package/dist/utils/string.js +0 -36
- package/dist/utils/style.js +0 -46
- package/dist/utils/toolbar.js +0 -78
- package/dist/utils/transform.js +0 -109
- package/dist/utils/trigo.js +0 -42
package/dist/utils/transform.js
DELETED
|
@@ -1,109 +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.updatePolygonLinesCount = exports.transformShape = exports.roundForGrid = exports.getNormalizedSize = exports.fitContentInsideContainer = void 0;
|
|
9
|
-
|
|
10
|
-
var _fp = _interopRequireDefault(require("lodash/fp"));
|
|
11
|
-
|
|
12
|
-
var _style = require("../constants/style");
|
|
13
|
-
|
|
14
|
-
var _shapes = require("./shapes");
|
|
15
|
-
|
|
16
|
-
var _brush = require("./shapes/brush");
|
|
17
|
-
|
|
18
|
-
var _picture = require("../constants/picture");
|
|
19
|
-
|
|
20
|
-
const getNormalizedSize = (originalWidth, originalHeight, width, height) => {
|
|
21
|
-
const originalRatio = originalWidth / originalHeight;
|
|
22
|
-
const newRatio = width / height;
|
|
23
|
-
|
|
24
|
-
if (newRatio > originalRatio || height < 0) {
|
|
25
|
-
return width > originalWidth ? [width, width / originalRatio] : [height * originalRatio, height];
|
|
26
|
-
} else if (newRatio < originalRatio) {
|
|
27
|
-
return height > originalHeight ? [height * originalRatio, height] : [width, width / originalRatio];
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
return [width, height];
|
|
31
|
-
};
|
|
32
|
-
|
|
33
|
-
exports.getNormalizedSize = getNormalizedSize;
|
|
34
|
-
|
|
35
|
-
const roundForGrid = (value, gridFormat) => {
|
|
36
|
-
const step = value >= 0 ? _style.GRID_STEP[gridFormat - 1] : -_style.GRID_STEP[gridFormat - 1];
|
|
37
|
-
return gridFormat ? value + step / 2 - (value + step / 2) % step : Math.round(value);
|
|
38
|
-
};
|
|
39
|
-
|
|
40
|
-
exports.roundForGrid = roundForGrid;
|
|
41
|
-
|
|
42
|
-
const updatePolygonLinesCount = (shape, newPointsCount) => {
|
|
43
|
-
const currentPointsCount = shape.points.length;
|
|
44
|
-
if (currentPointsCount === newPointsCount) return shape;
|
|
45
|
-
|
|
46
|
-
if (currentPointsCount > newPointsCount) {
|
|
47
|
-
const totalPoints = shape.points.slice(0, newPointsCount);
|
|
48
|
-
return { ...shape,
|
|
49
|
-
points: totalPoints,
|
|
50
|
-
style: { ...shape.style,
|
|
51
|
-
pointsCount: totalPoints.length
|
|
52
|
-
}
|
|
53
|
-
};
|
|
54
|
-
} else {
|
|
55
|
-
//TODO : better distribution for new points
|
|
56
|
-
const nbPointsToAdd = newPointsCount - currentPointsCount;
|
|
57
|
-
|
|
58
|
-
const newPoints = _fp.default.flow(_fp.default.range(0), _fp.default.map(index => [shape.points[0][0] + (shape.points[1][0] - shape.points[0][0]) * (index + 1) / (nbPointsToAdd + 1), shape.points[0][1] + (shape.points[1][1] - shape.points[0][1]) * (index + 1) / (nbPointsToAdd + 1)]))(nbPointsToAdd);
|
|
59
|
-
|
|
60
|
-
const totalPoints = [shape.points[0], ...newPoints, ...shape.points.slice(1, shape.points.length)];
|
|
61
|
-
return { ...shape,
|
|
62
|
-
points: totalPoints,
|
|
63
|
-
style: { ...shape.style,
|
|
64
|
-
pointsCount: totalPoints.length
|
|
65
|
-
}
|
|
66
|
-
};
|
|
67
|
-
}
|
|
68
|
-
};
|
|
69
|
-
|
|
70
|
-
exports.updatePolygonLinesCount = updatePolygonLinesCount;
|
|
71
|
-
|
|
72
|
-
const transformShape = (ctx, shape, cursorPosition, gridFormat, canvasOffset, selectionMode, selectionPadding, isShiftPressed) => {
|
|
73
|
-
switch (selectionMode.mode) {
|
|
74
|
-
case 'brush':
|
|
75
|
-
return (0, _brush.addNewPointToShape)(shape, cursorPosition);
|
|
76
|
-
|
|
77
|
-
case 'translate':
|
|
78
|
-
return (0, _shapes.translateShape)(cursorPosition, selectionMode.originalShape, selectionMode.cursorStartPosition, gridFormat);
|
|
79
|
-
|
|
80
|
-
case 'rotate':
|
|
81
|
-
return (0, _shapes.rotateShape)(shape, cursorPosition, selectionMode.originalShape, selectionMode.cursorStartPosition, selectionMode.center, gridFormat);
|
|
82
|
-
|
|
83
|
-
case 'resize':
|
|
84
|
-
const roundCursorPosition = [roundForGrid(cursorPosition[0], gridFormat), roundForGrid(cursorPosition[1], gridFormat)];
|
|
85
|
-
return (0, _shapes.resizeShape)(ctx, shape, roundCursorPosition, canvasOffset, selectionMode.originalShape, selectionMode, selectionPadding, isShiftPressed);
|
|
86
|
-
|
|
87
|
-
default:
|
|
88
|
-
return shape;
|
|
89
|
-
}
|
|
90
|
-
};
|
|
91
|
-
|
|
92
|
-
exports.transformShape = transformShape;
|
|
93
|
-
|
|
94
|
-
const fitContentInsideContainer = function (contentWidth, contentHeight, containerWidth, containerHeight) {
|
|
95
|
-
let shouldFillContainer = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
|
|
96
|
-
if (!contentWidth || !contentHeight || !containerHeight || !containerWidth) return [_picture.PICTURE_DEFAULT_SIZE, _picture.PICTURE_DEFAULT_SIZE];
|
|
97
|
-
const contentRatio = contentWidth / contentHeight;
|
|
98
|
-
const containerRatio = containerWidth / containerHeight;
|
|
99
|
-
|
|
100
|
-
if (contentRatio > containerRatio) {
|
|
101
|
-
const newWidth = shouldFillContainer ? containerWidth : Math.min(contentWidth, containerWidth);
|
|
102
|
-
return [newWidth, newWidth / contentRatio];
|
|
103
|
-
} else {
|
|
104
|
-
const newHeight = shouldFillContainer ? containerHeight : Math.min(contentHeight, containerHeight);
|
|
105
|
-
return [newHeight * contentRatio, newHeight];
|
|
106
|
-
}
|
|
107
|
-
};
|
|
108
|
-
|
|
109
|
-
exports.fitContentInsideContainer = fitContentInsideContainer;
|
package/dist/utils/trigo.js
DELETED
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.rotatePoint = exports.radiansToDegrees = exports.isPointInsideRect = exports.getAngleFromVector = exports.degreesToRadians = void 0;
|
|
7
|
-
|
|
8
|
-
const degreesToRadians = degrees => degrees * (Math.PI / 180);
|
|
9
|
-
|
|
10
|
-
exports.degreesToRadians = degreesToRadians;
|
|
11
|
-
|
|
12
|
-
const radiansToDegrees = radians => radians * 180 / Math.PI;
|
|
13
|
-
|
|
14
|
-
exports.radiansToDegrees = radiansToDegrees;
|
|
15
|
-
|
|
16
|
-
const isPointInsideRect = (rect, point) => {
|
|
17
|
-
return point[0] >= rect.x && point[0] <= rect.x + rect.width && point[1] >= rect.y && point[1] <= rect.y + rect.height;
|
|
18
|
-
};
|
|
19
|
-
|
|
20
|
-
exports.isPointInsideRect = isPointInsideRect;
|
|
21
|
-
|
|
22
|
-
const rotatePoint = _ref => {
|
|
23
|
-
let {
|
|
24
|
-
origin = [0, 0],
|
|
25
|
-
point,
|
|
26
|
-
rotation
|
|
27
|
-
} = _ref;
|
|
28
|
-
const pointFromOrigin = [point[0] - origin[0], point[1] - origin[1]];
|
|
29
|
-
const rotatedPointY = pointFromOrigin[1] * Math.cos(rotation) - pointFromOrigin[0] * Math.sin(rotation);
|
|
30
|
-
const rotatedPointX = pointFromOrigin[1] * Math.sin(rotation) + pointFromOrigin[0] * Math.cos(rotation);
|
|
31
|
-
return [rotatedPointX + origin[0], rotatedPointY + origin[1]];
|
|
32
|
-
};
|
|
33
|
-
|
|
34
|
-
exports.rotatePoint = rotatePoint;
|
|
35
|
-
|
|
36
|
-
const getAngleFromVector = function (point1, point2) {
|
|
37
|
-
let radian = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
|
|
38
|
-
const radianAngle = Math.atan2(point2[1] - point1[1], point2[0] - point1[0]);
|
|
39
|
-
return radian ? radianAngle : radiansToDegrees(radianAngle);
|
|
40
|
-
};
|
|
41
|
-
|
|
42
|
-
exports.getAngleFromVector = getAngleFromVector;
|