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

import { Attrib, ShapeType } from "../../../type";
import { DEV } from "../../../env";
import { WholeLinePointHelper, WholeLineLineHelper } from "../helper";
import { WholeLinePoint, WholeLinePointAttrib } from "./whole-line-point";
import { WholeLineLine, WholeLineLineAttrib } from "./whole-line-line";
import { WholeLinePolygon, WholeLinePolygonAttrib } from "./whole-line-polygon";
import { Group } from "konva/lib/Group";
import { Entity, EntityProps } from "../../entity";
import {
  IncEntitysFactory,
  incEntitysFactoryGenerate,
} from "../../../shared/entity-utils";
import { watch } from "vue";

export type WholeLineAttrib<
  P extends WholeLinePointAttrib = WholeLinePointAttrib,
  L extends WholeLineLineAttrib = WholeLineLineAttrib,
  PY extends WholeLinePolygonAttrib = WholeLinePolygonAttrib
> = Attrib & {
  points: P[];
  lines: L[];
  polygons: PY[];
};

export type WholeLineProps<
  W extends WholeLineAttrib<P, L, PY>,
  P extends WholeLinePointAttrib = WholeLinePointAttrib,
  L extends WholeLineLineAttrib = WholeLineLineAttrib,
  PY extends WholeLinePolygonAttrib = WholeLinePolygonAttrib
> = EntityProps<W>;

export type WLP<W extends WholeLineAttrib> = W extends WholeLineAttrib<infer P>
  ? P
  : never;

export type WLL<W extends WholeLineAttrib> = W extends WholeLineAttrib<
  WholeLinePointAttrib,
  infer L
>
  ? L
  : never;

export type WLPY<W extends WholeLineAttrib> = W extends WholeLineAttrib<
  WholeLinePointAttrib,
  WholeLineLineAttrib,
  infer PY
>
  ? PY
  : never;

export class WholeLine<
  W extends WholeLineAttrib = WholeLineAttrib,
  PS extends ShapeType = ShapeType,
  LS extends ShapeType = ShapeType,
  PYS extends ShapeType = ShapeType
> extends Entity<W, Group> {
  static namespace = "whole-line";

  incLinesFactory: IncEntitysFactory<WLL<W>, WholeLineLine<WLL<W>, LS>>;
  incPointsFactory: IncEntitysFactory<WLP<W>, WholeLinePoint<WLP<W>, PS>>;
  incPolygonFactory: IncEntitysFactory<WLPY<W>, WholeLinePolygon<WLPY<W>, PYS>>;

  private incLinesHelperFactory: IncEntitysFactory<
    WholeLineLineAttrib,
    WholeLineLineHelper
  >;

  private incPointsHelperFactory?: IncEntitysFactory<
    WholeLinePointAttrib,
    WholeLinePointHelper
  >;

  constructor(props: WholeLineProps<W>) {
    props.name = props.name || WholeLine.namespace + props.attrib.id;
    super(props);
  }

  initIncFactory() {
    this.incLinesFactory = incEntitysFactoryGenerate(
      WholeLineLine<WLL<W>, LS>,
      this,
      (line) => {
        line.setConfig(this.attrib);
      }
    );
    this.incPointsFactory = incEntitysFactoryGenerate(
      WholeLinePoint<WLP<W>, PS>,
      this
    );

    this.incPolygonFactory = incEntitysFactoryGenerate(
      WholeLinePolygon<WLPY<W>, PYS>,
      this
    );

    if (DEV) {
      this.incLinesHelperFactory = incEntitysFactoryGenerate(
        WholeLineLineHelper,
        this,
        (line) => {
          line.setConfig(this.attrib);
        }
      );
      this.incPointsHelperFactory = incEntitysFactoryGenerate(
        WholeLinePointHelper,
        this
      );

      this.incPointsHelperFactory = incEntitysFactoryGenerate(
        WholeLinePointHelper,
        this
      );
    }
  }

  init() {
    this.initIncFactory();
    super.init();
  }

  initShape() {
    return new Group({ id: this.name });
  }

  getRedrawLines() {
    // 去重 防止来回线段绘画两次
    const lines: WLL<W>[] = [];
    for (let i = this.attrib.lines.length - 1; i >= 0; i--) {
      const a = this.attrib.lines[i];
      let j = 0;
      for (j = 0; j < i; j++) {
        const b = this.attrib.lines[j];
        if (
          b.pointIds.includes(a.pointIds[0]) &&
          b.pointIds.includes(a.pointIds[1])
        ) {
          break;
        }
      }
      if (i === j) {
        lines.push(a as WLL<W>);
      }
    }
    return lines;
  }

  diffRedraw() {
    const lineAttribs = this.getRedrawLines();
    if (DEV) {
      this.incLinesHelperFactory(lineAttribs);
      this.incPointsHelperFactory(this.attrib.points);
    }
    const pointEntityInc = this.incPointsFactory(this.attrib.points as any);
    const lineEntityInc = this.incLinesFactory(lineAttribs);
    const polygonEntityInc = this.incPolygonFactory(
      this.attrib.polygons as any
    );

    return { lineEntityInc, pointEntityInc, polygonEntityInc };
  }

  initReactive() {
    return watch(
      () => ({
        pointIds: this.attrib.points.map(({ id }) => id),
        lineIds: this.attrib.lines.map(({ id }) => id),
      }),
      this.diffRedraw.bind(this),
      { immediate: true, flush: "sync" }
    );
  }
}