From 711fb1d8eb0fe93604961b19c8a3a680028d9c2c Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Fri, 30 Aug 2024 13:12:15 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BB=AA=E8=A1=A8=E6=9D=BF=E7=94=BB=E5=B8=83?=
 =?UTF-8?q?=EF=BC=8C=E7=94=BB=E5=B8=83=E8=AE=BE=E8=AE=A1=E6=97=B6=E5=BA=95?=
 =?UTF-8?q?=E9=83=A8=E7=95=99=E5=AD=98=E4=B8=80=E5=AE=9A=E7=A9=BA=E9=97=B4?=
 =?UTF-8?q?=E4=BE=BF=E4=BA=8E=E7=BB=84=E4=BB=B6=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../data-visualization/canvas/CanvasCore.vue  | 35 ++++++++++++++-----
 .../src/views/canvas/DeCanvas.vue             |  2 +-
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue b/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
index 4f161b44dc..b08e47106a 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
@@ -337,7 +337,7 @@ let lastTask = undefined
 let isOverlay = false //是否正在交换位置
 let moveTime = 200 //移动动画时间
 
-let itemMaxY = 0
+const itemMaxY = ref(0)
 let itemMaxX = 0
 let snapshotTimer = ref(null)
 
@@ -576,11 +576,16 @@ const getTextareaHeight = (element, text) => {
 }
 
 const editStyle = computed(() => {
-  if (dashboardActive.value || isGroupOrTabCanvas(canvasId.value)) {
+  if (isGroupOrTabCanvas(canvasId.value)) {
     return {
       width: '100%',
       height: '100%'
     }
+  } else if (dashboardActive.value) {
+    return {
+      width: '100%',
+      height: itemMaxY.value * cellHeight.value + 'px'
+    }
   } else {
     const result = {
       ...getCanvasStyle(canvasStyleData.value, canvasId.value),
@@ -720,9 +725,9 @@ function fillPositionBox(maxY) {
     }
   }
 
-  itemMaxY = maxY
+  itemMaxY.value = maxY
   //problem
-  $(container.value).css('height', (itemMaxY + 2) * cellHeight.value + 'px')
+  $(container.value).css('height', (itemMaxY.value + 2) * cellHeight.value + 'px')
 }
 
 function removeItemFromPositionBox(item) {
@@ -770,7 +775,7 @@ function resizePlayer(item, newSize) {
     item.sizeX = itemMaxX - item.x + 1
   }
 
-  if (item.sizeY + item.y > itemMaxY) {
+  if (item.sizeY + item.y > itemMaxY.value) {
     fillPositionBox(item.y + item.sizeY)
   }
   emptyTargetCell(item)
@@ -819,7 +824,7 @@ function checkItemPosition(item, position) {
     item.sizeY = 1
   }
 
-  if (item.y + item.sizeY > itemMaxY - 1) {
+  if (item.y + item.sizeY > itemMaxY.value - 1) {
     fillPositionBox(item.y + item.sizeY - 1)
   }
 }
@@ -987,8 +992,8 @@ function setPlayerPosition(item, position) {
   let targetY = position.y || item.y
   item.x = targetX
   item.y = targetY
-  if (item.y + item.sizeY > itemMaxY) {
-    itemMaxY = item.y + item.sizeY
+  if (item.y + item.sizeY > itemMaxY.value) {
+    itemMaxY.value = item.y + item.sizeY
   }
 }
 
@@ -1092,7 +1097,7 @@ const canvasInit = () => {
   lastTask = undefined
   isOverlay = false //是否正在交换位置
   moveTime = 200 //移动动画时间
-  itemMaxY = 0
+  itemMaxY.value = 0
   itemMaxX = 0
 
   reCalcCellWidth()
@@ -1134,7 +1139,19 @@ const forceComputed = () => {
     cellHeight.value = cellHeight.value - 0.001
   })
 }
+
+const maxYCount = () => {
+  if (componentData.value.length === 0) {
+    return 1
+  } else {
+    return componentData.value
+      .filter(item => item.y)
+      .map(item => item.y + item.sizeY) // 计算每个元素的 y + sizeY
+      .reduce((max, current) => Math.max(max, current), 0)
+  }
+}
 const addItemBox = item => {
+  item.y = item.y === undefined ? maxYCount() : item.y
   syncShapeItemStyle(item, baseWidth.value, baseHeight.value)
   forceComputed()
   nextTick(() => {
diff --git a/core/core-frontend/src/views/canvas/DeCanvas.vue b/core/core-frontend/src/views/canvas/DeCanvas.vue
index e0bf26f7d4..e2eb40955f 100644
--- a/core/core-frontend/src/views/canvas/DeCanvas.vue
+++ b/core/core-frontend/src/views/canvas/DeCanvas.vue
@@ -87,7 +87,7 @@ const handleNewFromCanvasMain = newComponentInfo => {
     const component = findNewComponentFromList(componentName, innerType, curOriginThemes, staticMap)
     syncShapeItemStyle(component, baseWidth.value, baseHeight.value)
     component.id = guid()
-    component.y = 200
+    component.y = undefined
     component.x = cyGridster.value.findPositionX(component)
     dvMainStore.addComponent({
       component: component,