35 lines
1.0 KiB
TypeScript
35 lines
1.0 KiB
TypeScript
import * as React from "react";
|
|
import { MapTransformProps } from "../interfaces";
|
|
import { transformXY } from "../util";
|
|
import { DrawnWeedPayl } from "../../interfaces";
|
|
|
|
export interface DrawnWeedProps {
|
|
mapTransformProps: MapTransformProps;
|
|
data: DrawnWeedPayl | undefined;
|
|
}
|
|
|
|
export function DrawnWeed(props: DrawnWeedProps) {
|
|
const ID = "current-weed";
|
|
const { data, mapTransformProps } = props;
|
|
if (!data) { return <g id={ID} />; }
|
|
const { cx, cy, r } = data;
|
|
const color = data.color || "red";
|
|
const { qx, qy } = transformXY(cx, cy, mapTransformProps);
|
|
const stopOpacity = ["gray", "pink", "orange"].includes(color) ? 0.5 : 0.25;
|
|
return <g id={ID}>
|
|
<defs>
|
|
<radialGradient id={"DrawnWeedGradient"}>
|
|
<stop offset="90%" stopColor={color} stopOpacity={stopOpacity} />
|
|
<stop offset="100%" stopColor={color} stopOpacity={0} />
|
|
</radialGradient>
|
|
</defs>
|
|
|
|
<circle
|
|
id={"weed-radius"}
|
|
cx={qx}
|
|
cy={qy}
|
|
r={r}
|
|
fill={"url(#DrawnWeedGradient)"} />
|
|
</g>;
|
|
}
|