From 23d19e89ff8ed2d8ca7fbd78597f3bc8cfa2a868 Mon Sep 17 00:00:00 2001
From: Martin Raifer <martin@raifer.tech>
Date: Wed, 2 Aug 2023 16:18:25 +0200
Subject: [PATCH] =?UTF-8?q?fix=20zoom/pan=20behavior=20on=20non-360=C2=B0?=
 =?UTF-8?q?=20vegbilder=20photos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/60_photos.css               |  4 +---
 modules/services/plane_photo.js | 15 +++++----------
 2 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/css/60_photos.css b/css/60_photos.css
index 98d568a68..96888a499 100644
--- a/css/60_photos.css
+++ b/css/60_photos.css
@@ -415,9 +415,7 @@ label.streetside-hires {
 }
 
 .vegbilder-wrapper .plane-frame {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    display: block;
     overflow: hidden;
     height: 100%;
     width: 100%;
diff --git a/modules/services/plane_photo.js b/modules/services/plane_photo.js
index 8a5b246fc..045ac812e 100644
--- a/modules/services/plane_photo.js
+++ b/modules/services/plane_photo.js
@@ -7,6 +7,7 @@ const dispatch = d3_dispatch('viewerChanged');
 let _photo;
 let _wrapper;
 let imgZoom;
+let _widthOverflow;
 
 function zoomPan (d3_event) {
   let t = d3_event.transform;
@@ -17,10 +18,10 @@ function zoomBeahvior () {
   const {width: wrapperWidth, height: wrapperHeight} = _wrapper.node().getBoundingClientRect();
   const {naturalHeight, naturalWidth} = _photo.node();
   const intrinsicRatio = naturalWidth / naturalHeight;
-  const widthOverflow = wrapperHeight * intrinsicRatio - wrapperWidth;
+  _widthOverflow = wrapperHeight * intrinsicRatio - wrapperWidth;
   return d3_zoom()
-        .extent([[widthOverflow / 2, 0], [wrapperWidth + widthOverflow / 2, wrapperHeight]])
-        .translateExtent([[0, 0], [wrapperWidth + widthOverflow, wrapperHeight]])
+        .extent([[0, 0], [wrapperWidth, wrapperHeight]])
+        .translateExtent([[0, 0], [wrapperWidth + _widthOverflow, wrapperHeight]])
         .scaleExtent([1, 15])
         .on('zoom', zoomPan);
 }
@@ -40,12 +41,6 @@ export default {
   init: async function(context, selection) {
     this.event = utilRebind(this, dispatch, 'on');
 
-    imgZoom = d3_zoom()
-                .extent([[0, 0], [320, 240]])
-                .translateExtent([[0, 0], [320, 240]])
-                .scaleExtent([1, 15])
-                .on('zoom', this.zoomPan);
-
     _wrapper = selection
       .append('div')
       .attr('class', 'photo-frame plane-frame')
@@ -96,7 +91,7 @@ export default {
         if (!keepOrientation) {
           imgZoom = zoomBeahvior();
           _wrapper.call(imgZoom);
-          _wrapper.call(imgZoom.transform, d3_zoomIdentity);
+          _wrapper.call(imgZoom.transform, d3_zoomIdentity.translate(-_widthOverflow / 2, 0));
         }
       });
     return this;