@yorab/react-paint 0.6.5 → 0.6.6

package/dist/constants/tools.js

@@ -13,266 +13,266 @@ var _icons = require("./icons");
 
 var _style = require("./style");
 
-var PREFIX_ID = 'react-paint-';
-var SETTINGS_DEFAULT_RECT = {
+const PREFIX_ID = 'react-paint-';
+const SETTINGS_DEFAULT_RECT = {
   strokeColor: {
     values: _style.STYLE_COLORS,
-    "default": 'black'
+    default: 'black'
   },
   fillColor: {
     values: _style.STYLE_COLORS,
-    "default": 'transparent'
+    default: 'transparent'
   },
   opacity: {
     min: 0,
     max: 100,
     step: 1,
-    "default": 100
+    default: 100
   },
   lineWidth: {
     min: 1,
     max: 20,
     step: 1,
-    "default": 1
+    default: 1
   },
   lineDash: {
     values: _style.STYLE_LINE_DASH,
-    "default": 0
+    default: 0
   }
 };
 exports.SETTINGS_DEFAULT_RECT = SETTINGS_DEFAULT_RECT;
-var SETTINGS_DEFAULT_SQUARE = {
+const SETTINGS_DEFAULT_SQUARE = {
   strokeColor: {
     values: _style.STYLE_COLORS,
-    "default": 'black'
+    default: 'black'
   },
   fillColor: {
     values: _style.STYLE_COLORS,
-    "default": 'transparent'
+    default: 'transparent'
   },
   opacity: {
     min: 0,
     max: 100,
     step: 1,
-    "default": 100
+    default: 100
   },
   lineWidth: {
     min: 1,
     max: 20,
     step: 1,
-    "default": 1
+    default: 1
   },
   lineDash: {
     values: _style.STYLE_LINE_DASH,
-    "default": 0
+    default: 0
   }
 };
 exports.SETTINGS_DEFAULT_SQUARE = SETTINGS_DEFAULT_SQUARE;
-var SETTINGS_DEFAULT_CIRCLE = {
+const SETTINGS_DEFAULT_CIRCLE = {
   strokeColor: {
     values: _style.STYLE_COLORS,
-    "default": 'black'
+    default: 'black'
   },
   fillColor: {
     values: _style.STYLE_COLORS,
-    "default": 'transparent'
+    default: 'transparent'
   },
   opacity: {
     min: 0,
     max: 100,
     step: 1,
-    "default": 100
+    default: 100
   },
   lineWidth: {
     min: 1,
     max: 20,
     step: 1,
-    "default": 1
+    default: 1
   },
   lineDash: {
     values: _style.STYLE_LINE_DASH,
-    "default": 0
+    default: 0
   }
 };
 exports.SETTINGS_DEFAULT_CIRCLE = SETTINGS_DEFAULT_CIRCLE;
-var SETTINGS_DEFAULT_ELLIPSE = {
+const SETTINGS_DEFAULT_ELLIPSE = {
   strokeColor: {
     values: _style.STYLE_COLORS,
-    "default": 'black'
+    default: 'black'
   },
   fillColor: {
     values: _style.STYLE_COLORS,
-    "default": 'transparent'
+    default: 'transparent'
   },
   opacity: {
     min: 0,
     max: 100,
     step: 1,
-    "default": 100
+    default: 100
   },
   lineWidth: {
     min: 1,
     max: 20,
     step: 1,
-    "default": 1
+    default: 1
   },
   lineDash: {
     values: _style.STYLE_LINE_DASH,
-    "default": 0
+    default: 0
   }
 };
 exports.SETTINGS_DEFAULT_ELLIPSE = SETTINGS_DEFAULT_ELLIPSE;
-var SETTINGS_DEFAULT_PICTURE = {
+const SETTINGS_DEFAULT_PICTURE = {
   opacity: {
     min: 0,
     max: 100,
     step: 1,
-    "default": 100
+    default: 100
   }
 };
 exports.SETTINGS_DEFAULT_PICTURE = SETTINGS_DEFAULT_PICTURE;
-var SETTINGS_DEFAULT_TEXT = {
+const SETTINGS_DEFAULT_TEXT = {
   strokeColor: {
     values: _style.STYLE_COLORS,
-    "default": 'black'
+    default: 'black'
   },
   opacity: {
     min: 0,
     max: 100,
     step: 1,
-    "default": 100
+    default: 100
   },
   fontFamily: {
     values: _style.STYLE_FONTS,
-    "default": _style.STYLE_FONT_DEFAULT
+    default: _style.STYLE_FONT_DEFAULT
   },
   fontBold: {
     values: [false, true],
-    "default": false
+    default: false
   },
   fontItalic: {
     values: [false, true],
-    "default": false
+    default: false
   }
 };
 exports.SETTINGS_DEFAULT_TEXT = SETTINGS_DEFAULT_TEXT;
-var SETTINGS_DEFAULT_BRUSH = {
+const SETTINGS_DEFAULT_BRUSH = {
   strokeColor: {
     values: _style.STYLE_COLORS,
-    "default": 'black'
+    default: 'black'
   },
   opacity: {
     min: 0,
     max: 100,
     step: 1,
-    "default": 100
+    default: 100
   },
   lineWidth: {
     min: 6,
     max: 20,
     step: 2,
-    "default": 10
+    default: 10
   },
   lineDash: {
     values: _style.STYLE_LINE_DASH,
-    "default": 0
+    default: 0
   }
 };
 exports.SETTINGS_DEFAULT_BRUSH = SETTINGS_DEFAULT_BRUSH;
-var SETTINGS_DEFAULT_LINE = {
+const SETTINGS_DEFAULT_LINE = {
   strokeColor: {
     values: _style.STYLE_COLORS,
-    "default": 'black'
+    default: 'black'
   },
   opacity: {
     min: 0,
     max: 100,
     step: 1,
-    "default": 100
+    default: 100
   },
   lineWidth: {
     min: 1,
     max: 20,
     step: 1,
-    "default": 1
+    default: 1
   },
   lineDash: {
     values: _style.STYLE_LINE_DASH,
-    "default": 0
+    default: 0
   },
   lineArrow: {
     values: _style.STYLE_LINE_WITH_ARROW,
-    "default": 0
+    default: 0
   }
 };
 exports.SETTINGS_DEFAULT_LINE = SETTINGS_DEFAULT_LINE;
-var SETTINGS_DEFAULT_POLYGON = {
+const SETTINGS_DEFAULT_POLYGON = {
   strokeColor: {
     values: _style.STYLE_COLORS,
-    "default": 'black'
+    default: 'black'
   },
   fillColor: {
     values: _style.STYLE_COLORS,
-    "default": 'black'
+    default: 'black'
   },
   opacity: {
     min: 0,
     max: 100,
     step: 1,
-    "default": 100
+    default: 100
   },
   lineWidth: {
     min: 1,
     max: 20,
     step: 1,
-    "default": 1
+    default: 1
   },
   lineDash: {
     values: _style.STYLE_LINE_DASH,
-    "default": 0
+    default: 0
   },
   pointsCount: {
     min: 3,
     max: 10,
     step: 1,
-    "default": 3
+    default: 3
   }
 };
 exports.SETTINGS_DEFAULT_POLYGON = SETTINGS_DEFAULT_POLYGON;
-var SETTINGS_DEFAULT_CURVE = {
+const SETTINGS_DEFAULT_CURVE = {
   strokeColor: {
     values: _style.STYLE_COLORS,
-    "default": 'black'
+    default: 'black'
   },
   fillColor: {
     values: _style.STYLE_COLORS,
-    "default": 'black'
+    default: 'black'
   },
   opacity: {
     min: 0,
     max: 100,
     step: 1,
-    "default": 100
+    default: 100
   },
   lineWidth: {
     min: 1,
     max: 20,
     step: 1,
-    "default": 1
+    default: 1
   },
   lineDash: {
     values: _style.STYLE_LINE_DASH,
-    "default": 0
+    default: 0
   },
   pointsCount: {
     min: 3,
     max: 10,
     step: 1,
-    "default": 3
+    default: 3
   }
 };
 exports.SETTINGS_DEFAULT_CURVE = SETTINGS_DEFAULT_CURVE;
-var DEFAULT_SHAPE_PICTURE = {
+const DEFAULT_SHAPE_PICTURE = {
   type: _Shapes.ShapeEnum.picture,
   id: "".concat(PREFIX_ID, "picture"),
   icon: _icons.pictureIcon,
@@ -280,7 +280,7 @@ var DEFAULT_SHAPE_PICTURE = {
   settings: SETTINGS_DEFAULT_PICTURE
 };
 exports.DEFAULT_SHAPE_PICTURE = DEFAULT_SHAPE_PICTURE;
-var DEFAULT_SHAPE_BRUSH = {
+const DEFAULT_SHAPE_BRUSH = {
   type: _Shapes.ShapeEnum.brush,
   id: "".concat(PREFIX_ID, "brush"),
   icon: _icons.brushIcon,
@@ -288,7 +288,7 @@ var DEFAULT_SHAPE_BRUSH = {
   settings: SETTINGS_DEFAULT_BRUSH
 };
 exports.DEFAULT_SHAPE_BRUSH = DEFAULT_SHAPE_BRUSH;
-var DEFAULT_SHAPE_LINE = {
+const DEFAULT_SHAPE_LINE = {
   type: _Shapes.ShapeEnum.line,
   id: "".concat(PREFIX_ID, "line"),
   icon: _icons.arrowIcon,
@@ -296,7 +296,7 @@ var DEFAULT_SHAPE_LINE = {
   settings: SETTINGS_DEFAULT_LINE
 };
 exports.DEFAULT_SHAPE_LINE = DEFAULT_SHAPE_LINE;
-var DEFAULT_SHAPE_POLYGON = {
+const DEFAULT_SHAPE_POLYGON = {
   type: _Shapes.ShapeEnum.polygon,
   id: "".concat(PREFIX_ID, "polygon"),
   icon: _icons.polygonIcon,
@@ -304,7 +304,7 @@ var DEFAULT_SHAPE_POLYGON = {
   settings: SETTINGS_DEFAULT_POLYGON
 };
 exports.DEFAULT_SHAPE_POLYGON = DEFAULT_SHAPE_POLYGON;
-var DEFAULT_SHAPE_CURVE = {
+const DEFAULT_SHAPE_CURVE = {
   type: _Shapes.ShapeEnum.curve,
   id: "".concat(PREFIX_ID, "curve"),
   icon: _icons.curveIcon,
@@ -312,7 +312,7 @@ var DEFAULT_SHAPE_CURVE = {
   settings: SETTINGS_DEFAULT_CURVE
 };
 exports.DEFAULT_SHAPE_CURVE = DEFAULT_SHAPE_CURVE;
-var DEFAULT_SHAPE_RECT = {
+const DEFAULT_SHAPE_RECT = {
   type: _Shapes.ShapeEnum.rect,
   id: "".concat(PREFIX_ID, "rect"),
   icon: _icons.squareIcon,
@@ -321,7 +321,7 @@ var DEFAULT_SHAPE_RECT = {
   settings: SETTINGS_DEFAULT_RECT
 };
 exports.DEFAULT_SHAPE_RECT = DEFAULT_SHAPE_RECT;
-var DEFAULT_SHAPE_SQUARE = {
+const DEFAULT_SHAPE_SQUARE = {
   type: _Shapes.ShapeEnum.square,
   id: "".concat(PREFIX_ID, "square"),
   icon: _icons.squareIcon,
@@ -329,7 +329,7 @@ var DEFAULT_SHAPE_SQUARE = {
   settings: SETTINGS_DEFAULT_SQUARE
 };
 exports.DEFAULT_SHAPE_SQUARE = DEFAULT_SHAPE_SQUARE;
-var DEFAULT_SHAPE_CIRCLE = {
+const DEFAULT_SHAPE_CIRCLE = {
   type: _Shapes.ShapeEnum.circle,
   id: "".concat(PREFIX_ID, "circle"),
   icon: _icons.circleIcon,
@@ -337,7 +337,7 @@ var DEFAULT_SHAPE_CIRCLE = {
   settings: SETTINGS_DEFAULT_CIRCLE
 };
 exports.DEFAULT_SHAPE_CIRCLE = DEFAULT_SHAPE_CIRCLE;
-var DEFAULT_SHAPE_ELLIPSE = {
+const DEFAULT_SHAPE_ELLIPSE = {
   type: _Shapes.ShapeEnum.ellipse,
   id: "".concat(PREFIX_ID, "ellipse"),
   icon: _icons.circleIcon,
@@ -346,7 +346,7 @@ var DEFAULT_SHAPE_ELLIPSE = {
   settings: SETTINGS_DEFAULT_ELLIPSE
 };
 exports.DEFAULT_SHAPE_ELLIPSE = DEFAULT_SHAPE_ELLIPSE;
-var DEFAULT_SHAPE_TEXT = {
+const DEFAULT_SHAPE_TEXT = {
   type: _Shapes.ShapeEnum.text,
   id: "".concat(PREFIX_ID, "text"),
   icon: _icons.textIcon,
@@ -354,72 +354,72 @@ var DEFAULT_SHAPE_TEXT = {
   settings: SETTINGS_DEFAULT_TEXT
 };
 exports.DEFAULT_SHAPE_TEXT = DEFAULT_SHAPE_TEXT;
-var DEFAULT_SHAPE_TOOLS = [DEFAULT_SHAPE_BRUSH, DEFAULT_SHAPE_LINE, DEFAULT_SHAPE_POLYGON, DEFAULT_SHAPE_CURVE, DEFAULT_SHAPE_RECT, DEFAULT_SHAPE_SQUARE, DEFAULT_SHAPE_CIRCLE, DEFAULT_SHAPE_ELLIPSE, DEFAULT_SHAPE_PICTURE, DEFAULT_SHAPE_TEXT];
+const DEFAULT_SHAPE_TOOLS = [DEFAULT_SHAPE_BRUSH, DEFAULT_SHAPE_LINE, DEFAULT_SHAPE_POLYGON, DEFAULT_SHAPE_CURVE, DEFAULT_SHAPE_RECT, DEFAULT_SHAPE_SQUARE, DEFAULT_SHAPE_CIRCLE, DEFAULT_SHAPE_ELLIPSE, DEFAULT_SHAPE_PICTURE, DEFAULT_SHAPE_TEXT];
 exports.DEFAULT_SHAPE_TOOLS = DEFAULT_SHAPE_TOOLS;
-var SELECTION_TOOL = {
+const SELECTION_TOOL = {
   id: "".concat(PREFIX_ID, "selection"),
   type: _tools.ActionsEnum.selection,
   icon: _icons.cursorIcon,
   label: 'Sélection'
 };
 exports.SELECTION_TOOL = SELECTION_TOOL;
-var UNDO_TOOL = {
+const UNDO_TOOL = {
   id: "".concat(PREFIX_ID, "undo"),
   type: _tools.ActionsEnum.undo,
   icon: _icons.undoIcon,
   label: 'Undo'
 };
 exports.UNDO_TOOL = UNDO_TOOL;
-var REDO_TOOL = {
+const REDO_TOOL = {
   id: "".concat(PREFIX_ID, "redo"),
   type: _tools.ActionsEnum.redo,
   icon: _icons.redoIcon,
   label: 'Redo'
 };
 exports.REDO_TOOL = REDO_TOOL;
-var CLEAR_TOOL = {
+const CLEAR_TOOL = {
   id: "".concat(PREFIX_ID, "clear"),
   type: _tools.ActionsEnum.clear,
   icon: _icons.clearIcon,
   label: 'Clear'
 };
 exports.CLEAR_TOOL = CLEAR_TOOL;
-var EXPORT_TOOL = {
+const EXPORT_TOOL = {
   id: "".concat(PREFIX_ID, "export"),
-  type: _tools.ActionsEnum["export"],
+  type: _tools.ActionsEnum.export,
   icon: _icons.exportFileIcon,
   label: 'Export PNG'
 };
 exports.EXPORT_TOOL = EXPORT_TOOL;
-var LOAD_TOOL = {
+const LOAD_TOOL = {
   id: "".concat(PREFIX_ID, "load"),
   type: _tools.ActionsEnum.loadFile,
   icon: _icons.openFileIcon,
   label: 'Load project'
 };
 exports.LOAD_TOOL = LOAD_TOOL;
-var SAVE_TOOL = {
+const SAVE_TOOL = {
   id: "".concat(PREFIX_ID, "save"),
   type: _tools.ActionsEnum.saveFile,
   icon: _icons.saveIcon,
   label: 'Save project'
 };
 exports.SAVE_TOOL = SAVE_TOOL;
-var MOVE_TOOL = {
+const MOVE_TOOL = {
   id: "".concat(PREFIX_ID, "move"),
   type: _tools.ActionsEnum.move,
   icon: _icons.cursorIcon,
   label: 'Move'
 };
 exports.MOVE_TOOL = MOVE_TOOL;
-var UPLOAD_PICTURE_TOOL = {
+const UPLOAD_PICTURE_TOOL = {
   id: "".concat(PREFIX_ID, "upload-picture"),
   type: _tools.ActionsEnum.uploadPicture,
   icon: _icons.pictureIcon,
   label: 'Upload picture'
 };
 exports.UPLOAD_PICTURE_TOOL = UPLOAD_PICTURE_TOOL;
-var ADD_URL_PICTURE_TOOL = {
+const ADD_URL_PICTURE_TOOL = {
   id: "".concat(PREFIX_ID, "upload-picture"),
   type: _tools.ActionsEnum.addUrlPicture,
   icon: _icons.pictureIcon,

package/dist/hooks/useComponent.js

@@ -1,27 +1,20 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+exports.default = void 0;
 
 var _react = require("react");
 
-var useComponent = function useComponent(_ref) {
-  var disabled = _ref.disabled,
-      componentRef = _ref.componentRef;
-
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      isInsideComponent = _useState2[0],
-      setIsInsideComponent = _useState2[1];
-
-  (0, _react.useEffect)(function () {
-    var onDetectClick = function onDetectClick(event) {
+const useComponent = _ref => {
+  let {
+    disabled,
+    componentRef
+  } = _ref;
+  const [isInsideComponent, setIsInsideComponent] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    const onDetectClick = event => {
       setIsInsideComponent(!(event.target instanceof Node) || !componentRef.current ? false : componentRef.current.contains(event.target));
     };
 
@@ -36,7 +29,7 @@ var useComponent = function useComponent(_ref) {
       });
     }
 
-    return function () {
+    return () => {
       if (!disabled) {
         document.removeEventListener('mousedown', onDetectClick);
         document.removeEventListener('touchstart', onDetectClick);
@@ -44,9 +37,9 @@ var useComponent = function useComponent(_ref) {
     };
   }, [disabled, componentRef]);
   return {
-    isInsideComponent: isInsideComponent
+    isInsideComponent
   };
 };
 
 var _default = useComponent;
-exports["default"] = _default;
+exports.default = _default;

package/dist/hooks/useDoubleClick.js

@@ -3,18 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 var _react = require("react");
 
-var DELTA_TIME_THRESHOLD_MS = 300;
+const DELTA_TIME_THRESHOLD_MS = 300;
 
-var useDoubleClick = function useDoubleClick() {
-  var lastClickTimestampRef = (0, _react.useRef)(undefined);
-  var callbackRef = (0, _react.useRef)(undefined);
+const useDoubleClick = () => {
+  const lastClickTimestampRef = (0, _react.useRef)(undefined);
+  const callbackRef = (0, _react.useRef)(undefined);
 
-  var onClick = function onClick(e) {
-    var currentTimestamp = new Date().getTime();
+  const onClick = e => {
+    const currentTimestamp = new Date().getTime();
 
     if (lastClickTimestampRef.current && currentTimestamp < lastClickTimestampRef.current + DELTA_TIME_THRESHOLD_MS) {
       var _callbackRef$current;
@@ -25,22 +25,22 @@ var useDoubleClick = function useDoubleClick() {
     lastClickTimestampRef.current = new Date().getTime();
   };
 
-  var registerDoubleClickEvent = function registerDoubleClickEvent(element, callback) {
+  const registerDoubleClickEvent = (element, callback) => {
     callbackRef.current = callback;
     element.addEventListener('click', onClick);
     element.addEventListener('touchend', onClick);
   };
 
-  var unRegisterDoubleClickEvent = function unRegisterDoubleClickEvent(element) {
+  const unRegisterDoubleClickEvent = element => {
     element.removeEventListener('click', onClick);
     element.removeEventListener('touchend', onClick);
   };
 
   return {
-    registerDoubleClickEvent: registerDoubleClickEvent,
-    unRegisterDoubleClickEvent: unRegisterDoubleClickEvent
+    registerDoubleClickEvent,
+    unRegisterDoubleClickEvent
   };
 };
 
 var _default = useDoubleClick;
-exports["default"] = _default;
+exports.default = _default;