diff --git a/src/helpers/drawing.js b/src/helpers/drawing.js index 4be7c41..0ff64d0 100644 --- a/src/helpers/drawing.js +++ b/src/helpers/drawing.js @@ -2,7 +2,6 @@ import simplify from "simplify-js"; import * as Vector2 from "./vector2"; import { toDegrees } from "./shared"; -import colors from "./colors"; const snappingThreshold = 1 / 5; export function getBrushPositionForTool( @@ -149,200 +148,6 @@ export function getStrokeWidth(multiplier, gridSize, mapWidth, mapHeight) { return Vector2.min(gridPixelSize) * defaultStrokeWidth * multiplier; } -export function shapeHasFill(shape) { - return ( - shape.type === "fog" || - shape.type === "shape" || - (shape.type === "path" && shape.pathType === "fill") - ); -} - -export function pointsToQuadraticBezier(points) { - const quadraticPoints = []; - - // Draw a smooth curve between the points where each control point - // is the current point in the array and the next point is the center of - // the current point and the next point - for (let i = 1; i < points.length - 2; i++) { - const start = points[i - 1]; - const controlPoint = points[i]; - const next = points[i + 1]; - const end = Vector2.divide(Vector2.add(controlPoint, next), 2); - - quadraticPoints.push({ start, controlPoint, end }); - } - // Curve through the last two points - quadraticPoints.push({ - start: points[points.length - 2], - controlPoint: points[points.length - 1], - end: points[points.length - 1], - }); - - return quadraticPoints; -} - -export function pointsToPathSmooth(points, close, canvasWidth, canvasHeight) { - const path = new Path2D(); - if (points.length < 2) { - return path; - } - path.moveTo(points[0].x * canvasWidth, points[0].y * canvasHeight); - - const quadraticPoints = pointsToQuadraticBezier(points); - for (let quadPoint of quadraticPoints) { - const pointScaled = Vector2.multiply(quadPoint.end, { - x: canvasWidth, - y: canvasHeight, - }); - const controlScaled = Vector2.multiply(quadPoint.controlPoint, { - x: canvasWidth, - y: canvasHeight, - }); - path.quadraticCurveTo( - controlScaled.x, - controlScaled.y, - pointScaled.x, - pointScaled.y - ); - } - - if (close) { - path.closePath(); - } - return path; -} - -export function pointsToPathSharp(points, close, canvasWidth, canvasHeight) { - const path = new Path2D(); - path.moveTo(points[0].x * canvasWidth, points[0].y * canvasHeight); - for (let point of points.slice(1)) { - path.lineTo(point.x * canvasWidth, point.y * canvasHeight); - } - if (close) { - path.closePath(); - } - - return path; -} - -export function circleToPath(x, y, radius, canvasWidth, canvasHeight) { - const path = new Path2D(); - const minSide = canvasWidth < canvasHeight ? canvasWidth : canvasHeight; - path.arc( - x * canvasWidth, - y * canvasHeight, - radius * minSide, - 0, - 2 * Math.PI, - true - ); - return path; -} - -export function rectangleToPath( - x, - y, - width, - height, - canvasWidth, - canvasHeight -) { - const path = new Path2D(); - path.rect( - x * canvasWidth, - y * canvasHeight, - width * canvasWidth, - height * canvasHeight - ); - return path; -} - -export function shapeToPath(shape, canvasWidth, canvasHeight) { - const data = shape.data; - if (shape.type === "path") { - return pointsToPathSmooth( - data.points, - shape.pathType === "fill", - canvasWidth, - canvasHeight - ); - } else if (shape.type === "shape") { - if (shape.shapeType === "circle") { - return circleToPath( - data.x, - data.y, - data.radius, - canvasWidth, - canvasHeight - ); - } else if (shape.shapeType === "rectangle") { - return rectangleToPath( - data.x, - data.y, - data.width, - data.height, - canvasWidth, - canvasHeight - ); - } else if (shape.shapeType === "triangle") { - return pointsToPathSharp(data.points, true, canvasWidth, canvasHeight); - } - } else if (shape.type === "fog") { - return pointsToPathSharp( - shape.data.points, - true, - canvasWidth, - canvasHeight - ); - } -} - -export function isShapeHovered( - shape, - context, - hoverPosition, - canvasWidth, - canvasHeight -) { - const path = shapeToPath(shape, canvasWidth, canvasHeight); - if (shapeHasFill(shape)) { - return context.isPointInPath( - path, - hoverPosition.x * canvasWidth, - hoverPosition.y * canvasHeight - ); - } else { - return context.isPointInStroke( - path, - hoverPosition.x * canvasWidth, - hoverPosition.y * canvasHeight - ); - } -} - -export function drawShape(shape, context, gridSize, canvasWidth, canvasHeight) { - const path = shapeToPath(shape, canvasWidth, canvasHeight); - const color = colors[shape.color] || shape.color; - const fill = shapeHasFill(shape); - - context.globalAlpha = shape.blend ? 0.5 : 1.0; - context.fillStyle = color; - context.strokeStyle = color; - if (shape.strokeWidth > 0) { - context.lineCap = "round"; - context.lineWidth = getStrokeWidth( - shape.strokeWidth, - gridSize, - canvasWidth, - canvasHeight - ); - context.stroke(path); - } - if (fill) { - context.fill(path); - } -} - const defaultSimplifySize = 1 / 100; export function simplifyPoints(points, gridSize, scale) { return simplify( @@ -350,12 +155,3 @@ export function simplifyPoints(points, gridSize, scale) { (Vector2.min(gridSize) * defaultSimplifySize) / scale ); } - -export function getRelativePointerPosition(event, container) { - if (container) { - const containerRect = container.getBoundingClientRect(); - const x = (event.clientX - containerRect.x) / containerRect.width; - const y = (event.clientY - containerRect.y) / containerRect.height; - return { x, y }; - } -}