diff --git a/css/60_photos.css b/css/60_photos.css index ee43cf558..bae76039e 100644 --- a/css/60_photos.css +++ b/css/60_photos.css @@ -257,6 +257,17 @@ .layer-mapilio .sequence { stroke: #0056f1; } +.photo-controls-mapilio { + display: flex; + align-items: center; + justify-content: center; + gap: 4px; + pointer-events: initial; +} + +.photo-controls-mapilio button{ + padding:0 6px; +} .ideditor .mapilio-wrapper { position: relative; diff --git a/modules/services/mapilio.js b/modules/services/mapilio.js index f963b309e..251be5294 100644 --- a/modules/services/mapilio.js +++ b/modules/services/mapilio.js @@ -405,7 +405,9 @@ export default { }, - ensureViewerLoaded: function(context,) { + ensureViewerLoaded: function(context) { + + let that = this; let imgWrap = context.container().select('#ideditor-viewer-mapilio > img'); @@ -427,6 +429,22 @@ export default { .append('div') .attr('class', 'photo-attribution fillD'); + const controlsEnter = wrapEnter + .append('div') + .attr('class', 'photo-controls-wrap') + .append('div') + .attr('class', 'photo-controls-mapilio'); + + controlsEnter + .append('button') + .on('click.back', step(-1)) + .text('◄'); + + controlsEnter + .append('button') + .on('click.forward', step(1)) + .text('►'); + wrapEnter .append('div') .attr('id', 'ideditor-viewer-mapilio'); @@ -481,6 +499,22 @@ export default { _loadViewerPromise = null; }); + function step(stepBy) { + return function () { + if (!_mlyActiveImage) return; + const imageId = _mlyActiveImage.id; + + const nextIndex = imageId + stepBy; + if (!nextIndex) return; + + const nextImage = _mlyCache.images.forImageId[nextIndex]; + + context.map().centerEase(nextImage.loc); + + that.selectImage(context, nextImage.id); + }; + } + return _loadViewerPromise; }, diff --git a/modules/svg/mapilio_images.js b/modules/svg/mapilio_images.js index ddb8dc5ac..1f4a679a8 100644 --- a/modules/svg/mapilio_images.js +++ b/modules/svg/mapilio_images.js @@ -175,7 +175,7 @@ export function svgMapilioImages(projection, context, dispatch) { .attr('d', viewfieldPath); function viewfieldPath() { - if (this.parentNode.__data__.is_pano) { + if (this.parentNode.__data__.isPano) { return 'M 8,13 m -10,0 a 10,10 0 1,0 20,0 a 10,10 0 1,0 -20,0'; } else { return 'M 6,9 C 8,8.4 8,8.4 10,9 L 16,-2 C 12,-5 4,-5 0,-2 z';