From 40a5c32e2feb27299872233f23dad49fcca36f60 Mon Sep 17 00:00:00 2001 From: Martin Raifer Date: Fri, 10 Jan 2025 15:13:54 +0100 Subject: [PATCH] fix misaligned walkthrough mask when supersurface is not at 0/0 origin closes #10624 The misalignment happens because the origin offset is not properly accounted for boxes around map coordinates, when the map surface is itself offset from the top-left corner of the map. This can happen with customized installations of iD, e.g. the version built into the HOT tasking manager. --- CHANGELOG.md | 3 ++- modules/ui/curtain.js | 4 +++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ee45666db..4655ff22c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -54,7 +54,7 @@ _Breaking developer changes, which may affect downstream projects or sites that * Add Ladin (language code `lld`) as an available option for multilingual names #### :hourglass: Performance #### :mortar_board: Walkthrough / Help -* Fix walkthrough from showing tooltips on wrong location under certain circumstances ([#10650]) +* Fix walkthrough from showing tooltips on wrong location under certain circumstances ([#10650], [#10624]) #### :rocket: Presets #### :hammer: Development * Migrate unit tests from karma to vitest ([#10452]) @@ -67,6 +67,7 @@ _Breaking developer changes, which may affect downstream projects or sites that [#10495]: https://github.com/openstreetmap/iD/issues/10495 [#10508]: https://github.com/openstreetmap/iD/pull/10508 [#10594]: https://github.com/openstreetmap/iD/pull/10594 +[#10624]: https://github.com/openstreetmap/iD/issues/10624 [#10650]: https://github.com/openstreetmap/iD/issues/10650 [@winstonsung]: https://github.com/winstonsung/ [@Nekzuris]: https://github.com/Nekzuris diff --git a/modules/ui/curtain.js b/modules/ui/curtain.js index 6ec48cead..cb90b1c59 100644 --- a/modules/ui/curtain.js +++ b/modules/ui/curtain.js @@ -56,7 +56,7 @@ export function uiCurtain(containerNode) { * Reveal cuts the curtain to highlight the given box, * and shows a tooltip with instructions next to the box. * - * @param {String|ClientRect} [box] box used to cut the curtain + * @param {String|ClientRect|HTMLElement} [box] box used to cut the curtain * @param {String} [text] text for a tooltip * @param {Object} [options] * @param {string} [options.tooltipClass] optional class to add to the tooltip @@ -74,6 +74,8 @@ export function uiCurtain(containerNode) { } if (box && box.getBoundingClientRect) { box = copyBox(box.getBoundingClientRect()); + } + if (box) { var containerRect = containerNode.getBoundingClientRect(); box.top -= containerRect.top; box.left -= containerRect.left;