@yorab/react-paint 0.7.5 → 0.8.0

package/dist/hooks/useComponent.js

@@ -1,47 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = require("react");
-
-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) {
-      setIsInsideComponent(false);
-    } else {
-      document.addEventListener('mousedown', onDetectClick, {
-        passive: true
-      });
-      document.addEventListener('touchstart', onDetectClick, {
-        passive: true
-      });
-    }
-
-    return () => {
-      if (!disabled) {
-        document.removeEventListener('mousedown', onDetectClick);
-        document.removeEventListener('touchstart', onDetectClick);
-      }
-    };
-  }, [disabled, componentRef]);
-  return {
-    isInsideComponent
-  };
-};
-
-var _default = useComponent;
-exports.default = _default;

package/dist/hooks/useDoubleClick.js

@@ -1,46 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = require("react");
-
-const DELTA_TIME_THRESHOLD_MS = 300;
-
-const useDoubleClick = () => {
-  const lastClickTimestampRef = (0, _react.useRef)(undefined);
-  const callbackRef = (0, _react.useRef)(undefined);
-
-  const onClick = e => {
-    const 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();
-  };
-
-  const registerDoubleClickEvent = (element, callback) => {
-    callbackRef.current = callback;
-    element.addEventListener('click', onClick);
-    element.addEventListener('touchend', onClick);
-  };
-
-  const unRegisterDoubleClickEvent = element => {
-    element.removeEventListener('click', onClick);
-    element.removeEventListener('touchend', onClick);
-  };
-
-  return {
-    registerDoubleClickEvent,
-    unRegisterDoubleClickEvent
-  };
-};
-
-var _default = useDoubleClick;
-exports.default = _default;

package/dist/hooks/useDrag.js

@@ -1,92 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = require("react");
-
-const useDrag = _ref => {
-  let {
-    disabled = false,
-    ref,
-    shape,
-    layoutDragging,
-    setLayoutDragging,
-    handleSelect,
-    onMoveShapes
-  } = _ref;
-  const [isOver, setIsOver] = (0, _react.useState)(false);
-  (0, _react.useEffect)(() => {
-    if (!layoutDragging) setIsOver(false);
-  }, [layoutDragging]);
-  (0, _react.useEffect)(() => {
-    const layoutRef = ref.current;
-    if (!layoutRef) return;
-
-    const handleDragEnd = () => {
-      setLayoutDragging(undefined);
-    };
-
-    const handleDragOver = e => {
-      if (e.preventDefault) {
-        e.preventDefault();
-      }
-
-      return false;
-    };
-
-    const handleDragStart = e => {
-      handleSelect(shape);
-      if (!e.dataTransfer) return;
-      e.dataTransfer.effectAllowed = 'move';
-      e.dataTransfer.setData('draggableShapeId', shape.id);
-      setLayoutDragging(shape.id);
-    };
-
-    const handleDragEnter = () => {
-      layoutDragging !== shape.id && setIsOver(true);
-    };
-
-    const handleDragLeave = () => {
-      setIsOver(false);
-    };
-
-    const 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 () => {
-      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
-  };
-};
-
-var _default = useDrag;
-exports.default = _default;

package/dist/hooks/useDrawableCanvas.js

@@ -1,230 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = require("react");
-
-var _selection = require("../utils/selection");
-
-var _intersect = require("../utils/intersect");
-
-var _transform = require("../utils/transform");
-
-var _tools = require("../constants/tools");
-
-var _useDoubleClick = _interopRequireDefault(require("./useDoubleClick"));
-
-var _shapes = require("../constants/shapes");
-
-var _shapes2 = require("../utils/shapes");
-
-var _brush = require("../utils/shapes/brush");
-
-const handleMove = (e, canvasRef, activeTool, gridFormat, canvasOffset, selectedShape, selectionMode, canvasOffsetStartPosition, width, height, scaleRatio, setHoverMode, updateSingleShape, setCanvasOffset, setSelectedShape, selectionPadding, isShiftPressed) => {
-  if (activeTool.type === 'move' && canvasOffsetStartPosition !== undefined) {
-    const cursorPosition = (0, _intersect.getCursorPosition)(e, canvasRef.current, width, height, scaleRatio);
-    setCanvasOffset([cursorPosition[0] - canvasOffsetStartPosition[0], cursorPosition[1] - canvasOffsetStartPosition[1]]);
-  }
-
-  if (selectedShape == undefined) return;
-  if (selectedShape.locked) return;
-  const cursorPosition = (0, _intersect.getCursorPosition)(e, canvasRef.current, width, height, scaleRatio);
-
-  if (selectionMode.mode === 'default' || selectionMode.mode === 'textedition') {
-    const positionIntersection = (0, _intersect.checkPositionIntersection)(selectedShape, cursorPosition, canvasOffset, selectionPadding, scaleRatio, true) || {
-      mode: 'default'
-    };
-    setHoverMode(positionIntersection);
-  } else {
-    var _canvasRef$current;
-
-    const ctx = (_canvasRef$current = canvasRef.current) === null || _canvasRef$current === void 0 ? void 0 : _canvasRef$current.getContext('2d');
-    if (!ctx) return;
-    const newShape = (0, _transform.transformShape)(ctx, selectedShape, cursorPosition, gridFormat, canvasOffset, selectionMode, selectionPadding, isShiftPressed);
-    updateSingleShape(newShape);
-    setSelectedShape(newShape);
-  }
-};
-
-const useDrawableCanvas = _ref => {
-  let {
-    disabled = false,
-    addShape,
-    canvasSize,
-    drawCanvasRef,
-    setActiveTool,
-    shapes,
-    selectionMode,
-    activeTool,
-    isInsideComponent,
-    setCanvasOffset,
-    selectedShape,
-    selectionCanvasRef,
-    canvasOffsetStartPosition,
-    setSelectedShape,
-    setCanvasOffsetStartPosition,
-    updateSingleShape,
-    gridFormat,
-    canvasOffset,
-    saveShapes,
-    setSelectionMode,
-    selectionPadding,
-    isShiftPressed
-  } = _ref;
-  const {
-    width,
-    height,
-    scaleRatio
-  } = canvasSize;
-  const [hoverMode, setHoverMode] = (0, _react.useState)({
-    mode: 'default'
-  });
-  const {
-    registerDoubleClickEvent,
-    unRegisterDoubleClickEvent
-  } = (0, _useDoubleClick.default)();
-  (0, _react.useEffect)(() => {
-    const handleMouseMove = e => window.requestAnimationFrame(() => handleMove(e, selectionCanvasRef, activeTool, gridFormat, canvasOffset, selectedShape, selectionMode, canvasOffsetStartPosition, width, height, scaleRatio, setHoverMode, updateSingleShape, setCanvasOffset, setSelectedShape, selectionPadding, isShiftPressed));
-
-    if (isInsideComponent) {
-      document.addEventListener('mousemove', handleMouseMove);
-      document.addEventListener('touchmove', handleMouseMove);
-    }
-
-    return () => {
-      if (isInsideComponent) {
-        document.removeEventListener('mousemove', handleMouseMove);
-        document.removeEventListener('touchmove', handleMouseMove);
-      }
-    };
-  }, [isInsideComponent, selectionCanvasRef, selectedShape, selectionMode, setHoverMode, gridFormat, canvasOffset, canvasOffsetStartPosition, width, height, scaleRatio, updateSingleShape, activeTool, setCanvasOffset, setSelectedShape, selectionPadding, isShiftPressed]);
-  (0, _react.useEffect)(() => {
-    const handleMouseUp = () => {
-      if (selectionMode.mode === 'textedition') return;
-
-      if (selectionMode.mode !== 'default') {
-        setSelectionMode({
-          mode: 'default'
-        });
-        saveShapes();
-      }
-    };
-
-    if (isInsideComponent) {
-      document.addEventListener('mouseup', handleMouseUp);
-      document.addEventListener('touchend', handleMouseUp);
-    }
-
-    return () => {
-      if (isInsideComponent) {
-        document.removeEventListener('mouseup', handleMouseUp);
-        document.removeEventListener('touchend', handleMouseUp);
-      }
-    };
-  }, [isInsideComponent, selectionMode, saveShapes, setSelectionMode]);
-  (0, _react.useEffect)(() => {
-    const ref = selectionCanvasRef.current;
-    if (!ref) return;
-    if (disabled) return;
-
-    const handleMouseDown = e => {
-      e.preventDefault();
-      const cursorPosition = (0, _intersect.getCursorPosition)(e, selectionCanvasRef.current, width, height, scaleRatio);
-
-      if (activeTool.type === 'selection') {
-        const {
-          shape,
-          mode
-        } = (0, _selection.selectShape)(shapes, cursorPosition, scaleRatio, canvasOffset, selectedShape, selectionPadding);
-        setSelectedShape(shape);
-        setSelectionMode(mode);
-      } else if (activeTool.type === 'move') {
-        setCanvasOffsetStartPosition(cursorPosition);
-      }
-
-      if (_shapes.ShapeTypeArray.includes(activeTool.type)) {
-        var _drawCanvasRef$curren;
-
-        const drawCtx = (_drawCanvasRef$curren = drawCanvasRef.current) === null || _drawCanvasRef$curren === void 0 ? void 0 : _drawCanvasRef$curren.getContext('2d');
-        if (!drawCtx) return;
-
-        if (activeTool.type === 'brush') {
-          if (!!selectedShape) {
-            const newShape = (0, _brush.addNewPointGroupToShape)(selectedShape, cursorPosition);
-            updateSingleShape(newShape);
-            setSelectedShape(newShape);
-          } else {
-            const newShape = (0, _shapes2.createShape)(drawCtx, activeTool, cursorPosition, gridFormat);
-            if (!newShape) return;
-            addShape(newShape);
-            setSelectedShape(newShape);
-          }
-
-          setSelectionMode({
-            mode: 'brush'
-          });
-        } else {
-          const newShape = (0, _shapes2.createShape)(drawCtx, activeTool, cursorPosition, gridFormat);
-          if (!newShape) return;
-          addShape(newShape);
-          setActiveTool(_tools.SELECTION_TOOL);
-          setSelectedShape(newShape);
-          setSelectionMode({
-            mode: 'resize',
-            cursorStartPosition: cursorPosition,
-            originalShape: newShape,
-            anchor: activeTool.type === 'line' || activeTool.type === 'polygon' || activeTool.type === 'curve' ? 0 : [1, 1]
-          });
-        }
-      }
-    };
-
-    ref.addEventListener('mousedown', handleMouseDown, {
-      passive: false
-    });
-    ref.addEventListener('touchstart', handleMouseDown, {
-      passive: false
-    });
-    return () => {
-      ref.removeEventListener('mousedown', handleMouseDown);
-      ref.removeEventListener('touchstart', handleMouseDown);
-    };
-  }, [disabled, selectionCanvasRef, drawCanvasRef, selectedShape, activeTool, canvasOffset, setCanvasOffsetStartPosition, shapes, width, height, scaleRatio, updateSingleShape, addShape, setActiveTool, setSelectedShape, setSelectionMode, selectionPadding, gridFormat]);
-  (0, _react.useEffect)(() => {
-    const ref = selectionCanvasRef.current;
-    if (!ref) return;
-
-    const handleDoubleClick = e => {
-      if (activeTool.type === 'selection') {
-        if ((selectedShape === null || selectedShape === void 0 ? void 0 : selectedShape.type) === 'text') {
-          const cursorPosition = (0, _intersect.getCursorPosition)(e, selectionCanvasRef.current, width, height, scaleRatio);
-
-          if ((0, _intersect.checkPositionIntersection)(selectedShape, cursorPosition, canvasOffset, selectionPadding)) {
-            setSelectionMode({
-              mode: 'textedition',
-              defaultValue: selectedShape.value
-            });
-          }
-        }
-      }
-    };
-
-    if (isInsideComponent) {
-      registerDoubleClickEvent(ref, handleDoubleClick);
-      return () => {
-        unRegisterDoubleClickEvent(ref);
-      };
-    }
-  }, [registerDoubleClickEvent, unRegisterDoubleClickEvent, isInsideComponent, selectionCanvasRef, activeTool, selectedShape, width, height, scaleRatio, canvasOffset, setSelectionMode, selectionPadding]);
-  return {
-    hoverMode
-  };
-};
-
-var _default = useDrawableCanvas;
-exports.default = _default;

package/dist/hooks/useKeyboard.js

@@ -1,142 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _style = require("../constants/style");
-
-var _react = require("react");
-
-var _shapes = require("../utils/shapes");
-
-const KeyboardCode = {
-  ArrowUp: 'ArrowUp',
-  ArrowDown: 'ArrowDown',
-  ArrowLeft: 'ArrowLeft',
-  ArrowRight: 'ArrowRight',
-  Delete: 'Delete',
-  Backspace: 'Backspace',
-  Escape: 'Escape',
-  Shift: 'Shift',
-  z: 'z',
-  Z: 'Z',
-  y: 'y',
-  Y: 'Y'
-};
-const KeyboardCommand = {
-  Copy: 'copy',
-  Paste: 'paste'
-};
-
-const useKeyboard = _ref => {
-  let {
-    gridFormat,
-    isInsideComponent,
-    selectedShape,
-    isEditingText,
-    setSelectedShape,
-    removeShape,
-    pasteShape,
-    updateShape,
-    backwardShape,
-    forwardShape,
-    setShiftPressed
-  } = _ref;
-  const [copiedShape, setCopiedShape] = (0, _react.useState)(undefined);
-  (0, _react.useEffect)(() => {
-    const handleCopy = e => {
-      if (!selectedShape) return;
-      if (isEditingText) return;
-      e.preventDefault();
-      setCopiedShape({ ...selectedShape
-      });
-    };
-
-    const handlePaste = e => {
-      if (!copiedShape) return;
-      if (isEditingText) return;
-      e.preventDefault();
-      pasteShape((0, _shapes.copyShape)(copiedShape, gridFormat));
-    };
-
-    const handleKeyUp = e => {
-      switch (e.key) {
-        case KeyboardCode.Shift:
-          setShiftPressed(false);
-          break;
-      }
-    };
-
-    const handleKeyDown = e => {
-      if (e.metaKey || e.ctrlKey) {
-        if (e.key === KeyboardCode.Z || e.key === KeyboardCode.z) {
-          e.preventDefault();
-          e.stopPropagation();
-          backwardShape();
-          return;
-        } else if (e.key === KeyboardCode.Y || e.key === KeyboardCode.y) {
-          e.preventDefault();
-          e.stopPropagation();
-          forwardShape();
-          return;
-        }
-      }
-
-      if (e.key === KeyboardCode.Shift) {
-        setShiftPressed(true);
-        return;
-      }
-
-      if (!selectedShape) return;
-
-      if (e.key === KeyboardCode.Escape) {
-        setSelectedShape(undefined);
-        return;
-      }
-
-      if (isEditingText) return;
-      const translationMap = {
-        [KeyboardCode.ArrowLeft]: [gridFormat ? -_style.GRID_STEP[gridFormat - 1] : -1, 0],
-        [KeyboardCode.ArrowRight]: [gridFormat ? _style.GRID_STEP[gridFormat - 1] : 1, 0],
-        [KeyboardCode.ArrowDown]: [0, gridFormat ? _style.GRID_STEP[gridFormat - 1] : 1],
-        [KeyboardCode.ArrowUp]: [0, gridFormat ? -_style.GRID_STEP[gridFormat - 1] : -1]
-      };
-
-      switch (e.key) {
-        case KeyboardCode.ArrowLeft:
-        case KeyboardCode.ArrowRight:
-        case KeyboardCode.ArrowDown:
-        case KeyboardCode.ArrowUp:
-          updateShape((0, _shapes.translateShape)(translationMap[e.key], selectedShape, [0, 0], gridFormat));
-          break;
-
-        case KeyboardCode.Delete:
-        case KeyboardCode.Backspace:
-          removeShape(selectedShape);
-          break;
-      }
-    };
-
-    if (isInsideComponent) {
-      document.addEventListener('keydown', handleKeyDown);
-      document.addEventListener('keyup', handleKeyUp);
-      document.addEventListener(KeyboardCommand.Copy, handleCopy);
-      document.addEventListener(KeyboardCommand.Paste, handlePaste);
-    }
-
-    return () => {
-      if (isInsideComponent) {
-        document.removeEventListener('keydown', handleKeyDown);
-        document.removeEventListener('keyup', handleKeyUp);
-        document.removeEventListener(KeyboardCommand.Copy, handleCopy);
-        document.removeEventListener(KeyboardCommand.Paste, handlePaste);
-      }
-    };
-  }, [isInsideComponent, gridFormat, copiedShape, isEditingText, selectedShape, updateShape, removeShape, setSelectedShape, pasteShape, backwardShape, forwardShape, setShiftPressed]);
-  return {};
-};
-
-var _default = useKeyboard;
-exports.default = _default;

package/dist/hooks/useResizeObserver.js

@@ -1,42 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _fp = _interopRequireDefault(require("lodash/fp"));
-
-var _react = require("react");
-
-const useResizeObserver = _ref => {
-  let {
-    onResized,
-    element
-  } = _ref;
-  (0, _react.useEffect)(() => {
-    const current = element.current;
-    if (!current) return;
-    const resizeObserver = new ResizeObserver(entries => {
-      const {
-        width,
-        height
-      } = _fp.default.get('0.borderBoxSize', entries) ? _fp.default.flow(_fp.default.get('0.borderBoxSize'), _fp.default.castArray, _fp.default.first, el => {
-        return {
-          width: _fp.default.get('inlineSize', el),
-          height: _fp.default.get('blockSize', el)
-        };
-      })(entries) : _fp.default.get('0.contentRect', entries);
-      onResized(width, height);
-    });
-    resizeObserver.observe(current);
-    return () => {
-      resizeObserver.unobserve(current);
-    };
-  }, [element, onResized]);
-};
-
-var _default = useResizeObserver;
-exports.default = _default;