From 12d27d7f4157510141b62fafe150f6a7a2df6fa4 Mon Sep 17 00:00:00 2001
From: IchliebedichZhu <54796446@qq.com>
Date: Mon, 4 Mar 2024 21:05:29 +0000
Subject: [PATCH] feat: convert right-click-menu component to vue3

---
 src/common/hooks/mapGetters.ts                |  13 +
 src/common/methods/target.ts                  |   2 +-
 .../ImageExtraction/ImageExtraction.vue       | 107 --------
 .../business/picture-selector/index.vue       |   4 +-
 src/components/business/qrcode/index.vue      |   2 +-
 src/components/business/qrcode/method.ts      |   9 +-
 .../business/right-click-menu/RcMenu.vue      | 242 +++++++++---------
 .../business/right-click-menu/rcMenuData.ts   |  23 +-
 8 files changed, 167 insertions(+), 235 deletions(-)
 create mode 100644 src/common/hooks/mapGetters.ts
 delete mode 100644 src/components/business/image-cutout/ImageExtraction/ImageExtraction.vue

diff --git a/src/common/hooks/mapGetters.ts b/src/common/hooks/mapGetters.ts
new file mode 100644
index 0000000..98a3008
--- /dev/null
+++ b/src/common/hooks/mapGetters.ts
@@ -0,0 +1,13 @@
+import { ComputedRef, computed } from 'vue'
+import { useStore } from 'vuex'
+
+export function useSetupMapGetters<T extends string>(strList: T[]) {
+  const mapData: Partial<{[x in T]: ComputedRef}> = {}
+  const getters = useStore().getters
+
+  strList.forEach(val => {
+    mapData[val] = computed(() => getters[val])
+  })
+
+  return mapData as {[x in T]: ComputedRef}
+}
diff --git a/src/common/methods/target.ts b/src/common/methods/target.ts
index 90d1c60..163144a 100644
--- a/src/common/methods/target.ts
+++ b/src/common/methods/target.ts
@@ -8,7 +8,7 @@
 // TODO: Group类型比较特殊，所以需要全量循环并判断是否为group
 const arr = ['w-text', 'w-image', 'w-svg', 'w-group', 'w-qrcode']
 
-export function getTarget(currentTarget: HTMLElement) {
+export function getTarget(currentTarget: HTMLElement): Promise<HTMLElement | null> {
   let collector: string[] = []
   let groupTarger: HTMLElement | null = null
   let saveTarger: HTMLElement | null = null
diff --git a/src/components/business/image-cutout/ImageExtraction/ImageExtraction.vue b/src/components/business/image-cutout/ImageExtraction/ImageExtraction.vue
deleted file mode 100644
index 111585d..0000000
--- a/src/components/business/image-cutout/ImageExtraction/ImageExtraction.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<!--
- * Old Component File
- * @Author: ShawnPhang
- * @Date: 2023-10-08 14:15:17
- * @Description: 手动抠图 - 修补擦除
- * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2023-10-09 01:28:11
--->
-<!-- <template>
-  <div>
-    <el-dialog v-model="show" align-center width="90%" @close="showMatting = false">
-      <template #header>
-        <div class="tool-wrap">
-          <el-button type="primary" plain @click="done">确认应用</el-button>
-          <el-radio-group v-model="isErasing" style="margin-left: 35px">
-            <el-radio :label="false" size="large"> <b>修补画笔</b> <i class="icon sd-xiubu" /></el-radio>
-            <el-radio :label="true" size="large"> <b>擦除画笔</b> <i class="icon sd-cachu" /></el-radio>
-          </el-radio-group>
-          <number-slider v-model="radius" class="slider-wrap" label="画笔尺寸" :showInput="false" labelWidth="90px" :maxValue="constants.RADIUS_SLIDER_MAX" :minValue="constants.RADIUS_SLIDER_MIN" :step="constants.RADIUS_SLIDER_STEP" />
-          <number-slider v-model="hardness" class="slider-wrap" label="画笔硬度" :showInput="false" labelWidth="90px" :maxValue="constants.HARDNESS_SLIDER_MAX" :minValue="constants.HARDNESS_SLIDER_MIN" :step="constants.HARDNESS_SLIDER_STEP" />
-        </div>
-      </template>
-      <matting v-if="showMatting" :hasHeader="false" @register="mattingStart" />
-    </el-dialog>
-  </div>
-</template> -->
-
-<script lang="ts">
-// import { defineComponent, reactive, toRefs, nextTick } from 'vue'
-// import matting, { MattingType } from '@palxp/image-extraction'
-// import { ElRadioGroup, ElRadio } from 'element-plus'
-// import numberSlider from '@/components/modules/settings/numberSlider.vue'
-
-// export default defineComponent({
-//   components: { matting, ElRadioGroup, ElRadio, numberSlider },
-//   setup() {
-//     const state: any = reactive({
-//       show: false,
-//       showMatting: false,
-//       isErasing: false,
-//       radius: 0, // 画笔尺寸
-//       brushSize: '', // 画笔尺寸：计算属性，显示值
-//       hardness: 0, // 画笔硬度
-//       hardnessText: '', // 画笔硬度：计算属性，显示值
-//       constants: {},
-//     })
-
-//     const params: any = { raw: '', result: '' }
-//     let matting: MattingType | any = {}
-//     let callback: any = null // 传回自动抠图的回调
-
-//     const mattingStart: any = (mattingOptions: MattingType) => {
-//       mattingOptions.initLoadImages(params.raw, params.result)
-//       state.isErasing = mattingOptions.isErasing
-//       state.radius = mattingOptions.radius
-//       state.hardness = mattingOptions.hardness
-//       state.constants = mattingOptions.constants
-//       matting = mattingOptions
-//     }
-
-//     const open = async (raw: any, result: any, cb: any) => {
-//       state.show = true
-//       params.raw = raw
-//       params.result = result
-//       await nextTick()
-//       setTimeout(() => {
-//         state.showMatting = true
-//       }, 300)
-//       callback = cb
-//     }
-
-//     const done = () => {
-//       state.show = false
-//       callback(matting.getResult())
-//     }
-
-//     return {
-//       ...toRefs(state),
-//       open,
-//       done,
-//       mattingStart,
-//     }
-//   },
-// })
-</script>
-
-<style lang="less" scoped>
-:deep(.el-dialog__body) {
-  padding: 0 !important;
-}
-:deep(.el-dialog__header) {
-  padding: 10px 35px;
-  // var(--el-dialog-padding-primary)
-}
-.tool-wrap {
-  display: flex;
-  align-items: center;
-}
-// .tool-left {
-//   display: inline-flex;
-//   flex: 1;
-// }
-.slider-wrap {
-  margin-left: 35px;
-  width: 240px;
-}
-</style>
diff --git a/src/components/business/picture-selector/index.vue b/src/components/business/picture-selector/index.vue
index f67f707..421a25c 100644
--- a/src/components/business/picture-selector/index.vue
+++ b/src/components/business/picture-selector/index.vue
@@ -2,8 +2,8 @@
  * @Author: ShawnPhang
  * @Date: 2022-10-08 10:07:19
  * @Description:  
- * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2023-10-05 00:04:51
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>, Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @Date: 2024-03-04 18:10:00
 -->
 <template>
   <el-dialog v-model="state.dialogVisible" title="选择图片" @close="close">
diff --git a/src/components/business/qrcode/index.vue b/src/components/business/qrcode/index.vue
index 3828c6e..e6c06dd 100644
--- a/src/components/business/qrcode/index.vue
+++ b/src/components/business/qrcode/index.vue
@@ -3,7 +3,7 @@
  * @Date: 2022-03-16 09:15:52
  * @Description:  
  * @LastEditors: ShawnPhang <https://m.palxp.cn>, Jeremy Yu <https://github.com/JeremyYu-cn>
- * @Date: 2024-03-04 09:50:00
+ * @Date: 2024-03-04 18:50:00
 -->
 <template>
   <div ref="qrCodeDom" class="qrcode__wrap"></div>
diff --git a/src/components/business/qrcode/method.ts b/src/components/business/qrcode/method.ts
index 7eb2471..bb823f9 100644
--- a/src/components/business/qrcode/method.ts
+++ b/src/components/business/qrcode/method.ts
@@ -1,4 +1,11 @@
-import { CornerDotType,Options } from "qr-code-styling"
+/*
+ * @Author: Jeremy Yu
+ * @Date: 2024-03-04 18:10:00
+ * @Description:  
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @Date: 2024-03-04 18:10:00
+ */
+import { CornerDotType, Options } from "qr-code-styling"
 import { TQrcodeProps } from "./index.vue"
 
 /** 生成二维码数据 */
diff --git a/src/components/business/right-click-menu/RcMenu.vue b/src/components/business/right-click-menu/RcMenu.vue
index 8522c48..22fdf37 100644
--- a/src/components/business/right-click-menu/RcMenu.vue
+++ b/src/components/business/right-click-menu/RcMenu.vue
@@ -1,136 +1,142 @@
 <template>
   <div v-show="showMenuBg" id="menu-bg" class="menu-bg" @click="closeMenu">
     <ul ref="menuList" class="menu-list" :style="styleObj">
-      <li v-for="(item, index) in menuList.list" :key="index" :class="{ 'menu-item': true, 'disable-menu': dCopyElement.length === 0 && item.type === 'paste' }" @click.stop="selectMenu(item.type)">
+      <li v-for="(item, index) in menuListData.list" :key="index" :class="{ 'menu-item': true, 'disable-menu': dCopyElement.length === 0 && item.type === 'paste' }" @click.stop="selectMenu(item.type)">
         {{ item.text }}
       </li>
     </ul>
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-import { mapGetters, mapActions } from 'vuex'
-import { widgetMenu, pageMenu, menuList } from './rcMenuData'
+<script lang="ts" setup>
+import { computed, onMounted, ref } from 'vue'
+import { useStore } from 'vuex'
+import { 
+  widgetMenu as widget, 
+  pageMenu as page,
+  menuList as menu, 
+  TMenuItemData, TWidgetItemData, 
+} from './rcMenuData'
 import { getTarget } from '@/common/methods/target'
+import { useSetupMapGetters } from '@/common/hooks/mapGetters';
 
-export default defineComponent({
-  setup() {},
-  data() {
-    return {
-      menuList,
-      showMenuBg: false,
-      widgetMenu,
-      pageMenu,
-    }
-  },
-  computed: {
-    ...mapGetters(['dActiveElement', 'dAltDown', 'dWidgets', 'dCopyElement']),
-    styleObj() {
-      return {
-        left: this.menuList.left + 'px',
-        top: this.menuList.top + 'px',
+const store = useStore()
+const menuListData = ref<TMenuItemData>({...menu})
+const showMenuBg = ref<boolean>(false)
+const widgetMenu = ref<TWidgetItemData[]>({...widget})
+const pageMenu = ref<TWidgetItemData[]>({...page})
+
+const {dActiveElement, dAltDown, dWidgets, dCopyElement} = useSetupMapGetters(['dActiveElement', 'dAltDown', 'dWidgets', 'dCopyElement'])
+
+const styleObj = computed(() => {
+  return {
+    left: menuListData.value.left + 'px',
+    top: menuListData.value.top + 'px',
+  }
+})
+
+onMounted(() => {
+  document.oncontextmenu = mouseRightClick
+})
+async function mouseRightClick(e: MouseEvent) {
+  e.stopPropagation()
+  e.preventDefault()
+  if (showMenuBg.value) {
+    showMenuBg.value = false
+    return
+  }
+  if (!e.target) return
+  let target = await getTarget(e.target as HTMLElement)
+  if (!target) return
+  let type = target.getAttribute('data-type')
+  if (type) {
+    let uuid = target.getAttribute('data-uuid') // 设置选中元素
+
+    if (uuid !== '-1' && !dAltDown) {
+      let widget = dWidgets.value.find((item: any) => item.uuid === uuid)
+      if (
+        widget.parent !== '-1' && 
+        widget.parent !== dActiveElement.value.uuid &&
+        widget.parent !== dActiveElement.value.parent
+      ) {
+        uuid = widget.parent
       }
-    },
-  },
-  mounted() {
-    document.oncontextmenu = this.mouseRightClick
-  },
-  methods: {
-    ...mapActions(['selectWidget', 'copyWidget', 'pasteWidget', 'updateLayerIndex', 'deleteWidget', 'ungroup']),
-    async mouseRightClick(e: any) {
-      e.stopPropagation()
-      e.preventDefault()
-      if (this.showMenuBg) {
-        this.showMenuBg = false
+    }
+    store.dispatch('selectWidget', {
+      uuid: uuid ?? '-1',
+    })
+    showMenu(e)
+  }
+}
+
+function showMenu(e: MouseEvent) {
+  let isPage = dActiveElement.value.uuid === '-1'
+  menuListData.value.list = isPage ? pageMenu.value : widgetMenu.value
+  if (dActiveElement.value.isContainer) {
+    let ungroup: TWidgetItemData[] = [
+      {
+        type: 'ungroup',
+        text: '取消组合',
+      },
+    ]
+    menuListData.value.list = ungroup.concat(menuListData.value.list)
+  }
+  showMenuBg.value = true
+  // document.getElementById('menu-bg').addEventListener('click', this.closeMenu, false)
+  let mx = e.pageX
+  let my = e.pageY
+  let listWidth = 120
+  if (mx + listWidth > window.innerWidth) {
+    mx -= listWidth
+  }
+  let listHeight = (14 + 10) * menuListData.value.list.length + 10
+  if (my + listHeight > window.innerHeight) {
+    my -= listHeight
+  }
+  menuListData.value.left = mx
+  menuListData.value.top = my
+}
+
+function closeMenu() {
+  showMenuBg.value = false
+}
+
+/** 点击菜单触发事件 */
+function selectMenu(type: TWidgetItemData['type']) {
+  switch (type) {
+    case 'copy':
+      store.dispatch('copyWidget')
+      break
+    case 'paste':
+      if (dCopyElement.value.length === 0) {
         return
       }
-      // let target = e.target
-      let target = await getTarget(e.target)
+      store.dispatch('pasteWidget')
+      break
+    case 'index-up':
+      store.dispatch('updateLayerIndex', {
+        uuid: dActiveElement.value.uuid,
+        value: 1,
+        isGroup: dActiveElement.value.isContainer,
+      })
+      break
+    case 'index-down':
+      store.dispatch('updateLayerIndex', {
+        uuid: dActiveElement.value.uuid,
+        value: -1,
+        isGroup: dActiveElement.value.isContainer,
+      })
+      break
+    case 'del':
+      store.dispatch('deleteWidget')
+      break
+    case 'ungroup':
+      store.dispatch('ungroup', dActiveElement.value.uuid)
+      break
+  }
+  closeMenu()
+}
 
-      let type = target.getAttribute('data-type')
-      if (type) {
-        let uuid = target.getAttribute('data-uuid') // 设置选中元素
-
-        if (uuid !== '-1' && !this.dAltDown) {
-          let widget = this.dWidgets.find((item: any) => item.uuid === uuid)
-          if (widget.parent !== '-1' && widget.parent !== this.dActiveElement.uuid && widget.parent !== this.dActiveElement.parent) {
-            uuid = widget.parent
-          }
-        }
-        this.selectWidget({
-          uuid: uuid || '-1',
-        })
-        this.showMenu(e)
-      }
-    },
-    showMenu(e: any) {
-      let isPage = this.dActiveElement.uuid === '-1'
-      this.menuList.list = isPage ? this.pageMenu : this.widgetMenu
-      if (this.dActiveElement.isContainer) {
-        let ungroup = [
-          {
-            type: 'ungroup',
-            text: '取消组合',
-          },
-        ]
-        this.menuList.list = ungroup.concat(this.menuList.list)
-      }
-      this.showMenuBg = true
-      // document.getElementById('menu-bg').addEventListener('click', this.closeMenu, false)
-      let mx = e.pageX
-      let my = e.pageY
-      let listWidth = 120
-      if (mx + listWidth > window.innerWidth) {
-        mx -= listWidth
-      }
-      let listHeight = (14 + 10) * this.menuList.list.length + 10
-      if (my + listHeight > window.innerHeight) {
-        my -= listHeight
-      }
-      this.menuList.left = mx
-      this.menuList.top = my
-    },
-    closeMenu() {
-      this.showMenuBg = false
-      // document.getElementById('menu-bg').removeEventListener('click', this.closeMenu, false)
-    },
-    selectMenu(type) {
-      switch (type) {
-        case 'copy':
-          this.copyWidget()
-          break
-        case 'paste':
-          if (this.dCopyElement.length === 0) {
-            return
-          }
-          this.pasteWidget()
-          break
-        case 'index-up':
-          this.updateLayerIndex({
-            uuid: this.dActiveElement.uuid,
-            value: 1,
-            isGroup: this.dActiveElement.isContainer,
-          })
-          break
-        case 'index-down':
-          this.updateLayerIndex({
-            uuid: this.dActiveElement.uuid,
-            value: -1,
-            isGroup: this.dActiveElement.isContainer,
-          })
-          break
-        case 'del':
-          this.deleteWidget()
-          break
-        case 'ungroup':
-          this.ungroup(this.dActiveElement.uuid)
-          break
-      }
-      this.closeMenu()
-    },
-  },
-})
 </script>
 
 <style lang="less" scoped>
diff --git a/src/components/business/right-click-menu/rcMenuData.ts b/src/components/business/right-click-menu/rcMenuData.ts
index 58867e3..beb731f 100644
--- a/src/components/business/right-click-menu/rcMenuData.ts
+++ b/src/components/business/right-click-menu/rcMenuData.ts
@@ -2,15 +2,28 @@
  * @Author: ShawnPhang
  * @Date: 2021-07-30 17:38:50
  * @Description:
- * @LastEditors: ShawnPhang
- * @LastEditTime: 2021-07-30 18:15:22
+ * @LastEditors: ShawnPhang, Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @Date: 2024-03-04 18:50:00
  */
-export const menuList: any = {
+
+export type TMenuItemData = {
+  left: number
+  top: number
+  list: TWidgetItemData[]
+}
+
+export const menuList: TMenuItemData = {
   left: 0,
   top: 0,
   list: [],
 }
-export const widgetMenu = [
+
+export type TWidgetItemData = {
+  type: 'copy' | 'paste' | 'index-up' | 'index-down' | 'del' | 'ungroup'
+  text: string
+}
+
+export const widgetMenu: TWidgetItemData[] = [
   {
     type: 'copy',
     text: '复制',
@@ -33,7 +46,7 @@ export const widgetMenu = [
   },
 ]
 
-export const pageMenu = [
+export const pageMenu: TWidgetItemData[] = [
   {
     type: 'paste',
     text: '粘贴',