From fa91fe7c0d41eebf7bcf0231e0a60422d5d414dd Mon Sep 17 00:00:00 2001 From: Martin Raifer Date: Sat, 26 Apr 2025 20:47:50 +0200 Subject: [PATCH] fix zoom resetting wrongly when switching background mid-transition see https://github.com/openstreetmap/iD/issues/10700#issuecomment-2832010049 --- CHANGELOG.md | 1 + modules/behavior/hash.js | 2 +- modules/renderer/background.js | 4 +--- modules/renderer/features.js | 18 ++++++++---------- modules/renderer/photos.js | 22 +++++++++------------- modules/services/kartaview.js | 14 ++++++-------- modules/services/mapilio.js | 14 ++++++-------- modules/services/mapillary.js | 14 ++++++-------- modules/services/panoramax.js | 14 ++++++-------- modules/services/streetside.js | 14 ++++++-------- modules/services/vegbilder.js | 14 ++++++-------- modules/ui/intro/intro.js | 2 +- 12 files changed, 57 insertions(+), 76 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c12d118a7..4d7de0153 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -50,6 +50,7 @@ _Breaking developer changes, which may affect downstream projects or sites that #### :bug: Bugfixes * Fix removed tooltips from re-appearing when using keyboard navigation ([#9873]) * Only consider feature with proper lifecycle tags in "past/futures" layer ([#10943]) +* Fix zoom level from resetting to the starting value when switching background imagery layer during the zoom transition #### :earth_asia: Localization #### :hourglass: Performance #### :mortar_board: Walkthrough / Help diff --git a/modules/behavior/hash.js b/modules/behavior/hash.js index 34f0aba24..d3c362eca 100644 --- a/modules/behavior/hash.js +++ b/modules/behavior/hash.js @@ -109,7 +109,7 @@ export function behaviorHash(context) { // Update the URL hash without affecting the browser navigation stack, // though unavoidably creating a browser history entry - window.history.replaceState(null, computedTitle(false /* includeChangeCount */), latestHash); + window.history.replaceState(null, '', latestHash); // set the title we want displayed for the browser tab/window updateTitle(true /* includeChangeCount */); diff --git a/modules/renderer/background.js b/modules/renderer/background.js index 48eddf956..5f9c2de47 100644 --- a/modules/renderer/background.js +++ b/modules/renderer/background.js @@ -225,9 +225,7 @@ export function rendererBackground(context) { delete hash.offset; } - if (!window.mocha) { - window.location.replace('#' + utilQsString(hash, true)); - } + window.history.replaceState(null, '', '#' + utilQsString(hash, true)); let imageryUsed = []; let photoOverlaysUsed = []; diff --git a/modules/renderer/features.js b/modules/renderer/features.js index 0263f3ad2..6514d0d13 100644 --- a/modules/renderer/features.js +++ b/modules/renderer/features.js @@ -54,17 +54,15 @@ export function rendererFeatures(context) { function update() { - if (!window.mocha) { - var hash = utilStringQs(window.location.hash); - var disabled = features.disabled(); - if (disabled.length) { - hash.disable_features = disabled.join(','); - } else { - delete hash.disable_features; - } - window.location.replace('#' + utilQsString(hash, true)); - prefs('disabled-features', disabled.join(',')); + const hash = utilStringQs(window.location.hash); + const disabled = features.disabled(); + if (disabled.length) { + hash.disable_features = disabled.join(','); + } else { + delete hash.disable_features; } + window.history.replaceState(null, '', '#' + utilQsString(hash, true)); + prefs('disabled-features', disabled.join(',')); _hidden = features.hidden(); dispatch.call('change'); dispatch.call('redraw'); diff --git a/modules/renderer/photos.js b/modules/renderer/photos.js index fb27d646b..254ce2fa7 100644 --- a/modules/renderer/photos.js +++ b/modules/renderer/photos.js @@ -18,8 +18,6 @@ export function rendererPhotos(context) { function photos() {} function updateStorage() { - if (window.mocha) return; - var hash = utilStringQs(window.location.hash); var enabled = context.layers().all().filter(function(d) { return _layerIDs.indexOf(d.id) !== -1 && d.layer && d.layer.supported() && d.layer.enabled(); @@ -31,7 +29,7 @@ export function rendererPhotos(context) { } else { delete hash.photo_overlay; } - window.location.replace('#' + utilQsString(hash, true)); + window.history.replaceState(null, '', '#' + utilQsString(hash, true)); } /** @@ -150,17 +148,15 @@ export function rendererPhotos(context) { * @param {string} property Name of the value */ function setUrlFilterValue(property, val) { - if (!window.mocha) { - var hash = utilStringQs(window.location.hash); - if (val) { - if (hash[property] === val) return; - hash[property] = val; - } else { - if (!(property in hash)) return; - delete hash[property]; - } - window.location.replace('#' + utilQsString(hash, true)); + const hash = utilStringQs(window.location.hash); + if (val) { + if (hash[property] === val) return; + hash[property] = val; + } else { + if (!(property in hash)) return; + delete hash[property]; } + window.history.replaceState(null, '', '#' + utilQsString(hash, true)); } function showsLayer(id) { diff --git a/modules/services/kartaview.js b/modules/services/kartaview.js index 359abc592..d4a0f1b63 100644 --- a/modules/services/kartaview.js +++ b/modules/services/kartaview.js @@ -554,15 +554,13 @@ export default { updateUrlImage: function(imageKey) { - if (!window.mocha) { - var hash = utilStringQs(window.location.hash); - if (imageKey) { - hash.photo = 'kartaview/' + imageKey; - } else { - delete hash.photo; - } - window.location.replace('#' + utilQsString(hash, true)); + const hash = utilStringQs(window.location.hash); + if (imageKey) { + hash.photo = 'kartaview/' + imageKey; + } else { + delete hash.photo; } + window.history.replaceState(null, '', '#' + utilQsString(hash, true)); }, diff --git a/modules/services/mapilio.js b/modules/services/mapilio.js index 10582aff3..d6e2a21a4 100644 --- a/modules/services/mapilio.js +++ b/modules/services/mapilio.js @@ -308,15 +308,13 @@ export default { }, updateUrlImage: function(imageKey) { - if (!window.mocha) { - var hash = utilStringQs(window.location.hash); - if (imageKey) { - hash.photo = 'mapilio/' + imageKey; - } else { - delete hash.photo; - } - window.location.replace('#' + utilQsString(hash, true)); + const hash = utilStringQs(window.location.hash); + if (imageKey) { + hash.photo = 'mapilio/' + imageKey; + } else { + delete hash.photo; } + window.history.replaceState(null, '', '#' + utilQsString(hash, true)); }, initViewer: function () { diff --git a/modules/services/mapillary.js b/modules/services/mapillary.js index 595a244a4..7f055946e 100644 --- a/modules/services/mapillary.js +++ b/modules/services/mapillary.js @@ -524,15 +524,13 @@ export default { // Update the URL with current image id updateUrlImage: function(imageId) { - if (!window.mocha) { - const hash = utilStringQs(window.location.hash); - if (imageId) { - hash.photo = 'mapillary/' + imageId; - } else { - delete hash.photo; - } - window.location.replace('#' + utilQsString(hash, true)); + const hash = utilStringQs(window.location.hash); + if (imageId) { + hash.photo = 'mapillary/' + imageId; + } else { + delete hash.photo; } + window.history.replaceState(null, '', '#' + utilQsString(hash, true)); }, diff --git a/modules/services/panoramax.js b/modules/services/panoramax.js index 214acc3ae..1f9fa9287 100644 --- a/modules/services/panoramax.js +++ b/modules/services/panoramax.js @@ -419,15 +419,13 @@ export default { * @param {*} imageKey */ updateUrlImage: function(imageKey) { - if (!window.mocha) { - var hash = utilStringQs(window.location.hash); - if (imageKey) { - hash.photo = 'panoramax/' + imageKey; - } else { - delete hash.photo; - } - window.location.replace('#' + utilQsString(hash, true)); + const hash = utilStringQs(window.location.hash); + if (imageKey) { + hash.photo = 'panoramax/' + imageKey; + } else { + delete hash.photo; } + window.history.replaceState(null, '', '#' + utilQsString(hash, true)); }, /** diff --git a/modules/services/streetside.js b/modules/services/streetside.js index d5102a318..0831700a6 100644 --- a/modules/services/streetside.js +++ b/modules/services/streetside.js @@ -905,15 +905,13 @@ export default { updateUrlImage: function(imageKey) { - if (!window.mocha) { - var hash = utilStringQs(window.location.hash); - if (imageKey) { - hash.photo = 'streetside/' + imageKey; - } else { - delete hash.photo; - } - window.location.replace('#' + utilQsString(hash, true)); + const hash = utilStringQs(window.location.hash); + if (imageKey) { + hash.photo = 'streetside/' + imageKey; + } else { + delete hash.photo; } + window.history.replaceState(null, '', '#' + utilQsString(hash, true)); }, diff --git a/modules/services/vegbilder.js b/modules/services/vegbilder.js index 8f5355997..fee9d695d 100644 --- a/modules/services/vegbilder.js +++ b/modules/services/vegbilder.js @@ -584,15 +584,13 @@ export default { }, updateUrlImage: function (key) { - if (!window.mocha) { - const hash = utilStringQs(window.location.hash); - if (key) { - hash.photo = 'vegbilder/' + key; - } else { - delete hash.photo; - } - window.location.replace('#' + utilQsString(hash, true)); + const hash = utilStringQs(window.location.hash); + if (key) { + hash.photo = 'vegbilder/' + key; + } else { + delete hash.photo; } + window.history.replaceState(null, '', '#' + utilQsString(hash, true)); }, validHere: function(extent) { diff --git a/modules/ui/intro/intro.js b/modules/ui/intro/intro.js index 813d23a8b..85a2a3a0e 100644 --- a/modules/ui/intro/intro.js +++ b/modules/ui/intro/intro.js @@ -163,7 +163,7 @@ export function uiIntro(context) { overlays.forEach(d => context.background().toggleOverlayLayer(d)); if (history) { context.history().fromJSON(history, false); } context.map().centerZoom(center, zoom); - window.location.replace(hash); + window.history.replaceState(null, '', hash); context.inIntro(false); });