use correct margins when limiting photoviewer size, fixes #10558

replaces hardcoded values with dynamically calculated heights/margins.

closes #10563
This commit is contained in:
Martin Raifer
2024-12-04 13:01:31 +01:00
parent 0c2a8aa6ff
commit 404e08518e

View File

@@ -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