From 404e08518e0ede6038517838ec91da048aa58656 Mon Sep 17 00:00:00 2001 From: Martin Raifer Date: Wed, 4 Dec 2024 13:01:31 +0100 Subject: [PATCH] use correct margins when limiting photoviewer size, fixes #10558 replaces hardcoded values with dynamically calculated heights/margins. closes #10563 --- modules/ui/photoviewer.js | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/modules/ui/photoviewer.js b/modules/ui/photoviewer.js index c637014f8..e14ea62d1 100644 --- a/modules/ui/photoviewer.js +++ b/modules/ui/photoviewer.js @@ -210,13 +210,17 @@ export function uiPhotoviewer(context) { var mapSize = context.map().dimensions(); if (resizeOnX) { - var maxWidth = mapSize[0]; - var newWidth = clamp((startWidth + d3_event.clientX - startX), minWidth, maxWidth); + var mapWidth = mapSize[0]; + const viewerMargin = parseInt(d3_select('.photoviewer').style('margin-left'), 10); + var newWidth = clamp((startWidth + d3_event.clientX - startX), minWidth, mapWidth - viewerMargin * 2); target.style('width', newWidth + 'px'); } if (resizeOnY) { - var maxHeight = mapSize[1] - 90; // preserve space at top/bottom of map + const menuHeight = utilGetDimensions(d3_select('.top-toolbar'))[1] + + utilGetDimensions(d3_select('.map-footer'))[1]; + const viewerMargin = parseInt(d3_select('.photoviewer').style('margin-bottom'), 10); + var maxHeight = mapSize[1] - menuHeight - viewerMargin * 2; // preserve space at top/bottom of map var newHeight = clamp((startHeight + startY - d3_event.clientY), minHeight, maxHeight); target.style('height', newHeight + 'px'); } @@ -267,13 +271,15 @@ export function uiPhotoviewer(context) { var photoviewer = context.container().select('.photoviewer'); var content = context.container().select('.main-content'); var mapDimensions = utilGetDimensions(content, true); - // shrink photo viewer if it is too big - // (-90 preserves space at top and bottom of map used by menus) + const menuHeight = utilGetDimensions(d3_select('.top-toolbar'))[1] + + utilGetDimensions(d3_select('.map-footer'))[1]; + const viewerMargin = parseInt(d3_select('.photoviewer').style('margin-bottom'), 10); + // shrink photo viewer if it is too big (preserves space at top and bottom of map used by menus) var photoDimensions = utilGetDimensions(photoviewer, true); - if (photoDimensions[0] > mapDimensions[0] || photoDimensions[1] > (mapDimensions[1] - 90)) { + if (photoDimensions[0] > mapDimensions[0] || photoDimensions[1] > (mapDimensions[1] - menuHeight - viewerMargin * 2)) { var setPhotoDimensions = [ Math.min(photoDimensions[0], mapDimensions[0]), - Math.min(photoDimensions[1], mapDimensions[1] - 90), + Math.min(photoDimensions[1], mapDimensions[1] - menuHeight - viewerMargin * 2), ]; photoviewer