优化在缩放情况下的定位问题

This commit is contained in:
2betop 2020-01-17 14:27:11 +08:00
parent f4642e966e
commit 1cdbc2252d
1 changed files with 10 additions and 8 deletions

View File

@ -140,7 +140,7 @@ function getLeftDelta(
export function calculatePosition( export function calculatePosition(
placement: any, placement: any,
overlayNode: any, overlayNode: any,
target: any, target: HTMLElement,
container: any, container: any,
padding: any = 0 padding: any = 0
) { ) {
@ -149,6 +149,9 @@ export function calculatePosition(
? getOffset(target) ? getOffset(target)
: getPosition(target, container); : getPosition(target, container);
const {height: overlayHeight, width: overlayWidth} = getOffset(overlayNode); const {height: overlayHeight, width: overlayWidth} = getOffset(overlayNode);
const clip = target.getBoundingClientRect();
const scaleX = clip.width / target.offsetWidth;
const scaleY = clip.height / target.offsetHeight;
// auto 尝试四个方向对齐。 // auto 尝试四个方向对齐。
placement = placement =
@ -195,10 +198,9 @@ export function calculatePosition(
// 如果还有其他可选项,则做位置判断,是否在可视区域,不完全在则继续看其他定位情况。 // 如果还有其他可选项,则做位置判断,是否在可视区域,不完全在则继续看其他定位情况。
if (tests.length) { if (tests.length) {
let clip = target.getBoundingClientRect();
const transformed = { const transformed = {
x: clip.x + positionLeft - childOffset.left, x: clip.x + positionLeft / scaleX - childOffset.left,
y: clip.y + positionTop - childOffset.top, y: clip.y + positionTop / scaleY - childOffset.top,
width: overlayWidth, width: overlayWidth,
height: overlayHeight height: overlayHeight
}; };
@ -267,10 +269,10 @@ export function calculatePosition(
} }
return { return {
positionLeft, positionLeft: positionLeft / scaleX,
positionTop, positionTop: positionTop / scaleY,
arrowOffsetLeft, arrowOffsetLeft: arrowOffsetLeft / scaleX,
arrowOffsetTop, arrowOffsetTop: arrowOffsetTop / scaleY,
activePlacement activePlacement
}; };
} }