4pc/src/view/map/board/polygon.ts

import {
  WholeLinePolygon,
  WholeLinePolygonAttrib,
  WholeLinePolygonProps,
} from "drawing-board";
import { Group } from "konva/lib/Group";
import { Line } from "konva/lib/shapes/Line";
import { Polygons } from "./polygons";

const actShapeFactory = (attrib: WholeLinePolygonAttrib, tree: any) => {
  const polygons = tree.parent as Polygons;
  const isActive = () => polygons.currentId.value === attrib.id;

  const line = new Line({
    closed: true,
  });
  const common = () => {
    line.fill(
      isActive() ? "rgba(64, 158, 255, 0.3)" : "rgba(230, 162, 60, 0.30)"
    );
  };

  return {
    shape: line,
    setData(data: number[]) {
      line.points(data);
      common();
    },
    common,
  };
};

export class PYPolygon extends WholeLinePolygon<WholeLinePolygonAttrib, Group> {
  constructor(props: WholeLinePolygonProps<WholeLinePolygonAttrib>) {
    super(props);
    this.actShapeFactory = actShapeFactory;
  }

  mounted() {
    super.mounted();
    this.enableMouseAct(this.actShape);
  }
}