fix: 修改右键判定区域,新增历史记录store

This commit is contained in:
MTrun
2022-01-31 23:37:43 +08:00
parent 50e62dbed7
commit 31d1983958
9 changed files with 128 additions and 46 deletions
@@ -1,63 +0,0 @@
import { reactive, ref, nextTick } from 'vue'
import { getChartEditStore } from './useStore.hook'
import { loadingError } from '@/utils'
const chartEditStore = getChartEditStore()
enum MenuEnum {
DELETE = 'delete'
}
export const useContextMenu = () => {
const showDropdownRef = ref(false)
const targetIndex = ref<number>(0)
// * 右键选项
const menuOptions = reactive([
{
label: '删除',
key: MenuEnum.DELETE
}
])
// * 右键处理
const handleContextMenu = (e: MouseEvent, index: number) => {
e.stopPropagation()
e.preventDefault()
targetIndex.value = index
let target = e.target
while (target instanceof SVGElement) {
target = target.parentNode
}
showDropdownRef.value = false
nextTick().then(() => {
chartEditStore.setMousePosition(e.clientX, e.clientY)
showDropdownRef.value = true
})
}
// * 失焦
const onClickoutside = (e: MouseEvent) => {
showDropdownRef.value = false
}
// * 事件处理
const handleMenuSelect = (key: string) => {
showDropdownRef.value = false
switch (key) {
case MenuEnum.DELETE:
chartEditStore.removeComponentList(targetIndex.value)
break
default: loadingError()
}
}
return {
showDropdownRef,
menuOptions,
handleContextMenu,
onClickoutside,
handleMenuSelect,
mousePosition: chartEditStore.getMousePosition
}
}
@@ -7,7 +7,7 @@ interface AttrType {
export const useComponentStyle = (attr: AttrType, index: number) => {
const componentStyle = {
zIndex: index,
zIndex: index + 1,
left: `${attr.x}px`,
top: `${attr.y}px`,
}