refactor: 大屏组合支持双击内部组件再解锁移动

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>
     <!-- 右击菜单 -->

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 } =
+const {
-  toRefs(props)
+  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)

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

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,

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>

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',

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

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
       }

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'