@yorab/react-paint 0.6.4 → 0.7.1

package/dist/constants/tools.js

@@ -5,315 +5,311 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.UPLOAD_PICTURE_TOOL = exports.UNDO_TOOL = exports.SETTINGS_DEFAULT_TEXT = exports.SETTINGS_DEFAULT_SQUARE = exports.SETTINGS_DEFAULT_RECT = exports.SETTINGS_DEFAULT_POLYGON = exports.SETTINGS_DEFAULT_PICTURE = exports.SETTINGS_DEFAULT_LINE = exports.SETTINGS_DEFAULT_ELLIPSE = exports.SETTINGS_DEFAULT_CURVE = exports.SETTINGS_DEFAULT_CIRCLE = exports.SETTINGS_DEFAULT_BRUSH = exports.SELECTION_TOOL = exports.SAVE_TOOL = exports.REDO_TOOL = exports.MOVE_TOOL = exports.LOAD_TOOL = exports.EXPORT_TOOL = exports.DEFAULT_SHAPE_TOOLS = exports.DEFAULT_SHAPE_TEXT = exports.DEFAULT_SHAPE_SQUARE = exports.DEFAULT_SHAPE_RECT = exports.DEFAULT_SHAPE_POLYGON = exports.DEFAULT_SHAPE_PICTURE = exports.DEFAULT_SHAPE_LINE = exports.DEFAULT_SHAPE_ELLIPSE = exports.DEFAULT_SHAPE_CURVE = exports.DEFAULT_SHAPE_CIRCLE = exports.DEFAULT_SHAPE_BRUSH = exports.CLEAR_TOOL = exports.ADD_URL_PICTURE_TOOL = void 0;
 
-var _Shapes = require("../types/Shapes");
-
-var _tools = require("../types/tools");
-
 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 = {
-  type: _Shapes.ShapeEnum.picture,
+const DEFAULT_SHAPE_PICTURE = {
+  type: 'picture',
   id: "".concat(PREFIX_ID, "picture"),
   icon: _icons.pictureIcon,
   label: 'Image',
   settings: SETTINGS_DEFAULT_PICTURE
 };
 exports.DEFAULT_SHAPE_PICTURE = DEFAULT_SHAPE_PICTURE;
-var DEFAULT_SHAPE_BRUSH = {
-  type: _Shapes.ShapeEnum.brush,
+const DEFAULT_SHAPE_BRUSH = {
+  type: 'brush',
   id: "".concat(PREFIX_ID, "brush"),
   icon: _icons.brushIcon,
   label: 'Brosse',
   settings: SETTINGS_DEFAULT_BRUSH
 };
 exports.DEFAULT_SHAPE_BRUSH = DEFAULT_SHAPE_BRUSH;
-var DEFAULT_SHAPE_LINE = {
-  type: _Shapes.ShapeEnum.line,
+const DEFAULT_SHAPE_LINE = {
+  type: 'line',
   id: "".concat(PREFIX_ID, "line"),
   icon: _icons.arrowIcon,
   label: 'Ligne',
   settings: SETTINGS_DEFAULT_LINE
 };
 exports.DEFAULT_SHAPE_LINE = DEFAULT_SHAPE_LINE;
-var DEFAULT_SHAPE_POLYGON = {
-  type: _Shapes.ShapeEnum.polygon,
+const DEFAULT_SHAPE_POLYGON = {
+  type: 'polygon',
   id: "".concat(PREFIX_ID, "polygon"),
   icon: _icons.polygonIcon,
   label: 'Polygone',
   settings: SETTINGS_DEFAULT_POLYGON
 };
 exports.DEFAULT_SHAPE_POLYGON = DEFAULT_SHAPE_POLYGON;
-var DEFAULT_SHAPE_CURVE = {
-  type: _Shapes.ShapeEnum.curve,
+const DEFAULT_SHAPE_CURVE = {
+  type: 'curve',
   id: "".concat(PREFIX_ID, "curve"),
   icon: _icons.curveIcon,
   label: 'Courbe',
   settings: SETTINGS_DEFAULT_CURVE
 };
 exports.DEFAULT_SHAPE_CURVE = DEFAULT_SHAPE_CURVE;
-var DEFAULT_SHAPE_RECT = {
-  type: _Shapes.ShapeEnum.rect,
+const DEFAULT_SHAPE_RECT = {
+  type: 'rect',
   id: "".concat(PREFIX_ID, "rect"),
   icon: _icons.squareIcon,
   // temporary
@@ -321,24 +317,24 @@ var DEFAULT_SHAPE_RECT = {
   settings: SETTINGS_DEFAULT_RECT
 };
 exports.DEFAULT_SHAPE_RECT = DEFAULT_SHAPE_RECT;
-var DEFAULT_SHAPE_SQUARE = {
-  type: _Shapes.ShapeEnum.square,
+const DEFAULT_SHAPE_SQUARE = {
+  type: 'square',
   id: "".concat(PREFIX_ID, "square"),
   icon: _icons.squareIcon,
   label: 'Carré',
   settings: SETTINGS_DEFAULT_SQUARE
 };
 exports.DEFAULT_SHAPE_SQUARE = DEFAULT_SHAPE_SQUARE;
-var DEFAULT_SHAPE_CIRCLE = {
-  type: _Shapes.ShapeEnum.circle,
+const DEFAULT_SHAPE_CIRCLE = {
+  type: 'circle',
   id: "".concat(PREFIX_ID, "circle"),
   icon: _icons.circleIcon,
   label: 'Cercle',
   settings: SETTINGS_DEFAULT_CIRCLE
 };
 exports.DEFAULT_SHAPE_CIRCLE = DEFAULT_SHAPE_CIRCLE;
-var DEFAULT_SHAPE_ELLIPSE = {
-  type: _Shapes.ShapeEnum.ellipse,
+const DEFAULT_SHAPE_ELLIPSE = {
+  type: 'ellipse',
   id: "".concat(PREFIX_ID, "ellipse"),
   icon: _icons.circleIcon,
   // temporary
@@ -346,82 +342,82 @@ var DEFAULT_SHAPE_ELLIPSE = {
   settings: SETTINGS_DEFAULT_ELLIPSE
 };
 exports.DEFAULT_SHAPE_ELLIPSE = DEFAULT_SHAPE_ELLIPSE;
-var DEFAULT_SHAPE_TEXT = {
-  type: _Shapes.ShapeEnum.text,
+const DEFAULT_SHAPE_TEXT = {
+  type: 'text',
   id: "".concat(PREFIX_ID, "text"),
   icon: _icons.textIcon,
   label: 'Texte',
   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,
+  type: '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,
+  type: '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,
+  type: '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,
+  type: '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: '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,
+  type: '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,
+  type: '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,
+  type: '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,
+  type: '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,
+  type: 'addurlpicture',
   icon: _icons.pictureIcon,
   label: 'Add picture from URL'
 };

package/dist/hooks/useComponent.js

@@ -1,28 +1,23 @@
 "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) {
-      setIsInsideComponent(!(event.target instanceof Node) || !componentRef.current ? false : componentRef.current.contains(event.target));
+var _dom = require("../utils/dom");
+
+const useComponent = _ref => {
+  let {
+    disabled,
+    componentRef
+  } = _ref;
+  const [isInsideComponent, setIsInsideComponent] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    const onDetectClick = event => {
+      setIsInsideComponent((0, _dom.isEventInsideNode)(event, componentRef.current));
     };
 
     if (disabled) {
@@ -36,7 +31,7 @@ var useComponent = function useComponent(_ref) {
       });
     }
 
-    return function () {
+    return () => {
       if (!disabled) {
         document.removeEventListener('mousedown', onDetectClick);
         document.removeEventListener('touchstart', onDetectClick);
@@ -44,9 +39,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;