@yorab/react-paint 0.2.2

package/dist/hooks/useDrag.js

@@ -0,0 +1,100 @@
+"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"));
+
+var _react = require("react");
+
+var useDrag = function useDrag(_ref) {
+  var _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      ref = _ref.ref,
+      shape = _ref.shape,
+      layoutDragging = _ref.layoutDragging,
+      setLayoutDragging = _ref.setLayoutDragging,
+      handleSelect = _ref.handleSelect,
+      onMoveShapes = _ref.onMoveShapes;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      isOver = _useState2[0],
+      setIsOver = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    if (!layoutDragging) setIsOver(false);
+  }, [layoutDragging]);
+  (0, _react.useEffect)(function () {
+    var layoutRef = ref.current;
+    if (!layoutRef) return;
+
+    var handleDragEnd = function handleDragEnd() {
+      setLayoutDragging(undefined);
+    };
+
+    var handleDragOver = function handleDragOver(e) {
+      if (e.preventDefault) {
+        e.preventDefault();
+      }
+
+      return false;
+    };
+
+    var handleDragStart = function handleDragStart(e) {
+      handleSelect(shape);
+      if (!e.dataTransfer) return;
+      e.dataTransfer.effectAllowed = 'move';
+      e.dataTransfer.setData('draggableShapeId', shape.id);
+      setLayoutDragging(shape.id);
+    };
+
+    var handleDragEnter = function handleDragEnter() {
+      layoutDragging !== shape.id && setIsOver(true);
+    };
+
+    var handleDragLeave = function handleDragLeave() {
+      setIsOver(false);
+    };
+
+    var handleDrop = function handleDrop(e) {
+      e.stopPropagation(); // stops the browser from redirecting.
+
+      if (e.dataTransfer) {
+        onMoveShapes(e.dataTransfer.getData('draggableShapeId'), shape.id);
+      }
+
+      return false;
+    };
+
+    if (!disabled) {
+      layoutRef.addEventListener('dragstart', handleDragStart);
+      layoutRef.addEventListener('dragend', handleDragEnd);
+      layoutRef.addEventListener('dragover', handleDragOver);
+      layoutRef.addEventListener('dragenter', handleDragEnter);
+      layoutRef.addEventListener('dragleave', handleDragLeave);
+      layoutRef.addEventListener('drop', handleDrop);
+    }
+
+    return function () {
+      if (!disabled) {
+        layoutRef.removeEventListener('dragstart', handleDragStart);
+        layoutRef.removeEventListener('dragend', handleDragEnd);
+        layoutRef.removeEventListener('dragover', handleDragOver);
+        layoutRef.removeEventListener('dragenter', handleDragEnter);
+        layoutRef.removeEventListener('dragleave', handleDragLeave);
+        layoutRef.removeEventListener('drop', handleDrop);
+      }
+    };
+  }, [disabled, ref, shape, setLayoutDragging, handleSelect, onMoveShapes, layoutDragging]);
+  return {
+    isOver: isOver
+  };
+};
+
+var _default = useDrag;
+exports["default"] = _default;

package/dist/hooks/useDrawableCanvas.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { DrawableShape, Point, StyledShape, ToolsType } from 'types/Shapes';
+import { HoverModeData, SelectionModeData } from 'types/Mode';
+declare type UseCanvasType = {
+    disabled?: boolean;
+    width: number;
+    height: number;
+    shapes: DrawableShape[];
+    saveShapes: () => void;
+    addShape: (newShape: DrawableShape) => void;
+    updateSingleShape: (updatedShape: DrawableShape) => void;
+    selectedShape: DrawableShape | undefined;
+    setSelectedShape: React.Dispatch<React.SetStateAction<DrawableShape | undefined>>;
+    activeTool: ToolsType;
+    setActiveTool: React.Dispatch<React.SetStateAction<ToolsType>>;
+    canvasOffsetStartPosition: Point | undefined;
+    setCanvasOffsetStartPosition: React.Dispatch<React.SetStateAction<Point | undefined>>;
+    canvasOffset: Point;
+    setCanvasOffset: React.Dispatch<React.SetStateAction<Point>>;
+    defaultConf: StyledShape;
+    isInsideComponent: boolean;
+    selectionMode: SelectionModeData<number | Point>;
+    setSelectionMode: React.Dispatch<React.SetStateAction<SelectionModeData<number | Point>>>;
+    drawCanvasRef: React.MutableRefObject<HTMLCanvasElement | null>;
+    selectionCanvasRef: React.MutableRefObject<HTMLCanvasElement | null>;
+};
+declare const useDrawableCanvas: ({ disabled, addShape, drawCanvasRef, setActiveTool, shapes, defaultConf, selectionMode, width, height, activeTool, isInsideComponent, setCanvasOffset, selectedShape, selectionCanvasRef, canvasOffsetStartPosition, setSelectedShape, setCanvasOffsetStartPosition, updateSingleShape, canvasOffset, saveShapes, setSelectionMode }: UseCanvasType) => {
+    hoverMode: HoverModeData;
+};
+export default useDrawableCanvas;

package/dist/hooks/useDrawableCanvas.js

@@ -0,0 +1,250 @@
+"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"));
+
+var _react = require("react");
+
+var _fp = _interopRequireDefault(require("lodash/fp"));
+
+var _selection = require("../utils/selection");
+
+var _Shapes = require("../types/Shapes");
+
+var _intersect = require("../utils/intersect");
+
+var _Mode = require("../types/Mode");
+
+var _transform = require("../utils/transform");
+
+var _draw = require("../constants/draw");
+
+var _data = require("../utils/data");
+
+var handleMove = function handleMove(e, canvasRef, activeTool, canvasOffset, selectedShape, selectionMode, canvasOffsetStartPosition, width, height, setHoverMode, updateSingleShape, setCanvasOffset, setSelectedShape) {
+  if (activeTool === _Shapes.ToolEnum.move && canvasOffsetStartPosition !== undefined) {
+    var _cursorPosition = (0, _intersect.getCursorPosition)(e, canvasRef.current, width, height);
+
+    setCanvasOffset([_cursorPosition[0] - canvasOffsetStartPosition[0], _cursorPosition[1] - canvasOffsetStartPosition[1]]);
+  }
+
+  if (selectedShape == undefined) return;
+  if (selectedShape.locked) return;
+  var cursorPosition = (0, _intersect.getCursorPosition)(e, canvasRef.current, width, height);
+
+  if (selectionMode.mode === _Mode.SelectionModeLib["default"]) {
+    var positionIntersection = (0, _intersect.checkPositionIntersection)(selectedShape, cursorPosition, canvasOffset, true) || {
+      mode: _Mode.SelectionModeLib["default"]
+    };
+    setHoverMode(positionIntersection);
+  } else {
+    var _canvasRef$current;
+
+    var ctx = (_canvasRef$current = canvasRef.current) === null || _canvasRef$current === void 0 ? void 0 : _canvasRef$current.getContext('2d');
+    if (!ctx) return;
+
+    var _newShape = (0, _transform.transformShape)(ctx, selectedShape, cursorPosition, canvasOffset, selectionMode);
+
+    updateSingleShape(_newShape);
+    setSelectedShape(_newShape);
+  }
+};
+
+var useDrawableCanvas = function useDrawableCanvas(_ref) {
+  var _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      addShape = _ref.addShape,
+      drawCanvasRef = _ref.drawCanvasRef,
+      setActiveTool = _ref.setActiveTool,
+      shapes = _ref.shapes,
+      defaultConf = _ref.defaultConf,
+      selectionMode = _ref.selectionMode,
+      width = _ref.width,
+      height = _ref.height,
+      activeTool = _ref.activeTool,
+      isInsideComponent = _ref.isInsideComponent,
+      setCanvasOffset = _ref.setCanvasOffset,
+      selectedShape = _ref.selectedShape,
+      selectionCanvasRef = _ref.selectionCanvasRef,
+      canvasOffsetStartPosition = _ref.canvasOffsetStartPosition,
+      setSelectedShape = _ref.setSelectedShape,
+      setCanvasOffsetStartPosition = _ref.setCanvasOffsetStartPosition,
+      updateSingleShape = _ref.updateSingleShape,
+      canvasOffset = _ref.canvasOffset,
+      saveShapes = _ref.saveShapes,
+      setSelectionMode = _ref.setSelectionMode;
+
+  var _useState = (0, _react.useState)({
+    mode: _Mode.SelectionModeLib["default"]
+  }),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      hoverMode = _useState2[0],
+      setHoverMode = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    var handleMouseMove = function handleMouseMove(e) {
+      return _fp["default"].throttle(_draw.FRAMERATE_SELECTION, handleMove)(e, selectionCanvasRef, activeTool, canvasOffset, selectedShape, selectionMode, canvasOffsetStartPosition, width, height, setHoverMode, updateSingleShape, setCanvasOffset, setSelectedShape);
+    };
+
+    if (isInsideComponent) {
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('touchmove', handleMouseMove);
+    }
+
+    return function () {
+      if (isInsideComponent) {
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('touchmove', handleMouseMove);
+      }
+    };
+  }, [isInsideComponent, selectionCanvasRef, selectedShape, selectionMode, setHoverMode, canvasOffset, canvasOffsetStartPosition, width, height, updateSingleShape, activeTool, setCanvasOffset, setSelectedShape]);
+  (0, _react.useEffect)(function () {
+    var handleMouseUp = function handleMouseUp(e) {
+      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);
+        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"]
+        });
+        saveShapes();
+      }
+    };
+
+    if (isInsideComponent) {
+      document.addEventListener('mouseup', handleMouseUp);
+      document.addEventListener('touchend', handleMouseUp);
+    }
+
+    return function () {
+      if (isInsideComponent) {
+        document.removeEventListener('mouseup', handleMouseUp);
+        document.removeEventListener('touchend', handleMouseUp);
+      }
+    };
+  }, [isInsideComponent, selectionCanvasRef, drawCanvasRef, selectionMode, saveShapes, activeTool, addShape, defaultConf, width, height, setActiveTool, setSelectedShape, setSelectionMode]);
+  (0, _react.useEffect)(function () {
+    var ref = selectionCanvasRef.current;
+    if (!ref) return;
+    if (disabled) return;
+
+    var handleMouseDown = function handleMouseDown(e) {
+      e.preventDefault();
+      var cursorPosition = (0, _intersect.getCursorPosition)(e, selectionCanvasRef.current, width, height);
+
+      if (activeTool === _Shapes.ToolEnum.selection) {
+        var _selectShape = (0, _selection.selectShape)(shapes, cursorPosition, canvasOffset, selectedShape),
+            shape = _selectShape.shape,
+            mode = _selectShape.mode;
+
+        setSelectedShape(shape);
+        setSelectionMode(mode);
+      } else if (activeTool === _Shapes.ToolEnum.move) {
+        setCanvasOffsetStartPosition(cursorPosition);
+      }
+
+      if (_fp["default"].includes(activeTool, _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 (!!selectedShape) {
+            var _newShape3 = (0, _transform.createNewPointGroupToShape)(selectedShape, cursorPosition);
+
+            updateSingleShape(_newShape3);
+            setSelectedShape(_newShape3);
+          } else {
+            var _newShape4 = (0, _data.createShape)(drawCtx, activeTool, cursorPosition, defaultConf);
+
+            addShape(_newShape4);
+            setSelectedShape(_newShape4);
+          }
+
+          setSelectionMode({
+            mode: _Mode.SelectionModeLib.brush
+          });
+        } else if (activeTool !== _Shapes.ShapeEnum.text) {
+          var _newShape5 = (0, _data.createShape)(drawCtx, activeTool, cursorPosition, defaultConf);
+
+          addShape(_newShape5);
+          setActiveTool(_Shapes.ToolEnum.selection);
+          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]
+          });
+        }
+      }
+    };
+
+    ref.addEventListener('mousedown', handleMouseDown);
+    ref.addEventListener('touchstart', handleMouseDown);
+    return function () {
+      ref.removeEventListener('mousedown', handleMouseDown);
+      ref.removeEventListener('touchstart', handleMouseDown);
+    };
+  }, [disabled, selectionCanvasRef, drawCanvasRef, selectedShape, activeTool, canvasOffset, setCanvasOffsetStartPosition, shapes, defaultConf, width, height, updateSingleShape, addShape, setActiveTool, setSelectedShape, setSelectionMode]);
+  (0, _react.useEffect)(function () {
+    var ref = selectionCanvasRef.current;
+    if (!ref) return;
+
+    var handleDoubleClick = function handleDoubleClick(e) {
+      if (activeTool === _Shapes.ToolEnum.selection) {
+        if ((selectedShape === null || selectedShape === void 0 ? void 0 : selectedShape.type) === _Shapes.ShapeEnum.text) {
+          var cursorPosition = (0, _intersect.getCursorPosition)(e, selectionCanvasRef.current, width, height);
+
+          if ((0, _intersect.checkPositionIntersection)(selectedShape, cursorPosition, canvasOffset)) {
+            setSelectionMode({
+              mode: _Mode.SelectionModeLib.textedition,
+              defaultValue: selectedShape.value
+            });
+          }
+        }
+      }
+    };
+
+    if (isInsideComponent) {
+      ref.addEventListener('dblclick', handleDoubleClick);
+    }
+
+    return function () {
+      if (isInsideComponent) {
+        ref.removeEventListener('dblclick', handleDoubleClick);
+      }
+    };
+  }, [isInsideComponent, selectionCanvasRef, activeTool, selectedShape, width, height, canvasOffset, setSelectionMode]);
+  return {
+    hoverMode: hoverMode
+  };
+};
+
+var _default = useDrawableCanvas;
+exports["default"] = _default;

package/dist/hooks/useKeyboard.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { DrawableShape } from 'types/Shapes';
+declare type UseKeyboardType = {
+    isInsideComponent: boolean;
+    selectedShape: DrawableShape | undefined;
+    pasteShape: (shape: DrawableShape) => void;
+    updateShape: (shape: DrawableShape) => void;
+    setSelectedShape: (value: React.SetStateAction<DrawableShape | undefined>) => void;
+    removeShape: (shape: DrawableShape) => void;
+    backwardShape: () => void;
+    forwardShape: () => void;
+    isEditingText: boolean;
+};
+declare const useKeyboard: ({ isInsideComponent, selectedShape, isEditingText, setSelectedShape, removeShape, pasteShape, updateShape, backwardShape, forwardShape }: UseKeyboardType) => {};
+export default useKeyboard;

package/dist/hooks/useKeyboard.js

@@ -0,0 +1,123 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _fp = _interopRequireDefault(require("lodash/fp"));
+
+var _data = require("../utils/data");
+
+var _keyboard = require("../types/keyboard");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var useKeyboard = function useKeyboard(_ref) {
+  var isInsideComponent = _ref.isInsideComponent,
+      selectedShape = _ref.selectedShape,
+      isEditingText = _ref.isEditingText,
+      setSelectedShape = _ref.setSelectedShape,
+      removeShape = _ref.removeShape,
+      pasteShape = _ref.pasteShape,
+      updateShape = _ref.updateShape,
+      backwardShape = _ref.backwardShape,
+      forwardShape = _ref.forwardShape;
+
+  var _useState = (0, _react.useState)(undefined),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      copiedShape = _useState2[0],
+      setCopiedShape = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    var handleCopy = function handleCopy(e) {
+      if (!selectedShape) return;
+      if (isEditingText) return;
+      e.preventDefault();
+      setCopiedShape(_objectSpread({}, selectedShape));
+    };
+
+    var handlePaste = function handlePaste(e) {
+      if (!copiedShape) return;
+      if (isEditingText) return;
+      e.preventDefault();
+      pasteShape((0, _data.copyShape)(copiedShape));
+    };
+
+    var handleKeyDown = function handleKeyDown(e) {
+      if (e.metaKey || e.ctrlKey) {
+        if (e.key === _keyboard.KeyboardCode.Z) {
+          e.preventDefault();
+          e.stopPropagation();
+          backwardShape();
+          return;
+        } else if (e.key === _keyboard.KeyboardCode.Y) {
+          e.preventDefault();
+          e.stopPropagation();
+          forwardShape();
+          return;
+        }
+      }
+
+      if (!selectedShape) return;
+
+      if (e.key === _keyboard.KeyboardCode.Escape) {
+        setSelectedShape(undefined);
+        return;
+      }
+
+      if (isEditingText) return;
+
+      switch (e.key) {
+        case _keyboard.KeyboardCode.ArrowLeft:
+          updateShape(_fp["default"].set('translation', [selectedShape.translation[0] - 1, selectedShape.translation[1]], selectedShape));
+          break;
+
+        case _keyboard.KeyboardCode.ArrowRight:
+          updateShape(_fp["default"].set('translation', [selectedShape.translation[0] + 1, selectedShape.translation[1]], selectedShape));
+          break;
+
+        case _keyboard.KeyboardCode.ArrowDown:
+          updateShape(_fp["default"].set('translation', [selectedShape.translation[0], selectedShape.translation[1] + 1], selectedShape));
+          break;
+
+        case _keyboard.KeyboardCode.ArrowUp:
+          updateShape(_fp["default"].set('translation', [selectedShape.translation[0], selectedShape.translation[1] - 1], selectedShape));
+          break;
+
+        case _keyboard.KeyboardCode.Delete:
+        case _keyboard.KeyboardCode.Backspace:
+          removeShape(selectedShape);
+          break;
+      }
+    };
+
+    if (isInsideComponent) {
+      document.addEventListener('keydown', handleKeyDown);
+      document.addEventListener(_keyboard.KeyboardCommand.Copy, handleCopy);
+      document.addEventListener(_keyboard.KeyboardCommand.Paste, handlePaste);
+    }
+
+    return function () {
+      if (isInsideComponent) {
+        document.removeEventListener('keydown', handleKeyDown);
+        document.removeEventListener(_keyboard.KeyboardCommand.Copy, handleCopy);
+        document.removeEventListener(_keyboard.KeyboardCommand.Paste, handlePaste);
+      }
+    };
+  }, [isInsideComponent, copiedShape, isEditingText, selectedShape, updateShape, removeShape, setSelectedShape, pasteShape, backwardShape, forwardShape]);
+  return {};
+};
+
+var _default = useKeyboard;
+exports["default"] = _default;

package/dist/hooks/useShapes.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { DrawableShape } from 'types/Shapes';
+declare const useShapes: (onDataChanged?: () => void) => {
+    shapesRef: import("react").MutableRefObject<DrawableShape[]>;
+    selectedShape: DrawableShape | undefined;
+    addShape: (newShape: DrawableShape) => void;
+    addPictureShape: (fileOrUrl: File | string, maxSize?: number) => Promise<import("types/Shapes").DrawablePicture>;
+    moveShapes: (firstShapeId: string, lastShapeId: string) => void;
+    saveShapes: () => void;
+    setSelectedShape: import("react").Dispatch<import("react").SetStateAction<DrawableShape | undefined>>;
+    toggleShapeVisibility: (shape: DrawableShape) => void;
+    toggleShapeLock: (shape: DrawableShape) => void;
+    removeShape: (shape: DrawableShape) => void;
+    updateShape: (updatedShape: DrawableShape, withSave?: boolean) => void;
+    backwardShape: () => void;
+    forwardShape: () => void;
+    clearShapes: (shapesToInit?: DrawableShape[], clearHistory?: boolean) => void;
+    canGoBackward: boolean;
+    canGoForward: boolean;
+    canClear: boolean;
+};
+export default useShapes;