feat: convert wGroup component to composition API

src/components/modules/widgets/wGroup/groupSetting.ts

@@ -0,0 +1,23 @@
+
+
+export const wGroupSetting = {
+  name: '组合',
+  type: 'w-group',
+  uuid: -1,
+  width: 0,
+  height: 0,
+  left: 0,
+  top: 0,
+  transform: '',
+  opacity: 1,
+  parent: '-1',
+  isContainer: true,
+  record: {
+    width: 0,
+    height: 0,
+    minWidth: 0,
+    minHeight: 0,
+    dir: 'none',
+  },
+}
+

src/components/modules/widgets/wGroup/wGroup.vue

@@ -8,11 +8,11 @@
 <template>
   <div
     ref="widget"
-    :class="['w-group', { 'layer-lock': params.lock }]"
+    :class="['w-group', { 'layer-lock': props.params?.lock }]"
     :style="{
       position: 'absolute',
-      left: params.left - parent.left + 'px',
+      left: (props.params.left || 0) - (props.parent?.left || 0) + 'px',
-      top: params.top - parent.top + 'px',
+      top: (props.params.top || 0) - (props.parent.top || 0) + 'px',
       width: params.width + 'px',
       height: params.height + 'px',
       opacity: params.opacity,
@@ -22,16 +22,40 @@
   </div>
 </template>
 
-<script>
+<script lang="ts" setup>
 // 组合组件
 const NAME = 'w-group'
-
+import { nextTick, onBeforeUnmount, onMounted, onUpdated, ref } from 'vue'
-import { mapGetters, mapActions } from 'vuex'
+import { mapGetters, mapActions, useStore } from 'vuex'
 import { setTransformAttribute } from '@/common/methods/handleTransform'
+import { useSetupMapGetters } from '@/common/hooks/mapGetters';
 
-export default {
+type TParamsData = {
-  name: NAME,
+  left: number
-  setting: {
+  top: number
+  width: number
+  height: number
+  opacity: number
+  rotate: number
+  uuid: string
+  lock: boolean
+  fontSize: number
+}
+
+type TProps = {
+  params?: Partial<TParamsData>
+  parent?: Partial<Pick<TParamsData, "top" | "left">>
+}
+const props = withDefaults(defineProps<TProps>(), {
+  params: () => ({}),
+  parent: () => ({})
+})
+const store = useStore();
+const widget = ref<HTMLElement | null>(null)
+const ratio = ref(0)
+const temp = ref<Record<string, any>>({})
+const compWidgetsRecord = ref<Record<string, any>>({})
+const setting = {
   name: '组合',
   type: NAME,
   uuid: -1,
@@ -50,156 +74,171 @@ export default {
     minHeight: 0,
     dir: 'none',
   },
-  },
+}
-  props: ['params', 'parent'],
+
-  data() {
+const timer = ref<number | null>(null)
-    return {
+const { dActiveElement, dWidgets } = useSetupMapGetters(['dActiveElement', 'dWidgets'])
-      // loading: false,
+
-      timer: null,
+// watch: {
+//   params: {
+//     async handler(nval) {
+//       this.updateRecord(nval.tempScale)
+//     },
+//     immediate: true,
+//     deep: true,
+//   },
+// },
+
+onUpdated(() => {
+  updateRecord()
+})
+
+onMounted(async () => {
+  await nextTick()
+  touchstart()
+  updateRecord()
+  document.addEventListener('mousedown', touchstart, false)
+  document.addEventListener('mouseup', touchend, false)
+  if (props.params?.rotate && widget.value) {
+    (widget.value.style.transform += `rotate(${props.params.rotate})`)
   }
-  },
+})
-  computed: {
+
-    ...mapGetters(['dActiveElement', 'dWidgets']),
+onBeforeUnmount(() => {
-  },
+  document.removeEventListener('mousedown', touchstart, false)
-  // watch: {
+  document.removeEventListener('mouseup', touchend, false)
-  //   params: {
+})
-  //     async handler(nval) {
+// ...mapActions(['updateWidgetData']),
-  //       this.updateRecord(nval.tempScale)
+
-  //     },
+function updateRecord(tempScale ?: number) {
-  //     immediate: true,
+  if (dActiveElement.value.uuid === props.params.uuid) {
-  //     deep: true,
-  //   },
-  // },
-  updated() {
-    this.updateRecord()
-  },
-  async mounted() {
-    await this.$nextTick()
-    this.touchstart()
-    this.updateRecord()
-    document.addEventListener('mousedown', this.touchstart, false)
-    document.addEventListener('mouseup', this.touchend, false)
-    this.params.rotate && (this.$refs.widget.style.transform += `rotate(${this.params.rotate})`)
-  },
-  beforeUnmount() {
-    document.removeEventListener('mousedown', this.touchstart, false)
-    document.removeEventListener('mouseup', this.touchend, false)
-  },
-  methods: {
-    ...mapActions(['updateWidgetData']),
-    updateRecord(tempScale) {
-      if (this.dActiveElement.uuid === this.params.uuid) {
     // clearTimeout(this.timer)
-        let record = this.dActiveElement.record
+    let record = dActiveElement.value.record
     if (record.width <= 0) {
-          this.touchend()
+      touchend()
     }
     // if (this.tempRecord && this.tempRecord.width && this.tempRecord.width != record.width) {
     //   return
     // }
-        this.ratio = tempScale || this.params.width / record.width
+    ratio.value = tempScale || (props.params.width || 0) / record.width
 
-        if (this.ratio != 1) {
+    if (ratio.value != 1) {
-          this.temp = {}
       if (record.width != 0) {
-            for (let i = this.dWidgets.length - 1; i >= 0; --i) {
+        for (let i = dWidgets.value.length - 1; i >= 0; --i) {
-              if (this.dWidgets[i].parent === this.params.uuid) {
+          if (dWidgets.value[i].parent === props.params.uuid) {
-                this.temp[this.dWidgets[i].uuid] = { width: this.dWidgets[i].width * this.ratio, height: this.dWidgets[i].height * this.ratio, raw: this.dWidgets[i] }
+            temp.value[dWidgets.value[i].uuid] = { width: dWidgets.value[i].width * ratio.value, height: dWidgets.value[i].height * ratio.value, raw: dWidgets.value[i] }
           }
         }
       }
       // TODO DOM Change
       // this.dActiveElement.scale = this.ratio
-          this.$refs.widget.style.transformOrigin = 'left top' // 设置scale的原点
+      if (widget.value) {
-          setTransformAttribute(this.$refs.widget, 'scale', this.ratio)
+        widget.value.style.transformOrigin = 'left top' // 设置scale的原点
+        setTransformAttribute(widget.value, 'scale', ratio.value)
+      }
       // this.timer = setTimeout(() => {
       //   this.touchend()
       // }, 300)
     }
   }
-    },
+}
-    touchstart() {
+
-      if (this.dActiveElement.uuid !== this.params.uuid) {
+function touchstart() {
+  if (dActiveElement.value.uuid !== props.params.uuid) {
     return
   }
-      this.tempRecord = {
+  const tempRecord = {
-        width: this.params.width,
+    width: props.params.width,
-        height: this.params.height,
+    height: props.params.height,
   }
-      this.compWidgetsRecord = {}
+  for (let i = dWidgets.value.length - 1; i >= 0; --i) {
-      for (let i = this.dWidgets.length - 1; i >= 0; --i) {
+    if (dWidgets.value[i].parent === props.params.uuid) {
-        if (this.dWidgets[i].parent === this.params.uuid) {
+      const el = document.getElementById(dWidgets.value[i].uuid)
-          this.compWidgetsRecord[this.dWidgets[i].uuid] = {
+      if (el) {
-            left: Number(document.getElementById(this.dWidgets[i].uuid).style.left.replace('px', '')),
+        compWidgetsRecord.value[dWidgets.value[i].uuid] = {
-            top: Number(document.getElementById(this.dWidgets[i].uuid).style.top.replace('px', '')),
+          left: Number(el.style.left.replace('px', '')),
-            fontSize: Number(document.getElementById(this.dWidgets[i].uuid).style.fontSize?.replace('px', '')),
+          top: Number(el.style.top.replace('px', '')),
+          fontSize: Number(el.style.fontSize?.replace('px', '')),
         }
       }
     }
-    },
+  }
-    touchend() {
+}
-      if (this.dActiveElement.uuid !== this.params.uuid) {
+
+function touchend() {
+  if (dActiveElement.value.uuid !== props.params.uuid) {
     return
   }
   // const opacity = this.$refs.widget.style.opacity
   // this.$refs.widget.style.opacity = 1
   setTimeout(() => {
-        if (!this.temp) {
+    if (!temp.value || !widget.value) {
       return
     }
-        this.$refs.widget.style.opacity = 0
+    widget.value.style.opacity = `${0}`
-        setTransformAttribute(this.$refs.widget, 'scale', 1)
+    setTransformAttribute(widget.value, 'scale', 1)
     setTimeout(() => {
-          this.$refs.widget.style.opacity = this.params.opacity
+      if (!widget.value) return
+      widget.value.style.opacity = `${props.params.opacity}`
       // this.$refs.widget.style.transformOrigin = 'center' // 设置scale的原点
     }, 100)
 
     // const opacity = this.$refs.widget.style.opacity
     // setTransformAttribute(this.$refs.widget, 'scale', 1)
-        for (const key in this.temp) {
+    for (const key in temp.value) {
-          if (Object.hasOwnProperty.call(this.temp, key)) {
+      if (Object.hasOwnProperty.call(temp.value, key)) {
-            this.keyChange(key, 'width', this.temp[key].width)
+        keyChange(key, 'width', temp.value[key].width)
-            this.keyChange(key, 'height', this.temp[key].height)
+        keyChange(key, 'height', temp.value[key].height)
         // 重新拿前面设定好的，实时DOM修改过了
-            this.keySetValue(key, 'left', this.compWidgetsRecord[key].left * this.ratio)
+        keySetValue(key, 'left', compWidgetsRecord.value[key].left * ratio.value)
-            this.keySetValue(key, 'top', this.compWidgetsRecord[key].top * this.ratio)
+        keySetValue(key, 'top', compWidgetsRecord.value[key].top * ratio.value)
         // this.keySetValue(key, 'left', Number(document.getElementById(key).style.left.replace('px', '')) * this.ratio)
         // this.keySetValue(key, 'top', Number(document.getElementById(key).style.top.replace('px', '')) * this.ratio)
-            if (this.temp[key].raw.type === 'w-text') {
+        if (temp.value[key].raw.type === 'w-text') {
-              this.keyChange(key, 'fontSize', this.compWidgetsRecord[key].fontSize * this.ratio)
+          keyChange(key, 'fontSize', compWidgetsRecord.value[key].fontSize * ratio.value)
           // this.keyChange(key, 'fontSize', this.temp[key].raw.fontSize * this.ratio)
           // this.keyChange(key, 'letterSpacing', this.temp[key].raw.letterSpacing * this.ratio)
         }
       }
     }
     // this.$refs.widget.style.opacity = opacity
-        this.temp = null
+    temp.value = {}
 
-        if (this.dActiveElement.uuid === this.params.uuid) {
+    if (dActiveElement.value.uuid === props.params.uuid) {
-          let record = this.dActiveElement.record
+      let record = dActiveElement.value.record
-          record.width = this.$refs.widget?.offsetWidth
+      record.width = widget.value?.offsetWidth
-          record.height = this.$refs.widget?.offsetHeight
+      record.height = widget.value?.offsetHeight
-          this.dActiveElement.width = this.$refs.widget?.offsetWidth
+      dActiveElement.value.width = widget.value?.offsetWidth
-          this.dActiveElement.height = this.$refs.widget?.offsetHeight
+      dActiveElement.value.height = widget.value?.offsetHeight
     }
   }, 10)
-    },
+}
-    keyChange(uuid, key, value) {
+function keyChange(uuid: string, key: keyof TParamsData, value: number) {
-      this.updateWidgetData({
+  store.dispatch('updateWidgetData', {
     uuid,
     key,
     value,
     pushHistory: false,
   })
-    },
+  // updateWidgetData({
-    keySetValue(uuid, key, value) {
+  //   uuid,
-      setTimeout(() => {
+  //   key,
-        const widget = this.dWidgets.find((item) => item.uuid === uuid)
+  //   value,
-        widget[key] = value + Number(this.params[key])
+  //   pushHistory: false,
-      }, 10)
+  // })
-    },
-  },
 }
+
+function keySetValue(uuid: string, key: keyof TParamsData, value: number) {
+  setTimeout(() => {
+    const widget = dWidgets.value.find((item: TParamsData) => item.uuid === uuid)
+    widget[key] = value + Number(props.params[key] || '')
+  }, 10)
+}
+
+defineExpose({
+  setting
+})
+
 </script>
 
 <style lang="less" scoped>

src/views/Draw.vue

@@ -20,6 +20,7 @@ import designBoard from '@/components/modules/layout/designBoard/index.vue'
 import zoomControl from '@/components/modules/layout/zoomControl/index.vue'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import { useRoute } from 'vue-router'
+import { wGroupSetting } from '@/components/modules/widgets/wGroup/groupSetting'
 
 type TState = {
   style: StyleValue
@@ -36,7 +37,7 @@ const state = reactive<TState>({
 const { dPage } = useSetupMapGetters(['dPage'])
 
 onMounted(() => {
-  store.dispatch('initGroupJson', JSON.stringify(wGroup.setting))
+  store.dispatch('initGroupJson', JSON.stringify(wGroupSetting))
   // initGroupJson(JSON.stringify(wGroup.setting))
   nextTick(() => {
     load()

src/views/Index.vue

@@ -72,6 +72,7 @@ import HeaderOptions from './components/HeaderOptions.vue'
 import ProgressLoading from '@/components/common/ProgressLoading/index.vue'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import { useRoute } from 'vue-router'
+import { wGroupSetting } from '@/components/modules/widgets/wGroup/groupSetting'
 
 type TState = {
   style: CSSProperties
@@ -146,7 +147,7 @@ const { handleKeydowm, handleKeyup, dealCtrl } = shortcuts.methods
 let checkCtrl: number | undefined
 
 onMounted(() => {
-  store.dispatch('initGroupJson', JSON.stringify(wGroup.setting))
+  store.dispatch('initGroupJson', JSON.stringify(wGroupSetting))
   // initGroupJson(JSON.stringify(wGroup.setting))
   window.addEventListener('scroll', fixTopBarScroll)
   // window.addEventListener('click', this.clickListener)