CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-02-12 16:52:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix zoom/pan behavior on non-360° vegbilder photos

Browse Source
This commit is contained in:
Martin Raifer
2023-08-02 16:18:25 +02:00
parent edb7c3b0f2
commit 23d19e89ff
2 changed files with 6 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
css/60_photos.css
View File

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

15
modules/services/plane_photo.js
View File

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