@yorab/react-paint 0.6.6 → 0.7.2

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 (64) hide show
  1. package/README.md +3 -5
  2. package/dist/components/App.js +30 -57
  3. package/dist/components/Canvas.js +32 -40
  4. package/dist/components/common/Button.js +4 -4
  5. package/dist/components/common/Loading.js +8 -5
  6. package/dist/components/common/Modal.js +3 -3
  7. package/dist/components/common/Panel.js +7 -11
  8. package/dist/components/common/Snackbar.js +6 -6
  9. package/dist/components/settings/ColorField.js +3 -3
  10. package/dist/components/settings/FontFamilyField.js +1 -1
  11. package/dist/components/settings/Layouts.js +36 -26
  12. package/dist/components/settings/LineArrowField.js +3 -3
  13. package/dist/components/settings/LineTypeField.js +2 -2
  14. package/dist/components/settings/RangeField.js +1 -1
  15. package/dist/components/settings/SelectField.js +1 -1
  16. package/dist/components/settings/SettingsBar.js +9 -7
  17. package/dist/components/toolbox/EditTextBox.js +19 -9
  18. package/dist/components/toolbox/MenuGroup.js +9 -7
  19. package/dist/components/toolbox/Toolbar.js +7 -9
  20. package/dist/components/toolbox/ToolbarGroup.js +24 -11
  21. package/dist/constants/app.js +51 -0
  22. package/dist/constants/icons.js +2 -8
  23. package/dist/constants/loading.js +8 -0
  24. package/dist/constants/shapes.js +4 -2
  25. package/dist/constants/snackbar.js +6 -14
  26. package/dist/constants/style.js +12 -9
  27. package/dist/constants/tools.js +20 -24
  28. package/dist/hooks/useComponent.js +3 -1
  29. package/dist/hooks/useDrawableCanvas.js +35 -37
  30. package/dist/hooks/useKeyboard.js +60 -33
  31. package/dist/hooks/useShapes.js +2 -2
  32. package/dist/styles.css +16 -13
  33. package/dist/types/Mode.js +1 -13
  34. package/dist/types/Shapes.js +1 -17
  35. package/dist/types/snackbar.js +5 -0
  36. package/dist/types/tools.js +1 -18
  37. package/dist/utils/canvas.js +49 -0
  38. package/dist/utils/data.js +5 -248
  39. package/dist/utils/dom.js +12 -0
  40. package/dist/utils/file.js +12 -7
  41. package/dist/utils/intersect.js +29 -66
  42. package/dist/utils/migration.js +59 -0
  43. package/dist/utils/selection.js +9 -11
  44. package/dist/utils/shapes/brush.js +135 -0
  45. package/dist/utils/shapes/circle.js +93 -0
  46. package/dist/utils/shapes/curve.js +55 -0
  47. package/dist/utils/shapes/default.js +73 -0
  48. package/dist/utils/shapes/ellipse.js +101 -0
  49. package/dist/utils/shapes/grid.js +36 -0
  50. package/dist/utils/shapes/index.js +341 -0
  51. package/dist/utils/shapes/line.js +179 -0
  52. package/dist/utils/shapes/picture.js +88 -0
  53. package/dist/utils/shapes/polygon.js +69 -0
  54. package/dist/utils/shapes/rectangle.js +100 -0
  55. package/dist/utils/shapes/text.js +128 -0
  56. package/dist/utils/shapes/triangle.js +24 -0
  57. package/dist/utils/style.js +10 -12
  58. package/dist/utils/toolbar.js +9 -11
  59. package/dist/utils/transform.js +25 -261
  60. package/dist/utils/trigo.js +42 -0
  61. package/package.json +7 -8
  62. package/dist/types/keyboard.js +0 -28
  63. package/dist/utils/draw.js +0 -431
  64. package/dist/utils/shapeData.js +0 -155
@@ -1,431 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.drawTriangle = exports.drawText = exports.drawShape = exports.drawSelection = exports.drawRect = exports.drawPolygon = exports.drawPicture = exports.drawLine = exports.drawEllipse = exports.drawCurve = exports.drawCircle = exports.drawBrush = void 0;
7
-
8
- var _shapes = require("../constants/shapes");
9
-
10
- var _style = require("../constants/style");
11
-
12
- var _intersect = require("./intersect");
13
-
14
- var _shapeData = require("./shapeData");
15
-
16
- const applyShapeTransformations = (ctx, marker, responsiveScale, canvasOffset, selectionPadding) => {
17
- ctx.save();
18
- ctx.scale(responsiveScale, responsiveScale);
19
- ctx.translate(marker.translation[0] + canvasOffset[0], marker.translation[1] + canvasOffset[1]);
20
-
21
- if (marker.rotation !== 0) {
22
- const {
23
- center
24
- } = (0, _shapeData.getShapeInfos)(marker, selectionPadding);
25
- ctx.translate(center[0], center[1]);
26
- ctx.rotate(marker.rotation);
27
- ctx.translate(-center[0], -center[1]);
28
- }
29
- };
30
-
31
- const restoreShapeTransformations = ctx => {
32
- ctx.restore();
33
- };
34
-
35
- const updateDrawStyle = function (ctx) {
36
- let style = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
37
- const {
38
- fillColor = 'transparent',
39
- globalAlpha = 100,
40
- strokeColor = _shapes.SELECTION_DEFAULT_COLOR,
41
- lineWidth = _shapes.SELECTION_DEFAULT_WIDTH,
42
- lineDash = 0
43
- } = style;
44
- ctx.lineCap = 'round';
45
- ctx.lineJoin = 'round';
46
- globalAlpha !== undefined && (ctx.globalAlpha = globalAlpha / 100);
47
- fillColor && (ctx.fillStyle = fillColor);
48
- strokeColor && (ctx.strokeStyle = strokeColor);
49
- lineWidth && (ctx.lineWidth = lineWidth);
50
- lineDash !== undefined && lineWidth && ctx.setLineDash([_style.LINE_DASH_DATA[lineDash][0] * lineWidth, _style.LINE_DASH_DATA[lineDash][1] * lineWidth]);
51
- };
52
-
53
- const drawBrush = (ctx, brush) => {
54
- var _brush$style;
55
-
56
- if (brush.points.length < 1) return;
57
- updateDrawStyle(ctx, brush.style);
58
- ctx.beginPath();
59
- if (((_brush$style = brush.style) === null || _brush$style === void 0 ? void 0 : _brush$style.strokeColor) === 'transparent' || ctx.globalAlpha === 0) return;
60
- brush.points.forEach(points => {
61
- if (points.length === 1) {
62
- ctx.rect(points[0][0], points[0][1], 1, 1);
63
- } else {
64
- ctx.moveTo(...points[0]);
65
- points.slice(1).forEach(point => {
66
- ctx.lineTo(...point);
67
- });
68
- }
69
- });
70
- ctx.stroke();
71
- };
72
-
73
- exports.drawBrush = drawBrush;
74
-
75
- const drawTriangle = (ctx, triangle) => {
76
- var _triangle$style, _triangle$style2;
77
-
78
- updateDrawStyle(ctx, triangle.style);
79
- if (ctx.globalAlpha === 0) return;
80
- ctx.beginPath();
81
- ctx.moveTo(...triangle.points[0]);
82
- ctx.lineTo(...triangle.points[1]);
83
- ctx.lineTo(...triangle.points[2]);
84
- ctx.lineTo(...triangle.points[0]);
85
- ((_triangle$style = triangle.style) === null || _triangle$style === void 0 ? void 0 : _triangle$style.fillColor) !== 'transparent' && ctx.fill();
86
- ((_triangle$style2 = triangle.style) === null || _triangle$style2 === void 0 ? void 0 : _triangle$style2.strokeColor) !== 'transparent' && ctx.stroke();
87
- };
88
-
89
- exports.drawTriangle = drawTriangle;
90
-
91
- const buildTriangleOnLine = (center, angle, lineStyle) => {
92
- var _lineStyle$style$line, _lineStyle$style, _lineStyle$style$line2, _lineStyle$style2, _lineStyle$style$line3, _lineStyle$style3, _lineStyle$style$line4, _lineStyle$style4, _lineStyle$style$line5, _lineStyle$style5, _lineStyle$style6;
93
-
94
- const trianglePoints = [(0, _intersect.applyRotationToVector)([0, -(10 + ((_lineStyle$style$line = (_lineStyle$style = lineStyle.style) === null || _lineStyle$style === void 0 ? void 0 : _lineStyle$style.lineWidth) !== null && _lineStyle$style$line !== void 0 ? _lineStyle$style$line : 0) * 1)], angle), (0, _intersect.applyRotationToVector)([-(5 + ((_lineStyle$style$line2 = (_lineStyle$style2 = lineStyle.style) === null || _lineStyle$style2 === void 0 ? void 0 : _lineStyle$style2.lineWidth) !== null && _lineStyle$style$line2 !== void 0 ? _lineStyle$style$line2 : 0) * 1), 5 + ((_lineStyle$style$line3 = (_lineStyle$style3 = lineStyle.style) === null || _lineStyle$style3 === void 0 ? void 0 : _lineStyle$style3.lineWidth) !== null && _lineStyle$style$line3 !== void 0 ? _lineStyle$style$line3 : 0) * 2], angle), (0, _intersect.applyRotationToVector)([5 + ((_lineStyle$style$line4 = (_lineStyle$style4 = lineStyle.style) === null || _lineStyle$style4 === void 0 ? void 0 : _lineStyle$style4.lineWidth) !== null && _lineStyle$style$line4 !== void 0 ? _lineStyle$style$line4 : 0) * 1, 5 + ((_lineStyle$style$line5 = (_lineStyle$style5 = lineStyle.style) === null || _lineStyle$style5 === void 0 ? void 0 : _lineStyle$style5.lineWidth) !== null && _lineStyle$style$line5 !== void 0 ? _lineStyle$style$line5 : 0) * 2], angle)];
95
- return {
96
- points: [[center[0] + trianglePoints[0][0], center[1] + trianglePoints[0][1]], [center[0] + trianglePoints[1][0], center[1] + trianglePoints[1][1]], [center[0] + trianglePoints[2][0], center[1] + trianglePoints[2][1]]],
97
- style: { ...lineStyle.style,
98
- fillColor: (_lineStyle$style6 = lineStyle.style) === null || _lineStyle$style6 === void 0 ? void 0 : _lineStyle$style6.strokeColor,
99
- strokeColor: 'transparent'
100
- }
101
- };
102
- };
103
-
104
- const drawLine = (ctx, line) => {
105
- var _line$style, _line$style2, _line$style3, _line$style4, _line$style5, _line$style6;
106
-
107
- updateDrawStyle(ctx, line.style);
108
- if (ctx.globalAlpha === 0) return;
109
- ctx.beginPath();
110
- ctx.moveTo(...line.points[0]);
111
- ctx.lineTo(...line.points[1]);
112
- ((_line$style = line.style) === null || _line$style === void 0 ? void 0 : _line$style.fillColor) !== 'transparent' && ctx.fill();
113
- ((_line$style2 = line.style) === null || _line$style2 === void 0 ? void 0 : _line$style2.strokeColor) !== 'transparent' && ctx.stroke();
114
-
115
- if (((_line$style3 = line.style) === null || _line$style3 === void 0 ? void 0 : _line$style3.lineArrow) === 1 || ((_line$style4 = line.style) === null || _line$style4 === void 0 ? void 0 : _line$style4.lineArrow) === 3) {
116
- const rotation = Math.PI / 2 - Math.atan2(line.points[1][1] - line.points[0][1], line.points[1][0] - line.points[0][0]);
117
- drawTriangle(ctx, buildTriangleOnLine(line.points[0], rotation, {
118
- style: line.style
119
- }));
120
- }
121
-
122
- if (((_line$style5 = line.style) === null || _line$style5 === void 0 ? void 0 : _line$style5.lineArrow) === 2 || ((_line$style6 = line.style) === null || _line$style6 === void 0 ? void 0 : _line$style6.lineArrow) === 3) {
123
- const rotation = Math.PI / 2 - Math.atan2(line.points[0][1] - line.points[1][1], line.points[0][0] - line.points[1][0]);
124
- drawTriangle(ctx, buildTriangleOnLine(line.points[1], rotation, {
125
- style: line.style
126
- }));
127
- }
128
- };
129
-
130
- exports.drawLine = drawLine;
131
-
132
- const drawPolygon = (ctx, polygon) => {
133
- var _polygon$style, _polygon$style2;
134
-
135
- if (polygon.points.length < 1) return;
136
- updateDrawStyle(ctx, polygon.style);
137
- if (ctx.globalAlpha === 0) return;
138
- ctx.beginPath();
139
- ctx.moveTo(...polygon.points[0]);
140
- polygon.points.slice(1).forEach(point => {
141
- ctx.lineTo(...point);
142
- });
143
- ctx.lineTo(...polygon.points[0]);
144
- ((_polygon$style = polygon.style) === null || _polygon$style === void 0 ? void 0 : _polygon$style.fillColor) !== 'transparent' && ctx.fill();
145
- ((_polygon$style2 = polygon.style) === null || _polygon$style2 === void 0 ? void 0 : _polygon$style2.strokeColor) !== 'transparent' && ctx.stroke();
146
- };
147
-
148
- exports.drawPolygon = drawPolygon;
149
-
150
- const drawCurve = (ctx, curve) => {
151
- var _curve$style, _curve$style2;
152
-
153
- if (curve.points.length < 3) return;
154
- updateDrawStyle(ctx, curve.style);
155
- if (ctx.globalAlpha === 0) return;
156
- ctx.beginPath();
157
- ctx.moveTo(...curve.points[0]);
158
-
159
- for (let i = 1; i < curve.points.length - 1; i++) {
160
- 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]);
161
- }
162
-
163
- ((_curve$style = curve.style) === null || _curve$style === void 0 ? void 0 : _curve$style.fillColor) !== 'transparent' && ctx.fill();
164
- ((_curve$style2 = curve.style) === null || _curve$style2 === void 0 ? void 0 : _curve$style2.strokeColor) !== 'transparent' && ctx.stroke();
165
- };
166
-
167
- exports.drawCurve = drawCurve;
168
-
169
- const drawCircle = (ctx, circle) => {
170
- var _circle$style, _circle$style2;
171
-
172
- updateDrawStyle(ctx, circle.style);
173
- ctx.beginPath();
174
- ctx.arc(circle.x, circle.y, circle.radius, 0, 2 * Math.PI);
175
- ((_circle$style = circle.style) === null || _circle$style === void 0 ? void 0 : _circle$style.fillColor) !== 'transparent' && ctx.fill();
176
- ((_circle$style2 = circle.style) === null || _circle$style2 === void 0 ? void 0 : _circle$style2.strokeColor) !== 'transparent' && ctx.stroke();
177
- };
178
-
179
- exports.drawCircle = drawCircle;
180
-
181
- const drawEllipse = (ctx, ellipse) => {
182
- var _ellipse$style, _ellipse$style2;
183
-
184
- updateDrawStyle(ctx, ellipse.style);
185
- if (ctx.globalAlpha === 0) return;
186
- ctx.beginPath();
187
- ctx.ellipse(ellipse.x, ellipse.y, ellipse.radiusX, ellipse.radiusY, 0, 0, 2 * Math.PI);
188
- ((_ellipse$style = ellipse.style) === null || _ellipse$style === void 0 ? void 0 : _ellipse$style.fillColor) !== 'transparent' && ctx.fill();
189
- ((_ellipse$style2 = ellipse.style) === null || _ellipse$style2 === void 0 ? void 0 : _ellipse$style2.strokeColor) !== 'transparent' && ctx.stroke();
190
- };
191
-
192
- exports.drawEllipse = drawEllipse;
193
-
194
- const drawRect = (ctx, rect) => {
195
- var _rect$style, _rect$style2;
196
-
197
- updateDrawStyle(ctx, rect.style);
198
- if (ctx.globalAlpha === 0) return;
199
- ctx.beginPath();
200
- ctx.rect(rect.x, rect.y, rect.width, rect.height);
201
- ((_rect$style = rect.style) === null || _rect$style === void 0 ? void 0 : _rect$style.fillColor) !== 'transparent' && ctx.fill();
202
- ((_rect$style2 = rect.style) === null || _rect$style2 === void 0 ? void 0 : _rect$style2.strokeColor) !== 'transparent' && ctx.stroke();
203
- };
204
-
205
- exports.drawRect = drawRect;
206
-
207
- const drawText = (ctx, text) => {
208
- var _text$style, _text$style2, _text$style3, _text$style$fontFamil, _text$style4;
209
-
210
- updateDrawStyle(ctx, text.style);
211
- if (ctx.globalAlpha === 0 || !((_text$style = text.style) !== null && _text$style !== void 0 && _text$style.strokeColor) || text.style.strokeColor === 'transparent') return;
212
- ctx.font = "".concat((_text$style2 = text.style) !== null && _text$style2 !== void 0 && _text$style2.fontItalic ? 'italic' : '', " ").concat((_text$style3 = text.style) !== null && _text$style3 !== void 0 && _text$style3.fontBold ? 'bold' : '', " ").concat(text.fontSize, "px ").concat((_text$style$fontFamil = (_text$style4 = text.style) === null || _text$style4 === void 0 ? void 0 : _text$style4.fontFamily) !== null && _text$style$fontFamil !== void 0 ? _text$style$fontFamil : _style.STYLE_FONT_DEFAULT);
213
- ctx.textBaseline = 'top';
214
- ctx.fillStyle = text.style.strokeColor;
215
-
216
- for (let i = 0; i < text.value.length; i++) {
217
- ctx.fillText(text.value[i], text.x, text.y + i * text.fontSize, text.width);
218
- }
219
- };
220
-
221
- exports.drawText = drawText;
222
-
223
- const drawPicture = (ctx, picture) => {
224
- updateDrawStyle(ctx, picture.style);
225
- if (ctx.globalAlpha === 0) return;
226
- ctx.beginPath();
227
- ctx.drawImage(picture.img, picture.x, picture.y, picture.width, picture.height);
228
- };
229
-
230
- exports.drawPicture = drawPicture;
231
-
232
- const drawShape = (ctx, shape, responsiveScale, canvasOffset, selectionPadding) => {
233
- if (shape.visible === false) return;
234
- applyShapeTransformations(ctx, shape, responsiveScale, canvasOffset, selectionPadding);
235
-
236
- switch (shape.type) {
237
- case 'brush':
238
- drawBrush(ctx, shape);
239
- break;
240
-
241
- case 'text':
242
- drawText(ctx, shape);
243
- break;
244
-
245
- case 'line':
246
- drawLine(ctx, shape);
247
- break;
248
-
249
- case 'polygon':
250
- drawPolygon(ctx, shape);
251
- break;
252
-
253
- case 'curve':
254
- drawCurve(ctx, shape);
255
- break;
256
-
257
- case 'circle':
258
- drawCircle(ctx, shape);
259
- break;
260
-
261
- case 'ellipse':
262
- drawEllipse(ctx, shape);
263
- break;
264
-
265
- case 'rect':
266
- case 'square':
267
- drawRect(ctx, shape);
268
- break;
269
-
270
- case 'picture':
271
- drawPicture(ctx, shape);
272
- break;
273
- }
274
-
275
- restoreShapeTransformations(ctx);
276
- };
277
-
278
- exports.drawShape = drawShape;
279
-
280
- const drawSelectionDefault = _ref => {
281
- let {
282
- ctx,
283
- shape,
284
- withAnchors,
285
- selectionPadding,
286
- selectionWidth,
287
- selectionColor,
288
- currentScale = 1
289
- } = _ref;
290
- const {
291
- borders
292
- } = (0, _shapeData.getShapeInfos)(shape, selectionPadding / currentScale);
293
- drawRect(ctx, { ...borders,
294
- style: {
295
- fillColor: 'transparent',
296
- strokeColor: selectionColor,
297
- lineWidth: selectionWidth / currentScale
298
- }
299
- });
300
- if (!withAnchors || shape.locked) return;
301
- drawLine(ctx, {
302
- 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]],
303
- style: {
304
- fillColor: 'transparent',
305
- strokeColor: selectionColor,
306
- lineWidth: selectionWidth / currentScale
307
- }
308
- });
309
-
310
- for (const anchorPosition of _shapes.SELECTION_RESIZE_ANCHOR_POSITIONS) {
311
- drawCircle(ctx, {
312
- x: borders.x + borders.width * anchorPosition[0],
313
- y: borders.y + borders.height * anchorPosition[1],
314
- radius: _shapes.SELECTION_ANCHOR_SIZE / 2 / currentScale,
315
- style: {
316
- fillColor: 'rgb(255,255,255)',
317
- strokeColor: 'rgb(150,150,150)',
318
- lineWidth: selectionWidth / currentScale
319
- }
320
- });
321
- }
322
-
323
- drawCircle(ctx, {
324
- x: borders.x + borders.width / 2,
325
- y: borders.y - _shapes.SELECTION_ANCHOR_SIZE / 2 - _shapes.SELECTION_ROTATED_ANCHOR_POSITION / currentScale,
326
- radius: _shapes.SELECTION_ANCHOR_SIZE / 2 / currentScale,
327
- style: {
328
- fillColor: 'rgb(255,255,255)',
329
- strokeColor: 'rgb(150,150,150)',
330
- lineWidth: selectionWidth / currentScale
331
- }
332
- });
333
- };
334
-
335
- const drawLineSelection = _ref2 => {
336
- let {
337
- ctx,
338
- shape,
339
- withAnchors,
340
- selectionPadding,
341
- selectionWidth,
342
- selectionColor,
343
- currentScale = 1
344
- } = _ref2;
345
- const {
346
- borders
347
- } = (0, _shapeData.getShapeInfos)(shape, selectionPadding);
348
- drawRect(ctx, { ...borders,
349
- style: {
350
- fillColor: 'transparent',
351
- strokeColor: selectionColor,
352
- lineWidth: selectionWidth / currentScale
353
- }
354
- });
355
- if (!withAnchors || shape.locked) return;
356
-
357
- for (let i = 0; i < shape.points.length; i++) {
358
- const coordinate = shape.points[i];
359
-
360
- if (shape.type === 'curve' && i > 0 && i < shape.points.length - 1) {
361
- drawRect(ctx, {
362
- x: coordinate[0] - _shapes.SELECTION_ANCHOR_SIZE / 2,
363
- y: coordinate[1] - _shapes.SELECTION_ANCHOR_SIZE / 2,
364
- width: _shapes.SELECTION_ANCHOR_SIZE / currentScale,
365
- height: _shapes.SELECTION_ANCHOR_SIZE / currentScale,
366
- style: {
367
- fillColor: 'rgb(255,255,255)',
368
- strokeColor: 'rgb(150,150,150)',
369
- lineWidth: selectionWidth / currentScale
370
- }
371
- });
372
- } else {
373
- drawCircle(ctx, {
374
- x: coordinate[0],
375
- y: coordinate[1],
376
- radius: _shapes.SELECTION_ANCHOR_SIZE / 2 / currentScale,
377
- style: {
378
- fillColor: 'rgb(255,255,255)',
379
- strokeColor: 'rgb(150,150,150)',
380
- lineWidth: selectionWidth / currentScale
381
- }
382
- });
383
- }
384
- }
385
- };
386
-
387
- const drawSelection = _ref3 => {
388
- let {
389
- ctx,
390
- shape,
391
- scaleRatio = 1,
392
- canvasOffset,
393
- selectionPadding,
394
- selectionWidth,
395
- selectionColor,
396
- withAnchors = true
397
- } = _ref3;
398
- applyShapeTransformations(ctx, shape, scaleRatio, canvasOffset, selectionPadding);
399
-
400
- switch (shape.type) {
401
- case 'polygon':
402
- case 'line':
403
- case 'curve':
404
- drawLineSelection({
405
- ctx,
406
- shape,
407
- withAnchors,
408
- selectionPadding,
409
- selectionWidth,
410
- selectionColor,
411
- currentScale: scaleRatio
412
- });
413
- break;
414
-
415
- default:
416
- drawSelectionDefault({
417
- ctx,
418
- shape,
419
- withAnchors,
420
- selectionPadding,
421
- selectionWidth,
422
- selectionColor,
423
- currentScale: scaleRatio
424
- });
425
- break;
426
- }
427
-
428
- restoreShapeTransformations(ctx);
429
- };
430
-
431
- exports.drawSelection = drawSelection;
@@ -1,155 +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
- 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
- return {
18
- x,
19
- width,
20
- y,
21
- height
22
- };
23
- };
24
-
25
- const getBrushBorder = (brush, selectionPadding) => {
26
- const brushPoints = _fp.default.flatMap(points => points, brush.points);
27
-
28
- const minX = _fp.default.flow(_fp.default.map(point => point[0]), _fp.default.min, _fp.default.add(-selectionPadding))(brushPoints);
29
-
30
- const maxX = _fp.default.flow(_fp.default.map(point => point[0]), _fp.default.max, _fp.default.add(selectionPadding))(brushPoints);
31
-
32
- const minY = _fp.default.flow(_fp.default.map(point => point[1]), _fp.default.min, _fp.default.add(-selectionPadding))(brushPoints);
33
-
34
- const maxY = _fp.default.flow(_fp.default.map(point => point[1]), _fp.default.max, _fp.default.add(selectionPadding))(brushPoints);
35
-
36
- return {
37
- x: minX,
38
- width: maxX - minX,
39
- y: minY,
40
- height: maxY - minY
41
- };
42
- };
43
-
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);
46
-
47
- const maxX = _fp.default.flow(_fp.default.map(point => point[0]), _fp.default.max, _fp.default.add(selectionPadding))(polygon.points);
48
-
49
- const minY = _fp.default.flow(_fp.default.map(point => point[1]), _fp.default.min, _fp.default.add(-selectionPadding))(polygon.points);
50
-
51
- const maxY = _fp.default.flow(_fp.default.map(point => point[1]), _fp.default.max, _fp.default.add(selectionPadding))(polygon.points);
52
-
53
- return {
54
- x: minX,
55
- width: maxX - minX,
56
- y: minY,
57
- height: maxY - minY
58
- };
59
- };
60
-
61
- const getCurveBorder = getPolygonBorder;
62
-
63
- const getRectBorder = (rect, selectionPadding) => {
64
- return {
65
- x: rect.x - selectionPadding,
66
- width: rect.width + selectionPadding * 2,
67
- y: rect.y - selectionPadding,
68
- height: rect.height + selectionPadding * 2
69
- };
70
- };
71
-
72
- const getTextBorder = (text, selectionPadding) => {
73
- return {
74
- x: text.x - selectionPadding,
75
- width: text.width + selectionPadding * 2,
76
- y: text.y - selectionPadding,
77
- height: text.height + selectionPadding * 2
78
- };
79
- };
80
-
81
- const getPictureBorder = (picture, selectionPadding) => {
82
- return getRectBorder(picture, selectionPadding);
83
- };
84
-
85
- const getCircleBorder = (circle, selectionPadding) => {
86
- return {
87
- x: circle.x - circle.radius - selectionPadding,
88
- width: (circle.radius + selectionPadding) * 2,
89
- y: circle.y - circle.radius - selectionPadding,
90
- height: (circle.radius + selectionPadding) * 2
91
- };
92
- };
93
-
94
- const getEllipseBorder = (ellipse, selectionPadding) => {
95
- return {
96
- x: ellipse.x - ellipse.radiusX - selectionPadding,
97
- width: (ellipse.radiusX + selectionPadding) * 2,
98
- y: ellipse.y - ellipse.radiusY - selectionPadding,
99
- height: (ellipse.radiusY + selectionPadding) * 2
100
- };
101
- };
102
-
103
- const getShapeBorders = (marker, selectionPadding) => {
104
- switch (marker.type) {
105
- case 'brush':
106
- return getBrushBorder(marker, selectionPadding);
107
-
108
- case 'line':
109
- return getLineBorder(marker, selectionPadding);
110
-
111
- case 'polygon':
112
- return getPolygonBorder(marker, selectionPadding);
113
-
114
- case 'curve':
115
- return getCurveBorder(marker, selectionPadding);
116
-
117
- case 'circle':
118
- return getCircleBorder(marker, selectionPadding);
119
-
120
- case 'ellipse':
121
- return getEllipseBorder(marker, selectionPadding);
122
-
123
- case 'rect':
124
- case 'square':
125
- return getRectBorder(marker, selectionPadding);
126
-
127
- case 'text':
128
- return getTextBorder(marker, selectionPadding);
129
-
130
- case 'picture':
131
- return getPictureBorder(marker, selectionPadding);
132
- }
133
-
134
- return {
135
- x: 0,
136
- y: 0,
137
- width: 0,
138
- height: 0
139
- };
140
- };
141
-
142
- const getShapeCenter = borders => {
143
- return [borders.x + borders.width / 2, borders.y + borders.height / 2];
144
- };
145
-
146
- const getShapeInfos = (shape, selectionPadding) => {
147
- const borders = getShapeBorders(shape, selectionPadding);
148
- const center = getShapeCenter(borders);
149
- return {
150
- borders,
151
- center
152
- };
153
- };
154
-
155
- exports.getShapeInfos = getShapeInfos;