Forráskód Böngészése

fix: 修改问题

liaojiaxing 1 hete
szülő
commit
58f697ea8b

+ 66 - 14
src/renderer/src/lvgl-widgets/tileview/Config.vue

@@ -7,7 +7,12 @@
           <el-tooltip content="瓷砖位置索引">
             <LuInfo size="12px" class="text-accent-yellow" /> </el-tooltip
         ></span>
-        <LuPlus class="cursor-pointer" size="16px" @click="handleAddRow" />
+        <span class="flex items-center gap-12px">
+          <el-tooltip content="动画">
+            <el-switch v-model="animation" size="small"> </el-switch>
+          </el-tooltip>
+          <LuPlus class="cursor-pointer" size="16px" @click="handleAddRow" />
+        </span>
       </div>
     </template>
     <el-scrollbar max-height="120px">
@@ -21,7 +26,7 @@
           <input-number
             class="flex-1"
             controls-position="right"
-            :model-value="item.row"
+            v-model="item.row"
             @change="(val) => setRow(index, val)"
           >
             <template #prefix>
@@ -31,7 +36,7 @@
           <input-number
             class="flex-1"
             controls-position="right"
-            :model-value="item.col"
+            v-model="item.col"
             @change="(val) => setColumn(index, val)"
           >
             <template #prefix>
@@ -50,13 +55,14 @@
 </template>
 
 <script setup lang="ts">
-import { computed, type Ref, watch } from 'vue'
+import { computed, ref, type Ref, watch } from 'vue'
+import { ElMessage } from 'element-plus'
 import { LuPlus, LuTrash2, LuInfo } from 'vue-icons-plus/lu'
 
 const props = defineProps<{
   values: Ref<any>
 }>()
-
+console.log('props', props)
 const directionOptions = [
   { label: '水平', value: 'HOR' },
   { label: '垂直', value: 'VER' },
@@ -75,6 +81,18 @@ const children = computed({
   }
 })
 
+// 动画
+const animation = computed({
+  get() {
+    return props.values?.value?.props?.animation
+  },
+  set(val: string) {
+    if (props.values?.value?.props) {
+      props.values.value.props.animation = val
+    }
+  }
+})
+
 // 当前激活
 const activeIndex = computed({
   get() {
@@ -87,6 +105,15 @@ const activeIndex = computed({
   }
 })
 
+const lastValidPositions = ref<{ row: number; col: number }[]>([])
+
+const syncLastValidPositions = () => {
+  lastValidPositions.value = children.value.map((item) => ({
+    row: item.row,
+    col: item.col
+  }))
+}
+
 /*
  * 设置行号
  */
@@ -94,13 +121,23 @@ const setRow = (index: number, val?: number) => {
   if (typeof val === 'undefined') return
 
   const record = children.value[index]
+  if (!record) return
+  const previousRow = lastValidPositions.value[index]?.row ?? record.row
 
   // 判断是否存在相同索引
-  const existIndex = children.value.findIndex((item) => item.row === val && item.col === record.col)
+  const existIndex = children.value.findIndex(
+    (item, itemIndex) => itemIndex !== index && item.row === val && item.col === record.col
+  )
+
+  if (existIndex !== -1) {
+    ElMessage.warning('瓷砖位置索引重复')
+    record.row = previousRow
+    return
+  }
 
-  if (existIndex === -1) {
-    // 不存在相同索引
-    record.row = val
+  lastValidPositions.value[index] = {
+    row: val,
+    col: record.col
   }
 }
 
@@ -111,13 +148,23 @@ const setColumn = (index: number, val?: number) => {
   if (typeof val === 'undefined') return
 
   const record = children.value[index]
+  if (!record) return
+  const previousCol = lastValidPositions.value[index]?.col ?? record.col
 
   // 判断是否存在相同索引
-  const existIndex = children.value.findIndex((item) => item.col === val && item.row === record.row)
+  const existIndex = children.value.findIndex(
+    (item, itemIndex) => itemIndex !== index && item.col === val && item.row === record.row
+  )
+
+  if (existIndex !== -1) {
+    ElMessage.warning('瓷砖位置索引重复')
+    record.col = previousCol
+    return
+  }
 
-  if (existIndex === -1) {
-    // 不存在相同索引
-    record.col = val
+  lastValidPositions.value[index] = {
+    row: record.row,
+    col: val
   }
 }
 
@@ -132,7 +179,8 @@ watch(
     })
   },
   {
-    deep: true
+    deep: true,
+    immediate: true
   }
 )
 
@@ -142,6 +190,7 @@ watch(
  */
 const handleDeleteItem = (index: number) => {
   children.value.splice(index, 1)
+  syncLastValidPositions()
 }
 
 /**
@@ -164,7 +213,10 @@ const handleAddRow = () => {
     direction: 'ALL',
     children: []
   })
+  syncLastValidPositions()
 }
+
+syncLastValidPositions()
 </script>
 
 <style scoped></style>

+ 2 - 1
src/renderer/src/lvgl-widgets/tileview/index.tsx

@@ -75,7 +75,8 @@ export default {
       states: [],
       scrollbar: 'off',
       // 当前激活index
-      activeIndex: 0
+      activeIndex: 0,
+      animation: false
     },
     styles: [
       {

+ 14 - 8
src/renderer/src/views/designer/workspace/stage/Moveable.vue

@@ -97,6 +97,18 @@ const moveableTarget = computed<HTMLElement | HTMLElement[] | null>(() => {
   return elements.value[0] ?? null
 })
 
+// 同步选中元素
+const syncSelectedElements = () => {
+  elements.value = []
+  const ids = projectStore.activeWidgets.map((item) => item.id)
+  document.querySelectorAll('[widget-id]').forEach((el) => {
+    const id = el.attributes.getNamedItem('widget-id')?.value
+    if (id && ids.includes(id)) {
+      elements.value.push(el as HTMLElement)
+    }
+  })
+}
+
 // 吸附附近元素
 const elementGridelines = ref<Element[]>([])
 // 获取吸附附近元素
@@ -132,14 +144,7 @@ const horizontalGuidelines = computed(() => {
 watch(
   () => projectStore.activeWidgets.map((item) => item.id).join('|'),
   () => {
-    elements.value = []
-    const ids = projectStore.activeWidgets.map((item) => item.id)
-    document.querySelectorAll('[widget-id]').forEach((el) => {
-      const id = el.attributes.getNamedItem('widget-id')?.value
-      if (id && ids.includes(id)) {
-        elements.value.push(el as HTMLElement)
-      }
-    })
+    syncSelectedElements()
   }
 )
 
@@ -154,6 +159,7 @@ useMutationObserver(
         elementGridelines.value.push(el)
       })
     })
+    syncSelectedElements()
   },
   {
     childList: true,

+ 2 - 2
src/renderer/src/views/designer/workspace/stage/Node.vue

@@ -358,8 +358,8 @@ watch(nodeState, (state) => {
       dropFlag = false
       clearDropMouseupListener()
       const scale = elementW / schema.props.width
-      const x = elementX / scale - offsetX
-      const y = elementY / scale - offsetY
+      const x = Math.round(elementX / scale - offsetX)
+      const y = Math.round(elementY / scale - offsetY)
 
       projectStore.activeWidgets[0].props.x = x
       projectStore.activeWidgets[0].props.y = y