@jupyterlab/ui-components
Version:
JupyterLab - UI components written in React
253 lines • 10.3 kB
JavaScript
// Copyright (c) Jupyter Development Team.
// Distributed under the terms of the Modified BSD License.
/**
* The class name added to all hover boxes.
*/
const HOVERBOX_CLASS = 'jp-HoverBox';
/**
* The z-index used to hide hovering node that is scrolled out of view.
*/
const OUTOFVIEW_Z_INDEX = '-1000';
/**
* A namespace for `HoverBox` members.
*/
export var HoverBox;
(function (HoverBox) {
/**
* Set the visible dimensions of a hovering box anchored to an editor cursor.
*
* @param options - The hover box geometry calculation options.
*/
function setGeometry(options) {
const { anchor, host, node, privilege, outOfViewDisplay } = options;
const hostRect = host.getBoundingClientRect();
// Add hover box class if it does not exist.
if (!node.classList.contains(HOVERBOX_CLASS)) {
node.classList.add(HOVERBOX_CLASS);
}
// Start with the node displayed as if it was in view.
if (node.style.visibility) {
node.style.visibility = '';
}
if (node.style.zIndex === '') {
node.style.zIndex = '';
}
// Clear any previously set max-height.
node.style.maxHeight = '';
// Clear any programmatically set margin-top.
node.style.marginTop = '';
const style = options.style || window.getComputedStyle(node);
const spaceAbove = anchor.top - hostRect.top;
const spaceBelow = hostRect.bottom - anchor.bottom;
const marginTop = parseInt(style.marginTop, 10) || 0;
const marginLeft = parseInt(style.marginLeft, 10) || 0;
const minHeight = parseInt(style.minHeight, 10) || options.minHeight;
let maxHeight = parseInt(style.maxHeight, 10) || options.maxHeight;
// Determine whether to render above or below; check privilege.
const renderBelow = privilege === 'forceAbove'
? false
: privilege === 'forceBelow'
? true
: privilege === 'above'
? spaceAbove < maxHeight && spaceAbove < spaceBelow
: spaceBelow >= maxHeight || spaceBelow >= spaceAbove;
if (renderBelow) {
maxHeight = Math.min(spaceBelow - marginTop, maxHeight);
}
else {
maxHeight = Math.min(spaceAbove, maxHeight);
// If the box renders above the text, its top margin is irrelevant.
node.style.marginTop = '0px';
}
node.style.maxHeight = `${maxHeight}px`;
// Make sure the box ought to be visible.
const withinBounds = maxHeight >= minHeight &&
(spaceBelow >= minHeight || spaceAbove >= minHeight);
if (!withinBounds) {
node.style.zIndex = OUTOFVIEW_Z_INDEX;
node.style.visibility = 'hidden';
return;
}
if (options.size) {
node.style.width = `${options.size.width}px`;
node.style.height = `${options.size.height}px`;
node.style.contain = 'strict';
}
else {
node.style.contain = '';
node.style.width = 'auto';
node.style.height = '';
}
// Position the box vertically.
const initialHeight = options.size
? options.size.height
: node.getBoundingClientRect().height;
const offsetAbove = (options.offset &&
options.offset.vertical &&
options.offset.vertical.above) ||
0;
const offsetBelow = (options.offset &&
options.offset.vertical &&
options.offset.vertical.below) ||
0;
let top = renderBelow
? hostRect.bottom - spaceBelow + offsetBelow
: hostRect.top + spaceAbove - initialHeight + offsetAbove;
node.style.top = `${Math.floor(top)}px`;
// Position the box horizontally.
const offsetHorizontal = (options.offset && options.offset.horizontal) || 0;
let left = anchor.left + offsetHorizontal;
node.style.left = `${Math.ceil(left)}px`;
let rect = node.getBoundingClientRect();
// Move left to fit in the window.
let right = rect.right;
if (right > window.innerWidth) {
left -= right - window.innerWidth;
right = window.innerWidth;
node.style.left = `${Math.ceil(left)}px`;
}
// Move right to fit in the window
if (left < offsetHorizontal - marginLeft) {
left = offsetHorizontal - marginLeft;
node.style.left = `${Math.ceil(left)}px`;
}
// Hide the hover box before querying the DOM for the anchor coordinates.
// Using z-index set directly for performance.
node.style.zIndex = '-1000';
const bottom = rect.bottom;
const includesLeftTop = host.contains(document.elementFromPoint(left, top));
const includesRightTop = host.contains(document.elementFromPoint(right, top));
const includesRightBottom = host.contains(document.elementFromPoint(right, bottom));
const includesLeftBottom = host.contains(document.elementFromPoint(left, bottom));
node.style.zIndex = '';
const topEdgeInside = includesLeftTop || includesRightTop;
const bottomEdgeInside = includesLeftBottom || includesRightBottom;
const leftEdgeInside = includesLeftTop || includesLeftBottom;
const rightEdgeInside = includesRightBottom || includesRightTop;
const height = bottom - top;
const width = right - left;
const overTheTop = top < hostRect.top;
const belowTheBottom = bottom > hostRect.bottom;
const beforeTheLeft = left + marginLeft < hostRect.left;
const afterTheRight = right > hostRect.right;
let hide = false;
let leftChanged = false;
let topChanged = false;
if (overTheTop) {
switch ((outOfViewDisplay === null || outOfViewDisplay === void 0 ? void 0 : outOfViewDisplay.top) || 'hidden-inside') {
case 'hidden-inside':
if (!topEdgeInside) {
hide = true;
}
break;
case 'hidden-outside':
if (!bottomEdgeInside) {
hide = true;
}
break;
case 'stick-inside':
if (hostRect.top > top) {
top = hostRect.top;
topChanged = true;
}
break;
case 'stick-outside':
if (hostRect.top > bottom) {
top = hostRect.top - height;
topChanged = true;
}
break;
}
}
if (belowTheBottom) {
switch ((outOfViewDisplay === null || outOfViewDisplay === void 0 ? void 0 : outOfViewDisplay.bottom) || 'hidden-outside') {
case 'hidden-inside':
if (!bottomEdgeInside) {
hide = true;
}
break;
case 'hidden-outside':
if (!topEdgeInside) {
hide = true;
}
break;
case 'stick-inside':
if (hostRect.bottom < bottom) {
top = hostRect.bottom - height;
topChanged = true;
}
break;
case 'stick-outside':
if (hostRect.bottom < top) {
top = hostRect.bottom;
topChanged = true;
}
break;
}
}
if (beforeTheLeft) {
switch ((outOfViewDisplay === null || outOfViewDisplay === void 0 ? void 0 : outOfViewDisplay.left) || 'hidden-inside') {
case 'hidden-inside':
if (!leftEdgeInside) {
hide = true;
}
break;
case 'hidden-outside':
if (!rightEdgeInside) {
hide = true;
}
break;
case 'stick-inside':
if (hostRect.left > left + marginLeft) {
left = hostRect.left - marginLeft;
leftChanged = true;
}
break;
case 'stick-outside':
if (hostRect.left > right) {
left = hostRect.left - marginLeft - width;
leftChanged = true;
}
break;
}
}
if (afterTheRight) {
switch ((outOfViewDisplay === null || outOfViewDisplay === void 0 ? void 0 : outOfViewDisplay.right) || 'hidden-outside') {
case 'hidden-inside':
if (!rightEdgeInside) {
hide = true;
}
break;
case 'hidden-outside':
if (!leftEdgeInside) {
hide = true;
}
break;
case 'stick-inside':
if (hostRect.right < right) {
left = hostRect.right - width;
leftChanged = true;
}
break;
case 'stick-outside':
if (hostRect.right < left) {
left = hostRect.right;
leftChanged = true;
}
break;
}
}
if (hide) {
node.style.zIndex = OUTOFVIEW_Z_INDEX;
node.style.visibility = 'hidden';
}
if (leftChanged) {
node.style.left = `${Math.ceil(left)}px`;
}
if (topChanged) {
node.style.top = `${Math.ceil(top)}px`;
}
}
HoverBox.setGeometry = setGeometry;
})(HoverBox || (HoverBox = {}));
//# sourceMappingURL=hoverbox.js.map