diff options
author | (quasar) nebula <qznebula@protonmail.com> | 2024-06-18 14:07:13 -0300 |
---|---|---|
committer | (quasar) nebula <qznebula@protonmail.com> | 2024-06-18 22:56:13 -0300 |
commit | 1c2cb74a4ee266204f04be77a2add72ba98d627c (patch) | |
tree | 1420dcfe100687d1acc72ebacee701f0b397bd36 /src | |
parent | ce4d4ba5e3bd1a88be27c25e6ba8ff5e24e8ffda (diff) |
client: down/up -> right/left dynamic tooltip alignment
Somehow...
Diffstat (limited to 'src')
-rw-r--r-- | src/static/js/client.js | 86 |
1 files changed, 78 insertions, 8 deletions
diff --git a/src/static/js/client.js b/src/static/js/client.js index 3a4af8c1..98418a31 100644 --- a/src/static/js/client.js +++ b/src/static/js/client.js @@ -1830,6 +1830,18 @@ function positionTooltipFromHoverableWithBrains(hoverable) { selectedRect = opportunities.left.up[i]; if (selectedRect) break; + + selectedRect = opportunities.down.right[i]; + if (selectedRect) break; + + selectedRect = opportunities.down.left[i]; + if (selectedRect) break; + + selectedRect = opportunities.up.right[i]; + if (selectedRect) break; + + selectedRect = opportunities.up.left[i]; + if (selectedRect) break; } selectedRect ??= baselineRect; @@ -1929,18 +1941,18 @@ function getTooltipFromHoverablePlacementOpportunityAreas(hoverable) { const neededVerticalOverlap = 30; const neededHorizontalOverlap = 30; + const upTopDown = + WikiRect.beneath( + hoverableRect.top + neededVerticalOverlap - tooltipRect.height); + + const downBottomUp = + WikiRect.above( + hoverableRect.bottom - neededVerticalOverlap + tooltipRect.height); + // Please don't ask us to make this but horizontal? const prepareVerticalOrientationRects = (regionRects) => { const orientations = {}; - const upTopDown = - WikiRect.beneath( - hoverableRect.top + neededVerticalOverlap - tooltipRect.height); - - const downBottomUp = - WikiRect.above( - hoverableRect.bottom - neededVerticalOverlap + tooltipRect.height); - const orientHorizontally = (rect, i) => { if (!rect) return null; @@ -1996,9 +2008,67 @@ function getTooltipFromHoverablePlacementOpportunityAreas(hoverable) { return orientations; }; + const rightRightLeft = + WikiRect.leftOf( + hoverableRect.left - neededHorizontalOverlap + tooltipRect.width); + + const leftLeftRight = + WikiRect.rightOf( + hoverableRect.left + neededHorizontalOverlap - tooltipRect.width); + + // Oops. + const prepareHorizontalOrientationRects = (regionRects) => { + const orientations = {}; + + const orientVertically = (rect, i) => { + if (!rect) return null; + + const regionRect = regionRects[i]; + + if (regionRect.height > 0) { + return rect; + } else { + return WikiRect.fromRect({ + x: rect.x, + y: regionRect.bottom - tooltipRect.height, + width: rect.width, + height: rect.height, + }); + } + }; + + orientations.left = + regionRects + .map(rect => rect?.intersectionWith(leftLeftRight)) + .map(orientVertically) + .map(keepIfFits); + + orientations.right = + regionRects + .map(rect => rect?.intersectionWith(rightRightLeft)) + .map(rect => + (rect + ? rect.intersectionWith(WikiRect.fromRect({ + x: rect.right - tooltipRect.width, + y: rect.y, + width: rect.width, + height: tooltipRect.height, + })) + : null)) + .map(orientVertically) + .map(keepIfFits); + + // No analogous center because we don't actually use + // center alignment... + + return orientations; + }; + const orientationRects = { left: prepareVerticalOrientationRects(regionRects.left), right: prepareVerticalOrientationRects(regionRects.right), + down: prepareHorizontalOrientationRects(regionRects.bottom), + up: prepareHorizontalOrientationRects(regionRects.top), }; return { |