From 5e2f2b183e5c2da611745b2b1e6bbace1ae10407 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Thu, 14 Dec 2023 19:26:46 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=9B=BE=E5=B1=82=E6=A0=B7?=
=?UTF-8?q?=E5=BC=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../components/data-visualization/RealTimeGroup.vue | 2 +-
.../data-visualization/canvas/CanvasCore.vue | 10 +++++++++-
.../components/data-visualization/canvas/Shape.vue | 11 +++++++++++
.../src/store/modules/data-visualization/compose.ts | 6 +++++-
.../src/utils/changeComponentsSizeWithScale.ts | 10 ++--------
core/core-frontend/src/utils/decomposeComponent.ts | 1 +
core/core-frontend/src/utils/style.ts | 2 +-
7 files changed, 30 insertions(+), 12 deletions(-)
diff --git a/core/core-frontend/src/components/data-visualization/RealTimeGroup.vue b/core/core-frontend/src/components/data-visualization/RealTimeGroup.vue
index 4505fa3416..ec26a616f4 100644
--- a/core/core-frontend/src/components/data-visualization/RealTimeGroup.vue
+++ b/core/core-frontend/src/components/data-visualization/RealTimeGroup.vue
@@ -365,7 +365,7 @@ const handleContextMenu = e => {
font-size: 12px;
margin-left: 10px;
position: relative;
- min-width: 65px;
+ min-width: 43px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
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 56a3c03a5b..7e5cb6c784 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
@@ -1203,6 +1203,14 @@ const linkageSetOpen = item => {
})
}
+const contextMenuShow = computed(() => {
+ if (curComponent.value) {
+ return curComponent.value.canvasId === canvasId.value
+ } else {
+ return isMainCanvas(canvasId.value)
+ }
+})
+
const markLineShow = computed(() => isMainCanvas(canvasId.value))
onMounted(() => {
@@ -1333,7 +1341,7 @@ defineExpose({
/>
-
+
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 a6484b02d0..9f3a7e84c7 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
@@ -454,6 +454,17 @@ const handleMouseDownOnShape = e => {
) {
emit('onDragging', e)
}
+
+ //如果当前组件是Group分组 则要进行内部组件深度计算
+ element.value.component === 'Group' && groupSizeStyleAdaptor(element.value)
+ //如果当前画布是Group内部画布 则对应组件定位在resize时要还原到groupStyle中
+ if (isGroupCanvas(canvasId.value)) {
+ groupStyleRevert(element.value, {
+ width: parentNode.value.offsetWidth,
+ height: parentNode.value.offsetHeight
+ })
+ }
+
// 防止首次组件在tab旁边无法触发矩阵移动
if (isFirst) {
isFirst = false
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 926bcda1a4..733c2cffd4 100644
--- a/core/core-frontend/src/store/modules/data-visualization/compose.ts
+++ b/core/core-frontend/src/store/modules/data-visualization/compose.ts
@@ -84,8 +84,12 @@ export const composeStore = defineStore('compose', {
}
})
+ const newId = generateID()
+ components.forEach(component => {
+ component.canvasId = 'Group-' + newId
+ })
const groupComponent = {
- id: generateID(),
+ id: newId,
component: 'Group',
name: '组合',
label: '组合',
diff --git a/core/core-frontend/src/utils/changeComponentsSizeWithScale.ts b/core/core-frontend/src/utils/changeComponentsSizeWithScale.ts
index f555497332..2167f9742b 100644
--- a/core/core-frontend/src/utils/changeComponentsSizeWithScale.ts
+++ b/core/core-frontend/src/utils/changeComponentsSizeWithScale.ts
@@ -2,6 +2,7 @@ import { deepCopy } from './utils'
import { divide, multiply } from 'mathjs'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { storeToRefs } from 'pinia'
+import { groupSizeStyleAdaptor } from '@/utils/style'
const dvMainStore = dvMainStoreWithOut()
const { componentData, curComponentIndex, canvasStyleData } = storeToRefs(dvMainStore)
@@ -28,14 +29,7 @@ export function changeComponentsSizeWithScale(scale) {
// 计算逻辑 Group 中样式 * groupComponent.groupStyle[sonKey].
if (component.component === 'Group') {
try {
- component.propValue.forEach(groupComponent => {
- Object.keys(groupComponent.style).forEach(sonKey => {
- if (groupComponent.groupStyle[sonKey]) {
- groupComponent.style[sonKey] =
- component.style[sonKey] * groupComponent.groupStyle[sonKey]
- }
- })
- })
+ groupSizeStyleAdaptor(component)
} catch (e) {
// 旧Group适配
console.error('group adaptor error:' + e)
diff --git a/core/core-frontend/src/utils/decomposeComponent.ts b/core/core-frontend/src/utils/decomposeComponent.ts
index f0b2bf7260..9ac7f7ed31 100644
--- a/core/core-frontend/src/utils/decomposeComponent.ts
+++ b/core/core-frontend/src/utils/decomposeComponent.ts
@@ -4,4 +4,5 @@ export default function decomposeComponent(component, editorRect, parentStyle) {
component.style.left = component.style.left + parentStyle.left
component.style.top = component.style.top + parentStyle.top
component.groupStyle = {}
+ component.canvasId = 'canvas-main'
}
diff --git a/core/core-frontend/src/utils/style.ts b/core/core-frontend/src/utils/style.ts
index 5b6010bb7d..4cb8f1642b 100644
--- a/core/core-frontend/src/utils/style.ts
+++ b/core/core-frontend/src/utils/style.ts
@@ -228,7 +228,7 @@ export function groupSizeStyleAdaptor(groupComponent) {
groupComponent.propValue.forEach(component => {
// 分组还原逻辑
// 当发上分组缩放是，要将内部组件按照比例转换
- const styleScale = { ...component.groupStyle }
+ const styleScale = component.groupStyle
component.style.left = parentStyle.width * styleScale.left
component.style.top = parentStyle.height * styleScale.top
component.style.width = parentStyle.width * styleScale.width