@yorab/react-paint 0.6.6 → 0.7.2

package/dist/utils/transform.js

@@ -5,26 +5,24 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updatePolygonLinesCount = exports.translateShape = exports.transformShape = exports.rotateShape = exports.resizeText = exports.resizeShape = exports.resizeRect = exports.resizePicture = exports.resizeLine = exports.resizeEllipse = exports.resizeCircle = exports.resizeBrush = exports.radiansToDegrees = exports.paintNewPointToShape = exports.getNormalizedSize = exports.fitContentInsideContainer = exports.degreesToRadians = exports.createNewPointGroupToShape = exports.calculateTextWidth = exports.calculateTextFontSize = void 0;
+exports.updatePolygonLinesCount = exports.transformShape = exports.roundForGrid = exports.getNormalizedSize = exports.fitContentInsideContainer = void 0;
 
 var _fp = _interopRequireDefault(require("lodash/fp"));
 
-var _shapeData = require("./shapeData");
-
-var _Mode = require("../types/Mode");
+var _style = require("../constants/style");
 
-var _intersect = require("./intersect");
+var _shapes = require("./shapes");
 
-var _style = require("../constants/style");
+var _brush = require("./shapes/brush");
 
-const getNormalizedSize = (originalShape, width, height) => {
-  const originalRatio = originalShape.width / originalShape.height;
+const getNormalizedSize = (originalWidth, originalHeight, width, height) => {
+  const originalRatio = originalWidth / originalHeight;
   const newRatio = width / height;
 
   if (newRatio > originalRatio || height < 0) {
-    return width > originalShape.width ? [width, width / originalRatio] : [height * originalRatio, height];
+    return width > originalWidth ? [width, width / originalRatio] : [height * originalRatio, height];
   } else if (newRatio < originalRatio) {
-    return height > originalShape.height ? [height * originalRatio, height] : [width, width / originalRatio];
+    return height > originalHeight ? [height * originalRatio, height] : [width, width / originalRatio];
   }
 
   return [width, height];
@@ -32,95 +30,12 @@ const getNormalizedSize = (originalShape, width, height) => {
 
 exports.getNormalizedSize = getNormalizedSize;
 
-const translateShape = (shape, cursorPosition, originalShape, originalCursorPosition) => {
-  return { ...shape,
-    ...{
-      translation: [originalShape.translation[0] + cursorPosition[0] - originalCursorPosition[0], originalShape.translation[1] + cursorPosition[1] - originalCursorPosition[1]]
-    }
-  };
-};
-
-exports.translateShape = translateShape;
-
-const rotateShape = (shape, cursorPosition, originalShape, originalCursorPosition, shapeCenter) => {
-  const p1x = shapeCenter[0] + originalShape.translation[0] - originalCursorPosition[0];
-  const p1y = shapeCenter[1] + originalShape.translation[1] - originalCursorPosition[1];
-  const p2x = shapeCenter[0] + originalShape.translation[0] - cursorPosition[0];
-  const p2y = shapeCenter[1] + originalShape.translation[1] - cursorPosition[1];
-  const rotation = originalShape.rotation + Math.atan2(p2y, p2x) - Math.atan2(p1y, p1x);
-  return { ...shape,
-    ...{
-      rotation
-    }
-  };
-};
-
-exports.rotateShape = rotateShape;
-
-const paintNewPointToShape = (shape, cursorPosition) => {
-  return { ...shape,
-    ...{
-      points: _fp.default.set(shape.points.length - 1, [...shape.points[shape.points.length - 1], cursorPosition], shape.points)
-    }
-  };
+const roundForGrid = (value, gridFormat) => {
+  const step = value >= 0 ? _style.GRID_STEP[gridFormat - 1] : -_style.GRID_STEP[gridFormat - 1];
+  return gridFormat ? value + step / 2 - (value + step / 2) % step : Math.round(value);
 };
 
-exports.paintNewPointToShape = paintNewPointToShape;
-
-const createNewPointGroupToShape = (shape, cursorPosition) => {
-  return { ...shape,
-    ...{
-      points: _fp.default.set(shape.points.length, [cursorPosition], shape.points)
-    }
-  };
-};
-
-exports.createNewPointGroupToShape = createNewPointGroupToShape;
-
-const resizeBrush = (cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding) => {
-  const {
-    center,
-    borders
-  } = (0, _shapeData.getShapeInfos)(originalShape, selectionPadding);
-  const cursorPositionBeforeResize = (0, _intersect.getPointPositionAfterCanvasTransformation)(cursorPosition, canvasOffset, originalShape.translation, originalShape.rotation, center);
-  const scaledWidth = selectionMode.anchor[0] === 0.5 ? 1 : selectionMode.anchor[0] === 0 ? (borders.x + borders.width - cursorPositionBeforeResize[0] + selectionPadding * -2) / (borders.width + selectionPadding * -2) : (cursorPositionBeforeResize[0] - borders.x - selectionPadding * 2) / (borders.width - selectionPadding * 2);
-  const scaledHeight = selectionMode.anchor[1] === 0.5 ? 1 : selectionMode.anchor[1] === 0 ? (borders.y + borders.height - cursorPositionBeforeResize[1] + selectionPadding * -2) / (borders.height + selectionPadding * -2) : (cursorPositionBeforeResize[1] - borders.y - selectionPadding * 2) / (borders.height - selectionPadding * 2);
-  const shapeWithNewDimensions = { ...originalShape,
-    points: originalShape.points.map(points => {
-      return points.map(point => [(point[0] - borders.x) * scaledWidth + borders.x, (point[1] - borders.y) * scaledHeight + borders.y]);
-    })
-  };
-  const {
-    center: shapeWithNewDimensionsCenter,
-    borders: shapeWithNewDimensionsBorders
-  } = (0, _shapeData.getShapeInfos)(shapeWithNewDimensions, selectionPadding);
-  const [oppTrueX, oppTrueY] = getRectOppositeAnchorAbsolutePosition(selectionMode.anchor, center, { ...originalShape,
-    ...borders
-  });
-  const [newOppTrueX, newOppTrueY] = getRectOppositeAnchorAbsolutePosition(selectionMode.anchor, shapeWithNewDimensionsCenter, { ...shapeWithNewDimensions,
-    ...shapeWithNewDimensionsBorders
-  }, [scaledWidth < 0, scaledHeight < 0]);
-  return { ...shapeWithNewDimensions,
-    ...{
-      translation: [originalShape.translation[0] - (newOppTrueX - oppTrueX), originalShape.translation[1] - (newOppTrueY - oppTrueY)]
-    }
-  };
-};
-
-exports.resizeBrush = resizeBrush;
-
-const resizeLine = (cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding) => {
-  const {
-    center
-  } = (0, _shapeData.getShapeInfos)(originalShape, selectionPadding);
-  const cursorPositionBeforeResize = (0, _intersect.getPointPositionAfterCanvasTransformation)(cursorPosition, canvasOffset, originalShape.translation, originalShape.rotation, center);
-
-  const updatedShape = _fp.default.set(['points', selectionMode.anchor], cursorPositionBeforeResize, originalShape);
-
-  return updatedShape;
-};
-
-exports.resizeLine = resizeLine;
+exports.roundForGrid = roundForGrid;
 
 const updatePolygonLinesCount = (shape, newPointsCount) => {
   const currentPointsCount = shape.points.length;
@@ -152,179 +67,28 @@ const updatePolygonLinesCount = (shape, newPointsCount) => {
 
 exports.updatePolygonLinesCount = updatePolygonLinesCount;
 
-const resizeCircle = (cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding) => {
-  const {
-    center,
-    borders
-  } = (0, _shapeData.getShapeInfos)(originalShape, selectionPadding);
-  const cursorPositionBeforeResize = (0, _intersect.getPointPositionAfterCanvasTransformation)(cursorPosition, canvasOffset, originalShape.translation, originalShape.rotation, center);
-  const newCursorPosition = [cursorPositionBeforeResize[0], cursorPositionBeforeResize[1]];
-  const scaledRadius = selectionMode.anchor[1] === 0.5 ? (selectionMode.anchor[0] === 0 ? borders.x + borders.width - newCursorPosition[0] + selectionPadding * (selectionMode.anchor[0] === 0 ? -2 : 2) : newCursorPosition[0] - borders.x - selectionPadding * (selectionMode.anchor[0] === 0 ? -2 : 2)) / 2 : (selectionMode.anchor[1] === 0 ? borders.y + borders.height - newCursorPosition[1] + selectionPadding * (selectionMode.anchor[1] === 0 ? -2 : 2) : newCursorPosition[1] - borders.y - selectionPadding * (selectionMode.anchor[1] === 0 ? -2 : 2)) / 2;
-  const shapeWithNewDimensions = { ...originalShape,
-    ...{
-      radius: Math.abs(scaledRadius)
-    }
-  };
-  const {
-    center: shapeWithNewDimensionsCenter
-  } = (0, _shapeData.getShapeInfos)(shapeWithNewDimensions, selectionPadding);
-  const [oppTrueX, oppTrueY] = getCircleOppositeAnchorAbsolutePosition(selectionMode.anchor, center, originalShape);
-  const [newOppTrueX, newOppTrueY] = getCircleOppositeAnchorAbsolutePosition(selectionMode.anchor, shapeWithNewDimensionsCenter, shapeWithNewDimensions, [scaledRadius < 0, scaledRadius < 0]);
-  return { ...shapeWithNewDimensions,
-    ...{
-      translation: [originalShape.translation[0] - (newOppTrueX - oppTrueX), originalShape.translation[1] - (newOppTrueY - oppTrueY)]
-    }
-  };
-};
-
-exports.resizeCircle = resizeCircle;
-
-const resizeEllipse = (cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding) => {
-  const {
-    center,
-    borders
-  } = (0, _shapeData.getShapeInfos)(originalShape, selectionPadding);
-  const cursorPositionBeforeResize = (0, _intersect.getPointPositionAfterCanvasTransformation)(cursorPosition, canvasOffset, originalShape.translation, originalShape.rotation, center);
-  const newCursorPosition = [cursorPositionBeforeResize[0], cursorPositionBeforeResize[1]];
-  const scaledRadiusX = selectionMode.anchor[0] === 0.5 ? originalShape.radiusX : (selectionMode.anchor[0] === 0 ? borders.x + borders.width - newCursorPosition[0] + selectionPadding * (selectionMode.anchor[0] === 0 ? -2 : 2) : newCursorPosition[0] - borders.x - selectionPadding * (selectionMode.anchor[0] === 0 ? -2 : 2)) / 2;
-  const scaledRadiusY = selectionMode.anchor[1] === 0.5 ? originalShape.radiusY : (selectionMode.anchor[1] === 0 ? borders.y + borders.height - newCursorPosition[1] + selectionPadding * (selectionMode.anchor[1] === 0 ? -2 : 2) : newCursorPosition[1] - borders.y - selectionPadding * (selectionMode.anchor[1] === 0 ? -2 : 2)) / 2;
-  const shapeWithNewDimensions = { ...originalShape,
-    ...{
-      radiusX: Math.abs(scaledRadiusX),
-      radiusY: Math.abs(scaledRadiusY)
-    }
-  };
-  const {
-    center: shapeWithNewDimensionsCenter
-  } = (0, _shapeData.getShapeInfos)(shapeWithNewDimensions, selectionPadding);
-  const [oppTrueX, oppTrueY] = getEllipseOppositeAnchorAbsolutePosition(selectionMode.anchor, center, originalShape);
-  const [newOppTrueX, newOppTrueY] = getEllipseOppositeAnchorAbsolutePosition(selectionMode.anchor, shapeWithNewDimensionsCenter, shapeWithNewDimensions, [scaledRadiusX < 0, scaledRadiusY < 0]);
-  return { ...shapeWithNewDimensions,
-    ...{
-      translation: [originalShape.translation[0] - (newOppTrueX - oppTrueX), originalShape.translation[1] - (newOppTrueY - oppTrueY)]
-    }
-  };
-};
-
-exports.resizeEllipse = resizeEllipse;
-
-const resizeRect = function (cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding) {
-  let keepRatio = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
-  const {
-    center,
-    borders
-  } = (0, _shapeData.getShapeInfos)(originalShape, selectionPadding);
-  const cursorPositionBeforeResize = (0, _intersect.getPointPositionAfterCanvasTransformation)(cursorPosition, canvasOffset, originalShape.translation, originalShape.rotation, center);
-  const scaledWidth = selectionMode.anchor[0] === 0.5 ? originalShape.width : selectionMode.anchor[0] === 0 ? borders.x + borders.width - cursorPositionBeforeResize[0] + selectionPadding * -2 : cursorPositionBeforeResize[0] - borders.x - selectionPadding * 2;
-  const scaledHeight = selectionMode.anchor[1] === 0.5 ? originalShape.height : selectionMode.anchor[1] === 0 ? borders.y + borders.height - cursorPositionBeforeResize[1] + selectionPadding * -2 : cursorPositionBeforeResize[1] - borders.y - selectionPadding * 2;
-  const [widthWithRatio, heightWithRatio] = keepRatio ? getNormalizedSize(originalShape, scaledWidth, scaledHeight) : [scaledWidth, scaledHeight];
-  const shapeWithNewDimensions = { ...originalShape,
-    width: Math.abs(widthWithRatio),
-    height: Math.abs(heightWithRatio)
-  };
-  const {
-    center: shapeWithNewDimensionsCenter
-  } = (0, _shapeData.getShapeInfos)(shapeWithNewDimensions, selectionPadding);
-  const [oppTrueX, oppTrueY] = getRectOppositeAnchorAbsolutePosition(selectionMode.anchor, center, originalShape);
-  const [newOppTrueX, newOppTrueY] = getRectOppositeAnchorAbsolutePosition(selectionMode.anchor, shapeWithNewDimensionsCenter, shapeWithNewDimensions, [widthWithRatio < 0, heightWithRatio < 0]);
-  return { ...shapeWithNewDimensions,
-    ...{
-      translation: [originalShape.translation[0] - (newOppTrueX - oppTrueX), originalShape.translation[1] - (newOppTrueY - oppTrueY)]
-    }
-  };
-};
-
-exports.resizeRect = resizeRect;
-
-const resizeText = (ctx, cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding) => {
-  var _newRect$style$fontBo, _newRect$style, _newRect$style$fontIt, _newRect$style2, _newRect$style3;
-
-  const newRect = resizeRect(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding, true);
-  return { ...newRect,
-    fontSize: calculateTextFontSize(ctx, newRect.value, newRect.width, (_newRect$style$fontBo = (_newRect$style = newRect.style) === null || _newRect$style === void 0 ? void 0 : _newRect$style.fontBold) !== null && _newRect$style$fontBo !== void 0 ? _newRect$style$fontBo : false, (_newRect$style$fontIt = (_newRect$style2 = newRect.style) === null || _newRect$style2 === void 0 ? void 0 : _newRect$style2.fontItalic) !== null && _newRect$style$fontIt !== void 0 ? _newRect$style$fontIt : false, (_newRect$style3 = newRect.style) === null || _newRect$style3 === void 0 ? void 0 : _newRect$style3.fontFamily)
-  };
-};
-
-exports.resizeText = resizeText;
-
-const getRectOppositeAnchorAbsolutePosition = function (anchor, center, shape) {
-  let [negW, negH] = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [false, false];
-  const oppositeX = (anchor[0] === 0.5 ? shape.x + shape.width / 2 : anchor[0] === 0 ? shape.x + (negW ? 0 : shape.width) : shape.x + (negW ? shape.width : 0)) + shape.translation[0];
-  const oppositeY = (anchor[1] === 0.5 ? shape.y + shape.height / 2 : anchor[1] === 0 ? shape.y + (negH ? 0 : shape.height) : shape.y + (negH ? shape.height : 0)) + shape.translation[1];
-  return (0, _intersect.getPointPositionBeforeCanvasTransformation)([oppositeX, oppositeY], shape.translation, shape.rotation, center);
-};
-
-const getEllipseOppositeAnchorAbsolutePosition = function (anchor, center, shape) {
-  let [negW, negH] = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [false, false];
-  const oppositeX = (anchor[0] === 0.5 ? shape.x + shape.radiusX / 2 : anchor[0] === 0 ? shape.x + (negW ? -shape.radiusX : shape.radiusX) : shape.x + (negW ? shape.radiusX : -shape.radiusX)) + shape.translation[0];
-  const oppositeY = (anchor[1] === 0.5 ? shape.y + shape.radiusY / 2 : anchor[1] === 0 ? shape.y + (negH ? -shape.radiusY : shape.radiusY) : shape.y + (negH ? shape.radiusY : -shape.radiusY)) + shape.translation[1];
-  return (0, _intersect.getPointPositionBeforeCanvasTransformation)([oppositeX, oppositeY], shape.translation, shape.rotation, center);
-};
+const transformShape = (ctx, shape, cursorPosition, gridFormat, canvasOffset, selectionMode, selectionPadding, isShiftPressed) => {
+  switch (selectionMode.mode) {
+    case 'brush':
+      return (0, _brush.addNewPointToShape)(shape, cursorPosition);
 
-const getCircleOppositeAnchorAbsolutePosition = function (anchor, center, shape) {
-  let [negW, negH] = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [false, false];
-  const oppositeX = (anchor[0] === 0.5 ? shape.x : anchor[0] === 0 ? shape.x + (negW ? -shape.radius : shape.radius) : shape.x + (negW ? shape.radius : -shape.radius)) + shape.translation[0];
-  const oppositeY = (anchor[1] === 0.5 ? shape.y : anchor[1] === 0 ? shape.y + (negH ? -shape.radius : shape.radius) : shape.y + (negH ? shape.radius : -shape.radius)) + shape.translation[1];
-  return (0, _intersect.getPointPositionBeforeCanvasTransformation)([oppositeX, oppositeY], shape.translation, shape.rotation, center);
-};
+    case 'translate':
+      return (0, _shapes.translateShape)(cursorPosition, selectionMode.originalShape, selectionMode.cursorStartPosition, gridFormat);
 
-const resizePicture = (cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding) => {
-  return resizeRect(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding, true);
-};
-
-exports.resizePicture = resizePicture;
-
-const resizeShape = (ctx, shape, cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding) => {
-  if (shape.type === 'line' || shape.type === 'polygon' || shape.type === 'curve') return resizeLine(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding);else if (shape.type === 'brush') return resizeBrush(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding);else if (shape.type === 'circle') return resizeCircle(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding);else if (shape.type === 'ellipse') return resizeEllipse(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding);else if (shape.type === 'rect') return resizeRect(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding);else if (shape.type === 'square') return resizeRect(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding, true);else if (shape.type === 'text') return resizeText(ctx, cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding);else if (shape.type === 'picture') return resizePicture(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding);
-  return shape;
-};
+    case 'rotate':
+      return (0, _shapes.rotateShape)(shape, cursorPosition, selectionMode.originalShape, selectionMode.cursorStartPosition, selectionMode.center, gridFormat);
 
-exports.resizeShape = resizeShape;
+    case 'resize':
+      const roundCursorPosition = [roundForGrid(cursorPosition[0], gridFormat), roundForGrid(cursorPosition[1], gridFormat)];
+      return (0, _shapes.resizeShape)(ctx, shape, roundCursorPosition, canvasOffset, selectionMode.originalShape, selectionMode, selectionPadding, isShiftPressed);
 
-const transformShape = (ctx, shape, cursorPosition, canvasOffset, selectionMode, selectionPadding) => {
-  if (selectionMode.mode === _Mode.SelectionModeLib.brush) {
-    return paintNewPointToShape(shape, cursorPosition);
-  } else if (selectionMode.mode === _Mode.SelectionModeLib.translate) {
-    return translateShape(shape, cursorPosition, selectionMode.originalShape, selectionMode.cursorStartPosition);
-  } else if (selectionMode.mode === _Mode.SelectionModeLib.rotate) {
-    return rotateShape(shape, cursorPosition, selectionMode.originalShape, selectionMode.cursorStartPosition, selectionMode.center);
-  } else if (selectionMode.mode === _Mode.SelectionModeLib.resize) {
-    return resizeShape(ctx, shape, cursorPosition, canvasOffset, selectionMode.originalShape, selectionMode, selectionPadding);
+    default:
+      return shape;
   }
-
-  return shape;
 };
 
 exports.transformShape = transformShape;
 
-const calculateTextFontSize = function (ctx, text, maxWidth, fontBold, fontItalic) {
-  var _$flow;
-
-  let fontFamily = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : _style.STYLE_FONT_DEFAULT;
-  ctx.font = "".concat(fontItalic ? 'italic' : '', " ").concat(fontBold ? 'bold' : '', " 1px ").concat(fontFamily);
-  return (_$flow = _fp.default.flow(_fp.default.map(value => maxWidth / ctx.measureText(value).width), _fp.default.min)(text)) !== null && _$flow !== void 0 ? _$flow : _style.STYLE_FONT_SIZE_DEFAULT;
-};
-
-exports.calculateTextFontSize = calculateTextFontSize;
-
-const calculateTextWidth = function (ctx, text, fontSize, fontBold, fontItalic) {
-  var _$flow2;
-
-  let fontFamily = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : _style.STYLE_FONT_DEFAULT;
-  ctx.font = "".concat(fontItalic ? 'italic' : '', " ").concat(fontBold ? 'bold' : '', " ").concat(fontSize, "px ").concat(fontFamily);
-  return (_$flow2 = _fp.default.flow(_fp.default.map(value => ctx.measureText(value).width), _fp.default.max)(text)) !== null && _$flow2 !== void 0 ? _$flow2 : 20;
-};
-
-exports.calculateTextWidth = calculateTextWidth;
-
-const degreesToRadians = degrees => degrees * (Math.PI / 180);
-
-exports.degreesToRadians = degreesToRadians;
-
-const radiansToDegrees = radians => radians * 180 / Math.PI;
-
-exports.radiansToDegrees = radiansToDegrees;
-
 const fitContentInsideContainer = function (contentWidth, contentHeight, containerWidth, containerHeight) {
   let shouldFillContainer = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
   const contentRatio = contentWidth / contentHeight;

package/dist/utils/trigo.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.rotatePoint = exports.radiansToDegrees = exports.isPointInsideRect = exports.getAngleFromVector = exports.degreesToRadians = void 0;
+
+const degreesToRadians = degrees => degrees * (Math.PI / 180);
+
+exports.degreesToRadians = degreesToRadians;
+
+const radiansToDegrees = radians => radians * 180 / Math.PI;
+
+exports.radiansToDegrees = radiansToDegrees;
+
+const isPointInsideRect = (rect, point) => {
+  return point[0] >= rect.x && point[0] <= rect.x + rect.width && point[1] >= rect.y && point[1] <= rect.y + rect.height;
+};
+
+exports.isPointInsideRect = isPointInsideRect;
+
+const rotatePoint = _ref => {
+  let {
+    origin = [0, 0],
+    point,
+    rotation
+  } = _ref;
+  const pointFromOrigin = [point[0] - origin[0], point[1] - origin[1]];
+  const rotatedPointY = pointFromOrigin[1] * Math.cos(rotation) - pointFromOrigin[0] * Math.sin(rotation);
+  const rotatedPointX = pointFromOrigin[1] * Math.sin(rotation) + pointFromOrigin[0] * Math.cos(rotation);
+  return [rotatedPointX + origin[0], rotatedPointY + origin[1]];
+};
+
+exports.rotatePoint = rotatePoint;
+
+const getAngleFromVector = function (point1, point2) {
+  let radian = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  const radianAngle = Math.atan2(point2[1] - point1[1], point2[0] - point1[0]);
+  return radian ? radianAngle : radiansToDegrees(radianAngle);
+};
+
+exports.getAngleFromVector = getAngleFromVector;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yorab/react-paint",
-  "version": "0.6.6",
+  "version": "0.7.2",
   "keywords": [],
   "author": "Yohann Rabatel",
   "license": "MIT",
@@ -12,7 +12,8 @@
     "dist/"
   ],
   "dependencies": {
-    "@linaria/react": "^3.0.0-beta.15"
+    "@linaria/react": "3.0.0-beta.22",
+    "lodash": "^4.17.20"
   },
   "devDependencies": {
     "@babel/cli": "7.12.8",
@@ -22,10 +23,10 @@
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
     "@babel/runtime": "^7.16.7",
-    "@linaria/babel-preset": "^3.0.0-beta.15",
-    "@linaria/core": "^3.0.0-beta.15",
-    "@linaria/shaker": "^3.0.0-beta.15",
-    "@linaria/webpack-loader": "^3.0.0-beta.16",
+    "@linaria/babel-preset": "3.0.0-beta.22",
+    "@linaria/core": "3.0.0-beta.22",
+    "@linaria/webpack-loader": "3.0.0-beta.22",
+    "@linaria/shaker": "^3.0.0-beta.22",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
@@ -48,7 +49,6 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "html-webpack-plugin": "^5.5.0",
     "mini-css-extract-plugin": "^2.6.0",
-    "lodash": "^4.17.20",
     "prettier": "^2.3.2",
     "react": "18.1.0",
     "react-dom": "18.1.0",
@@ -58,7 +58,6 @@
     "webpack-dev-server": "^4.7.3"
   },
   "peerDependencies": {
-    "lodash" : "*",
     "react": "*",
     "react-dom": "*"
   },

package/dist/types/keyboard.js

@@ -1,28 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.KeyboardCommand = exports.KeyboardCode = void 0;
-let KeyboardCode;
-exports.KeyboardCode = KeyboardCode;
-
-(function (KeyboardCode) {
-  KeyboardCode["ArrowUp"] = "ArrowUp";
-  KeyboardCode["ArrowDown"] = "ArrowDown";
-  KeyboardCode["ArrowLeft"] = "ArrowLeft";
-  KeyboardCode["ArrowRight"] = "ArrowRight";
-  KeyboardCode["Delete"] = "Delete";
-  KeyboardCode["Backspace"] = "Backspace";
-  KeyboardCode["Escape"] = "Escape";
-  KeyboardCode["Z"] = "z";
-  KeyboardCode["Y"] = "y";
-})(KeyboardCode || (exports.KeyboardCode = KeyboardCode = {}));
-
-let KeyboardCommand;
-exports.KeyboardCommand = KeyboardCommand;
-
-(function (KeyboardCommand) {
-  KeyboardCommand["Copy"] = "copy";
-  KeyboardCommand["Paste"] = "paste";
-})(KeyboardCommand || (exports.KeyboardCommand = KeyboardCommand = {}));