diff --git a/css/60_photos.css b/css/60_photos.css index 9c452d3c5..cc853900c 100644 --- a/css/60_photos.css +++ b/css/60_photos.css @@ -31,8 +31,8 @@ right: 0; z-index: 49; cursor: nesw-resize; - height: 10px; - width: 10px; + height: 25px; + width: 25px; } #photoviewer button.resize-handle-x { @@ -44,7 +44,7 @@ z-index: 48; cursor: ew-resize; height: auto; - width: 5px; + width: 6px; } #photoviewer button.resize-handle-y { @@ -54,7 +54,7 @@ right: 0; z-index: 48; cursor: ns-resize; - height: 5px; + height: 6px; width: 100%; } @@ -64,6 +64,7 @@ width: 100%; height: 100%; overflow: hidden; + object-fit: cover; } .photo-wrapper .photo-attribution { @@ -221,7 +222,7 @@ flex-flow: row nowrap; justify-content: space-between; align-items: center; - pading: 0 5px; + padding: 0 5px; } .ms-wrapper .photo-attribution .image-view-link { text-align: left; @@ -297,6 +298,8 @@ label.streetside-hires { } .osc-image-wrap { + width: 100%; + height: 100%; transform-origin:0 0; -ms-transform-origin:0 0; -webkit-transform-origin:0 0; diff --git a/modules/services/openstreetcam.js b/modules/services/openstreetcam.js index 14ded2d6b..99be60e12 100644 --- a/modules/services/openstreetcam.js +++ b/modules/services/openstreetcam.js @@ -34,17 +34,17 @@ import { } from '../util'; -var apibase = 'https://openstreetcam.org', - maxResults = 1000, - tileZoom = 14, - dispatch = d3_dispatch('loadedImages'), - imgZoom = d3_zoom() - .extent([[0, 0], [320, 240]]) - .translateExtent([[0, 0], [320, 240]]) - .scaleExtent([1, 15]) - .on('zoom', zoomPan), - _oscCache, - _oscSelectedImage; +var apibase = 'https://openstreetcam.org'; +var maxResults = 1000; +var tileZoom = 14; +var dispatch = d3_dispatch('loadedImages'); +var imgZoom = d3_zoom() + .extent([[0, 0], [320, 240]]) + .translateExtent([[0, 0], [320, 240]]) + .scaleExtent([1, 15]) + .on('zoom', zoomPan); +var _oscCache; +var _oscSelectedImage; function abortRequest(i) { @@ -129,12 +129,12 @@ function loadNextTilePage(which, currZoom, url, tile) { var maxPages = maxPageAtZoom(currZoom); var nextPage = cache.nextPage[tile.id] || 1; var params = utilQsString({ - ipp: maxResults, - page: nextPage, - // client_id: clientId, - bbTopLeft: [bbox.maxY, bbox.minX].join(','), - bbBottomRight: [bbox.minY, bbox.maxX].join(',') - }, true); + ipp: maxResults, + page: nextPage, + // client_id: clientId, + bbTopLeft: [bbox.maxY, bbox.minX].join(','), + bbBottomRight: [bbox.minY, bbox.maxX].join(',') + }, true); if (nextPage > maxPages) return; @@ -367,6 +367,16 @@ export default { .attr('class', 'osc-image-wrap'); + // Register viewer resize handler + context.ui().on('photoviewerResize', function(dimensions) { + imgZoom = d3_zoom() + .extent([[0, 0], dimensions]) + .translateExtent([[0, 0], dimensions]) + .scaleExtent([1, 15]) + .on('zoom', zoomPan); + }); + + function rotate(deg) { return function() { if (!_oscSelectedImage) return; diff --git a/modules/services/streetside.js b/modules/services/streetside.js index f13470b6c..040f66b6c 100644 --- a/modules/services/streetside.js +++ b/modules/services/streetside.js @@ -669,6 +669,14 @@ export default { .attr('src', context.asset(pannellumViewerJS)); + // Register viewer resize handler + context.ui().on('photoviewerResize', function() { + if (_pannellumViewer) { + _pannellumViewer.resize(); + } + }); + + function step(stepBy) { return function() { var viewer = d3_select('#photoviewer'); diff --git a/modules/ui/init.js b/modules/ui/init.js index 3e4c695c5..9d1e608c2 100644 --- a/modules/ui/init.js +++ b/modules/ui/init.js @@ -44,46 +44,6 @@ import { uiVersion } from './version'; import { uiZoom } from './zoom'; import { uiCmd } from './cmd'; -function buildResizeListener(target, eventName, dispatch, options) { - var resizeOnX = !!options.resizeOnX; - var resizeOnY = !!options.resizeOnY; - var minHeight = options.minHeight || 240; - var minWidth = options.minWidth || 320; - var startX; - var startY; - var startWidth; - var startHeight; - - function startResize() { - if (resizeOnX) { - var newWidth = Math.max(minWidth, startWidth + d3_event.clientX - startX); - target.style('width', newWidth + 'px'); - } - - if (resizeOnY) { - var newHeight = Math.max(minHeight, startHeight + startY - d3_event.clientY); - target.style('height', newHeight + 'px'); - } - - dispatch.call(eventName, target); - } - - function stopResize() { - d3_select(window) - .on('.' + eventName, null); - } - - return function initResize() { - startX = d3_event.clientX; - startY = d3_event.clientY; - startWidth = target.node().getBoundingClientRect().width; - startHeight = target.node().getBoundingClientRect().height; - - d3_select(window) - .on('mousemove.' + eventName, startResize, false) - .on('mouseup.' + eventName, stopResize, false); - }; -} export function uiInit(context) { var uiInitCounter = 0; @@ -382,8 +342,8 @@ export function uiInit(context) { .call(uiShortcuts(context)); } - var osm = context.connection(), - auth = uiLoading(context).message(t('loading_auth')).blocking(true); + var osm = context.connection(); + var auth = uiLoading(context).message(t('loading_auth')).blocking(true); if (osm && auth) { osm @@ -402,6 +362,56 @@ export function uiInit(context) { hash.startWalkthrough = false; context.container().call(uiIntro(context)); } + + + function buildResizeListener(target, eventName, dispatch, options) { + var resizeOnX = !!options.resizeOnX; + var resizeOnY = !!options.resizeOnY; + var minHeight = options.minHeight || 240; + var minWidth = options.minWidth || 320; + var startX; + var startY; + var startWidth; + var startHeight; + + function startResize() { + var mapSize = context.map().dimensions(); + + if (resizeOnX) { + var maxWidth = mapSize[0]; + var newWidth = clamp((startWidth + d3_event.clientX - startX), minWidth, maxWidth); + target.style('width', newWidth + 'px'); + } + + if (resizeOnY) { + var maxHeight = mapSize[1] - 90; // preserve space at top/bottom of map + var newHeight = clamp((startHeight + startY - d3_event.clientY), minHeight, maxHeight); + target.style('height', newHeight + 'px'); + } + + dispatch.call(eventName, target, utilGetDimensions(target, true)); + } + + function clamp(num, min, max) { + return Math.max(min, Math.min(num, max)); + } + + function stopResize() { + d3_select(window) + .on('.' + eventName, null); + } + + return function initResize() { + startX = d3_event.clientX; + startY = d3_event.clientY; + startWidth = target.node().getBoundingClientRect().width; + startHeight = target.node().getBoundingClientRect().height; + + d3_select(window) + .on('mousemove.' + eventName, startResize, false) + .on('mouseup.' + eventName, stopResize, false); + }; + } }