Dispatch new dimensions with photoview resize, resize all layers

-Adds ability to resize OpenStreetCam and Bing Streetside layers
-Also slightly increases the width of the resize handles
-Also limits max resize so it won't go larger than the map

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;

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;

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');

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);
+            };
+        }
     }