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-mapillary-image-ID-field {
+    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

@@ -786,6 +786,8 @@ 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_mapillary: "Sets the current ID of mapillary"
+    show_mapillary_from_field: "Show image on viewer"
   background:
     title: Background
     description: Background Settings

modules/ui/fields/input.js

@@ -13,6 +13,7 @@ import { isColourValid } from '../../osm/tags';
 import { uiLengthIndicator } from '..';
 import { uiTooltip } from '../tooltip';
 import { isEqual } from 'lodash-es';
+import { services } from '../../services';
 
 export {
     uiFieldText as uiFieldColour,
@@ -30,6 +31,8 @@ export function uiFieldText(field, context) {
     var dispatch = d3_dispatch('change');
     var input = d3_select(null);
     var outlinkButton = d3_select(null);
+    var mapillaryViewButton = d3_select(null);
+    var mapillarySetButton = d3_select(null);
     var wrap = d3_select(null);
     var _lengthIndicator = uiLengthIndicator(context.maxCharsForTagValue());
     var _entityIDs = [];
@@ -169,8 +172,72 @@ export function uiFieldText(field, context) {
                     change()();
                 });
         } else if (field.type === 'identifier' && field.urlFormat && field.pattern) {
-
             input.attr('type', 'text');
+
+            if (field.id==='mapillary'){
+                const service = services.mapillary;
+                // set button
+                mapillarySetButton = wrap.selectAll('.mapillary-set-current')
+                    .data([0])
+                    .enter()
+                    .append('button')
+                    .attr('class', 'form-field-button mapillary-set-current')
+                    .call(svgIcon('#fas-rotate'))
+                    .attr('title', t('inspector.set_mapillary'))
+                    .on('click', function(d3_event) {
+                        d3_event.preventDefault();
+                        const image = service.getActiveImage();
+                        if (!image) return;
+                        if (image.id===utilGetSetValue(input).trim()) return;
+                        service
+                            .ensureViewerLoaded(context)
+                            .then(function() {
+                                service
+                                    .showViewer(context)
+                                    .selectImage(context, image.id)
+                                    .initViewer(context);
+                                utilGetSetValue(input, image.id);
+                                change()();
+                            });
+                    })
+                    .merge(wrap.selectAll('.mapillary-set-current'))
+                    .classed('disabled', () => {
+                        const image = service.getActiveImage();
+                        if (!image) return true;
+                        if (image.id===utilGetSetValue(input).trim()) return true;
+                    });
+                service.on('imageChanged', function() {
+                    mapillarySetButton.classed('disabled', () => {
+                        const image = service.getActiveImage();
+                        if (!image) return true;
+                        if (image.id===utilGetSetValue(input).trim()) return true;
+                        return false;
+                    });
+                });
+                // view button
+                mapillaryViewButton = wrap.selectAll('.mapillary-show-view')
+                    .data([0])
+                    .enter()
+                    .append('button')
+                    .attr('class', 'form-field-button mapillary-show-view')
+                    .call(svgIcon('#fas-eye'))
+                    .attr('title', t('inspector.show_mapillary_from_field'))
+                    .on('click', function(d3_event) {
+                        d3_event.preventDefault();
+                        if ( !utilGetSetValue(input).trim()) return;
+                        service
+                            .ensureViewerLoaded(context)
+                            .then(function() {
+                                service
+                                    .showViewer(context)
+                                    .selectImage(context, utilGetSetValue(input).trim())
+                                    .initViewer(context);
+                            });
+                    })
+                    .merge(wrap.selectAll('.mapillary-show-view'))
+                    .classed('disabled', () => !utilGetSetValue(input).trim());
+            }
+
             outlinkButton = wrap.selectAll('.foreign-id-permalink')
                 .data([0]);
 
@@ -525,6 +592,23 @@ export function uiFieldText(field, context) {
             outlinkButton.classed('disabled', disabled);
         }
 
+        if (mapillaryViewButton && !mapillaryViewButton.empty()) {
+            mapillaryViewButton.classed('disabled', !utilGetSetValue(input).trim());
+        }
+
+        if (mapillarySetButton && !mapillarySetButton.empty()) {
+            const service = services.mapillary;
+            mapillarySetButton.classed('disabled', () => {
+                const image = service.getActiveImage();
+                if (!image) return true;
+                if (image.id===utilGetSetValue(input).trim()) {
+                    return true;
+                } else {
+                    return false;
+                }
+            });
+        }
+
         if (!isMixed) {
             _lengthIndicator.update(tags[field.key]);
         }

modules/ui/photoviewer.js

@@ -6,7 +6,7 @@ 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 } from '../util';
 import { services } from '../services';
 
 export function uiPhotoviewer(context) {
@@ -61,6 +61,64 @@ export function uiPhotoviewer(context) {
                 buildResizeListener(selection, 'resize', dispatch, { resizeOnY: true })
             );
 
+        if (services.mapillary) {
+            addMapillayIdButton();
+        }
+
+        // add set-mapillary-button in mapillary viewer
+        function addMapillayIdButton () {
+
+            const service = services.mapillary;
+            selection
+                .append('button')
+                .attr('class', 'set-mapillary-image-ID-field')
+                .on('click', function(d3_event) {
+                    d3_event.preventDefault();
+                    const editorPane = d3_select('.entity-editor-pane');
+                    const inspector_wrap = d3_select('.inspector-wrap');
+                    const mailallary_image_ID_field = d3_select('.wrap-form-field-mapillary');
+                    const  changeEvent = new Event('change');
+                    if (!editorPane) return;
+
+                    if (!editorPane.classed('hide')&&!inspector_wrap.classed('inspector-hidden')){
+                        // check if mapillary image id field exist
+                        if (!mailallary_image_ID_field.empty()) {
+                            // 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);
+                        } 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);
+
+                            // 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);
+                        }
+                    } else {
+                        /* eslint-disable no-console */
+                        console.log('editorPane hide');
+                        /* eslint-disable no-console */
+                    }
+                })
+                .append('div')
+                .call(svgIcon('#fas-rotate'))
+                .attr('title', t('inspector.set_mapillary'));
+        }
+
         function buildResizeListener(target, eventName, dispatch, options) {
 
             var resizeOnX = !!options.resizeOnX;