Add a button in the mapillary image photo viewer to "add the current image id as field to feature"

css/60_photos.css

@@ -33,6 +33,15 @@
     z-index: 50;
 }
 
+.photoviewer button.set-photo-from-viewer {
+    border-radius: 0;
+    padding: 5px;
+    position: absolute;
+    left: 5px;
+    top: 5px;
+    z-index: 50;
+}
+
 .photoviewer button.resize-handle-xy {
     border-radius: 0;
     position: absolute;

data/core.yaml

@@ -788,6 +788,9 @@ en:
       inch: in
     max_length_reached: "This string is longer than the maximum length of {maxChars} characters. Anything exceeding that length will be truncated."
     set_today: "Sets the value to today."
+    set_photo_from_viewer:
+      enable: "Tag this photo id on the currently selected map object"
+      disable: "This image is already tagged on this feature"
   background:
     title: Background
     description: Background Settings

modules/services/mapillary.js

@@ -30,6 +30,7 @@ let _mlyShowFeatureDetections = false;
 let _mlyShowSignDetections = false;
 let _mlyViewer;
 let _mlyViewerFilter = ['all'];
+let _isViewerOpen = false;
 
 
 // Load all data for the specified type from Mapillary vector tiles
@@ -478,6 +479,8 @@ export default {
             _mlyViewer.resize();
         }
 
+        _isViewerOpen = true;
+
         return this;
     },
 
@@ -504,10 +507,18 @@ export default {
         dispatch.call('loadedMapFeatures');
         dispatch.call('loadedSigns');
 
+        _isViewerOpen = false;
+
         return this.setStyles(context, null);
     },
 
 
+    // Get viewer status
+    isViewerOpen: function() {
+            return _isViewerOpen;
+    },
+
+
     // Update the URL with current image id
     updateUrlImage: function(imageId) {
         if (!window.mocha) {

modules/ui/photoviewer.js

@@ -6,8 +6,9 @@ import { t } from '../core/localizer';
 import { dispatch as d3_dispatch } from 'd3-dispatch';
 import { svgIcon } from '../svg/icon';
 import { utilGetDimensions } from '../util/dimensions';
-import { utilRebind } from '../util';
+import { utilRebind, utilGetSetValue, utilStringQs } from '../util';
 import { services } from '../services';
+import { uiTooltip } from './tooltip';
 
 export function uiPhotoviewer(context) {
 
@@ -61,6 +62,175 @@ export function uiPhotoviewer(context) {
                 buildResizeListener(selection, 'resize', dispatch, { resizeOnY: true })
             );
 
+        // set_photo_from_viewer button
+        let _selectedID = context.selectedIDs();
+        context.container().on('click.setPhotoFromViewer', function(e) {
+            setPhotoFromViewerButton(e);
+        });
+
+        function setPhotoFromViewerButton(e) {
+            services.mapillary.ensureViewerLoaded(context).then(() => {
+                if (e.target.closest('.mly-wrapper')) {
+                    services.mapillary.on('imageChanged.set', function() {
+                        MapillaryButtonDisabledUpdate();
+                    });
+                    return;
+                }
+
+                if (!services.mapillary.isViewerOpen()) return;
+
+                if (context.mode().id !== 'select' || !paneCheck() || !(layerStatus('mapillary') && getServiceId() === 'mapillary')) {
+                    buttonRemove();
+                } else {
+                    if (selection.select('.set-photo-from-viewer').empty()) {
+                        const button = buttonCreate();
+                        button.on('click', function (e) {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            setMapillaryPhotoId();
+                            buttonDisable(true);
+                        });
+                        MapillaryButtonDisabledUpdate();
+                    } else {
+                        if (isSelectedIDChanged()) {
+                            MapillaryButtonDisabledUpdate();
+                            updateSelectedID();
+                        }
+                    }
+                }
+
+                function MapillaryButtonDisabledUpdate() {
+                    let activeImageId = services.mapillary.getActiveImage()?.id;
+
+                    const fieldInput = d3_select('.wrap-form-field-mapillary .identifier');
+                    if (!fieldInput.empty()) {
+                        if (activeImageId === utilGetSetValue(fieldInput)) {
+                            buttonDisable(true);
+                        } else {
+                            buttonDisable(false);
+                        }
+                    } else {
+                        buttonDisable(false);
+                    }
+                }
+
+                function setMapillaryPhotoId() {
+                    function insertIdAndTriggerChangeAtField() {
+                        const changeEvent = new Event('change');
+                        const service = services.mapillary;
+                        // insert id
+                        const image = service.getActiveImage();
+                        const fieldInput = d3_select('.wrap-form-field-mapillary .identifier');
+                        utilGetSetValue(fieldInput, image.id);
+
+                        // trigger change at field
+                        fieldInput.node().focus();
+                        fieldInput.node().dispatchEvent(changeEvent);
+                    }
+                    // check if mapillary image id field exist
+                    const mapillaryImageIDField = d3_select('.wrap-form-field-mapillary');
+                    if (!mapillaryImageIDField.empty()) {
+                        insertIdAndTriggerChangeAtField();
+                    } else {
+                        // open the Mapillary field
+                        const comboboxInput = d3_select('.value.combobox-input');
+                        const EnterEvent = new KeyboardEvent('keydown', { keyCode: 13 });
+                        utilGetSetValue(comboboxInput, 'Mapillary Image ID');
+                        comboboxInput.node().focus();
+                        comboboxInput.node().dispatchEvent(EnterEvent);
+
+                        insertIdAndTriggerChangeAtField();
+                    }
+                }
+            });
+
+
+            function layerStatus(which) {
+                const layers = context.layers();
+                const layer = layers.layer(which);
+                return layer.enabled();
+            }
+
+            function getServiceId() {
+                const hash = utilStringQs(window.location.hash);
+                let serviceId;
+                if (hash.photo) {
+                    let result = hash.photo.split('/');
+                    serviceId = result[0];
+                }
+                return serviceId;
+            }
+
+            function paneCheck() {
+                const inspectorWrap = d3_select('.inspector-wrap');
+                const editorPane = d3_select('.entity-editor-pane');
+                const presetPane = d3_select('.preset-list-pane');
+
+                return !inspectorWrap.classed('inspector-hidden') &&
+                    !editorPane.classed('hide') &&
+                    presetPane.classed('hide');
+            }
+
+            function isSelectedIDChanged() {
+                const currentSelectId = context.selectedIDs();
+                if (JSON.stringify(_selectedID) === JSON.stringify(currentSelectId)) {
+                    return false;
+                } else {
+                    return true;
+                }
+            }
+
+            function updateSelectedID() {
+                _selectedID = context.selectedIDs();
+            }
+
+            function buttonCreate() {
+                const button = selection.selectAll('.set-photo-from-viewer').data([0]);
+                const buttonEnter = button.enter()
+                    .append('button')
+                    .attr('class', 'set-photo-from-viewer')
+                    .call(svgIcon('#iD-operation-merge'))
+                    .call(uiTooltip()
+                        .title(() => t.append('inspector.set_photo_from_viewer'))
+                        .placement('right')
+                    );
+
+                buttonEnter.select('.tooltip')
+                    .classed('dark', true)
+                    .style('width', '300px');
+
+                return buttonEnter;
+            }
+
+            function buttonRemove() {
+                const button = selection.selectAll('.set-photo-from-viewer').data([0]);
+                button.remove();
+            }
+
+            function buttonDisable(disabled) {
+                const button = selection.selectAll('.set-photo-from-viewer').data([0]);
+                button.attr('disabled', disabled ? 'true' : null);
+                button.classed('disabled', disabled);
+                button.call(uiTooltip().destroyAny);
+                if (disabled) {
+                    button.call(uiTooltip()
+                        .title(() => t.append('inspector.set_photo_from_viewer.disable'))
+                        .placement('right')
+                    );
+                } else {
+                    button.call(uiTooltip()
+                        .title(() => t.append('inspector.set_photo_from_viewer.enable'))
+                        .placement('right')
+                    );
+                }
+
+                button.select('.tooltip')
+                    .classed('dark', true)
+                    .style('width', '300px');
+
+            }
+        }
+
         function buildResizeListener(target, eventName, dispatch, options) {
 
             var resizeOnX = !!options.resizeOnX;