提交 | 用户 | age
|
e1bc33
|
1 |
<template> |
V |
2 |
<div :class="`${prefixCls}-toolbar`" class="flex items-center px-2 py-1"> |
4f20d4
|
3 |
<template v-for="item in toolbarItemList" :key="item.type"> |
e1bc33
|
4 |
<Tooltip placement="bottom" v-bind="item.disabled ? { visible: false } : {}"> |
V |
5 |
<template #title>{{ item.tooltip }}</template> |
|
6 |
<span :class="`${prefixCls}-toolbar__icon`" v-if="item.icon" @click="onControl(item)"> |
|
7 |
<Icon |
|
8 |
:icon="item.icon" |
|
9 |
:class="item.disabled ? 'cursor-not-allowed disabeld' : 'cursor-pointer'" |
|
10 |
/> |
|
11 |
</span> |
|
12 |
</Tooltip> |
|
13 |
<Divider v-if="item.separate" type="vertical" /> |
|
14 |
</template> |
|
15 |
</div> |
|
16 |
</template> |
|
17 |
<script lang="ts"> |
|
18 |
import type { ToolbarConfig } from './types'; |
|
19 |
|
|
20 |
import { defineComponent, ref, onUnmounted, unref, nextTick, watchEffect } from 'vue'; |
|
21 |
import { Divider, Tooltip } from 'ant-design-vue'; |
|
22 |
import { Icon } from '/@/components/Icon'; |
|
23 |
|
|
24 |
import { useFlowChartContext } from './useFlowContext'; |
|
25 |
import { ToolbarTypeEnum } from './enum'; |
|
26 |
|
|
27 |
export default defineComponent({ |
|
28 |
name: 'FlowChartToolbar', |
|
29 |
components: { Icon, Divider, Tooltip }, |
|
30 |
props: { |
|
31 |
prefixCls: String, |
|
32 |
}, |
064901
|
33 |
emits: ['view-data'], |
e1bc33
|
34 |
setup(_, { emit }) { |
V |
35 |
const toolbarItemList = ref<ToolbarConfig[]>([ |
|
36 |
{ |
|
37 |
type: ToolbarTypeEnum.ZOOM_IN, |
|
38 |
icon: 'codicon:zoom-out', |
|
39 |
tooltip: '缩小', |
|
40 |
}, |
|
41 |
{ |
|
42 |
type: ToolbarTypeEnum.ZOOM_OUT, |
|
43 |
icon: 'codicon:zoom-in', |
|
44 |
tooltip: '放大', |
|
45 |
}, |
|
46 |
{ |
|
47 |
type: ToolbarTypeEnum.RESET_ZOOM, |
|
48 |
icon: 'codicon:screen-normal', |
|
49 |
tooltip: '重置比例', |
|
50 |
}, |
|
51 |
{ separate: true }, |
|
52 |
{ |
|
53 |
type: ToolbarTypeEnum.UNDO, |
|
54 |
icon: 'ion:arrow-undo-outline', |
|
55 |
tooltip: '后退', |
|
56 |
disabled: true, |
|
57 |
}, |
|
58 |
{ |
|
59 |
type: ToolbarTypeEnum.REDO, |
|
60 |
icon: 'ion:arrow-redo-outline', |
|
61 |
tooltip: '前进', |
|
62 |
disabled: true, |
|
63 |
}, |
|
64 |
{ separate: true }, |
|
65 |
{ |
|
66 |
type: ToolbarTypeEnum.SNAPSHOT, |
|
67 |
icon: 'ion:download-outline', |
|
68 |
tooltip: '下载', |
|
69 |
}, |
|
70 |
{ |
|
71 |
type: ToolbarTypeEnum.VIEW_DATA, |
|
72 |
icon: 'carbon:document-view', |
|
73 |
tooltip: '查看数据', |
|
74 |
}, |
|
75 |
]); |
|
76 |
|
|
77 |
const { logicFlow } = useFlowChartContext(); |
|
78 |
|
|
79 |
function onHistoryChange({ data: { undoAble, redoAble } }) { |
|
80 |
const itemsList = unref(toolbarItemList); |
|
81 |
const undoIndex = itemsList.findIndex((item) => item.type === ToolbarTypeEnum.UNDO); |
|
82 |
const redoIndex = itemsList.findIndex((item) => item.type === ToolbarTypeEnum.REDO); |
|
83 |
if (undoIndex !== -1) { |
|
84 |
unref(toolbarItemList)[undoIndex].disabled = !undoAble; |
|
85 |
} |
|
86 |
if (redoIndex !== -1) { |
|
87 |
unref(toolbarItemList)[redoIndex].disabled = !redoAble; |
|
88 |
} |
|
89 |
} |
|
90 |
|
|
91 |
const onControl = (item) => { |
|
92 |
const lf = unref(logicFlow); |
|
93 |
if (!lf) { |
|
94 |
return; |
|
95 |
} |
|
96 |
switch (item.type) { |
|
97 |
case ToolbarTypeEnum.ZOOM_IN: |
|
98 |
lf.zoom(); |
|
99 |
break; |
|
100 |
case ToolbarTypeEnum.ZOOM_OUT: |
|
101 |
lf.zoom(true); |
|
102 |
break; |
|
103 |
case ToolbarTypeEnum.RESET_ZOOM: |
|
104 |
lf.resetZoom(); |
|
105 |
break; |
|
106 |
case ToolbarTypeEnum.UNDO: |
|
107 |
lf.undo(); |
|
108 |
break; |
|
109 |
case ToolbarTypeEnum.REDO: |
|
110 |
lf.redo(); |
|
111 |
break; |
|
112 |
case ToolbarTypeEnum.SNAPSHOT: |
|
113 |
lf.getSnapshot(); |
|
114 |
break; |
|
115 |
case ToolbarTypeEnum.VIEW_DATA: |
064901
|
116 |
emit('view-data'); |
e1bc33
|
117 |
break; |
V |
118 |
} |
|
119 |
}; |
|
120 |
|
|
121 |
watchEffect(async () => { |
|
122 |
if (unref(logicFlow)) { |
|
123 |
await nextTick(); |
|
124 |
unref(logicFlow)?.on('history:change', onHistoryChange); |
|
125 |
} |
|
126 |
}); |
|
127 |
|
|
128 |
onUnmounted(() => { |
|
129 |
unref(logicFlow)?.off('history:change', onHistoryChange); |
|
130 |
}); |
|
131 |
return { toolbarItemList, onControl }; |
|
132 |
}, |
|
133 |
}); |
|
134 |
</script> |
064901
|
135 |
<style lang="less"> |
e1bc33
|
136 |
@prefix-cls: ~'@{namespace}-flow-chart-toolbar'; |
V |
137 |
|
064901
|
138 |
html[data-theme='dark'] { |
V |
139 |
.lf-dnd { |
|
140 |
background: #080808; |
|
141 |
} |
|
142 |
} |
e1bc33
|
143 |
.@{prefix-cls} { |
V |
144 |
height: 36px; |
064901
|
145 |
background-color: @app-content-background; |
e1bc33
|
146 |
border-bottom: 1px solid @border-color-base; |
V |
147 |
|
|
148 |
.disabeld { |
|
149 |
color: @disabled-color; |
|
150 |
} |
|
151 |
|
|
152 |
&__icon { |
|
153 |
display: inline-block; |
|
154 |
padding: 2px 4px; |
|
155 |
margin-right: 10px; |
|
156 |
|
|
157 |
&:hover { |
|
158 |
color: @primary-color; |
|
159 |
} |
|
160 |
} |
|
161 |
} |
|
162 |
</style> |