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

fix(数据大屏): 对齐标线调试

Browse Source
This commit is contained in:
wangjiahao 2024-02-28 09:03:14 +08:00
parent 524d2042f4
commit 392ca66e0c
2 changed files with 115 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
core/core-frontend/config/base.ts
View File

@ -26,6 +26,6 @@ export default {
} }
} }
}, },
sourcemap: false sourcemap: true
} }
} }

232
core/core-frontend/src/components/data-visualization/canvas/MarkLine.vue
View File

@ -34,127 +34,123 @@ const showLine = (isDownward, isRightward) => {
hideLine() hideLine()
components.forEach(component => { components.forEach(component => {
try { if (component === curComponent.value) return
if (component === curComponent.value) return const componentStyle = getComponentRotatedStyle(component.style)
const componentStyle = getComponentRotatedStyle(component.style) const { top, left, bottom, right } = componentStyle
const { top, left, bottom, right } = componentStyle const componentHalfWidth = componentStyle.width / 2
const componentHalfWidth = componentStyle.width / 2 const componentHalfHeight = componentStyle.height / 2
const componentHalfHeight = componentStyle.height / 2
const conditions = { const conditions = {
top: [ top: [
{ {
isNearly: isNearly(curComponentStyle.top, top), isNearly: isNearly(curComponentStyle.top, top),
lineNode: lines.xt[0], // xt lineNode: lines.xt[0], // xt
line: 'xt', line: 'xt',
dragShift: top, dragShift: top,
lineShift: top lineShift: top
}, },
{ {
isNearly: isNearly(curComponentStyle.bottom, top), isNearly: isNearly(curComponentStyle.bottom, top),
lineNode: lines.xt[0], // xt lineNode: lines.xt[0], // xt
line: 'xt', line: 'xt',
dragShift: top - curComponentStyle.height, dragShift: top - curComponentStyle.height,
lineShift: top lineShift: top
}, },
{ {
// 组件与拖拽节点的中间是否对齐 // 组件与拖拽节点的中间是否对齐
isNearly: isNearly( isNearly: isNearly(
curComponentStyle.top + curComponentHalfHeight, curComponentStyle.top + curComponentHalfHeight,
top + componentHalfHeight top + componentHalfHeight
), ),
lineNode: lines.xc[0], // xc lineNode: lines.xc[0], // xc
line: 'xc', line: 'xc',
dragShift: top + componentHalfHeight - curComponentHalfHeight, dragShift: top + componentHalfHeight - curComponentHalfHeight,
lineShift: top + componentHalfHeight lineShift: top + componentHalfHeight
}, },
{ {
isNearly: isNearly(curComponentStyle.top, bottom), isNearly: isNearly(curComponentStyle.top, bottom),
lineNode: lines.xb[0], // xb lineNode: lines.xb[0], // xb
line: 'xb', line: 'xb',
dragShift: bottom, dragShift: bottom,
lineShift: bottom lineShift: bottom
}, },
{ {
isNearly: isNearly(curComponentStyle.bottom, bottom), isNearly: isNearly(curComponentStyle.bottom, bottom),
lineNode: lines.xb[0], // xb lineNode: lines.xb[0], // xb
line: 'xb', line: 'xb',
dragShift: bottom - curComponentStyle.height, dragShift: bottom - curComponentStyle.height,
lineShift: bottom lineShift: bottom
} }
], ],
left: [ left: [
{ {
isNearly: isNearly(curComponentStyle.left, left), isNearly: isNearly(curComponentStyle.left, left),
lineNode: lines.yl[0], // yl lineNode: lines.yl[0], // yl
line: 'yl', line: 'yl',
dragShift: left, dragShift: left,
lineShift: left lineShift: left
}, },
{ {
isNearly: isNearly(curComponentStyle.right, left), isNearly: isNearly(curComponentStyle.right, left),
lineNode: lines.yl[0], // yl lineNode: lines.yl[0], // yl
line: 'yl', line: 'yl',
dragShift: left - curComponentStyle.width, dragShift: left - curComponentStyle.width,
lineShift: left lineShift: left
}, },
{ {
// 组件与拖拽节点的中间是否对齐 // 组件与拖拽节点的中间是否对齐
isNearly: isNearly( isNearly: isNearly(
curComponentStyle.left + curComponentHalfWidth, curComponentStyle.left + curComponentHalfWidth,
left + componentHalfWidth left + componentHalfWidth
), ),
lineNode: lines.yc[0], // yc lineNode: lines.yc[0], // yc
line: 'yc', line: 'yc',
dragShift: left + componentHalfWidth - curComponentHalfWidth, dragShift: left + componentHalfWidth - curComponentHalfWidth,
lineShift: left + componentHalfWidth lineShift: left + componentHalfWidth
}, },
{ {
isNearly: isNearly(curComponentStyle.left, right), isNearly: isNearly(curComponentStyle.left, right),
lineNode: lines.yr[0], // yr lineNode: lines.yr[0], // yr
line: 'yr', line: 'yr',
dragShift: right, dragShift: right,
lineShift: right lineShift: right
}, },
{ {
isNearly: isNearly(curComponentStyle.right, right), isNearly: isNearly(curComponentStyle.right, right),
lineNode: lines.yr[0], // yr lineNode: lines.yr[0], // yr
line: 'yr', line: 'yr',
dragShift: right - curComponentStyle.width, dragShift: right - curComponentStyle.width,
lineShift: right lineShift: right
} }
] ]
} }
const needToShow = [] const needToShow = []
const { rotate } = curComponent.value.style const { rotate } = curComponent.value.style
if (conditions) { if (conditions) {
Object.keys(conditions).forEach(key => { Object.keys(conditions).forEach(key => {
// 遍历符合的条件并处理 // 遍历符合的条件并处理
if (conditions[key]) { if (conditions[key]) {
conditions[key].forEach(condition => { conditions[key].forEach(condition => {
if (!condition.isNearly) return if (!condition.isNearly) return
// 修改当前组件位移 // 修改当前组件位移
dvMainStore.setShapeSingleStyle({ dvMainStore.setShapeSingleStyle({
key, key,
value: value:
rotate != 0 rotate != 0
? translateCurComponentShift(key, condition, curComponentStyle) ? translateCurComponentShift(key, condition, curComponentStyle)
: condition.dragShift : condition.dragShift
})
if (condition.lineNode) {
condition.lineNode.style[key] = `${condition.lineShift}px`
}
needToShow.push(condition.line)
}) })
} if (condition.lineNode) {
}) condition.lineNode.style[key] = `${condition.lineShift}px`
} }
if (needToShow.length) { needToShow.push(condition.line)
chooseTheTrueLine(needToShow, isDownward, isRightward) })
} }
} catch (e) { })
console.warn('markLine disabled') }
if (needToShow.length) {
chooseTheTrueLine(needToShow, isDownward, isRightward)
} }
}) })
} }