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

import {
  Attrib,
  CustomizeShape,
  CustomizeShapeFactory,
  ShapeType,
} from "../../../type";
import { lineShapeFactory, line } from "../style";
import { WholeLineAttrib } from "./whole-line";
import { getWholeLinePoints } from "../service/whole-line-base";
import { Entity, EntityProps } from "../../entity";
import { Line } from "konva/lib/shapes/Line";

export type WholeLineLineAttrib = Attrib & {
  pointIds: string[];
};

export type WholeLineLineProps<
  T extends WholeLineLineAttrib = WholeLineLineAttrib
> = EntityProps<T>;

export class WholeLineLine<
  T extends WholeLineLineAttrib = WholeLineLineAttrib,
  R extends ShapeType = Line
> extends Entity<T, R> {
  static namespace = "line";
  private config: WholeLineAttrib;

  actShape: CustomizeShape<number[], R>;
  actShapeFactory: CustomizeShapeFactory<T, number[], R, any, {}>;

  constructor(props: WholeLineLineProps<T>) {
    props.zIndex = props.zIndex || line.zIndex;
    props.name = props.name || WholeLineLine.namespace + props.attrib.id;
    super(props);

    this.actShapeFactory = lineShapeFactory as unknown as CustomizeShapeFactory<
      T,
      number[],
      R
    >;
  }

  setActShapeFactory(actShapeFactory: CustomizeShapeFactory<T, number[], R>) {
    this.actShapeFactory = actShapeFactory;
  }

  initShape() {
    this.actShape = this.actShapeFactory(this.attrib, this);
    return this.actShape.shape;
  }

  diffRedraw(): void {
    const coords = this.getCoords();
    if (coords.length) {
      this.actShape.setData(coords);
    } else {
      console.error("line:", this.attrib, "找不到对应的点坐标", [
        ...this.config.points,
      ]);
    }
  }

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

  getCoords() {
    const result: number[] = [];
    const points = getWholeLinePoints(this.config, this.attrib.pointIds);
    if (!points.some((point) => !point)) {
      points.forEach(({ x, y }, ndx) => {
        result[ndx * 2] = x;
        result[ndx * 2 + 1] = y;
      });
    }
    return result;
  }

  protected initReactive() {
    return super.initReactive("post");
  }

  mounted(): void {
    super.mounted();
    this.actShape.common(null);
  }
}