@yorab/react-paint 0.7.4 → 0.7.6

package/dist/utils/file.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isSvg = exports.getCanvasImage = exports.getBase64Image = exports.fetchAndStringify = exports.encodeShapesInString = exports.downloadFile = exports.decodeJson = exports.decodeImportedData = exports.addSizeAndConvertSvgToBase64 = void 0;
+exports.isSvg = exports.getCanvasImage = exports.getBase64Image = exports.fetchAndStringify = exports.encodeShapesInString = exports.downloadFile = exports.decodeJson = exports.decodeImportedData = exports.addSizeAndConvertSvgToObjectUrl = void 0;
 
 var _shapes = require("../constants/shapes");
 
@@ -21,35 +21,40 @@ var _shapes2 = require("./shapes");
 
 var _picture = require("../constants/picture");
 
-const addSizeAndConvertSvgToBase64 = svgFileContent => {
-  var _inlineSVG$getAttribu;
-
+const addSizeAndConvertSvgToObjectUrl = svgFileContent => {
   const parser = new DOMParser();
   const result = parser.parseFromString(svgFileContent, 'text/xml');
   const inlineSVG = result.getElementsByTagName('svg')[0];
   const svgWidth = inlineSVG.getAttribute('width');
   const svgHeight = inlineSVG.getAttribute('height');
+  let svgContentToConvert;
 
   if (svgWidth || svgHeight) {
-    return 'data:image/svg+xml;base64,' + btoa(svgFileContent);
+    svgContentToConvert = svgFileContent;
+  } else {
+    var _inlineSVG$getAttribu;
+
+    const viewBox = (_inlineSVG$getAttribu = inlineSVG.getAttribute('viewBox')) !== null && _inlineSVG$getAttribu !== void 0 ? _inlineSVG$getAttribu : "0 0 ".concat(_picture.PICTURE_DEFAULT_SIZE, " ").concat(_picture.PICTURE_DEFAULT_SIZE);
+    const [,, width, height] = viewBox.split(' ');
+    inlineSVG.setAttribute('width', width !== null && width !== void 0 ? width : _picture.PICTURE_DEFAULT_SIZE);
+    inlineSVG.setAttribute('height', height !== null && height !== void 0 ? height : _picture.PICTURE_DEFAULT_SIZE);
+    svgContentToConvert = new XMLSerializer().serializeToString(inlineSVG);
   }
 
-  const viewBox = (_inlineSVG$getAttribu = inlineSVG.getAttribute('viewBox')) !== null && _inlineSVG$getAttribu !== void 0 ? _inlineSVG$getAttribu : "0 0 ".concat(_picture.PICTURE_DEFAULT_SIZE, " ").concat(_picture.PICTURE_DEFAULT_SIZE);
-  const [,, width, height] = viewBox.split(' ');
-  inlineSVG.setAttribute('width', width !== null && width !== void 0 ? width : _picture.PICTURE_DEFAULT_SIZE);
-  inlineSVG.setAttribute('height', height !== null && height !== void 0 ? height : _picture.PICTURE_DEFAULT_SIZE);
-  const svg64 = btoa(new XMLSerializer().serializeToString(inlineSVG));
-  return 'data:image/svg+xml;base64,' + svg64;
+  const blob = new Blob([svgContentToConvert], {
+    type: 'image/svg+xml'
+  });
+  return URL.createObjectURL(blob);
 };
 
-exports.addSizeAndConvertSvgToBase64 = addSizeAndConvertSvgToBase64;
+exports.addSizeAndConvertSvgToObjectUrl = addSizeAndConvertSvgToObjectUrl;
 
 const isSvg = fileOrUrl => (fileOrUrl instanceof File ? fileOrUrl.name : fileOrUrl).includes('.svg');
 
 exports.isSvg = isSvg;
 
 const fetchAndStringify = url => {
-  return isSvg(url) ? fetch(url).then(response => response.text()).then(svgFileContent => addSizeAndConvertSvgToBase64(svgFileContent)) : fetch(url).then(response => response.blob()).then(myBlob => URL.createObjectURL(myBlob));
+  return isSvg(url) ? fetch(url).then(response => response.text()).then(svgFileContent => addSizeAndConvertSvgToObjectUrl(svgFileContent)) : fetch(url).then(response => response.blob()).then(myBlob => URL.createObjectURL(myBlob));
 };
 
 exports.fetchAndStringify = fetchAndStringify;
@@ -137,6 +142,7 @@ const decodeImportedData = async shapesForJson => {
       const img = new Image();
       const newPromise = new Promise((resolve, reject) => {
         img.onload = () => {
+          URL.revokeObjectURL(img.src);
           resolve();
         };
 

package/dist/utils/shapes/picture.js

@@ -19,7 +19,7 @@ var _canvas = require("../canvas");
 
 var _rectangle = require("./rectangle");
 
-const createPictureShape = (img, maxPictureWidth, maxPictureHeight) => {
+const createPictureShape = (img, storedSrc, maxPictureWidth, maxPictureHeight) => {
   const [width, height] = (0, _transform.fitContentInsideContainer)(img.width, img.height, maxPictureWidth, maxPictureHeight, true);
   return {
     toolId: _tools.DEFAULT_SHAPE_PICTURE.id,
@@ -29,33 +29,39 @@ const createPictureShape = (img, maxPictureWidth, maxPictureHeight) => {
     y: (maxPictureHeight - height) / 2,
     width,
     height,
-    src: img.src,
+    src: storedSrc,
     img,
     rotation: 0
   };
 };
 
 const createFilePicture = (img, resolve, file, maxPictureWidth, maxPictureHeight) => {
+  const initSrc = URL.createObjectURL(file);
+
   img.onload = async () => {
+    URL.revokeObjectURL(img.src);
+
     if ((0, _file.isSvg)(file) && !img.width && !img.height) {
       const svgFileContent = await file.text();
-      const svgFile = (0, _file.addSizeAndConvertSvgToBase64)(svgFileContent);
-      if (svgFile === img.src) return; // prevent infinite loop
+      const svgUrl = (0, _file.addSizeAndConvertSvgToObjectUrl)(svgFileContent);
 
-      img.src = svgFile;
-      return;
+      if (initSrc === img.src) {
+        img.src = svgUrl;
+        return;
+      }
     }
 
-    const pictureShape = createPictureShape(img, maxPictureWidth, maxPictureHeight);
+    const pictureShape = createPictureShape(img, img.src, maxPictureWidth, maxPictureHeight);
     resolve(pictureShape);
   };
 
-  img.src = URL.createObjectURL(file);
+  img.src = initSrc;
 };
 
 const createUrlPicture = (img, resolve, url, maxPictureWidth, maxPictureHeight) => {
   img.onload = () => {
-    const pictureShape = createPictureShape(img, maxPictureWidth, maxPictureHeight);
+    URL.revokeObjectURL(img.src);
+    const pictureShape = createPictureShape(img, url, maxPictureWidth, maxPictureHeight);
     resolve(pictureShape);
   };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yorab/react-paint",
-  "version": "0.7.4",
+  "version": "0.7.6",
   "keywords": [],
   "author": "Yohann Rabatel",
   "license": "MIT",
@@ -75,4 +75,4 @@
       "^.+\\.[t|j]sx?$": "babel-jest"
     }
   }
-}
+}