Atlas48/grungnet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Cleanup drawing points conversion

Browse Source
This commit is contained in:
Mitchell McCaffrey 2021-08-05 13:56:04 +10:00
parent 7db02fa492
commit 0006bcdfa6
1 changed files with 6 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/konva/Drawing.tsx
View File

@ -5,6 +5,8 @@ import {
useMapWidth, useMapWidth,
} from "../../contexts/MapInteractionContext"; } from "../../contexts/MapInteractionContext";
import colors from "../../helpers/colors"; import colors from "../../helpers/colors";
import { scaleAndFlattenPoints } from "../../helpers/konva";
import Vector2 from "../../helpers/Vector2";
import { Drawing as DrawingType } from "../../types/Drawing"; import { Drawing as DrawingType } from "../../types/Drawing";
@ -15,6 +17,7 @@ type DrawingProps = {
function Drawing({ drawing, ...props }: DrawingProps) { function Drawing({ drawing, ...props }: DrawingProps) {
const mapWidth = useMapWidth(); const mapWidth = useMapWidth();
const mapHeight = useMapHeight(); const mapHeight = useMapHeight();
const mapSize = new Vector2(mapWidth, mapHeight);
const defaultProps = { const defaultProps = {
fill: colors[drawing.color] || drawing.color, fill: colors[drawing.color] || drawing.color,
@ -25,14 +28,7 @@ function Drawing({ drawing, ...props }: DrawingProps) {
if (drawing.type === "path") { if (drawing.type === "path") {
return ( return (
<Line <Line
points={drawing.data.points.reduce( points={scaleAndFlattenPoints(drawing.data.points, mapSize)}
(acc: number[], point) => [
...acc,
point.x * mapWidth,
point.y * mapHeight,
],
[]
)}
stroke={colors[drawing.color] || drawing.color} stroke={colors[drawing.color] || drawing.color}
tension={0.5} tension={0.5}
closed={drawing.pathType === "fill"} closed={drawing.pathType === "fill"}
@ -69,14 +65,7 @@ function Drawing({ drawing, ...props }: DrawingProps) {
} else if (drawing.shapeType === "triangle") { } else if (drawing.shapeType === "triangle") {
return ( return (
<Line <Line
points={drawing.data.points.reduce( points={scaleAndFlattenPoints(drawing.data.points, mapSize)}
(acc: number[], point) => [
...acc,
point.x * mapWidth,
point.y * mapHeight,
],
[]
)}
closed={true} closed={true}
{...defaultProps} {...defaultProps}
{...props} {...props}
@ -85,14 +74,7 @@ function Drawing({ drawing, ...props }: DrawingProps) {
} else if (drawing.shapeType === "line") { } else if (drawing.shapeType === "line") {
return ( return (
<Line <Line
points={drawing.data.points.reduce( points={scaleAndFlattenPoints(drawing.data.points, mapSize)}
(acc: number[], point) => [
...acc,
point.x * mapWidth,
point.y * mapHeight,
],
[]
)}
stroke={colors[drawing.color] || drawing.color} stroke={colors[drawing.color] || drawing.color}
lineCap="round" lineCap="round"
{...defaultProps} {...defaultProps}