39 lines
829 B
TypeScript
39 lines
829 B
TypeScript
import { Indicator, HoverIndicator } from "./indicator"
|
|
import { DotShape, ShapeProps } from "types"
|
|
import ShapeGroup from "./shape-g"
|
|
|
|
const dotRadius = 4
|
|
|
|
function BaseDot({
|
|
fill = "#999",
|
|
stroke = "none",
|
|
strokeWidth = 1,
|
|
}: ShapeProps<DotShape>) {
|
|
return (
|
|
<>
|
|
<HoverIndicator
|
|
as="circle"
|
|
cx={dotRadius}
|
|
cy={dotRadius}
|
|
r={dotRadius - 1}
|
|
/>
|
|
<circle
|
|
cx={dotRadius}
|
|
cy={dotRadius}
|
|
r={dotRadius - strokeWidth / 2}
|
|
fill={fill}
|
|
stroke={stroke}
|
|
strokeWidth={strokeWidth}
|
|
/>
|
|
<Indicator as="circle" cx={dotRadius} cy={dotRadius} r={dotRadius - 1} />
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default function Dot({ id, point }: DotShape) {
|
|
return (
|
|
<ShapeGroup id={id} point={point}>
|
|
<BaseDot />
|
|
</ShapeGroup>
|
|
)
|
|
}
|