@yorab/react-paint 0.7.3 → 0.7.4

package/README.md

@@ -1,11 +1,11 @@
-# React Paint
-
-## known issues :
-
-- dnd layout on mobile not working (fix : use dnd lib, or add touch listener to fake dnd, or provide alt UI)
-- TextEdit cursor overflow MINOR (quick fix : edit on modale ?)
-- circle resizing only goes one direction
-- adding padding to selection result in wrong intersection calculs
-- Clear with custom callback breaks history stack
-- selection padding needs work
-- with shrunk or grown container, anchors selection is miscalculated
+# React Paint
+
+## known issues :
+
+- dnd layout on mobile not working (fix : use dnd lib, or add touch listener to fake dnd, or provide alt UI)
+- TextEdit cursor overflow MINOR (quick fix : edit on modale ?)
+- circle resizing only goes one direction
+- adding padding to selection result in wrong intersection calculs
+- Clear with custom callback breaks history stack
+- selection padding needs work
+- with shrunk or grown container, anchors selection is miscalculated

package/dist/components/toolbox/MenuGroup.js

@@ -137,7 +137,7 @@ const MenuGroup = _ref => {
     disabled: disabled,
     loadFile: addPicture,
     img: _tools.UPLOAD_PICTURE_TOOL.icon,
-    accept: "image/png, image/gif, image/jpeg"
+    accept: "image/png, image/gif, image/jpeg, image/svg+xml"
   }), withUrlPicture && /*#__PURE__*/_react.default.createElement(_Button.default, {
     disabled: disabled,
     selected: false,

package/dist/constants/picture.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PICTURE_DEFAULT_SIZE = void 0;
+const PICTURE_DEFAULT_SIZE = 300;
+exports.PICTURE_DEFAULT_SIZE = PICTURE_DEFAULT_SIZE;

package/dist/hooks/useKeyboard.js

@@ -20,8 +20,10 @@ const KeyboardCode = {
   Backspace: 'Backspace',
   Escape: 'Escape',
   Shift: 'Shift',
-  Z: 'z',
-  Y: 'y'
+  z: 'z',
+  Z: 'Z',
+  y: 'y',
+  Y: 'Y'
 };
 const KeyboardCommand = {
   Copy: 'copy',
@@ -69,12 +71,12 @@ const useKeyboard = _ref => {
 
     const handleKeyDown = e => {
       if (e.metaKey || e.ctrlKey) {
-        if (e.key === KeyboardCode.Z) {
+        if (e.key === KeyboardCode.Z || e.key === KeyboardCode.z) {
           e.preventDefault();
           e.stopPropagation();
           backwardShape();
           return;
-        } else if (e.key === KeyboardCode.Y) {
+        } else if (e.key === KeyboardCode.Y || e.key === KeyboardCode.y) {
           e.preventDefault();
           e.stopPropagation();
           forwardShape();

package/dist/hooks/useShapes.js

@@ -13,6 +13,8 @@ var _fp = _interopRequireDefault(require("lodash/fp"));
 
 var _picture = require("../utils/shapes/picture");
 
+var _picture2 = require("../constants/picture");
+
 const useShapes = function () {
   let onDataChanged = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _fp.default.noop;
   const shapesRef = (0, _react.useRef)([]);
@@ -44,8 +46,8 @@ const useShapes = function () {
     shapesRef.current = [newShape, ...shapesRef.current];
   }, []);
   const addPictureShape = (0, _react.useCallback)(async function (fileOrUrl) {
-    let maxWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 300;
-    let maxHeight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 300;
+    let maxWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _picture2.PICTURE_DEFAULT_SIZE;
+    let maxHeight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _picture2.PICTURE_DEFAULT_SIZE;
     const pictureShape = await (0, _picture.createPicture)(fileOrUrl, maxWidth, maxHeight);
     addShape(pictureShape);
     saveShapes();

package/dist/styles.css

@@ -1,35 +1,35 @@
-#react-paint-root {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
-    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  background: #F3F3F3;
-
-}
-
-#react-paint-root .examples {
-  display: flex;
-}
-
-#react-paint-root .menu {
-  width: 250px;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-}
-
-#react-paint-root .menu a {
-  margin: 8px;
-  padding: 4px;
-}
-
-#react-paint-root .menu a.selected {
-  color: green;
-}
-
-#react-paint-root .currentApp {
-  flex: 1;
-  min-width: 0;
-}
+#react-paint-root {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  background: #F3F3F3;
+
+}
+
+#react-paint-root .examples {
+  display: flex;
+}
+
+#react-paint-root .menu {
+  width: 250px;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+#react-paint-root .menu a {
+  margin: 8px;
+  padding: 4px;
+}
+
+#react-paint-root .menu a.selected {
+  color: green;
+}
+
+#react-paint-root .currentApp {
+  flex: 1;
+  min-width: 0;
+}
 
 .s1unz6yq{position:absolute;display:inline-block;outline:none;left:0px;top:0px;-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top;box-sizing:border-box;-webkit-transform:var(--s1unz6yq-0);-ms-transform:var(--s1unz6yq-0);transform:var(--s1unz6yq-0);color:var(--s1unz6yq-1);padding:var(--s1unz6yq-2);font-size:var(--s1unz6yq-3);line-height:var(--s1unz6yq-3);font-family:var(--s1unz6yq-5);opacity:var(--s1unz6yq-6);width:-webkit-max-content;width:-moz-max-content;width:max-content;background:none;}.s1unz6yq[data-fontbold='true']{font-weight:bold;}.s1unz6yq[data-fontitalic='true']{font-style:italic;}
 .s9czb9p{-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}

package/dist/utils/file.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getCanvasImage = exports.getBase64Image = exports.fetchAndStringify = exports.encodeShapesInString = exports.downloadFile = exports.decodeJson = exports.decodeImportedData = void 0;
+exports.isSvg = exports.getCanvasImage = exports.getBase64Image = exports.fetchAndStringify = exports.encodeShapesInString = exports.downloadFile = exports.decodeJson = exports.decodeImportedData = exports.addSizeAndConvertSvgToBase64 = void 0;
 
 var _shapes = require("../constants/shapes");
 
@@ -19,8 +19,37 @@ var _migration = require("./migration");
 
 var _shapes2 = require("./shapes");
 
+var _picture = require("../constants/picture");
+
+const addSizeAndConvertSvgToBase64 = svgFileContent => {
+  var _inlineSVG$getAttribu;
+
+  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');
+
+  if (svgWidth || svgHeight) {
+    return 'data:image/svg+xml;base64,' + btoa(svgFileContent);
+  }
+
+  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;
+};
+
+exports.addSizeAndConvertSvgToBase64 = addSizeAndConvertSvgToBase64;
+
+const isSvg = fileOrUrl => (fileOrUrl instanceof File ? fileOrUrl.name : fileOrUrl).includes('.svg');
+
+exports.isSvg = isSvg;
+
 const fetchAndStringify = url => {
-  return fetch(url).then(response => response.blob()).then(myBlob => URL.createObjectURL(myBlob));
+  return isSvg(url) ? fetch(url).then(response => response.text()).then(svgFileContent => addSizeAndConvertSvgToBase64(svgFileContent)) : fetch(url).then(response => response.blob()).then(myBlob => URL.createObjectURL(myBlob));
 };
 
 exports.fetchAndStringify = fetchAndStringify;

package/dist/utils/shapes/picture.js

@@ -19,48 +19,65 @@ var _canvas = require("../canvas");
 
 var _rectangle = require("./rectangle");
 
+const createPictureShape = (img, maxPictureWidth, maxPictureHeight) => {
+  const [width, height] = (0, _transform.fitContentInsideContainer)(img.width, img.height, maxPictureWidth, maxPictureHeight, true);
+  return {
+    toolId: _tools.DEFAULT_SHAPE_PICTURE.id,
+    type: 'picture',
+    id: _fp.default.uniqueId('picture'.concat("_")),
+    x: (maxPictureWidth - width) / 2,
+    y: (maxPictureHeight - height) / 2,
+    width,
+    height,
+    src: img.src,
+    img,
+    rotation: 0
+  };
+};
+
+const createFilePicture = (img, resolve, file, maxPictureWidth, maxPictureHeight) => {
+  img.onload = async () => {
+    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
+
+      img.src = svgFile;
+      return;
+    }
+
+    const pictureShape = createPictureShape(img, maxPictureWidth, maxPictureHeight);
+    resolve(pictureShape);
+  };
+
+  img.src = URL.createObjectURL(file);
+};
+
+const createUrlPicture = (img, resolve, url, maxPictureWidth, maxPictureHeight) => {
+  img.onload = () => {
+    const pictureShape = createPictureShape(img, maxPictureWidth, maxPictureHeight);
+    resolve(pictureShape);
+  };
+
+  (0, _file.fetchAndStringify)(url).then(picData => {
+    img.src = picData;
+  }).catch(() => {
+    img.src = ''; // trigger onerror
+  });
+};
+
 const createPicture = (fileOrUrl, maxPictureWidth, maxPictureHeight) => {
   return new Promise((resolve, reject) => {
     const img = new Image();
 
-    img.onload = () => {
-      const [width, height] = (0, _transform.fitContentInsideContainer)(img.width, img.height, maxPictureWidth, maxPictureHeight, true);
-      const pictureShape = {
-        toolId: _tools.DEFAULT_SHAPE_PICTURE.id,
-        type: 'picture',
-        id: _fp.default.uniqueId('picture'.concat("_")),
-        x: (maxPictureWidth - width) / 2,
-        y: (maxPictureHeight - height) / 2,
-        width,
-        height,
-        src: fileOrUrl instanceof File ? img.src : fileOrUrl,
-        img,
-        rotation: 0
-      };
-      resolve(pictureShape);
-    };
-
     img.onerror = () => {
       reject(new Error('Some images could not be loaded'));
     };
 
-    if (fileOrUrl instanceof File) {
-      img.src = URL.createObjectURL(fileOrUrl);
-    } else {
-      (0, _file.fetchAndStringify)(fileOrUrl).then(picData => {
-        img.src = picData;
-      }).catch(() => {
-        img.src = ''; // to trigger onerror
-      });
-    }
-
-    img.onerror = () => {
-      reject(new Error('Error while loading the src'));
-    };
-
     setTimeout(() => {
-      reject(new Error('Timeout while loading the src'));
+      reject(new Error('Timeout while loading images'));
     }, 4000);
+    fileOrUrl instanceof File ? createFilePicture(img, resolve, fileOrUrl, maxPictureWidth, maxPictureHeight) : createUrlPicture(img, resolve, fileOrUrl, maxPictureWidth, maxPictureHeight);
   });
 };
 
@@ -75,9 +92,7 @@ const drawPicture = (ctx, picture) => {
 
 exports.drawPicture = drawPicture;
 
-const getPictureBorder = (picture, selectionPadding) => {
-  return (0, _rectangle.getRectBorder)(picture, selectionPadding);
-};
+const getPictureBorder = (picture, selectionPadding) => (0, _rectangle.getRectBorder)(picture, selectionPadding);
 
 exports.getPictureBorder = getPictureBorder;
 

package/dist/utils/transform.js

@@ -15,6 +15,8 @@ var _shapes = require("./shapes");
 
 var _brush = require("./shapes/brush");
 
+var _picture = require("../constants/picture");
+
 const getNormalizedSize = (originalWidth, originalHeight, width, height) => {
   const originalRatio = originalWidth / originalHeight;
   const newRatio = width / height;
@@ -91,6 +93,7 @@ exports.transformShape = transformShape;
 
 const fitContentInsideContainer = function (contentWidth, contentHeight, containerWidth, containerHeight) {
   let shouldFillContainer = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+  if (!contentWidth || !contentHeight || !containerHeight || !containerWidth) return [_picture.PICTURE_DEFAULT_SIZE, _picture.PICTURE_DEFAULT_SIZE];
   const contentRatio = contentWidth / contentHeight;
   const containerRatio = containerWidth / containerHeight;
 

package/package.json

@@ -1,78 +1,78 @@
-{
-  "name": "@yorab/react-paint",
-  "version": "0.7.3",
-  "keywords": [],
-  "author": "Yohann Rabatel",
-  "license": "MIT",
-  "main": "./dist/components/App.js",
-  "types": "./dist/components/App.d.ts",
-  "files": [
-    "README.md",
-    "package.json",
-    "dist/"
-  ],
-  "dependencies": {
-    "@linaria/react": "3.0.0-beta.22",
-    "lodash": "^4.17.20"
-  },
-  "devDependencies": {
-    "@babel/cli": "7.12.8",
-    "@babel/core": "^7.16.7",
-    "@babel/plugin-transform-runtime": "^7.16.8",
-    "@babel/preset-env": "^7.16.8",
-    "@babel/preset-react": "^7.16.7",
-    "@babel/preset-typescript": "^7.16.7",
-    "@babel/runtime": "^7.16.7",
-    "@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",
-    "@types/jest": "^26.0.15",
-    "@types/lodash": "4.14.170",
-    "@types/node": "^12.0.0",
-    "@types/react": "^18.0.10",
-    "@types/react-dom": "^18.0.5",
-    "@typescript-eslint/eslint-plugin": "4.28.0",
-    "@typescript-eslint/parser": "4.28.0",
-    "babel-jest": "^27.4.6",
-    "babel-loader": "^8.2.3",
-    "babel-plugin-module-resolver": "^4.1.0",
-    "css-loader": "^6.7.0",
-    "eslint": "7.29.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-import-resolver-typescript": "2.4.0",
-    "eslint-plugin-import": "2.23.4",
-    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "html-webpack-plugin": "^5.5.0",
-    "mini-css-extract-plugin": "^2.6.0",
-    "prettier": "^2.3.2",
-    "react": "18.1.0",
-    "react-dom": "18.1.0",
-    "typescript": "^4.7.2",
-    "webpack": "^5.66.0",
-    "webpack-cli": "^4.9.1",
-    "webpack-dev-server": "^4.7.3"
-  },
-  "peerDependencies": {
-    "react": "*",
-    "react-dom": "*"
-  },
-  "scripts": {
-    "declarationfiles": "tsc --project tsconfig.prod.json",
-    "start": "webpack serve --config webpack.config.js --open",
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "buildexamples": "webpack --config webpack.prod.config.js",
-    "build": "npx babel src/ --extensions '.js,.ts,.tsx,.jsx' --copy-files --delete-dir-on-start -d dist",
-    "buildwithcss": "npm run build && npm run buildexamples && mv build/styles.css dist/styles.css",
-    "publish": "npm run buildwithcss && npm publish --access public"
-  },
-  "jest": {
-    "transform": {
-      "^.+\\.[t|j]sx?$": "babel-jest"
-    }
-  }
-}
+{
+  "name": "@yorab/react-paint",
+  "version": "0.7.4",
+  "keywords": [],
+  "author": "Yohann Rabatel",
+  "license": "MIT",
+  "main": "./dist/components/App.js",
+  "types": "./dist/components/App.d.ts",
+  "files": [
+    "README.md",
+    "package.json",
+    "dist/"
+  ],
+  "dependencies": {
+    "@linaria/react": "3.0.0-beta.22",
+    "lodash": "^4.17.20"
+  },
+  "devDependencies": {
+    "@babel/cli": "7.12.8",
+    "@babel/core": "^7.16.7",
+    "@babel/plugin-transform-runtime": "^7.16.8",
+    "@babel/preset-env": "^7.16.8",
+    "@babel/preset-react": "^7.16.7",
+    "@babel/preset-typescript": "^7.16.7",
+    "@babel/runtime": "^7.16.7",
+    "@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",
+    "@types/jest": "^26.0.15",
+    "@types/lodash": "4.14.170",
+    "@types/node": "^12.0.0",
+    "@types/react": "^18.0.10",
+    "@types/react-dom": "^18.0.5",
+    "@typescript-eslint/eslint-plugin": "4.28.0",
+    "@typescript-eslint/parser": "4.28.0",
+    "babel-jest": "^27.4.6",
+    "babel-loader": "^8.2.3",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "css-loader": "^6.7.0",
+    "eslint": "7.29.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-import-resolver-typescript": "2.4.0",
+    "eslint-plugin-import": "2.23.4",
+    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "html-webpack-plugin": "^5.5.0",
+    "mini-css-extract-plugin": "^2.6.0",
+    "prettier": "^2.3.2",
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
+    "typescript": "^4.7.2",
+    "webpack": "^5.66.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.7.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
+  },
+  "scripts": {
+    "declarationfiles": "tsc --project tsconfig.prod.json",
+    "start": "webpack serve --config webpack.config.js --open",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "buildexamples": "webpack --config webpack.prod.config.js",
+    "build": "npx babel src/ --extensions '.js,.ts,.tsx,.jsx' --copy-files --delete-dir-on-start -d dist",
+    "buildwithcss": "npm run build && npm run buildexamples && mv build/styles.css dist/styles.css",
+    "publish": "npm run buildwithcss && npm publish --access public"
+  },
+  "jest": {
+    "transform": {
+      "^.+\\.[t|j]sx?$": "babel-jest"
+    }
+  }
+}