@yorab/react-paint 0.7.6 → 0.8.0

package/dist/hooks/useShapes.js

@@ -1,184 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = require("react");
-
-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)([]);
-  const onDataChangedRef = (0, _react.useRef)(onDataChanged);
-  onDataChangedRef.current = onDataChanged;
-  const [selectedShape, setSelectedShape] = (0, _react.useState)(undefined);
-  const [savedShapes, setSavedShapes] = (0, _react.useState)({
-    states: [{
-      shapes: [],
-      selectedShape: undefined
-    }],
-    cursor: 0
-  });
-  const canGoBackward = savedShapes.cursor > 0;
-  const canGoForward = savedShapes.cursor < savedShapes.states.length - 1;
-  const canClear = shapesRef.current.length > 0;
-  const saveShapes = (0, _react.useCallback)(() => {
-    setSavedShapes(prevSavedShaped => {
-      return _fp.default.isEqual(_fp.default.get([prevSavedShaped.cursor, 'shapes'], prevSavedShaped.states), shapesRef.current) ? prevSavedShaped : {
-        states: [...prevSavedShaped.states.slice(0, prevSavedShaped.cursor + 1), {
-          shapes: shapesRef.current,
-          selectedShape
-        }],
-        cursor: prevSavedShaped.cursor + 1
-      };
-    });
-  }, [selectedShape]);
-  const addShape = (0, _react.useCallback)(newShape => {
-    shapesRef.current = [newShape, ...shapesRef.current];
-  }, []);
-  const addPictureShape = (0, _react.useCallback)(async function (fileOrUrl) {
-    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();
-    return pictureShape;
-  }, [addShape, saveShapes]);
-  const updateShape = (0, _react.useCallback)(function (updatedShape) {
-    let withSave = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-    shapesRef.current = shapesRef.current.map(marker => {
-      return marker.id === (selectedShape === null || selectedShape === void 0 ? void 0 : selectedShape.id) ? updatedShape : marker;
-    });
-    setSelectedShape(prevSelectedShape => (prevSelectedShape === null || prevSelectedShape === void 0 ? void 0 : prevSelectedShape.id) === updatedShape.id ? updatedShape : prevSelectedShape);
-    withSave && saveShapes();
-  }, [selectedShape, saveShapes]);
-  const updateShapes = (0, _react.useCallback)(newShapes => {
-    const pureShapes = newShapes.map(shape => _fp.default.omit(['chosen'], shape));
-    shapesRef.current = pureShapes;
-    saveShapes();
-  }, [saveShapes]);
-  const removeShape = (0, _react.useCallback)(shape => {
-    setSelectedShape(prevSelectedShape => (prevSelectedShape === null || prevSelectedShape === void 0 ? void 0 : prevSelectedShape.id) === shape.id ? undefined : prevSelectedShape);
-    shapesRef.current = _fp.default.remove({
-      id: shape.id
-    }, shapesRef.current);
-    saveShapes();
-  }, [saveShapes]);
-  const backwardShape = (0, _react.useCallback)(() => {
-    setSavedShapes(prevSavedShaped => {
-      const newCursor = Math.max(0, prevSavedShaped.cursor - 1);
-      shapesRef.current = _fp.default.get([newCursor, 'shapes'], prevSavedShaped.states);
-      setSelectedShape(_fp.default.get([newCursor, 'selectedShape'], prevSavedShaped.states));
-      return _fp.default.set('cursor', newCursor, prevSavedShaped);
-    });
-  }, []);
-  const forwardShape = (0, _react.useCallback)(() => {
-    setSavedShapes(prevSavedShaped => {
-      const newCursor = Math.min(prevSavedShaped.states.length - 1, prevSavedShaped.cursor + 1);
-      shapesRef.current = _fp.default.get([newCursor, 'shapes'], prevSavedShaped.states);
-      setSelectedShape(_fp.default.get([newCursor, 'selectedShape'], prevSavedShaped.states));
-      return _fp.default.set('cursor', newCursor, prevSavedShaped);
-    });
-  }, []);
-  const clearShapes = (0, _react.useCallback)(function () {
-    let shapesToInit = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-    let clearHistory = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-    setSelectedShape(undefined);
-    shapesRef.current = shapesToInit;
-    setSavedShapes(prevSavedShaped => {
-      return clearHistory ? {
-        states: [{
-          shapes: shapesToInit,
-          selectedShape: undefined
-        }],
-        cursor: 0
-      } : {
-        states: [...prevSavedShaped.states.slice(0, prevSavedShaped.cursor + 1), {
-          shapes: shapesToInit,
-          selectedShape: undefined
-        }],
-        cursor: prevSavedShaped.cursor + 1
-      };
-    });
-  }, []);
-  const moveShapes = (0, _react.useCallback)((firstShapeId, lastShapeId) => {
-    const shapes = shapesRef.current;
-
-    const firstShapeIndex = _fp.default.findIndex({
-      id: firstShapeId
-    }, shapes);
-
-    const lastShapeIndex = _fp.default.findIndex({
-      id: lastShapeId
-    }, shapes); // todo utils
-
-
-    if (firstShapeIndex < lastShapeIndex) {
-      updateShapes([..._fp.default.slice(0, firstShapeIndex, shapes), ..._fp.default.slice(firstShapeIndex + 1, lastShapeIndex + 1, shapes), shapes[firstShapeIndex], ..._fp.default.slice(lastShapeIndex + 1, shapes.length, shapes)]);
-    } else {
-      updateShapes([..._fp.default.slice(0, lastShapeIndex, shapes), shapes[firstShapeIndex], ..._fp.default.slice(lastShapeIndex, firstShapeIndex, shapes), ..._fp.default.slice(firstShapeIndex + 1, shapes.length, shapes)]);
-    }
-  }, [updateShapes]);
-  const toggleShapeVisibility = (0, _react.useCallback)(shape => {
-    const shapes = shapesRef.current;
-
-    const shapeIndex = _fp.default.findIndex({
-      id: shape.id
-    }, shapes);
-
-    if (shapeIndex < 0) return;
-
-    const newShape = _fp.default.set('visible', shape.visible === false, shape);
-
-    setSelectedShape(prevSelectedShape => (prevSelectedShape === null || prevSelectedShape === void 0 ? void 0 : prevSelectedShape.id) === newShape.id ? newShape : prevSelectedShape);
-    updateShapes(_fp.default.set(shapeIndex, newShape, shapes));
-  }, [updateShapes]);
-  const toggleShapeLock = (0, _react.useCallback)(shape => {
-    const shapes = shapesRef.current;
-
-    const shapeIndex = _fp.default.findIndex({
-      id: shape.id
-    }, shapes);
-
-    if (shapeIndex < 0) return;
-
-    const newShape = _fp.default.set('locked', !shape.locked, shape);
-
-    setSelectedShape(prevSelectedShape => (prevSelectedShape === null || prevSelectedShape === void 0 ? void 0 : prevSelectedShape.id) === newShape.id ? newShape : prevSelectedShape);
-    updateShapes(_fp.default.set(shapeIndex, newShape, shapes));
-  }, [updateShapes]);
-  (0, _react.useEffect)(() => {
-    onDataChangedRef.current();
-  }, [savedShapes]);
-  return {
-    shapesRef,
-    selectedShape,
-    addShape,
-    addPictureShape,
-    moveShapes,
-    saveShapes,
-    setSelectedShape,
-    toggleShapeVisibility,
-    toggleShapeLock,
-    removeShape,
-    updateShape,
-    backwardShape,
-    forwardShape,
-    clearShapes,
-    canGoBackward,
-    canGoForward,
-    canClear
-  };
-};
-
-var _default = useShapes;
-exports.default = _default;

package/dist/hooks/useSnackbar.js

@@ -1,56 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _snackbar = require("../constants/snackbar");
-
-var _fp = _interopRequireDefault(require("lodash/fp"));
-
-var _react = require("react");
-
-const useSnackbar = () => {
-  const timers = (0, _react.useRef)([]);
-  const [snackbarList, setSnackbarList] = (0, _react.useState)([]);
-
-  const removeSnackbar = id => {
-    setSnackbarList(prev => _fp.default.remove({
-      id: id
-    }, prev));
-  };
-
-  const addSnackbar = _ref => {
-    let {
-      type = _snackbar.SNACKBAR_DEFAULT_SETTINGS.type,
-      duration = _snackbar.SNACKBAR_DEFAULT_SETTINGS.duration,
-      text
-    } = _ref;
-    const newSnackbar = {
-      id: _fp.default.uniqueId('snackbar_'),
-      duration,
-      type,
-      text
-    };
-    setSnackbarList(prev => [...prev, newSnackbar]);
-    timers.current = [...timers.current, setTimeout(() => removeSnackbar(newSnackbar.id), duration)];
-  };
-
-  (0, _react.useEffect)(() => {
-    return () => {
-      for (const timer of timers.current) {
-        clearTimeout(timer);
-      }
-    };
-  }, []);
-  return {
-    snackbarList,
-    addSnackbar
-  };
-};
-
-var _default = useSnackbar;
-exports.default = _default;

package/dist/styles.css

@@ -1,91 +0,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;}
-.s1538eht{position:relative;background-color:var(--canvas-bg);background-repeat:repeat;background-size:16px;overflow:hidden;display:grid;}.s1538eht[data-grow='true']{width:100%;height:100%;}
-.s101qxdc{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;max-width:100%;touch-action:none;display:block;grid-area:1 / 1;}.s101qxdc[data-grow='true']{width:100%;}
-.sa4oq48{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;max-width:100%;touch-action:none;display:block;grid-area:1 / 1;cursor:var(--sa4oq48-0);}.sa4oq48[data-grow='true']{width:100%;}
-.sq3bzv4{min-width:32px;height:32px;font-size:14px;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;box-sizing:border-box;-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;background:none;border:none;cursor:pointer;border-radius:var(--font-radius);color:var(--font-color);margin:2px 4px;padding:0;}.sq3bzv4[data-selected='1']{color:var(--font-selected-color);background:var(--font-selected-bg);}.sq3bzv4[data-hidden='1']{visibility:hidden;}.sq3bzv4[data-disabled='1']{cursor:default;color:var(--font-disabled-color);background:var(--font-disabled-bg);}.sq3bzv4[data-selected='0'][data-disabled='0']{background:var(--font-bg);color:var(--font-color);}.sq3bzv4[data-selected='0'][data-disabled='0']:hover{color:var(--font-hover-color);background:var(--font-hover-bg);}.sq3bzv4[data-disabled='0']{cursor:pointer;}.sq3bzv4 svg{fill:currentColor;width:20px;height:20px;}.sq3bzv4 input{position:absolute;visibility:hidden;}
-.sst453j{width:100%;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:2px 6px;}
-.s1q5lsc2{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;}
-.s1dis2j8{-webkit-flex:1;-ms-flex:1;flex:1;text-align:left;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;}.s1dis2j8 + .s1q5lsc2{margin-left:12px;}
-.s1xzg253{position:absolute;z-index:3;background:var(--toolbar-bg);box-shadow:0 3px 8px rgb(0 0 0 / 24%);padding:8px;border-radius:8px;white-space:nowrap;box-sizing:border-box;}.s1xzg253[data-alignment='left']{left:0;margin:4px;}.s1xzg253[data-alignment='center']{left:50%;-webkit-transform:translate3d(-50%,0px,0px);-ms-transform:translate3d(-50%,0px,0px);transform:translate3d(-50%,0px,0px);margin:4px 0px;}.s1xzg253[data-alignment='right']{right:0;margin:4px;}.s1xzg253[data-position='bottom']{bottom:100%;}.s1xzg253[data-position='top']{top:100%;}.s1xzg253[data-fitcontainer='true']{max-width:100%;}
-.s17qj3jh{margin-bottom:8px;margin-top:4px;font-size:18px;}
-.su3a8bs{display:inline-block;background:var(--toolbar-bg);box-sizing:border-box;overflow-y:auto;min-width:200px;}
-.szboplp{margin:2px 0;}.szboplp:not(:hover){opacity:0.2;}
-.sff5xt{border:3px solid transparent;padding:4px 0px;position:relative;background:var(--toolbar-bg);box-sizing:border-box;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:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}.sff5xt[data-is-over='1']{border:3px dotted var(--font-hover-bg);}.sff5xt[data-is-dragging='1']{opacity:0.4;}.sff5xt[data-selected='1']{color:var(--font-selected-color);background:var(--font-selected-bg);}.sff5xt[data-selected='1'] .szboplp{color:white;}.sff5xt[data-selected='0'][data-disabled='0']{background:var(--font-bg);color:var(--font-color);}.sff5xt[data-selected='0'][data-disabled='0']:hover{color:var(--font-hover-color);background:var(--font-hover-bg);}.sff5xt[data-disabled='1']{cursor:default;color:var(--font-disabled-color);background:var(--font-disabled-bg);}.sff5xt[data-disabled='0']{cursor:move;}.sff5xt > span{height:20px;line-height:1;color:#8a8a8a;}.sff5xt > span > svg{fill:#8a8a8a;width:20px;height:20px;padding:0 4px;-webkit-transform:scale(0.75);-ms-transform:scale(0.75);transform:scale(0.75);}
-.sj3bift{margin:2px 0;}.sj3bift[data-visible='false']{opacity:0.2;}
-.s10ip0a4{margin:2px 0;}.s10ip0a4[data-locked='false']{opacity:0.2;}
-.s1j9uq9o span{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
-.s156ddbb{min-width:60px;font-weight:bold;}
-.s11gt4hl{-webkit-flex:1;-ms-flex:1;flex:1;}
-.s13cxqhq.s13cxqhq{bottom:0;top:unset;}
-.s1idv8qv{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;max-height:100%;}
-.s1mhvlda{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;overflow-y:auto;}
-.sr4amic{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;}
-.s13llc5i{opacity:0.6;text-align:center;padding:12px 0px;}
-.s1bvz4xj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.s1bvz4xj[data-vertical='1']{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
-.siejlch{position:relative;display:inline-block;}
-.s1uphjfh{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.s1uphjfh[data-vertical='1']{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
-.s1e5a6k5{position:relative;display:inline-block;}
-.s1c8tp02{z-index:3;position:absolute;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;left:0;right:0;bottom:0;top:0;}.s1c8tp02[data-position='center']{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.s1c8tp02[data-position='bottom']{-webkit-align-items:end;-webkit-box-align:end;-ms-flex-align:end;align-items:end;}
-.svkxpz4{display:grid;background:var(--toolbar-bg);box-shadow:0 3px 8px rgb(0 0 0 / 24%);padding:4px;border-radius:8px;white-space:nowrap;position:relative;}
-.s1s9jyyg{position:absolute;left:0;top:0;right:0;bottom:0;background:#00000073;}
-.s95bkm9 form{grid-template-columns:3fr 1fr 1fr;}.s95bkm9 form input{color:var(--font-color);border:1px solid var(--font-color);background:var(--toolbar-bg);outline:none;}
-.so6hnjf{-webkit-flex:1;-ms-flex:1;flex:1;position:relative;height:100%;text-align:center;height:36px;}
-.s1c1dllr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;max-height:36px;background:var(--toolbar-bg);border-bottom:1px solid var(--divider-color);box-sizing:border-box;}
-.s1g032mh{grid-template-columns:1fr 1fr 1fr;}
-.snh2jyk{width:20px;height:20px;box-sizing:border-box;border-radius:50%;}.snh2jyk[data-mode='fill']{border:1px solid #80808038;background:var(--snh2jyk-0);}.snh2jyk[data-mode='stroke']{border:4px solid #80808038;}.snh2jyk[data-mode='stroke']:after{content:'';display:block;border-radius:100%;border:2px solid var(--snh2jyk-0);position:relative;width:18px;height:18px;left:-3px;top:-3px;box-sizing:border-box;}
-.sfm1cqx{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}
-.sttf061{width:20px;height:20px;box-sizing:border-box;border-radius:50%;color:var(--sttf061-0);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:baseline;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;font-weight:bold;}
-.layoutPanelOpened .sj7hhjx.sj7hhjx{color:var(--font-selected-color);background:var(--font-selected-bg);}.sj7hhjx[data-hidden='1']{display:none;}
-.s9mugpt{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:100%;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}
-.s1ktxhkr{padding:16px;}
-.s5sp14o{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}
-.smpmxx5{font-family:var(--smpmxx5-0);}
-.s1qssg4n{display:inline-block;width:6px;height:2px;background:transparent;vertical-align:middle;}
-.se26iq6{display:inline-block;}.se26iq6[data-type='0'] .s1qssg4n{background:currentColor;}.se26iq6[data-type='2']{position:relative;left:3px;}.se26iq6[data-type='2'] .s1qssg4n:nth-child(3n-1){background:currentColor;width:12px;}.se26iq6[data-type='2'] .s1qssg4n:nth-child(n+11){display:none;}.se26iq6[data-type='1'] .s1qssg4n:nth-child(2n+1){background:currentColor;}
-.s1xxj4yl{position:absolute;left:0;top:50%;-webkit-transform:translate3d(-25%,-50%,0px);-ms-transform:translate3d(-25%,-50%,0px);transform:translate3d(-25%,-50%,0px);display:inline-block;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:15px solid currentColor;}
-.sbd6jc8{position:absolute;right:0;top:50%;-webkit-transform:translate3d(25%,-50%,0px);-ms-transform:translate3d(25%,-50%,0px);transform:translate3d(25%,-50%,0px);display:inline-block;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:15px solid currentColor;}
-.scawaat{position:relative;display:inline-block;width:60px;height:2px;background:currentColor;vertical-align:middle;}.scawaat[data-type='0'] .s1xxj4yl,.scawaat[data-type='1'] .s1xxj4yl{display:none;}.scawaat[data-type='0'] .sbd6jc8,.scawaat[data-type='2'] .sbd6jc8{display:none;}
-.s16z54di{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:var(--toolbar-bg);position:relative;height:36px;border-top:1px solid var(--divider-color);box-sizing:border-box;}
-.sa7lzh9{-webkit-flex:1;-ms-flex:1;flex:1;}
-.s7b85in{grid-template-columns:repeat(auto-fill,40px);width:100%;}
-.s1xssqat{display:inline-block;padding:12px 48px;margin:4px;max-width:calc(100% - 24px);overflow-wrap:break-word;box-sizing:border-box;-webkit-transition:all 500ms;transition:all 500ms;opacity:0;-webkit-transform:translate3d(0px,40px,0px);-ms-transform:translate3d(0px,40px,0px);transform:translate3d(0px,40px,0px);}.s1xssqat[data-type='infos']{background:#646464;color:white;}.s1xssqat[data-type='error']{background:#911717;color:white;}.s1xssqat[data-type='success']{background:#088900;color:white;}.s1xssqat[data-is-shown='1']{opacity:1;-webkit-transform:translate3d(0px,0px,0px);-ms-transform:translate3d(0px,0px,0px);transform:translate3d(0px,0px,0px);}.s1xssqat[data-is-shown='0']{opacity:0;-webkit-transform:translate3d(0px,40px,0px);-ms-transform:translate3d(0px,40px,0px);transform:translate3d(0px,40px,0px);}
-.s1bgtt22{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;position:absolute;z-index:4;bottom:0;left:0;right:0;height:0;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
-.s9j48u3{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:absolute;z-index:2;top:0;bottom:0;left:0;right:0;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#00000050;-webkit-transition:opacity 300ms linear;transition:opacity 300ms linear;opacity:0;}.s9j48u3[data-loading='visible']{opacity:1;}
-.s4auclc{width:40px;height:40px;position:relative;-webkit-transform:rotate(10deg);-ms-transform:rotate(10deg);transform:rotate(10deg);-webkit-animation:react_paint-rotation-s4auclc 1s infinite;animation:react_paint-rotation-s4auclc 1s infinite;}@-webkit-keyframes react_paint-rotation-s4auclc{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes react_paint-rotation-s4auclc{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}
-.s1l3fbq{border-radius:50%;position:absolute;width:15px;height:15px;}.s1l3fbq:nth-child(1){left:0;background-color:#5c6bc0;}.s1l3fbq:nth-child(2){right:0;background-color:#8bc34a;}.s1l3fbq:nth-child(3){bottom:0;background-color:#ffb74d;}.s1l3fbq:nth-child(4){bottom:0;right:0;background-color:#f44336;}
-.s1v9piyg{--toolbar-bg:var(--s1v9piyg-0);--divider-color:var(--s1v9piyg-1);--font-radius:var(--s1v9piyg-2);--font-disabled-color:var(--s1v9piyg-3);--font-disabled-bg:var(--s1v9piyg-4);--font-color:var(--s1v9piyg-5);--font-bg:var(--s1v9piyg-6);--font-selected-color:var(--s1v9piyg-7);--font-selected-bg:var(--s1v9piyg-8);--font-hover-color:var(--s1v9piyg-9);--font-hover-bg:var(--s1v9piyg-10);--canvas-bg:var(--s1v9piyg-11);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;color:var(--font-color);position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.s1v9piyg hr{width:100%;border:none;border-top:1px solid var(--divider-color);}.s1v9piyg[data-grow='false']{max-width:var(--s1v9piyg-12);}.s1v9piyg[data-shrink='false']{min-width:var(--s1v9piyg-13);}
-.s6o5tmu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;position:relative;max-width:100%;z-index:1;aspect-ratio:var(--s6o5tmu-1);}.s6o5tmu[data-grow='true']{width:100%;}.s6o5tmu[data-grow='false']{width:var(--s6o5tmu-0);}

package/dist/types/Mode.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});

package/dist/types/Shapes.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});

package/dist/types/snackbar.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});

package/dist/types/tools.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});

package/dist/types/utils.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});

package/dist/utils/canvas.js

@@ -1,49 +0,0 @@
-"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

@@ -1,49 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.cleanShapesBeforeExport = exports.buildDataToExport = exports.addDefaultAndTempShapeProps = void 0;
-
-var _fp = _interopRequireDefault(require("lodash/fp"));
-
-var _file = require("./file");
-
-const cleanShapesBeforeExport = shapes => {
-  const propsToOmit = ['img', 'id'];
-  return shapes.map(shape => {
-    if (shape.type === 'picture') {
-      if (!shape.src.startsWith('http')) {
-        return _fp.default.omit(propsToOmit, { ...shape,
-          src: (0, _file.getBase64Image)(shape.img)
-        });
-      }
-    }
-
-    return _fp.default.omit(propsToOmit, shape);
-  });
-};
-
-exports.cleanShapesBeforeExport = cleanShapesBeforeExport;
-
-const buildDataToExport = (shapes, width, height) => {
-  return {
-    shapes: cleanShapesBeforeExport(shapes),
-    config: {
-      width,
-      height
-    }
-  };
-};
-
-exports.buildDataToExport = buildDataToExport;
-
-const addDefaultAndTempShapeProps = shape => {
-  return { ...shape,
-    id: _fp.default.uniqueId("".concat(shape.type, "_"))
-  };
-};
-
-exports.addDefaultAndTempShapeProps = addDefaultAndTempShapeProps;

package/dist/utils/dom.js

@@ -1,12 +0,0 @@
-"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

@@ -1,177 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-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");
-
-var _fp = _interopRequireDefault(require("lodash/fp"));
-
-var _data = require("./data");
-
-var _canvas = require("./canvas");
-
-var _migration = require("./migration");
-
-var _shapes2 = require("./shapes");
-
-var _picture = require("../constants/picture");
-
-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) {
-    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 blob = new Blob([svgContentToConvert], {
-    type: 'image/svg+xml'
-  });
-  return URL.createObjectURL(blob);
-};
-
-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 => addSizeAndConvertSvgToObjectUrl(svgFileContent)) : fetch(url).then(response => response.blob()).then(myBlob => URL.createObjectURL(myBlob));
-};
-
-exports.fetchAndStringify = fetchAndStringify;
-
-const downloadFile = (content, fileName) => {
-  const a = document.createElement('a');
-  a.href = content;
-  a.download = fileName;
-  document.body.appendChild(a);
-  a.click();
-  document.body.removeChild(a);
-};
-
-exports.downloadFile = downloadFile;
-
-const getBase64Image = img => {
-  const canvas = document.createElement('canvas');
-  canvas.width = img.width;
-  canvas.height = img.height;
-  const ctx = canvas.getContext('2d');
-  if (!ctx) return '';
-  ctx.drawImage(img, 0, 0);
-  const dataURL = canvas.toDataURL('image/png');
-  return dataURL;
-};
-
-exports.getBase64Image = getBase64Image;
-
-const encodeObjectToString = objectToEncode => {
-  return 'data:text/plain;charset=utf-8,' + encodeURIComponent(JSON.stringify(objectToEncode));
-};
-
-const getCanvasImage = (shapes, canvasOffset, width, height, selectionPadding) => {
-  const newCanvas = document.createElement('canvas');
-  newCanvas.width = width;
-  newCanvas.height = height;
-  const ctx = newCanvas.getContext('2d');
-  if (!ctx) return '';
-  ctx.clearRect(0, 0, width, height);
-  (0, _canvas.initCanvasContext)(ctx);
-
-  for (let i = shapes.length - 1; i >= 0; i--) {
-    (0, _shapes2.drawShape)(ctx, shapes[i], 1, canvasOffset, selectionPadding);
-  }
-
-  return newCanvas.toDataURL('image/png');
-};
-
-exports.getCanvasImage = getCanvasImage;
-
-const encodeShapesInString = (shapes, width, height) => {
-  const dataToExport = (0, _data.buildDataToExport)(shapes, width, height);
-  return encodeObjectToString(dataToExport);
-};
-
-exports.encodeShapesInString = encodeShapesInString;
-
-const decodeJson = async file => {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-
-    reader.onload = event => {
-      var _event$target;
-
-      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;
-
-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 = () => {
-          URL.revokeObjectURL(img.src);
-          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;
-      }
-
-      return (0, _data.addDefaultAndTempShapeProps)({ ...shape,
-        img
-      });
-    }
-
-    return (0, _data.addDefaultAndTempShapeProps)(shape);
-  }), _fp.default.compact)(jsonShapes);
-
-  await Promise.all(promisesArray);
-  return shapes;
-};
-
-exports.decodeImportedData = decodeImportedData;