drawing-board/src/board/packages/whole-line/editable/pen-whole-line.ts

import { Ref, ref } from "vue";
import {
  WLL,
  WLP,
  WLPY,
  WholeLine,
  WholeLineAttrib,
  WholeLineInc,
  WholeLineLine,
  WholeLineLineAttrib,
  WholeLinePoint,
  WholeLinePointAttrib,
  WholeLinePolygon,
  WholeLinePolygonAttrib,
} from "../view";
import {
  WholeLineHelperInfoAL,
  penWholeLinePoygonsEditWithHelperShapesMouse,
} from "../service/whole-line-helper";
import { lineShapeFactory, polygonShapeFactory } from "../style";
import { getWholeLinePolygonLinesRaw } from "../service";
import { incEntitysFactoryGenerate, openEntityDrag } from "../../../shared";
import { CustomizeShape, ShapeType } from "../../../type";
import { KonvaEventObject } from "konva/lib/Node";
import { EntityEvent } from "../../entity";

export const penLineActShapeFactory = <T extends WholeLineLineAttrib>(
  attrib: T,
  tree: any
): CustomizeShape<number[]> => {
  const polygons = tree.parent as PenEditWholeLine;
  const wll = lineShapeFactory();

  const isActive = () => {
    if (polygons.editPolygonId.value) {
      const lines = getWholeLinePolygonLinesRaw(
        polygons.attrib,
        polygons.editPolygonId.value
      );
      if (lines.some(({ id }) => id === attrib.id)) {
        return true;
      }
    }
    return false;
  };

  const common = () => {
    const readyDel = polygons.helperInfo?.value?.delLines?.includes(attrib.id);
    if (readyDel) {
      wll.shape.stroke("rgba(0, 0, 0, 0)");
    } else if (isActive()) {
      wll.active();
    } else {
      wll.common();
    }
  };
  return {
    shape: wll.shape,
    setData(data: number[]) {
      wll.setData(data);
      common();
    },
    common,
  };
};

const penPolygonActShapeFactoryGen = (autoClose: boolean) => {
  return (attrib: WholeLinePolygonAttrib, tree: any) => {
    const polygons = tree.parent as PenEditWholeLine;
    const isActive = () => polygons.editPolygonId.value === attrib.id;
    const wlp = polygonShapeFactory({ autoClose });

    const common = (ev?: KonvaEventObject<any>) => {
      if (isActive()) {
        wlp.active(ev);
      } else {
        wlp.common(ev);
      }
    };

    return {
      shape: wlp.shape,
      setData(data: number[]) {
        common();
        wlp.setData(data);
        const needUpdate = polygons.helperInfo?.value?.cloneLines
          ? Object.keys(polygons.helperInfo?.value?.cloneLines).includes(
              attrib.id
            )
          : false;

        wlp.shape.children[1].visible(!needUpdate);
      },
      common,
    };
  };
};

export const closePenPolygonActShapeFactory =
  penPolygonActShapeFactoryGen(true);
export const penPolygonActShapeFactory = penPolygonActShapeFactoryGen(false);

export type PenEnterEditProps<P extends WholeLinePointAttrib> = {
  polygonId?: string;
  canOper?: (
    tree: WholeLineLine | WholeLinePoint,
    operShape: ShapeType
  ) => boolean;
  pointAttribFactory?: (pos: number[]) => Omit<P, "id">;
  canDelPoint?: (p: P, evt: KonvaEventObject<any>) => boolean;
  quitHandler?: () => void;
  quotePoint?: boolean;
};

// 钢笔模式 只允许一个多边形一个多边形的编辑
export class PenEditWholeLine<
  W extends WholeLineAttrib = WholeLineAttrib,
  EV extends EntityEvent = EntityEvent
> extends WholeLine<W, EV> {
  editPolygonId = ref<string>();
  helperInfo?: Ref<WholeLineHelperInfoAL>;
  autoClose = true;

  dragAttach(inc: WholeLineInc<W>) {
    inc.pointEntityInc.adds.forEach((point) => {
      openEntityDrag(point, {
        readyHandler: (attrib) => {
          return [attrib.x, attrib.y];
        },
        moveHandler: (pointAttrib, move) => {
          if (this.editPolygonId.value) {
            pointAttrib.x = move[0];
            pointAttrib.y = move[1];
          }
        },
      });
      point.enableMouseAct(point.actShape);
    });

    inc.lineEntityInc.adds.forEach((line) => {
      line.enableMouseAct(line.actShape);
    });

    inc.polygonEntityInc.adds.forEach((py) => {
      py.enableMouseAct(py.actShape);
    });
  }

  diffRedraw() {
    const inc = super.diffRedraw();
    this.dragAttach(inc as any);
    return inc;
  }

  initIncFactory() {
    super.initIncFactory();
    this.incLinesFactory = incEntitysFactoryGenerate(
      WholeLineLine<WLL<W>>,
      this,
      (line) => {
        line.actShapeFactory = penLineActShapeFactory<WLL<W>> as any;
        line.setConfig(this.attrib);
      }
    );

    this.incPointsFactory = incEntitysFactoryGenerate(
      WholeLinePoint<WLP<W>>,
      this
    );

    this.incPolygonFactory = incEntitysFactoryGenerate(
      WholeLinePolygon<WLPY<W>>,
      this,
      (py) => {
        py.actShapeFactory = this.autoClose
          ? (closePenPolygonActShapeFactory as any)
          : penPolygonActShapeFactory;
        py.setConfig(this.attrib);
      }
    );
  }

  private _leaveEditMode: (() => void) | void = void 0;
  enterEditMode(props: PenEnterEditProps<WLP<W>>) {
    this._leaveEditMode && this._leaveEditMode();
    this._leaveEditMode = penWholeLinePoygonsEditWithHelperShapesMouse(
      {
        ...props,
        closeAutoQuit: true,
        tree: this.container,
        autoAdd: false,
        autoClose: this.autoClose,
        config: this.attrib as any,
        changePolygon: (pid: string) => {
          this.editPolygonId.value = pid;
        },
        quitHandler: () => {
          props.quitHandler && props.quitHandler();
        },
      },
      this.shape
    );
  }

  leaveEditMode() {
    this._leaveEditMode && this._leaveEditMode();
  }

  destory(): void {
    this.leaveEditMode();
    super.destory();
  }
}