forked from github/dataease
fix(数据大屏): 对齐标线调试
This commit is contained in:
wangjiahao
parent
524d2042f4
commit
392ca66e0c
@ -26,6 +26,6 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
sourcemap: false
|
||||
sourcemap: true
|
||||
}
|
||||
}
|
||||
|
||||
@ -34,127 +34,123 @@ const showLine = (isDownward, isRightward) => {
|
||||
|
||||
hideLine()
|
||||
components.forEach(component => {
|
||||
try {
|
||||
if (component === curComponent.value) return
|
||||
const componentStyle = getComponentRotatedStyle(component.style)
|
||||
const { top, left, bottom, right } = componentStyle
|
||||
const componentHalfWidth = componentStyle.width / 2
|
||||
const componentHalfHeight = componentStyle.height / 2
|
||||
if (component === curComponent.value) return
|
||||
const componentStyle = getComponentRotatedStyle(component.style)
|
||||
const { top, left, bottom, right } = componentStyle
|
||||
const componentHalfWidth = componentStyle.width / 2
|
||||
const componentHalfHeight = componentStyle.height / 2
|
||||
|
||||
const conditions = {
|
||||
top: [
|
||||
{
|
||||
isNearly: isNearly(curComponentStyle.top, top),
|
||||
lineNode: lines.xt[0], // xt
|
||||
line: 'xt',
|
||||
dragShift: top,
|
||||
lineShift: top
|
||||
},
|
||||
{
|
||||
isNearly: isNearly(curComponentStyle.bottom, top),
|
||||
lineNode: lines.xt[0], // xt
|
||||
line: 'xt',
|
||||
dragShift: top - curComponentStyle.height,
|
||||
lineShift: top
|
||||
},
|
||||
{
|
||||
// 组件与拖拽节点的中间是否对齐
|
||||
isNearly: isNearly(
|
||||
curComponentStyle.top + curComponentHalfHeight,
|
||||
top + componentHalfHeight
|
||||
),
|
||||
lineNode: lines.xc[0], // xc
|
||||
line: 'xc',
|
||||
dragShift: top + componentHalfHeight - curComponentHalfHeight,
|
||||
lineShift: top + componentHalfHeight
|
||||
},
|
||||
{
|
||||
isNearly: isNearly(curComponentStyle.top, bottom),
|
||||
lineNode: lines.xb[0], // xb
|
||||
line: 'xb',
|
||||
dragShift: bottom,
|
||||
lineShift: bottom
|
||||
},
|
||||
{
|
||||
isNearly: isNearly(curComponentStyle.bottom, bottom),
|
||||
lineNode: lines.xb[0], // xb
|
||||
line: 'xb',
|
||||
dragShift: bottom - curComponentStyle.height,
|
||||
lineShift: bottom
|
||||
}
|
||||
],
|
||||
left: [
|
||||
{
|
||||
isNearly: isNearly(curComponentStyle.left, left),
|
||||
lineNode: lines.yl[0], // yl
|
||||
line: 'yl',
|
||||
dragShift: left,
|
||||
lineShift: left
|
||||
},
|
||||
{
|
||||
isNearly: isNearly(curComponentStyle.right, left),
|
||||
lineNode: lines.yl[0], // yl
|
||||
line: 'yl',
|
||||
dragShift: left - curComponentStyle.width,
|
||||
lineShift: left
|
||||
},
|
||||
{
|
||||
// 组件与拖拽节点的中间是否对齐
|
||||
isNearly: isNearly(
|
||||
curComponentStyle.left + curComponentHalfWidth,
|
||||
left + componentHalfWidth
|
||||
),
|
||||
lineNode: lines.yc[0], // yc
|
||||
line: 'yc',
|
||||
dragShift: left + componentHalfWidth - curComponentHalfWidth,
|
||||
lineShift: left + componentHalfWidth
|
||||
},
|
||||
{
|
||||
isNearly: isNearly(curComponentStyle.left, right),
|
||||
lineNode: lines.yr[0], // yr
|
||||
line: 'yr',
|
||||
dragShift: right,
|
||||
lineShift: right
|
||||
},
|
||||
{
|
||||
isNearly: isNearly(curComponentStyle.right, right),
|
||||
lineNode: lines.yr[0], // yr
|
||||
line: 'yr',
|
||||
dragShift: right - curComponentStyle.width,
|
||||
lineShift: right
|
||||
}
|
||||
]
|
||||
}
|
||||
const conditions = {
|
||||
top: [
|
||||
{
|
||||
isNearly: isNearly(curComponentStyle.top, top),
|
||||
lineNode: lines.xt[0], // xt
|
||||
line: 'xt',
|
||||
dragShift: top,
|
||||
lineShift: top
|
||||
},
|
||||
{
|
||||
isNearly: isNearly(curComponentStyle.bottom, top),
|
||||
lineNode: lines.xt[0], // xt
|
||||
line: 'xt',
|
||||
dragShift: top - curComponentStyle.height,
|
||||
lineShift: top
|
||||
},
|
||||
{
|
||||
// 组件与拖拽节点的中间是否对齐
|
||||
isNearly: isNearly(
|
||||
curComponentStyle.top + curComponentHalfHeight,
|
||||
top + componentHalfHeight
|
||||
),
|
||||
lineNode: lines.xc[0], // xc
|
||||
line: 'xc',
|
||||
dragShift: top + componentHalfHeight - curComponentHalfHeight,
|
||||
lineShift: top + componentHalfHeight
|
||||
},
|
||||
{
|
||||
isNearly: isNearly(curComponentStyle.top, bottom),
|
||||
lineNode: lines.xb[0], // xb
|
||||
line: 'xb',
|
||||
dragShift: bottom,
|
||||
lineShift: bottom
|
||||
},
|
||||
{
|
||||
isNearly: isNearly(curComponentStyle.bottom, bottom),
|
||||
lineNode: lines.xb[0], // xb
|
||||
line: 'xb',
|
||||
dragShift: bottom - curComponentStyle.height,
|
||||
lineShift: bottom
|
||||
}
|
||||
],
|
||||
left: [
|
||||
{
|
||||
isNearly: isNearly(curComponentStyle.left, left),
|
||||
lineNode: lines.yl[0], // yl
|
||||
line: 'yl',
|
||||
dragShift: left,
|
||||
lineShift: left
|
||||
},
|
||||
{
|
||||
isNearly: isNearly(curComponentStyle.right, left),
|
||||
lineNode: lines.yl[0], // yl
|
||||
line: 'yl',
|
||||
dragShift: left - curComponentStyle.width,
|
||||
lineShift: left
|
||||
},
|
||||
{
|
||||
// 组件与拖拽节点的中间是否对齐
|
||||
isNearly: isNearly(
|
||||
curComponentStyle.left + curComponentHalfWidth,
|
||||
left + componentHalfWidth
|
||||
),
|
||||
lineNode: lines.yc[0], // yc
|
||||
line: 'yc',
|
||||
dragShift: left + componentHalfWidth - curComponentHalfWidth,
|
||||
lineShift: left + componentHalfWidth
|
||||
},
|
||||
{
|
||||
isNearly: isNearly(curComponentStyle.left, right),
|
||||
lineNode: lines.yr[0], // yr
|
||||
line: 'yr',
|
||||
dragShift: right,
|
||||
lineShift: right
|
||||
},
|
||||
{
|
||||
isNearly: isNearly(curComponentStyle.right, right),
|
||||
lineNode: lines.yr[0], // yr
|
||||
line: 'yr',
|
||||
dragShift: right - curComponentStyle.width,
|
||||
lineShift: right
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const needToShow = []
|
||||
const { rotate } = curComponent.value.style
|
||||
if (conditions) {
|
||||
Object.keys(conditions).forEach(key => {
|
||||
// 遍历符合的条件并处理
|
||||
if (conditions[key]) {
|
||||
conditions[key].forEach(condition => {
|
||||
if (!condition.isNearly) return
|
||||
// 修改当前组件位移
|
||||
dvMainStore.setShapeSingleStyle({
|
||||
key,
|
||||
value:
|
||||
rotate != 0
|
||||
? translateCurComponentShift(key, condition, curComponentStyle)
|
||||
: condition.dragShift
|
||||
})
|
||||
if (condition.lineNode) {
|
||||
condition.lineNode.style[key] = `${condition.lineShift}px`
|
||||
}
|
||||
needToShow.push(condition.line)
|
||||
const needToShow = []
|
||||
const { rotate } = curComponent.value.style
|
||||
if (conditions) {
|
||||
Object.keys(conditions).forEach(key => {
|
||||
// 遍历符合的条件并处理
|
||||
if (conditions[key]) {
|
||||
conditions[key].forEach(condition => {
|
||||
if (!condition.isNearly) return
|
||||
// 修改当前组件位移
|
||||
dvMainStore.setShapeSingleStyle({
|
||||
key,
|
||||
value:
|
||||
rotate != 0
|
||||
? translateCurComponentShift(key, condition, curComponentStyle)
|
||||
: condition.dragShift
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
if (needToShow.length) {
|
||||
chooseTheTrueLine(needToShow, isDownward, isRightward)
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('markLine disabled')
|
||||
if (condition.lineNode) {
|
||||
condition.lineNode.style[key] = `${condition.lineShift}px`
|
||||
}
|
||||
needToShow.push(condition.line)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
if (needToShow.length) {
|
||||
chooseTheTrueLine(needToShow, isDownward, isRightward)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user