How to use the css-box-model.calculateBox function in css-box-model
To help you get started, we’ve selected a few css-box-model examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
atlassian / react-beautiful-dnd / src / view / use-draggable-publisher / get-dimension.js View on Github 
export default function getDimension(
descriptor: DraggableDescriptor,
el: HTMLElement,
windowScroll?: Position = origin,
): DraggableDimension {
const computedStyles: CSSStyleDeclaration = window.getComputedStyle(el);
const borderBox: ClientRect = el.getBoundingClientRect();
const client: BoxModel = calculateBox(borderBox, computedStyles);
const page: BoxModel = withScroll(client, windowScroll);
const placeholder: Placeholder = {
client,
tagName: el.tagName.toLowerCase(),
display: computedStyles.display,
};
const displaceBy: Position = {
x: client.marginBox.width,
y: client.marginBox.height,
};
const dimension: DraggableDimension = {
descriptor,
placeholder,
displaceBy,getDimension = (windowScroll?: Position = origin): DraggableDimension => {
const targetRef: ?HTMLElement = this.props.getDraggableRef();
const descriptor: ?DraggableDescriptor = this.publishedDescriptor;
invariant(
targetRef,
'DraggableDimensionPublisher cannot calculate a dimension when not attached to the DOM',
);
invariant(descriptor, 'Cannot get dimension for unpublished draggable');
const computedStyles: CSSStyleDeclaration = window.getComputedStyle(
targetRef,
);
const borderBox: ClientRect = targetRef.getBoundingClientRect();
const client: BoxModel = calculateBox(borderBox, computedStyles);
const page: BoxModel = withScroll(client, windowScroll);
const placeholder: Placeholder = {
client,
tagName: targetRef.tagName.toLowerCase(),
display: computedStyles.display,
};
const displaceBy: Position = {
x: client.marginBox.width,
y: client.marginBox.height,
};
const dimension: DraggableDimension = {
descriptor,
placeholder,
displaceBy,css-box-model
Get accurate and well named css box model information about an Element 📦
