@yorab/react-paint 0.4.2 → 0.5.0

package/dist/constants/tools.js

@@ -0,0 +1,420 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 = {
+  strokeColor: {
+    values: _style.STYLE_COLORS,
+    "default": 'black'
+  },
+  fillColor: {
+    values: _style.STYLE_COLORS,
+    "default": 'transparent'
+  },
+  opacity: {
+    min: 0,
+    max: 100,
+    step: 1,
+    "default": 100
+  },
+  lineWidth: {
+    min: 1,
+    max: 20,
+    step: 1,
+    "default": 1
+  },
+  lineDash: {
+    values: _style.STYLE_LINE_DASH,
+    "default": 0
+  }
+};
+exports.SETTINGS_DEFAULT_RECT = SETTINGS_DEFAULT_RECT;
+var SETTINGS_DEFAULT_SQUARE = {
+  strokeColor: {
+    values: _style.STYLE_COLORS,
+    "default": 'black'
+  },
+  fillColor: {
+    values: _style.STYLE_COLORS,
+    "default": 'transparent'
+  },
+  opacity: {
+    min: 0,
+    max: 100,
+    step: 1,
+    "default": 100
+  },
+  lineWidth: {
+    min: 1,
+    max: 20,
+    step: 1,
+    "default": 1
+  },
+  lineDash: {
+    values: _style.STYLE_LINE_DASH,
+    "default": 0
+  }
+};
+exports.SETTINGS_DEFAULT_SQUARE = SETTINGS_DEFAULT_SQUARE;
+var SETTINGS_DEFAULT_CIRCLE = {
+  strokeColor: {
+    values: _style.STYLE_COLORS,
+    "default": 'black'
+  },
+  fillColor: {
+    values: _style.STYLE_COLORS,
+    "default": 'transparent'
+  },
+  opacity: {
+    min: 0,
+    max: 100,
+    step: 1,
+    "default": 100
+  },
+  lineWidth: {
+    min: 1,
+    max: 20,
+    step: 1,
+    "default": 1
+  },
+  lineDash: {
+    values: _style.STYLE_LINE_DASH,
+    "default": 0
+  }
+};
+exports.SETTINGS_DEFAULT_CIRCLE = SETTINGS_DEFAULT_CIRCLE;
+var SETTINGS_DEFAULT_ELLIPSE = {
+  strokeColor: {
+    values: _style.STYLE_COLORS,
+    "default": 'black'
+  },
+  fillColor: {
+    values: _style.STYLE_COLORS,
+    "default": 'transparent'
+  },
+  opacity: {
+    min: 0,
+    max: 100,
+    step: 1,
+    "default": 100
+  },
+  lineWidth: {
+    min: 1,
+    max: 20,
+    step: 1,
+    "default": 1
+  },
+  lineDash: {
+    values: _style.STYLE_LINE_DASH,
+    "default": 0
+  }
+};
+exports.SETTINGS_DEFAULT_ELLIPSE = SETTINGS_DEFAULT_ELLIPSE;
+var SETTINGS_DEFAULT_PICTURE = {
+  opacity: {
+    min: 0,
+    max: 100,
+    step: 1,
+    "default": 100
+  }
+};
+exports.SETTINGS_DEFAULT_PICTURE = SETTINGS_DEFAULT_PICTURE;
+var SETTINGS_DEFAULT_TEXT = {
+  strokeColor: {
+    values: _style.STYLE_COLORS,
+    "default": 'black'
+  },
+  opacity: {
+    min: 0,
+    max: 100,
+    step: 1,
+    "default": 100
+  },
+  fontFamily: {
+    values: _style.STYLE_FONTS,
+    "default": _style.STYLE_FONT_DEFAULT
+  }
+};
+exports.SETTINGS_DEFAULT_TEXT = SETTINGS_DEFAULT_TEXT;
+var SETTINGS_DEFAULT_BRUSH = {
+  strokeColor: {
+    values: _style.STYLE_COLORS,
+    "default": 'black'
+  },
+  opacity: {
+    min: 0,
+    max: 100,
+    step: 1,
+    "default": 100
+  },
+  lineWidth: {
+    min: 6,
+    max: 20,
+    step: 2,
+    "default": 10
+  },
+  lineDash: {
+    values: _style.STYLE_LINE_DASH,
+    "default": 0
+  }
+};
+exports.SETTINGS_DEFAULT_BRUSH = SETTINGS_DEFAULT_BRUSH;
+var SETTINGS_DEFAULT_LINE = {
+  strokeColor: {
+    values: _style.STYLE_COLORS,
+    "default": 'black'
+  },
+  opacity: {
+    min: 0,
+    max: 100,
+    step: 1,
+    "default": 100
+  },
+  lineWidth: {
+    min: 1,
+    max: 20,
+    step: 1,
+    "default": 1
+  },
+  lineDash: {
+    values: _style.STYLE_LINE_DASH,
+    "default": 0
+  },
+  lineArrow: {
+    values: _style.STYLE_LINE_WITH_ARROW,
+    "default": 0
+  }
+};
+exports.SETTINGS_DEFAULT_LINE = SETTINGS_DEFAULT_LINE;
+var SETTINGS_DEFAULT_POLYGON = {
+  strokeColor: {
+    values: _style.STYLE_COLORS,
+    "default": 'black'
+  },
+  fillColor: {
+    values: _style.STYLE_COLORS,
+    "default": 'black'
+  },
+  opacity: {
+    min: 0,
+    max: 100,
+    step: 1,
+    "default": 100
+  },
+  lineWidth: {
+    min: 1,
+    max: 20,
+    step: 1,
+    "default": 1
+  },
+  lineDash: {
+    values: _style.STYLE_LINE_DASH,
+    "default": 0
+  },
+  pointsCount: {
+    min: 3,
+    max: 10,
+    step: 1,
+    "default": 3
+  }
+};
+exports.SETTINGS_DEFAULT_POLYGON = SETTINGS_DEFAULT_POLYGON;
+var SETTINGS_DEFAULT_CURVE = {
+  strokeColor: {
+    values: _style.STYLE_COLORS,
+    "default": 'black'
+  },
+  fillColor: {
+    values: _style.STYLE_COLORS,
+    "default": 'black'
+  },
+  opacity: {
+    min: 0,
+    max: 100,
+    step: 1,
+    "default": 100
+  },
+  lineWidth: {
+    min: 1,
+    max: 20,
+    step: 1,
+    "default": 1
+  },
+  lineDash: {
+    values: _style.STYLE_LINE_DASH,
+    "default": 0
+  },
+  pointsCount: {
+    min: 3,
+    max: 10,
+    step: 1,
+    "default": 3
+  }
+};
+exports.SETTINGS_DEFAULT_CURVE = SETTINGS_DEFAULT_CURVE;
+var DEFAULT_SHAPE_PICTURE = {
+  type: _Shapes.ShapeEnum.picture,
+  id: "".concat(PREFIX_ID, "picture"),
+  icon: _icons.pictureIcon,
+  lib: 'Image',
+  settings: SETTINGS_DEFAULT_PICTURE
+};
+exports.DEFAULT_SHAPE_PICTURE = DEFAULT_SHAPE_PICTURE;
+var DEFAULT_SHAPE_BRUSH = {
+  type: _Shapes.ShapeEnum.brush,
+  id: "".concat(PREFIX_ID, "brush"),
+  icon: _icons.brushIcon,
+  lib: 'Brosse',
+  settings: SETTINGS_DEFAULT_BRUSH
+};
+exports.DEFAULT_SHAPE_BRUSH = DEFAULT_SHAPE_BRUSH;
+var DEFAULT_SHAPE_LINE = {
+  type: _Shapes.ShapeEnum.line,
+  id: "".concat(PREFIX_ID, "line"),
+  icon: _icons.arrowIcon,
+  lib: 'Ligne',
+  settings: SETTINGS_DEFAULT_LINE
+};
+exports.DEFAULT_SHAPE_LINE = DEFAULT_SHAPE_LINE;
+var DEFAULT_SHAPE_POLYGON = {
+  type: _Shapes.ShapeEnum.polygon,
+  id: "".concat(PREFIX_ID, "polygon"),
+  icon: _icons.polygonIcon,
+  lib: 'Polygone',
+  settings: SETTINGS_DEFAULT_POLYGON
+};
+exports.DEFAULT_SHAPE_POLYGON = DEFAULT_SHAPE_POLYGON;
+var DEFAULT_SHAPE_CURVE = {
+  type: _Shapes.ShapeEnum.curve,
+  id: "".concat(PREFIX_ID, "curve"),
+  icon: _icons.curveIcon,
+  lib: 'Courbe',
+  settings: SETTINGS_DEFAULT_CURVE
+};
+exports.DEFAULT_SHAPE_CURVE = DEFAULT_SHAPE_CURVE;
+var DEFAULT_SHAPE_RECT = {
+  type: _Shapes.ShapeEnum.rect,
+  id: "".concat(PREFIX_ID, "rect"),
+  icon: _icons.squareIcon,
+  // temporary
+  lib: 'Rectangle',
+  settings: SETTINGS_DEFAULT_RECT
+};
+exports.DEFAULT_SHAPE_RECT = DEFAULT_SHAPE_RECT;
+var DEFAULT_SHAPE_SQUARE = {
+  type: _Shapes.ShapeEnum.square,
+  id: "".concat(PREFIX_ID, "square"),
+  icon: _icons.squareIcon,
+  lib: 'Carré',
+  settings: SETTINGS_DEFAULT_SQUARE
+};
+exports.DEFAULT_SHAPE_SQUARE = DEFAULT_SHAPE_SQUARE;
+var DEFAULT_SHAPE_CIRCLE = {
+  type: _Shapes.ShapeEnum.circle,
+  id: "".concat(PREFIX_ID, "circle"),
+  icon: _icons.circleIcon,
+  lib: 'Cercle',
+  settings: SETTINGS_DEFAULT_CIRCLE
+};
+exports.DEFAULT_SHAPE_CIRCLE = DEFAULT_SHAPE_CIRCLE;
+var DEFAULT_SHAPE_ELLIPSE = {
+  type: _Shapes.ShapeEnum.ellipse,
+  id: "".concat(PREFIX_ID, "ellipse"),
+  icon: _icons.circleIcon,
+  // temporary
+  lib: 'Ellipse',
+  settings: SETTINGS_DEFAULT_ELLIPSE
+};
+exports.DEFAULT_SHAPE_ELLIPSE = DEFAULT_SHAPE_ELLIPSE;
+var DEFAULT_SHAPE_TEXT = {
+  type: _Shapes.ShapeEnum.text,
+  id: "".concat(PREFIX_ID, "text"),
+  icon: _icons.textIcon,
+  lib: '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];
+exports.DEFAULT_SHAPE_TOOLS = DEFAULT_SHAPE_TOOLS;
+var SELECTION_TOOL = {
+  id: "".concat(PREFIX_ID, "selection"),
+  type: _tools.ActionsEnum.selection,
+  icon: _icons.selectIcon,
+  lib: 'Sélection'
+};
+exports.SELECTION_TOOL = SELECTION_TOOL;
+var UNDO_TOOL = {
+  id: "".concat(PREFIX_ID, "undo"),
+  type: _tools.ActionsEnum.undo,
+  icon: _icons.undoIcon,
+  lib: 'Undo'
+};
+exports.UNDO_TOOL = UNDO_TOOL;
+var REDO_TOOL = {
+  id: "".concat(PREFIX_ID, "redo"),
+  type: _tools.ActionsEnum.redo,
+  icon: _icons.redoIcon,
+  lib: 'Redo'
+};
+exports.REDO_TOOL = REDO_TOOL;
+var CLEAR_TOOL = {
+  id: "".concat(PREFIX_ID, "clear"),
+  type: _tools.ActionsEnum.clear,
+  icon: _icons.clearIcon,
+  lib: 'Clear'
+};
+exports.CLEAR_TOOL = CLEAR_TOOL;
+var EXPORT_TOOL = {
+  id: "".concat(PREFIX_ID, "export"),
+  type: _tools.ActionsEnum["export"],
+  icon: _icons.exportFileIcon,
+  lib: 'Export PNG'
+};
+exports.EXPORT_TOOL = EXPORT_TOOL;
+var LOAD_TOOL = {
+  id: "".concat(PREFIX_ID, "load"),
+  type: _tools.ActionsEnum.loadFile,
+  icon: _icons.openFileIcon,
+  lib: 'Load project'
+};
+exports.LOAD_TOOL = LOAD_TOOL;
+var SAVE_TOOL = {
+  id: "".concat(PREFIX_ID, "save"),
+  type: _tools.ActionsEnum.saveFile,
+  icon: _icons.saveIcon,
+  lib: 'Save project'
+};
+exports.SAVE_TOOL = SAVE_TOOL;
+var MOVE_TOOL = {
+  id: "".concat(PREFIX_ID, "move"),
+  type: _tools.ActionsEnum.move,
+  icon: _icons.selectIcon,
+  lib: 'Move'
+};
+exports.MOVE_TOOL = MOVE_TOOL;
+var UPLOAD_PICTURE_TOOL = {
+  id: "".concat(PREFIX_ID, "upload-picture"),
+  type: _tools.ActionsEnum.uploadPicture,
+  icon: _icons.pictureIcon,
+  lib: 'Upload picture'
+};
+exports.UPLOAD_PICTURE_TOOL = UPLOAD_PICTURE_TOOL;
+var ADD_URL_PICTURE_TOOL = {
+  id: "".concat(PREFIX_ID, "upload-picture"),
+  type: _tools.ActionsEnum.addUrlPicture,
+  icon: _icons.pictureIcon,
+  lib: 'Add picture from URL'
+};
+exports.ADD_URL_PICTURE_TOOL = ADD_URL_PICTURE_TOOL;

package/dist/hooks/useDrawableCanvas.js

@@ -25,8 +25,12 @@ var _transform = require("../utils/transform");
 
 var _data = require("../utils/data");
 
+var _tools = require("../types/tools");
+
+var _tools2 = require("../constants/tools");
+
 var handleMove = function handleMove(e, canvasRef, activeTool, canvasOffset, selectedShape, selectionMode, canvasOffsetStartPosition, width, height, scaleRatio, setHoverMode, updateSingleShape, setCanvasOffset, setSelectedShape, selectionPadding) {
-  if (activeTool === _Shapes.ToolEnum.move && canvasOffsetStartPosition !== undefined) {
+  if (activeTool.type === _tools.ActionsEnum.move && canvasOffsetStartPosition !== undefined) {
     var _cursorPosition = (0, _intersect.getCursorPosition)(e, canvasRef.current, width, height, scaleRatio);
 
     setCanvasOffset([_cursorPosition[0] - canvasOffsetStartPosition[0], _cursorPosition[1] - canvasOffsetStartPosition[1]]);
@@ -62,7 +66,6 @@ var useDrawableCanvas = function useDrawableCanvas(_ref) {
       drawCanvasRef = _ref.drawCanvasRef,
       setActiveTool = _ref.setActiveTool,
       shapes = _ref.shapes,
-      defaultConf = _ref.defaultConf,
       selectionMode = _ref.selectionMode,
       activeTool = _ref.activeTool,
       isInsideComponent = _ref.isInsideComponent,
@@ -111,17 +114,17 @@ var useDrawableCanvas = function useDrawableCanvas(_ref) {
     var handleMouseUp = function handleMouseUp(e) {
       if (selectionMode.mode === _Mode.SelectionModeLib.textedition) return;
 
-      if (activeTool === _Shapes.ShapeEnum.text) {
+      if (activeTool.type === _Shapes.ShapeEnum.text) {
         var _drawCanvasRef$curren;
 
         var cursorPosition = (0, _intersect.getCursorPosition)(e, selectionCanvasRef.current, width, height, scaleRatio);
         var drawCtx = (_drawCanvasRef$curren = drawCanvasRef.current) === null || _drawCanvasRef$curren === void 0 ? void 0 : _drawCanvasRef$curren.getContext('2d');
         if (!drawCtx) return;
 
-        var _newShape2 = (0, _data.createShape)(drawCtx, activeTool, cursorPosition, defaultConf);
+        var _newShape2 = (0, _data.createShape)(drawCtx, activeTool, cursorPosition);
 
         addShape(_newShape2);
-        setActiveTool(_Shapes.ToolEnum.selection);
+        setActiveTool(_tools2.SELECTION_TOOL);
         setSelectedShape(_newShape2);
         setSelectionMode({
           mode: _Mode.SelectionModeLib.textedition,
@@ -149,7 +152,7 @@ var useDrawableCanvas = function useDrawableCanvas(_ref) {
         document.removeEventListener('touchend', handleMouseUp);
       }
     };
-  }, [isInsideComponent, selectionCanvasRef, drawCanvasRef, selectionMode, saveShapes, activeTool, addShape, defaultConf, width, height, scaleRatio, setActiveTool, setSelectedShape, setSelectionMode]);
+  }, [isInsideComponent, selectionCanvasRef, drawCanvasRef, selectionMode, saveShapes, activeTool, addShape, width, height, scaleRatio, setActiveTool, setSelectedShape, setSelectionMode]);
   (0, _react.useEffect)(function () {
     var ref = selectionCanvasRef.current;
     if (!ref) return;
@@ -159,32 +162,33 @@ var useDrawableCanvas = function useDrawableCanvas(_ref) {
       e.preventDefault();
       var cursorPosition = (0, _intersect.getCursorPosition)(e, selectionCanvasRef.current, width, height, scaleRatio);
 
-      if (activeTool === _Shapes.ToolEnum.selection) {
+      if (activeTool.type === _tools.ActionsEnum.selection) {
         var _selectShape = (0, _selection.selectShape)(shapes, cursorPosition, scaleRatio, canvasOffset, selectedShape, selectionPadding),
             shape = _selectShape.shape,
             mode = _selectShape.mode;
 
         setSelectedShape(shape);
         setSelectionMode(mode);
-      } else if (activeTool === _Shapes.ToolEnum.move) {
+      } else if (activeTool.type === _tools.ActionsEnum.move) {
         setCanvasOffsetStartPosition(cursorPosition);
       }
 
-      if (_fp["default"].includes(activeTool, _Shapes.ShapeEnum)) {
+      if (_fp["default"].includes(activeTool.type, _Shapes.ShapeEnum)) {
         var _drawCanvasRef$curren2;
 
         var drawCtx = (_drawCanvasRef$curren2 = drawCanvasRef.current) === null || _drawCanvasRef$curren2 === void 0 ? void 0 : _drawCanvasRef$curren2.getContext('2d');
         if (!drawCtx) return;
 
-        if (activeTool === _Shapes.ShapeEnum.brush) {
+        if (activeTool.type === _Shapes.ShapeEnum.brush) {
           if (!!selectedShape) {
             var _newShape3 = (0, _transform.createNewPointGroupToShape)(selectedShape, cursorPosition);
 
             updateSingleShape(_newShape3);
             setSelectedShape(_newShape3);
           } else {
-            var _newShape4 = (0, _data.createShape)(drawCtx, activeTool, cursorPosition, defaultConf);
+            var _newShape4 = (0, _data.createShape)(drawCtx, activeTool, cursorPosition);
 
+            if (!_newShape4) return;
             addShape(_newShape4);
             setSelectedShape(_newShape4);
           }
@@ -192,17 +196,18 @@ var useDrawableCanvas = function useDrawableCanvas(_ref) {
           setSelectionMode({
             mode: _Mode.SelectionModeLib.brush
           });
-        } else if (activeTool !== _Shapes.ShapeEnum.text) {
-          var _newShape5 = (0, _data.createShape)(drawCtx, activeTool, cursorPosition, defaultConf);
+        } else if (activeTool.type !== _Shapes.ShapeEnum.text) {
+          var _newShape5 = (0, _data.createShape)(drawCtx, activeTool, cursorPosition);
 
+          if (!_newShape5) return;
           addShape(_newShape5);
-          setActiveTool(_Shapes.ToolEnum.selection);
+          setActiveTool(_tools2.SELECTION_TOOL);
           setSelectedShape(_newShape5);
           setSelectionMode({
             mode: _Mode.SelectionModeLib.resize,
             cursorStartPosition: cursorPosition,
             originalShape: _newShape5,
-            anchor: activeTool === _Shapes.ShapeEnum.line || activeTool === _Shapes.ShapeEnum.polygon || activeTool === _Shapes.ShapeEnum.curve ? 0 : [1, 1]
+            anchor: activeTool.type === _Shapes.ShapeEnum.line || activeTool.type === _Shapes.ShapeEnum.polygon || activeTool.type === _Shapes.ShapeEnum.curve ? 0 : [1, 1]
           });
         }
       }
@@ -218,13 +223,13 @@ var useDrawableCanvas = function useDrawableCanvas(_ref) {
       ref.removeEventListener('mousedown', handleMouseDown);
       ref.removeEventListener('touchstart', handleMouseDown);
     };
-  }, [disabled, selectionCanvasRef, drawCanvasRef, selectedShape, activeTool, canvasOffset, setCanvasOffsetStartPosition, shapes, defaultConf, width, height, scaleRatio, updateSingleShape, addShape, setActiveTool, setSelectedShape, setSelectionMode, selectionPadding]);
+  }, [disabled, selectionCanvasRef, drawCanvasRef, selectedShape, activeTool, canvasOffset, setCanvasOffsetStartPosition, shapes, width, height, scaleRatio, updateSingleShape, addShape, setActiveTool, setSelectedShape, setSelectionMode, selectionPadding]);
   (0, _react.useEffect)(function () {
     var ref = selectionCanvasRef.current;
     if (!ref) return;
 
     var handleDoubleClick = function handleDoubleClick(e) {
-      if (activeTool === _Shapes.ToolEnum.selection) {
+      if (activeTool.type === _tools.ActionsEnum.selection) {
         if ((selectedShape === null || selectedShape === void 0 ? void 0 : selectedShape.type) === _Shapes.ShapeEnum.text) {
           var cursorPosition = (0, _intersect.getCursorPosition)(e, selectionCanvasRef.current, width, height, scaleRatio);