@yorab/react-paint 0.6.4 → 0.7.1

package/dist/types/tools.js

@@ -2,21 +2,4 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
-exports.ActionsEnum = void 0;
-// default
-var ActionsEnum;
-exports.ActionsEnum = ActionsEnum;
-
-(function (ActionsEnum) {
-  ActionsEnum["selection"] = "selection";
-  ActionsEnum["undo"] = "undo";
-  ActionsEnum["redo"] = "redo";
-  ActionsEnum["clear"] = "clear";
-  ActionsEnum["export"] = "export";
-  ActionsEnum["loadFile"] = "loadfile";
-  ActionsEnum["saveFile"] = "savefile";
-  ActionsEnum["move"] = "move";
-  ActionsEnum["uploadPicture"] = "uploadpicture";
-  ActionsEnum["addUrlPicture"] = "addurlpicture";
-})(ActionsEnum || (exports.ActionsEnum = ActionsEnum = {}));
+});

package/dist/utils/canvas.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.updateCanvasContext = exports.transformCanvas = exports.initCanvasContext = void 0;
+
+var _shapes = require("../constants/shapes");
+
+var _style = require("../constants/style");
+
+const initCanvasContext = ctx => {
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+};
+
+exports.initCanvasContext = initCanvasContext;
+
+const updateCanvasContext = 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;
+  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]);
+};
+
+exports.updateCanvasContext = updateCanvasContext;
+
+const transformCanvas = (ctx, responsiveScale, canvasOffset, rotation, translation) => {
+  ctx.save();
+  ctx.scale(responsiveScale, responsiveScale);
+  ctx.translate(canvasOffset[0], canvasOffset[1]);
+
+  if (rotation !== 0) {
+    ctx.translate(translation[0], translation[1]);
+    ctx.rotate(rotation);
+    ctx.translate(-translation[0], -translation[1]);
+  }
+};
+
+exports.transformCanvas = transformCanvas;

package/dist/utils/data.js

@@ -5,304 +5,45 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.roundValues = exports.createShape = exports.createPicture = exports.copyShape = exports.cleanShapesBeforeExport = exports.buildDataToExport = exports.addDefaultAndTempShapeProps = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+exports.cleanShapesBeforeExport = exports.buildDataToExport = exports.addDefaultAndTempShapeProps = void 0;
 
 var _fp = _interopRequireDefault(require("lodash/fp"));
 
-var _transform = require("./transform");
-
-var _Shapes = require("../types/Shapes");
-
 var _file = require("./file");
 
-var _tools = require("../constants/tools");
-
-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, maxPictureWidth, maxPictureHeight) {
-  return new Promise(function (resolve, reject) {
-    var img = new Image();
-
-    img.onload = function () {
-      var _fitContentInsideCont = (0, _transform.fitContentInsideContainer)(img.width, img.height, maxPictureWidth, maxPictureHeight, true),
-          _fitContentInsideCont2 = (0, _slicedToArray2["default"])(_fitContentInsideCont, 2),
-          width = _fitContentInsideCont2[0],
-          height = _fitContentInsideCont2[1];
-
-      var pictureShape = {
-        toolId: _tools.DEFAULT_SHAPE_PICTURE.id,
-        type: _Shapes.ShapeEnum.picture,
-        id: _fp["default"].uniqueId("".concat(_Shapes.ShapeEnum.picture, "_")),
-        x: (maxPictureWidth - width) / 2,
-        y: (maxPictureHeight - height) / 2,
-        width: width,
-        height: height,
-        src: fileOrUrl instanceof File ? img.src : fileOrUrl,
-        img: img,
-        translation: [0, 0],
-        rotation: 0
-      };
-      resolve(pictureShape);
-    };
-
-    img.onerror = function () {
-      reject(new Error('Some images could not be loaded'));
-    };
-
-    if (fileOrUrl instanceof File) {
-      img.src = URL.createObjectURL(fileOrUrl);
-    } else {
-      (0, _file.fetchAndStringify)(fileOrUrl).then(function (picData) {
-        img.src = picData;
-      })["catch"](function () {
-        img.src = ''; // to trigger onerror
-      });
-    }
-
-    img.onerror = function () {
-      reject(new Error('Error while loading the src'));
-    };
-
-    setTimeout(function () {
-      reject(new Error('Timeout while loading the src'));
-    }, 4000);
-  });
-};
-
-exports.createPicture = createPicture;
-
-var createShape = function createShape(ctx, shape, cursorPosition) {
-  var _shape$settings$fontB, _shape$settings, _shape$settings$fontI, _shape$settings2;
-
-  switch (shape.type) {
-    case _Shapes.ShapeEnum.brush:
-      shape.settings;
-      return {
-        toolId: shape.id,
-        type: _Shapes.ShapeEnum.brush,
-        id: _fp["default"].uniqueId("".concat(shape.type, "_")),
-        points: [[cursorPosition]],
-        translation: [0, 0],
-        rotation: 0,
-        style: {
-          globalAlpha: shape.settings.opacity["default"],
-          strokeColor: shape.settings.strokeColor["default"],
-          lineWidth: shape.settings.lineWidth["default"],
-          lineDash: shape.settings.lineDash["default"]
-        }
-      };
-
-    case _Shapes.ShapeEnum.line:
-      return {
-        toolId: shape.id,
-        type: _Shapes.ShapeEnum.line,
-        id: _fp["default"].uniqueId("".concat(shape.type, "_")),
-        points: [cursorPosition, cursorPosition],
-        translation: [0, 0],
-        rotation: 0,
-        style: {
-          globalAlpha: shape.settings.opacity["default"],
-          strokeColor: shape.settings.strokeColor["default"],
-          lineWidth: shape.settings.lineWidth["default"],
-          lineDash: shape.settings.lineDash["default"],
-          lineArrow: shape.settings.lineArrow["default"]
-        }
-      };
-
-    case _Shapes.ShapeEnum.polygon:
-      return {
-        toolId: shape.id,
-        type: _Shapes.ShapeEnum.polygon,
-        id: _fp["default"].uniqueId("".concat(shape.type, "_")),
-        points: _fp["default"].flow(_fp["default"].range(0), _fp["default"].map(function () {
-          return cursorPosition;
-        }))(shape.settings.pointsCount["default"]),
-        translation: [0, 0],
-        rotation: 0,
-        style: {
-          globalAlpha: shape.settings.opacity["default"],
-          fillColor: shape.settings.fillColor["default"],
-          strokeColor: shape.settings.strokeColor["default"],
-          lineWidth: shape.settings.lineWidth["default"],
-          lineDash: shape.settings.lineDash["default"],
-          pointsCount: shape.settings.pointsCount["default"]
-        }
-      };
-
-    case _Shapes.ShapeEnum.curve:
-      return {
-        toolId: shape.id,
-        type: _Shapes.ShapeEnum.curve,
-        id: _fp["default"].uniqueId("".concat(shape.type, "_")),
-        points: _fp["default"].flow(_fp["default"].range(0), _fp["default"].map(function () {
-          return cursorPosition;
-        }))(shape.settings.pointsCount["default"]),
-        translation: [0, 0],
-        rotation: 0,
-        style: {
-          globalAlpha: shape.settings.opacity["default"],
-          fillColor: shape.settings.fillColor["default"],
-          strokeColor: shape.settings.strokeColor["default"],
-          lineWidth: shape.settings.lineWidth["default"],
-          lineDash: shape.settings.lineDash["default"],
-          pointsCount: shape.settings.pointsCount["default"]
-        }
-      };
-
-    case _Shapes.ShapeEnum.rect:
-    case _Shapes.ShapeEnum.square:
-      return {
-        toolId: shape.id,
-        type: shape.type,
-        id: _fp["default"].uniqueId("".concat(shape.type, "_")),
-        x: cursorPosition[0],
-        y: cursorPosition[1],
-        width: 1,
-        height: 1,
-        translation: [0, 0],
-        rotation: 0,
-        style: {
-          globalAlpha: shape.settings.opacity["default"],
-          fillColor: shape.settings.fillColor["default"],
-          strokeColor: shape.settings.strokeColor["default"],
-          lineWidth: shape.settings.lineWidth["default"],
-          lineDash: shape.settings.lineDash["default"]
-        }
-      };
-
-    case _Shapes.ShapeEnum.text:
-      var defaultValue = ['Texte'];
-      var fontSize = (0, _transform.calculateTextFontSize)(ctx, defaultValue, 50, (_shape$settings$fontB = (_shape$settings = shape.settings) === null || _shape$settings === void 0 ? void 0 : _shape$settings.fontBold["default"]) !== null && _shape$settings$fontB !== void 0 ? _shape$settings$fontB : false, (_shape$settings$fontI = (_shape$settings2 = shape.settings) === null || _shape$settings2 === void 0 ? void 0 : _shape$settings2.fontItalic["default"]) !== null && _shape$settings$fontI !== void 0 ? _shape$settings$fontI : false, shape.settings.fontFamily["default"]);
-      return {
-        toolId: shape.id,
-        type: _Shapes.ShapeEnum.text,
-        id: _fp["default"].uniqueId("".concat(shape.type, "_")),
-        x: cursorPosition[0],
-        y: cursorPosition[1],
-        value: defaultValue,
-        fontSize: fontSize,
-        width: 50,
-        height: fontSize * (defaultValue.length || 1),
-        translation: [0, 0],
-        rotation: 0,
-        style: {
-          globalAlpha: shape.settings.opacity["default"],
-          strokeColor: shape.settings.strokeColor["default"],
-          fontFamily: shape.settings.fontFamily["default"]
-        }
-      };
-
-    case _Shapes.ShapeEnum.ellipse:
-      return {
-        toolId: shape.id,
-        type: _Shapes.ShapeEnum.ellipse,
-        id: _fp["default"].uniqueId("".concat(shape.type, "_")),
-        x: cursorPosition[0],
-        y: cursorPosition[1],
-        radiusX: 0,
-        radiusY: 0,
-        translation: [0, 0],
-        rotation: 0,
-        style: {
-          globalAlpha: shape.settings.opacity["default"],
-          fillColor: shape.settings.fillColor["default"],
-          strokeColor: shape.settings.strokeColor["default"],
-          lineWidth: shape.settings.lineWidth["default"],
-          lineDash: shape.settings.lineDash["default"]
-        }
-      };
-
-    case _Shapes.ShapeEnum.circle:
-      return {
-        toolId: shape.id,
-        type: _Shapes.ShapeEnum.circle,
-        id: _fp["default"].uniqueId("".concat(shape.type, "_")),
-        x: cursorPosition[0],
-        y: cursorPosition[1],
-        radius: 0,
-        translation: [0, 0],
-        rotation: 0,
-        style: {
-          globalAlpha: shape.settings.opacity["default"],
-          fillColor: shape.settings.fillColor["default"],
-          strokeColor: shape.settings.strokeColor["default"],
-          lineWidth: shape.settings.lineWidth["default"],
-          lineDash: shape.settings.lineDash["default"]
-        }
-      };
-  }
-};
-
-exports.createShape = createShape;
-
-var copyShape = function copyShape(shape) {
-  return _objectSpread(_objectSpread({}, shape), {}, {
-    id: _fp["default"].uniqueId("".concat(shape.type, "_")),
-    translation: [shape.translation[0] + 20, shape.translation[1] + 20]
-  });
-};
-
-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) {
+const cleanShapesBeforeExport = shapes => {
+  const propsToOmit = ['img', 'id'];
+  return shapes.map(shape => {
+    if (shape.type === 'picture') {
       if (!shape.src.startsWith('http')) {
-        return roundValues(_fp["default"].omit(propsToOmit, _objectSpread(_objectSpread({}, shape), {}, {
+        return _fp.default.omit(propsToOmit, { ...shape,
           src: (0, _file.getBase64Image)(shape.img)
-        })));
+        });
       }
     }
 
-    return roundValues(_fp["default"].omit(propsToOmit, shape));
+    return _fp.default.omit(propsToOmit, shape);
   });
 };
 
 exports.cleanShapesBeforeExport = cleanShapesBeforeExport;
 
-var buildDataToExport = function buildDataToExport(shapes, width, height) {
+const buildDataToExport = (shapes, width, height) => {
   return {
     shapes: cleanShapesBeforeExport(shapes),
     config: {
-      width: width,
-      height: height
+      width,
+      height
     }
   };
 };
 
 exports.buildDataToExport = buildDataToExport;
 
-var addDefaultAndTempShapeProps = function addDefaultAndTempShapeProps(shape) {
-  return _objectSpread(_objectSpread({}, shape), {}, {
-    id: _fp["default"].uniqueId("".concat(shape.type, "_"))
-  });
+const addDefaultAndTempShapeProps = shape => {
+  return { ...shape,
+    id: _fp.default.uniqueId("".concat(shape.type, "_"))
+  };
 };
 
 exports.addDefaultAndTempShapeProps = addDefaultAndTempShapeProps;

package/dist/utils/dom.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isEventInsideNode = void 0;
+
+const isEventInsideNode = (event, node) => {
+  return !(event.target instanceof Node) || !node ? false : node.contains(event.target);
+};
+
+exports.isEventInsideNode = isEventInsideNode;

package/dist/utils/file.js

@@ -7,36 +7,26 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getCanvasImage = exports.getBase64Image = exports.fetchAndStringify = exports.encodeShapesInString = exports.downloadFile = exports.decodeJson = exports.decodeImportedData = void 0;
 
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _shapes = require("../constants/shapes");
 
 var _fp = _interopRequireDefault(require("lodash/fp"));
 
-var _Shapes = require("../types/Shapes");
-
 var _data = require("./data");
 
-var _draw = require("./draw");
+var _canvas = require("./canvas");
 
-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; }
+var _migration = require("./migration");
 
-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 _shapes2 = require("./shapes");
 
-var fetchAndStringify = function fetchAndStringify(url) {
-  return fetch(url).then(function (response) {
-    return response.blob();
-  }).then(function (myBlob) {
-    return URL.createObjectURL(myBlob);
-  });
+const fetchAndStringify = url => {
+  return fetch(url).then(response => response.blob()).then(myBlob => URL.createObjectURL(myBlob));
 };
 
 exports.fetchAndStringify = fetchAndStringify;
 
-var downloadFile = function downloadFile(content, fileName) {
-  var a = document.createElement('a');
+const downloadFile = (content, fileName) => {
+  const a = document.createElement('a');
   a.href = content;
   a.download = fileName;
   document.body.appendChild(a);
@@ -46,33 +36,34 @@ var downloadFile = function downloadFile(content, fileName) {
 
 exports.downloadFile = downloadFile;
 
-var getBase64Image = function getBase64Image(img) {
-  var canvas = document.createElement('canvas');
+const getBase64Image = img => {
+  const canvas = document.createElement('canvas');
   canvas.width = img.width;
   canvas.height = img.height;
-  var ctx = canvas.getContext('2d');
+  const ctx = canvas.getContext('2d');
   if (!ctx) return '';
   ctx.drawImage(img, 0, 0);
-  var dataURL = canvas.toDataURL('image/png');
+  const dataURL = canvas.toDataURL('image/png');
   return dataURL;
 };
 
 exports.getBase64Image = getBase64Image;
 
-var encodeObjectToString = function encodeObjectToString(objectToEncode) {
+const encodeObjectToString = objectToEncode => {
   return 'data:text/plain;charset=utf-8,' + encodeURIComponent(JSON.stringify(objectToEncode));
 };
 
-var getCanvasImage = function getCanvasImage(shapes, canvasOffset, width, height, selectionPadding) {
-  var newCanvas = document.createElement('canvas');
+const getCanvasImage = (shapes, canvasOffset, width, height, selectionPadding) => {
+  const newCanvas = document.createElement('canvas');
   newCanvas.width = width;
   newCanvas.height = height;
-  var ctx = newCanvas.getContext('2d');
+  const ctx = newCanvas.getContext('2d');
   if (!ctx) return '';
   ctx.clearRect(0, 0, width, height);
+  (0, _canvas.initCanvasContext)(ctx);
 
-  for (var i = shapes.length - 1; i >= 0; i--) {
-    (0, _draw.drawShape)(ctx, shapes[i], 1, canvasOffset, selectionPadding);
+  for (let i = shapes.length - 1; i >= 0; i--) {
+    (0, _shapes2.drawShape)(ctx, shapes[i], 1, canvasOffset, selectionPadding);
   }
 
   return newCanvas.toDataURL('image/png');
@@ -80,108 +71,72 @@ var getCanvasImage = function getCanvasImage(shapes, canvasOffset, width, height
 
 exports.getCanvasImage = getCanvasImage;
 
-var encodeShapesInString = function encodeShapesInString(shapes, width, height) {
-  var dataToExport = (0, _data.buildDataToExport)(shapes, width, height);
+const encodeShapesInString = (shapes, width, height) => {
+  const dataToExport = (0, _data.buildDataToExport)(shapes, width, height);
   return encodeObjectToString(dataToExport);
 };
 
 exports.encodeShapesInString = encodeShapesInString;
 
-var decodeJson = /*#__PURE__*/function () {
-  var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(file) {
-    return _regenerator["default"].wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            return _context.abrupt("return", new Promise(function (resolve, reject) {
-              var reader = new FileReader();
-
-              reader.onload = function (event) {
-                var _event$target;
-
-                var result = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.result;
-                if (!result) return reject('Impossible de récupérer les données du fichier');
-                var json = JSON.parse(result);
-                resolve(json);
-              };
-
-              reader.readAsText(file);
-            }));
-
-          case 1:
-          case "end":
-            return _context.stop();
-        }
-      }
-    }, _callee);
-  }));
+const decodeJson = async file => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+
+    reader.onload = event => {
+      var _event$target;
 
-  return function decodeJson(_x) {
-    return _ref.apply(this, arguments);
-  };
-}();
+      const result = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.result;
+      if (!result) return reject('Impossible de récupérer les données du fichier');
+      const json = JSON.parse(result);
+      resolve(json);
+    };
+
+    reader.readAsText(file);
+  });
+};
 
 exports.decodeJson = decodeJson;
 
-var decodeImportedData = /*#__PURE__*/function () {
-  var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(shapesForJson) {
-    var promisesArray, jsonShapes, shapes;
-    return _regenerator["default"].wrap(function _callee2$(_context2) {
-      while (1) {
-        switch (_context2.prev = _context2.next) {
-          case 0:
-            promisesArray = [];
-            jsonShapes = shapesForJson.shapes;
-            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) {
-                  img.onload = function () {
-                    resolve();
-                  };
-
-                  img.onerror = function () {
-                    reject(new Error('Some images could not be loaded'));
-                  };
-                });
-                promisesArray.push(newPromise);
-
-                if (shape.src.startsWith('http')) {
-                  fetchAndStringify(shape.src).then(function (picData) {
-                    img.src = picData;
-                  })["catch"](function () {
-                    img.src = ''; // to trigger onerror
-                  });
-                } else {
-                  img.src = shape.src;
-                }
-
-                return (0, _data.addDefaultAndTempShapeProps)(_objectSpread(_objectSpread({}, shape), {}, {
-                  img: img
-                }));
-              }
-
-              return (0, _data.addDefaultAndTempShapeProps)(shape);
-            }), _fp["default"].compact)(jsonShapes);
-            _context2.next = 5;
-            return Promise.all(promisesArray);
-
-          case 5:
-            return _context2.abrupt("return", shapes);
-
-          case 6:
-          case "end":
-            return _context2.stop();
-        }
+const decodeImportedData = async shapesForJson => {
+  const promisesArray = [];
+  const jsonShapes = shapesForJson.shapes;
+
+  const shapes = _fp.default.flow(shapes => (0, _migration.migrateShapesV065)(shapes), _fp.default.map(shape => {
+    if (!_shapes.ShapeTypeArray.includes(shape.type)) return null;
+
+    if (shape.type === 'picture') {
+      const img = new Image();
+      const newPromise = new Promise((resolve, reject) => {
+        img.onload = () => {
+          resolve();
+        };
+
+        img.onerror = () => {
+          reject(new Error('Some images could not be loaded'));
+        };
+      });
+      promisesArray.push(newPromise);
+
+      if (shape.src.startsWith('http')) {
+        fetchAndStringify(shape.src).then(picData => {
+          img.src = picData;
+        }).catch(() => {
+          img.src = ''; // to trigger onerror
+        });
+      } else {
+        img.src = shape.src;
       }
-    }, _callee2);
-  }));
 
-  return function decodeImportedData(_x2) {
-    return _ref2.apply(this, arguments);
-  };
-}();
+      return (0, _data.addDefaultAndTempShapeProps)({ ...shape,
+        img
+      });
+    }
+
+    return (0, _data.addDefaultAndTempShapeProps)(shape);
+  }), _fp.default.compact)(jsonShapes);
+
+  await Promise.all(promisesArray);
+  return shapes;
+};
 
 exports.decodeImportedData = decodeImportedData;