feat(数据大屏): 分组选择后支持安卓Ctrl取消其中一个已选中的组件 #13698

core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue

@@ -47,6 +47,7 @@ import PopArea from '@/custom-component/pop-area/Component.vue'
 import DatasetParamsComponent from '@/components/visualization/DatasetParamsComponent.vue'
 import DeGrid from '@/components/data-visualization/DeGrid.vue'
 import DeGridScreen from '@/components/data-visualization/DeGridScreen.vue'
+import GroupAreaShadow from '@/custom-component/group-area/ComponentShadow.vue'
 
 const snapshotStore = snapshotStoreWithOut()
 const dvMainStore = dvMainStoreWithOut()
@@ -55,7 +56,7 @@ const contextmenuStore = contextmenuStoreWithOut()
 
 const { curComponent, dvInfo, editMode, tabMoveOutComponentId, canvasState } =
   storeToRefs(dvMainStore)
-const { editorMap, areaData } = storeToRefs(composeStore)
+const { editorMap, areaData, isCtrlOrCmdDown } = storeToRefs(composeStore)
 const emits = defineEmits(['scrollCanvasToTop'])
 const props = defineProps({
   themes: {
@@ -1471,6 +1472,19 @@ const dataVBatchOptAdaptor = () => {
   })
 }
 
+const itemShow = item => {
+  return (
+    item.isShow &&
+    (item.component !== 'GroupArea' || (item.component === 'GroupArea' && !isCtrlOrCmdDown.value))
+  )
+}
+
+const groupAreaShadowShow = computed(
+  () =>
+    componentData.value.length > 0 &&
+    componentData.value[componentData.value.length - 1].component === 'GroupArea' &&
+    isCtrlOrCmdDown.value
+)
 // 点击事件导致选择区域变更
 const groupAreaClickChange = async () => {
   let groupAreaCom
@@ -1574,6 +1588,7 @@ defineExpose({
     :style="editStyle"
     @contextmenu="handleContextMenu"
   >
+    ---{{ componentData[componentData.length - 1].component }}
     <slot name="canvasDragTips" />
     <drag-info v-if="dragInfoShow"></drag-info>
     <canvas-opt-bar
@@ -1611,11 +1626,15 @@ defineExpose({
 
     <!--切换canvas 拖拽阴影部分-->
     <point-shadow v-if="pointShadowShow" :canvas-id="canvasId" />
+    <GroupAreaShadow
+      v-if="groupAreaShadowShow"
+      :style="getShapeItemShowStyle(componentData[componentData.length - 1])"
+    ></GroupAreaShadow>
 
     <!--页面组件列表展示-->
     <Shape
       v-for="(item, index) in componentData"
-      v-show="item.isShow"
+      v-show="itemShow(item)"
       :canvas-id="canvasId"
       :scale="curScale"
       :key="item.id"

core/core-frontend/src/custom-component/group-area/ComponentShadow.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="areaShadow"></div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="less" scoped>
+.areaShadow {
+  position: absolute;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  border: 2px solid var(--ed-color-primary) !important;
+  pointer-events: none;
+}
+</style>