@yorab/react-paint 0.6.4 → 0.7.1

package/dist/utils/trigo.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.rotatePoint = exports.radiansToDegrees = exports.isPointInsideRect = exports.getAngleFromVector = exports.degreesToRadians = void 0;
+
+const degreesToRadians = degrees => degrees * (Math.PI / 180);
+
+exports.degreesToRadians = degreesToRadians;
+
+const radiansToDegrees = radians => radians * 180 / Math.PI;
+
+exports.radiansToDegrees = radiansToDegrees;
+
+const isPointInsideRect = (rect, point) => {
+  return point[0] >= rect.x && point[0] <= rect.x + rect.width && point[1] >= rect.y && point[1] <= rect.y + rect.height;
+};
+
+exports.isPointInsideRect = isPointInsideRect;
+
+const rotatePoint = _ref => {
+  let {
+    origin = [0, 0],
+    point,
+    rotation
+  } = _ref;
+  const pointFromOrigin = [point[0] - origin[0], point[1] - origin[1]];
+  const rotatedPointY = pointFromOrigin[1] * Math.cos(rotation) - pointFromOrigin[0] * Math.sin(rotation);
+  const rotatedPointX = pointFromOrigin[1] * Math.sin(rotation) + pointFromOrigin[0] * Math.cos(rotation);
+  return [rotatedPointX + origin[0], rotatedPointY + origin[1]];
+};
+
+exports.rotatePoint = rotatePoint;
+
+const getAngleFromVector = function (point1, point2) {
+  let radian = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  const radianAngle = Math.atan2(point2[1] - point1[1], point2[0] - point1[0]);
+  return radian ? radianAngle : radiansToDegrees(radianAngle);
+};
+
+exports.getAngleFromVector = getAngleFromVector;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yorab/react-paint",
-  "version": "0.6.4",
+  "version": "0.7.1",
   "keywords": [],
   "author": "Yohann Rabatel",
   "license": "MIT",
@@ -12,8 +12,7 @@
     "dist/"
   ],
   "dependencies": {
-    "@linaria/core": "^3.0.0-beta.15",
-    "@linaria/react": "^3.0.0-beta.15",
+    "@linaria/react": "3.0.0-beta.22",
     "lodash": "^4.17.20"
   },
   "devDependencies": {
@@ -24,9 +23,10 @@
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
     "@babel/runtime": "^7.16.7",
-    "@linaria/babel-preset": "^3.0.0-beta.15",
-    "@linaria/shaker": "^3.0.0-beta.15",
-    "@linaria/webpack-loader": "^3.0.0-beta.16",
+    "@linaria/babel-preset": "3.0.0-beta.22",
+    "@linaria/core": "3.0.0-beta.22",
+    "@linaria/webpack-loader": "3.0.0-beta.22",
+    "@linaria/shaker": "^3.0.0-beta.22",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",

package/Changelog.md

@@ -1,119 +0,0 @@
-# V0.6.4
-
-- fix TextEdit copy/paste containing html
-- add clearCallback in opts to override clear button behavior
-
-# V0.6.3
-
-- Rename 'lib' prop in 'label'
-- update dash settings
-- update clear icon
-- update color settings UI
-
-# V0.6.2
-
-- Lock : can't select shape by click on it (only via layers panel)
-- Clear : reset state to shapes prop by default if not undefined
-- update icons
-- Add responsive to settings UI
-
-# V0.6.1
-
-- Fix shapes prop not refreshing component (introduced by 0.6.0)
-
-# V0.6.0
-
-- Fix text opacity range dancing in edit mode
-- Fix opacity not visually shown in edit mode
-- add delete button in layouts panel and update style
-- update shape selection priority : use layers order, unless an anchor is
-- stored data format updated
-
-# V0.5.1
-
-- add possibility to update default settings for a tool
-- fix png export not working with url pic
-- fix pictures missing id
-- fix text tool
-- double click for editing text is now working on mobile
-- add bold and italic for text
-
-# V0.5.0
-
-- Add tool presets feature
-
-# V.0.4.2
-
-- fix toolgroup not displayed
-- add passive prop to event listener
-
-# V.0.4.1
-
-- prevent mounting selection canvas when viewer mode
-- prevent drawing selection when not needed
-- Click on toolbar tool group always enable a tool
-- fix input and select options not being impacted by
-- new reponsive for toolbar
-
-# V.0.4.0
-
-- Add possibility to customize UI from props
-
-# V.0.3.1
-
-- Add prop to change canvas background color
-- Move some props to options
-- fix Picture shape not being saved and not triggering onDataChanged
-- small picture are upscaled to fit container when imported
-- Add prop to choose to display save/load/export
-
-# V.0.3.0 :
-
-- prevent picture from url submit to reload page
-- add gridVisible prop and default to false
-- rename withLayouts to layersManipulation and reduce possible values
-- move every options inside options prop
-- remove ajv and any kind of json validation
-- limit snackbar use on success and always log errors
-- fit size and center uploaded picture
-- Add new viewer mode
-- add borders on bars
-- display shape id in layer panel
-- Export : round values to 2 decimal points
-- Export and import : remove temporary values (id) from stored file
-- Clean unknown shape format from imported data
-- Use ref for onDataChanged prop to avoid rerender if callback changes
-- Calculate container size to resize canvas instead of CSS
-- use requestAnimationFrame to improve perf
-- fix TextEdit position and size not working with canvas resized
-- fix anchors area becoming too small after rezsize
-- add MIT license to project
-- other minor fixes
-- minor design improvements
-
-# V.0.2.2 :
-
-- Migrate to react 18
-- fix Picture type
-- change pen join and cap to round
-- replace loading snackbar with proper loader
-- support for canGrow and canShrink prop
-- rename project
-- release on npm
-
-# V.0.2.1 :
-
-- better ui for input modal
-- lock functionnality
-- toggle grid
-- layouts panel UI
-
-# V.0.2.0 :
-
-- fix for scaling brush
-- fix snackbar
-- refonte UI toolbar
-- update examples
-- button with icons
-- mini toolbar to fix
-- provide tool for url only

package/dist/types/keyboard.js

@@ -1,28 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.KeyboardCommand = exports.KeyboardCode = void 0;
-var KeyboardCode;
-exports.KeyboardCode = KeyboardCode;
-
-(function (KeyboardCode) {
-  KeyboardCode["ArrowUp"] = "ArrowUp";
-  KeyboardCode["ArrowDown"] = "ArrowDown";
-  KeyboardCode["ArrowLeft"] = "ArrowLeft";
-  KeyboardCode["ArrowRight"] = "ArrowRight";
-  KeyboardCode["Delete"] = "Delete";
-  KeyboardCode["Backspace"] = "Backspace";
-  KeyboardCode["Escape"] = "Escape";
-  KeyboardCode["Z"] = "z";
-  KeyboardCode["Y"] = "y";
-})(KeyboardCode || (exports.KeyboardCode = KeyboardCode = {}));
-
-var KeyboardCommand;
-exports.KeyboardCommand = KeyboardCommand;
-
-(function (KeyboardCommand) {
-  KeyboardCommand["Copy"] = "copy";
-  KeyboardCommand["Paste"] = "paste";
-})(KeyboardCommand || (exports.KeyboardCommand = KeyboardCommand = {}));

package/dist/utils/draw.js

@@ -1,461 +0,0 @@
-"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");
-
-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) {
-  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;
-
-    ctx.translate(center[0], center[1]);
-    ctx.rotate(marker.rotation);
-    ctx.translate(-center[0], -center[1]);
-  }
-};
-
-var restoreShapeTransformations = function 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;
-  ctx.lineCap = 'round';
-  ctx.lineJoin = 'round';
-  globalAlpha !== undefined && (ctx.globalAlpha = globalAlpha / 100);
-  fillColor && (ctx.fillStyle = fillColor);
-  strokeColor && (ctx.strokeStyle = strokeColor);
-  lineWidth && (ctx.lineWidth = lineWidth);
-  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) {
-  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) {
-    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.stroke();
-};
-
-exports.drawBrush = drawBrush;
-
-var drawTriangle = function 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]));
-  ((_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) {
-  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)];
-  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), {}, {
-      fillColor: (_lineStyle$style6 = lineStyle.style) === null || _lineStyle$style6 === void 0 ? void 0 : _lineStyle$style6.strokeColor,
-      strokeColor: 'transparent'
-    })
-  };
-};
-
-var drawLine = function 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]));
-  ((_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]);
-    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, {
-      style: line.style
-    }));
-  }
-};
-
-exports.drawLine = drawLine;
-
-var drawPolygon = function 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.lineTo.apply(ctx, (0, _toConsumableArray2["default"])(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) {
-  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]));
-
-  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]]));
-  }
-
-  ((_curve$style = curve.style) === null || _curve$style === void 0 ? void 0 : _curve$style.fillColor) !== 'transparent' && ctx.fill();
-  ((_curve$style2 = curve.style) === null || _curve$style2 === void 0 ? void 0 : _curve$style2.strokeColor) !== 'transparent' && ctx.stroke();
-};
-
-exports.drawCurve = drawCurve;
-
-var drawCircle = function drawCircle(ctx, circle) {
-  var _circle$style, _circle$style2;
-
-  updateDrawStyle(ctx, circle.style);
-  ctx.beginPath();
-  ctx.arc(circle.x, circle.y, circle.radius, 0, 2 * Math.PI);
-  ((_circle$style = circle.style) === null || _circle$style === void 0 ? void 0 : _circle$style.fillColor) !== 'transparent' && ctx.fill();
-  ((_circle$style2 = circle.style) === null || _circle$style2 === void 0 ? void 0 : _circle$style2.strokeColor) !== 'transparent' && ctx.stroke();
-};
-
-exports.drawCircle = drawCircle;
-
-var drawEllipse = function drawEllipse(ctx, ellipse) {
-  var _ellipse$style, _ellipse$style2;
-
-  updateDrawStyle(ctx, ellipse.style);
-  if (ctx.globalAlpha === 0) return;
-  ctx.beginPath();
-  ctx.ellipse(ellipse.x, ellipse.y, ellipse.radiusX, ellipse.radiusY, 0, 0, 2 * Math.PI);
-  ((_ellipse$style = ellipse.style) === null || _ellipse$style === void 0 ? void 0 : _ellipse$style.fillColor) !== 'transparent' && ctx.fill();
-  ((_ellipse$style2 = ellipse.style) === null || _ellipse$style2 === void 0 ? void 0 : _ellipse$style2.strokeColor) !== 'transparent' && ctx.stroke();
-};
-
-exports.drawEllipse = drawEllipse;
-
-var drawRect = function drawRect(ctx, rect) {
-  var _rect$style, _rect$style2;
-
-  updateDrawStyle(ctx, rect.style);
-  if (ctx.globalAlpha === 0) return;
-  ctx.beginPath();
-  ctx.rect(rect.x, rect.y, rect.width, rect.height);
-  ((_rect$style = rect.style) === null || _rect$style === void 0 ? void 0 : _rect$style.fillColor) !== 'transparent' && ctx.fill();
-  ((_rect$style2 = rect.style) === null || _rect$style2 === void 0 ? void 0 : _rect$style2.strokeColor) !== 'transparent' && ctx.stroke();
-};
-
-exports.drawRect = drawRect;
-
-var drawText = function drawText(ctx, text) {
-  var _text$style, _text$style2, _text$style3, _text$style$fontFamil, _text$style4;
-
-  updateDrawStyle(ctx, text.style);
-  if (ctx.globalAlpha === 0 || !((_text$style = text.style) !== null && _text$style !== void 0 && _text$style.strokeColor) || text.style.strokeColor === 'transparent') return;
-  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);
-  ctx.textBaseline = 'top';
-  ctx.fillStyle = text.style.strokeColor;
-
-  for (var 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) {
-  updateDrawStyle(ctx, picture.style);
-  if (ctx.globalAlpha === 0) return;
-  ctx.beginPath();
-  ctx.drawImage(picture.img, picture.x, picture.y, picture.width, picture.height);
-};
-
-exports.drawPicture = drawPicture;
-
-var drawShape = function drawShape(ctx, shape, responsiveScale, canvasOffset, selectionPadding) {
-  if (shape.visible === false) return;
-  applyShapeTransformations(ctx, shape, responsiveScale, canvasOffset, selectionPadding);
-
-  switch (shape.type) {
-    case 'brush':
-      drawBrush(ctx, shape);
-      break;
-
-    case 'text':
-      drawText(ctx, shape);
-      break;
-
-    case 'line':
-      drawLine(ctx, shape);
-      break;
-
-    case 'polygon':
-      drawPolygon(ctx, shape);
-      break;
-
-    case 'curve':
-      drawCurve(ctx, shape);
-      break;
-
-    case 'circle':
-      drawCircle(ctx, shape);
-      break;
-
-    case 'ellipse':
-      drawEllipse(ctx, shape);
-      break;
-
-    case 'rect':
-    case 'square':
-      drawRect(ctx, shape);
-      break;
-
-    case 'picture':
-      drawPicture(ctx, shape);
-      break;
-  }
-
-  restoreShapeTransformations(ctx);
-};
-
-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), {}, {
-    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]],
-    style: {
-      fillColor: 'transparent',
-      strokeColor: selectionColor,
-      lineWidth: selectionWidth / currentScale
-    }
-  });
-
-  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();
-  }
-
-  drawCircle(ctx, {
-    x: borders.x + borders.width / 2,
-    y: borders.y - _shapes.SELECTION_ANCHOR_SIZE / 2 - _shapes.SELECTION_ROTATED_ANCHOR_POSITION / currentScale,
-    radius: _shapes.SELECTION_ANCHOR_SIZE / 2 / currentScale,
-    style: {
-      fillColor: 'rgb(255,255,255)',
-      strokeColor: 'rgb(150,150,150)',
-      lineWidth: selectionWidth / currentScale
-    }
-  });
-};
-
-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), {}, {
-    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];
-
-    if (shape.type === 'curve' && i > 0 && i < shape.points.length - 1) {
-      drawRect(ctx, {
-        x: coordinate[0] - _shapes.SELECTION_ANCHOR_SIZE / 2,
-        y: coordinate[1] - _shapes.SELECTION_ANCHOR_SIZE / 2,
-        width: _shapes.SELECTION_ANCHOR_SIZE / currentScale,
-        height: _shapes.SELECTION_ANCHOR_SIZE / currentScale,
-        style: {
-          fillColor: 'rgb(255,255,255)',
-          strokeColor: 'rgb(150,150,150)',
-          lineWidth: selectionWidth / currentScale
-        }
-      });
-    } else {
-      drawCircle(ctx, {
-        x: coordinate[0],
-        y: coordinate[1],
-        radius: _shapes.SELECTION_ANCHOR_SIZE / 2 / currentScale,
-        style: {
-          fillColor: 'rgb(255,255,255)',
-          strokeColor: 'rgb(150,150,150)',
-          lineWidth: selectionWidth / currentScale
-        }
-      });
-    }
-  }
-};
-
-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;
-  applyShapeTransformations(ctx, shape, scaleRatio, canvasOffset, selectionPadding);
-
-  switch (shape.type) {
-    case 'polygon':
-    case 'line':
-    case 'curve':
-      drawLineSelection({
-        ctx: ctx,
-        shape: shape,
-        withAnchors: withAnchors,
-        selectionPadding: selectionPadding,
-        selectionWidth: selectionWidth,
-        selectionColor: selectionColor,
-        currentScale: scaleRatio
-      });
-      break;
-
-    default:
-      drawSelectionDefault({
-        ctx: ctx,
-        shape: shape,
-        withAnchors: withAnchors,
-        selectionPadding: selectionPadding,
-        selectionWidth: selectionWidth,
-        selectionColor: selectionColor,
-        currentScale: scaleRatio
-      });
-      break;
-  }
-
-  restoreShapeTransformations(ctx);
-};
-
-exports.drawSelection = drawSelection;