From f44d119f16b1675f678e1ff79c64271eaeb6453c Mon Sep 17 00:00:00 2001
From: MTrun <1262327911@qq.com>
Date: Thu, 27 Jan 2022 20:47:22 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=20=E6=96=B0=E5=A2=9E=E5=9B=BE?=
 =?UTF-8?q?=E8=A1=A8=E5=A4=96=E5=B1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ContentEdit/components/ShapeBox/index.ts  |  3 ++
 .../ContentEdit/components/ShapeBox/index.vue | 13 ++++++++
 .../chart/ContentEdit/hooks/useStyle.hook.ts  |  9 ++++--
 src/views/chart/ContentEdit/index.vue         | 30 +++++++++++--------
 4 files changed, 40 insertions(+), 15 deletions(-)
 create mode 100644 src/views/chart/ContentEdit/components/ShapeBox/index.ts
 create mode 100644 src/views/chart/ContentEdit/components/ShapeBox/index.vue

diff --git a/src/views/chart/ContentEdit/components/ShapeBox/index.ts b/src/views/chart/ContentEdit/components/ShapeBox/index.ts
new file mode 100644
index 00000000..7c8ecffb
--- /dev/null
+++ b/src/views/chart/ContentEdit/components/ShapeBox/index.ts
@@ -0,0 +1,3 @@
+import ShapeBox from './index.vue'
+
+export { ShapeBox }
diff --git a/src/views/chart/ContentEdit/components/ShapeBox/index.vue b/src/views/chart/ContentEdit/components/ShapeBox/index.vue
new file mode 100644
index 00000000..52b13709
--- /dev/null
+++ b/src/views/chart/ContentEdit/components/ShapeBox/index.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="go-shape-box">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped>
+@include go(shape-box) {
+  position: absolute;
+}
+</style>
diff --git a/src/views/chart/ContentEdit/hooks/useStyle.hook.ts b/src/views/chart/ContentEdit/hooks/useStyle.hook.ts
index a16c9630..4975da91 100644
--- a/src/views/chart/ContentEdit/hooks/useStyle.hook.ts
+++ b/src/views/chart/ContentEdit/hooks/useStyle.hook.ts
@@ -10,8 +10,13 @@ export const useComponentStyle = (attr: AttrType, index: number) => {
     zIndex: index,
     left: `${attr.x}px`,
     top: `${attr.y}px`,
-    width: `${attr.w}px`,
-    height: `${attr.h}px`
   }
   return componentStyle
 }
+export const useSizeStyle = (attr: AttrType) => {
+  const sizeStyle = {
+    width: `${attr.w}px`,
+    height: `${attr.h}px`
+  }
+  return sizeStyle
+}
diff --git a/src/views/chart/ContentEdit/index.vue b/src/views/chart/ContentEdit/index.vue
index 66b110bf..b83f31f7 100644
--- a/src/views/chart/ContentEdit/index.vue
+++ b/src/views/chart/ContentEdit/index.vue
@@ -12,14 +12,19 @@
     <div id="go-chart-edit-content">
       <!-- 展示 -->
       <EditRange>
-        <component
-          class="edit-content-chart" 
+        <ShapeBox
           v-for="(item, index) in chartEditStore.getComponentList"
           :key="item.id"
-          :is="item.key"
-          :chartData="item"
+          :index="index"
           :style="useComponentStyle(item.attr, index)"
-        />
+        >
+          <component
+            class="edit-content-chart"
+            :is="item.key"
+            :chartData="item"
+            :style="useSizeStyle(item.attr)"
+          />
+        </ShapeBox>
       </EditRange>
     </div>
     <!-- 底部控制 -->
@@ -34,10 +39,11 @@ import { onUnmounted, onMounted, toRefs } from 'vue'
 import { ContentBox } from '../ContentBox/index'
 import { EditRange } from './components/EditRange'
 import { EditBottom } from './components/EditBottom'
+import { ShapeBox } from './components/ShapeBox/index'
 import { useLayout } from './hooks/useLayout.hook'
 import { handleDrop, handleDragOver } from './hooks/useDrop.hook'
 import { getChartEditStore } from './hooks/useStore.hook'
-import { useComponentStyle } from './hooks/useStyle.hook'
+import { useComponentStyle, useSizeStyle } from './hooks/useStyle.hook'
 
 const chartEditStore = getChartEditStore()
 
@@ -50,21 +56,19 @@ useLayout()
   position: relative;
   width: 100%;
   overflow: hidden;
-  @include background-image("background-point");
+  @include background-image('background-point');
   @extend .go-point-bg;
   @include goId(chart-edit-content) {
-    position: relative;
-    top: 20px;
-    left: 20px;
+    margin: 20px;
+    overflow: hidden;
     transform-origin: left top;
     border: 1px solid rgba(0, 0, 0, 0);
-    overflow: hidden;
     @extend .go-transition;
     &.content-resize {
       border-radius: 15px;
-      @include hover-border-color("hover-border-color");
+      @include hover-border-color('hover-border-color');
     }
-    .edit-content-chart{
+    .edit-content-chart {
       position: absolute;
     }
   }