@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,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;
@@ -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;