Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix: bound='parent' with SVG #594

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Fix: bound='parent' with SVG #594

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
16 changes: 8 additions & 8 deletions lib/utils/domFns.js
View file
Open in desktop
Expand Up @@ -65,35 +65,35 @@ export function removeEvent(el: ?Node, event: string, handler: Function, inputOp
}
}

export function outerHeight(node: HTMLElement): number {
export function outerHeight(node: Element): number {
// This is deliberately excluding margin for our calculations, since we are using
// offsetTop which is including margin. See getBoundPosition
let height = node.clientHeight;
let height = Math.round(node.getBoundingClientRect().height);
const computedStyle = node.ownerDocument.defaultView.getComputedStyle(node);
height += int(computedStyle.borderTopWidth);
height += int(computedStyle.borderBottomWidth);
return height;
}

export function outerWidth(node: HTMLElement): number {
export function outerWidth(node: Element): number {
// This is deliberately excluding margin for our calculations, since we are using
// offsetLeft which is including margin. See getBoundPosition
let width = node.clientWidth;
let width = Math.round(node.getBoundingClientRect().width);
const computedStyle = node.ownerDocument.defaultView.getComputedStyle(node);
width += int(computedStyle.borderLeftWidth);
width += int(computedStyle.borderRightWidth);
return width;
}
export function innerHeight(node: HTMLElement): number {
let height = node.clientHeight;
export function innerHeight(node: Element): number {
let height = Math.round(node.getBoundingClientRect().height);
const computedStyle = node.ownerDocument.defaultView.getComputedStyle(node);
height -= int(computedStyle.paddingTop);
height -= int(computedStyle.paddingBottom);
return height;
}

export function innerWidth(node: HTMLElement): number {
let width = node.clientWidth;
export function innerWidth(node: Element): number {
let width = Math.round(node.getBoundingClientRect().width);
const computedStyle = node.ownerDocument.defaultView.getComputedStyle(node);
width -= int(computedStyle.paddingLeft);
width -= int(computedStyle.paddingRight);
Expand Down
26 changes: 19 additions & 7 deletions lib/utils/positionFns.js
View file
Open in desktop
Expand Up @@ -13,7 +13,7 @@ export function getBoundPosition(draggable: Draggable, x: number, y: number): [n
// Clone new bounds
let {bounds} = draggable.props;
bounds = typeof bounds === 'string' ? bounds : cloneBounds(bounds);
const node = findDOMNode(draggable);
const node: Element = findDOMNode(draggable); // for Flow, can't seem to work correctly ": Element"

if (typeof bounds === 'string') {
const {ownerDocument} = node;
Expand All @@ -24,19 +24,31 @@ export function getBoundPosition(draggable: Draggable, x: number, y: number): [n
} else {
boundNode = ownerDocument.querySelector(bounds);
}
if (!(boundNode instanceof ownerWindow.HTMLElement)) {
if (!(boundNode instanceof ownerWindow.Element)) {
throw new Error('Bounds selector "' + bounds + '" could not find an element.');
}
const boundNodeEl: HTMLElement = boundNode; // for Flow, can't seem to refine correctly
const boundNodeEl: Element = boundNode; // for Flow, can't seem to work correctly ": Element"
const nodeStyle = ownerWindow.getComputedStyle(node);
const boundNodeStyle = ownerWindow.getComputedStyle(boundNodeEl);

let nodeOffsetLeft: number, nodeOffsetTop: number;

if (node instanceof HTMLElement) {
nodeOffsetLeft = node.offsetLeft;
nodeOffsetTop = node.offsetTop;
} else {
// if node is not HTMLElement, Compute nodeOffsetLeft, nodeOffsetTop from boundNode
nodeOffsetLeft = int(boundNodeStyle.paddingLeft) + int(nodeStyle.marginLeft);
nodeOffsetTop = int(boundNodeStyle.paddingLeft) + int(nodeStyle.marginLeft);
}

// Compute bounds. This is a pain with padding and offsets but this gets it exactly right.
bounds = {
left: -node.offsetLeft + int(boundNodeStyle.paddingLeft) + int(nodeStyle.marginLeft),
top: -node.offsetTop + int(boundNodeStyle.paddingTop) + int(nodeStyle.marginTop),
right: innerWidth(boundNodeEl) - outerWidth(node) - node.offsetLeft +
left: -nodeOffsetLeft + int(boundNodeStyle.paddingLeft) + int(nodeStyle.marginLeft),
top: -nodeOffsetTop + int(boundNodeStyle.paddingTop) + int(nodeStyle.marginTop),
right: innerWidth(boundNodeEl) - outerWidth(node) - nodeOffsetLeft +
int(boundNodeStyle.paddingRight) - int(nodeStyle.marginRight),
bottom: innerHeight(boundNodeEl) - outerHeight(node) - node.offsetTop +
bottom: innerHeight(boundNodeEl) - outerHeight(node) - nodeOffsetTop +
int(boundNodeStyle.paddingBottom) - int(nodeStyle.marginBottom)
};
}
Expand Down