fix: right-click menu

This commit is contained in:
ShawnPhang 2024-04-10 21:32:29 +08:00
parent f6903eee7c
commit 22ecc9900d

View File

@ -14,7 +14,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, onMounted, ref } from 'vue' import { computed, onMounted, ref, toRaw } from 'vue'
import { import {
widgetMenu as widget, widgetMenu as widget,
pageMenu as page, pageMenu as page,
@ -22,22 +22,19 @@ import {
TMenuItemData, TWidgetItemData, TMenuItemData, TWidgetItemData,
} from './rcMenuData' } from './rcMenuData'
import { getTarget } from '@/common/methods/target' import { getTarget } from '@/common/methods/target'
// import { useSetupMapGetters } from '@/common/hooks/mapGetters';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useControlStore, useWidgetStore } from '@/store'; import { useControlStore, useWidgetStore } from '@/store';
const menuListData = ref<TMenuItemData>({...menu}) const menuListData = ref<TMenuItemData>({...menu})
const showMenuBg = ref<boolean>(false) const showMenuBg = ref<boolean>(false)
const widgetMenu = ref<TWidgetItemData[]>({...widget}) const widgetMenu = ref<TWidgetItemData[]>([...widget])
const pageMenu = ref<TWidgetItemData[]>({...page}) const pageMenu = ref<TWidgetItemData[]>([...page])
const widgetStore = useWidgetStore() const widgetStore = useWidgetStore()
// const {dActiveElement, dWidgets, dCopyElement} = useSetupMapGetters(['dActiveElement', 'dWidgets', 'dCopyElement'])
const {dActiveElement, dWidgets, dCopyElement} = storeToRefs(widgetStore) const {dActiveElement, dWidgets, dCopyElement} = storeToRefs(widgetStore)
const { dAltDown } = storeToRefs(useControlStore()) const { dAltDown } = storeToRefs(useControlStore())
const styleObj = computed(() => { const styleObj = computed(() => {
return { return {
left: menuListData.value.left + 'px', left: menuListData.value.left + 'px',
@ -75,9 +72,6 @@ async function mouseRightClick(e: MouseEvent) {
widgetStore.selectWidget({ widgetStore.selectWidget({
uuid: uuid ?? '-1', uuid: uuid ?? '-1',
}) })
// store.dispatch('selectWidget', {
// uuid: uuid ?? '-1',
// })
showMenu(e) showMenu(e)
} }
} }
@ -119,14 +113,12 @@ function selectMenu(type: TWidgetItemData['type']) {
switch (type) { switch (type) {
case 'copy': case 'copy':
widgetStore.copyWidget() widgetStore.copyWidget()
// store.dispatch('copyWidget')
break break
case 'paste': case 'paste':
if (dCopyElement.value.length === 0) { if (dCopyElement.value.length === 0) {
return return
} }
widgetStore.pasteWidget() widgetStore.pasteWidget()
// store.dispatch('pasteWidget')
break break
case 'index-up': case 'index-up':
widgetStore.updateLayerIndex({ widgetStore.updateLayerIndex({
@ -134,11 +126,6 @@ function selectMenu(type: TWidgetItemData['type']) {
value: 1, value: 1,
isGroup: dActiveElement.value?.isContainer, isGroup: dActiveElement.value?.isContainer,
}) })
// store.dispatch('updateLayerIndex', {
// uuid: dActiveElement.value.uuid,
// value: 1,
// isGroup: dActiveElement.value.isContainer,
// })
break break
case 'index-down': case 'index-down':
widgetStore.updateLayerIndex({ widgetStore.updateLayerIndex({
@ -146,19 +133,12 @@ function selectMenu(type: TWidgetItemData['type']) {
value: -1, value: -1,
isGroup: dActiveElement.value?.isContainer, isGroup: dActiveElement.value?.isContainer,
}) })
// store.dispatch('updateLayerIndex', {
// uuid: dActiveElement.value.uuid,
// value: -1,
// isGroup: dActiveElement.value.isContainer,
// })
break break
case 'del': case 'del':
widgetStore.deleteWidget() widgetStore.deleteWidget()
// store.dispatch('deleteWidget')
break break
case 'ungroup': case 'ungroup':
widgetStore.ungroup(dActiveElement.value?.uuid || "") widgetStore.ungroup(dActiveElement.value?.uuid || "")
// store.dispatch('ungroup', dActiveElement.value.uuid)
break break
} }
closeMenu() closeMenu()