import { Graph, Grid, Marker, PolyLine, useCoord, Vec2ish } from "@coord/graph";


export default function MyGraph() {
  const pathOfLove: Vec2ish[] = [
    [0, -4],
    [4, -1],
    [4, 2],
    [2, 4],
    [0, 2],
    [-2, 4],
    [-4, 2],
    [-4, -1],
    [0, -4],
  ];
  return (
    <Graph height={400} width="100%">
      <Grid />
      <PolyLine points={pathOfLove} strokeColor={2} strokeDasharray={5} />
      {pathOfLove.map((p, i) => (
        <Marker key={i} position={p} label={"❤️"} color={2} size={25} />
      ))}
    </Graph>
  );
}

import {
  Graph,
  Grid,
  Marker,
  PolyLine,
  Text,
  Vec2,
  useCoordState,
} from "@coord/graph";


export default function MyGraph() {
  const [p0, setP0] = useCoordState([-4, -3]);
  const [p1, setP1] = useCoordState([4, -3]);
  const [p2, setP2] = useCoordState([0, 4]);
  return (
    <Graph height={400} width="100%">
      <Grid />
      <PolyLine
        points={[p0, p1, p2, p0]}
        strokeColor={1}
        strokeDasharray={5}
        fill={"#00000088"}
      />
      <Marker position={p0} onChange={setP0} label={"🌚"} />
      <Marker position={p1} onChange={setP1} label={"🌝"} />
      <Marker position={p2} onChange={setP2} label={"🌞"} color={"body"} />


      <Text
        position={p0
          .add(p1)
          .add(p2)
          .scale(1 / 3)}
        fontSize={14}
      >
        Drag us!
      </Text>
    </Graph>
  );
}