Pre Merge pull request !252 from 陈晨成/master-fetch-dev

src/views/chart/ContentEdit/components/EditGroup/index.vue

@@ -8,6 +8,7 @@
       :hiddenPoint="true"
       :class="animationsClass(groupData.styles.animations)"
       :style="{
+        ...useComponentStyle(groupData.attr, groupIndex),
         ...useSizeStyle(groupData.attr),
         ...getFilterStyle(groupData.styles),
         ...getTransformStyle(groupData.styles),
@@ -27,6 +28,9 @@
         :index="groupIndex"
         :item="item"
         :hiddenPoint="true"
+        :style="{
+          ...useComponentStyle(item.attr, groupIndex)
+        }"
       >
         <component
           class="edit-content-chart"
@@ -56,7 +60,7 @@ import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle,
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useContextMenu, divider } from '@/views/chart/hooks/useContextMenu.hook'
 import { useMouseHandle } from '../../hooks/useDrag.hook'
-import { useSizeStyle } from '../../hooks/useStyle.hook'
+import { useComponentStyle, useSizeStyle } from '../../hooks/useStyle.hook'
 import { EditShapeBox } from '../../components/EditShapeBox'
 
 const props = defineProps({

src/views/chart/ContentEdit/components/EditShapeBox/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="go-shape-box" :class="{ lock, hide }" :style="positionStyle">
+  <div class="go-shape-box" :class="{ lock, hide }">
     <slot></slot>
     <!-- 锚点 -->
     <template v-if="!hiddenPoint">
@@ -38,10 +38,6 @@ const props = defineProps({
   hiddenPoint: {
     type: Boolean,
     required: false
-  },
-  index: {
-    type: Number,
-    default: 0
   }
 })
 
@@ -84,17 +80,6 @@ const lock = computed(() => {
 const hide = computed(() => {
   return props.item.status.hide
 })
-
-// 位置样式
-const positionStyle = computed(() => {
-  const attr = props.item?.attr
-  if (!attr) return {}
-  return {
-    zIndex: props.index + 1,
-    left: `${attr.x}px`,
-    top: `${attr.y}px`
-  }
-})
 </script>
 
 <style lang="scss" scoped>

src/views/chart/ContentEdit/index.vue

@@ -39,6 +39,7 @@
                 :data-id="item.id"
                 :index="index"
                 :style="{
+                  ...useComponentStyle(item.attr, index),
                   ...(getBlendModeStyle(item.styles) as any),
                 }"
                 :item="item"
@@ -105,7 +106,7 @@ import { useLayout } from './hooks/useLayout.hook'
 import { useAddKeyboard } from '../hooks/useKeyboard.hook'
 import { useSync } from '../hooks/useSync.hook'
 import { dragHandle, dragoverHandle, mousedownHandleUnStop, useMouseHandle } from './hooks/useDrag.hook'
-import { useSizeStyle } from './hooks/useStyle.hook'
+import { useComponentStyle, useSizeStyle } from './hooks/useStyle.hook'
 import { useInitVChartsTheme } from '@/hooks'
 
 import { ContentBox } from '../ContentBox/index'

src/views/chart/ContentLayers/index.vue

@@ -65,6 +65,7 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 import Draggable from 'vuedraggable'
+import cloneDeep from 'lodash/cloneDeep'
 import { ContentBox } from '../ContentBox/index'
 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
 import { ChartLayoutStoreEnum, LayerModeEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
@@ -95,7 +96,7 @@ const layerMode = ref<LayerModeEnum>(chartLayoutStore.getLayerType)
 
 // 逆序展示
 const reverseList = computed(() => {
-  const list: Array<CreateComponentType | CreateComponentGroupType> = [...chartEditStore.getComponentList]
+  const list: Array<CreateComponentType | CreateComponentGroupType> = cloneDeep(chartEditStore.getComponentList)
   return list.reverse()
 })