Browse Source

feat: 新增解除组件还原位置

奔跑的面条 3 years ago
parent
commit
31a84e4d87

+ 4 - 0
src/store/modules/chartEditStore/chartEditStore.ts

@@ -650,7 +650,11 @@ export const useChartEditStore = defineStore({
         // 解组
         // 解组
         const unGroup = (targetIndex: number) => {
         const unGroup = (targetIndex: number) => {
           const targetGroup = this.getComponentList[targetIndex] as CreateComponentGroupType
           const targetGroup = this.getComponentList[targetIndex] as CreateComponentGroupType
+
+          // 分离组件并还原位置属性
           targetGroup.groupList.forEach(item => {
           targetGroup.groupList.forEach(item => {
+            item.attr.x = item.attr.x + targetGroup.attr.x
+            item.attr.y = item.attr.y + targetGroup.attr.y
             this.addComponentList(item)
             this.addComponentList(item)
           })
           })
           this.setTargetSelectChart(targetGroup.id)
           this.setTargetSelectChart(targetGroup.id)

+ 2 - 0
src/views/chart/ContentEdit/components/EditGroup/index.vue

@@ -5,6 +5,7 @@
       :data-id="groupData.id"
       :data-id="groupData.id"
       :index="groupIndex"
       :index="groupIndex"
       :item="groupData"
       :item="groupData"
+      :hiddenPoint="true"
       :style="{
       :style="{
         ...useComponentStyle(groupData.attr, groupIndex),
         ...useComponentStyle(groupData.attr, groupIndex),
         ...useSizeStyle(groupData.attr),
         ...useSizeStyle(groupData.attr),
@@ -24,6 +25,7 @@
         :data-id="item.id"
         :data-id="item.id"
         :index="groupIndex"
         :index="groupIndex"
         :item="item"
         :item="item"
+        :hiddenPoint="true"
         :style="{
         :style="{
           ...useComponentStyle(item.attr, groupIndex)
           ...useComponentStyle(item.attr, groupIndex)
         }"
         }"

+ 13 - 7
src/views/chart/ContentEdit/components/EditShapeBox/index.vue

@@ -2,13 +2,15 @@
   <div class="go-shape-box">
   <div class="go-shape-box">
     <slot></slot>
     <slot></slot>
     <!-- 锚点 -->
     <!-- 锚点 -->
-    <div
-      :class="`shape-point ${point}`"
-      v-for="(point, index) in select ? pointList : []"
-      :key="index"
-      :style="usePointStyle(point, index, item.attr, cursorResize)"
-      @mousedown="useMousePointHandle($event, point, item.attr)"
-    ></div>
+    <template v-if="!hiddenPoint">
+      <div
+        :class="`shape-point ${point}`"
+        v-for="(point, index) in select ? pointList : []"
+        :key="index"
+        :style="usePointStyle(point, index, item.attr, cursorResize)"
+        @mousedown="useMousePointHandle($event, point, item.attr)"
+      ></div>
+    </template>
 
 
     <!-- 选中 -->
     <!-- 选中 -->
     <div class="shape-modal" :style="useSizeStyle(item.attr)">
     <div class="shape-modal" :style="useSizeStyle(item.attr)">
@@ -30,6 +32,10 @@ const props = defineProps({
   item: {
   item: {
     type: Object as PropType<CreateComponentType | CreateComponentGroupType>,
     type: Object as PropType<CreateComponentType | CreateComponentGroupType>,
     required: true
     required: true
+  },
+  hiddenPoint: {
+    type: Boolean,
+    required: false
   }
   }
 })
 })