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

import { computed, reactive } from "vue";
import { installGlobalVar, stackVar, useDownKeys, useStage } from "./use-global-vars";
import { Mode } from "@/constant/mode";
import { useInteractiveProps } from "./use-interactive";


export const useMode = installGlobalVar(() => {
  const stack = stackVar(new Set([Mode.write]));
  const modeStack = {
    ...stack,
    get value() {
      return stack.value;
    },
    set value(val: Set<Mode>) {
      stack.value = val;
    },
    push(...modes: Mode[]) {
      return stack.push(new Set(modes));
    },
    include(...modes: Mode[]) {
      return modes.every((m) => modeStack.value.has(m));
    },
    add(...modes: Mode[]) {
      modes.forEach((mode) => modeStack.value.add(mode));
    },
    del(...modes: Mode[]) {
      modes.forEach((mode) => modeStack.value.delete(mode));
    },
  };
  // if (import.meta.env.DEV) {
  //   watchEffect(
  //     () => {
  //       console.error([...modeStack.value.values()].join(","));
  //     },
  //     { flush: "sync" }
  //   );
  // }
  return modeStack;
}, Symbol("mode"));


export const useCan = installGlobalVar(() => {
  const mode = useMode();
  const operMode = useOperMode()
  const stage = useStage();
  const key = useDownKeys();
  const loaded = computed(() => !!stage.value?.getStage());

  // 鼠标是否可用
  const mouse = computed(() => loaded.value && !mode.include(Mode.static) && !mode.include(Mode.readonly));

  // 可以进入拖拽模式
  const dragMode = computed(() => {
    if (!mouse.value || mode.include(Mode.readonly) || key.has(" "))
      return false;
    return mode.include(Mode.draw) || mode.include(Mode.update);
  });

  // 是否在视图模式
  const viewMode = computed(() => {
    return mouse.value && ((!mode.include(Mode.draging) && !operMode.value.mulSelection) || key.has(" "));
  });

  // shape是否可以对鼠标做出反应
  const mouseReact = computed(
    () => mouse.value && (mode.include(Mode.write) || mode.include(Mode.update))
  );

  // 可以进入编辑模式
  const editMode = computed(() => mouse.value && mode.include(Mode.write) && !operMode.value.mulSelection);

  // 可以进入绘制模式
  const drawMode = computed(() => mouse.value && mode.include(Mode.write) && !operMode.value.mulSelection);

  return reactive({
    viewMouseReact: mouse,
    viewMode,
    drawMode,
    mouseReact,
    editMode,
    dragMode,
  });
});


export const useOperMode = installGlobalVar(() => {
  const keys = useDownKeys()
  const interactiveProps = useInteractiveProps();
  
  return computed(() => ({
    // 多选模式
    mulSelection: keys.has('Ctrl') && !keys.has(' ') && !keys.has('Alt') && !interactiveProps.value,
    // mulSelection: keys.has('Meta') && !keys.has(' ') && !keys.has('Alt'),
    // mulSelection: false,
    // 自由移动视图
    freeView: keys.has(' '),
    // 自由绘图，不吸附
    freeDraw: keys.has('Control'),
    // 组操作模式
    // group: keys.has('Alt')
    group: false
  }))
})