@yorab/react-paint 0.6.4 → 0.7.1

package/dist/utils/shapes/curve.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getCurveBorder = exports.drawCurve = exports.createCurve = void 0;
+
+var _fp = _interopRequireDefault(require("lodash/fp"));
+
+var _canvas = require("../canvas");
+
+var _polygon = require("./polygon");
+
+const createCurve = (shape, cursorPosition) => {
+  return {
+    toolId: shape.id,
+    type: shape.type,
+    id: _fp.default.uniqueId("".concat(shape.type, "_")),
+    points: _fp.default.flow(_fp.default.range(0), _fp.default.map(() => cursorPosition))(shape.settings.pointsCount.default),
+    rotation: 0,
+    style: {
+      globalAlpha: shape.settings.opacity.default,
+      fillColor: shape.settings.fillColor.default,
+      strokeColor: shape.settings.strokeColor.default,
+      lineWidth: shape.settings.lineWidth.default,
+      lineDash: shape.settings.lineDash.default,
+      pointsCount: shape.settings.pointsCount.default
+    }
+  };
+};
+
+exports.createCurve = createCurve;
+
+const drawCurve = (ctx, curve) => {
+  var _curve$style, _curve$style2;
+
+  if (curve.points.length < 3) return;
+  (0, _canvas.updateCanvasContext)(ctx, curve.style);
+  if (ctx.globalAlpha === 0) return;
+  ctx.beginPath();
+  ctx.moveTo(...curve.points[0]);
+
+  for (let i = 1; i < curve.points.length - 1; i++) {
+    ctx.quadraticCurveTo(...curve.points[i], curve.points.length - 2 === i ? curve.points[i + 1][0] : (curve.points[i + 1][0] - curve.points[i][0]) / 2 + curve.points[i][0], curve.points.length - 2 === i ? curve.points[i + 1][1] : (curve.points[i + 1][1] - curve.points[i][1]) / 2 + curve.points[i][1]);
+  }
+
+  ((_curve$style = curve.style) === null || _curve$style === void 0 ? void 0 : _curve$style.fillColor) !== 'transparent' && ctx.fill();
+  ((_curve$style2 = curve.style) === null || _curve$style2 === void 0 ? void 0 : _curve$style2.strokeColor) !== 'transparent' && ctx.stroke();
+};
+
+exports.drawCurve = drawCurve;
+const getCurveBorder = _polygon.getPolygonBorder;
+exports.getCurveBorder = getCurveBorder;

package/dist/utils/shapes/default.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.drawSelectionDefault = void 0;
+
+var _shapes = require("../../constants/shapes");
+
+var _ = require(".");
+
+var _circle = require("./circle");
+
+var _line = require("./line");
+
+var _rectangle = require("./rectangle");
+
+const drawSelectionDefault = _ref => {
+  let {
+    ctx,
+    shape,
+    withAnchors,
+    selectionPadding,
+    selectionWidth,
+    selectionColor,
+    currentScale = 1
+  } = _ref;
+  const {
+    borders
+  } = (0, _.getShapeInfos)(shape, selectionPadding / currentScale);
+  (0, _rectangle.drawRect)(ctx, { ...borders,
+    style: {
+      fillColor: 'transparent',
+      strokeColor: selectionColor,
+      lineWidth: selectionWidth / currentScale
+    }
+  });
+  if (!withAnchors || shape.locked) return;
+  (0, _line.drawLine)(ctx, {
+    points: [[borders.x + borders.width / 2, borders.y], [borders.x + borders.width / 2, borders.y - _shapes.SELECTION_ANCHOR_SIZE / 2 - _shapes.SELECTION_ROTATED_ANCHOR_POSITION / currentScale]],
+    style: {
+      fillColor: 'transparent',
+      strokeColor: selectionColor,
+      lineWidth: selectionWidth / currentScale
+    }
+  });
+
+  for (const anchorPosition of _shapes.SELECTION_RESIZE_ANCHOR_POSITIONS) {
+    (0, _circle.drawCircle)(ctx, {
+      x: borders.x + borders.width * anchorPosition[0],
+      y: borders.y + borders.height * anchorPosition[1],
+      radius: _shapes.SELECTION_ANCHOR_SIZE / 2 / currentScale,
+      style: {
+        fillColor: 'rgb(255,255,255)',
+        strokeColor: 'rgb(150,150,150)',
+        lineWidth: selectionWidth / currentScale
+      }
+    });
+  }
+
+  (0, _circle.drawCircle)(ctx, {
+    x: borders.x + borders.width / 2,
+    y: borders.y - _shapes.SELECTION_ANCHOR_SIZE / 2 - _shapes.SELECTION_ROTATED_ANCHOR_POSITION / currentScale,
+    radius: _shapes.SELECTION_ANCHOR_SIZE / 2 / currentScale,
+    style: {
+      fillColor: 'rgb(255,255,255)',
+      strokeColor: 'rgb(150,150,150)',
+      lineWidth: selectionWidth / currentScale
+    }
+  });
+};
+
+exports.drawSelectionDefault = drawSelectionDefault;

package/dist/utils/shapes/ellipse.js

@@ -0,0 +1,101 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.resizeEllipse = exports.getEllipseBorder = exports.drawEllipse = exports.createEllipse = void 0;
+
+var _fp = _interopRequireDefault(require("lodash/fp"));
+
+var _canvas = require("../canvas");
+
+var _intersect = require("../intersect");
+
+var _transform = require("../transform");
+
+var _2 = require(".");
+
+const createEllipse = (shape, cursorPosition) => {
+  return {
+    toolId: shape.id,
+    type: shape.type,
+    id: _fp.default.uniqueId("".concat(shape.type, "_")),
+    x: cursorPosition[0],
+    y: cursorPosition[1],
+    radiusX: 1,
+    radiusY: 1,
+    rotation: 0,
+    style: {
+      globalAlpha: shape.settings.opacity.default,
+      fillColor: shape.settings.fillColor.default,
+      strokeColor: shape.settings.strokeColor.default,
+      lineWidth: shape.settings.lineWidth.default,
+      lineDash: shape.settings.lineDash.default
+    }
+  };
+};
+
+exports.createEllipse = createEllipse;
+
+const drawEllipse = (ctx, ellipse) => {
+  var _ellipse$style, _ellipse$style2;
+
+  (0, _canvas.updateCanvasContext)(ctx, ellipse.style);
+  if (ctx.globalAlpha === 0) return;
+  ctx.beginPath();
+  ctx.ellipse(ellipse.x, ellipse.y, ellipse.radiusX, ellipse.radiusY, 0, 0, 2 * Math.PI);
+  ((_ellipse$style = ellipse.style) === null || _ellipse$style === void 0 ? void 0 : _ellipse$style.fillColor) !== 'transparent' && ctx.fill();
+  ((_ellipse$style2 = ellipse.style) === null || _ellipse$style2 === void 0 ? void 0 : _ellipse$style2.strokeColor) !== 'transparent' && ctx.stroke();
+};
+
+exports.drawEllipse = drawEllipse;
+
+const getEllipseBorder = (ellipse, selectionPadding) => {
+  return {
+    x: ellipse.x - ellipse.radiusX - selectionPadding,
+    width: (ellipse.radiusX + selectionPadding) * 2,
+    y: ellipse.y - ellipse.radiusY - selectionPadding,
+    height: (ellipse.radiusY + selectionPadding) * 2
+  };
+};
+
+exports.getEllipseBorder = getEllipseBorder;
+
+const getEllipseOppositeAnchorAbsolutePosition = function (anchor, center, shape, canvasOffset) {
+  let [negW, negH] = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [false, false];
+  const oppositeX = anchor[0] === 0.5 ? shape.x : anchor[0] === 0 ? shape.x + (negW ? -shape.radiusX : shape.radiusX) : shape.x + (negW ? shape.radiusX : -shape.radiusX);
+  const oppositeY = anchor[1] === 0.5 ? shape.y : anchor[1] === 0 ? shape.y + (negH ? -shape.radiusY : shape.radiusY) : shape.y + (negH ? shape.radiusY : -shape.radiusY);
+  return (0, _intersect.getPointPositionBeforeCanvasTransformation)([oppositeX, oppositeY], shape.rotation, center, canvasOffset);
+};
+
+const resizeEllipse = function (cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding) {
+  let keepRatio = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
+  const {
+    center,
+    borders
+  } = (0, _2.getShapeInfos)(originalShape, selectionPadding);
+  const cursorPositionBeforeResize = (0, _intersect.getPointPositionAfterCanvasTransformation)(cursorPosition, originalShape.rotation, center, canvasOffset);
+  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 [radiusXWithRatio, radiusYWithRatio] = keepRatio ? (0, _transform.getNormalizedSize)(originalShape.radiusX, originalShape.radiusY, scaledRadiusX, scaledRadiusY) : [scaledRadiusX, scaledRadiusY];
+  const shapeWithNewDimensions = { ...originalShape,
+    ...{
+      radiusX: Math.abs(radiusXWithRatio),
+      radiusY: Math.abs(radiusYWithRatio)
+    }
+  };
+  const {
+    center: shapeWithNewDimensionsCenter
+  } = (0, _2.getShapeInfos)(shapeWithNewDimensions, selectionPadding);
+  const [oppTrueX, oppTrueY] = getEllipseOppositeAnchorAbsolutePosition(selectionMode.anchor, center, originalShape, canvasOffset);
+  const [newOppTrueX, newOppTrueY] = getEllipseOppositeAnchorAbsolutePosition(selectionMode.anchor, shapeWithNewDimensionsCenter, shapeWithNewDimensions, canvasOffset, [radiusXWithRatio < 0, radiusYWithRatio < 0]);
+  return { ...shapeWithNewDimensions,
+    x: shapeWithNewDimensions.x - (newOppTrueX - oppTrueX),
+    y: shapeWithNewDimensions.y - (newOppTrueY - oppTrueY)
+  };
+};
+
+exports.resizeEllipse = resizeEllipse;

package/dist/utils/shapes/grid.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.drawGrid = void 0;
+
+var _style = require("../../constants/style");
+
+const drawGrid = (ctx, width, height, responsiveScale, canvasOffset, gridFormat) => {
+  ctx.strokeStyle = 'rgb(220,220,220)';
+  ctx.lineWidth = 1;
+  ctx.save();
+  ctx.scale(responsiveScale, responsiveScale);
+  ctx.beginPath();
+  const step = _style.GRID_STEP[gridFormat - 1];
+  const horizontalOffset = -canvasOffset[0] % step;
+  const verticalOffset = -canvasOffset[1] % step;
+  const nbCols = Math.ceil(width / responsiveScale / step);
+  const nbRows = Math.ceil(height / responsiveScale / step);
+
+  for (let i = 0; i < nbCols; i++) {
+    ctx.moveTo(horizontalOffset + (i + 1) * step, verticalOffset);
+    ctx.lineTo(horizontalOffset + (i + 1) * step, verticalOffset + height / responsiveScale);
+  }
+
+  for (let i = 0; i < nbRows; i++) {
+    ctx.moveTo(horizontalOffset, verticalOffset + (i + 1) * step);
+    ctx.lineTo(horizontalOffset + width / responsiveScale, verticalOffset + (i + 1) * step);
+  }
+
+  ctx.stroke();
+  ctx.restore();
+};
+
+exports.drawGrid = drawGrid;

package/dist/utils/shapes/index.js

@@ -0,0 +1,341 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.translateShape = exports.rotateShape = exports.resizeShape = exports.getShapeInfos = exports.drawShapeSelection = exports.drawShape = exports.createShape = exports.copyShape = void 0;
+
+var _fp = _interopRequireDefault(require("lodash/fp"));
+
+var _transform = require("../transform");
+
+var _brush = require("./brush");
+
+var _line = require("./line");
+
+var _polygon = require("./polygon");
+
+var _curve = require("./curve");
+
+var _rectangle = require("./rectangle");
+
+var _text = require("./text");
+
+var _ellipse = require("./ellipse");
+
+var _circle = require("./circle");
+
+var _picture = require("./picture");
+
+var _style = require("../../constants/style");
+
+var _default = require("./default");
+
+var _canvas = require("../canvas");
+
+const createShape = (ctx, shape, cursorPosition, gridFormat) => {
+  const roundCursorPosition = [(0, _transform.roundForGrid)(cursorPosition[0], gridFormat), (0, _transform.roundForGrid)(cursorPosition[1], gridFormat)];
+
+  switch (shape.type) {
+    case 'brush':
+      return (0, _brush.createBrush)(shape, roundCursorPosition);
+
+    case 'line':
+      return (0, _line.createLine)(shape, roundCursorPosition);
+
+    case 'polygon':
+      return (0, _polygon.createPolygon)(shape, roundCursorPosition);
+
+    case 'curve':
+      return (0, _curve.createCurve)(shape, roundCursorPosition);
+
+    case 'rect':
+    case 'square':
+      return (0, _rectangle.createRectangle)(shape, roundCursorPosition);
+
+    case 'text':
+      return (0, _text.createText)(ctx, shape, roundCursorPosition);
+
+    case 'ellipse':
+      return (0, _ellipse.createEllipse)(shape, roundCursorPosition);
+
+    case 'circle':
+      return (0, _circle.createCircle)(shape, roundCursorPosition);
+  }
+};
+
+exports.createShape = createShape;
+
+const drawShape = (ctx, shape, responsiveScale, canvasOffset, selectionPadding) => {
+  if (shape.visible === false) return;
+  const {
+    center
+  } = getShapeInfos(shape, selectionPadding);
+  (0, _canvas.transformCanvas)(ctx, responsiveScale, canvasOffset, shape.rotation, center);
+
+  switch (shape.type) {
+    case 'brush':
+      (0, _brush.drawBrush)(ctx, shape);
+      break;
+
+    case 'text':
+      (0, _text.drawText)(ctx, shape);
+      break;
+
+    case 'line':
+      (0, _line.drawLine)(ctx, shape);
+      break;
+
+    case 'polygon':
+      (0, _polygon.drawPolygon)(ctx, shape);
+      break;
+
+    case 'curve':
+      (0, _curve.drawCurve)(ctx, shape);
+      break;
+
+    case 'circle':
+      (0, _circle.drawCircle)(ctx, shape);
+      break;
+
+    case 'ellipse':
+      (0, _ellipse.drawEllipse)(ctx, shape);
+      break;
+
+    case 'rect':
+    case 'square':
+      (0, _rectangle.drawRect)(ctx, shape);
+      break;
+
+    case 'picture':
+      (0, _picture.drawPicture)(ctx, shape);
+      break;
+  }
+
+  ctx.restore();
+};
+
+exports.drawShape = drawShape;
+
+const getShapeBorders = (marker, selectionPadding) => {
+  switch (marker.type) {
+    case 'brush':
+      return (0, _brush.getBrushBorder)(marker, selectionPadding);
+
+    case 'line':
+      return (0, _line.getLineBorder)(marker, selectionPadding);
+
+    case 'polygon':
+      return (0, _polygon.getPolygonBorder)(marker, selectionPadding);
+
+    case 'curve':
+      return (0, _curve.getCurveBorder)(marker, selectionPadding);
+
+    case 'circle':
+      return (0, _circle.getCircleBorder)(marker, selectionPadding);
+
+    case 'ellipse':
+      return (0, _ellipse.getEllipseBorder)(marker, selectionPadding);
+
+    case 'rect':
+    case 'square':
+    default:
+      return (0, _rectangle.getRectBorder)(marker, selectionPadding);
+
+    case 'text':
+      return (0, _text.getTextBorder)(marker, selectionPadding);
+
+    case 'picture':
+      return (0, _picture.getPictureBorder)(marker, selectionPadding);
+  }
+};
+
+const getShapeCenter = borders => {
+  return [borders.x + borders.width / 2, borders.y + borders.height / 2];
+};
+
+const getShapeInfos = (shape, selectionPadding) => {
+  const borders = getShapeBorders(shape, selectionPadding);
+  const center = getShapeCenter(borders);
+  return {
+    borders,
+    center
+  };
+};
+
+exports.getShapeInfos = getShapeInfos;
+
+const rotateShape = (shape, cursorPosition, originalShape, originalCursorPosition, shapeCenter, gridFormat) => {
+  const p1x = shapeCenter[0] - originalCursorPosition[0];
+  const p1y = shapeCenter[1] - originalCursorPosition[1];
+  const p2x = shapeCenter[0] - cursorPosition[0];
+  const p2y = shapeCenter[1] - cursorPosition[1];
+  const rotation = originalShape.rotation + Math.atan2(p2y, p2x) - Math.atan2(p1y, p1x);
+  return { ...shape,
+    ...{
+      rotation: gridFormat ? rotation + Math.PI / _style.GRID_ROTATION_STEPS / 2 - (rotation + Math.PI / _style.GRID_ROTATION_STEPS / 2) % (Math.PI / _style.GRID_ROTATION_STEPS) : rotation
+    }
+  };
+};
+
+exports.rotateShape = rotateShape;
+
+const resizeShape = (ctx, shape, cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding, isShiftPressed) => {
+  switch (shape.type) {
+    case 'line':
+    case 'polygon':
+    case 'curve':
+      return (0, _line.resizeLine)(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding);
+
+    case 'brush':
+      return (0, _brush.resizeBrush)(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding, isShiftPressed);
+
+    case 'circle':
+      return (0, _circle.resizeCircle)(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding);
+
+    case 'ellipse':
+      return (0, _ellipse.resizeEllipse)(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding, isShiftPressed);
+
+    case 'rect':
+    case 'square':
+      return (0, _rectangle.resizeRect)(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding, shape.type === 'square' || isShiftPressed);
+
+    case 'text':
+      return (0, _text.resizeText)(ctx, cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding);
+
+    case 'picture':
+      return (0, _picture.resizePicture)(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding, !isShiftPressed);
+  }
+};
+
+exports.resizeShape = resizeShape;
+
+const translateShape = (cursorPosition, originalShape, originalCursorPosition, gridFormat) => {
+  switch (originalShape.type) {
+    case 'rect':
+    case 'square':
+    case 'ellipse':
+    case 'circle':
+    case 'picture':
+    default:
+      return { ...originalShape,
+        x: (0, _transform.roundForGrid)(originalShape.x + cursorPosition[0] - originalCursorPosition[0], gridFormat),
+        y: (0, _transform.roundForGrid)(originalShape.y + cursorPosition[1] - originalCursorPosition[1], gridFormat)
+      };
+
+    case 'line':
+      return { ...originalShape,
+        points: originalShape.points.map(_ref => {
+          let [x, y] = _ref;
+          return [(0, _transform.roundForGrid)(x + cursorPosition[0] - originalCursorPosition[0], gridFormat), (0, _transform.roundForGrid)(y + cursorPosition[1] - originalCursorPosition[1], gridFormat)];
+        })
+      };
+
+    case 'polygon':
+    case 'curve':
+      if (gridFormat) {
+        const {
+          borders
+        } = getShapeInfos(originalShape, 0);
+        const translationX = (0, _transform.roundForGrid)(borders.x + cursorPosition[0] - originalCursorPosition[0], gridFormat) - borders.x;
+        const translationY = (0, _transform.roundForGrid)(borders.y + cursorPosition[1] - originalCursorPosition[1], gridFormat) - borders.y;
+        return { ...originalShape,
+          points: originalShape.points.map(_ref2 => {
+            let [x, y] = _ref2;
+            return [x + translationX, y + translationY];
+          })
+        };
+      } else {
+        return { ...originalShape,
+          points: originalShape.points.map(_ref3 => {
+            let [x, y] = _ref3;
+            return [(0, _transform.roundForGrid)(x + cursorPosition[0] - originalCursorPosition[0], gridFormat), (0, _transform.roundForGrid)(y + cursorPosition[1] - originalCursorPosition[1], gridFormat)];
+          })
+        };
+      }
+
+    case 'brush':
+      if (gridFormat) {
+        const {
+          borders
+        } = getShapeInfos(originalShape, 0);
+        const translationX = (0, _transform.roundForGrid)(borders.x + cursorPosition[0] - originalCursorPosition[0], gridFormat) - borders.x;
+        const translationY = (0, _transform.roundForGrid)(borders.y + cursorPosition[1] - originalCursorPosition[1], gridFormat) - borders.y;
+        return { ...originalShape,
+          points: originalShape.points.map(coord => coord.map(_ref4 => {
+            let [x, y] = _ref4;
+            return [x + translationX, y + translationY];
+          }))
+        };
+      } else {
+        return { ...originalShape,
+          points: originalShape.points.map(coord => coord.map(_ref5 => {
+            let [x, y] = _ref5;
+            return [x + cursorPosition[0] - originalCursorPosition[0], y + cursorPosition[1] - originalCursorPosition[1]];
+          }))
+        };
+      }
+
+  }
+};
+
+exports.translateShape = translateShape;
+
+const drawShapeSelection = _ref6 => {
+  let {
+    ctx,
+    shape,
+    scaleRatio = 1,
+    canvasOffset,
+    selectionPadding,
+    selectionWidth,
+    selectionColor,
+    withAnchors = true
+  } = _ref6;
+  const {
+    center
+  } = getShapeInfos(shape, selectionPadding);
+  (0, _canvas.transformCanvas)(ctx, scaleRatio, canvasOffset, shape.rotation, center);
+
+  switch (shape.type) {
+    case 'polygon':
+    case 'line':
+    case 'curve':
+      (0, _line.drawLineSelection)({
+        ctx,
+        shape,
+        withAnchors,
+        selectionPadding,
+        selectionWidth,
+        selectionColor,
+        currentScale: scaleRatio
+      });
+      break;
+
+    default:
+      (0, _default.drawSelectionDefault)({
+        ctx,
+        shape,
+        withAnchors,
+        selectionPadding,
+        selectionWidth,
+        selectionColor,
+        currentScale: scaleRatio
+      });
+      break;
+  }
+
+  ctx.restore();
+};
+
+exports.drawShapeSelection = drawShapeSelection;
+
+const copyShape = (shape, gridFormat) => {
+  return { ...translateShape([20, 20], shape, [0, 0], gridFormat),
+    id: _fp.default.uniqueId("".concat(shape.type, "_"))
+  };
+};
+
+exports.copyShape = copyShape;