@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.
- package/README.md +1 -11
- 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 +21 -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 +20 -0
- package/dist/hooks/useResizeObserver.d.ts +7 -0
- package/dist/hooks/useShapes.d.ts +26 -0
- package/dist/hooks/useSnackbar.d.ts +10 -0
- package/dist/react-paint.css +1 -0
- package/dist/react-paint.js +8887 -0
- package/dist/react-paint.umd.cjs +27 -0
- package/dist/types/Mode.d.ts +43 -0
- package/dist/types/Shapes.d.ts +128 -0
- package/dist/types/react.d.ts +7 -0
- package/dist/types/snackbar.d.ts +7 -0
- package/dist/types/tools.d.ts +125 -0
- package/dist/types/utils.d.ts +4 -0
- package/dist/utils/canvas.d.ts +10 -0
- package/dist/utils/data.d.ts +4 -0
- package/dist/utils/dom.d.ts +1 -0
- package/dist/utils/file.d.ts +10 -0
- package/dist/utils/grid.d.ts +3 -0
- package/dist/utils/intersect.d.ts +6 -0
- package/dist/utils/migration.d.ts +147 -0
- package/dist/utils/selection/lineSelection.d.ts +12 -0
- package/dist/utils/selection/rectSelection.d.ts +13 -0
- package/dist/utils/selection.d.ts +7 -0
- package/dist/utils/shapes/brush.d.ts +20 -0
- package/dist/utils/shapes/circle.d.ts +17 -0
- package/dist/utils/shapes/curve.d.ts +16 -0
- package/dist/utils/shapes/ellipse.d.ts +17 -0
- package/dist/utils/shapes/index.d.ts +29 -0
- package/dist/utils/shapes/line.d.ts +17 -0
- package/dist/utils/shapes/path.d.ts +9 -0
- package/dist/utils/shapes/picture.d.ts +12 -0
- package/dist/utils/shapes/polygon.d.ts +17 -0
- package/dist/utils/shapes/rectangle.d.ts +20 -0
- package/dist/utils/shapes/text.d.ts +19 -0
- package/dist/utils/shapes/triangle.d.ts +3 -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 +9 -0
- package/dist/utils/trigo.d.ts +16 -0
- package/package.json +52 -57
- 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 -177
- 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 -109
- 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
|
@@ -1,101 +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.resizeEllipse = exports.getEllipseBorder = exports.drawEllipse = exports.createEllipse = 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
|
-
const createEllipse = (shape, cursorPosition) => {
|
|
21
|
-
return {
|
|
22
|
-
toolId: shape.id,
|
|
23
|
-
type: shape.type,
|
|
24
|
-
id: _fp.default.uniqueId("".concat(shape.type, "_")),
|
|
25
|
-
x: cursorPosition[0],
|
|
26
|
-
y: cursorPosition[1],
|
|
27
|
-
radiusX: 1,
|
|
28
|
-
radiusY: 1,
|
|
29
|
-
rotation: 0,
|
|
30
|
-
style: {
|
|
31
|
-
globalAlpha: shape.settings.opacity.default,
|
|
32
|
-
fillColor: shape.settings.fillColor.default,
|
|
33
|
-
strokeColor: shape.settings.strokeColor.default,
|
|
34
|
-
lineWidth: shape.settings.lineWidth.default,
|
|
35
|
-
lineDash: shape.settings.lineDash.default
|
|
36
|
-
}
|
|
37
|
-
};
|
|
38
|
-
};
|
|
39
|
-
|
|
40
|
-
exports.createEllipse = createEllipse;
|
|
41
|
-
|
|
42
|
-
const drawEllipse = (ctx, ellipse) => {
|
|
43
|
-
var _ellipse$style, _ellipse$style2;
|
|
44
|
-
|
|
45
|
-
(0, _canvas.updateCanvasContext)(ctx, ellipse.style);
|
|
46
|
-
if (ctx.globalAlpha === 0) return;
|
|
47
|
-
ctx.beginPath();
|
|
48
|
-
ctx.ellipse(ellipse.x, ellipse.y, ellipse.radiusX, ellipse.radiusY, 0, 0, 2 * Math.PI);
|
|
49
|
-
((_ellipse$style = ellipse.style) === null || _ellipse$style === void 0 ? void 0 : _ellipse$style.fillColor) !== 'transparent' && ctx.fill();
|
|
50
|
-
((_ellipse$style2 = ellipse.style) === null || _ellipse$style2 === void 0 ? void 0 : _ellipse$style2.strokeColor) !== 'transparent' && ctx.stroke();
|
|
51
|
-
};
|
|
52
|
-
|
|
53
|
-
exports.drawEllipse = drawEllipse;
|
|
54
|
-
|
|
55
|
-
const getEllipseBorder = (ellipse, selectionPadding) => {
|
|
56
|
-
return {
|
|
57
|
-
x: ellipse.x - ellipse.radiusX - selectionPadding,
|
|
58
|
-
width: (ellipse.radiusX + selectionPadding) * 2,
|
|
59
|
-
y: ellipse.y - ellipse.radiusY - selectionPadding,
|
|
60
|
-
height: (ellipse.radiusY + selectionPadding) * 2
|
|
61
|
-
};
|
|
62
|
-
};
|
|
63
|
-
|
|
64
|
-
exports.getEllipseBorder = getEllipseBorder;
|
|
65
|
-
|
|
66
|
-
const getEllipseOppositeAnchorAbsolutePosition = function (anchor, center, shape, canvasOffset) {
|
|
67
|
-
let [negW, negH] = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [false, false];
|
|
68
|
-
const oppositeX = anchor[0] === 0.5 ? shape.x : anchor[0] === 0 ? shape.x + (negW ? -shape.radiusX : shape.radiusX) : shape.x + (negW ? shape.radiusX : -shape.radiusX);
|
|
69
|
-
const oppositeY = anchor[1] === 0.5 ? shape.y : anchor[1] === 0 ? shape.y + (negH ? -shape.radiusY : shape.radiusY) : shape.y + (negH ? shape.radiusY : -shape.radiusY);
|
|
70
|
-
return (0, _intersect.getPointPositionBeforeCanvasTransformation)([oppositeX, oppositeY], shape.rotation, center, canvasOffset);
|
|
71
|
-
};
|
|
72
|
-
|
|
73
|
-
const resizeEllipse = function (cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding) {
|
|
74
|
-
let keepRatio = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
|
|
75
|
-
const {
|
|
76
|
-
center,
|
|
77
|
-
borders
|
|
78
|
-
} = (0, _2.getShapeInfos)(originalShape, selectionPadding);
|
|
79
|
-
const cursorPositionBeforeResize = (0, _intersect.getPointPositionAfterCanvasTransformation)(cursorPosition, originalShape.rotation, center, canvasOffset);
|
|
80
|
-
const newCursorPosition = [cursorPositionBeforeResize[0], cursorPositionBeforeResize[1]];
|
|
81
|
-
const scaledRadiusX = selectionMode.anchor[0] === 0.5 ? originalShape.radiusX : (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;
|
|
82
|
-
const scaledRadiusY = selectionMode.anchor[1] === 0.5 ? originalShape.radiusY : (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;
|
|
83
|
-
const [radiusXWithRatio, radiusYWithRatio] = keepRatio ? (0, _transform.getNormalizedSize)(originalShape.radiusX, originalShape.radiusY, scaledRadiusX, scaledRadiusY) : [scaledRadiusX, scaledRadiusY];
|
|
84
|
-
const shapeWithNewDimensions = { ...originalShape,
|
|
85
|
-
...{
|
|
86
|
-
radiusX: Math.abs(radiusXWithRatio),
|
|
87
|
-
radiusY: Math.abs(radiusYWithRatio)
|
|
88
|
-
}
|
|
89
|
-
};
|
|
90
|
-
const {
|
|
91
|
-
center: shapeWithNewDimensionsCenter
|
|
92
|
-
} = (0, _2.getShapeInfos)(shapeWithNewDimensions, selectionPadding);
|
|
93
|
-
const [oppTrueX, oppTrueY] = getEllipseOppositeAnchorAbsolutePosition(selectionMode.anchor, center, originalShape, canvasOffset);
|
|
94
|
-
const [newOppTrueX, newOppTrueY] = getEllipseOppositeAnchorAbsolutePosition(selectionMode.anchor, shapeWithNewDimensionsCenter, shapeWithNewDimensions, canvasOffset, [radiusXWithRatio < 0, radiusYWithRatio < 0]);
|
|
95
|
-
return { ...shapeWithNewDimensions,
|
|
96
|
-
x: shapeWithNewDimensions.x - (newOppTrueX - oppTrueX),
|
|
97
|
-
y: shapeWithNewDimensions.y - (newOppTrueY - oppTrueY)
|
|
98
|
-
};
|
|
99
|
-
};
|
|
100
|
-
|
|
101
|
-
exports.resizeEllipse = resizeEllipse;
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.drawGrid = void 0;
|
|
7
|
-
|
|
8
|
-
var _style = require("../../constants/style");
|
|
9
|
-
|
|
10
|
-
const drawGrid = (ctx, width, height, responsiveScale, canvasOffset, gridFormat) => {
|
|
11
|
-
ctx.strokeStyle = 'rgb(220,220,220)';
|
|
12
|
-
ctx.lineWidth = 1;
|
|
13
|
-
ctx.save();
|
|
14
|
-
ctx.scale(responsiveScale, responsiveScale);
|
|
15
|
-
ctx.beginPath();
|
|
16
|
-
const step = _style.GRID_STEP[gridFormat - 1];
|
|
17
|
-
const horizontalOffset = -canvasOffset[0] % step;
|
|
18
|
-
const verticalOffset = -canvasOffset[1] % step;
|
|
19
|
-
const nbCols = Math.ceil(width / responsiveScale / step);
|
|
20
|
-
const nbRows = Math.ceil(height / responsiveScale / step);
|
|
21
|
-
|
|
22
|
-
for (let i = 0; i < nbCols; i++) {
|
|
23
|
-
ctx.moveTo(horizontalOffset + (i + 1) * step, verticalOffset);
|
|
24
|
-
ctx.lineTo(horizontalOffset + (i + 1) * step, verticalOffset + height / responsiveScale);
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
for (let i = 0; i < nbRows; i++) {
|
|
28
|
-
ctx.moveTo(horizontalOffset, verticalOffset + (i + 1) * step);
|
|
29
|
-
ctx.lineTo(horizontalOffset + width / responsiveScale, verticalOffset + (i + 1) * step);
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
ctx.stroke();
|
|
33
|
-
ctx.restore();
|
|
34
|
-
};
|
|
35
|
-
|
|
36
|
-
exports.drawGrid = drawGrid;
|
|
@@ -1,341 +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.translateShape = exports.rotateShape = exports.resizeShape = exports.getShapeInfos = exports.drawShapeSelection = exports.drawShape = exports.createShape = exports.copyShape = void 0;
|
|
9
|
-
|
|
10
|
-
var _fp = _interopRequireDefault(require("lodash/fp"));
|
|
11
|
-
|
|
12
|
-
var _transform = require("../transform");
|
|
13
|
-
|
|
14
|
-
var _brush = require("./brush");
|
|
15
|
-
|
|
16
|
-
var _line = require("./line");
|
|
17
|
-
|
|
18
|
-
var _polygon = require("./polygon");
|
|
19
|
-
|
|
20
|
-
var _curve = require("./curve");
|
|
21
|
-
|
|
22
|
-
var _rectangle = require("./rectangle");
|
|
23
|
-
|
|
24
|
-
var _text = require("./text");
|
|
25
|
-
|
|
26
|
-
var _ellipse = require("./ellipse");
|
|
27
|
-
|
|
28
|
-
var _circle = require("./circle");
|
|
29
|
-
|
|
30
|
-
var _picture = require("./picture");
|
|
31
|
-
|
|
32
|
-
var _style = require("../../constants/style");
|
|
33
|
-
|
|
34
|
-
var _default = require("./default");
|
|
35
|
-
|
|
36
|
-
var _canvas = require("../canvas");
|
|
37
|
-
|
|
38
|
-
const createShape = (ctx, shape, cursorPosition, gridFormat) => {
|
|
39
|
-
const roundCursorPosition = [(0, _transform.roundForGrid)(cursorPosition[0], gridFormat), (0, _transform.roundForGrid)(cursorPosition[1], gridFormat)];
|
|
40
|
-
|
|
41
|
-
switch (shape.type) {
|
|
42
|
-
case 'brush':
|
|
43
|
-
return (0, _brush.createBrush)(shape, roundCursorPosition);
|
|
44
|
-
|
|
45
|
-
case 'line':
|
|
46
|
-
return (0, _line.createLine)(shape, roundCursorPosition);
|
|
47
|
-
|
|
48
|
-
case 'polygon':
|
|
49
|
-
return (0, _polygon.createPolygon)(shape, roundCursorPosition);
|
|
50
|
-
|
|
51
|
-
case 'curve':
|
|
52
|
-
return (0, _curve.createCurve)(shape, roundCursorPosition);
|
|
53
|
-
|
|
54
|
-
case 'rect':
|
|
55
|
-
case 'square':
|
|
56
|
-
return (0, _rectangle.createRectangle)(shape, roundCursorPosition);
|
|
57
|
-
|
|
58
|
-
case 'text':
|
|
59
|
-
return (0, _text.createText)(ctx, shape, roundCursorPosition);
|
|
60
|
-
|
|
61
|
-
case 'ellipse':
|
|
62
|
-
return (0, _ellipse.createEllipse)(shape, roundCursorPosition);
|
|
63
|
-
|
|
64
|
-
case 'circle':
|
|
65
|
-
return (0, _circle.createCircle)(shape, roundCursorPosition);
|
|
66
|
-
}
|
|
67
|
-
};
|
|
68
|
-
|
|
69
|
-
exports.createShape = createShape;
|
|
70
|
-
|
|
71
|
-
const drawShape = (ctx, shape, responsiveScale, canvasOffset, selectionPadding) => {
|
|
72
|
-
if (shape.visible === false) return;
|
|
73
|
-
const {
|
|
74
|
-
center
|
|
75
|
-
} = getShapeInfos(shape, selectionPadding);
|
|
76
|
-
(0, _canvas.transformCanvas)(ctx, responsiveScale, canvasOffset, shape.rotation, center);
|
|
77
|
-
|
|
78
|
-
switch (shape.type) {
|
|
79
|
-
case 'brush':
|
|
80
|
-
(0, _brush.drawBrush)(ctx, shape);
|
|
81
|
-
break;
|
|
82
|
-
|
|
83
|
-
case 'text':
|
|
84
|
-
(0, _text.drawText)(ctx, shape);
|
|
85
|
-
break;
|
|
86
|
-
|
|
87
|
-
case 'line':
|
|
88
|
-
(0, _line.drawLine)(ctx, shape);
|
|
89
|
-
break;
|
|
90
|
-
|
|
91
|
-
case 'polygon':
|
|
92
|
-
(0, _polygon.drawPolygon)(ctx, shape);
|
|
93
|
-
break;
|
|
94
|
-
|
|
95
|
-
case 'curve':
|
|
96
|
-
(0, _curve.drawCurve)(ctx, shape);
|
|
97
|
-
break;
|
|
98
|
-
|
|
99
|
-
case 'circle':
|
|
100
|
-
(0, _circle.drawCircle)(ctx, shape);
|
|
101
|
-
break;
|
|
102
|
-
|
|
103
|
-
case 'ellipse':
|
|
104
|
-
(0, _ellipse.drawEllipse)(ctx, shape);
|
|
105
|
-
break;
|
|
106
|
-
|
|
107
|
-
case 'rect':
|
|
108
|
-
case 'square':
|
|
109
|
-
(0, _rectangle.drawRect)(ctx, shape);
|
|
110
|
-
break;
|
|
111
|
-
|
|
112
|
-
case 'picture':
|
|
113
|
-
(0, _picture.drawPicture)(ctx, shape);
|
|
114
|
-
break;
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
ctx.restore();
|
|
118
|
-
};
|
|
119
|
-
|
|
120
|
-
exports.drawShape = drawShape;
|
|
121
|
-
|
|
122
|
-
const getShapeBorders = (marker, selectionPadding) => {
|
|
123
|
-
switch (marker.type) {
|
|
124
|
-
case 'brush':
|
|
125
|
-
return (0, _brush.getBrushBorder)(marker, selectionPadding);
|
|
126
|
-
|
|
127
|
-
case 'line':
|
|
128
|
-
return (0, _line.getLineBorder)(marker, selectionPadding);
|
|
129
|
-
|
|
130
|
-
case 'polygon':
|
|
131
|
-
return (0, _polygon.getPolygonBorder)(marker, selectionPadding);
|
|
132
|
-
|
|
133
|
-
case 'curve':
|
|
134
|
-
return (0, _curve.getCurveBorder)(marker, selectionPadding);
|
|
135
|
-
|
|
136
|
-
case 'circle':
|
|
137
|
-
return (0, _circle.getCircleBorder)(marker, selectionPadding);
|
|
138
|
-
|
|
139
|
-
case 'ellipse':
|
|
140
|
-
return (0, _ellipse.getEllipseBorder)(marker, selectionPadding);
|
|
141
|
-
|
|
142
|
-
case 'rect':
|
|
143
|
-
case 'square':
|
|
144
|
-
default:
|
|
145
|
-
return (0, _rectangle.getRectBorder)(marker, selectionPadding);
|
|
146
|
-
|
|
147
|
-
case 'text':
|
|
148
|
-
return (0, _text.getTextBorder)(marker, selectionPadding);
|
|
149
|
-
|
|
150
|
-
case 'picture':
|
|
151
|
-
return (0, _picture.getPictureBorder)(marker, selectionPadding);
|
|
152
|
-
}
|
|
153
|
-
};
|
|
154
|
-
|
|
155
|
-
const getShapeCenter = borders => {
|
|
156
|
-
return [borders.x + borders.width / 2, borders.y + borders.height / 2];
|
|
157
|
-
};
|
|
158
|
-
|
|
159
|
-
const getShapeInfos = (shape, selectionPadding) => {
|
|
160
|
-
const borders = getShapeBorders(shape, selectionPadding);
|
|
161
|
-
const center = getShapeCenter(borders);
|
|
162
|
-
return {
|
|
163
|
-
borders,
|
|
164
|
-
center
|
|
165
|
-
};
|
|
166
|
-
};
|
|
167
|
-
|
|
168
|
-
exports.getShapeInfos = getShapeInfos;
|
|
169
|
-
|
|
170
|
-
const rotateShape = (shape, cursorPosition, originalShape, originalCursorPosition, shapeCenter, gridFormat) => {
|
|
171
|
-
const p1x = shapeCenter[0] - originalCursorPosition[0];
|
|
172
|
-
const p1y = shapeCenter[1] - originalCursorPosition[1];
|
|
173
|
-
const p2x = shapeCenter[0] - cursorPosition[0];
|
|
174
|
-
const p2y = shapeCenter[1] - cursorPosition[1];
|
|
175
|
-
const rotation = originalShape.rotation + Math.atan2(p2y, p2x) - Math.atan2(p1y, p1x);
|
|
176
|
-
return { ...shape,
|
|
177
|
-
...{
|
|
178
|
-
rotation: gridFormat ? rotation + Math.PI / _style.GRID_ROTATION_STEPS / 2 - (rotation + Math.PI / _style.GRID_ROTATION_STEPS / 2) % (Math.PI / _style.GRID_ROTATION_STEPS) : rotation
|
|
179
|
-
}
|
|
180
|
-
};
|
|
181
|
-
};
|
|
182
|
-
|
|
183
|
-
exports.rotateShape = rotateShape;
|
|
184
|
-
|
|
185
|
-
const resizeShape = (ctx, shape, cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding, isShiftPressed) => {
|
|
186
|
-
switch (shape.type) {
|
|
187
|
-
case 'line':
|
|
188
|
-
case 'polygon':
|
|
189
|
-
case 'curve':
|
|
190
|
-
return (0, _line.resizeLine)(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding);
|
|
191
|
-
|
|
192
|
-
case 'brush':
|
|
193
|
-
return (0, _brush.resizeBrush)(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding, isShiftPressed);
|
|
194
|
-
|
|
195
|
-
case 'circle':
|
|
196
|
-
return (0, _circle.resizeCircle)(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding);
|
|
197
|
-
|
|
198
|
-
case 'ellipse':
|
|
199
|
-
return (0, _ellipse.resizeEllipse)(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding, isShiftPressed);
|
|
200
|
-
|
|
201
|
-
case 'rect':
|
|
202
|
-
case 'square':
|
|
203
|
-
return (0, _rectangle.resizeRect)(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding, shape.type === 'square' || isShiftPressed);
|
|
204
|
-
|
|
205
|
-
case 'text':
|
|
206
|
-
return (0, _text.resizeText)(ctx, cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding);
|
|
207
|
-
|
|
208
|
-
case 'picture':
|
|
209
|
-
return (0, _picture.resizePicture)(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding, !isShiftPressed);
|
|
210
|
-
}
|
|
211
|
-
};
|
|
212
|
-
|
|
213
|
-
exports.resizeShape = resizeShape;
|
|
214
|
-
|
|
215
|
-
const translateShape = (cursorPosition, originalShape, originalCursorPosition, gridFormat) => {
|
|
216
|
-
switch (originalShape.type) {
|
|
217
|
-
case 'rect':
|
|
218
|
-
case 'square':
|
|
219
|
-
case 'ellipse':
|
|
220
|
-
case 'circle':
|
|
221
|
-
case 'picture':
|
|
222
|
-
default:
|
|
223
|
-
return { ...originalShape,
|
|
224
|
-
x: (0, _transform.roundForGrid)(originalShape.x + cursorPosition[0] - originalCursorPosition[0], gridFormat),
|
|
225
|
-
y: (0, _transform.roundForGrid)(originalShape.y + cursorPosition[1] - originalCursorPosition[1], gridFormat)
|
|
226
|
-
};
|
|
227
|
-
|
|
228
|
-
case 'line':
|
|
229
|
-
return { ...originalShape,
|
|
230
|
-
points: originalShape.points.map(_ref => {
|
|
231
|
-
let [x, y] = _ref;
|
|
232
|
-
return [(0, _transform.roundForGrid)(x + cursorPosition[0] - originalCursorPosition[0], gridFormat), (0, _transform.roundForGrid)(y + cursorPosition[1] - originalCursorPosition[1], gridFormat)];
|
|
233
|
-
})
|
|
234
|
-
};
|
|
235
|
-
|
|
236
|
-
case 'polygon':
|
|
237
|
-
case 'curve':
|
|
238
|
-
if (gridFormat) {
|
|
239
|
-
const {
|
|
240
|
-
borders
|
|
241
|
-
} = getShapeInfos(originalShape, 0);
|
|
242
|
-
const translationX = (0, _transform.roundForGrid)(borders.x + cursorPosition[0] - originalCursorPosition[0], gridFormat) - borders.x;
|
|
243
|
-
const translationY = (0, _transform.roundForGrid)(borders.y + cursorPosition[1] - originalCursorPosition[1], gridFormat) - borders.y;
|
|
244
|
-
return { ...originalShape,
|
|
245
|
-
points: originalShape.points.map(_ref2 => {
|
|
246
|
-
let [x, y] = _ref2;
|
|
247
|
-
return [x + translationX, y + translationY];
|
|
248
|
-
})
|
|
249
|
-
};
|
|
250
|
-
} else {
|
|
251
|
-
return { ...originalShape,
|
|
252
|
-
points: originalShape.points.map(_ref3 => {
|
|
253
|
-
let [x, y] = _ref3;
|
|
254
|
-
return [(0, _transform.roundForGrid)(x + cursorPosition[0] - originalCursorPosition[0], gridFormat), (0, _transform.roundForGrid)(y + cursorPosition[1] - originalCursorPosition[1], gridFormat)];
|
|
255
|
-
})
|
|
256
|
-
};
|
|
257
|
-
}
|
|
258
|
-
|
|
259
|
-
case 'brush':
|
|
260
|
-
if (gridFormat) {
|
|
261
|
-
const {
|
|
262
|
-
borders
|
|
263
|
-
} = getShapeInfos(originalShape, 0);
|
|
264
|
-
const translationX = (0, _transform.roundForGrid)(borders.x + cursorPosition[0] - originalCursorPosition[0], gridFormat) - borders.x;
|
|
265
|
-
const translationY = (0, _transform.roundForGrid)(borders.y + cursorPosition[1] - originalCursorPosition[1], gridFormat) - borders.y;
|
|
266
|
-
return { ...originalShape,
|
|
267
|
-
points: originalShape.points.map(coord => coord.map(_ref4 => {
|
|
268
|
-
let [x, y] = _ref4;
|
|
269
|
-
return [x + translationX, y + translationY];
|
|
270
|
-
}))
|
|
271
|
-
};
|
|
272
|
-
} else {
|
|
273
|
-
return { ...originalShape,
|
|
274
|
-
points: originalShape.points.map(coord => coord.map(_ref5 => {
|
|
275
|
-
let [x, y] = _ref5;
|
|
276
|
-
return [x + cursorPosition[0] - originalCursorPosition[0], y + cursorPosition[1] - originalCursorPosition[1]];
|
|
277
|
-
}))
|
|
278
|
-
};
|
|
279
|
-
}
|
|
280
|
-
|
|
281
|
-
}
|
|
282
|
-
};
|
|
283
|
-
|
|
284
|
-
exports.translateShape = translateShape;
|
|
285
|
-
|
|
286
|
-
const drawShapeSelection = _ref6 => {
|
|
287
|
-
let {
|
|
288
|
-
ctx,
|
|
289
|
-
shape,
|
|
290
|
-
scaleRatio = 1,
|
|
291
|
-
canvasOffset,
|
|
292
|
-
selectionPadding,
|
|
293
|
-
selectionWidth,
|
|
294
|
-
selectionColor,
|
|
295
|
-
withAnchors = true
|
|
296
|
-
} = _ref6;
|
|
297
|
-
const {
|
|
298
|
-
center
|
|
299
|
-
} = getShapeInfos(shape, selectionPadding);
|
|
300
|
-
(0, _canvas.transformCanvas)(ctx, scaleRatio, canvasOffset, shape.rotation, center);
|
|
301
|
-
|
|
302
|
-
switch (shape.type) {
|
|
303
|
-
case 'polygon':
|
|
304
|
-
case 'line':
|
|
305
|
-
case 'curve':
|
|
306
|
-
(0, _line.drawLineSelection)({
|
|
307
|
-
ctx,
|
|
308
|
-
shape,
|
|
309
|
-
withAnchors,
|
|
310
|
-
selectionPadding,
|
|
311
|
-
selectionWidth,
|
|
312
|
-
selectionColor,
|
|
313
|
-
currentScale: scaleRatio
|
|
314
|
-
});
|
|
315
|
-
break;
|
|
316
|
-
|
|
317
|
-
default:
|
|
318
|
-
(0, _default.drawSelectionDefault)({
|
|
319
|
-
ctx,
|
|
320
|
-
shape,
|
|
321
|
-
withAnchors,
|
|
322
|
-
selectionPadding,
|
|
323
|
-
selectionWidth,
|
|
324
|
-
selectionColor,
|
|
325
|
-
currentScale: scaleRatio
|
|
326
|
-
});
|
|
327
|
-
break;
|
|
328
|
-
}
|
|
329
|
-
|
|
330
|
-
ctx.restore();
|
|
331
|
-
};
|
|
332
|
-
|
|
333
|
-
exports.drawShapeSelection = drawShapeSelection;
|
|
334
|
-
|
|
335
|
-
const copyShape = (shape, gridFormat) => {
|
|
336
|
-
return { ...translateShape([20, 20], shape, [0, 0], gridFormat),
|
|
337
|
-
id: _fp.default.uniqueId("".concat(shape.type, "_"))
|
|
338
|
-
};
|
|
339
|
-
};
|
|
340
|
-
|
|
341
|
-
exports.copyShape = copyShape;
|
|
@@ -1,179 +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.resizeLine = exports.getLineBorder = exports.drawLineSelection = exports.drawLine = exports.createLine = exports.buildTriangleOnLine = void 0;
|
|
9
|
-
|
|
10
|
-
var _shapes = require("../../constants/shapes");
|
|
11
|
-
|
|
12
|
-
var _fp = _interopRequireDefault(require("lodash/fp"));
|
|
13
|
-
|
|
14
|
-
var _canvas = require("../canvas");
|
|
15
|
-
|
|
16
|
-
var _intersect = require("../intersect");
|
|
17
|
-
|
|
18
|
-
var _trigo = require("../trigo");
|
|
19
|
-
|
|
20
|
-
var _2 = require(".");
|
|
21
|
-
|
|
22
|
-
var _circle = require("./circle");
|
|
23
|
-
|
|
24
|
-
var _rectangle = require("./rectangle");
|
|
25
|
-
|
|
26
|
-
var _triangle = require("./triangle");
|
|
27
|
-
|
|
28
|
-
const createLine = (shape, cursorPosition) => {
|
|
29
|
-
return {
|
|
30
|
-
toolId: shape.id,
|
|
31
|
-
type: shape.type,
|
|
32
|
-
id: _fp.default.uniqueId("".concat(shape.type, "_")),
|
|
33
|
-
points: [cursorPosition, cursorPosition],
|
|
34
|
-
rotation: 0,
|
|
35
|
-
style: {
|
|
36
|
-
globalAlpha: shape.settings.opacity.default,
|
|
37
|
-
strokeColor: shape.settings.strokeColor.default,
|
|
38
|
-
lineWidth: shape.settings.lineWidth.default,
|
|
39
|
-
lineDash: shape.settings.lineDash.default,
|
|
40
|
-
lineArrow: shape.settings.lineArrow.default
|
|
41
|
-
}
|
|
42
|
-
};
|
|
43
|
-
};
|
|
44
|
-
|
|
45
|
-
exports.createLine = createLine;
|
|
46
|
-
|
|
47
|
-
const buildTriangleOnLine = (center, rotation, lineStyle) => {
|
|
48
|
-
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;
|
|
49
|
-
|
|
50
|
-
const trianglePoints = [(0, _trigo.rotatePoint)({
|
|
51
|
-
point: [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)],
|
|
52
|
-
rotation
|
|
53
|
-
}), (0, _trigo.rotatePoint)({
|
|
54
|
-
point: [-(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],
|
|
55
|
-
rotation
|
|
56
|
-
}), (0, _trigo.rotatePoint)({
|
|
57
|
-
point: [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],
|
|
58
|
-
rotation
|
|
59
|
-
})];
|
|
60
|
-
return {
|
|
61
|
-
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]]],
|
|
62
|
-
style: { ...lineStyle.style,
|
|
63
|
-
fillColor: (_lineStyle$style6 = lineStyle.style) === null || _lineStyle$style6 === void 0 ? void 0 : _lineStyle$style6.strokeColor,
|
|
64
|
-
strokeColor: 'transparent'
|
|
65
|
-
}
|
|
66
|
-
};
|
|
67
|
-
};
|
|
68
|
-
|
|
69
|
-
exports.buildTriangleOnLine = buildTriangleOnLine;
|
|
70
|
-
|
|
71
|
-
const drawLine = (ctx, line) => {
|
|
72
|
-
var _line$style, _line$style2, _line$style3, _line$style4, _line$style5, _line$style6;
|
|
73
|
-
|
|
74
|
-
(0, _canvas.updateCanvasContext)(ctx, line.style);
|
|
75
|
-
if (ctx.globalAlpha === 0) return;
|
|
76
|
-
ctx.beginPath();
|
|
77
|
-
ctx.moveTo(...line.points[0]);
|
|
78
|
-
ctx.lineTo(...line.points[1]);
|
|
79
|
-
((_line$style = line.style) === null || _line$style === void 0 ? void 0 : _line$style.fillColor) !== 'transparent' && ctx.fill();
|
|
80
|
-
((_line$style2 = line.style) === null || _line$style2 === void 0 ? void 0 : _line$style2.strokeColor) !== 'transparent' && ctx.stroke();
|
|
81
|
-
|
|
82
|
-
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) {
|
|
83
|
-
const rotation = Math.PI / 2 - (0, _trigo.getAngleFromVector)(line.points[0], line.points[1]);
|
|
84
|
-
(0, _triangle.drawTriangle)(ctx, buildTriangleOnLine(line.points[0], rotation, {
|
|
85
|
-
style: line.style
|
|
86
|
-
}));
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
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) {
|
|
90
|
-
const rotation = Math.PI / 2 - (0, _trigo.getAngleFromVector)(line.points[1], line.points[0]);
|
|
91
|
-
(0, _triangle.drawTriangle)(ctx, buildTriangleOnLine(line.points[1], rotation, {
|
|
92
|
-
style: line.style
|
|
93
|
-
}));
|
|
94
|
-
}
|
|
95
|
-
};
|
|
96
|
-
|
|
97
|
-
exports.drawLine = drawLine;
|
|
98
|
-
|
|
99
|
-
const getLineBorder = (line, selectionPadding) => {
|
|
100
|
-
const x = Math.min(line.points[0][0], line.points[1][0]) - selectionPadding;
|
|
101
|
-
const width = Math.abs(line.points[0][0] - line.points[1][0]) + selectionPadding * 2;
|
|
102
|
-
const y = Math.min(line.points[0][1], line.points[1][1]) - selectionPadding;
|
|
103
|
-
const height = Math.abs(line.points[0][1] - line.points[1][1]) + selectionPadding * 2;
|
|
104
|
-
return {
|
|
105
|
-
x,
|
|
106
|
-
width,
|
|
107
|
-
y,
|
|
108
|
-
height
|
|
109
|
-
};
|
|
110
|
-
};
|
|
111
|
-
|
|
112
|
-
exports.getLineBorder = getLineBorder;
|
|
113
|
-
|
|
114
|
-
const resizeLine = (cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding) => {
|
|
115
|
-
const {
|
|
116
|
-
center
|
|
117
|
-
} = (0, _2.getShapeInfos)(originalShape, selectionPadding);
|
|
118
|
-
const cursorPositionBeforeResize = (0, _intersect.getPointPositionAfterCanvasTransformation)(cursorPosition, originalShape.rotation, center, canvasOffset);
|
|
119
|
-
|
|
120
|
-
const updatedShape = _fp.default.set(['points', selectionMode.anchor], cursorPositionBeforeResize, originalShape);
|
|
121
|
-
|
|
122
|
-
return updatedShape;
|
|
123
|
-
};
|
|
124
|
-
|
|
125
|
-
exports.resizeLine = resizeLine;
|
|
126
|
-
|
|
127
|
-
const drawLineSelection = _ref => {
|
|
128
|
-
let {
|
|
129
|
-
ctx,
|
|
130
|
-
shape,
|
|
131
|
-
withAnchors,
|
|
132
|
-
selectionPadding,
|
|
133
|
-
selectionWidth,
|
|
134
|
-
selectionColor,
|
|
135
|
-
currentScale = 1
|
|
136
|
-
} = _ref;
|
|
137
|
-
const {
|
|
138
|
-
borders
|
|
139
|
-
} = (0, _2.getShapeInfos)(shape, selectionPadding);
|
|
140
|
-
(0, _rectangle.drawRect)(ctx, { ...borders,
|
|
141
|
-
style: {
|
|
142
|
-
fillColor: 'transparent',
|
|
143
|
-
strokeColor: selectionColor,
|
|
144
|
-
lineWidth: selectionWidth / currentScale
|
|
145
|
-
}
|
|
146
|
-
});
|
|
147
|
-
if (!withAnchors || shape.locked) return;
|
|
148
|
-
|
|
149
|
-
for (let i = 0; i < shape.points.length; i++) {
|
|
150
|
-
const coordinate = shape.points[i];
|
|
151
|
-
|
|
152
|
-
if (shape.type === 'curve' && i > 0 && i < shape.points.length - 1) {
|
|
153
|
-
(0, _rectangle.drawRect)(ctx, {
|
|
154
|
-
x: coordinate[0] - _shapes.SELECTION_ANCHOR_SIZE / 2,
|
|
155
|
-
y: coordinate[1] - _shapes.SELECTION_ANCHOR_SIZE / 2,
|
|
156
|
-
width: _shapes.SELECTION_ANCHOR_SIZE / currentScale,
|
|
157
|
-
height: _shapes.SELECTION_ANCHOR_SIZE / currentScale,
|
|
158
|
-
style: {
|
|
159
|
-
fillColor: 'rgb(255,255,255)',
|
|
160
|
-
strokeColor: 'rgb(150,150,150)',
|
|
161
|
-
lineWidth: selectionWidth / currentScale
|
|
162
|
-
}
|
|
163
|
-
});
|
|
164
|
-
} else {
|
|
165
|
-
(0, _circle.drawCircle)(ctx, {
|
|
166
|
-
x: coordinate[0],
|
|
167
|
-
y: coordinate[1],
|
|
168
|
-
radius: _shapes.SELECTION_ANCHOR_SIZE / 2 / currentScale,
|
|
169
|
-
style: {
|
|
170
|
-
fillColor: 'rgb(255,255,255)',
|
|
171
|
-
strokeColor: 'rgb(150,150,150)',
|
|
172
|
-
lineWidth: selectionWidth / currentScale
|
|
173
|
-
}
|
|
174
|
-
});
|
|
175
|
-
}
|
|
176
|
-
}
|
|
177
|
-
};
|
|
178
|
-
|
|
179
|
-
exports.drawLineSelection = drawLineSelection;
|