Create a new zoom behaviour when the image size potentially change.

css/60_photos.css

@@ -72,7 +72,6 @@
     width: 100%;
     height: 100%;
     overflow: hidden;
-    object-fit: cover;
 }
 
 .photo-wrapper .photo-attribution {
@@ -344,6 +343,13 @@ label.streetside-hires {
     background-repeat: no-repeat;
 }
 
+.kartaview-wrapper img {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    object-fit: cover;
+}
+
 .kartaview-wrapper .photo-attribution a:active {
     color: #20c4ff;
 }
@@ -359,7 +365,12 @@ label.streetside-hires {
     transform-origin:0 0;
 }
 
-.plane-frame {
+.vegbilder-wrapper {
+    position: relative;
+    background-color: #000;
+}
+
+.vegbilder-wrapper .plane-frame {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -368,17 +379,12 @@ label.streetside-hires {
     width: 100%;
 }
 
-.plane-frame > img.plane-photo{
-    width: min-content;
+.vegbilder-wrapper .plane-frame > img.plane-photo{
+    width: auto;
     height: 100%;
     transform-origin: 0 0;
 }
 
-.vegbilder-wrapper {
-    position: relative;
-    background-color: #000;
-}
-
 /* photo-controls (step forward, back, rotate) */
 .photo-controls-wrap {
     text-align: center;

modules/services/plane_photo.js

@@ -5,8 +5,36 @@ import { utilSetTransform, utilRebind } from '../util';
 const dispatch = d3_dispatch('viewerChanged');
 
 let _photo;
+let _wrapper;
 let imgZoom;
 
+function zoomPan (d3_event) {
+  let t = d3_event.transform;
+  _photo.call(utilSetTransform, t.x, t.y, t.k);
+  }
+
+function zoomBeahvior () {
+  const {width: wrapperWidth, height: wrapperHeight} = _wrapper.node().getBoundingClientRect();
+  const {naturalHeight, naturalWidth} = _photo.node();
+  const intrinsicRatio = naturalWidth / naturalHeight;
+  const widthOverflow = wrapperHeight * intrinsicRatio - wrapperWidth;
+  return d3_zoom()
+        .extent([[widthOverflow / 2, 0], [wrapperWidth + widthOverflow / 2, wrapperHeight]])
+        .translateExtent([[0, 0], [wrapperWidth + widthOverflow, wrapperHeight]])
+        .scaleExtent([1, 15])
+        .on('zoom', zoomPan);
+}
+
+function loadImage (selection, path) {
+  return new Promise((resolve) => {
+    selection.attr('src', path);
+    selection.on('load', () => {
+      resolve(selection);
+    });
+  });
+}
+
+
 export default {
 
   init: async function(context, selection) {
@@ -18,25 +46,18 @@ export default {
                 .scaleExtent([1, 15])
                 .on('zoom', this.zoomPan);
 
-    const wrapper = selection
+    _wrapper = selection
       .append('div')
       .attr('class', 'photo-frame plane-frame')
       .classed('hide', true);
 
-    _photo = wrapper
+    _photo = _wrapper
       .append('img')
       .attr('class', 'plane-photo');
 
     context.ui().photoviewer.on('resize.plane', () => {
-      const {width: wrapperWidth} = wrapper.node().getBoundingClientRect();
-      const {width, height} = _photo.node().getBoundingClientRect();
-      const widthOverflow = width - wrapperWidth;
-      imgZoom = d3_zoom()
-        .extent([[widthOverflow / 2, 0], [wrapperWidth + widthOverflow / 2, height]])
-        .translateExtent([[0, 0], [width, height]])
-        .scaleExtent([1, 15])
-        .on('zoom', this.zoomPan);
-      wrapper.call(imgZoom);
+      imgZoom = zoomBeahvior();
+      _wrapper.call(imgZoom);
     });
 
     await Promise.resolve();
@@ -70,18 +91,17 @@ export default {
     },
 
   selectPhoto: function (data, keepOrientation) {
-    _photo.attr('src', data.image_path);
-    if (!keepOrientation) {
-      _photo.call(imgZoom.transform, d3_zoomIdentity);
-    }
+    loadImage(_photo, data.image_path)
+      .then(() => {
+        if (!keepOrientation) {
+          imgZoom = zoomBeahvior();
+          _wrapper.call(imgZoom);
+          _wrapper.call(imgZoom.transform, d3_zoomIdentity);
+        }
+      });
     return this;
   },
 
-  zoomPan: function (d3_event) {
-    let t = d3_event.transform;
-    _photo.call(utilSetTransform, t.x, t.y, t.k);
-  },
-
   getYaw: function() {
     return 0;
   }