center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

Merge pull request #9123 from dataease/pr@dev-v2@feat_group-resize-radio

Browse Source 
refactor(数据大屏): 优化批量改变组件大小逻辑，修改为按照初始占比放大缩小
This commit is contained in:
王嘉豪 2024-04-16 12:04:08 +08:00 committed by GitHub
commit 128a7e8e23
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 23 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
core/core-frontend/src/components/data-visualization/canvas/Shape.vue
View File

@ -644,6 +644,19 @@ const handleMouseDownOnPoint = (point, e) => {
const needLockProportion = isNeedLockProportion()
const originRadio = curComponent.value.aspectRatio
const baseGroupComponentsRadio = {}
// 计算初始状态 分组内组件宽高占比
if (areaData.value.components.length > 0) {
areaData.value.components.forEach(groupComponent => {
baseGroupComponentsRadio[groupComponent.id] = {
topRadio: (groupComponent.style.top - style.top) / style.height,
leftRadio: (groupComponent.style.left - style.left) / style.width,
widthRadio: groupComponent.style.width / style.width,
heightRadio: groupComponent.style.height / style.height
}
})
}
const move = moveEvent => {
// 第一次点击时也会触发 move，所以会有“刚点击组件但未移动，组件的大小却改变了”的情况发生
// 因此第一次点击时不触发 move 事件
@ -684,7 +697,7 @@ const handleMouseDownOnPoint = (point, e) => {
}
calculateRadioComponentPositionAndSize(point, style, symmetricPoint)
dvMainStore.setShapeStyle(style, areaData.value.components, 'resize')
dvMainStore.setShapeStyle(style, areaData.value.components, 'resize', baseGroupComponentsRadio)
// 矩阵逻辑 如果当前是仪表板（矩阵模式）则要进行矩阵重排
dashboardActive.value && emit('onResizing', moveEvent)
//如果当前组件是Group分组 则要进行内部组件深度计算

14
core/core-frontend/src/store/modules/data-visualization/dvMain.ts
View File

@ -258,7 +258,8 @@ export const dvMainStore = defineStore('dataVisualization', {
setShapeStyle(
{ top, left, width, height, rotate },
areaDataComponents = [],
moveType = 'move'
moveType = 'move',
baseGroupComponentsRadio = {}
) {
if (this.curComponent.component === 'GroupArea' && areaDataComponents.length > 0) {
const topOffset = top - this.curComponent.style.top
@ -274,10 +275,13 @@ export const dvMainStore = defineStore('dataVisualization', {
})
} else {
areaDataComponents.forEach(component => {
component.style.top = component.style.top + topOffset
component.style.left = component.style.left + leftOffset
component.style.width = component.style.width + widthOffset
component.style.height = component.style.height + heightOffset
const componentRadio = baseGroupComponentsRadio[component.id]
if (componentRadio) {
component.style.top = top + height * componentRadio.topRadio
component.style.left = left + width * componentRadio.leftRadio
component.style.width = width * componentRadio.widthRadio
component.style.height = height * componentRadio.heightRadio
}
})
}
}