@yorab/react-paint 0.2.2 → 0.3.0

package/dist/utils/data.js

@@ -5,34 +5,41 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createShape = exports.createPicture = exports.copyShape = void 0;
+exports.roundValues = exports.createShape = exports.createPicture = exports.copyShape = exports.cleanShapesBeforeExport = exports.addDefaultAndTempShapeProps = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _fp = _interopRequireDefault(require("lodash/fp"));
 
 var _transform = require("./transform");
 
 var _Shapes = require("../types/Shapes");
 
+var _file = require("./file");
+
 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 createPicture = function createPicture(fileOrUrl, maxPictureSize) {
+var createPicture = function createPicture(fileOrUrl, maxPictureWidth, maxPictureHeight) {
   return new Promise(function (resolve, reject) {
     var img = new Image();
 
     img.onload = function () {
-      var maxSize = Math.min(Math.max(img.width, img.height), maxPictureSize);
-      var imgRatio = img.width / img.height;
+      var _fitContentInsideCont = (0, _transform.fitContentInsideContainer)(img.width, img.height, maxPictureWidth, maxPictureHeight),
+          _fitContentInsideCont2 = (0, _slicedToArray2["default"])(_fitContentInsideCont, 2),
+          width = _fitContentInsideCont2[0],
+          height = _fitContentInsideCont2[1];
+
       var pictureShape = {
         type: _Shapes.ShapeEnum.picture,
-        id: _fp["default"].uniqueId(_Shapes.ShapeEnum.picture),
-        x: 0,
-        y: 0,
-        width: imgRatio < 1 ? imgRatio * maxSize : maxSize,
-        height: imgRatio > 1 ? maxSize / imgRatio : maxSize,
+        id: _fp["default"].uniqueId("".concat(_Shapes.ShapeEnum.picture, "_")),
+        x: (maxPictureWidth - width) / 2,
+        y: (maxPictureHeight - height) / 2,
+        width: width,
+        height: height,
         src: img.src,
         img: img,
         translation: [0, 0],
@@ -66,7 +73,7 @@ var createShape = function createShape(ctx, shape, cursorPosition, defaultConf)
     case _Shapes.ShapeEnum.brush:
       return {
         type: _Shapes.ShapeEnum.brush,
-        id: _fp["default"].uniqueId(shape),
+        id: _fp["default"].uniqueId("".concat(shape, "_")),
         points: [[cursorPosition]],
         translation: [0, 0],
         rotation: 0,
@@ -76,7 +83,7 @@ var createShape = function createShape(ctx, shape, cursorPosition, defaultConf)
     case _Shapes.ShapeEnum.line:
       return {
         type: _Shapes.ShapeEnum.line,
-        id: _fp["default"].uniqueId(shape),
+        id: _fp["default"].uniqueId("".concat(shape, "_")),
         points: [cursorPosition, cursorPosition],
         translation: [0, 0],
         rotation: 0,
@@ -86,7 +93,7 @@ var createShape = function createShape(ctx, shape, cursorPosition, defaultConf)
     case _Shapes.ShapeEnum.polygon:
       return {
         type: _Shapes.ShapeEnum.polygon,
-        id: _fp["default"].uniqueId(shape),
+        id: _fp["default"].uniqueId("".concat(shape, "_")),
         points: _fp["default"].flow(_fp["default"].range(0), _fp["default"].map(function () {
           return cursorPosition;
         }))((_defaultConf$style$po = (_defaultConf$style = defaultConf.style) === null || _defaultConf$style === void 0 ? void 0 : _defaultConf$style.pointsCount) !== null && _defaultConf$style$po !== void 0 ? _defaultConf$style$po : 3),
@@ -98,7 +105,7 @@ var createShape = function createShape(ctx, shape, cursorPosition, defaultConf)
     case _Shapes.ShapeEnum.curve:
       return {
         type: _Shapes.ShapeEnum.curve,
-        id: _fp["default"].uniqueId(shape),
+        id: _fp["default"].uniqueId("".concat(shape, "_")),
         points: _fp["default"].flow(_fp["default"].range(0), _fp["default"].map(function () {
           return cursorPosition;
         }))((_defaultConf$style$po2 = (_defaultConf$style2 = defaultConf.style) === null || _defaultConf$style2 === void 0 ? void 0 : _defaultConf$style2.pointsCount) !== null && _defaultConf$style$po2 !== void 0 ? _defaultConf$style$po2 : 3),
@@ -111,7 +118,7 @@ var createShape = function createShape(ctx, shape, cursorPosition, defaultConf)
     case _Shapes.ShapeEnum.square:
       return {
         type: shape,
-        id: _fp["default"].uniqueId(shape),
+        id: _fp["default"].uniqueId("".concat(shape, "_")),
         x: cursorPosition[0],
         y: cursorPosition[1],
         width: 1,
@@ -126,7 +133,7 @@ var createShape = function createShape(ctx, shape, cursorPosition, defaultConf)
       var fontSize = (0, _transform.calculateTextFontSize)(ctx, defaultValue, 50, (_defaultConf$style3 = defaultConf.style) === null || _defaultConf$style3 === void 0 ? void 0 : _defaultConf$style3.fontFamily);
       return {
         type: _Shapes.ShapeEnum.text,
-        id: _fp["default"].uniqueId(shape),
+        id: _fp["default"].uniqueId("".concat(shape, "_")),
         x: cursorPosition[0],
         y: cursorPosition[1],
         value: defaultValue,
@@ -141,7 +148,7 @@ var createShape = function createShape(ctx, shape, cursorPosition, defaultConf)
     case _Shapes.ShapeEnum.ellipse:
       return {
         type: _Shapes.ShapeEnum.ellipse,
-        id: _fp["default"].uniqueId(shape),
+        id: _fp["default"].uniqueId("".concat(shape, "_")),
         x: cursorPosition[0],
         y: cursorPosition[1],
         radiusX: 0,
@@ -155,7 +162,7 @@ var createShape = function createShape(ctx, shape, cursorPosition, defaultConf)
     default:
       return {
         type: _Shapes.ShapeEnum.circle,
-        id: _fp["default"].uniqueId(shape),
+        id: _fp["default"].uniqueId("".concat(shape, "_")),
         x: cursorPosition[0],
         y: cursorPosition[1],
         radius: 0,
@@ -170,9 +177,54 @@ exports.createShape = createShape;
 
 var copyShape = function copyShape(shape) {
   return _objectSpread(_objectSpread({}, shape), {}, {
-    id: _fp["default"].uniqueId(shape.type),
+    id: _fp["default"].uniqueId("".concat(shape.type, "_")),
     translation: [shape.translation[0] + 20, shape.translation[1] + 20]
   });
 };
 
-exports.copyShape = copyShape;
+exports.copyShape = copyShape;
+
+var roundValues = function roundValues(prop) {
+  var precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
+
+  if (_fp["default"].isArray(prop)) {
+    return prop.map(roundValues);
+  }
+
+  if (_fp["default"].isObject(prop)) {
+    return _fp["default"].mapValues(roundValues, prop);
+  }
+
+  if (_fp["default"].isNumber(prop)) {
+    return +prop.toFixed(precision);
+  }
+
+  return prop;
+};
+
+exports.roundValues = roundValues;
+
+var cleanShapesBeforeExport = function cleanShapesBeforeExport(shapes) {
+  var propsToOmit = ['img', 'id'];
+  return shapes.map(function (shape) {
+    if (shape.type === _Shapes.ShapeEnum.picture) {
+      if (!shape.src.startsWith('http')) {
+        return roundValues(_fp["default"].omit(propsToOmit, _objectSpread(_objectSpread({}, shape), {}, {
+          src: (0, _file.getBase64Image)(shape.img)
+        })));
+      }
+    }
+
+    return roundValues(_fp["default"].omit(propsToOmit, shape));
+  });
+};
+
+exports.cleanShapesBeforeExport = cleanShapesBeforeExport;
+
+var addDefaultAndTempShapeProps = function addDefaultAndTempShapeProps(shape) {
+  return _objectSpread(_objectSpread({}, shape), {}, {
+    id: _fp["default"].uniqueId("".concat(shape.type, "_"))
+  });
+};
+
+exports.addDefaultAndTempShapeProps = addDefaultAndTempShapeProps;

package/dist/utils/draw.js

@@ -29,8 +29,9 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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, canvasOffset) {
+var applyShapeTransformations = function applyShapeTransformations(ctx, marker, responsiveScale, canvasOffset) {
   ctx.save();
+  ctx.scale(responsiveScale, responsiveScale);
   ctx.translate(marker.translation[0] + canvasOffset[0], marker.translation[1] + canvasOffset[1]);
 
   if (marker.rotation !== 0) {
@@ -48,19 +49,17 @@ var restoreShapeTransformations = function restoreShapeTransformations(ctx) {
 };
 
 var updateDrawStyle = function updateDrawStyle(ctx) {
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
-    fillColor: 'transparent',
-    strokeColor: 'blue',
-    globalAlpha: 100,
-    lineWidth: 1,
-    lineDash: 0
-  },
-      fillColor = _ref.fillColor,
-      globalAlpha = _ref.globalAlpha,
-      strokeColor = _ref.strokeColor,
-      lineWidth = _ref.lineWidth,
-      lineDash = _ref.lineDash;
-
+  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 ? 'blue' : _style$strokeColor,
+      _style$lineWidth = style.lineWidth,
+      lineWidth = _style$lineWidth === void 0 ? 1 : _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);
@@ -250,9 +249,9 @@ var drawPicture = function drawPicture(ctx, picture) {
 
 exports.drawPicture = drawPicture;
 
-var drawShape = function drawShape(ctx, shape, canvasOffset) {
+var drawShape = function drawShape(ctx, shape, responsiveScale, canvasOffset) {
   if (shape.visible === false) return;
-  applyShapeTransformations(ctx, shape, canvasOffset);
+  applyShapeTransformations(ctx, shape, responsiveScale, canvasOffset);
 
   switch (shape.type) {
     case 'brush':
@@ -298,10 +297,13 @@ var drawShape = function drawShape(ctx, shape, canvasOffset) {
 
 exports.drawShape = drawShape;
 
-var drawSelectionDefault = function drawSelectionDefault(_ref2) {
-  var ctx = _ref2.ctx,
-      shape = _ref2.shape,
-      withAnchors = _ref2.withAnchors;
+var drawSelectionDefault = function drawSelectionDefault(_ref) {
+  var ctx = _ref.ctx,
+      shape = _ref.shape,
+      withAnchors = _ref.withAnchors,
+      _ref$currentScale = _ref.currentScale,
+      currentScale = _ref$currentScale === void 0 ? 1 : _ref$currentScale;
+  var scaleWithMinCap = Math.min(1, currentScale);
 
   var _getShapeInfos2 = (0, _shapeData.getShapeInfos)(shape),
       borders = _getShapeInfos2.borders;
@@ -309,7 +311,7 @@ var drawSelectionDefault = function drawSelectionDefault(_ref2) {
   drawRect(ctx, borders);
   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]]
+    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 / scaleWithMinCap]]
   });
 
   var _iterator = _createForOfIteratorHelper(_shapes.SELECTION_RESIZE_ANCHOR_POSITIONS),
@@ -321,11 +323,11 @@ var drawSelectionDefault = function drawSelectionDefault(_ref2) {
       drawCircle(ctx, {
         x: borders.x + borders.width * anchorPosition[0],
         y: borders.y + borders.height * anchorPosition[1],
-        radius: _shapes.SELECTION_ANCHOR_SIZE / 2,
+        radius: _shapes.SELECTION_ANCHOR_SIZE / 2 / scaleWithMinCap,
         style: {
           fillColor: 'rgb(255,255,255)',
           strokeColor: 'rgb(150,150,150)',
-          lineWidth: 2
+          lineWidth: 2 / scaleWithMinCap
         }
       });
     }
@@ -337,20 +339,23 @@ var drawSelectionDefault = function drawSelectionDefault(_ref2) {
 
   drawCircle(ctx, {
     x: borders.x + borders.width / 2,
-    y: borders.y - _shapes.SELECTION_ANCHOR_SIZE / 2 - _shapes.SELECTION_ROTATED_ANCHOR_POSITION,
-    radius: _shapes.SELECTION_ANCHOR_SIZE / 2,
+    y: borders.y - _shapes.SELECTION_ANCHOR_SIZE / 2 - _shapes.SELECTION_ROTATED_ANCHOR_POSITION / scaleWithMinCap,
+    radius: _shapes.SELECTION_ANCHOR_SIZE / 2 / scaleWithMinCap,
     style: {
       fillColor: 'rgb(255,255,255)',
       strokeColor: 'rgb(150,150,150)',
-      lineWidth: 2
+      lineWidth: 2 / scaleWithMinCap
     }
   });
 };
 
-var drawLineSelection = function drawLineSelection(_ref3) {
-  var ctx = _ref3.ctx,
-      shape = _ref3.shape,
-      withAnchors = _ref3.withAnchors;
+var drawLineSelection = function drawLineSelection(_ref2) {
+  var ctx = _ref2.ctx,
+      shape = _ref2.shape,
+      withAnchors = _ref2.withAnchors,
+      _ref2$currentScale = _ref2.currentScale,
+      currentScale = _ref2$currentScale === void 0 ? 1 : _ref2$currentScale;
+  var scaleWithMinCap = Math.min(1, currentScale);
 
   var _getShapeInfos3 = (0, _shapeData.getShapeInfos)(shape),
       borders = _getShapeInfos3.borders;
@@ -365,36 +370,38 @@ var drawLineSelection = function drawLineSelection(_ref3) {
       drawRect(ctx, {
         x: coordinate[0] - _shapes.SELECTION_ANCHOR_SIZE / 2,
         y: coordinate[1] - _shapes.SELECTION_ANCHOR_SIZE / 2,
-        width: _shapes.SELECTION_ANCHOR_SIZE,
-        height: _shapes.SELECTION_ANCHOR_SIZE,
+        width: _shapes.SELECTION_ANCHOR_SIZE / scaleWithMinCap,
+        height: _shapes.SELECTION_ANCHOR_SIZE / scaleWithMinCap,
         style: {
           fillColor: 'rgb(255,255,255)',
           strokeColor: 'rgb(150,150,150)',
-          lineWidth: 2
+          lineWidth: 2 / scaleWithMinCap
         }
       });
     } else {
       drawCircle(ctx, {
         x: coordinate[0],
         y: coordinate[1],
-        radius: _shapes.SELECTION_ANCHOR_SIZE / 2,
+        radius: _shapes.SELECTION_ANCHOR_SIZE / 2 / scaleWithMinCap,
         style: {
           fillColor: 'rgb(255,255,255)',
           strokeColor: 'rgb(150,150,150)',
-          lineWidth: 2
+          lineWidth: 2 / scaleWithMinCap
         }
       });
     }
   }
 };
 
-var drawSelection = function drawSelection(_ref4) {
-  var ctx = _ref4.ctx,
-      shape = _ref4.shape,
-      canvasOffset = _ref4.canvasOffset,
-      _ref4$withAnchors = _ref4.withAnchors,
-      withAnchors = _ref4$withAnchors === void 0 ? true : _ref4$withAnchors;
-  applyShapeTransformations(ctx, shape, canvasOffset);
+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,
+      _ref3$withAnchors = _ref3.withAnchors,
+      withAnchors = _ref3$withAnchors === void 0 ? true : _ref3$withAnchors;
+  applyShapeTransformations(ctx, shape, scaleRatio, canvasOffset);
 
   switch (shape.type) {
     case 'polygon':
@@ -403,7 +410,8 @@ var drawSelection = function drawSelection(_ref4) {
       drawLineSelection({
         ctx: ctx,
         shape: shape,
-        withAnchors: withAnchors
+        withAnchors: withAnchors,
+        currentScale: scaleRatio
       });
       break;
 
@@ -411,7 +419,8 @@ var drawSelection = function drawSelection(_ref4) {
       drawSelectionDefault({
         ctx: ctx,
         shape: shape,
-        withAnchors: withAnchors
+        withAnchors: withAnchors,
+        currentScale: scaleRatio
       });
       break;
   }

package/dist/utils/file.js

@@ -5,27 +5,21 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.validateJson = exports.getCanvasImage = exports.fetchAndStringify = exports.encodeShapesInString = exports.encodePicturesInShapes = exports.downloadFile = exports.decodePicturesInShapes = exports.decodeJson = void 0;
+exports.getCanvasImage = exports.getBase64Image = exports.fetchAndStringify = exports.encodeShapesInString = exports.downloadFile = exports.decodePicturesInShapes = exports.decodeJson = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _ajv = _interopRequireDefault(require("ajv"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
 var _fp = _interopRequireDefault(require("lodash/fp"));
 
-var _drawableShape = _interopRequireDefault(require("../schemas/drawableShape.json"));
-
 var _Shapes = require("../types/Shapes");
 
-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); }
+var _data = require("./data");
 
-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; }
+var _draw = require("./draw");
 
 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; }
 
@@ -63,38 +57,32 @@ var getBase64Image = function getBase64Image(img) {
   return dataURL;
 };
 
+exports.getBase64Image = getBase64Image;
+
 var encodeObjectToString = function encodeObjectToString(objectToEncode) {
   return 'data:text/plain;charset=utf-8,' + encodeURIComponent(JSON.stringify(objectToEncode));
 };
 
-var getCanvasImage = function getCanvasImage(canvas) {
-  return canvas.toDataURL('image/png');
-};
-
-exports.getCanvasImage = getCanvasImage;
+var getCanvasImage = function getCanvasImage(shapes, canvasOffset, width, height) {
+  var newCanvas = document.createElement('canvas');
+  newCanvas.width = width;
+  newCanvas.height = height;
+  var ctx = newCanvas.getContext('2d');
+  if (!ctx) return '';
+  ctx.clearRect(0, 0, width, height);
 
-var encodePicturesInShapes = function encodePicturesInShapes(shapes) {
-  return shapes.map(function (shape) {
-    if (shape.type === _Shapes.ShapeEnum.picture) {
-      if (shape.src.startsWith('http')) {
-        return _fp["default"].omit('img', shape);
-      } else {
-        return _objectSpread(_objectSpread({}, shape), {}, {
-          src: getBase64Image(shape.img),
-          img: undefined
-        });
-      }
-    }
+  for (var i = shapes.length - 1; i >= 0; i--) {
+    (0, _draw.drawShape)(ctx, shapes[i], 1, canvasOffset);
+  }
 
-    return shape;
-  });
+  return newCanvas.toDataURL('image/png');
 };
 
-exports.encodePicturesInShapes = encodePicturesInShapes;
+exports.getCanvasImage = getCanvasImage;
 
 var encodeShapesInString = function encodeShapesInString(shapes) {
-  var shapesWithStringifyPictures = encodePicturesInShapes(shapes);
-  return encodeObjectToString(shapesWithStringifyPictures);
+  var cleanShapes = (0, _data.cleanShapesBeforeExport)(shapes);
+  return encodeObjectToString(cleanShapes);
 };
 
 exports.encodeShapesInString = encodeShapesInString;
@@ -143,7 +131,9 @@ var decodePicturesInShapes = /*#__PURE__*/function () {
         switch (_context2.prev = _context2.next) {
           case 0:
             promisesArray = [];
-            shapes = shapesForJson.map(function (shape) {
+            shapes = _fp["default"].flow(_fp["default"].map(function (shape) {
+              if (!_fp["default"].includes(shape.type, _Shapes.ShapeEnum)) return null;
+
               if (shape.type === _Shapes.ShapeEnum.picture) {
                 var img = new Image();
                 var newPromise = new Promise(function (resolve, reject) {
@@ -172,8 +162,8 @@ var decodePicturesInShapes = /*#__PURE__*/function () {
                 });
               }
 
-              return shape;
-            });
+              return (0, _data.addDefaultAndTempShapeProps)(shape);
+            }), _fp["default"].compact)(shapesForJson);
             _context2.next = 4;
             return Promise.all(promisesArray);
 
@@ -193,28 +183,4 @@ var decodePicturesInShapes = /*#__PURE__*/function () {
   };
 }();
 
-exports.decodePicturesInShapes = decodePicturesInShapes;
-
-var validateJson = function validateJson(json) {
-  var ajv = new _ajv["default"]();
-  var validate = ajv.compile(_drawableShape["default"]);
-  if (!_fp["default"].isArray(json)) return false;
-
-  var _iterator = _createForOfIteratorHelper(json),
-      _step;
-
-  try {
-    for (_iterator.s(); !(_step = _iterator.n()).done;) {
-      var shape = _step.value;
-      if (!validate(shape)) return false;
-    }
-  } catch (err) {
-    _iterator.e(err);
-  } finally {
-    _iterator.f();
-  }
-
-  return true;
-};
-
-exports.validateJson = validateJson;
+exports.decodePicturesInShapes = decodePicturesInShapes;

package/dist/utils/intersect.js

@@ -28,6 +28,8 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 var getCursorPosition = function getCursorPosition(e, canvas, givenWidth, givenHeight) {
   var _canvas$getBoundingCl;
 
+  var scaleRatio = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
+
   var _$getOr = _fp["default"].getOr(_fp["default"].getOr(e, 'changedTouches[0]', e), 'touches[0]', e),
       clientX = _$getOr.clientX,
       clientY = _$getOr.clientY;
@@ -38,7 +40,7 @@ var getCursorPosition = function getCursorPosition(e, canvas, givenWidth, givenH
     width: givenWidth,
     height: givenHeight
   };
-  return [(clientX - canvasBoundingRect.left) * (givenWidth / canvasBoundingRect.width), (clientY - canvasBoundingRect.top) * (givenHeight / canvasBoundingRect.height)];
+  return [(clientX - canvasBoundingRect.left) * (givenWidth / canvasBoundingRect.width) / scaleRatio, (clientY - canvasBoundingRect.top) * (givenHeight / canvasBoundingRect.height) / scaleRatio];
 };
 
 exports.getCursorPosition = getCursorPosition;
@@ -124,7 +126,9 @@ var applyRotationToVector = function applyRotationToVector(vector, shapeRotation
 exports.applyRotationToVector = applyRotationToVector;
 
 var checkPositionIntersection = function checkPositionIntersection(shape, position, canvasOffset) {
-  var checkAnchors = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  var currentScale = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+  var checkAnchors = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+  var scaleWithMinCap = Math.min(1, currentScale);
 
   var _getShapeInfos = (0, _shapeData.getShapeInfos)(shape),
       borders = _getShapeInfos.borders,
@@ -136,10 +140,10 @@ var checkPositionIntersection = function checkPositionIntersection(shape, positi
     if (shape.type === _Shapes.ShapeEnum.line || shape.type === _Shapes.ShapeEnum.polygon || shape.type === _Shapes.ShapeEnum.curve) {
       for (var i = 0; i < shape.points.length; i++) {
         if (isPointInsideRect({
-          x: shape.points[i][0] - _shapes.SELECTION_ANCHOR_SIZE / 2,
-          y: shape.points[i][1] - _shapes.SELECTION_ANCHOR_SIZE / 2,
-          width: _shapes.SELECTION_ANCHOR_SIZE,
-          height: _shapes.SELECTION_ANCHOR_SIZE
+          x: shape.points[i][0] - _shapes.SELECTION_ANCHOR_SIZE / 2 / scaleWithMinCap,
+          y: shape.points[i][1] - _shapes.SELECTION_ANCHOR_SIZE / 2 / scaleWithMinCap,
+          width: _shapes.SELECTION_ANCHOR_SIZE / scaleWithMinCap,
+          height: _shapes.SELECTION_ANCHOR_SIZE / scaleWithMinCap
         }, newPosition)) {
           return {
             mode: _Mode.SelectionModeLib.resize,
@@ -149,10 +153,10 @@ var checkPositionIntersection = function checkPositionIntersection(shape, positi
       }
     } else {
       if (isPointInsideRect({
-        x: borders.x + borders.width / 2 - _shapes.SELECTION_ANCHOR_SIZE / 2,
-        y: borders.y - _shapes.SELECTION_ANCHOR_SIZE - _shapes.SELECTION_ROTATED_ANCHOR_POSITION,
-        width: _shapes.SELECTION_ANCHOR_SIZE,
-        height: _shapes.SELECTION_ANCHOR_SIZE
+        x: borders.x + borders.width / 2 - _shapes.SELECTION_ANCHOR_SIZE / 2 / scaleWithMinCap,
+        y: borders.y - _shapes.SELECTION_ANCHOR_SIZE / scaleWithMinCap - _shapes.SELECTION_ROTATED_ANCHOR_POSITION / scaleWithMinCap,
+        width: _shapes.SELECTION_ANCHOR_SIZE / scaleWithMinCap,
+        height: _shapes.SELECTION_ANCHOR_SIZE / scaleWithMinCap
       }, newPosition)) {
         return {
           mode: _Mode.SelectionModeLib.rotate
@@ -167,10 +171,10 @@ var checkPositionIntersection = function checkPositionIntersection(shape, positi
           var anchorPosition = _step.value;
 
           if (isPointInsideRect({
-            x: borders.x + borders.width * anchorPosition[0] - _shapes.SELECTION_ANCHOR_SIZE / 2,
-            y: borders.y + borders.height * anchorPosition[1] - _shapes.SELECTION_ANCHOR_SIZE / 2,
-            width: _shapes.SELECTION_ANCHOR_SIZE,
-            height: _shapes.SELECTION_ANCHOR_SIZE
+            x: borders.x + borders.width * anchorPosition[0] - _shapes.SELECTION_ANCHOR_SIZE / 2 / scaleWithMinCap,
+            y: borders.y + borders.height * anchorPosition[1] - _shapes.SELECTION_ANCHOR_SIZE / 2 / scaleWithMinCap,
+            width: _shapes.SELECTION_ANCHOR_SIZE / scaleWithMinCap,
+            height: _shapes.SELECTION_ANCHOR_SIZE / scaleWithMinCap
           }, newPosition)) {
             return {
               mode: _Mode.SelectionModeLib.resize,

package/dist/utils/selection.js

@@ -47,9 +47,9 @@ var getNewSelectionData = function getNewSelectionData(hoverMode, selectedShape,
 
 exports.getNewSelectionData = getNewSelectionData;
 
-var selectShape = function selectShape(shapes, cursorPosition, canvasOffset, selectedShape) {
+var selectShape = function selectShape(shapes, cursorPosition, currentScale, canvasOffset, selectedShape) {
   if (selectedShape) {
-    var positionIntersection = (0, _intersect.checkPositionIntersection)(selectedShape, cursorPosition, canvasOffset, true) || {
+    var positionIntersection = (0, _intersect.checkPositionIntersection)(selectedShape, cursorPosition, canvasOffset, currentScale, true) || {
       mode: _Mode.SelectionModeLib["default"]
     };
     var newSelectionMode = getNewSelectionData(positionIntersection, selectedShape, cursorPosition);
@@ -63,7 +63,7 @@ var selectShape = function selectShape(shapes, cursorPosition, canvasOffset, sel
   }
 
   var foundShape = _fp["default"].find(function (shape) {
-    return !!(0, _intersect.checkPositionIntersection)(shape, cursorPosition, canvasOffset, false);
+    return !!(0, _intersect.checkPositionIntersection)(shape, cursorPosition, canvasOffset, currentScale, false);
   }, shapes);
 
   if (!!foundShape) {

package/dist/utils/transform.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updatePolygonLinesCount = exports.translateShape = exports.transformShape = exports.rotateShape = exports.resizeText = exports.resizeShape = exports.resizeRect = exports.resizePicture = exports.resizeLine = exports.resizeEllipse = exports.resizeCircle = exports.resizeBrush = exports.radiansToDegrees = exports.paintNewPointToShape = exports.getNormalizedSize = exports.degreesToRadians = exports.createNewPointGroupToShape = exports.calculateTextWidth = exports.calculateTextFontSize = void 0;
+exports.updatePolygonLinesCount = exports.translateShape = exports.transformShape = exports.rotateShape = exports.resizeText = exports.resizeShape = exports.resizeRect = exports.resizePicture = exports.resizeLine = exports.resizeEllipse = exports.resizeCircle = exports.resizeBrush = exports.radiansToDegrees = exports.paintNewPointToShape = exports.getNormalizedSize = exports.fitContentInsideContainer = exports.degreesToRadians = exports.createNewPointGroupToShape = exports.calculateTextWidth = exports.calculateTextFontSize = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
@@ -368,4 +368,20 @@ var radiansToDegrees = function radiansToDegrees(radians) {
   return radians * 180 / Math.PI;
 };
 
-exports.radiansToDegrees = radiansToDegrees;
+exports.radiansToDegrees = radiansToDegrees;
+
+var fitContentInsideContainer = function fitContentInsideContainer(contentWidth, contentHeight, containerWidth, containerHeight) {
+  var shouldFillContainer = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+  var contentRatio = contentWidth / contentHeight;
+  var containerRatio = containerWidth / containerHeight;
+
+  if (contentRatio > containerRatio) {
+    var newWidth = shouldFillContainer ? containerWidth : Math.min(contentWidth, containerWidth);
+    return [newWidth, newWidth / contentRatio];
+  } else {
+    var newHeight = shouldFillContainer ? containerHeight : Math.min(contentHeight, containerHeight);
+    return [newHeight * contentRatio, newHeight];
+  }
+};
+
+exports.fitContentInsideContainer = fitContentInsideContainer;