@yorab/react-paint 0.4.2 → 0.6.1

package/dist/constants/tools.js

@@ -0,0 +1,428 @@
+"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
+  },
+  fontBold: {
+    values: [false, true],
+    "default": false
+  },
+  fontItalic: {
+    values: [false, true],
+    "default": false
+  }
+};
+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/useDoubleClick.js

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

package/dist/hooks/useDrawableCanvas.js

@@ -25,8 +25,14 @@ var _transform = require("../utils/transform");
 
 var _data = require("../utils/data");
 
+var _tools = require("../types/tools");
+
+var _tools2 = require("../constants/tools");
+
+var _useDoubleClick2 = _interopRequireDefault(require("./useDoubleClick"));
+
 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]]);
@@ -36,7 +42,7 @@ var handleMove = function handleMove(e, canvasRef, activeTool, canvasOffset, sel
   if (selectedShape.locked) return;
   var cursorPosition = (0, _intersect.getCursorPosition)(e, canvasRef.current, width, height, scaleRatio);
 
-  if (selectionMode.mode === _Mode.SelectionModeLib["default"]) {
+  if (selectionMode.mode === _Mode.SelectionModeLib["default"] || selectionMode.mode === _Mode.SelectionModeLib.textedition) {
     var positionIntersection = (0, _intersect.checkPositionIntersection)(selectedShape, cursorPosition, canvasOffset, selectionPadding, scaleRatio, true) || {
       mode: _Mode.SelectionModeLib["default"]
     };
@@ -62,7 +68,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,
@@ -88,6 +93,10 @@ var useDrawableCanvas = function useDrawableCanvas(_ref) {
       hoverMode = _useState2[0],
       setHoverMode = _useState2[1];
 
+  var _useDoubleClick = (0, _useDoubleClick2["default"])(),
+      registerDoubleClickEvent = _useDoubleClick.registerDoubleClickEvent,
+      unRegisterDoubleClickEvent = _useDoubleClick.unRegisterDoubleClickEvent;
+
   (0, _react.useEffect)(function () {
     var handleMouseMove = function handleMouseMove(e) {
       return window.requestAnimationFrame(function () {
@@ -108,28 +117,9 @@ var useDrawableCanvas = function useDrawableCanvas(_ref) {
     };
   }, [isInsideComponent, selectionCanvasRef, selectedShape, selectionMode, setHoverMode, canvasOffset, canvasOffsetStartPosition, width, height, scaleRatio, updateSingleShape, activeTool, setCanvasOffset, setSelectedShape, selectionPadding]);
   (0, _react.useEffect)(function () {
-    var handleMouseUp = function handleMouseUp(e) {
+    var handleMouseUp = function handleMouseUp() {
       if (selectionMode.mode === _Mode.SelectionModeLib.textedition) return;
 
-      if (activeTool === _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);
-
-        addShape(_newShape2);
-        setActiveTool(_Shapes.ToolEnum.selection);
-        setSelectedShape(_newShape2);
-        setSelectionMode({
-          mode: _Mode.SelectionModeLib.textedition,
-          defaultValue: _newShape2.value
-        });
-        return;
-      }
-
       if (selectionMode.mode !== _Mode.SelectionModeLib["default"]) {
         setSelectionMode({
           mode: _Mode.SelectionModeLib["default"]
@@ -149,7 +139,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, selectionMode, saveShapes, setSelectionMode]);
   (0, _react.useEffect)(function () {
     var ref = selectionCanvasRef.current;
     if (!ref) return;
@@ -159,50 +149,52 @@ 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)) {
-        var _drawCanvasRef$curren2;
+      if (_fp["default"].includes(activeTool.type, _Shapes.ShapeEnum)) {
+        var _drawCanvasRef$curren;
 
-        var drawCtx = (_drawCanvasRef$curren2 = drawCanvasRef.current) === null || _drawCanvasRef$curren2 === void 0 ? void 0 : _drawCanvasRef$curren2.getContext('2d');
+        var drawCtx = (_drawCanvasRef$curren = drawCanvasRef.current) === null || _drawCanvasRef$curren === void 0 ? void 0 : _drawCanvasRef$curren.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);
+            var _newShape2 = (0, _transform.createNewPointGroupToShape)(selectedShape, cursorPosition);
 
-            updateSingleShape(_newShape3);
-            setSelectedShape(_newShape3);
+            updateSingleShape(_newShape2);
+            setSelectedShape(_newShape2);
           } else {
-            var _newShape4 = (0, _data.createShape)(drawCtx, activeTool, cursorPosition, defaultConf);
+            var _newShape3 = (0, _data.createShape)(drawCtx, activeTool, cursorPosition);
 
-            addShape(_newShape4);
-            setSelectedShape(_newShape4);
+            if (!_newShape3) return;
+            addShape(_newShape3);
+            setSelectedShape(_newShape3);
           }
 
           setSelectionMode({
             mode: _Mode.SelectionModeLib.brush
           });
-        } else if (activeTool !== _Shapes.ShapeEnum.text) {
-          var _newShape5 = (0, _data.createShape)(drawCtx, activeTool, cursorPosition, defaultConf);
+        } else {
+          var _newShape4 = (0, _data.createShape)(drawCtx, activeTool, cursorPosition);
 
-          addShape(_newShape5);
-          setActiveTool(_Shapes.ToolEnum.selection);
-          setSelectedShape(_newShape5);
+          if (!_newShape4) return;
+          addShape(_newShape4);
+          setActiveTool(_tools2.SELECTION_TOOL);
+          setSelectedShape(_newShape4);
           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]
+            originalShape: _newShape4,
+            anchor: activeTool.type === _Shapes.ShapeEnum.line || activeTool.type === _Shapes.ShapeEnum.polygon || activeTool.type === _Shapes.ShapeEnum.curve ? 0 : [1, 1]
           });
         }
       }
@@ -218,13 +210,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);
 
@@ -239,15 +231,12 @@ var useDrawableCanvas = function useDrawableCanvas(_ref) {
     };
 
     if (isInsideComponent) {
-      ref.addEventListener('dblclick', handleDoubleClick);
+      registerDoubleClickEvent(ref, handleDoubleClick);
+      return function () {
+        unRegisterDoubleClickEvent(ref);
+      };
     }
-
-    return function () {
-      if (isInsideComponent) {
-        ref.removeEventListener('dblclick', handleDoubleClick);
-      }
-    };
-  }, [isInsideComponent, selectionCanvasRef, activeTool, selectedShape, width, height, scaleRatio, canvasOffset, setSelectionMode, selectionPadding]);
+  }, [registerDoubleClickEvent, unRegisterDoubleClickEvent, isInsideComponent, selectionCanvasRef, activeTool, selectedShape, width, height, scaleRatio, canvasOffset, setSelectionMode, selectionPadding]);
   return {
     hoverMode: hoverMode
   };