From 3b2682009118cfc010087496dd7bb5772fb6d01b Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Tue, 26 Dec 2023 22:27:48 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=A4=A7=E5=B1=8F=E7=BB=84?=
 =?UTF-8?q?=E5=90=88=E6=94=AF=E6=8C=81=E5=8F=8C=E5=87=BB=E5=86=85=E9=83=A8?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=86=8D=E8=A7=A3=E9=94=81=E7=A7=BB=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../data-visualization/canvas/CanvasCore.vue  |  9 +++++
 .../data-visualization/canvas/Shape.vue       | 38 ++++++++++++++++--
 .../custom-component/common/CanvasGroup.vue   |  1 +
 .../src/custom-component/component-list.ts    |  5 +++
 .../src/custom-component/group/Component.vue  | 39 +++++++++++++++++--
 .../modules/data-visualization/compose.ts     |  1 +
 .../modules/data-visualization/dvMain.ts      |  9 +++++
 core/core-frontend/src/utils/canvasUtils.ts   |  1 +
 .../src/views/data-visualization/index.vue    |  1 -
 9 files changed, 97 insertions(+), 7 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 4af2b06de1..e6cb00c61d 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
@@ -148,6 +148,11 @@ const props = defineProps({
     type: Number,
     required: false,
     default: 1
+  },
+  canvasActive: {
+    type: Boolean,
+    required: false,
+    default: true
   }
 })
 
@@ -1301,6 +1306,7 @@ defineExpose({
       :index="index"
       :class="{ lock: item.isLock && editMode === 'edit' }"
       :base-cell-info="baseCellInfo"
+      :canvas-active="canvasActive"
       @onStartResize="onStartResize($event, item, index)"
       @onStartMove="onStartMove($event, item, index)"
       @onMouseUp="onMouseUp($event, item, index)"
@@ -1327,6 +1333,7 @@ defineExpose({
         :request="item.request"
         @input="handleInput"
         :dv-info="dvInfo"
+        :canvas-active="canvasActive"
       />
 
       <component
@@ -1342,6 +1349,8 @@ defineExpose({
         :canvas-style-data="canvasStyleData"
         :canvas-view-info="canvasViewInfo"
         :dv-info="dvInfo"
+        :active="item.id === curComponentId"
+        :canvas-active="canvasActive"
       />
     </Shape>
     <!-- 右击菜单 -->
diff --git a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
index 17f32fea59..936e4e1a9d 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="shape" ref="shapeInnerRef" :id="domId">
+  <div class="shape" ref="shapeInnerRef" :id="domId" @dblclick="handleDbClick">
     <div
       class="shape-outer"
       v-show="contentDisplay"
@@ -212,11 +212,24 @@ const props = defineProps({
     type: Number,
     required: false,
     default: 1
+  },
+  canvasActive: {
+    type: Boolean,
+    required: false,
+    default: true
   }
 })
 
-const { element, defaultStyle, baseCellInfo, index, isTabMoveCheck, canvasId, scale } =
-  toRefs(props)
+const {
+  element,
+  defaultStyle,
+  baseCellInfo,
+  index,
+  isTabMoveCheck,
+  canvasId,
+  scale,
+  canvasActive
+} = toRefs(props)
 const domId = ref('shape-id-' + element.value.id)
 const pointList = ['lt', 't', 'rt', 'r', 'rb', 'b', 'lb', 'l']
 const pointList2 = ['r', 'l']
@@ -345,6 +358,9 @@ const getCursor = () => {
 }
 
 const handleBoardMouseDownOnShape = e => {
+  if (!canvasActive.value) {
+    return
+  }
   dvMainStore.setCurComponent({ component: element.value, index: index.value })
   handleMouseDownOnShape(e)
 }
@@ -354,8 +370,18 @@ const areaDataPush = component => {
     areaData.value.components.push(component)
   }
 }
+const handleDbClick = e => {
+  console.log('111=0' + element.value.canvasId)
+  if (element.value.canvasId !== 'canvas-main') {
+    console.log('111=1' + canvasActive.value)
+    dvMainStore.setCurComponent({ component: element.value, index: index.value })
+  }
+}
 
 const handleInnerMouseDownOnShape = e => {
+  if (!canvasActive.value) {
+    return
+  }
   if (dvMainStore.batchOptStatus) {
     componentEditBarRef.value.batchOptCheckOut()
     e.stopPropagation()
@@ -510,6 +536,9 @@ const handleMouseDownOnShape = e => {
 }
 
 const selectCurComponent = e => {
+  if (!canvasActive.value) {
+    return
+  }
   // 阻止向父组件冒泡
   if (dvInfo.value.type === 'dataV') {
     e.stopPropagation()
@@ -528,6 +557,9 @@ const batchSelected = e => {
 }
 
 const handleMouseDownOnPoint = (point, e) => {
+  if (!canvasActive.value) {
+    return
+  }
   dashboardActive.value && emit('onStartResize', e)
   dvMainStore.setInEditorStatus(true)
   dvMainStore.setClickComponentStatus(true)
diff --git a/core/core-frontend/src/custom-component/common/CanvasGroup.vue b/core/core-frontend/src/custom-component/common/CanvasGroup.vue
index 8377ae6f93..15eefa3399 100644
--- a/core/core-frontend/src/custom-component/common/CanvasGroup.vue
+++ b/core/core-frontend/src/custom-component/common/CanvasGroup.vue
@@ -61,6 +61,7 @@ const { element, isEdit, showPosition, canvasStyleData, canvasViewInfo, dvInfo,
     :canvas-style-data="canvasStyleData"
     :canvas-view-info="canvasViewInfo"
     :canvas-id="canvasId"
+    :canvas-active="element['canvasActive']"
   ></canvas-core>
   <de-preview
     v-else
diff --git a/core/core-frontend/src/custom-component/component-list.ts b/core/core-frontend/src/custom-component/component-list.ts
index fc30c53561..f97c190f74 100644
--- a/core/core-frontend/src/custom-component/component-list.ts
+++ b/core/core-frontend/src/custom-component/component-list.ts
@@ -106,6 +106,7 @@ const list = [
     icon: 'bar',
     innerType: 'bar',
     editing: false,
+    canvasActive: false,
     x: 1,
     y: 1,
     sizeX: 18,
@@ -123,6 +124,7 @@ const list = [
     icon: 'dv-picture-real',
     innerType: 'Picture',
     editing: false,
+    canvasActive: false,
     x: 1,
     y: 1,
     sizeX: 18,
@@ -148,6 +150,7 @@ const list = [
     icon: 'other_material_icon',
     innerType: '',
     editing: false,
+    canvasActive: false,
     x: 1,
     y: 1,
     sizeX: 5,
@@ -166,6 +169,7 @@ const list = [
     icon: 'other_material_board',
     innerType: '',
     editing: false,
+    canvasActive: false,
     x: 1,
     y: 1,
     sizeX: 15,
@@ -191,6 +195,7 @@ const list = [
     icon: 'dv-tab',
     innerType: '',
     editing: false,
+    canvasActive: false,
     x: 1,
     y: 1,
     sizeX: 18,
diff --git a/core/core-frontend/src/custom-component/group/Component.vue b/core/core-frontend/src/custom-component/group/Component.vue
index 52429009e0..cca710c678 100644
--- a/core/core-frontend/src/custom-component/group/Component.vue
+++ b/core/core-frontend/src/custom-component/group/Component.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { toRefs, computed } from 'vue'
+import { toRefs, computed, watch, nextTick } from 'vue'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
 import CanvasGroup from '@/custom-component/common/CanvasGroup.vue'
 import { deepCopy } from '@/utils/utils'
 import { DEFAULT_CANVAS_STYLE_DATA_DARK } from '@/views/chart/components/editor/util/dataVisualiztion'
 const dvMainStore = dvMainStoreWithOut()
-const { canvasViewInfo, canvasStyleData } = storeToRefs(dvMainStore)
+const { canvasViewInfo, canvasStyleData, curComponent } = storeToRefs(dvMainStore)
 const sourceCanvasStyle = deepCopy(DEFAULT_CANVAS_STYLE_DATA_DARK)
 
 const props = defineProps({
@@ -46,6 +46,10 @@ const props = defineProps({
     type: Number,
     required: false,
     default: 1
+  },
+  active: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -57,10 +61,35 @@ const customCanvasStyle = computed(() => {
   result.height = (element.value.style.height * 100) / result.scale
   return result
 })
+
+const setCanvasActive = () => {
+  element.value['canvasActive'] = true
+}
+
+watch(
+  () => props.active,
+  () => {
+    // canvasActive失活 满足的条件 1.当前组件未激活 2.当前没有激活组件或者有激活组件时，该组件的canvasId不属于当前分组
+    nextTick(() => {
+      if (
+        !props.active &&
+        (!curComponent.value ||
+          (curComponent.value && !curComponent.value.canvasId.includes(element.value.id)))
+      ) {
+        element.value['canvasActive'] = false
+      }
+    })
+  },
+  { deep: true }
+)
 </script>
 
 <template>
-  <div class="group">
+  <div
+    class="group"
+    :class="{ 'canvas-active-custom': element['canvasActive'] }"
+    @dblclick="setCanvasActive"
+  >
     <canvas-group
       :component-data="propValue"
       :dv-info="dvInfo"
@@ -87,4 +116,8 @@ const customCanvasStyle = computed(() => {
     }
   }
 }
+
+.canvas-active-custom {
+  outline: 2px solid rgba(51, 112, 255, 1) !important;
+}
 </style>
diff --git a/core/core-frontend/src/store/modules/data-visualization/compose.ts b/core/core-frontend/src/store/modules/data-visualization/compose.ts
index 733c2cffd4..cb92dca7b5 100644
--- a/core/core-frontend/src/store/modules/data-visualization/compose.ts
+++ b/core/core-frontend/src/store/modules/data-visualization/compose.ts
@@ -91,6 +91,7 @@ export const composeStore = defineStore('compose', {
       const groupComponent = {
         id: newId,
         component: 'Group',
+        canvasActive: false,
         name: '组合',
         label: '组合',
         icon: 'group',
diff --git a/core/core-frontend/src/store/modules/data-visualization/dvMain.ts b/core/core-frontend/src/store/modules/data-visualization/dvMain.ts
index 36268cbac7..513f95eb5e 100644
--- a/core/core-frontend/src/store/modules/data-visualization/dvMain.ts
+++ b/core/core-frontend/src/store/modules/data-visualization/dvMain.ts
@@ -210,6 +210,15 @@ export const dvMainStore = defineStore('dataVisualization', {
     setCurComponent({ component, index }) {
       if (!component && this.curComponent) {
         this.curComponent['editing'] = false
+        this.curComponent['canvasActive'] = false
+        // 如果当前组件不在主画布中 对应的分组的canvasActive 也要设置为false
+        if (this.curComponent.canvasId !== 'canvas-main') {
+          this.componentData.forEach(componentItem => {
+            if (this.curComponent.canvasId.includes(componentItem.id)) {
+              componentItem['canvasActive'] = false
+            }
+          })
+        }
       }
       if (component) {
         // Is the current component in editing status
diff --git a/core/core-frontend/src/utils/canvasUtils.ts b/core/core-frontend/src/utils/canvasUtils.ts
index c5a2bb84f4..fda4c11916 100644
--- a/core/core-frontend/src/utils/canvasUtils.ts
+++ b/core/core-frontend/src/utils/canvasUtils.ts
@@ -96,6 +96,7 @@ export function initCanvasDataPrepare(dvId, busiFlag, callBack) {
     const canvasStyleResult = JSON.parse(canvasInfo.canvasStyleData)
     const canvasViewInfoPreview = canvasInfo.canvasViewInfo
     canvasDataResult.forEach(componentItem => {
+      componentItem['canvasActive'] = false
       if (componentItem.component === 'Group') {
         componentItem.expand = componentItem.expand || false
       }
diff --git a/core/core-frontend/src/views/data-visualization/index.vue b/core/core-frontend/src/views/data-visualization/index.vue
index 69cc98bd5e..f96252c2f1 100644
--- a/core/core-frontend/src/views/data-visualization/index.vue
+++ b/core/core-frontend/src/views/data-visualization/index.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import RealTimeComponentList from '@/components/data-visualization/RealTimeComponentList.vue'
 import CanvasAttr from '@/components/data-visualization/CanvasAttr.vue'
 import { computed, watch, onMounted, reactive, ref, nextTick, onUnmounted } from 'vue'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'