@yorab/react-paint 0.7.6 → 0.9.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 (153) hide show
  1. package/README.md +1 -11
  2. package/dist/components/App.d.ts +20 -0
  3. package/dist/components/Canvas.d.ts +38 -0
  4. package/dist/components/common/Button.d.ts +16 -0
  5. package/dist/components/common/Loading.d.ts +7 -0
  6. package/dist/components/common/Modal.d.ts +10 -0
  7. package/dist/components/common/Panel.d.ts +13 -0
  8. package/dist/components/common/Snackbar.d.ts +8 -0
  9. package/dist/components/settings/ColorField.d.ts +15 -0
  10. package/dist/components/settings/DeleteButton.d.ts +9 -0
  11. package/dist/components/settings/FontFamilyField.d.ts +12 -0
  12. package/dist/components/settings/LayoutButton.d.ts +8 -0
  13. package/dist/components/settings/Layouts.d.ts +19 -0
  14. package/dist/components/settings/LineArrowField.d.ts +12 -0
  15. package/dist/components/settings/LineTypeField.d.ts +16 -0
  16. package/dist/components/settings/PointsNumberField.d.ts +13 -0
  17. package/dist/components/settings/RangeField.d.ts +18 -0
  18. package/dist/components/settings/SelectField.d.ts +18 -0
  19. package/dist/components/settings/SettingsBar.d.ts +21 -0
  20. package/dist/components/settings/ToggleField.d.ts +12 -0
  21. package/dist/components/toolbox/EditTextBox.d.ts +14 -0
  22. package/dist/components/toolbox/LoadFileTool.d.ts +12 -0
  23. package/dist/components/toolbox/MenuGroup.d.ts +35 -0
  24. package/dist/components/toolbox/PictureUrlInput.d.ts +8 -0
  25. package/dist/components/toolbox/Tool.d.ts +12 -0
  26. package/dist/components/toolbox/Toolbar.d.ts +27 -0
  27. package/dist/components/toolbox/ToolbarGroup.d.ts +18 -0
  28. package/dist/constants/app.d.ts +41 -0
  29. package/dist/constants/icons.d.ts +41 -0
  30. package/dist/constants/loading.d.ts +1 -0
  31. package/dist/constants/picture.d.ts +1 -0
  32. package/dist/constants/shapes.d.ts +8 -0
  33. package/dist/constants/snackbar.d.ts +7 -0
  34. package/dist/constants/style.d.ts +17 -0
  35. package/dist/constants/tools.d.ts +32 -0
  36. package/dist/hooks/useComponent.d.ts +9 -0
  37. package/dist/hooks/useDoubleClick.d.ts +5 -0
  38. package/dist/hooks/useDrag.d.ts +15 -0
  39. package/dist/hooks/useDrawableCanvas.d.ts +37 -0
  40. package/dist/hooks/useKeyboard.d.ts +20 -0
  41. package/dist/hooks/useResizeObserver.d.ts +7 -0
  42. package/dist/hooks/useShapes.d.ts +26 -0
  43. package/dist/hooks/useSnackbar.d.ts +10 -0
  44. package/dist/react-paint.css +1 -0
  45. package/dist/react-paint.js +8887 -0
  46. package/dist/react-paint.umd.cjs +27 -0
  47. package/dist/types/Mode.d.ts +43 -0
  48. package/dist/types/Shapes.d.ts +128 -0
  49. package/dist/types/react.d.ts +7 -0
  50. package/dist/types/snackbar.d.ts +7 -0
  51. package/dist/types/tools.d.ts +125 -0
  52. package/dist/types/utils.d.ts +4 -0
  53. package/dist/utils/canvas.d.ts +10 -0
  54. package/dist/utils/data.d.ts +4 -0
  55. package/dist/utils/dom.d.ts +1 -0
  56. package/dist/utils/file.d.ts +10 -0
  57. package/dist/utils/grid.d.ts +3 -0
  58. package/dist/utils/intersect.d.ts +6 -0
  59. package/dist/utils/migration.d.ts +147 -0
  60. package/dist/utils/selection/lineSelection.d.ts +12 -0
  61. package/dist/utils/selection/rectSelection.d.ts +13 -0
  62. package/dist/utils/selection.d.ts +7 -0
  63. package/dist/utils/shapes/brush.d.ts +20 -0
  64. package/dist/utils/shapes/circle.d.ts +17 -0
  65. package/dist/utils/shapes/curve.d.ts +16 -0
  66. package/dist/utils/shapes/ellipse.d.ts +17 -0
  67. package/dist/utils/shapes/index.d.ts +29 -0
  68. package/dist/utils/shapes/line.d.ts +17 -0
  69. package/dist/utils/shapes/path.d.ts +9 -0
  70. package/dist/utils/shapes/picture.d.ts +12 -0
  71. package/dist/utils/shapes/polygon.d.ts +17 -0
  72. package/dist/utils/shapes/rectangle.d.ts +20 -0
  73. package/dist/utils/shapes/text.d.ts +19 -0
  74. package/dist/utils/shapes/triangle.d.ts +3 -0
  75. package/dist/utils/string.d.ts +3 -0
  76. package/dist/utils/style.d.ts +2 -0
  77. package/dist/utils/toolbar.d.ts +13 -0
  78. package/dist/utils/transform.d.ts +9 -0
  79. package/dist/utils/trigo.d.ts +16 -0
  80. package/package.json +52 -57
  81. package/dist/components/App.js +0 -496
  82. package/dist/components/Canvas.js +0 -194
  83. package/dist/components/common/Button.js +0 -88
  84. package/dist/components/common/Loading.js +0 -57
  85. package/dist/components/common/Modal.js +0 -46
  86. package/dist/components/common/Panel.js +0 -43
  87. package/dist/components/common/Snackbar.js +0 -68
  88. package/dist/components/settings/ColorField.js +0 -125
  89. package/dist/components/settings/DeleteButton.js +0 -37
  90. package/dist/components/settings/FontFamilyField.js +0 -67
  91. package/dist/components/settings/LayoutButton.js +0 -39
  92. package/dist/components/settings/Layouts.js +0 -214
  93. package/dist/components/settings/LineArrowField.js +0 -67
  94. package/dist/components/settings/LineTypeField.js +0 -65
  95. package/dist/components/settings/PointsNumberField.js +0 -45
  96. package/dist/components/settings/RangeField.js +0 -82
  97. package/dist/components/settings/SelectField.js +0 -81
  98. package/dist/components/settings/SettingsBar.js +0 -383
  99. package/dist/components/settings/ToggleField.js +0 -49
  100. package/dist/components/toolbox/EditTextBox.js +0 -138
  101. package/dist/components/toolbox/LoadFileTool.js +0 -58
  102. package/dist/components/toolbox/MenuGroup.js +0 -173
  103. package/dist/components/toolbox/PictureUrlInput.js +0 -68
  104. package/dist/components/toolbox/Tool.js +0 -41
  105. package/dist/components/toolbox/Toolbar.js +0 -203
  106. package/dist/components/toolbox/ToolbarGroup.js +0 -134
  107. package/dist/constants/app.js +0 -51
  108. package/dist/constants/icons.js +0 -88
  109. package/dist/constants/loading.js +0 -8
  110. package/dist/constants/picture.js +0 -8
  111. package/dist/constants/shapes.js +0 -20
  112. package/dist/constants/snackbar.js +0 -15
  113. package/dist/constants/style.js +0 -35
  114. package/dist/constants/tools.js +0 -424
  115. package/dist/hooks/useComponent.js +0 -47
  116. package/dist/hooks/useDoubleClick.js +0 -46
  117. package/dist/hooks/useDrag.js +0 -92
  118. package/dist/hooks/useDrawableCanvas.js +0 -230
  119. package/dist/hooks/useKeyboard.js +0 -142
  120. package/dist/hooks/useResizeObserver.js +0 -42
  121. package/dist/hooks/useShapes.js +0 -184
  122. package/dist/hooks/useSnackbar.js +0 -56
  123. package/dist/styles.css +0 -91
  124. package/dist/types/Mode.js +0 -5
  125. package/dist/types/Shapes.js +0 -5
  126. package/dist/types/snackbar.js +0 -5
  127. package/dist/types/tools.js +0 -5
  128. package/dist/types/utils.js +0 -5
  129. package/dist/utils/canvas.js +0 -49
  130. package/dist/utils/data.js +0 -49
  131. package/dist/utils/dom.js +0 -12
  132. package/dist/utils/file.js +0 -177
  133. package/dist/utils/intersect.js +0 -122
  134. package/dist/utils/migration.js +0 -59
  135. package/dist/utils/selection.js +0 -86
  136. package/dist/utils/shapes/brush.js +0 -135
  137. package/dist/utils/shapes/circle.js +0 -93
  138. package/dist/utils/shapes/curve.js +0 -55
  139. package/dist/utils/shapes/default.js +0 -73
  140. package/dist/utils/shapes/ellipse.js +0 -101
  141. package/dist/utils/shapes/grid.js +0 -36
  142. package/dist/utils/shapes/index.js +0 -341
  143. package/dist/utils/shapes/line.js +0 -179
  144. package/dist/utils/shapes/picture.js +0 -109
  145. package/dist/utils/shapes/polygon.js +0 -69
  146. package/dist/utils/shapes/rectangle.js +0 -100
  147. package/dist/utils/shapes/text.js +0 -128
  148. package/dist/utils/shapes/triangle.js +0 -24
  149. package/dist/utils/string.js +0 -36
  150. package/dist/utils/style.js +0 -46
  151. package/dist/utils/toolbar.js +0 -78
  152. package/dist/utils/transform.js +0 -109
  153. package/dist/utils/trigo.js +0 -42
@@ -1,122 +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.getPointPositionBeforeCanvasTransformation = exports.getPointPositionAfterCanvasTransformation = exports.getCursorPosition = exports.checkPositionIntersection = void 0;
9
-
10
- var _shapes = require("../constants/shapes");
11
-
12
- var _fp = _interopRequireDefault(require("lodash/fp"));
13
-
14
- var _shapes2 = require("./shapes");
15
-
16
- var _trigo = require("./trigo");
17
-
18
- const getCursorPosition = function (e, canvas, givenWidth, givenHeight) {
19
- var _canvas$getBoundingCl;
20
-
21
- let scaleRatio = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
22
-
23
- const {
24
- clientX,
25
- clientY
26
- } = _fp.default.getOr(_fp.default.getOr(e, 'changedTouches[0]', e), 'touches[0]', e);
27
-
28
- const canvasBoundingRect = (_canvas$getBoundingCl = canvas === null || canvas === void 0 ? void 0 : canvas.getBoundingClientRect()) !== null && _canvas$getBoundingCl !== void 0 ? _canvas$getBoundingCl : {
29
- left: 0,
30
- top: 0,
31
- width: givenWidth,
32
- height: givenHeight
33
- };
34
- return [(clientX - canvasBoundingRect.left) * (givenWidth / canvasBoundingRect.width) / scaleRatio, (clientY - canvasBoundingRect.top) * (givenHeight / canvasBoundingRect.height) / scaleRatio];
35
- };
36
-
37
- exports.getCursorPosition = getCursorPosition;
38
-
39
- const getPointPositionAfterCanvasTransformation = (point, shapeRotation, _ref, _ref2) => {
40
- let [originX, originY] = _ref;
41
- let [canvasOffsetX, canvasOffsetY] = _ref2;
42
- return (0, _trigo.rotatePoint)({
43
- origin: [originX - canvasOffsetX, originY - canvasOffsetY],
44
- point,
45
- rotation: shapeRotation
46
- });
47
- };
48
-
49
- exports.getPointPositionAfterCanvasTransformation = getPointPositionAfterCanvasTransformation;
50
-
51
- const getPointPositionBeforeCanvasTransformation = (point, shapeRotation, _ref3, _ref4) => {
52
- let [originX, originY] = _ref3;
53
- let [canvasOffsetX, canvasOffsetY] = _ref4;
54
- return (0, _trigo.rotatePoint)({
55
- origin: [originX - canvasOffsetX, originY - canvasOffsetY],
56
- point,
57
- rotation: -shapeRotation
58
- });
59
- };
60
-
61
- exports.getPointPositionBeforeCanvasTransformation = getPointPositionBeforeCanvasTransformation;
62
-
63
- const checkPositionIntersection = function (shape, position, canvasOffset, selectionPadding) {
64
- let currentScale = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
65
- let checkAnchors = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
66
- if (shape.locked) return false;
67
- const scaleWithMinCap = Math.min(1, currentScale);
68
- const {
69
- borders,
70
- center
71
- } = (0, _shapes2.getShapeInfos)(shape, selectionPadding);
72
- const newPosition = getPointPositionAfterCanvasTransformation(position, shape.rotation, center, canvasOffset);
73
-
74
- if (checkAnchors) {
75
- if (shape.type === 'line' || shape.type === 'polygon' || shape.type === 'curve') {
76
- for (let i = 0; i < shape.points.length; i++) {
77
- if ((0, _trigo.isPointInsideRect)({
78
- x: shape.points[i][0] - _shapes.SELECTION_ANCHOR_SIZE / 2 / scaleWithMinCap,
79
- y: shape.points[i][1] - _shapes.SELECTION_ANCHOR_SIZE / 2 / scaleWithMinCap,
80
- width: _shapes.SELECTION_ANCHOR_SIZE / scaleWithMinCap,
81
- height: _shapes.SELECTION_ANCHOR_SIZE / scaleWithMinCap
82
- }, newPosition)) {
83
- return {
84
- mode: 'resize',
85
- anchor: i
86
- };
87
- }
88
- }
89
- } else {
90
- if ((0, _trigo.isPointInsideRect)({
91
- x: borders.x + borders.width / 2 - _shapes.SELECTION_ANCHOR_SIZE / 2 / scaleWithMinCap,
92
- y: borders.y - _shapes.SELECTION_ANCHOR_SIZE / scaleWithMinCap - _shapes.SELECTION_ROTATED_ANCHOR_POSITION / scaleWithMinCap,
93
- width: _shapes.SELECTION_ANCHOR_SIZE / scaleWithMinCap,
94
- height: _shapes.SELECTION_ANCHOR_SIZE / scaleWithMinCap
95
- }, newPosition)) {
96
- return {
97
- mode: 'rotate'
98
- };
99
- }
100
-
101
- for (const anchorPosition of _shapes.SELECTION_RESIZE_ANCHOR_POSITIONS) {
102
- if ((0, _trigo.isPointInsideRect)({
103
- x: borders.x + borders.width * anchorPosition[0] - _shapes.SELECTION_ANCHOR_SIZE / 2 / scaleWithMinCap,
104
- y: borders.y + borders.height * anchorPosition[1] - _shapes.SELECTION_ANCHOR_SIZE / 2 / scaleWithMinCap,
105
- width: _shapes.SELECTION_ANCHOR_SIZE / scaleWithMinCap,
106
- height: _shapes.SELECTION_ANCHOR_SIZE / scaleWithMinCap
107
- }, newPosition)) {
108
- return {
109
- mode: 'resize',
110
- anchor: anchorPosition
111
- };
112
- }
113
- }
114
- }
115
- }
116
-
117
- return (0, _trigo.isPointInsideRect)(borders, newPosition) ? {
118
- mode: 'translate'
119
- } : false;
120
- };
121
-
122
- exports.checkPositionIntersection = checkPositionIntersection;
@@ -1,59 +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.migrateShapesV065 = void 0;
9
-
10
- var _fp = _interopRequireDefault(require("lodash/fp"));
11
-
12
- const migrateShapesV065 = shapes => {
13
- return _fp.default.map(shape => {
14
- if (!shape.translation) {
15
- return shape;
16
- }
17
-
18
- const translation = shape.translation;
19
-
20
- switch (shape.type) {
21
- case 'rect':
22
- case 'square':
23
- case 'ellipse':
24
- case 'circle':
25
- case 'picture':
26
- return { ..._fp.default.omit(['translation'], shape),
27
- x: shape.x + translation[0],
28
- y: shape.y + translation[1]
29
- };
30
-
31
- case 'line':
32
- return { ..._fp.default.omit(['translation'], shape),
33
- points: shape.points.map(_ref => {
34
- let [x, y] = _ref;
35
- return [x + translation[0], y + translation[1]];
36
- })
37
- };
38
-
39
- case 'polygon':
40
- case 'curve':
41
- return { ..._fp.default.omit(['translation'], shape),
42
- points: shape.points.map(_ref2 => {
43
- let [x, y] = _ref2;
44
- return [x + translation[0], y + translation[1]];
45
- })
46
- };
47
-
48
- case 'brush':
49
- return { ..._fp.default.omit(['translation'], shape),
50
- points: shape.points.map(coord => coord.map(_ref3 => {
51
- let [x, y] = _ref3;
52
- return [x + translation[0], y + translation[1]];
53
- }))
54
- };
55
- }
56
- }, shapes);
57
- };
58
-
59
- exports.migrateShapesV065 = migrateShapesV065;
@@ -1,86 +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.selectShape = exports.getNewSelectionData = void 0;
9
-
10
- var _fp = _interopRequireDefault(require("lodash/fp"));
11
-
12
- var _intersect = require("./intersect");
13
-
14
- var _shapes = require("./shapes");
15
-
16
- const getNewSelectionData = (hoverMode, selectedShape, cursorPosition, selectionPadding) => {
17
- if (hoverMode.mode === 'translate') {
18
- return {
19
- mode: 'translate',
20
- cursorStartPosition: cursorPosition,
21
- originalShape: selectedShape
22
- };
23
- } else if (hoverMode.mode === 'rotate') {
24
- const {
25
- center: centerBeforeResize
26
- } = (0, _shapes.getShapeInfos)(selectedShape, selectionPadding);
27
- const center = [centerBeforeResize[0], centerBeforeResize[1]];
28
- return {
29
- mode: 'rotate',
30
- cursorStartPosition: cursorPosition,
31
- originalShape: selectedShape,
32
- center
33
- };
34
- } else if (hoverMode.mode === 'resize') {
35
- return {
36
- mode: 'resize',
37
- cursorStartPosition: cursorPosition,
38
- originalShape: selectedShape,
39
- anchor: hoverMode.anchor
40
- };
41
- }
42
-
43
- return undefined;
44
- };
45
-
46
- exports.getNewSelectionData = getNewSelectionData;
47
-
48
- const selectShape = (shapes, cursorPosition, currentScale, canvasOffset, selectedShape, selectionPadding) => {
49
- if (selectedShape) {
50
- const positionIntersection = (0, _intersect.checkPositionIntersection)(selectedShape, cursorPosition, canvasOffset, selectionPadding, currentScale, true) || {
51
- mode: 'default'
52
- };
53
- const newSelectionMode = getNewSelectionData(positionIntersection, selectedShape, cursorPosition, selectionPadding);
54
-
55
- if ((newSelectionMode === null || newSelectionMode === void 0 ? void 0 : newSelectionMode.mode) === 'resize' || (newSelectionMode === null || newSelectionMode === void 0 ? void 0 : newSelectionMode.mode) === 'rotate') {
56
- return {
57
- shape: selectedShape,
58
- mode: newSelectionMode
59
- };
60
- }
61
- }
62
-
63
- const foundShape = _fp.default.find(shape => {
64
- return !!(0, _intersect.checkPositionIntersection)(shape, cursorPosition, canvasOffset, selectionPadding, currentScale, false);
65
- }, shapes);
66
-
67
- if (!!foundShape) {
68
- return {
69
- shape: foundShape,
70
- mode: {
71
- mode: 'translate',
72
- cursorStartPosition: cursorPosition,
73
- originalShape: foundShape
74
- }
75
- };
76
- } else {
77
- return {
78
- shape: undefined,
79
- mode: {
80
- mode: 'default'
81
- }
82
- };
83
- }
84
- };
85
-
86
- exports.selectShape = selectShape;
@@ -1,135 +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.resizeBrush = exports.getBrushBorder = exports.drawBrush = exports.createBrush = exports.addNewPointToShape = exports.addNewPointGroupToShape = void 0;
9
-
10
- var _fp = _interopRequireDefault(require("lodash/fp"));
11
-
12
- var _canvas = require("../canvas");
13
-
14
- var _intersect = require("../intersect");
15
-
16
- var _transform = require("../transform");
17
-
18
- var _2 = require(".");
19
-
20
- var _rectangle = require("./rectangle");
21
-
22
- const createBrush = (shape, cursorPosition) => {
23
- return {
24
- toolId: shape.id,
25
- type: shape.type,
26
- id: _fp.default.uniqueId("".concat(shape.type, "_")),
27
- points: [[cursorPosition]],
28
- rotation: 0,
29
- style: {
30
- globalAlpha: shape.settings.opacity.default,
31
- strokeColor: shape.settings.strokeColor.default,
32
- lineWidth: shape.settings.lineWidth.default,
33
- lineDash: shape.settings.lineDash.default
34
- }
35
- };
36
- };
37
-
38
- exports.createBrush = createBrush;
39
-
40
- const drawBrush = (ctx, brush) => {
41
- var _brush$style;
42
-
43
- if (brush.points.length < 1) return;
44
- (0, _canvas.updateCanvasContext)(ctx, brush.style);
45
- ctx.beginPath();
46
- if (((_brush$style = brush.style) === null || _brush$style === void 0 ? void 0 : _brush$style.strokeColor) === 'transparent' || ctx.globalAlpha === 0) return;
47
- brush.points.forEach(points => {
48
- if (points.length === 1) {
49
- ctx.rect(points[0][0], points[0][1], 1, 1);
50
- } else {
51
- ctx.moveTo(...points[0]);
52
- points.slice(1).forEach(point => {
53
- ctx.lineTo(...point);
54
- });
55
- }
56
- });
57
- ctx.stroke();
58
- };
59
-
60
- exports.drawBrush = drawBrush;
61
-
62
- const getBrushBorder = (brush, selectionPadding) => {
63
- const brushPoints = _fp.default.flatMap(points => points, brush.points);
64
-
65
- const minX = _fp.default.flow(_fp.default.map(point => point[0]), _fp.default.min, _fp.default.add(-selectionPadding))(brushPoints);
66
-
67
- const maxX = _fp.default.flow(_fp.default.map(point => point[0]), _fp.default.max, _fp.default.add(selectionPadding))(brushPoints);
68
-
69
- const minY = _fp.default.flow(_fp.default.map(point => point[1]), _fp.default.min, _fp.default.add(-selectionPadding))(brushPoints);
70
-
71
- const maxY = _fp.default.flow(_fp.default.map(point => point[1]), _fp.default.max, _fp.default.add(selectionPadding))(brushPoints);
72
-
73
- return {
74
- x: minX,
75
- width: maxX - minX,
76
- y: minY,
77
- height: maxY - minY
78
- };
79
- };
80
-
81
- exports.getBrushBorder = getBrushBorder;
82
-
83
- const resizeBrush = (cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding, keepRatio) => {
84
- const {
85
- center,
86
- borders
87
- } = (0, _2.getShapeInfos)(originalShape, selectionPadding);
88
- const cursorPositionBeforeResize = (0, _intersect.getPointPositionAfterCanvasTransformation)(cursorPosition, originalShape.rotation, center, canvasOffset);
89
- const scaledWidth = selectionMode.anchor[0] === 0.5 ? 1 : selectionMode.anchor[0] === 0 ? (borders.x + borders.width - cursorPositionBeforeResize[0] + selectionPadding * -2) / (borders.width + selectionPadding * -2) : (cursorPositionBeforeResize[0] - borders.x - selectionPadding * 2) / (borders.width - selectionPadding * 2);
90
- const scaledHeight = selectionMode.anchor[1] === 0.5 ? 1 : selectionMode.anchor[1] === 0 ? (borders.y + borders.height - cursorPositionBeforeResize[1] + selectionPadding * -2) / (borders.height + selectionPadding * -2) : (cursorPositionBeforeResize[1] - borders.y - selectionPadding * 2) / (borders.height - selectionPadding * 2);
91
- const [widthWithRatio, heightWithRatio] = keepRatio ? (0, _transform.getNormalizedSize)(1, 1, scaledWidth, scaledHeight) : [scaledWidth, scaledHeight];
92
- const shapeWithNewDimensions = { ...originalShape,
93
- points: originalShape.points.map(points => {
94
- return points.map(point => [(point[0] - borders.x) * widthWithRatio + borders.x, (point[1] - borders.y) * heightWithRatio + borders.y]);
95
- })
96
- };
97
- const {
98
- center: shapeWithNewDimensionsCenter,
99
- borders: shapeWithNewDimensionsBorders
100
- } = (0, _2.getShapeInfos)(shapeWithNewDimensions, selectionPadding);
101
- const [oppTrueX, oppTrueY] = (0, _rectangle.getRectOppositeAnchorAbsolutePosition)(selectionMode.anchor, center, { ...originalShape,
102
- ...borders
103
- }, canvasOffset);
104
- const [newOppTrueX, newOppTrueY] = (0, _rectangle.getRectOppositeAnchorAbsolutePosition)(selectionMode.anchor, shapeWithNewDimensionsCenter, { ...shapeWithNewDimensions,
105
- ...shapeWithNewDimensionsBorders
106
- }, canvasOffset, [widthWithRatio < 0, heightWithRatio < 0]);
107
- return { ...shapeWithNewDimensions,
108
- points: shapeWithNewDimensions.points.map(coord => coord.map(_ref => {
109
- let [x, y] = _ref;
110
- return [x - (newOppTrueX - oppTrueX), y - (newOppTrueY - oppTrueY)];
111
- }))
112
- };
113
- };
114
-
115
- exports.resizeBrush = resizeBrush;
116
-
117
- const addNewPointToShape = (shape, cursorPosition) => {
118
- return { ...shape,
119
- ...{
120
- points: _fp.default.set(shape.points.length - 1, [...shape.points[shape.points.length - 1], [Math.round(cursorPosition[0]), Math.round(cursorPosition[1])]], shape.points)
121
- }
122
- };
123
- };
124
-
125
- exports.addNewPointToShape = addNewPointToShape;
126
-
127
- const addNewPointGroupToShape = (shape, cursorPosition) => {
128
- return { ...shape,
129
- ...{
130
- points: _fp.default.set(shape.points.length, [[Math.round(cursorPosition[0]), Math.round(cursorPosition[1])]], shape.points)
131
- }
132
- };
133
- };
134
-
135
- exports.addNewPointGroupToShape = addNewPointGroupToShape;
@@ -1,93 +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.resizeCircle = exports.getCircleBorder = exports.drawCircle = exports.createCircle = void 0;
9
-
10
- var _fp = _interopRequireDefault(require("lodash/fp"));
11
-
12
- var _canvas = require("../canvas");
13
-
14
- var _intersect = require("../intersect");
15
-
16
- var _2 = require(".");
17
-
18
- const createCircle = (shape, cursorPosition) => {
19
- return {
20
- toolId: shape.id,
21
- type: shape.type,
22
- id: _fp.default.uniqueId("".concat(shape.type, "_")),
23
- x: cursorPosition[0],
24
- y: cursorPosition[1],
25
- radius: 1,
26
- rotation: 0,
27
- style: {
28
- globalAlpha: shape.settings.opacity.default,
29
- fillColor: shape.settings.fillColor.default,
30
- strokeColor: shape.settings.strokeColor.default,
31
- lineWidth: shape.settings.lineWidth.default,
32
- lineDash: shape.settings.lineDash.default
33
- }
34
- };
35
- };
36
-
37
- exports.createCircle = createCircle;
38
-
39
- const drawCircle = (ctx, circle) => {
40
- var _circle$style, _circle$style2;
41
-
42
- (0, _canvas.updateCanvasContext)(ctx, circle.style);
43
- ctx.beginPath();
44
- ctx.arc(circle.x, circle.y, circle.radius, 0, 2 * Math.PI);
45
- ((_circle$style = circle.style) === null || _circle$style === void 0 ? void 0 : _circle$style.fillColor) !== 'transparent' && ctx.fill();
46
- ((_circle$style2 = circle.style) === null || _circle$style2 === void 0 ? void 0 : _circle$style2.strokeColor) !== 'transparent' && ctx.stroke();
47
- };
48
-
49
- exports.drawCircle = drawCircle;
50
-
51
- const getCircleBorder = (circle, selectionPadding) => {
52
- return {
53
- x: circle.x - circle.radius - selectionPadding,
54
- width: (circle.radius + selectionPadding) * 2,
55
- y: circle.y - circle.radius - selectionPadding,
56
- height: (circle.radius + selectionPadding) * 2
57
- };
58
- };
59
-
60
- exports.getCircleBorder = getCircleBorder;
61
-
62
- const getCircleOppositeAnchorAbsolutePosition = function (anchor, center, shape, canvasOffset) {
63
- let [negW, negH] = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [false, false];
64
- const oppositeX = anchor[0] === 0.5 ? shape.x : anchor[0] === 0 ? shape.x + (negW ? -shape.radius : shape.radius) : shape.x + (negW ? shape.radius : -shape.radius);
65
- const oppositeY = anchor[1] === 0.5 ? shape.y : anchor[1] === 0 ? shape.y + (negH ? -shape.radius : shape.radius) : shape.y + (negH ? shape.radius : -shape.radius);
66
- return (0, _intersect.getPointPositionBeforeCanvasTransformation)([oppositeX, oppositeY], shape.rotation, center, canvasOffset);
67
- };
68
-
69
- const resizeCircle = (cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding) => {
70
- const {
71
- center,
72
- borders
73
- } = (0, _2.getShapeInfos)(originalShape, selectionPadding);
74
- const cursorPositionBeforeResize = (0, _intersect.getPointPositionAfterCanvasTransformation)(cursorPosition, originalShape.rotation, center, canvasOffset);
75
- const newCursorPosition = [cursorPositionBeforeResize[0], cursorPositionBeforeResize[1]];
76
- const scaledRadius = selectionMode.anchor[1] === 0.5 ? (selectionMode.anchor[0] === 0 ? borders.x + borders.width - newCursorPosition[0] + selectionPadding * (selectionMode.anchor[0] === 0 ? -2 : 2) : newCursorPosition[0] - borders.x - selectionPadding * (selectionMode.anchor[0] === 0 ? -2 : 2)) / 2 : (selectionMode.anchor[1] === 0 ? borders.y + borders.height - newCursorPosition[1] + selectionPadding * (selectionMode.anchor[1] === 0 ? -2 : 2) : newCursorPosition[1] - borders.y - selectionPadding * (selectionMode.anchor[1] === 0 ? -2 : 2)) / 2;
77
- const shapeWithNewDimensions = { ...originalShape,
78
- ...{
79
- radius: Math.abs(scaledRadius)
80
- }
81
- };
82
- const {
83
- center: shapeWithNewDimensionsCenter
84
- } = (0, _2.getShapeInfos)(shapeWithNewDimensions, selectionPadding);
85
- const [oppTrueX, oppTrueY] = getCircleOppositeAnchorAbsolutePosition(selectionMode.anchor, center, originalShape, canvasOffset);
86
- const [newOppTrueX, newOppTrueY] = getCircleOppositeAnchorAbsolutePosition(selectionMode.anchor, shapeWithNewDimensionsCenter, shapeWithNewDimensions, canvasOffset, [scaledRadius < 0, scaledRadius < 0]);
87
- return { ...shapeWithNewDimensions,
88
- x: shapeWithNewDimensions.x - (newOppTrueX - oppTrueX),
89
- y: shapeWithNewDimensions.y - (newOppTrueY - oppTrueY)
90
- };
91
- };
92
-
93
- exports.resizeCircle = resizeCircle;
@@ -1,55 +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.getCurveBorder = exports.drawCurve = exports.createCurve = void 0;
9
-
10
- var _fp = _interopRequireDefault(require("lodash/fp"));
11
-
12
- var _canvas = require("../canvas");
13
-
14
- var _polygon = require("./polygon");
15
-
16
- const createCurve = (shape, cursorPosition) => {
17
- return {
18
- toolId: shape.id,
19
- type: shape.type,
20
- id: _fp.default.uniqueId("".concat(shape.type, "_")),
21
- points: _fp.default.flow(_fp.default.range(0), _fp.default.map(() => cursorPosition))(shape.settings.pointsCount.default),
22
- rotation: 0,
23
- style: {
24
- globalAlpha: shape.settings.opacity.default,
25
- fillColor: shape.settings.fillColor.default,
26
- strokeColor: shape.settings.strokeColor.default,
27
- lineWidth: shape.settings.lineWidth.default,
28
- lineDash: shape.settings.lineDash.default,
29
- pointsCount: shape.settings.pointsCount.default
30
- }
31
- };
32
- };
33
-
34
- exports.createCurve = createCurve;
35
-
36
- const drawCurve = (ctx, curve) => {
37
- var _curve$style, _curve$style2;
38
-
39
- if (curve.points.length < 3) return;
40
- (0, _canvas.updateCanvasContext)(ctx, curve.style);
41
- if (ctx.globalAlpha === 0) return;
42
- ctx.beginPath();
43
- ctx.moveTo(...curve.points[0]);
44
-
45
- for (let i = 1; i < curve.points.length - 1; i++) {
46
- ctx.quadraticCurveTo(...curve.points[i], curve.points.length - 2 === i ? curve.points[i + 1][0] : (curve.points[i + 1][0] - curve.points[i][0]) / 2 + curve.points[i][0], curve.points.length - 2 === i ? curve.points[i + 1][1] : (curve.points[i + 1][1] - curve.points[i][1]) / 2 + curve.points[i][1]);
47
- }
48
-
49
- ((_curve$style = curve.style) === null || _curve$style === void 0 ? void 0 : _curve$style.fillColor) !== 'transparent' && ctx.fill();
50
- ((_curve$style2 = curve.style) === null || _curve$style2 === void 0 ? void 0 : _curve$style2.strokeColor) !== 'transparent' && ctx.stroke();
51
- };
52
-
53
- exports.drawCurve = drawCurve;
54
- const getCurveBorder = _polygon.getPolygonBorder;
55
- exports.getCurveBorder = getCurveBorder;
@@ -1,73 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.drawSelectionDefault = void 0;
7
-
8
- var _shapes = require("../../constants/shapes");
9
-
10
- var _ = require(".");
11
-
12
- var _circle = require("./circle");
13
-
14
- var _line = require("./line");
15
-
16
- var _rectangle = require("./rectangle");
17
-
18
- const drawSelectionDefault = _ref => {
19
- let {
20
- ctx,
21
- shape,
22
- withAnchors,
23
- selectionPadding,
24
- selectionWidth,
25
- selectionColor,
26
- currentScale = 1
27
- } = _ref;
28
- const {
29
- borders
30
- } = (0, _.getShapeInfos)(shape, selectionPadding / currentScale);
31
- (0, _rectangle.drawRect)(ctx, { ...borders,
32
- style: {
33
- fillColor: 'transparent',
34
- strokeColor: selectionColor,
35
- lineWidth: selectionWidth / currentScale
36
- }
37
- });
38
- if (!withAnchors || shape.locked) return;
39
- (0, _line.drawLine)(ctx, {
40
- points: [[borders.x + borders.width / 2, borders.y], [borders.x + borders.width / 2, borders.y - _shapes.SELECTION_ANCHOR_SIZE / 2 - _shapes.SELECTION_ROTATED_ANCHOR_POSITION / currentScale]],
41
- style: {
42
- fillColor: 'transparent',
43
- strokeColor: selectionColor,
44
- lineWidth: selectionWidth / currentScale
45
- }
46
- });
47
-
48
- for (const anchorPosition of _shapes.SELECTION_RESIZE_ANCHOR_POSITIONS) {
49
- (0, _circle.drawCircle)(ctx, {
50
- x: borders.x + borders.width * anchorPosition[0],
51
- y: borders.y + borders.height * anchorPosition[1],
52
- radius: _shapes.SELECTION_ANCHOR_SIZE / 2 / currentScale,
53
- style: {
54
- fillColor: 'rgb(255,255,255)',
55
- strokeColor: 'rgb(150,150,150)',
56
- lineWidth: selectionWidth / currentScale
57
- }
58
- });
59
- }
60
-
61
- (0, _circle.drawCircle)(ctx, {
62
- x: borders.x + borders.width / 2,
63
- y: borders.y - _shapes.SELECTION_ANCHOR_SIZE / 2 - _shapes.SELECTION_ROTATED_ANCHOR_POSITION / currentScale,
64
- radius: _shapes.SELECTION_ANCHOR_SIZE / 2 / currentScale,
65
- style: {
66
- fillColor: 'rgb(255,255,255)',
67
- strokeColor: 'rgb(150,150,150)',
68
- lineWidth: selectionWidth / currentScale
69
- }
70
- });
71
- };
72
-
73
- exports.drawSelectionDefault = drawSelectionDefault;