93 lines
2.5 KiB
TypeScript
93 lines
2.5 KiB
TypeScript
import Konva from "konva";
|
|
import { Circle, Line, Rect } from "react-konva";
|
|
import {
|
|
useMapHeight,
|
|
useMapWidth,
|
|
} from "../../contexts/MapInteractionContext";
|
|
import colors from "../../helpers/colors";
|
|
import { scaleAndFlattenPoints } from "../../helpers/konva";
|
|
import Vector2 from "../../helpers/Vector2";
|
|
|
|
import { Drawing as DrawingType } from "../../types/Drawing";
|
|
|
|
type DrawingProps = {
|
|
drawing: DrawingType;
|
|
} & Konva.ShapeConfig;
|
|
|
|
function Drawing({ drawing, ...props }: DrawingProps) {
|
|
const mapWidth = useMapWidth();
|
|
const mapHeight = useMapHeight();
|
|
const mapSize = new Vector2(mapWidth, mapHeight);
|
|
|
|
const defaultProps = {
|
|
fill: colors[drawing.color] || drawing.color,
|
|
stroke: colors[drawing.color] || drawing.color,
|
|
opacity: drawing.blend ? 0.5 : 1,
|
|
id: drawing.id,
|
|
};
|
|
|
|
if (drawing.type === "path") {
|
|
return (
|
|
<Line
|
|
points={scaleAndFlattenPoints(drawing.data.points, mapSize)}
|
|
tension={0.5}
|
|
closed={drawing.pathType === "fill"}
|
|
fillEnabled={drawing.pathType === "fill"}
|
|
lineCap="round"
|
|
lineJoin="round"
|
|
{...defaultProps}
|
|
{...props}
|
|
/>
|
|
);
|
|
} else if (drawing.type === "shape") {
|
|
if (drawing.shapeType === "rectangle") {
|
|
return (
|
|
<Rect
|
|
x={drawing.data.x * mapWidth}
|
|
y={drawing.data.y * mapHeight}
|
|
width={drawing.data.width * mapWidth}
|
|
height={drawing.data.height * mapHeight}
|
|
fillEnabled={props.strokeWidth === 0}
|
|
{...defaultProps}
|
|
{...props}
|
|
/>
|
|
);
|
|
} else if (drawing.shapeType === "circle") {
|
|
const minSide = mapWidth < mapHeight ? mapWidth : mapHeight;
|
|
return (
|
|
<Circle
|
|
x={drawing.data.x * mapWidth}
|
|
y={drawing.data.y * mapHeight}
|
|
radius={drawing.data.radius * minSide}
|
|
fillEnabled={props.strokeWidth === 0}
|
|
{...defaultProps}
|
|
{...props}
|
|
/>
|
|
);
|
|
} else if (drawing.shapeType === "triangle") {
|
|
return (
|
|
<Line
|
|
points={scaleAndFlattenPoints(drawing.data.points, mapSize)}
|
|
closed={true}
|
|
fillEnabled={props.strokeWidth === 0}
|
|
{...defaultProps}
|
|
{...props}
|
|
/>
|
|
);
|
|
} else if (drawing.shapeType === "line") {
|
|
return (
|
|
<Line
|
|
points={scaleAndFlattenPoints(drawing.data.points, mapSize)}
|
|
lineCap="round"
|
|
{...defaultProps}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
export default Drawing;
|