feat: convert wSvg component to composition API

src/common/methods/DesignFeatures/setWidgetData.ts

@@ -13,7 +13,8 @@ import wImageSetting from '@/components/modules/widgets/wImage/wImageSetting'
 // import wText from '@/components/modules/widgets/wText/wText.vue'
 import { wTextSetting } from '@/components/modules/widgets/wText/wTextSetting'
 import wImage from '@/components/modules/widgets/wImage/wImage.vue'
-import wSvg from '@/components/modules/widgets/wSvg/wSvg.vue'
+// import wSvg from '@/components/modules/widgets/wSvg/wSvg.vue'
+import { wSvgSetting } from '@/components/modules/widgets/wSvg/wSvgSetting'
 
 export default async function(type: string, item: TCommonItemData, data: Record<string, any>) {
   let setting = data
@@ -36,7 +37,7 @@ export default async function(type: string, item: TCommonItemData, data: Record<
     setting.mask = item.value.url
   }
   if (type === 'svg') {
-    setting = JSON.parse(JSON.stringify(wSvg.setting))
+    setting = JSON.parse(JSON.stringify(wSvgSetting))
     const img = await setImageData(item.value)
     setting.width = img.width
     setting.height = img.height // parseInt(100 / item.value.ratio, 10)

src/components/modules/panel/wrap/GraphListWrap.vue

@@ -43,7 +43,8 @@ import { defineComponent, reactive, toRefs, onMounted, watch } from 'vue'
 import api from '@/api'
 // import wImage from '../../widgets/wImage/wImage.vue'
 import wImageSetting from '../../widgets/wImage/wImageSetting'
-import wSvg from '../../widgets/wSvg/wSvg.vue'
+// import wSvg from '../../widgets/wSvg/wSvg.vue'
+import { wSvgSetting } from '../../widgets/wSvg/wSvgSetting'
 import { mapActions, mapGetters } from 'vuex'
 import setImageData from '@/common/methods/DesignFeatures/setImage'
 import DragHelper from '@/common/hooks/dragHelper'
@@ -160,7 +161,7 @@ export default defineComponent({
         return
       }
       this.$store.commit('setShowMoveable', false) // 清理掉上一次的选择
-      let setting = item.type === 'svg' ? JSON.parse(JSON.stringify(wSvg.setting)) : JSON.parse(JSON.stringify(wImageSetting))
+      let setting = item.type === 'svg' ? JSON.parse(JSON.stringify(wSvgSetting)) : JSON.parse(JSON.stringify(wImageSetting))
       const img: any = await setImageData(item)
 
       setting.width = img.width

src/components/modules/settings/EffectSelect/ContainerWrap.vue

@@ -42,7 +42,8 @@
 import api from '@/api'
 import { toRefs, reactive, watch, onMounted, nextTick } from 'vue'
 import { ElRadioGroup, ElRadioButton } from 'element-plus'
-import wSvg from '@/components/modules/widgets/wSvg/wSvg.vue'
+// import wSvg from '@/components/modules/widgets/wSvg/wSvg.vue'
+import {wSvgSetting} from '@/components/modules/widgets/wSvg/wSvgSetting'
 import { TGetListResult } from '@/api/material';
 
 type TProps = {
@@ -75,7 +76,7 @@ const state = reactive<TState>({
 
 const select = (value: string = '') => {
   state.visiable = false
-  const setting = JSON.parse(JSON.stringify(wSvg.setting))
+  const setting = JSON.parse(JSON.stringify(wSvgSetting))
   setting.svgUrl = value
   emit('change', setting)
 }

src/components/modules/widgets/wSvg/wSvg.vue

@@ -4,10 +4,10 @@
 <template>
   <div
     :id="params.uuid"
-    ref="widget"
+    ref="widgetRef"
     class="w-svg"
     :style="{
-      position,
+      position: state.position,
       left: params.left - parent.left + 'px',
       top: params.top - parent.top + 'px',
       width: params.width + 'px',
@@ -17,40 +17,34 @@
   ></div>
 </template>
 
-<script>
+<script lang="ts" setup>
 // svg
-const NAME = 'w-svg'
+// const NAME = 'w-svg'
+import { mapGetters, mapActions, useStore } from 'vuex'
+import { TWSvgSetting } from './wSvgSetting'
+import { CSSProperties, computed, nextTick, onBeforeMount, onMounted, onUpdated, reactive, ref, watch } from 'vue';
+import { useSetupMapGetters } from '@/common/hooks/mapGetters';
 
-import { mapGetters, mapActions } from 'vuex'
+type TProps = {
+  params: TWSvgSetting
+  parent: {
+    left: number
+    top: number
+  }
+}
 
-export default {
+type TState = {
-  name: NAME,
+  position: CSSProperties['position'], // 'absolute'relative
-  setting: {
+  editBoxStyle: CSSProperties,
-    name: '矢量图形',
+  editBoxs: Record<string, any>,
-    type: NAME,
+  editingKey: string,
-    uuid: -1,
+  cropWidgetXY: Record<string, any>, // 裁剪框移动作用
-    width: 100,
+  attrRecord: Record<string, any>, // 记录可更改的属性
-    height: 100,
+  svgImg: Record<string, any> | null
-    colors: [],
+}
-    left: 0,
+
-    top: 0,
+const props = defineProps<TProps>()
-    // zoom: 1.5,
+const state = reactive<TState>({
-    transform: '',
-    radius: 0,
-    opacity: 1,
-    parent: '-1',
-    svgUrl: '',
-    setting: [],
-    record: {
-      width: 0,
-      height: 0,
-      minWidth: 10,
-      minHeight: 10,
-    },
-  },
-  props: ['params', 'parent'],
-  data() {
-    return {
   position: 'absolute', // 'absolute'relative
   editBoxStyle: {
     transformOrigin: 'center',
@@ -59,66 +53,90 @@ export default {
   editingKey: '',
   cropWidgetXY: {}, // 裁剪框移动作用
   attrRecord: {}, // 记录可更改的属性
-    }
+  svgImg: null
-  },
-  computed: {
-    ...mapGetters(['dActiveElement', 'dZoom', 'dMouseXY']),
-    tZoom() {
-      return this.params.zoom
-    },
-    cropEdit() {
-      return this.params.cropEdit
-    },
-    imgChange() {
-      return this.params.imgUrl
-    },
-  },
-  watch: {
-    params: {
-      async handler(nval) {
-        this.attrsChange()
-      },
-      immediate: true,
-      deep: true,
-    },
-    async tZoom() {
-      await this.$nextTick()
-      this.updateRecord()
-    },
-    imgChange() {
-      // TODO 更新所有图片
-      this.svgImg.attr({
-        'xlink:href': this.params.imgUrl,
 })
+const store = useStore()
+// ...mapGetters(['dActiveElement', 'dZoom', 'dMouseXY']),
+const {
+  dActiveElement, dZoom, dMouseXY
+} = useSetupMapGetters(['dActiveElement', 'dZoom', 'dMouseXY'])
+
+const widgetRef = ref<HTMLElement | null>(null)
+
+let svgElements: Record<string, any>[] | null = null
+let viewBox = { width: 0, height: 0 }
+
+const tZoom = computed(() => {
+  return props.params.zoom
+})
+const cropEdit = computed(() => {
+  return props.params.cropEdit
+})
+const imgChange = computed(() => {
+  return props.params.imgUrl
+})
+
+watch(
+  () => props.params,
+  () => {
+    attrsChange()
   },
-    cropEdit(val) {
+  { immediate: true, deep: true }
-      // TODO 移动事件绑定
+)
-      if (val) {
+
-        document.getElementById(this.params.uuid).addEventListener('mousedown', this.touchstart, false)
+watch(
-      } else {
+  () => tZoom.value,
-        document.getElementById(this.params.uuid).removeEventListener('mousedown', this.touchstart, false)
+  async () => {
+    await nextTick()
+    updateRecord()
   }
-    },
+)
-  },
+
-  updated() {
+watch(
-    this.updateRecord()
+  () => imgChange.value,
-    this.$store.commit('updateRect')
+  () => {
-  },
+    if (!state.svgImg) return
-  async mounted() {
+    state.svgImg.attr({
-    await this.$nextTick()
+      'xlink:href': props.params.imgUrl,
-    await this.loadSvg()
+    })
-    this.updateRecord()
+  }
-    // document.getElementById(this.params.uuid).addEventListener('mousedown', this.touchstart, false)
+)
-    document.addEventListener('mouseup', this.touchend, false)
+
-    this.params.transform && (this.$refs.widget.style.transform = this.params.transform)
+watch(
-    this.params.rotate && (this.$refs.widget.style.transform += `rotate(${this.params.rotate})`)
+  () => cropEdit.value,
-  },
+  (val) => {
-  beforeUnmount() {
+    const el = document.getElementById(props.params.uuid)
-    document.removeEventListener('mouseup', this.touchend, false)
+    if (val) {
-  },
+      el?.addEventListener('mousedown', touchstart, false)
-  methods: {
+    } else {
-    ...mapActions(['updateWidgetData']),
+      el?.removeEventListener('mousedown', touchstart, false)
-    touchstart(e) {
+    }
+  }
+)
+
+onUpdated(() => {
+  updateRecord()
+  store.commit('updateRect')
+})
+
+onMounted(async () => {
+  await nextTick()
+  await loadSvg()
+  updateRecord()
+  document.getElementById(props.params.uuid)?.addEventListener('mousedown', touchstart, false)
+  document.addEventListener('mouseup', touchend, false)
+  if (!widgetRef.value) return
+  props.params.transform && (widgetRef.value.style.transform = props.params.transform)
+  props.params.rotate && (widgetRef.value.style.transform += `rotate(${props.params.rotate})`)
+})
+
+onBeforeMount(() => {
+  // document.removeEventListener('mouseup', touchend, false)
+})
+
+// ...mapActions(['updateWidgetData'])
+
+function touchstart(e: MouseEvent) {
   // TODO move start
   // const imgKey = e.target.getAttribute('img-key')
   // this.editingKey = imgKey
@@ -126,47 +144,52 @@ export default {
   //   transformOrigin: 'center',
   // }
   // const editBox = this.$refs[this.params.uuid + '_ebox_' + imgKey]
-      const editBox = this.$refs[this.params.uuid + '_ebox']
+  // const editBox = this.$refs[this.params.uuid + '_ebox']
-      this.cropWidgetXY = {
+  const editBox = document.getElementById(props.params.uuid + '_ebox')
+  if (editBox) {
+    state.cropWidgetXY = {
       x: Number(editBox.style.left.replace('px', '')) || 0,
       y: Number(editBox.style.top.replace('px', '')) || 0,
     }
+  }
   // 绑定鼠标移动事件
-      document.addEventListener('mousemove', this.handlemousemove, true)
+  document.addEventListener('mousemove', handlemousemove, true)
-    },
+}
-    touchend() {
+
+function touchend() {
   // 取消鼠标移动事件
-      document.removeEventListener('mousemove', this.handlemousemove, true)
+  document.removeEventListener('mousemove', handlemousemove, true)
   // document.removeEventListener('mouseup', () => {}, true)
-    },
+}
-    handlemousemove(e) {
+
+function handlemousemove(e: MouseEvent) {
   e.stopPropagation()
   e.preventDefault()
-      const { left, top } = this.move(e)
+  const { left, top } = move(e)
   // TODO
-      this.editBoxStyle.left = left + 'px'
+  state.editBoxStyle.left = left + 'px'
-      this.editBoxStyle.top = top + 'px'
+  state.editBoxStyle.top = top + 'px'
   // this.editBoxs[this.editingKey].left = left + 'px'
   // this.editBoxs[this.editingKey].top = top + 'px'
-      const { width, height } = this.params
+  const { width, height } = props.params
-      const { width: vWidth, height: vHeight } = this.viewBox
+  const { width: vWidth, height: vHeight } = viewBox
   const params = {
-        x: left / (width / vWidth) / this.params.zoom,
+    x: left / (width / vWidth) / (props.params.zoom || 0),
-        y: top / (height / vHeight) / this.params.zoom,
+    y: top / (height / vHeight) / (props.params.zoom || 0),
   }
   // this.svgImg.attr(params)
-      this.changeFinish('x', params.x)
+  changeFinish('x', params.x)
-      this.changeFinish('y', params.y)
+  changeFinish('y', params.y)
   // console.log('-----', left / (width / vWidth) / this.params.zoom)
-    },
+}
-    loadSvg() {
+
+function loadSvg() {
   // console.log(this.params)
-      const _this = this
+  const Snap = (window as any).Snap
-      const Snap = window.Snap
+  return new Promise<void>((resolve) => {
-      return new Promise((resolve) => {
     Snap.load(
-          this.params.svgUrl,
+      props.params.svgUrl,
-          function (svg) {
+      function (svg: Record<string, any>) {
         let svg2 = Snap(svg.node)
         // let item = svg2.select('circle')
         // item.attr({
@@ -179,18 +202,18 @@ export default {
         svg2.node.removeAttribute('height')
         svg2.node.setAttribute('style', 'height: inherit;width: inherit;')
         // svg2.node.setAttribute('height', 'inherit')
-            _this.svgElements = []
+        svgElements = []
-            const colorsObj = _this.color2obj()
+        const colorsObj = color2obj()
 
         deepElement(items)
 
-            function deepElement(els) {
+        function deepElement(els: Record<string, any>) {
           // 判断是NodeList对象则继续递归，否则进入元素处理工厂
           if (els.item) {
-                els.forEach((element) => {
+            els.forEach((element: Record<string, any>) => {
               elementFactory(element)
               if (element.childNodes.length > 0) {
-                    element.childNodes.forEach((element) => {
+                element.childNodes.forEach((element: Record<string, any>) => {
                   deepElement(element)
                 })
               }
@@ -200,19 +223,19 @@ export default {
           }
         }
         // 元素工厂: 遍历元素中是否存在可自定义的颜色属性
-            function elementFactory(element) {
+        function elementFactory(element: Record<string, any>) {
-              const attrsColor = {}
+          const attrsColor: Record<string, any> = {}
           try {
-                element.attributes.forEach((attr) => {
+            element.attributes.forEach((attr: Record<string, any>) => {
               if (colorsObj[attr.value]) {
                 // console.log(attr.name, colorsObj[attr.value])
                 attr.value = colorsObj[attr.value]
-                    attrsColor[attr.name] = _this.params.colors.findIndex((x) => x == attr.value)
+                attrsColor[attr.name] = props.params.colors.findIndex((x) => x == attr.value)
               }
             })
           } catch (e) {}
-              if (JSON.stringify(attrsColor) !== '{}') {
+          if (JSON.stringify(attrsColor) !== '{}' && svgElements) {
-                _this.svgElements.push({
+            svgElements.push({
               item: element,
               attrsColor,
             })
@@ -229,88 +252,101 @@ export default {
         //   transform: '',
         //   'xlink:href': _this.params.imgUrl || '',
         // })
-            const el = this || _this.$refs.widget
+        if (widgetRef.value) {
           // svg.node.classList.add('svg__box')
-            el.appendChild(svg.node)
+          widgetRef.value.appendChild(svg.node)
+        }
         resolve()
       },
-          document.getElementById(this.params.uuid),
+      document.getElementById(props.params.uuid),
     )
   })
-    },
+}
-    color2obj() {
+
-      const obj = {}
+function color2obj() {
-      for (let i = 0; i < this.params.colors.length; i++) {
+  const obj: Record<string, any> = {}
-        obj[`{{colors[${i}]}}`] = this.params.colors[i]
+  for (let i = 0; i < props.params.colors.length; i++) {
+    obj[`{{colors[${i}]}}`] = props.params.colors[i]
   }
   return obj
-    },
-    updateRecord() {
-      if (this.dActiveElement.uuid === this.params.uuid) {
-        let record = this.dActiveElement.record
-        record.width = this.$refs.widget.offsetWidth
-        record.height = this.$refs.widget.offsetHeight
 }
-      this.updateZoom()
+
-    },
+function updateRecord() {
-    updateZoom() {
+  if (dActiveElement.value.uuid === props.params.uuid) {
+    let record = dActiveElement.value.record
+    if (widgetRef.value) {
+      record.width = widgetRef.value.offsetWidth
+      record.height = widgetRef.value.offsetHeight
+    }
+  }
+  updateZoom()
+}
+
+function updateZoom() {
   // TODO
-      this.editBoxStyle.transform = `scale(${this.params.zoom})`
+  state.editBoxStyle.transform = `scale(${props.params.zoom})`
   // this.editingKey && (this.editBoxs[this.editingKey].transform = `scale(${this.params.zoom})`)
-      if (this.svgImg) {
+  if (state.svgImg) {
-        const { x, y } = this.params
+    const { x = 0, y = 0 } = props.params
-        this.svgImg.attr({
+    state.svgImg.attr({
-          x: x || 0,
+      x: x ?? 0,
-          y: y || 0,
+      y: y ?? 0,
-          style: `transform-origin: center;transform: scale(${this.params.zoom})`,
+      style: `transform-origin: center;transform: scale(${props.params.zoom})`,
     })
     // 根据图片位置设置回editBox的位置
-        const { width, height } = this.params
+    const { width, height } = props.params
-        const { width: vWidth, height: vHeight } = this.viewBox
+    const { width: vWidth, height: vHeight } = viewBox
     const params = {
-          left: x * (width / vWidth) * this.params.zoom,
+      left: x * (width / vWidth) * (props.params.zoom || 0),
-          top: y * (height / vHeight) * this.params.zoom,
+      top: y * (height / vHeight) * (props.params.zoom || 0),
     }
     // TODO
-        this.editBoxStyle.left = params.left + 'px'
+    state.editBoxStyle.left = params.left + 'px'
-        this.editBoxStyle.top = params.top + 'px'
+    state.editBoxStyle.top = params.top + 'px'
     // if (this.editingKey) {
     //   this.editBoxs[this.editingKey].left = params.left + 'px'
     //   this.editBoxs[this.editingKey].top = params.top + 'px'
     // }
   }
-    },
+}
-    changeFinish(key, value) {
+
-      this.updateWidgetData({
+function changeFinish(key: string, value: number) {
-        uuid: this.params.uuid,
+  store.dispatch("updateWidgetData", {
+    uuid: props.params.uuid,
     key: key,
     value: value,
     pushHistory: true,
   })
-    },
+  // this.updateWidgetData({
-    move(payload) {
+  //   uuid: this.params.uuid,
+  //   key: key,
+  //   value: value,
+  //   pushHistory: true,
+  // })
+}
+
+function move(payload: Record<string, any>) {
   // const widgetXY = { x: this.cropWidgetXY.x / this.dZoom, y: this.cropWidgetXY.y / this.dZoom }
-      const widgetXY = { x: this.cropWidgetXY.x, y: this.cropWidgetXY.y }
+  const widgetXY = { x: state.cropWidgetXY.x, y: state.cropWidgetXY.y }
-      const dx = Number(payload.pageX) - this.dMouseXY.x
+  const dx = Number(payload.pageX) - dMouseXY.value.x
-      const dy = Number(payload.pageY) - this.dMouseXY.y
+  const dy = Number(payload.pageY) - dMouseXY.value.y
-      let left = Number(widgetXY.x) + Math.floor((dx * 100) / this.dZoom)
+  let left = Number(widgetXY.x) + Math.floor((dx * 100) / dZoom.value)
-      let top = Number(widgetXY.y) + Math.floor((dy * 100) / this.dZoom)
+  let top = Number(widgetXY.y) + Math.floor((dy * 100) / dZoom.value)
   return { left, top }
-    },
+}
-    attrsChange() {
+
-      if (this.dActiveElement.uuid === this.params.uuid && this.svgElements) {
+function attrsChange() {
-        for (const element of this.svgElements) {
+  if (dActiveElement.value.uuid === props.params.uuid && svgElements) {
+    for (const element of svgElements) {
       const { item, attrsColor } = element
       for (const key in attrsColor) {
         if (Object.hasOwnProperty.call(attrsColor, key)) {
-              const color = this.params.colors[attrsColor[key]]
+          const color = props.params.colors[attrsColor[key]]
           item.setAttribute(key, color)
         }
       }
     }
   }
-    },
-  },
 }
 </script>
 

src/components/modules/widgets/wSvg/wSvgSetting.ts

@@ -0,0 +1,54 @@
+
+export type TWSvgSetting = {
+  name: string,
+  type: string,
+  uuid: string
+  width: number
+  height: number
+  colors: [],
+  left: number
+  top: number
+  // zoom: 1.5,
+  transform: string
+  radius: number
+  opacity: number
+  parent: string
+  svgUrl: string
+  setting: [],
+  record: {
+    width: number
+    height: number
+    minWidth: number
+    minHeight: number
+  },
+  zoom?: number
+  cropEdit?: boolean
+  imgUrl?: string
+  rotate?: number
+  x?: number
+  y?: number
+}
+
+export const wSvgSetting = {
+  name: '矢量图形',
+  type: "w-svg",
+  uuid: `-1`,
+  width: 100,
+  height: 100,
+  colors: [],
+  left: 0,
+  top: 0,
+  // zoom: 1.5,
+  transform: '',
+  radius: 0,
+  opacity: 1,
+  parent: '-1',
+  svgUrl: '',
+  setting: [],
+  record: {
+    width: 0,
+    height: 0,
+    minWidth: 10,
+    minHeight: 10,
+  },
+}

src/components/modules/widgets/wSvg/wSvgStyle.vue

@@ -7,22 +7,22 @@
 -->
 <template>
   <div id="w-image-style">
-    <el-collapse v-model="activeNames">
+    <el-collapse v-model="state.activeNames">
       <el-collapse-item title="位置尺寸" name="1">
         <div class="line-layout">
-          <number-input v-model="innerElement.left" label="X" @finish="(value) => finish('left', value)" />
+          <number-input v-model="state.innerElement.left" label="X" @finish="(value) => finish('left', value)" />
-          <number-input v-model="innerElement.top" label="Y" @finish="(value) => finish('top', value)" />
+          <number-input v-model="state.innerElement.top" label="Y" @finish="(value) => finish('top', value)" />
-          <number-input v-model="innerElement.width" style="margin-top: 0.5rem" label="宽" @finish="(value) => finish('width', value)" />
+          <number-input v-model="state.innerElement.width" style="margin-top: 0.5rem" label="宽" @finish="(value) => finish('width', value)" />
-          <number-input v-model="innerElement.height" style="margin-top: 0.5rem" label="高" @finish="(value) => finish('height', value)" />
+          <number-input v-model="state.innerElement.height" style="margin-top: 0.5rem" label="高" @finish="(value) => finish('height', value)" />
         </div>
       </el-collapse-item>
       <el-collapse-item title="设置颜色" name="2">
-        <div v-for="(c, ci) in innerElement.colors" :key="ci + 'c'">
+        <div v-for="(c, ci) in state.innerElement.colors" :key="ci + 'c'">
-          <color-select v-model="innerElement.colors[ci]" @finish="(value) => colorFinish('colors')" />
+          <color-select v-model="state.innerElement.colors[ci]" @finish="(value) => colorFinish('colors')" />
         </div>
         <br />
         <div class="slide-wrap">
-          <number-slider v-model="innerElement.opacity" label="不透明" :step="0.01" :maxValue="1" @finish="(value) => finish('opacity', value)" />
+          <number-slider v-model="state.innerElement.opacity" label="不透明" :step="0.01" :maxValue="1" @finish="(value) => finish('opacity', value)" />
         </div>
       </el-collapse-item>
       <br />
@@ -33,100 +33,139 @@
   </div>
 </template>
 
-<script>
+<script lang="ts" setup>
 // 图片组件样式
-const NAME = 'w-image-style'
+// const NAME = 'w-image-style'
-import { mapGetters, mapActions } from 'vuex'
+import { reactive, watch } from 'vue'
+import { mapGetters, mapActions, useStore } from 'vuex'
 import numberInput from '../../settings/numberInput.vue'
-import iconItemSelect from '../../settings/iconItemSelect.vue'
+import iconItemSelect, { TIconItemSelectData } from '../../settings/iconItemSelect.vue'
 import numberSlider from '../../settings/numberSlider.vue'
 import colorSelect from '../../settings/colorSelect.vue'
 import layerIconList from '@/assets/data/LayerIconList'
 import alignIconList from '@/assets/data/AlignListData'
+import { TWSvgSetting, wSvgSetting } from './wSvgSetting'
+import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 
-export default {
+type TState = {
-  name: NAME,
+  activeNames: string[]
-  components: { numberInput, numberSlider, iconItemSelect, colorSelect },
+  innerElement: TWSvgSetting
-  data() {
+  tag: boolean
-    return {
+  ingoreKeys: string[]
+  layerIconList: TIconItemSelectData[]
+  alignIconList: TIconItemSelectData[]
+}
+
+const state = reactive<TState>({
   activeNames: ['2', '3', '4'],
-      innerElement: {},
+  innerElement: JSON.parse(JSON.stringify(wSvgSetting)),
   tag: false,
   ingoreKeys: ['left', 'top', 'name', 'width', 'height', 'radiusTopLeft', 'radiusTopRight', 'radiusBottomLeft', 'radiusBottomRight'],
   layerIconList,
   alignIconList,
-    }
-  },
-  computed: {
-    ...mapGetters(['dActiveElement', 'dMoving']),
-  },
-  watch: {
-    dActiveElement: {
-      handler(newValue, oldValue) {
-        this.change()
-      },
-      deep: true,
-    },
-    innerElement: {
-      handler(newValue, oldValue) {
-        this.changeValue()
-      },
-      deep: true,
-    },
-  },
-  created() {
-    this.change()
-  },
-  methods: {
-    ...mapActions(['updateWidgetData', 'updateAlign', 'updateLayerIndex']),
-    change() {
-      this.tag = true
-      this.innerElement = JSON.parse(JSON.stringify(this.dActiveElement))
-    },
-    changeValue() {
-      if (this.tag) {
-        this.tag = false
-        return
-      }
-      if (this.dMoving) {
-        return
-      }
-      for (let key in this.innerElement) {
-        if (this.ingoreKeys.indexOf(key) !== -1) {
-          this.dActiveElement[key] = this.innerElement[key]
-        } else if (key !== 'setting' && key !== 'record' && this.innerElement[key] !== this.dActiveElement[key]) {
-          this.updateWidgetData({
-            uuid: this.dActiveElement.uuid,
-            key: key,
-            value: this.innerElement[key],
 })
+const store = useStore()
+const {
+  dActiveElement, dMoving
+} = useSetupMapGetters(['dActiveElement', 'dMoving'])
+
+// ...mapGetters(['dActiveElement', 'dMoving']),
+
+watch(
+  () => dActiveElement.value,
+  () => {
+    change()
+  },
+  { deep: true }
+)
+
+watch(
+  () => state.innerElement,
+  () => {
+    changeValue()
+  },
+  { deep: true }
+)
+
+function created() {
+  change()
+}
+
+created()
+
+// ...mapActions(['updateWidgetData', 'updateAlign', 'updateLayerIndex']),
+
+function change() {
+  state.tag = true
+  state.innerElement = JSON.parse(JSON.stringify(dActiveElement.value))
+}
+
+function changeValue() {
+  if (state.tag) {
+    state.tag = false
+    return
+  }
+  if (dMoving.value) {
+    return
+  }
+  for (let key in state.innerElement) {
+    const itemKey = key as keyof TWSvgSetting
+    if (state.ingoreKeys.indexOf(itemKey) !== -1) {
+      dActiveElement.value[key] = state.innerElement[itemKey]
+    } else if (itemKey !== 'setting' && itemKey !== 'record' && state.innerElement[itemKey] !== dActiveElement.value[itemKey]) {
+      store.dispatch("updateWidgetData", {
+        uuid: dActiveElement.value.uuid,
+        key: key,
+        value: state.innerElement[itemKey],
+      })
+      // this.updateWidgetData({
+      //   uuid: this.dActiveElement.uuid,
+      //   key: key,
+      //   value: this.innerElement[key],
+      // })
     }
   }
-    },
+}
-    colorFinish(key) {
+
-      this.finish(key, this.innerElement[key])
+function colorFinish(key: keyof TWSvgSetting) {
-    },
+  finish(key, state.innerElement[key])
-    finish(key, value) {
+}
-      this.updateWidgetData({
+
-        uuid: this.dActiveElement.uuid,
+function finish(key: string, value: any) {
+  store.dispatch("updateWidgetData", {
+    uuid: dActiveElement.value.uuid,
     key: key,
     value: value,
     pushHistory: true,
   })
-    },
+  // this.updateWidgetData({
-    layerAction(item) {
+  //   uuid: this.dActiveElement.uuid,
-      this.updateLayerIndex({
+  //   key: key,
-        uuid: this.dActiveElement.uuid,
+  //   value: value,
+  //   pushHistory: true,
+  // })
+}
+
+function layerAction(item: TIconItemSelectData) {
+  store.dispatch("updateLayerIndex", {
+    uuid: dActiveElement.value.uuid,
     value: item.value,
   })
-    },
+  // this.updateLayerIndex({
-    alignAction(item) {
+  //   uuid: this.dActiveElement.uuid,
-      this.updateAlign({
+  //   value: item.value,
+  // })
+}
+
+function alignAction(item: TIconItemSelectData) {
+  store.dispatch("updateAlign", {
     align: item.value,
-        uuid: this.dActiveElement.uuid,
+    uuid: dActiveElement.value.uuid,
   })
-    },
+  // this.updateAlign({
-  },
+  //   align: item.value,
+  //   uuid: this.dActiveElement.uuid,
+  // })
 }
 </script>