From 3419879ebfaf5ad0ad6f31bab7f5493e237a2227 Mon Sep 17 00:00:00 2001
From: zackxizi <zackxizi@qq.com>
Date: Thu, 4 Apr 2024 11:15:45 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BD=8D=E7=BD=AE=E5=B0=BA=E5=AF=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/business/line-layout/index.vue | 45 +++++++++++++++
 .../modules/widgets/wGroup/wGroupStyle.vue    |  6 +-
 .../modules/widgets/wImage/wImageStyle.vue    |  8 ++-
 .../modules/widgets/wQrcode/wQrcodeStyle.vue  | 56 ++++++++++---------
 .../modules/widgets/wSvg/wSvgStyle.vue        |  6 +-
 .../modules/widgets/wText/wTextStyle.vue      |  6 +-
 6 files changed, 93 insertions(+), 34 deletions(-)
 create mode 100644 src/components/business/line-layout/index.vue

diff --git a/src/components/business/line-layout/index.vue b/src/components/business/line-layout/index.vue
new file mode 100644
index 0000000..d4a9b74
--- /dev/null
+++ b/src/components/business/line-layout/index.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="line-layout">
+    <number-input :modelValue="loc.x" label="X" @update:modelValue="(value) => change('x', value)" />
+    <number-input :modelValue="loc.y" label="Y" @update:modelValue="(value) => change('y', value)" />
+    <number-input :modelValue="width" style="margin-top: 0.5rem" label="宽" :editable="true" @update:modelValue="(value) => change('width', value)" />
+    <number-input :modelValue="height" style="margin-top: 0.5rem" label="高" :editable="true" @update:modelValue="(value) => change('height', value)" />
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed } from 'vue'
+import numberInput from '../../modules/settings/numberInput.vue'
+import { useWidgetStore } from '../../../store'
+import { getOffsetFromTransform, removeTranslate } from '../../../utils/widgets/transferTranslate'
+import { TUpdateWidgetPayload } from '../../../store/design/widget/actions/widget'
+const widgetStore = useWidgetStore()
+const dActiveElement = computed(() => widgetStore.dActiveElement)
+const loc = computed(() => getOffsetFromTransform(dActiveElement.value?.transform))
+const transformNLoc = computed(() => removeTranslate(dActiveElement.value?.transform))
+const width = computed(() => dActiveElement.value?.width)
+const height = computed(() => dActiveElement.value?.height)
+
+
+function change(key: string, value: number | Record<string, any> | string) {
+  console.log(key, value, 'change===')
+  const uuid = dActiveElement.value?.uuid ?? ''
+  let transform = transformNLoc.value
+  let _key = key
+  let _value = value
+  if (key === 'x') {
+    transform = `translate(${value}px, ${loc.value.y}px) ${transform}`
+    _key = 'transform'
+    _value = transform
+  } else if (key === 'y') {
+    transform = `translate(${loc.value.x}px, ${value}px) ${transform}`
+    _key = 'transform'
+    _value = transform
+  }
+  widgetStore.updateWidgetData({
+    uuid,
+    key: _key as TUpdateWidgetPayload['key'],
+    value: _value,
+    pushHistory: false,
+  })
+}
+</script>
diff --git a/src/components/modules/widgets/wGroup/wGroupStyle.vue b/src/components/modules/widgets/wGroup/wGroupStyle.vue
index 1c42533..b34cd27 100644
--- a/src/components/modules/widgets/wGroup/wGroupStyle.vue
+++ b/src/components/modules/widgets/wGroup/wGroupStyle.vue
@@ -9,12 +9,13 @@
   <div id="w-group-style">
     <el-collapse v-model="state.activeNames">
       <el-collapse-item title="位置尺寸" name="1">
-        <div class="line-layout">
+        <!-- <div class="line-layout">
           <number-input v-model="state.innerElement.left" label="X" @finish="(value) => finish('left', value)" />
           <number-input v-model="state.innerElement.top" label="Y" @finish="(value) => finish('top', value)" />
           <number-input v-model="state.innerElement.width" style="margin-top: 0.5rem" label="宽" @finish="(value) => finish('width', value)" />
           <number-input v-model="state.innerElement.height" style="margin-top: 0.5rem" label="高" @finish="(value) => finish('height', value)" />
-        </div>
+        </div> -->
+        <line-layout />
       </el-collapse-item>
       <el-collapse-item title="样式设置" name="2">
         <!-- <el-button plain type="primary" class="block-btn" @click="store.dispatch('ungroup', state.innerElement.uuid)">取消组合</el-button> -->
@@ -44,6 +45,7 @@ import { storeToRefs } from 'pinia'
 import { TUpdateWidgetPayload } from '@/store/design/widget/actions/widget'
 import { TupdateLayerIndexData } from '@/store/design/widget/actions/layer'
 import { TUpdateAlignData } from '@/store/design/widget/actions/align'
+import LineLayout from '@/components/business/line-layout/index.vue'
 // import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 
 type TState = {
diff --git a/src/components/modules/widgets/wImage/wImageStyle.vue b/src/components/modules/widgets/wImage/wImageStyle.vue
index 1776860..ac5f60a 100644
--- a/src/components/modules/widgets/wImage/wImageStyle.vue
+++ b/src/components/modules/widgets/wImage/wImageStyle.vue
@@ -3,18 +3,19 @@
  * @Date: 2021-08-09 11:41:53
  * @Description: 
  * @LastEditors: xi_zi
- * @LastEditTime: 2024-04-03 13:44:42
+ * @LastEditTime: 2024-04-04 11:13:38
 -->
 <template>
   <div id="w-image-style">
     <el-collapse v-model="state.activeNames">
       <el-collapse-item title="位置尺寸" name="1">
-        <div class="line-layout">
+        <!-- <div class="line-layout">
           <number-input v-model="state.innerElement.left" label="X" @finish="(value) => finish('left', value)" />
           <number-input v-model="state.innerElement.top" label="Y" @finish="(value) => finish('top', value)" />
           <number-input v-model="state.innerElement.width" style="margin-top: 0.5rem" label="宽" @finish="(value) => finish('width', value)" />
           <number-input v-model="state.innerElement.height" style="margin-top: 0.5rem" label="高" @finish="(value) => finish('height', value)" />
-        </div>
+        </div> -->
+        <line-layout />
       </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> -->
@@ -87,6 +88,7 @@ import { useCanvasStore, useControlStore, useForceStore, useWidgetStore } from '
 import { TUpdateWidgetPayload } from '@/store/design/widget/actions/widget'
 import { TupdateLayerIndexData } from '@/store/design/widget/actions/layer'
 import { TUpdateAlignData } from '@/store/design/widget/actions/align'
+import LineLayout from '@/components/business/line-layout/index.vue'
 
 type TState = {
   picBoxShow: boolean
diff --git a/src/components/modules/widgets/wQrcode/wQrcodeStyle.vue b/src/components/modules/widgets/wQrcode/wQrcodeStyle.vue
index cc1009a..2d89e2d 100644
--- a/src/components/modules/widgets/wQrcode/wQrcodeStyle.vue
+++ b/src/components/modules/widgets/wQrcode/wQrcodeStyle.vue
@@ -2,19 +2,20 @@
  * @Author: ShawnPhang
  * @Date: 2021-08-09 11:41:53
  * @Description: 
- * @LastEditors: ShawnPhang <site: book.palxp.com>
- * @LastEditTime: 2023-06-29 17:53:23
+ * @LastEditors: xi_zi
+ * @LastEditTime: 2024-04-04 11:13:31
 -->
 <template>
   <div id="w-image-style">
     <el-collapse v-model="state.activeNames">
       <el-collapse-item title="位置尺寸" name="1">
-        <div class="line-layout">
+        <!-- <div class="line-layout">
           <number-input v-model="state.innerElement.left" label="X" @finish="(value) => finish('left', value)" />
           <number-input v-model="state.innerElement.top" label="Y" @finish="(value) => finish('top', value)" />
           <number-input v-model="state.innerElement.width" style="margin-top: 0.5rem" label="宽" @finish="(value) => finish('width', value)" />
           <number-input v-model="state.innerElement.height" style="margin-top: 0.5rem" label="高" @finish="(value) => finish('height', value)" />
-        </div>
+        </div> -->
+        <line-layout />
       </el-collapse-item>
       <el-collapse-item title="样式设计" name="2">
         <div style="flex-wrap: nowrap" class="line-layout">
@@ -29,7 +30,16 @@
           <color-select v-model="state.innerElement.dotColor" @finish="(value) => finish('dotColor', value)" />
           <color-select v-show="state.innerElement.dotColorType !== 'single'" v-model="state.innerElement.dotColor2" @finish="(value) => finish('dotColor2', value)" />
         </div>
-        <number-slider v-show="state.innerElement.dotColorType !== 'single'" v-model="state.innerElement.dotRotation" style="margin-top: 8px" label="渐变角度" :step="1" :minValue="0" :maxValue="360" @finish="(value) => finish('dotRotation', value)" />
+        <number-slider
+          v-show="state.innerElement.dotColorType !== 'single'"
+          v-model="state.innerElement.dotRotation"
+          style="margin-top: 8px"
+          label="渐变角度"
+          :step="1"
+          :minValue="0"
+          :maxValue="360"
+          @finish="(value) => finish('dotRotation', value)"
+        />
       </el-collapse-item>
       <el-collapse-item title="内容设置" name="3">
         <text-input-area v-model="state.innerElement.value" :max="40" label="" @finish="(value) => finish('value', value)" />
@@ -77,15 +87,16 @@ import { storeToRefs } from 'pinia'
 import { useControlStore, useForceStore, useWidgetStore } from '@/store'
 import { TUpdateWidgetPayload } from '@/store/design/widget/actions/widget'
 import { TUpdateAlignData } from '@/store/design/widget/actions/align'
+import LineLayout from '@/components/business/line-layout/index.vue'
 
 type TState = {
   activeNames: string[]
-  innerElement: TWQrcodeSetting,
-  tag: boolean,
-  ingoreKeys: string[],
-  layerIconList: TIconItemSelectData[],
-  alignIconList: TIconItemSelectData[],
-  localization: QrCodeLocalizationData,
+  innerElement: TWQrcodeSetting
+  tag: boolean
+  ingoreKeys: string[]
+  layerIconList: TIconItemSelectData[]
+  alignIconList: TIconItemSelectData[]
+  localization: QrCodeLocalizationData
 }
 
 const state = reactive<TState>({
@@ -98,12 +109,10 @@ const state = reactive<TState>({
   localization,
 })
 
-
 const controlStore = useControlStore()
 const widgetStore = useWidgetStore()
 const forceStore = useForceStore()
 
-
 // const {
 //   dActiveElement, dWidgets
 // } = useSetupMapGetters(['dActiveElement', 'dWidgets'])
@@ -121,7 +130,7 @@ watch(
     if (Number(newValue.uuid) == -1) {
       state.innerElement.cropEdit = false
       widgetStore.updateWidgetData({
-        uuid: lastUuid ?? "",
+        uuid: lastUuid ?? '',
         key: 'cropEdit',
         value: false,
       })
@@ -134,7 +143,7 @@ watch(
       lastUuid = newValue.uuid
     }
   },
-  { deep: true }
+  { deep: true },
 )
 
 watch(
@@ -142,7 +151,7 @@ watch(
   (newValue, oldValue) => {
     changeValue()
   },
-  { deep: true }
+  { deep: true },
 )
 
 function created() {
@@ -168,13 +177,10 @@ function changeValue() {
   for (let key in state.innerElement) {
     const itemKey = key as keyof TWQrcodeSetting
     if (state.ingoreKeys.indexOf(key) !== -1) {
-      (dActiveElement.value as Record<string, any>)[itemKey] = state.innerElement[itemKey]
-    } else if (
-      key !== 'setting' && key !== 'record' &&
-      state.innerElement[itemKey] !== (dActiveElement.value as Record<string, any>)[itemKey]
-    ) {
+      ;(dActiveElement.value as Record<string, any>)[itemKey] = state.innerElement[itemKey]
+    } else if (key !== 'setting' && key !== 'record' && state.innerElement[itemKey] !== (dActiveElement.value as Record<string, any>)[itemKey]) {
       widgetStore.updateWidgetData({
-        uuid: dActiveElement.value?.uuid || "",
+        uuid: dActiveElement.value?.uuid || '',
         key: key as TUpdateWidgetPayload['key'],
         value: state.innerElement[itemKey] as TUpdateWidgetPayload['value'],
       })
@@ -205,7 +211,7 @@ function finish(key: string, value: number | number[] | string) {
 function layerAction(item: TIconItemSelectData) {
   console.log(item)
   widgetStore.updateLayerIndex({
-    uuid: dActiveElement.value?.uuid || "",
+    uuid: dActiveElement.value?.uuid || '',
     value: item.value as number,
   })
   // store.dispatch("updateLayerIndex", {
@@ -217,7 +223,7 @@ function layerAction(item: TIconItemSelectData) {
 async function alignAction(item: TIconItemSelectData) {
   widgetStore.updateAlign({
     align: item.value as TUpdateAlignData['align'],
-    uuid: dActiveElement.value?.uuid || "",
+    uuid: dActiveElement.value?.uuid || '',
   })
   // store.dispatch("updateAlign", {
   //   align: item.value,
@@ -237,7 +243,7 @@ async function uploadImgDone(img: TUploadDoneData) {
   // this.innerElement.width = img.width
   // this.innerElement.height = img.height * (this.innerElement.width / img.width)
   state.innerElement.url = img.url
-  
+
   // store.commit('setShowMoveable', true)
   controlStore.setShowMoveable(true)
 }
diff --git a/src/components/modules/widgets/wSvg/wSvgStyle.vue b/src/components/modules/widgets/wSvg/wSvgStyle.vue
index b7d9047..2593289 100644
--- a/src/components/modules/widgets/wSvg/wSvgStyle.vue
+++ b/src/components/modules/widgets/wSvg/wSvgStyle.vue
@@ -9,12 +9,13 @@
   <div id="w-image-style">
     <el-collapse v-model="state.activeNames">
       <el-collapse-item title="位置尺寸" name="1">
-        <div class="line-layout">
+        <!-- <div class="line-layout">
           <number-input v-model="state.innerElement.left" label="X" @finish="(value) => finish('left', value)" />
           <number-input v-model="state.innerElement.top" label="Y" @finish="(value) => finish('top', value)" />
           <number-input v-model="state.innerElement.width" style="margin-top: 0.5rem" label="宽" @finish="(value) => finish('width', value)" />
           <number-input v-model="state.innerElement.height" style="margin-top: 0.5rem" label="高" @finish="(value) => finish('height', value)" />
-        </div>
+        </div> -->
+        <line-layout />
       </el-collapse-item>
       <el-collapse-item title="设置颜色" name="2">
         <div v-for="(c, ci) in state.innerElement.colors" :key="ci + 'c'">
@@ -50,6 +51,7 @@ import { storeToRefs } from 'pinia'
 import { useControlStore, useWidgetStore } from '@/store'
 import { TUpdateWidgetPayload } from '@/store/design/widget/actions/widget'
 import { TUpdateAlignData } from '@/store/design/widget/actions/align'
+import LineLayout from '@/components/business/line-layout/index.vue'
 
 type TState = {
   activeNames: string[]
diff --git a/src/components/modules/widgets/wText/wTextStyle.vue b/src/components/modules/widgets/wText/wTextStyle.vue
index 6263835..dbf8f00 100644
--- a/src/components/modules/widgets/wText/wTextStyle.vue
+++ b/src/components/modules/widgets/wText/wTextStyle.vue
@@ -2,12 +2,13 @@
   <div id="w-text-style">
     <el-collapse v-model="state.activeNames">
       <el-collapse-item title="位置尺寸" name="1">
-        <div class="line-layout">
+        <!-- <div class="line-layout">
           <number-input v-model="state.innerElement.left" label="X" @finish="(value) => finish('left', value)" />
           <number-input v-model="state.innerElement.top" label="Y" @finish="(value) => finish('top', value)" />
           <number-input v-model="state.innerElement.width" style="margin-top: 0.5rem" label="宽" :editable="true" @finish="(value) => finish('width', value)" />
           <number-input v-model="state.innerElement.height" style="margin-top: 0.5rem" label="高" :editable="true" @finish="(value) => finish('height', value)" />
-        </div>
+        </div> -->
+        <line-layout />
       </el-collapse-item>
       <!-- <el-collapse-item title="样式设置" name="2"> -->
       <div class="line-layout style-item">
@@ -69,6 +70,7 @@ import { storeToRefs } from 'pinia';
 import { useControlStore, useForceStore, useWidgetStore } from '@/store';
 import { TUpdateWidgetPayload } from '@/store/design/widget/actions/widget';
 import { TUpdateAlignData } from '@/store/design/widget/actions/align';
+import LineLayout from '@/components/business/line-layout/index.vue'
 
 type TState = {
   activeNames: string[],