From f53cb64d4380cc37d9a0908b52693fb6c9cf499f Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Sat, 9 Mar 2024 20:15:40 -0400 Subject: client: right-align tooltips where needed --- src/static/client3.js | 56 ++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 51 insertions(+), 5 deletions(-) (limited to 'src/static') diff --git a/src/static/client3.js b/src/static/client3.js index 599a934..236e98a 100644 --- a/src/static/client3.js +++ b/src/static/client3.js @@ -1608,21 +1608,48 @@ function getTooltipFromHoverablePlacementOpportunityAreas(hoverable) { ? rect : null); - const prepareRegionRects = (relationalRect) => + const prepareRegionRects = (relationalRect, direct) => baselineRects .map(rect => rect.intersectionWith(relationalRect)) + .map(direct) .map(keepIfFits); const regionRects = { - left: prepareRegionRects(WikiRect.leftOf(hoverableRect)), - right: prepareRegionRects(WikiRect.rightOf(hoverableRect)), - top: prepareRegionRects(WikiRect.above(hoverableRect)), - bottom: prepareRegionRects(WikiRect.beneath(hoverableRect)), + left: + prepareRegionRects( + WikiRect.leftOf(hoverableRect), + rect => WikiRect.fromRect({ + x: rect.right, + y: rect.y, + width: -rect.width, + height: rect.height, + })), + + right: + prepareRegionRects( + WikiRect.rightOf(hoverableRect), + rect => rect), + + top: + prepareRegionRects( + WikiRect.above(hoverableRect), + rect => WikiRect.fromRect({ + x: rect.x, + y: rect.bottom, + width: rect.width, + height: -rect.height, + })), + + bottom: + prepareRegionRects( + WikiRect.beneath(hoverableRect), + rect => rect), }; const neededVerticalOverlap = 30; const neededHorizontalOverlap = 30; + // Please don't ask us to make this but horizontal? const prepareVerticalOrientationRects = (regionRects) => { const orientations = {}; @@ -1634,9 +1661,26 @@ function getTooltipFromHoverablePlacementOpportunityAreas(hoverable) { WikiRect.above( hoverableRect.bottom - neededVerticalOverlap + tooltipRect.height); + const orientHorizontally = (rect, i) => { + if (!rect) return null; + + const regionRect = regionRects[i]; + if (regionRect.width > 0) { + return regionRect; + } else { + return WikiRect.fromRect({ + x: regionRect.right - tooltipRect.width, + y: rect.y, + width: rect.width, + height: rect.height, + }); + } + }; + orientations.up = regionRects .map(rect => rect?.intersectionWith(upTopDown)) + .map(orientHorizontally) .map(keepIfFits); orientations.down = @@ -1651,6 +1695,7 @@ function getTooltipFromHoverablePlacementOpportunityAreas(hoverable) { height: tooltipRect.height, })) : null)) + .map(orientHorizontally) .map(keepIfFits); const centerRect = @@ -1665,6 +1710,7 @@ function getTooltipFromHoverablePlacementOpportunityAreas(hoverable) { orientations.center = regionRects .map(rect => rect?.intersectionWith(centerRect)) + .map(orientHorizontally) .map(keepIfFits); return orientations; -- cgit 1.3.0-6-gf8a5