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

import { PolygonsPointAttrib } from "@/request/type";
import {
  openEntityDrag,
  getRealAbsoluteSize,
  WholeLinePoint,
  getWholeLinePolygonPoints,
  WholeLinePointProps,
} from "drawing-board";
import { Path } from "konva/lib/shapes/Path";
import { Group } from "konva/lib/Group";
import { Circle } from "konva/lib/shapes/Circle";
import { Label, Tag } from "konva/lib/shapes/Label";
import { Text } from "konva/lib/shapes/Text";
import { Polygons } from "./polygons";

const actShapeFactory = (attrib: PolygonsPointAttrib, tree: any) => {
  const polygons = tree.parent as Polygons;
  const size = { width: 40, height: 40 };
  const out = new Path({
    data: `M22 44C32.6667 33.891 38 25.891 38 20C38 11.1634 30.8366 4 22 4C13.1634 4 6 11.1634 6 20C6 25.891 11.3333 33.891 22 44Z`,
  });
  const inner = new Path({
    fill: "#fff",
    data: `M22 30C27.5228 30 32 25.5228 32 20C32 14.4772 27.5228 10 22 10C16.4772 10 12 14.4772 12 20C12 25.5228 16.4772 30 22 30Z`,
  });
  const rect = new Circle({
    radius: Math.min(size.width, size.height) / 2,
    fill: "rgba(0, 0, 0, 0)",
    offset: { x: -size.width / 2, y: -size.height / 2 },
  });
  const index = new Text({
    name: "text",
    text: `1`,
    fontFamily: "Calibri",
    fontSize: 12,
    padding: 5,
    offsetY: -8,
    fill: "#000",
  });

  const label = new Label({
    visible: false,
    opacity: 0.75,
    name: "label",
    offsetX: -size.width / 2,
    offsetY: -6,
  });

  label.add(
    new Tag({
      name: "tag",
      fill: "rgba(255, 255, 255, 0.8)",
      pointerDirection: "down",
      pointerWidth: 5,
      pointerHeight: 5,
      lineJoin: "round",
      shadowColor: "black",
      shadowBlur: 10,
      shadowOffsetX: 10,
      shadowOffsetY: 10,
      shadowOpacity: 0.5,
    }),
    new Text({
      name: "text",
      text: `P${attrib.id}`,
      fontFamily: "Calibri",
      fontSize: 10,
      padding: 5,
      fill: "#000",
    })
  );

  const offsetGroup = new Group();
  offsetGroup.add(out, inner, rect, label, index);
  offsetGroup.x(-size.width / 2);
  offsetGroup.y(-size.height);

  const group = new Group();
  group.add(offsetGroup);

  const setStyle = () => {
    let [width, height] = getRealAbsoluteSize(group, [1, 1]);
    group.scale({ x: width, y: height });

    if (polygons.currentPolygonId) {
      const points = getWholeLinePolygonPoints(
        polygons.attrib,
        polygons.currentPolygonId
      ).map(({ id }) => id);
      const ndx = points.indexOf(attrib.id);
      if (~ndx) {
        index.text((ndx + 1).toString()).visible(true);
        index.offsetX(-rect.width() / 2 + index.width() / 2.5);
        return;
      }
    }
    index.visible(false);
  };

  const result = {
    shape: group,
    common: () => {
      out.fill(attrib.rtk ? "#728190" : "#409EFF");
      label.visible(false);
      polygons.bus.emit("hoverPoint", null);
    },
    hover: () => {
      out.fill(attrib.rtk ? "#728190" : "#E6A23C");
      label.visible(true);
      polygons.bus.emit("hoverPoint", tree.attrib);
    },
    setData(data: number[]) {
      setStyle();
      group.x(data[0]);
      group.y(data[1]);
    },
    active() {
      out.fill("#E6A23C");
      if (!polygons.currentPolygonId) {
        polygons.bus.emit("activePoint", tree.attrib);
      }
    },
    draging() {
      out.fill("#E6A23C");
    },
  };

  if (attrib.rtk) {
    return result;
  } else {
    return {
      ...result,
      draging() {
        out.fill("#E6A23C");
      },
    };
  }
};

export class PYPoint extends WholeLinePoint<PolygonsPointAttrib, Group> {
  constructor(props: WholeLinePointProps<PolygonsPointAttrib>) {
    super(props);
    this.actShapeFactory = actShapeFactory;
  }

  mounted() {
    super.mounted();
    if (!this.attrib.rtk) {
      openEntityDrag(this, {
        readyHandler: (attrib) => {
          return [attrib.x, attrib.y];
        },
        moveHandler: (pointAttrib, move) => {
          pointAttrib.x = move[0];
          pointAttrib.y = move[1];
        },
      });
    }
    this.enableMouseAct(this.actShape);
  }
}