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

import konva from "konva";
import {
  WholeLineLineAttrib,
  WholeLineLineProps,
} from "../view/whole-line-line";
import { getLineDireAngle } from "../../../shared/math";
import { MathUtils } from "three";
import { WholeLineAttrib } from "../view/whole-line";
import { Entity } from "../../entity";
import { Group } from "konva/lib/Group";
import { Label } from "konva/lib/shapes/Label";
import { Arrow } from "konva/lib/shapes/Arrow";
import { Text } from "konva/lib/shapes/Text";

export class WholeLineLineHelper extends Entity<WholeLineLineAttrib, Group> {
  static namespace = "line-helper";
  private config: WholeLineAttrib;

  constructor(props: WholeLineLineProps) {
    props.zIndex = props.zIndex || 4;
    props.name = props.name || WholeLineLineHelper.namespace + props.attrib.id;
    super(props);
  }

  setConfig(config: WholeLineAttrib) {
    this.config = config;
  }

  initShape() {
    const label = new konva.Label({
      opacity: 0.75,
      name: "label",
      listening: false,
    });
    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,
        listening: false,
      }),
      new konva.Text({
        name: "text",
        text: `text`,
        fontFamily: "Calibri",
        fontSize: 10,
        padding: 3,
        fill: "white",
        listening: false,
      })
    );

    const arrowSize = 8;

    const shape = new konva.Group();
    shape.add(label).add(
      new konva.Arrow({
        name: "arrow-1",
        visible: false,
        points: [0, 0],
        pointerLength: arrowSize,
        pointerWidth: arrowSize,
        fill: "black",
        stroke: "black",
        strokeWidth: 4,
        listening: false,
      }),
      new konva.Arrow({
        name: "arrow-2",
        visible: false,
        points: [0, 0],
        pointerLength: arrowSize,
        pointerWidth: arrowSize,
        fill: "black",
        stroke: "black",
        strokeWidth: 4,
        listening: false,
      })
    );
    return shape;
  }

  diffRedraw(): void {
    const points = this.attrib.pointIds.map((id) =>
      this.config.points.find((point) => point.id === id)
    );
    if (points.some((point) => !point)) {
      return null;
    }

    let twoWay = false;
    const labels: string[] = [];
    for (const polygon of this.config.polygons) {
      for (const lineId of polygon.lineIds) {
        const line = this.config.lines.find(({ id }) => id === lineId);
        if (
          line.pointIds.includes(this.attrib.pointIds[0]) &&
          line.pointIds.includes(this.attrib.pointIds[1])
        ) {
          labels.push(`${line.id} [${line.pointIds.join(",")}]`);

          twoWay = twoWay || line.pointIds[0] === this.attrib.pointIds[1];
        }
      }
    }

    const coords: number[] = [];
    points.forEach(({ x, y }, ndx) => {
      coords[ndx * 2] = x;
      coords[ndx * 2 + 1] = y;
    });

    const angle = MathUtils.radToDeg(getLineDireAngle(coords, [0, 1]));
    this.shape
      .findOne<Label>(".label")
      .x((coords[0] + coords[2]) / 2)
      .y((coords[1] + coords[3]) / 2)
      .rotation(angle < 0 ? angle + 90 : angle - 90);

    this.shape
      .findOne<Arrow>(".arrow-1")
      .x(coords[2])
      .y(coords[3])
      .rotation(angle + 90)
      .visible(true);

    if (twoWay) {
      this.shape
        .findOne<Arrow>(".arrow-2")
        .x(coords[0])
        .y(coords[1])
        .rotation(angle - 90)
        .visible(true);
    } else {
      this.shape.findOne<Arrow>(".arrow-2").visible(false);
    }

    this.shape.findOne<Text>(".text").text(labels.join(" | "));
  }
}