fix: 签约

zhengyiming

11 小时以前 97f29024ce18babeb4b635c5d73f907ac493976e

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
import { inject, computed, reactive, onMounted, onBeforeMount } from 'vue';
import { fabric } from 'fabric';
 
import Editor, { EventType } from '@muaitu/fabric-editor-core';
const { SelectMode, SelectEvent } = EventType;
 
export default function useSelect(matchType?: Array<string>) {
  const fabric = inject('fabric') as typeof fabric;
  const canvasEditor = inject('canvasEditor') as Editor;
 
  const state = reactive({
    mSelectMode: SelectMode.EMPTY,
    mSelectOneType: '',
    mSelectId: '' as any, // 选择id
    mSelectIds: [] as any, // 选择id
    mSelectActive: [] as fabric.Object[],
  });
  const selectOne = (arr: fabric.Object[]) => {
    state.mSelectMode = SelectMode.ONE;
    const [item] = arr;
    if (item) {
      state.mSelectActive = [item];
      //@ts-ignore
      state.mSelectId = item.id;
      state.mSelectOneType = item.type;
      //@ts-ignore
      state.mSelectIds = [item.id];
    }
    callBack();
  };
 
  const selectMulti = (arr: fabric.Object[]) => {
    state.mSelectMode = SelectMode.MULTI;
    state.mSelectId = '';
    //@ts-ignore
    state.mSelectIds = arr.map((item) => item.id);
    callBack();
  };
 
  const selectCancel = () => {
    state.mSelectId = '';
    state.mSelectIds = [];
    state.mSelectMode = SelectMode.EMPTY;
    state.mSelectOneType = '';
    callBack();
  };
 
  let callBack = () => {
    //
  };
  const getObjectAttr = (cb: any) => {
    callBack = cb;
  };
  onMounted(() => {
    canvasEditor.on(SelectEvent.ONE, selectOne);
    canvasEditor.on(SelectEvent.MULTI, selectMulti);
    canvasEditor.on(SelectEvent.CANCEL, selectCancel);
  });
 
  onBeforeMount(() => {
    canvasEditor.off(SelectEvent.ONE, selectOne);
    canvasEditor.off(SelectEvent.MULTI, selectMulti);
    canvasEditor.off(SelectEvent.CANCEL, selectCancel);
  });
 
  let isMatchType = computed(() => {
    if (matchType) {
      return matchType.includes(state.mSelectOneType);
    }
    return false;
  });
 
  const isOne = computed(() => state.mSelectMode === 'one');
  const isMultiple = computed(() => state.mSelectMode === 'multiple');
  const isGroup = computed(() => state.mSelectMode === 'one' && state.mSelectOneType === 'group');
  const isSelect = computed(() => state.mSelectMode);
 
  const selectType = computed(() => state.mSelectOneType);
 
  const matchTypeHander = (types: string[]) => {
    return computed(() => types.includes(state.mSelectOneType));
  };
  return {
    fabric,
    canvasEditor,
    mixinState: state,
    selectType,
    isSelect,
    isGroup,
    isOne,
    isMultiple,
    isMatchType,
    matchTypeHander,
    getObjectAttr,
  };
}