drawing-board-service/src/core/hook/use-selection.ts

import { Rect } from "konva/lib/shapes/Rect";
import {
  globalWatch,
  installGlobalVar,
  useForciblyShowItemIds,
  useMountParts,
  useStage,
} from "./use-global-vars";
import {
  useFormalLayer,
  useHelperLayer,
  useGetFormalChildren,
} from "./use-layer";
import { themeColor } from "@/constant";
import { dragListener } from "@/utils/event";
import { Layer } from "konva/lib/Layer";
import { useOperMode } from "./use-status";
import {
  computed,
  markRaw,
  nextTick,
  reactive,
  Ref,
  ref,
  toRaw,
  watch,
  watchEffect,
} from "vue";
import { EntityShape } from "@/deconstruction";
import { Util } from "konva/lib/Util";
import {
  useFixedScale,
  useViewerInvertTransform,
  useViewerInvertTransformConfig,
} from "./use-viewer";
import {
  debounce,
  diffArrayChange,
  frameEebounce,
  mergeFuns,
  onlyId,
} from "@/utils/shared";
import { IRect } from "konva/lib/types";
import { useMouseShapesStatus } from "./use-mouse-status";
import Icon from "../components/icon/temp-icon.vue";
import { Group } from "konva/lib/Group";
import { Component as GroupComp, GroupData } from "../components/group";
import { useStore } from "../store";
import { useGetShapeBelong, useOnComponentBoundChange } from "./use-component";
import { useHistory } from "./use-history";
import { isRectContained } from "@/utils/math";
import { useTransformer } from "./use-transformer";
import { IconData } from "../components/icon";
import { usePause } from "./use-pause";
import mitt, { Emitter } from "mitt";
import { components, ShapeType, shapeTypes } from "../components";
import { getFlatChildren } from "@/utils/shape";

export const useExcludeSelection = installGlobalVar(() => ref<string[]>([]));
// 多选不包含分组， 只包含选中者
export const useSelection = installGlobalVar(() => {
  const layer = useHelperLayer();
  const eSelection = useExcludeSelection();
  const getChildren = useGetFormalChildren();
  const box = new Rect({
    stroke: themeColor,
    strokeWidth: 1,
    fill: "#fff",
    listening: false,
    opacity: 0.5,
  });
  const stage = useStage();
  const operMode = useOperMode();
  const selections = ref<EntityShape[]>();
  const transformer = useTransformer();
  const getShapeSelectionManage = useGetShapeSelectionManage();

  let itemShapeBoxs: IRect[][] = [];
  let itemShapes: EntityShape[][] = [];

  const updateSelections = () => {
    const boxRect = box.getClientRect();
    selections.value = [];
    for (let i = 0; i < itemShapeBoxs.length; i++) {
      for (let j = 0; j < itemShapeBoxs[i].length; j++) {
        const shape = itemShapes[i][j];
        const box = itemShapeBoxs[i][j];
        const itemSelects: EntityShape[] = [];
        if (
          Util.haveIntersection(boxRect, box) &&
          !isRectContained(box, boxRect)
        ) {
          if (!selections.value.includes(shape)) {
            selections.value.push(shape);
            itemSelects.push(shape);
          }
        }
      }
    }
  };

  const store = useStore();
  const init = (dom: HTMLDivElement, layer: Layer) => {
    store.bus.on("addItemAfter", updateInitData);
    store.bus.on("dataChangeAfter", updateInitData);
    const stopListener = dragListener(dom, {
      down(pos) {
        layer.add(box);
        box.x(pos.x);
        box.y(pos.y);
        box.width(0);
        box.height(0);
      },
      move({ end }) {
        box.width(end.x - box.x());
        box.height(end.y - box.y());
        updateSelections();
      },
      up() {
        selections.value = undefined;
        box.remove();
      },
    });
    return () => {
      store.bus.off("addItemAfter", updateInitData);
      store.bus.off("dataChangeAfter", updateInitData);
      stopListener();
      box.remove();
    };
  };

  const updateInitData = () => {
    itemShapes = getChildren().map((item) =>
      getFlatChildren(item).filter(
        (shape) =>
          !eSelection.value.includes(shape.id()) &&
          shape !== toRaw(transformer) &&
          getShapeSelectionManage(shape)?.canSelect(shape)
      )
    );
    itemShapeBoxs = itemShapes.map((shapes) =>
      shapes.map((shape) => shape.getClientRect())
    );
  };

  const stopWatch = globalWatch(
    () => operMode.value.mulSelection,
    (mulSelection, _, onCleanup) => {
      if (!mulSelection) return;
      const dom = stage.value?.getNode().container()!;
      updateInitData();
      onCleanup(init(dom, layer.value!));
    }
  );

  return {
    onDestroy: stopWatch,
    var: { selections, box },
  };
});

type ShapeIconArgs = Partial<
  Pick<IconData, "width" | "height" | "url" | "fill" | "stroke">
>;
export const useShapesIcon = (
  shapes: Ref<EntityShape[] | undefined>,
  args: ShapeIconArgs = {}
) => {
  const mParts = useMountParts();
  const { on } = useOnComponentBoundChange();
  const iconProps = {
    width: 12,
    height: 12,
    url: "./icons/state_s.svg",
    fill: themeColor,
    stroke: "#fff",
    ...args,
    listening: false,
  };
  const fScale = useFixedScale()
  const invMat = useViewerInvertTransform();
  const getShapeMat = (shape: EntityShape) => {
    const rect = shape.getClientRect();
    const center = invMat.value.point({
      x: rect.x + rect.width / 2,
      y: rect.y + rect.height / 2,
    });
    return [1, 0, 0, 1, center.x, center.y];
  };
  const unMountMap = new WeakMap<EntityShape, () => void>();

  const pause = usePause();
  const stop = watch(
    [() => [...(shapes.value || [])], () => pause.isPause],
    ([shapes], [oldShapes]) => {
      if (pause.isPause) {
        shapes = [];
      }
      const { added, deleted } = diffArrayChange(shapes || [], oldShapes || []);
      for (const addShape of added) {
        const mat = ref(getShapeMat(addShape));
        const data = reactive({ ...iconProps, mat: mat });
        const update = frameEebounce(() => {
          data.width = fScale.value * iconProps.width;
          data.height = fScale.value * iconProps.height;
          mat.value = getShapeMat(addShape);
        });
        const unHooks = [
          on(addShape, update),
          watch(fScale, update, { immediate: true, flush: "post" }),
          mParts.add({
            comp: markRaw(Icon),
            props: { data },
          }),
        ];
        unMountMap.set(addShape, mergeFuns(unHooks));
      }
      for (const delShape of deleted) {
        const fn = unMountMap.get(delShape);
        fn && fn();
      }
    }
  );
  return [stop, pause];
};

export type SelectionManageBus = Emitter<Record<"del" | "update", EntityShape>>;
export type SelectionManage = {
  canSelect: (shape: EntityShape, selects?: EntityShape[]) => boolean;
  listener: (shape: EntityShape) => {
    stop: () => void;
    bus: SelectionManageBus;
  };
};
export type UseGetSelectionManage = () => SelectionManage;

export const useStoreSelectionManage = installGlobalVar((): SelectionManage => {
  const store = useStore();
  const { on } = useOnComponentBoundChange();

  const canSelect = (shape: EntityShape) => {
    const id = shape.id();
    if (!id) {
      return false;
    }
    const item = store.items.find((item) => item.id === id);
    return !!(item && !item.lock);
  };
  const listener = (shape: EntityShape) => {
    const bus: SelectionManageBus = mitt();
    const stop = watch(
      () => canSelect(shape),
      (exixts, _, onCleanup) => {
        if (!exixts) {
          bus.emit("del", shape);
        } else {
          onCleanup(on(shape, () => bus.emit("update", shape)));
        }
      },
      { immediate: true }
    );
    return { stop, bus };
  };

  return { canSelect, listener };
});

export const useGetShapeSelectionManage = installGlobalVar(() => {
  const compManages: Partial<Record<ShapeType, SelectionManage>> = {};
  for (const type of shapeTypes) {
    compManages[type] =
      components[type].useGetSelectionManage &&
      components[type].useGetSelectionManage();
  }
  const storeManage = useStoreSelectionManage();
  const getShapeBelong = useGetShapeBelong();
  return (shape: EntityShape) => {
    const bl = getShapeBelong(shape);
    if (!bl) return;
    if (compManages[bl.type]) {
      return compManages[bl.type];
    } else if (bl.isSelf) {
      return storeManage;
    }
  };
});

export const useSelectionRevise = () => {
  const getShapeSelectionManage = useGetShapeSelectionManage();
  const mParts = useMountParts();
  const status = useMouseShapesStatus();
  const store = useStore();
  const { selections: rectSelects } = useSelection();
  let selfSet = false;
  const setSelectShapes = (shapes: EntityShape[]) => {
    selfSet = true;
    status.selects = shapes;
    selfSet = false;
  };

  let initSelections: EntityShape[] = [];
  watch(
    () => rectSelects.value && [...rectSelects.value],
    (rectSelects, oldRectSelects) => {
      if (!oldRectSelects) {
        initSelections = [...status.selects];
      } else if (!rectSelects) {
        initSelections = [];
      } else {
        setSelectShapes(initSelections.concat(rectSelects));
      }
    }
  );
  useShapesIcon(computed(() => status.selects));

  const filterSelect = debounce(() => {
    const selects = new Set<EntityShape>();
    for (const shape of status.selects) {
      const children = getFlatChildren(shape);
      children.forEach((childShape) => {
        const manage = getShapeSelectionManage(childShape);
        if (manage?.canSelect(childShape)) {
          selects.add(childShape);
        }
      });
    }
    setSelectShapes([...selects]);
  }, 16);
  store.bus.on("delItemAfter", filterSelect);
  store.bus.on("clearAfter", filterSelect);
  store.bus.on("dataChangeAfter", filterSelect);
  store.bus.on("setCurrentLayerAfter", filterSelect);
  watch(
    () => status.selects,
    () => selfSet || filterSelect(),
    { flush: "sync" }
  );

  const ids = computed(() => [
    ...new Set(status.selects.map((item) => item.id())),
  ]);
  const groupConfig = {
    id: onlyId(),
    createTime: Date.now(),
    lock: false,
    opacity: 1,
    ref: false,
    listening: false,
    stroke: themeColor,
  };
  const operMode = useOperMode();
  const layer = useFormalLayer();
  watch(
    () => operMode.value.mulSelection,
    (muls, olv) => {
      if (muls) {
        status.selects = [...status.selects, ...status.actives];
      }
    },
    { flush: "pre" }
  );
  watch(
    () => [!!ids.value.length, operMode.value.mulSelection],
    (_a, _b) => {
      const groupShape = layer.value?.findOne<Group>(`#${groupConfig.id}`);
      if (!groupShape) return;
      if (ids.value.length && !operMode.value.mulSelection) {
        status.actives = [groupShape];
      } else if (status.actives.includes(groupShape)) {
        status.actives = [];
      }
    }
  );

  const stage = useStage();
  const history = useHistory();
  const showItemId = useForciblyShowItemIds();
  watchEffect((onCleanup) => {
    if (!ids.value.length) return;
    const props = {
      data: { ...groupConfig, ids: ids.value },
      key: groupConfig.id,
      onUpdateShape(data: GroupData) {
        // status.selects;
        // data.ids;
      },
      onDelShape() {
        setSelectShapes([]);
      },
      onAddShape(data: GroupData) {
        history.onceTrack(() => {
          const ids = data.ids;
          const groups = store.typeItems.group;
          const exists = groups?.some((group) => {
            if (group.ids.length !== ids.length) return false;
            const diff = diffArrayChange(group.ids, ids);
            return diff.added.length === 0 && diff.deleted.length == 0;
          });
          if (exists) return;

          store.addItem("group", { ...data, ids });
          showItemId.cycle(data.id, async () => {
            await nextTick();
            const $stage = stage.value!.getNode();
            const addShape = $stage.findOne("#" + data.id) as EntityShape;
            setSelectShapes([addShape]);
          });
        });
      },
    };
    onCleanup(mParts.add({ comp: markRaw(GroupComp), props }));
  });
};