Merge pull request #97 from palxiao/feature-vue3

fix: image crop for Feature vue3

src/assets/data/LayerIconList.ts

@@ -6,12 +6,7 @@
  * @LastEditTime: 2024-03-01 20:55:51
  */
 
-export type LayerIconList = {
+import { TIconItemSelectData } from "@/components/modules/settings/iconItemSelect.vue"
-  key: string
-  icon: string
-  tip: string
-  value: number
-}
 
 export default [
   {
@@ -26,4 +21,4 @@ export default [
     tip: '下一层',
     value: -1,
   },
-] as LayerIconList[]
+] as TIconItemSelectData[]

src/common/methods/DesignFeatures/setWidgetData.ts

@@ -8,6 +8,8 @@
 // import store from '@/store'
 // import { getImage } from '../getImgDetail'
 import setImageData from '@/common/methods/DesignFeatures/setImage'
+// import wImage from '@/components/modules/widgets/wImage/wImage.vue'
+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'
@@ -23,11 +25,12 @@ export default async function(type: string, item: TCommonItemData, data: Record<
     setting.fontWeight = item.fontWeight
   }
   if (type === 'image' || type === 'mask') {
-    setting = JSON.parse(JSON.stringify(wImage.setting))
+    setting = JSON.parse(JSON.stringify(wImageSetting))
     const img = await setImageData(item.value)
     setting.width = img.width
     setting.height = img.height // parseInt(100 / item.value.ratio, 10)
     setting.imgUrl = item.value.url
+    console.log("setting", setting)
   }
   if (type === 'mask') {
     setting.mask = item.value.url

src/components/business/picture-selector/index.vue

@@ -74,7 +74,7 @@ const load = async (init?: boolean) => {
   loading = true
   page += 1
   api.material.getMyPhoto({ page }).then(({ list }) => {
-    list.length <= 0 ? (state.isDone = true) : (state.imgList = state.imgList.concat(list))
+    list.length <= 0 ? (state.isDone = true) : (state.imgList = state.imgList.concat(list as TGetImageListResult[]))
     setTimeout(() => {
       loading = false
     }, 100)

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

@@ -41,7 +41,8 @@
 <script lang="ts">
 import { defineComponent, reactive, toRefs, onMounted, watch } from 'vue'
 import api from '@/api'
-import wImage from '../../widgets/wImage/wImage.vue'
+// import wImage from '../../widgets/wImage/wImage.vue'
+import wImageSetting from '../../widgets/wImage/wImageSetting'
 import wSvg from '../../widgets/wSvg/wSvg.vue'
 import { mapActions, mapGetters } from 'vuex'
 import setImageData from '@/common/methods/DesignFeatures/setImage'
@@ -159,7 +160,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(wImage.setting))
+      let setting = item.type === 'svg' ? JSON.parse(JSON.stringify(wSvg.setting)) : JSON.parse(JSON.stringify(wImageSetting))
       const img: any = await setImageData(item)
 
       setting.width = img.width

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

@@ -28,7 +28,8 @@
 // 图片列表
 const NAME = 'img-list-wrap'
 import { toRefs, reactive, computed, onMounted } from 'vue'
-import wImage from '../../widgets/wImage/wImage.vue'
+// import wImage from '../../widgets/wImage/wImage.vue'
+import wImageSetting from '../../widgets/wImage/wImageSetting'
 import api from '@/api'
 import { useStore } from 'vuex'
 import setImageData from '@/common/methods/DesignFeatures/setImage'
@@ -64,7 +65,7 @@ export default {
     const selectImg = async (index, list) => {
       const item = list ? list[index] : state.recommendImgList[index]
       store.commit('setShowMoveable', false) // 清理掉上一次的选择
-      let setting = JSON.parse(JSON.stringify(wImage.setting))
+      let setting = JSON.parse(JSON.stringify(wImageSetting))
       const img = await setImageData(item) // await getImage(item.url)
       setting.width = img.width
       setting.height = img.height // parseInt(100 / item.value.ratio, 10)

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

@@ -42,7 +42,8 @@ import { useRouter } from 'vue-router'
 import { useStore } from 'vuex'
 import uploader from '@/components/common/Uploader'
 import api from '@/api'
-import wImage from '../../widgets/wImage/wImage.vue'
+// import wImage from '../../widgets/wImage/wImage.vue'
+import wImageSetting from '../../widgets/wImage/wImageSetting'
 import setImageData, { TItem2DataParam } from '@/common/methods/DesignFeatures/setImage'
 import useConfirm from '@/common/methods/confirm'
 import { TGetImageListResult, TMyPhotoResult } from '@/api/material'
@@ -159,7 +160,7 @@ onMounted(() => {
 const selectImg = async (index: number) => {
   const item = state.imgList[index]
   store.commit('setShowMoveable', false) // 清理掉上一次的选择
-  let setting = JSON.parse(JSON.stringify(wImage.setting))
+  let setting = JSON.parse(JSON.stringify(wImageSetting))
   const img = await setImageData(item)
   setting.width = img.width
   setting.height = img.height // parseInt(100 / item.value.ratio, 10)

src/components/modules/settings/iconItemSelect.vue

@@ -22,20 +22,22 @@
 // 图标按钮选择组件
 // const NAME = 'icon-item-select'
 
-type TPropData = {
+export type TIconItemSelectData = {
-  select: boolean,
+  key?: string
-  extraIcon: boolean,
+  select?: boolean,
-  tip: string
+  extraIcon?: boolean,
+  tip?: string
   icon?: string
+  value?: string | number
 }
 
 type TProps = {
   label?: string
-  data: TPropData[]
+  data: TIconItemSelectData[]
 }
 
 type TEmits = {
-  (event: 'finish', data: TPropData): void
+  (event: 'finish', data: TIconItemSelectData): void
 }
 
 const props = withDefaults(defineProps<TProps>(), {
@@ -45,7 +47,7 @@ const props = withDefaults(defineProps<TProps>(), {
 const emit = defineEmits<TEmits>()
 
 
-function selectItem(item: TPropData) {
+function selectItem(item: TIconItemSelectData) {
   if (typeof item.select !== 'undefined') {
     item.select = !item.select
   }

src/components/modules/settings/numberSlider.vue

@@ -49,7 +49,7 @@ const props = withDefaults(defineProps<TProps>(), {
 })
 const emit = defineEmits<TEmits>()
 
-const innerValue = ref<number>(0)
+const innerValue = ref<number>(props.minValue)
 
 watch(
   () => innerValue.value,

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

@@ -7,19 +7,19 @@
 -->
 <template>
   <div id="w-group-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">
-        <el-button plain type="primary" class="block-btn" @click="ungroup(innerElement.uuid)">取消组合</el-button>
+        <el-button plain type="primary" class="block-btn" @click="store.dispatch('ungroup', state.innerElement.uuid)">取消组合</el-button>
         <!-- <div class="ungroup style-item" @click="ungroup(innerElement.uuid)">取消组合</div> -->
-        <number-slider v-model="innerElement.opacity" class="style-item" label="不透明" :step="0.05" :maxValue="1" @finish="(value) => finish('opacity', value)" />
+        <number-slider v-model="state.innerElement.opacity" class="style-item" label="不透明" :step="0.05" :maxValue="1" @finish="(value) => finish('opacity', value)" />
         <br />
         <icon-item-select class="style-item" label="" :data="layerIconList" @finish="layerAction" />
         <icon-item-select label="" :data="alignIconList" @finish="alignAction" />
@@ -28,98 +28,137 @@
   </div>
 </template>
 
-<script>
+<script lang="ts" setup>
 // 组合组件样式
-const NAME = 'w-group-style'
+// const NAME = 'w-group-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 layerIconList from '@/assets/data/LayerIconList'
 import alignIconList from '@/assets/data/AlignListData'
+import { wGroupSetting } from './groupSetting'
+import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 
-export default {
+type TState = {
-  name: NAME,
+  activeNames: string[],
-  components: { numberInput, iconItemSelect, numberSlider },
+  // defaultValue: 0,
-  data() {
+  innerElement: typeof wGroupSetting,
-    return {
+  tag: boolean,
-      activeNames: ['1', '2', '3', '4'],
+  ingoreKeys: string[],
-      // defaultValue: 0,
+  layerIconList: TIconItemSelectData[],
-      innerElement: {},
+  alignIconList: TIconItemSelectData[],
-      tag: false,
+}
-      ingoreKeys: ['name', 'width', 'height'],
+
-      layerIconList,
+const state = reactive<TState>({
-      alignIconList,
+  activeNames: ['1', '2', '3', '4'],
-    }
+  // defaultValue: 0,
+  innerElement: JSON.parse(JSON.stringify(wGroupSetting)),
+  tag: false,
+  ingoreKeys: ['name', 'width', 'height'],
+  layerIconList,
+  alignIconList,
+})
+const store = useStore()
+const { dActiveElement } = useSetupMapGetters(['dActiveElement'])
+
+let dMoving = false
+
+// computed: {
+//   ...mapGetters(['dActiveElement']),
+// },
+
+watch(
+  () => dActiveElement.value,
+  (newValue, oldValue) => {
+    change()
   },
-  computed: {
+  { deep: true }
-    ...mapGetters(['dActiveElement']),
+)
+
+watch(
+  () => state.innerElement,
+  (newValue, oldValue) => {
+    changeValue()
   },
-  watch: {
+  { deep: true }
-    dActiveElement: {
+)
-      handler(newValue, oldValue) {
+
-        this.change()
+function created() {
-      },
+  change()
-      deep: true,
+}
-    },
+
-    innerElement: {
+created()
-      handler(newValue, oldValue) {
+
-        this.changeValue()
+// ...mapActions(['updateWidgetData', 'updateAlign', 'updateLayerIndex', 'ungroup']),
-      },
+    
-      deep: true,
+function change() {
-    },
+  state.tag = true
-  },
+  state.innerElement = JSON.parse(JSON.stringify(dActiveElement.value))
-  created() {
+}
-    this.change()
+
-  },
+function changeValue() {
-  methods: {
+  if (state.tag) {
-    ...mapActions(['updateWidgetData', 'updateAlign', 'updateLayerIndex', 'ungroup']),
+    state.tag = false
-    change() {
+    return
-      this.tag = true
+  }
-      this.innerElement = JSON.parse(JSON.stringify(this.dActiveElement))
+  if (dMoving) {
-    },
+    return
-    changeValue() {
+  }
-      if (this.tag) {
+  for (let key in state.innerElement) {
-        this.tag = false
+    const itemKey = key as keyof typeof wGroupSetting
-        return
+    if (state.ingoreKeys.indexOf(itemKey) !== -1) {
-      }
+      dActiveElement.value[itemKey] = state.innerElement[itemKey]
-      if (this.dMoving) {
+    } else if (key !== 'setting' && key !== 'record' && state.innerElement[itemKey] !== dActiveElement.value[itemKey]) {
-        return
+      store.dispatch("updateWidgetData", {
-      }
+        uuid: dActiveElement.value.uuid,
-      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],
-          })
-        }
-      }
-    },
-    finish(key, value) {
-      this.updateWidgetData({
-        uuid: this.dActiveElement.uuid,
         key: key,
-        value: value,
+        value: state.innerElement[itemKey],
-        pushHistory: true,
       })
-    },
+      // this.updateWidgetData({
-    layerAction(item) {
+      //   uuid: this.dActiveElement.uuid,
-      this.updateLayerIndex({
+      //   key: key,
-        uuid: this.dActiveElement.uuid,
+      //   value: this.innerElement[key],
-        value: item.value,
+      // })
-        isGroup: true,
+    }
-      })
+  }
-    },
+}
-    alignAction(item) {
+
-      this.updateAlign({
+
-        align: item.value,
+function finish(key: string, value: string | number | number[]) {
-        uuid: this.dActiveElement.uuid,
+  store.dispatch("updateWidgetData", {
-      })
+    uuid: dActiveElement.value.uuid,
-    },
+    key: key,
-  },
+    value: value,
+    pushHistory: true,
+  })
+  // this.updateWidgetData({
+  //   uuid: this.dActiveElement.uuid,
+  //   key: key,
+  //   value: value,
+  //   pushHistory: true,
+  // })
+}
+
+function layerAction(item: TIconItemSelectData) {
+  store.dispatch("updateLayerIndex", {
+    uuid: dActiveElement.value.uuid,
+    value: item.value,
+    isGroup: true,
+  })
+  // this.updateLayerIndex({
+  //   uuid: this.dActiveElement.uuid,
+  //   value: item.value,
+  //   isGroup: true,
+  // })
+}
+
+function alignAction(item: TIconItemSelectData) {
+  store.dispatch("updateAlign", {
+    align: item.value,
+    uuid: dActiveElement.value.uuid,
+  })
 }
 </script>
 

src/components/modules/widgets/wImage/wImage.vue

@@ -1,10 +1,10 @@
 <template>
   <div
     :id="params.uuid"
-    ref="widget"
+    ref="widgetRef"
     :class="['w-image', { 'layer-lock': params.lock }]"
     :style="{
-      position,
+      position: state.position,
       left: params.left - parent.left + 'px',
       top: params.top - parent.top + 'px',
       width: params.width + 'px',
@@ -12,12 +12,18 @@
       opacity: params.opacity,
     }"
   >
-    <div v-if="cropEdit" :ref="params.uuid + '_ebox'" :style="editBoxStyle" class="svg__edit__wrap">
+    <div
+      v-if="cropEdit"
+      :id="params.uuid + '_ebox'"
+      :ref="params.uuid + '_ebox'"
+      :style="state.editBoxStyle"
+      class="svg__edit__wrap"
+    >
       <img class="edit__model" :src="params.imgUrl" />
     </div>
     <div :style="{ transform: params.flip ? `rotate${params.flip}(180deg)` : undefined, borderRadius: params.radius + 'px', '-webkit-mask-image': `${params.mask ? `url('${params.mask}')` : undefined}` }" :class="['img__box', { mask: params.mask }]">
-      <div v-if="params.isNinePatch" ref="target" class="target" :style="{ border: `${(params.height * params.sliceData.ratio) / 2}px solid transparent`, borderImage: `url('${params.imgUrl}') ${params.sliceData.left} round` }"></div>
+      <div v-if="params.isNinePatch" ref="targetRef" class="target" :style="{ border: `${(params.height * params.sliceData.ratio) / 2}px solid transparent`, borderImage: `url('${params.imgUrl}') ${params.sliceData.left} round` }"></div>
-      <img v-else ref="target" class="target" style="transform-origin: center" :src="params.imgUrl" />
+      <img v-else ref="targetRef" class="target" style="transform-origin: center" :src="params.imgUrl" />
     </div>
     <div v-if="isMask" class="drop__mask">
       <div putIn="true" :style="{ fontSize: params.width / 12 + 'px' }" class="drop__btn">拖入</div>
@@ -25,254 +31,305 @@
   </div>
 </template>
 
-<script>
+<script lang="ts" setup>
 // 图片组件
-const NAME = 'w-image'
+// const NAME = 'w-image'
-
+import { CSSProperties, StyleValue, computed, nextTick, onBeforeUnmount, onMounted, onUpdated, reactive, ref, watch } from 'vue'
-import { mapGetters, mapActions } from 'vuex'
+import { mapGetters, mapActions, useStore } from 'vuex'
 import { getMatrix } from '@/common/methods/handleTransform'
+import setting from "./wImageSetting"
 import PointImg from '@/utils/plugins/pointImg'
+import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+import { useRoute } from 'vue-router'
+// import { storeToRefs } from 'pinia'
+// import { useCanvasStore } from '@/pinia'
 
-export default {
+type TProps = {
-  name: NAME,
+  params: typeof setting
-  setting: {
+  parent: {
-    name: '图片',
+    left: number
-    type: NAME,
+    top: number
-    uuid: -1,
+  }
-    width: 300,
+}
-    height: 300,
+
+type TState = {
+  position: 'absolute' | 'relative', // 'absolute'relative
+  editBoxStyle: CSSProperties,
+  cropWidgetXY: {
+    x: number
+    y: number
+  }
+  holdPosition: {
+    left: number
+    top: number
+  }
+}
+
+const props = defineProps<TProps>()
+const state = reactive<TState>({
+  position: 'absolute', // 'absolute'relative
+  editBoxStyle: {
+    transformOrigin: 'center',
+    transform: '',
+  },
+  cropWidgetXY: {
+    x: 0,
+    y: 0,
+  },
+  holdPosition: {
     left: 0,
     top: 0,
-    zoom: 1,
+  }
-    transform: '',
+})
-    radius: 0,
+const route = useRoute()
-    opacity: 1,
+const store = useStore()
-    parent: '-1',
+const widgetRef = ref<HTMLElement | null>(null)
-    imgUrl: '',
+const targetRef = ref<HTMLImageElement | null>(null)
-    mask: '',
-    setting: [],
-    record: {
-      width: 0,
-      height: 0,
-      minWidth: 10,
-      minHeight: 10,
-      dir: 'all',
-    },
-  },
-  props: ['params', 'parent'],
-  data() {
-    return {
-      position: 'absolute', // 'absolute'relative
-      editBoxStyle: {
-        transformOrigin: 'center',
-        transform: '',
-      },
-    }
-  },
-  computed: {
-    ...mapGetters(['dActiveElement', 'dWidgets', 'dZoom', 'dMouseXY', 'dDropOverUuid', 'dCropUuid']),
-    cropEdit() {
-      return this.params.uuid === this.dCropUuid
-    },
-    tZoom() {
-      return this.params.zoom
-    },
-    isMask() {
-      return this.params.mask && this.dDropOverUuid === this.params.uuid
-    },
-    isDraw() {
-      return this.$route.name === 'Draw'
-    },
-  },
-  watch: {
-    cropEdit(val) {
-      // TODO 移动事件绑定
-      if (val) {
-        document.getElementById(this.params.uuid).addEventListener('mousedown', this.touchstart, false)
-      } else {
-        document.getElementById(this.params.uuid).removeEventListener('mousedown', this.touchstart, false)
-      }
-      this.fixRotate()
-      this.lockOthers()
-    },
-    async tZoom() {
-      await this.$nextTick()
-      this.updateRecord()
-    },
-  },
-  updated() {
-    this.updateRecord()
-    this.$store.commit('updateRect')
-  },
 
-  async mounted() {
+let rotateTemp: number | null = null
-    this.updateRecord()
+let flipTemp: string | null = null
-    await this.$nextTick()
+let locksTemp: string[] | null = null
-    document.addEventListener('mouseup', this.touchend, false)
+
-    // if (this.params.transformData) {
+const {
-    //   // this.$refs.widget.style.transform += `scale(${this.params.transformData.a}, ${this.params.transformData.d})`
+  dZoom,
-    //   this.$refs.widget.style.transform += `matrix(${String(getMatrix(this.params.transformData))})`
+  dActiveElement, dWidgets, dMouseXY, dDropOverUuid, dCropUuid
-    // } else {
+} = useSetupMapGetters(['dZoom', 'dActiveElement', 'dWidgets', 'dMouseXY', 'dDropOverUuid', 'dCropUuid'])
-    //   // this.$refs.widget.style.transform += `scale(${this.params.transformData.a}, ${this.params.transformData.d})`
+// const { dZoom } = storeToRefs(useCanvasStore())
-    //   this.params.rotate && (this.$refs.widget.style.transform += `rotate(${this.params.rotate})`)
+
-    // }
+// ...mapGetters(['dActiveElement', 'dWidgets', 'dZoom', 'dMouseXY', 'dDropOverUuid', 'dCropUuid']),
-    // console.log(this.params, this.params.filter)
+const cropEdit = computed(() => {
-    // this.$refs.widget.style.filter = 'hue-rotate(100deg) blur(50px)'
+  return props.params.uuid === dCropUuid.value
-    this.$refs.widget.style.transform += this.params.rotate && (this.$refs.widget.style.transform += `rotate(${this.params.rotate})`)
+})
-  },
+const tZoom = computed(() => {
-  beforeUnmount() {
+  return props.params.zoom
-    document.removeEventListener('mouseup', this.touchend, false)
+})
-  },
+const isMask = computed(() => {
-  methods: {
+  return props.params.mask && dDropOverUuid.value === props.params.uuid
-    ...mapActions(['updateWidgetData']),
+})
-    touchstart(e) {
+const isDraw = computed(() => {
-      const editBox = this.$refs[this.params.uuid + '_ebox']
+  return route.name === 'Draw'
-      this.cropWidgetXY = {
+})
-        x: Number(editBox.style.left.replace('px', '')) || 0,
+
-        y: Number(editBox.style.top.replace('px', '')) || 0,
+watch(
-      }
+  () => cropEdit.value,
-      // 绑定鼠标移动事件
+  (val) => {
-      document.addEventListener('mousemove', this.handlemousemove, true)
+    // TODO 移动事件绑定
-    },
+    const el = document.getElementById(`${props.params.uuid}`)
-    touchend() {
+    if (val) {
-      // 取消鼠标移动事件
+      el?.addEventListener('mousedown', touchstart, false)
-      document.removeEventListener('mousemove', this.handlemousemove, true)
+    } else {
-      // const left = Number(this.editBoxStyle.left.replace('px', ''))
+      el?.removeEventListener('mousedown', touchstart, false)
-      // const flow = (this.params.width * (1 - this.tZoom)) / 2
+    }
-      // if (left + flow < 0) {
+    fixRotate()
-      // }
+    lockOthers()
-    },
+  }
-    handlemousemove(e) {
+)
-      if (!this.move(e)) {
+
-        return
+watch(
-      }
+  () => tZoom.value,
-      e && e.stopPropagation()
+  async () => {
-      e && e.preventDefault()
+    await nextTick()
-      const { left, top } = this.move(e)
+    updateRecord()
-      // TODO 触发位置刷新
+  }
-      this.holdPosition = { left, top }
+)
-      this.editBoxStyle.left = left + 'px'
+
-      this.editBoxStyle.top = top + 'px'
+onUpdated(() => {
-      this.changeFinish(left / this.params.zoom, top / this.params.zoom)
+  updateRecord()
-    },
+  store.commit('updateRect')
-    changeFinish(x, y) {
+})
-      this.setTransform('translate', `${x}px, ${y}px`)
+
-    },
+onMounted(async () => {
-    move(payload) {
+  updateRecord()
-      if (payload) {
+  await nextTick()
-        const widgetXY = { x: this.cropWidgetXY.x, y: this.cropWidgetXY.y }
+  document.addEventListener('mouseup', touchend, false)
-        const dx = Number(payload.pageX) - this.dMouseXY.x
+  // if (this.params.transformData) {
-        const dy = Number(payload.pageY) - this.dMouseXY.y
+  //   // this.$refs.widget.style.transform += `scale(${this.params.transformData.a}, ${this.params.transformData.d})`
-        let left = Number(widgetXY.x) + Math.floor((dx * 100) / this.dZoom)
+  //   this.$refs.widget.style.transform += `matrix(${String(getMatrix(this.params.transformData))})`
-        let top = Number(widgetXY.y) + Math.floor((dy * 100) / this.dZoom)
+  // } else {
-        // TODO: 旋转后计算坐标
+  //   // this.$refs.widget.style.transform += `scale(${this.params.transformData.a}, ${this.params.transformData.d})`
-        // const rotate = Number(this.params.rotate.replace('deg', ''))
+  //   this.params.rotate && (this.$refs.widget.style.transform += `rotate(${this.params.rotate})`)
-        // console.log(Math.sin(rotate), Math.cos(rotate))
+  // }
-        return { left, top }
+  // console.log(this.params, this.params.filter)
-      } else {
+  // this.$refs.widget.style.filter = 'hue-rotate(100deg) blur(50px)'
-        return this.holdPosition
+  if (widgetRef.value) {
-      }
+    widgetRef.value.style.transform += props.params.rotate && (widgetRef.value.style.transform += `rotate(${props.params.rotate})`)
-    },
+  }
-    updateRecord() {
+})
-      if (this.dActiveElement.uuid === this.params.uuid) {
+
-        let record = this.dActiveElement.record
+onBeforeUnmount(() => {
-        record.width = this.$refs.widget.offsetWidth
+  document.removeEventListener('mouseup', touchend, false)
-        record.height = this.$refs.widget.offsetHeight
+})
-      }
+
-      this.updateZoom()
+// ...mapActions(['updateWidgetData']),
-      // 获取点位
+function touchstart(e: MouseEvent) {
-      if (!this.isDraw) {
+  // const editBox = this.$refs[props.params.uuid + '_ebox']
-        const read = new PointImg(this.$refs.target)
+  const editBox = document.getElementById(props.params.uuid + '_ebox')
-      }
+  state.cropWidgetXY = {
-    },
+    x: Number(editBox?.style.left.replace('px', '')) || 0,
-    setTransform(attrName, value) {
+    y: Number(editBox?.style.top.replace('px', '')) || 0,
-      const iof = this.params.transform.indexOf(attrName)
+  }
-      let setValue = ''
+  // 绑定鼠标移动事件
-      if (iof != -1) {
+  document.addEventListener('mousemove', handlemousemove, true)
-        const index = iof + attrName.length
-        const tf = this.params.transform
-        const FRONT = tf.slice(0, index + 1)
-        const half = tf.substring(index + 1)
-        const END = half.substring(half.indexOf(')'))
-        setValue = FRONT + value + END
-      } else {
-        setValue = this.params.transform + ` ${attrName}(${value})`
-      }
-      this.updateWidgetData({
-        uuid: this.params.uuid,
-        key: 'transform',
-        value: setValue,
-        pushHistory: false,
-      })
-      this.params.transform && (this.$refs.target.style.transform = this.params.transform)
-    },
-    setEditBox(attrName, value) {
-      const iof = this.editBoxStyle.transform.indexOf(attrName)
-      let setValue = ''
-      if (iof != -1) {
-        const index = iof + attrName.length
-        const tf = this.editBoxStyle.transform
-        const FRONT = tf.slice(0, index + 1)
-        const half = tf.substring(index + 1)
-        const END = half.substring(half.indexOf(')'))
-        setValue = FRONT + value + END
-      } else {
-        setValue = this.editBoxStyle.transform + ` ${attrName}(${value})`
-      }
-      this.editBoxStyle.transform = setValue
-    },
-    updateZoom() {
-      this.setEditBox('scale', this.params.zoom)
-      this.setTransform('scale', this.params.zoom)
-      // this.$refs.target.style.transform = this.params.transform
-      this.handlemousemove()
-    },
-    fixRotate() {
-      // 裁切时修正角度
-      if (this.rotateTemp) {
-        this.$refs.widget.style.transform = `rotate(${this.rotateTemp})`
-        this.params.flip = this.flipTemp
-        this.rotateTemp = null
-      } else {
-        this.rotateTemp = this.params.rotate
-        this.$refs.widget.style.transform = `rotate(0deg)`
-        this.flipTemp = this.params.flip
-        this.params.flip = null
-      }
-      this.$store.commit('setShowMoveable', false)
-      setTimeout(() => {
-        this.$store.commit('setShowMoveable', true)
-      }, 100)
-    },
-    lockOthers() {
-      // 裁剪时锁定其他图层
-      if (this.locksTemp && this.locksTemp.length > 0) {
-        for (let i = 0; i < this.locksTemp.length; i++) {
-          this.dWidgets[i].lock = this.locksTemp[i]
-        }
-        this.locksTemp = []
-      } else {
-        this.locksTemp = []
-        for (const widget of this.dWidgets) {
-          this.locksTemp.push(widget.lock)
-        }
-        this.dWidgets.forEach((widget) => {
-          widget.uuid != this.params.uuid && (widget.lock = true)
-        })
-      }
-    },
-    // cropDone(e) {
-    //   e.stopPropagation()
-    //   e.preventDefault()
-    //   this.updateWidgetData({
-    //     uuid: this.params.uuid,
-    //     key: 'cropEdit',
-    //     value: false,
-    //     pushHistory: false,
-    //   })
-    // },
-  },
 }
+
+/** 取消鼠标移动事件 */
+function touchend() {
+  document.removeEventListener('mousemove', handlemousemove, true)
+  // const left = Number(this.editBoxStyle.left.replace('px', ''))
+  // const flow = (this.params.width * (1 - this.tZoom)) / 2
+  // if (left + flow < 0) {
+  // }
+}
+
+function handlemousemove(e?: MouseEvent) {
+  if (!move(e)) {
+    return
+  }
+  e && e.stopPropagation()
+  e && e.preventDefault()
+  const { left, top } = move(e)
+  // TODO 触发位置刷新
+  state.holdPosition = { left, top }
+  state.editBoxStyle.left = left + 'px'
+  state.editBoxStyle.top = top + 'px'
+  changeFinish(left / props.params.zoom, top / props.params.zoom)
+}
+
+function changeFinish(x: number, y: number) {
+  setTransform('translate', `${x}px, ${y}px`)
+}
+
+function move(payload?: MouseEvent) {
+  if (payload) {
+    const widgetXY = { x: state.cropWidgetXY.x, y: state.cropWidgetXY.y }
+    const dx = Number(payload.pageX) - dMouseXY.value.x
+    const dy = Number(payload.pageY) - dMouseXY.value.y
+    let left = Number(widgetXY.x) + Math.floor((dx * 100) / dZoom.value)
+    let top = Number(widgetXY.y) + Math.floor((dy * 100) / dZoom.value)
+    // TODO: 旋转后计算坐标
+    // const rotate = Number(this.params.rotate.replace('deg', ''))
+    // console.log(Math.sin(rotate), Math.cos(rotate))
+    return { left, top }
+  } else {
+    return state.holdPosition
+  }
+}
+
+function updateRecord() {
+  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()
+  // 获取点位
+  if (!isDraw.value) {
+    if (targetRef.value) {
+      const read = new PointImg(targetRef.value)
+    }
+  }
+}
+
+function setTransform(attrName: string, value: string | number) {
+  const iof = props.params.transform.indexOf(attrName)
+  let setValue = ''
+  if (iof != -1) {
+    const index = iof + attrName.length
+    const tf = props.params.transform
+    const FRONT = tf.slice(0, index + 1)
+    const half = tf.substring(index + 1)
+    const END = half.substring(half.indexOf(')'))
+    setValue = FRONT + value + END
+  } else {
+    setValue = props.params.transform + ` ${attrName}(${value})`
+  }
+  store.dispatch("updateWidgetData", {
+    uuid: props.params.uuid,
+    key: 'transform',
+    value: setValue,
+    pushHistory: false,
+  })
+  // updateWidgetData({
+  //   uuid: this.params.uuid,
+  //   key: 'transform',
+  //   value: setValue,
+  //   pushHistory: false,
+  // })
+  if (props.params.transform && targetRef.value) {
+    targetRef.value.style.transform = props.params.transform
+  }
+}
+
+function setEditBox(attrName: string, value: string | number) {
+  const iof = state.editBoxStyle.transform?.indexOf(attrName)
+  let setValue = ''
+  if (iof != -1 && iof != undefined) {
+    const index = iof + attrName.length
+    const tf = state.editBoxStyle.transform ?? ''
+    const FRONT = tf.slice(0, index + 1)
+    const half = tf.substring(index + 1)
+    const END = half.substring(half.indexOf(')'))
+    setValue = FRONT + value + END
+  } else {
+    setValue = state.editBoxStyle.transform + ` ${attrName}(${value})`
+  }
+  state.editBoxStyle.transform = setValue
+}
+
+function updateZoom() {
+  setEditBox('scale', props.params.zoom)
+  setTransform('scale', props.params.zoom)
+  // this.$refs.target.style.transform = this.params.transform
+  handlemousemove()
+}
+
+function fixRotate() {
+  // 裁切时修正角度
+  if (rotateTemp) {
+    widgetRef.value && (widgetRef.value.style.transform = `rotate(${rotateTemp})`)
+    props.params.flip = flipTemp
+    rotateTemp = null
+  } else {
+    rotateTemp = props.params.rotate
+    widgetRef.value && (widgetRef.value.style.transform = `rotate(0deg)`)
+    flipTemp = props.params.flip
+    props.params.flip = null
+  }
+  store.commit('setShowMoveable', false)
+  setTimeout(() => {
+    store.commit('setShowMoveable', true)
+  }, 100)
+}
+
+function lockOthers() {
+  // 裁剪时锁定其他图层
+  if (locksTemp && locksTemp.length > 0) {
+    for (let i = 0; i < locksTemp.length; i++) {
+      dWidgets.value[i].lock = locksTemp[i]
+    }
+    locksTemp = []
+  } else {
+    locksTemp = []
+    for (const widget of dWidgets.value) {
+      locksTemp.push(widget.lock)
+    }
+    dWidgets.value.forEach((widget: any) => {
+      widget.uuid != props.params.uuid && (widget.lock = true)
+    })
+  }
+}
+// cropDone(e) {
+//   e.stopPropagation()
+//   e.preventDefault()
+//   this.updateWidgetData({
+//     uuid: this.params.uuid,
+//     key: 'cropEdit',
+//     value: false,
+//     pushHistory: false,
+//   })
+// },
 </script>
 
 <style lang="less" scoped>

src/components/modules/widgets/wImage/wImageSetting.ts

@@ -0,0 +1,68 @@
+export type TImageSetting = {
+  name: string
+  type: string
+  uuid: string
+  width: number
+  height: number
+  left: number
+  top: number
+  zoom: number
+  transform: string
+  radius: number
+  opacity: number
+  parent: string
+  imgUrl: string
+  mask: string
+  setting: [],
+  rotate: number
+  record: {
+    width: number
+    height: number
+    minWidth: number
+    minHeight: number
+    dir: string
+  },
+  lock: false,
+  isNinePatch: false,
+  flip: string | null
+  sliceData: {
+    ratio: number
+    left: number
+  }
+  cropEdit?: boolean
+}
+
+const setting: TImageSetting = {
+  name: '图片',
+  type: 'w-image',
+  uuid: '-1',
+  width: 300,
+  height: 300,
+  left: 0,
+  top: 0,
+  zoom: 1,
+  transform: '',
+  radius: 0,
+  opacity: 1,
+  parent: '-1',
+  imgUrl: '',
+  mask: '',
+  setting: [],
+  rotate: 0,
+  record: {
+    width: 0,
+    height: 0,
+    minWidth: 10,
+    minHeight: 10,
+    dir: 'all',
+  },
+  lock: false,
+  isNinePatch: false,
+  flip: '',
+  sliceData: {
+    ratio: 0,
+    left: 0,
+  }
+}
+
+export default setting

src/components/modules/widgets/wImage/wImageStyle.vue

@@ -7,20 +7,20 @@
 -->
 <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">
         <!-- <el-button size="mini" style="width: 100%; margin-top: 0.5rem" plain @click="openCropper">替换图片</el-button> -->
         <el-button style="width: 100%; margin-bottom: 12px" plain @click="openPicBox">替换图片</el-button>
         <div class="options">
-          <el-button v-if="innerElement.cropEdit" plain type="primary" @click="imgCrop(false)">完成</el-button>
+          <el-button v-if="state.innerElement.cropEdit" plain type="primary" @click="imgCrop(false)">完成</el-button>
           <el-button v-else plain type="primary" @click="imgCrop(true)"><i class="icon sd-caijian" /> 裁剪</el-button>
           <el-button plain @click="openImageCutout"><i class="icon sd-AIkoutu" /> 抠图</el-button>
           <!-- <uploader class="options__upload" @done="uploadImgDone">
@@ -31,15 +31,23 @@
         <!-- <container-wrap @change="changeContainer" />
         <br /> -->
         <div class="slide-wrap">
-          <number-slider v-model="innerElement.opacity" style="font-size: 14px" label="不透明" :step="0.05" :maxValue="1" @finish="(value) => finish('opacity', value)" />
+          <number-slider v-model="state.innerElement.opacity" style="font-size: 14px" label="不透明" :step="0.05" :maxValue="1" @finish="(value) => finish('opacity', value)" />
-          <number-slider v-model="innerElement.radius" style="font-size: 14px" label="圆角" :maxValue="Math.min(innerElement.record.width, innerElement.record.height)" @finish="(value) => finish('radius', value)" />
+          <number-slider v-model="state.innerElement.radius" style="font-size: 14px" label="圆角" :maxValue="Math.min(Number(state.innerElement.record?.width), Number(state.innerElement.record?.height))" @finish="(value) => finish('radius', value)" />
           <!-- <number-slider v-model="innerElement.letterSpacing" style="font-size: 14px" label="字距" labelWidth="40px" :step="0.05" :minValue="-50" :maxValue="innerElement.fontSize" @finish="(value) => finish('letterSpacing', value)" />
         <number-slider v-model="innerElement.lineHeight" style="font-size: 14px" label="行距" labelWidth="40px" :step="0.05" :minValue="0" :maxValue="2.5" @finish="(value) => finish('lineHeight', value)" /> -->
         </div>
       </el-collapse-item>
-      <el-collapse-item v-if="innerElement.isNinePatch" title="点九图设置" name="3">
+      <el-collapse-item v-if="state.innerElement.isNinePatch" title="点九图设置" name="3">
-        <number-slider v-model="innerElement.sliceData.ratio" :step="0.01" label="比率" :maxValue="10" @finish="(value) => finishSliceData('ratio', value)" />
+        <number-slider
-        <number-slider v-model="innerElement.sliceData.left" :step="0.5" label="大小" @finish="(value) => finishSliceData('left', value)" />
+          v-model="state.innerElement.sliceData.ratio"
+          :step="0.01" label="比率" :maxValue="10" 
+          @finish="(value) => finishSliceData('ratio', value)"
+        />
+        <number-slider
+          v-model="state.innerElement.sliceData.left"
+          :step="0.5" label="大小"
+          @finish="(value) => finishSliceData('left', value)"
+        />
       </el-collapse-item>
       <br />
       <icon-item-select class="style-item" label="" :data="layerIconList" @finish="layerAction" />
@@ -47,21 +55,26 @@
       <br />
     </el-collapse>
     <!-- <CropImage ref="crop" @done="cropDone" /> -->
-    <inner-tool-bar v-show="innerElement.cropEdit" :style="toolBarStyle">
+    <inner-tool-bar v-show="state.innerElement.cropEdit" :style="toolBarStyle">
-      <number-slider v-model="innerElement.zoom" class="inner-bar" label="缩放" labelWidth="40px" :step="0.01" :minValue="1" :maxValue="3" />
+      <number-slider
+        v-model="state.innerElement.zoom"
+        class="inner-bar" label="缩放" labelWidth="40px"
+        :step="0.01" :minValue="1" :maxValue="3"
+      />
       <i style="padding: 0 8px; cursor: pointer" class="icon sd-queren" @click="imgCrop(false)" />
     </inner-tool-bar>
-    <picBox ref="picBox" @select="selectDone" />
+    <picBox ref="picBoxRef" @select="selectDone" />
-    <imageCutout ref="imageCutout" @done="cutImageDone" />
+    <imageCutout ref="imageCutoutRef" @done="cutImageDone" />
   </div>
 </template>
 
-<script>
+<script lang="ts" setup>
 // 图片组件样式
-const NAME = 'w-image-style'
+// const NAME = 'w-image-style'
-import { mapGetters, mapActions } from 'vuex'
+import { nextTick, reactive, ref, watch } from 'vue'
+import { 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 textInput from '../../settings/textInput.vue'
 // import CropImage from '@/components/business/cropper/CropImage.vue'
@@ -73,194 +86,269 @@ import layerIconList from '@/assets/data/LayerIconList'
 import alignIconList from '@/assets/data/AlignListData'
 import picBox from '@/components/business/picture-selector'
 import imageCutout from '@/components/business/image-cutout'
+import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+import wImageSetting, { TImageSetting } from './wImageSetting'
+import { TGetImageListResult } from '@/api/material'
 
-export default {
+type TState = {
-  name: NAME,
+  picBoxShow: boolean
-  components: { numberInput, numberSlider, iconItemSelect, picBox, imageCutout },
+  activeNames: string[]
-  data() {
+  innerElement: TImageSetting
-    return {
+  tag: boolean
-      picBoxShow: false,
+  ingoreKeys: string[]
-      activeNames: ['2', '3', '4'],
+  layerIconList: TIconItemSelectData[]
-      innerElement: {},
+  alignIconList: TIconItemSelectData[]
-      tag: false,
+  toolBarStyle: Record<string, any>
-      ingoreKeys: ['left', 'top', 'name', 'width', 'height', 'radiusTopLeft', 'radiusTopRight', 'radiusBottomLeft', 'radiusBottomRight'],
-      layerIconList: layerIconList.concat([
-        {
-          key: 'flip',
-          icon: 'sd-zuoyoufanzhuan',
-          extraIcon: true,
-          tip: '水平翻转',
-          value: 'Y',
-        },
-        {
-          key: 'flip',
-          icon: 'sd-shangxiafanzhuan',
-          extraIcon: true,
-          tip: '垂直翻转',
-          value: 'X',
-        },
-      ]),
-      alignIconList,
-      toolBarStyle: {},
-    }
-  },
-  computed: {
-    ...mapGetters(['dActiveElement', 'dMoving', 'dWidgets']),
-  },
-  watch: {
-    dActiveElement: {
-      handler(newValue, oldValue) {
-        this.change()
-        // 失焦取消编辑模式
-        if (newValue.uuid != this.lastUuid && typeof this.lastUuid !== 'undefined') {
-          this.innerElement.cropEdit = false
-          this.$store.commit('setShowRotatable', true) // 失焦会导致大小变化锁定的错误
-        }
-        this.lastUuid = newValue.uuid
-      },
-      deep: true,
-    },
-    innerElement: {
-      handler(newValue, oldValue) {
-        this.changeValue()
-        this.cropHandle()
-      },
-      deep: true,
-    },
-  },
-  created() {
-    this.change()
-  },
-  methods: {
-    ...mapActions(['updateWidgetData', 'updateAlign', 'updateLayerIndex', 'addWidget']),
-    change() {
-      this.tag = true
-      this.innerElement = JSON.parse(JSON.stringify({ ...this.innerElement, ...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 !== 'cropEdit' && key !== 'record' && this.innerElement[key] !== this.dActiveElement[key]) {
-          this.updateWidgetData({
-            uuid: this.dActiveElement.uuid,
-            key: key,
-            value: this.innerElement[key],
-          })
-        }
-      }
-    },
-    finishSliceData(key, value) {
-      const data = this.dActiveElement.sliceData
-      if (data) {
-        data[key] = value
-        this.updateWidgetData({
-          uuid: this.dActiveElement.uuid,
-          key: 'sliceData',
-          value: data,
-          pushHistory: true,
-        })
-      }
-    },
-    finish(key, value) {
-      this.updateWidgetData({
-        uuid: this.dActiveElement.uuid,
-        key: key,
-        value: value,
-        pushHistory: true,
-      })
-    },
-    layerAction(item) {
-      if (item.key === 'zIndex') {
-        this.updateLayerIndex({
-          uuid: this.dActiveElement.uuid,
-          value: item.value,
-        })
-      } else {
-        this.finish(item.key, item.value === this.dActiveElement.flip ? null : item.value)
-      }
-    },
-    async alignAction(item) {
-      this.updateAlign({
-        align: item.value,
-        uuid: this.dActiveElement.uuid,
-      })
-      await this.$nextTick()
-      this.$store.commit('updateRect')
-    },
-    openCropper() {
-      this.$refs.crop.open(this.innerElement, this.innerElement.cropData)
-    },
-    cropDone({ newImg, data, width, height }) {
-      this.innerElement.imgUrl = newImg
-      this.innerElement.cropData = data
-      this.innerElement.width = width.toFixed(0)
-      this.innerElement.height = height.toFixed(0)
-    },
-    async changeContainer(setting) {
-      const index = this.dWidgets.findIndex((x) => x.uuid == this.innerElement.uuid)
-      const img = await getImage(setting.svgUrl)
-      setting.width = this.innerElement.width
-      setting.height = img.height * (this.innerElement.width / img.width)
-      setting.left = this.innerElement.left
-      setting.top = this.innerElement.top
-      setting.imgUrl = this.innerElement.imgUrl
-      this.dWidgets.splice(index, 1)
-      this.addWidget(setting)
-    },
-    async uploadImgDone(img) {
-      this.$store.commit('setShowMoveable', false)
-      await api.material.addMyPhoto(img)
-      // this.innerElement.width = img.width
-      this.innerElement.height = img.height * (this.innerElement.width / img.width)
-      this.innerElement.imgUrl = img.url
-      this.$store.commit('setShowMoveable', true)
-    },
-    selectDone(img) {
-      this.innerElement.imgUrl = img.url
-      // this.imgCrop(true)
-    },
-    imgCrop(val) {
-      // TODO: 画布内图像裁剪
-      const { left, top } = document.getElementById(this.innerElement.uuid).getBoundingClientRect()
-      this.toolBarStyle = { left: left + 'px', top: top + 'px' }
-      this.innerElement.cropEdit = val
-      this.$store.commit('setShowRotatable', !val)
-    },
-    cropHandle() {
-      this.$store.commit('setCropUuid', this.innerElement.cropEdit ? this.innerElement.uuid : -1)
-    },
-    // 图库选择器
-    openPicBox() {
-      this.$refs.picBox.open()
-    },
-    // 打开抠图
-    openImageCutout() {
-      fetch(this.innerElement.imgUrl)
-        .then((response) => response.blob())
-        .then((blob) => {
-          const file = new File([blob], `image_${Math.random()}.jpg`, { type: 'image/jpeg' })
-          this.$refs.imageCutout.open(file)
-        })
-        .catch((error) => {
-          console.error('获取图片失败:', error)
-        })
-    },
-    // 完成抠图
-    async cutImageDone(url) {
-      setTimeout(() => {
-        this.innerElement.imgUrl = url
-      }, 300)
-    },
-  },
 }
+
+const state = reactive<TState>({
+  picBoxShow: false,
+  activeNames: ['2', '3', '4'],
+  innerElement: JSON.parse(JSON.stringify(wImageSetting)),
+  tag: false,
+  ingoreKeys: ['left', 'top', 'name', 'width', 'height', 'radiusTopLeft', 'radiusTopRight', 'radiusBottomLeft', 'radiusBottomRight'],
+  layerIconList: layerIconList.concat([
+    {
+      key: 'flip',
+      icon: 'sd-zuoyoufanzhuan',
+      extraIcon: true,
+      tip: '水平翻转',
+      value: 'Y',
+    },
+    {
+      key: 'flip',
+      icon: 'sd-shangxiafanzhuan',
+      extraIcon: true,
+      tip: '垂直翻转',
+      value: 'X',
+    },
+  ]),
+  alignIconList,
+  toolBarStyle: {},
+})
+
+const picBoxRef = ref<typeof picBox | null>(null)
+const imageCutoutRef = ref<typeof imageCutout | null>(null)
+
+const store = useStore()
+const {
+  dActiveElement, dMoving, dWidgets
+} = useSetupMapGetters(['dActiveElement', 'dMoving', 'dWidgets'])
+// computed: {
+//   ...mapGetters(['dActiveElement', 'dMoving', 'dWidgets']),
+// },
+
+let lastUuid: string | undefined = undefined
+let tag: boolean
+let toolBarStyle: { left: string, top: string } | null = null
+
+watch(
+  () => dActiveElement.value,
+  (newValue, oldValue) => {
+    change()
+    // 失焦取消编辑模式
+    if (newValue.uuid != lastUuid && typeof lastUuid !== 'undefined') {
+      state.innerElement.cropEdit = false
+      store.commit('setShowRotatable', true) // 失焦会导致大小变化锁定的错误
+    }
+    lastUuid = newValue.uuid
+  },
+  { deep: true }
+)
+
+watch(
+  () => state.innerElement,
+  (newValue, oldValue) => {
+    changeValue()
+    cropHandle()
+  },
+  { deep: true }
+)
+
+function created() {
+  change()
+}
+
+created()
+
+// ...mapActions(['updateWidgetData', 'updateAlign', 'updateLayerIndex', 'addWidget']),
+
+function change() {
+  tag = true
+  state.innerElement = JSON.parse(JSON.stringify({ ...state.innerElement, ...dActiveElement.value }))
+}
+
+function changeValue() {
+  if (tag) {
+    tag = false
+    return
+  }
+  if (dMoving.value) {
+    return
+  }
+  for (let key in state.innerElement) {
+    if (state.ingoreKeys.indexOf(key) !== -1) {
+      dActiveElement.value[key] = state.innerElement[(key as keyof TImageSetting)]
+    } else if (key !== 'cropEdit' && key !== 'record' && state.innerElement[(key as keyof TImageSetting)] !== dActiveElement.value[key]) {
+      store.dispatch('updateWidgetData', {
+        uuid: dActiveElement.value.uuid,
+        key: key,
+        value: state.innerElement[(key as keyof TImageSetting)],
+      })
+      // updateWidgetData({
+      //   uuid: this.dActiveElement.uuid,
+      //   key: key,
+      //   value: this.innerElement[key],
+      // })
+    }
+  }
+}
+
+function finishSliceData(key: string, value: number | number[]) {
+  const data = dActiveElement.value.sliceData
+  if (data) {
+    data[key] = value
+    store.dispatch('updateWidgetData', {
+      uuid: dActiveElement.value.uuid,
+      key: 'sliceData',
+      value: data,
+      pushHistory: true,
+    })
+    // updateWidgetData({
+    //   uuid: dActiveElement.uuid,
+    //   key: 'sliceData',
+    //   value: data,
+    //   pushHistory: true,
+    // })
+  }
+}
+
+function finish(key: string = "", value: number | number[] | string | null = "") {
+  store.dispatch('updateWidgetData', {
+    uuid: dActiveElement.value.uuid,
+    key: key,
+    value: value,
+    pushHistory: true,
+  })
+  // this.updateWidgetData({
+  //   uuid: this.dActiveElement.uuid,
+  //   key: key,
+  //   value: value,
+  //   pushHistory: true,
+  // })
+}
+
+function layerAction(item: TIconItemSelectData) {
+  if (item.key === 'zIndex') {
+    store.dispatch("updateLayerIndex", {
+      uuid: dActiveElement.value.uuid,
+      value: item.value,
+    })
+    // this.updateLayerIndex({
+    //   uuid: this.dActiveElement.uuid,
+    //   value: item.value,
+    // })
+  } else {
+    finish(item.key || "", item.value === dActiveElement.value.flip ? null : item.value)
+  }
+}
+
+async function alignAction(item: TIconItemSelectData) {
+  store.dispatch("updateAlign", {
+    align: item.value,
+    uuid: dActiveElement.value.uuid,
+  })
+  // this.updateAlign({
+  //   align: item.value,
+  //   uuid: this.dActiveElement.uuid,
+  // })
+  await nextTick()
+  store.commit('updateRect')
+}
+
+function openCropper() {
+  // this.$refs.crop.open(this.innerElement, this.innerElement.cropData)
+}
+
+// function cropDone({ newImg, data, width, height }) {
+//   this.innerElement.imgUrl = newImg
+//   this.innerElement.cropData = data
+//   this.innerElement.width = width.toFixed(0)
+//   this.innerElement.height = height.toFixed(0)
+// }
+
+
+// async function changeContainer(setting) {
+//   const index = this.dWidgets.findIndex((x) => x.uuid == this.innerElement.uuid)
+//   const img = await getImage(setting.svgUrl)
+//   setting.width = this.innerElement.width
+//   setting.height = img.height * (this.innerElement.width / img.width)
+//   setting.left = this.innerElement.left
+//   setting.top = this.innerElement.top
+//   setting.imgUrl = this.innerElement.imgUrl
+//   this.dWidgets.splice(index, 1)
+//   this.addWidget(setting)
+// }
+
+// async function uploadImgDone(img) {
+//   this.$store.commit('setShowMoveable', false)
+//   await api.material.addMyPhoto(img)
+//   // this.innerElement.width = img.width
+//   this.innerElement.height = img.height * (this.innerElement.width / img.width)
+//   this.innerElement.imgUrl = img.url
+//   this.$store.commit('setShowMoveable', true)
+// }
+
+
+function selectDone(img: TGetImageListResult) {
+  state.innerElement.imgUrl = img.url
+  // this.imgCrop(true)
+}
+
+function imgCrop(val: boolean) {
+  // TODO: 画布内图像裁剪
+  const el = document.getElementById(state.innerElement.uuid || "")
+  if (!el) return
+  const { left, top } = el.getBoundingClientRect()
+  toolBarStyle = { left: left + 'px', top: top + 'px' }
+  state.innerElement.cropEdit = val
+  store.commit('setShowRotatable', !val)
+}
+
+
+function cropHandle() {
+  store.commit('setCropUuid', state.innerElement.cropEdit ? state.innerElement.uuid : -1)
+}
+
+// 图库选择器
+function openPicBox() {
+  if (picBoxRef.value) {
+    picBoxRef.value.open()
+  }
+}
+
+// 打开抠图
+function openImageCutout() {
+  fetch(state.innerElement.imgUrl || "")
+    .then((response) => response.blob())
+    .then((blob) => {
+      const file = new File([blob], `image_${Math.random()}.jpg`, { type: 'image/jpeg' })
+      if (imageCutoutRef.value) {
+        imageCutoutRef.value.open(file)
+      }
+    })
+    .catch((error) => {
+      console.error('获取图片失败:', error)
+    })
+}
+
+// 完成抠图
+async function cutImageDone(url: string) {
+  setTimeout(() => {
+    state.innerElement.imgUrl = url
+  }, 300)
+}
+
 </script>
 
 <style lang="less" scoped>

src/mixins/methods/handlePaste.ts

@@ -16,7 +16,9 @@ import api from '@/api'
 import Qiniu from '@/common/methods/QiNiu'
 import _config from '@/config'
 import { getImage } from '@/common/methods/getImgDetail'
-import wImage from '@/components/modules/widgets/wImage/wImage.vue'
+// import wImage from '@/components/modules/widgets/wImage/wImage.vue'
+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 eventBus from '@/utils/plugins/eventBus'
 
@@ -43,7 +45,7 @@ export default () => {
             eventBus.emit('refreshUserImages')
             // 添加图片到画布中
             store.commit('setShowMoveable', false) // 清理掉上一次的选择
-            const setting = JSON.parse(JSON.stringify(wImage.setting))
+            const setting = JSON.parse(JSON.stringify(wImageSetting))
             setting.width = width
             setting.height = height
             setting.imgUrl = url

src/views/Psd.vue

@@ -61,7 +61,8 @@ import RightClickMenu from '@/components/business/right-click-menu/RcMenu.vue'
 import Moveable from '@/components/business/moveable/Moveable.vue'
 import shortcuts from '@/mixins/shortcuts'
 // import wText from '@/components/modules/widgets/wText/wText.vue'
-import wImage from '@/components/modules/widgets/wImage/wImage.vue'
+// import wImage from '@/components/modules/widgets/wImage/wImage.vue'
+import wImageSetting from '@/components/modules/widgets/wImage/wImageSetting'
 import useLoading from '@/common/methods/loading'
 import uploader from '@/components/common/Uploader/index.vue'
 import designBoard from '@/components/modules/layout/designBoard/index.vue'
@@ -126,7 +127,7 @@ async function loadPSD(file: File) {
   setTimeout(async () => {
     const types: any = {
       text: wTextSetting,
-      image: wImage.setting,
+      image: wImageSetting,
     }
     for (let i = 0; i < data.clouds.length; i++) {
       const x: any = data.clouds[i]