drawing-board/src/board/components/poi/svg-poi.ts

import { Poi, PoiData } from "./poi";
import {
  getSVGProps,
  PathsShapeAct,
  pathsToShapeAct,
} from "../../core/helper/svg";
import { EntityProps } from "../../core/base/entity";
import konva from "konva";

export type SVGPoiData = PoiData & {
  type: string;
};

export class SVGPoi extends Poi<konva.Group> {
  private act: PathsShapeAct;

  constructor(props: EntityProps<SVGPoiData>) {
    const shape = new konva.Group();
    super({ ...props, shape });

    getSVGProps(props.attrib.type).then((paths) => {
      this.act = pathsToShapeAct(paths, undefined, true);
      shape.add(this.act.shape);

      this.setPointerStyle({
        common: this.act.common,
        hover: () => this.act.setFill("blue"),
        focus: () => this.act.setFill("red"),
        drag: () => this.act.setFill("#0cff00"),
      });
    });
    this.enableDrag();
  }
}