@yorab/react-paint 0.6.3 → 0.6.6

package/dist/utils/draw.js

@@ -1,16 +1,10 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _shapes = require("../constants/shapes");
 
 var _style = require("../constants/style");
@@ -19,47 +13,34 @@ var _intersect = require("./intersect");
 
 var _shapeData = require("./shapeData");
 
-function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-var applyShapeTransformations = function applyShapeTransformations(ctx, marker, responsiveScale, canvasOffset, selectionPadding) {
+const applyShapeTransformations = (ctx, marker, responsiveScale, canvasOffset, selectionPadding) => {
   ctx.save();
   ctx.scale(responsiveScale, responsiveScale);
   ctx.translate(marker.translation[0] + canvasOffset[0], marker.translation[1] + canvasOffset[1]);
 
   if (marker.rotation !== 0) {
-    var _getShapeInfos = (0, _shapeData.getShapeInfos)(marker, selectionPadding),
-        center = _getShapeInfos.center;
-
+    const {
+      center
+    } = (0, _shapeData.getShapeInfos)(marker, selectionPadding);
     ctx.translate(center[0], center[1]);
     ctx.rotate(marker.rotation);
     ctx.translate(-center[0], -center[1]);
   }
 };
 
-var restoreShapeTransformations = function restoreShapeTransformations(ctx) {
+const restoreShapeTransformations = ctx => {
   ctx.restore();
 };
 
-var updateDrawStyle = function updateDrawStyle(ctx) {
-  var style = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var _style$fillColor = style.fillColor,
-      fillColor = _style$fillColor === void 0 ? 'transparent' : _style$fillColor,
-      _style$globalAlpha = style.globalAlpha,
-      globalAlpha = _style$globalAlpha === void 0 ? 100 : _style$globalAlpha,
-      _style$strokeColor = style.strokeColor,
-      strokeColor = _style$strokeColor === void 0 ? _shapes.SELECTION_DEFAULT_COLOR : _style$strokeColor,
-      _style$lineWidth = style.lineWidth,
-      lineWidth = _style$lineWidth === void 0 ? _shapes.SELECTION_DEFAULT_WIDTH : _style$lineWidth,
-      _style$lineDash = style.lineDash,
-      lineDash = _style$lineDash === void 0 ? 0 : _style$lineDash;
+const updateDrawStyle = function (ctx) {
+  let style = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const {
+    fillColor = 'transparent',
+    globalAlpha = 100,
+    strokeColor = _shapes.SELECTION_DEFAULT_COLOR,
+    lineWidth = _shapes.SELECTION_DEFAULT_WIDTH,
+    lineDash = 0
+  } = style;
   ctx.lineCap = 'round';
   ctx.lineJoin = 'round';
   globalAlpha !== undefined && (ctx.globalAlpha = globalAlpha / 100);
@@ -69,20 +50,20 @@ var updateDrawStyle = function updateDrawStyle(ctx) {
   lineDash !== undefined && lineWidth && ctx.setLineDash([_style.LINE_DASH_DATA[lineDash][0] * lineWidth, _style.LINE_DASH_DATA[lineDash][1] * lineWidth]);
 };
 
-var drawBrush = function drawBrush(ctx, brush) {
+const drawBrush = (ctx, brush) => {
   var _brush$style;
 
   if (brush.points.length < 1) return;
   updateDrawStyle(ctx, brush.style);
   ctx.beginPath();
   if (((_brush$style = brush.style) === null || _brush$style === void 0 ? void 0 : _brush$style.strokeColor) === 'transparent' || ctx.globalAlpha === 0) return;
-  brush.points.forEach(function (points) {
+  brush.points.forEach(points => {
     if (points.length === 1) {
       ctx.rect(points[0][0], points[0][1], 1, 1);
     } else {
-      ctx.moveTo.apply(ctx, (0, _toConsumableArray2["default"])(points[0]));
-      points.slice(1).forEach(function (point) {
-        ctx.lineTo.apply(ctx, (0, _toConsumableArray2["default"])(point));
+      ctx.moveTo(...points[0]);
+      points.slice(1).forEach(point => {
+        ctx.lineTo(...point);
       });
     }
   });
@@ -91,57 +72,56 @@ var drawBrush = function drawBrush(ctx, brush) {
 
 exports.drawBrush = drawBrush;
 
-var drawTriangle = function drawTriangle(ctx, triangle) {
+const drawTriangle = (ctx, triangle) => {
   var _triangle$style, _triangle$style2;
 
   updateDrawStyle(ctx, triangle.style);
   if (ctx.globalAlpha === 0) return;
   ctx.beginPath();
-  ctx.moveTo.apply(ctx, (0, _toConsumableArray2["default"])(triangle.points[0]));
-  ctx.lineTo.apply(ctx, (0, _toConsumableArray2["default"])(triangle.points[1]));
-  ctx.lineTo.apply(ctx, (0, _toConsumableArray2["default"])(triangle.points[2]));
-  ctx.lineTo.apply(ctx, (0, _toConsumableArray2["default"])(triangle.points[0]));
+  ctx.moveTo(...triangle.points[0]);
+  ctx.lineTo(...triangle.points[1]);
+  ctx.lineTo(...triangle.points[2]);
+  ctx.lineTo(...triangle.points[0]);
   ((_triangle$style = triangle.style) === null || _triangle$style === void 0 ? void 0 : _triangle$style.fillColor) !== 'transparent' && ctx.fill();
   ((_triangle$style2 = triangle.style) === null || _triangle$style2 === void 0 ? void 0 : _triangle$style2.strokeColor) !== 'transparent' && ctx.stroke();
 };
 
 exports.drawTriangle = drawTriangle;
 
-var buildTriangleOnLine = function buildTriangleOnLine(center, angle, lineStyle) {
+const buildTriangleOnLine = (center, angle, lineStyle) => {
   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;
 
-  var 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)];
+  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)];
   return {
     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]]],
-    style: _objectSpread(_objectSpread({}, lineStyle.style), {}, {
+    style: { ...lineStyle.style,
       fillColor: (_lineStyle$style6 = lineStyle.style) === null || _lineStyle$style6 === void 0 ? void 0 : _lineStyle$style6.strokeColor,
       strokeColor: 'transparent'
-    })
+    }
   };
 };
 
-var drawLine = function drawLine(ctx, line) {
+const drawLine = (ctx, line) => {
   var _line$style, _line$style2, _line$style3, _line$style4, _line$style5, _line$style6;
 
   updateDrawStyle(ctx, line.style);
   if (ctx.globalAlpha === 0) return;
   ctx.beginPath();
-  ctx.moveTo.apply(ctx, (0, _toConsumableArray2["default"])(line.points[0]));
-  ctx.lineTo.apply(ctx, (0, _toConsumableArray2["default"])(line.points[1]));
+  ctx.moveTo(...line.points[0]);
+  ctx.lineTo(...line.points[1]);
   ((_line$style = line.style) === null || _line$style === void 0 ? void 0 : _line$style.fillColor) !== 'transparent' && ctx.fill();
   ((_line$style2 = line.style) === null || _line$style2 === void 0 ? void 0 : _line$style2.strokeColor) !== 'transparent' && ctx.stroke();
 
   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) {
-    var rotation = Math.PI / 2 - Math.atan2(line.points[1][1] - line.points[0][1], line.points[1][0] - line.points[0][0]);
+    const rotation = Math.PI / 2 - Math.atan2(line.points[1][1] - line.points[0][1], line.points[1][0] - line.points[0][0]);
     drawTriangle(ctx, buildTriangleOnLine(line.points[0], rotation, {
       style: line.style
     }));
   }
 
   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) {
-    var _rotation = Math.PI / 2 - Math.atan2(line.points[0][1] - line.points[1][1], line.points[0][0] - line.points[1][0]);
-
-    drawTriangle(ctx, buildTriangleOnLine(line.points[1], _rotation, {
+    const rotation = Math.PI / 2 - Math.atan2(line.points[0][1] - line.points[1][1], line.points[0][0] - line.points[1][0]);
+    drawTriangle(ctx, buildTriangleOnLine(line.points[1], rotation, {
       style: line.style
     }));
   }
@@ -149,35 +129,35 @@ var drawLine = function drawLine(ctx, line) {
 
 exports.drawLine = drawLine;
 
-var drawPolygon = function drawPolygon(ctx, polygon) {
+const drawPolygon = (ctx, polygon) => {
   var _polygon$style, _polygon$style2;
 
   if (polygon.points.length < 1) return;
   updateDrawStyle(ctx, polygon.style);
   if (ctx.globalAlpha === 0) return;
   ctx.beginPath();
-  ctx.moveTo.apply(ctx, (0, _toConsumableArray2["default"])(polygon.points[0]));
-  polygon.points.slice(1).forEach(function (point) {
-    ctx.lineTo.apply(ctx, (0, _toConsumableArray2["default"])(point));
+  ctx.moveTo(...polygon.points[0]);
+  polygon.points.slice(1).forEach(point => {
+    ctx.lineTo(...point);
   });
-  ctx.lineTo.apply(ctx, (0, _toConsumableArray2["default"])(polygon.points[0]));
+  ctx.lineTo(...polygon.points[0]);
   ((_polygon$style = polygon.style) === null || _polygon$style === void 0 ? void 0 : _polygon$style.fillColor) !== 'transparent' && ctx.fill();
   ((_polygon$style2 = polygon.style) === null || _polygon$style2 === void 0 ? void 0 : _polygon$style2.strokeColor) !== 'transparent' && ctx.stroke();
 };
 
 exports.drawPolygon = drawPolygon;
 
-var drawCurve = function drawCurve(ctx, curve) {
+const drawCurve = (ctx, curve) => {
   var _curve$style, _curve$style2;
 
   if (curve.points.length < 3) return;
   updateDrawStyle(ctx, curve.style);
   if (ctx.globalAlpha === 0) return;
   ctx.beginPath();
-  ctx.moveTo.apply(ctx, (0, _toConsumableArray2["default"])(curve.points[0]));
+  ctx.moveTo(...curve.points[0]);
 
-  for (var i = 1; i < curve.points.length - 1; i++) {
-    ctx.quadraticCurveTo.apply(ctx, (0, _toConsumableArray2["default"])(curve.points[i]).concat([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]]));
+  for (let i = 1; i < curve.points.length - 1; i++) {
+    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]);
   }
 
   ((_curve$style = curve.style) === null || _curve$style === void 0 ? void 0 : _curve$style.fillColor) !== 'transparent' && ctx.fill();
@@ -186,7 +166,7 @@ var drawCurve = function drawCurve(ctx, curve) {
 
 exports.drawCurve = drawCurve;
 
-var drawCircle = function drawCircle(ctx, circle) {
+const drawCircle = (ctx, circle) => {
   var _circle$style, _circle$style2;
 
   updateDrawStyle(ctx, circle.style);
@@ -198,7 +178,7 @@ var drawCircle = function drawCircle(ctx, circle) {
 
 exports.drawCircle = drawCircle;
 
-var drawEllipse = function drawEllipse(ctx, ellipse) {
+const drawEllipse = (ctx, ellipse) => {
   var _ellipse$style, _ellipse$style2;
 
   updateDrawStyle(ctx, ellipse.style);
@@ -211,7 +191,7 @@ var drawEllipse = function drawEllipse(ctx, ellipse) {
 
 exports.drawEllipse = drawEllipse;
 
-var drawRect = function drawRect(ctx, rect) {
+const drawRect = (ctx, rect) => {
   var _rect$style, _rect$style2;
 
   updateDrawStyle(ctx, rect.style);
@@ -224,7 +204,7 @@ var drawRect = function drawRect(ctx, rect) {
 
 exports.drawRect = drawRect;
 
-var drawText = function drawText(ctx, text) {
+const drawText = (ctx, text) => {
   var _text$style, _text$style2, _text$style3, _text$style$fontFamil, _text$style4;
 
   updateDrawStyle(ctx, text.style);
@@ -233,14 +213,14 @@ var drawText = function drawText(ctx, text) {
   ctx.textBaseline = 'top';
   ctx.fillStyle = text.style.strokeColor;
 
-  for (var i = 0; i < text.value.length; i++) {
+  for (let i = 0; i < text.value.length; i++) {
     ctx.fillText(text.value[i], text.x, text.y + i * text.fontSize, text.width);
   }
 };
 
 exports.drawText = drawText;
 
-var drawPicture = function drawPicture(ctx, picture) {
+const drawPicture = (ctx, picture) => {
   updateDrawStyle(ctx, picture.style);
   if (ctx.globalAlpha === 0) return;
   ctx.beginPath();
@@ -249,7 +229,7 @@ var drawPicture = function drawPicture(ctx, picture) {
 
 exports.drawPicture = drawPicture;
 
-var drawShape = function drawShape(ctx, shape, responsiveScale, canvasOffset, selectionPadding) {
+const drawShape = (ctx, shape, responsiveScale, canvasOffset, selectionPadding) => {
   if (shape.visible === false) return;
   applyShapeTransformations(ctx, shape, responsiveScale, canvasOffset, selectionPadding);
 
@@ -297,26 +277,26 @@ var drawShape = function drawShape(ctx, shape, responsiveScale, canvasOffset, se
 
 exports.drawShape = drawShape;
 
-var drawSelectionDefault = function drawSelectionDefault(_ref) {
-  var ctx = _ref.ctx,
-      shape = _ref.shape,
-      withAnchors = _ref.withAnchors,
-      selectionPadding = _ref.selectionPadding,
-      selectionWidth = _ref.selectionWidth,
-      selectionColor = _ref.selectionColor,
-      _ref$currentScale = _ref.currentScale,
-      currentScale = _ref$currentScale === void 0 ? 1 : _ref$currentScale;
-
-  var _getShapeInfos2 = (0, _shapeData.getShapeInfos)(shape, selectionPadding / currentScale),
-      borders = _getShapeInfos2.borders;
-
-  drawRect(ctx, _objectSpread(_objectSpread({}, borders), {}, {
+const drawSelectionDefault = _ref => {
+  let {
+    ctx,
+    shape,
+    withAnchors,
+    selectionPadding,
+    selectionWidth,
+    selectionColor,
+    currentScale = 1
+  } = _ref;
+  const {
+    borders
+  } = (0, _shapeData.getShapeInfos)(shape, selectionPadding / currentScale);
+  drawRect(ctx, { ...borders,
     style: {
       fillColor: 'transparent',
       strokeColor: selectionColor,
       lineWidth: selectionWidth / currentScale
     }
-  }));
+  });
   if (!withAnchors || shape.locked) return;
   drawLine(ctx, {
     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]],
@@ -327,27 +307,17 @@ var drawSelectionDefault = function drawSelectionDefault(_ref) {
     }
   });
 
-  var _iterator = _createForOfIteratorHelper(_shapes.SELECTION_RESIZE_ANCHOR_POSITIONS),
-      _step;
-
-  try {
-    for (_iterator.s(); !(_step = _iterator.n()).done;) {
-      var anchorPosition = _step.value;
-      drawCircle(ctx, {
-        x: borders.x + borders.width * anchorPosition[0],
-        y: borders.y + borders.height * anchorPosition[1],
-        radius: _shapes.SELECTION_ANCHOR_SIZE / 2 / currentScale,
-        style: {
-          fillColor: 'rgb(255,255,255)',
-          strokeColor: 'rgb(150,150,150)',
-          lineWidth: selectionWidth / currentScale
-        }
-      });
-    }
-  } catch (err) {
-    _iterator.e(err);
-  } finally {
-    _iterator.f();
+  for (const anchorPosition of _shapes.SELECTION_RESIZE_ANCHOR_POSITIONS) {
+    drawCircle(ctx, {
+      x: borders.x + borders.width * anchorPosition[0],
+      y: borders.y + borders.height * anchorPosition[1],
+      radius: _shapes.SELECTION_ANCHOR_SIZE / 2 / currentScale,
+      style: {
+        fillColor: 'rgb(255,255,255)',
+        strokeColor: 'rgb(150,150,150)',
+        lineWidth: selectionWidth / currentScale
+      }
+    });
   }
 
   drawCircle(ctx, {
@@ -362,30 +332,30 @@ var drawSelectionDefault = function drawSelectionDefault(_ref) {
   });
 };
 
-var drawLineSelection = function drawLineSelection(_ref2) {
-  var ctx = _ref2.ctx,
-      shape = _ref2.shape,
-      withAnchors = _ref2.withAnchors,
-      selectionPadding = _ref2.selectionPadding,
-      selectionWidth = _ref2.selectionWidth,
-      selectionColor = _ref2.selectionColor,
-      _ref2$currentScale = _ref2.currentScale,
-      currentScale = _ref2$currentScale === void 0 ? 1 : _ref2$currentScale;
-
-  var _getShapeInfos3 = (0, _shapeData.getShapeInfos)(shape, selectionPadding),
-      borders = _getShapeInfos3.borders;
-
-  drawRect(ctx, _objectSpread(_objectSpread({}, borders), {}, {
+const drawLineSelection = _ref2 => {
+  let {
+    ctx,
+    shape,
+    withAnchors,
+    selectionPadding,
+    selectionWidth,
+    selectionColor,
+    currentScale = 1
+  } = _ref2;
+  const {
+    borders
+  } = (0, _shapeData.getShapeInfos)(shape, selectionPadding);
+  drawRect(ctx, { ...borders,
     style: {
       fillColor: 'transparent',
       strokeColor: selectionColor,
       lineWidth: selectionWidth / currentScale
     }
-  }));
+  });
   if (!withAnchors || shape.locked) return;
 
-  for (var i = 0; i < shape.points.length; i++) {
-    var coordinate = shape.points[i];
+  for (let i = 0; i < shape.points.length; i++) {
+    const coordinate = shape.points[i];
 
     if (shape.type === 'curve' && i > 0 && i < shape.points.length - 1) {
       drawRect(ctx, {
@@ -414,17 +384,17 @@ var drawLineSelection = function drawLineSelection(_ref2) {
   }
 };
 
-var drawSelection = function drawSelection(_ref3) {
-  var ctx = _ref3.ctx,
-      shape = _ref3.shape,
-      _ref3$scaleRatio = _ref3.scaleRatio,
-      scaleRatio = _ref3$scaleRatio === void 0 ? 1 : _ref3$scaleRatio,
-      canvasOffset = _ref3.canvasOffset,
-      selectionPadding = _ref3.selectionPadding,
-      selectionWidth = _ref3.selectionWidth,
-      selectionColor = _ref3.selectionColor,
-      _ref3$withAnchors = _ref3.withAnchors,
-      withAnchors = _ref3$withAnchors === void 0 ? true : _ref3$withAnchors;
+const drawSelection = _ref3 => {
+  let {
+    ctx,
+    shape,
+    scaleRatio = 1,
+    canvasOffset,
+    selectionPadding,
+    selectionWidth,
+    selectionColor,
+    withAnchors = true
+  } = _ref3;
   applyShapeTransformations(ctx, shape, scaleRatio, canvasOffset, selectionPadding);
 
   switch (shape.type) {
@@ -432,24 +402,24 @@ var drawSelection = function drawSelection(_ref3) {
     case 'line':
     case 'curve':
       drawLineSelection({
-        ctx: ctx,
-        shape: shape,
-        withAnchors: withAnchors,
-        selectionPadding: selectionPadding,
-        selectionWidth: selectionWidth,
-        selectionColor: selectionColor,
+        ctx,
+        shape,
+        withAnchors,
+        selectionPadding,
+        selectionWidth,
+        selectionColor,
         currentScale: scaleRatio
       });
       break;
 
     default:
       drawSelectionDefault({
-        ctx: ctx,
-        shape: shape,
-        withAnchors: withAnchors,
-        selectionPadding: selectionPadding,
-        selectionWidth: selectionWidth,
-        selectionColor: selectionColor,
+        ctx,
+        shape,
+        withAnchors,
+        selectionPadding,
+        selectionWidth,
+        selectionColor,
         currentScale: scaleRatio
       });
       break;