drawing-board/src/board/packages/whole-line/helper/whole-line-point-helper.ts

import konva from "konva";
import {
  WholeLinePointAttrib,
  WholeLinePointProps,
} from "../view/whole-line-point";
import { pointHelperZIndex } from "../style";
import { Entity } from "../../entity";
import { Label } from "konva/lib/shapes/Label";

export class WholeLinePointHelper extends Entity<WholeLinePointAttrib, Label> {
  static namespace = "point-helper";

  constructor(props: WholeLinePointProps) {
    props.zIndex = props.zIndex || pointHelperZIndex;
    props.name = props.name || WholeLinePointHelper.namespace + props.attrib.id;
    super(props);
  }

  initShape() {
    const label = new konva.Label({ opacity: 0.75, name: "label" });
    label.add(
      new konva.Tag({
        name: "tag",
        fill: "rgba(0, 0, 0, 0.8)",
        pointerDirection: "down",
        pointerWidth: 5,
        pointerHeight: 5,
        lineJoin: "round",
        shadowColor: "black",
        shadowBlur: 10,
        shadowOffsetX: 10,
        shadowOffsetY: 10,
        shadowOpacity: 0.5,
      }),
      new konva.Text({
        name: "text",
        text: `P${this.attrib.id}`,
        fontFamily: "Calibri",
        fontSize: 10,
        padding: 3,
        fill: "white",
      })
    );
    return label;
  }

  diffRedraw(): void {
    this.shape.x(this.attrib.x).y(this.attrib.y);
  }
}