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

Fix: doc tooltip positioning #5738

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

Fix: doc tooltip positioning #5738

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.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
132 changes: 111 additions & 21 deletions src/autocomplete.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -650,9 +650,13 @@
}

showDocTooltip(item) {
const INITIAL_TOOLTIP_HEIGHT = 200;
const INITIAL_TOOLTIP_WIDTH = 400;
if (!this.tooltipNode) {
this.tooltipNode = dom.createElement("div");
this.tooltipNode.style.margin = "0";
this.tooltipNode.style.maxHeight = INITIAL_TOOLTIP_HEIGHT + "px";
this.tooltipNode.style.maxWidth = INITIAL_TOOLTIP_WIDTH + "px";
this.tooltipNode.style.pointerEvents = "auto";
this.tooltipNode.style.overscrollBehavior = "contain";
this.tooltipNode.tabIndex = -1;
Expand All @@ -677,32 +681,118 @@
if (!tooltipNode.parentNode)
this.popup.container.appendChild(this.tooltipNode);

tooltipNode.style.display = "block";
tooltipNode.style.left = "";
tooltipNode.style.top = "";
tooltipNode.style.right = "";
tooltipNode.style.bottom = "";
tooltipNode.style.maxHeight = INITIAL_TOOLTIP_HEIGHT + "px";
tooltipNode.style.maxWidth = INITIAL_TOOLTIP_WIDTH + "px";

var popup = this.popup;
var rect = popup.container.getBoundingClientRect();
tooltipNode.style.top = popup.container.style.top;
tooltipNode.style.bottom = popup.container.style.bottom;

tooltipNode.style.display = "block";
if (window.innerWidth - rect.right < 320) {
if (rect.left < 320) {
if(popup.isTopdown) {
tooltipNode.style.top = rect.bottom + "px";
tooltipNode.style.left = rect.left + "px";
tooltipNode.style.right = "";
tooltipNode.style.bottom = "";
} else {
tooltipNode.style.top = popup.container.offsetTop - tooltipNode.offsetHeight + "px";
tooltipNode.style.left = rect.left + "px";
tooltipNode.style.right = "";
tooltipNode.style.bottom = "";
const verticalScrollBarWidth = this.editor.renderer.scrollBarV.getWidth();
const horizontalScrollBarHeight = this.editor.renderer.scrollBarH.getHeight();

let spaceLeft = rect.left;
let spaceRight = window.innerWidth - rect.right - verticalScrollBarWidth;
let spaceBottom = window.innerHeight - rect.bottom - horizontalScrollBarHeight;
let spaceTop = rect.top;

let targetWidth = INITIAL_TOOLTIP_WIDTH;
let targetHeight = INITIAL_TOOLTIP_HEIGHT;

function getSideScore(side) {
switch (side) {
case "right":
if (spaceRight >= targetWidth) return 10000;
if (spaceRight >= targetWidth / 2) return 5000;
return spaceRight;
case "left":
if (spaceLeft >= targetWidth) return 10000;
if (spaceLeft >= targetWidth / 2) return 5000;
return spaceLeft;
case "top":
if (spaceTop >= targetHeight) return 10000;
if (spaceTop >= targetHeight / 2) return 5000;
return spaceTop;
case "bottom":
if (spaceBottom >= targetHeight) return 10000;
if (spaceBottom >= targetHeight / 2) return 5000;
return spaceBottom;
}
}

let sidesInPreference = ["right", "bottom", "top", "left"];
let bestSide = sidesInPreference[0];
let bestScore = getSideScore(bestSide);

for (let i = 1; i < sidesInPreference.length; i++) {
let side = sidesInPreference[i];
let score = getSideScore(side);
if (score > bestScore) {
bestScore = score;
bestSide = side;
}
}

switch (bestSide) {
case "right":
tooltipNode.style.left = rect.right + "px";
tooltipNode.style.top = rect.top + "px";
break;
case "left": {
let tRect = tooltipNode.getBoundingClientRect();
let newLeft = rect.left - tRect.width;
if (newLeft < 0) {
newLeft = 0;

Check warning on line 749 in src/autocomplete.js

View check run for this annotation

Codecov / codecov/patch

src/autocomplete.js#L741-L749 

Added lines #L741 - L749 were not covered by tests
}
} else {
tooltipNode.style.right = window.innerWidth - rect.left + "px";
tooltipNode.style.left = "";
tooltipNode.style.left = newLeft + "px";
tooltipNode.style.top = rect.top + "px";

Check warning on line 752 in src/autocomplete.js

View check run for this annotation

Codecov / codecov/patch

src/autocomplete.js#L751-L752 

Added lines #L751 - L752 were not covered by tests

let availableWidth = rect.left - newLeft;
if (availableWidth < targetWidth) {
tooltipNode.style.maxWidth = availableWidth + "px";

Check warning on line 756 in src/autocomplete.js

View check run for this annotation

Codecov / codecov/patch

src/autocomplete.js#L754-L756 

Added lines #L754 - L756 were not covered by tests
}
break;

Check warning on line 758 in src/autocomplete.js

View check run for this annotation

Codecov / codecov/patch

src/autocomplete.js#L758 

Added line #L758 was not covered by tests
}
} else {
tooltipNode.style.left = (rect.right + 1) + "px";
tooltipNode.style.right = "";
case "top":
tooltipNode.style.left = rect.left + "px";
if (targetHeight > spaceTop) {
tooltipNode.style.top = "0px";
tooltipNode.style.maxHeight = spaceTop + "px";
tooltipNode.style.overflowY = "auto";
}
else {
tooltipNode.style.top = (rect.top - targetHeight) + "px";

Check warning on line 768 in src/autocomplete.js

View check run for this annotation

Codecov / codecov/patch

src/autocomplete.js#L768 

Added line #L768 was not covered by tests
}
break;
case "bottom":
tooltipNode.style.left = rect.left + "px";
tooltipNode.style.top = rect.bottom + "px";
break;
}

let tRect = tooltipNode.getBoundingClientRect();
if (tRect.top < 0) {
tooltipNode.style.top = "0px";

Check warning on line 779 in src/autocomplete.js

View check run for this annotation

Codecov / codecov/patch

src/autocomplete.js#L779 

Added line #L779 was not covered by tests
}
if (tRect.right > window.innerWidth) {
let availableWidth = window.innerWidth - tRect.left - verticalScrollBarWidth;
tooltipNode.style.maxWidth = availableWidth + "px";

Check warning on line 783 in src/autocomplete.js

View check run for this annotation

Codecov / codecov/patch

src/autocomplete.js#L782-L783 

Added lines #L782 - L783 were not covered by tests
}
if (tRect.bottom > window.innerHeight) {
let newMaxHeight = window.innerHeight - tRect.top - horizontalScrollBarHeight;
tooltipNode.style.maxHeight = newMaxHeight + "px";

Check warning on line 787 in src/autocomplete.js

View check run for this annotation

Codecov / codecov/patch

src/autocomplete.js#L786-L787 

Added lines #L786 - L787 were not covered by tests
}

tRect = tooltipNode.getBoundingClientRect();
if (tRect.height < 50) {
tooltipNode.style.maxHeight = "50px";
}
if (tRect.width < 50) {
tooltipNode.style.maxWidth = "50px";

Check warning on line 795 in src/autocomplete.js

View check run for this annotation

Codecov / codecov/patch

src/autocomplete.js#L795 

Added line #L795 was not covered by tests
}
}

Expand Down
1 change: 0 additions & 1 deletion src/css/editor-css.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -456,7 +456,6 @@ module.exports = `
border-radius: 1px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
color: black;
max-width: 100%;
padding: 3px 4px;
position: fixed;
z-index: 999999;
Expand Down