Add set button and view button at mapillary field (#9339)

more info see https://github.com/openstreetmap/iD/issues/6196#issuecomment-751460516
I do the b. (set button) and c. (view button)
order: click OSM object -> click mapillary layer will close the OSM input field. need to do in reverse order
This commit is contained in:
NaVis0mple
2023-12-20 20:05:49 +08:00
parent bb17d5c24e
commit 87f001474f
2 changed files with 61 additions and 1 deletions

View File

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

View File

@@ -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,7 @@ 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 wrap = d3_select(null);
var _lengthIndicator = uiLengthIndicator(context.maxCharsForTagValue());
var _entityIDs = [];
@@ -169,8 +171,60 @@ 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
wrap.selectAll('.mapillary-set-current')
.data([0])
.enter()
.append('button')
.attr('class', 'form-field-button mapillary-set-current')
.call(svgIcon('#fas-rotate'))
.call(uiTooltip().title(() => t.append('inspector.set_mapillary')))
.on('click', function(d3_event) {
d3_event.preventDefault();
const image = service.getActiveImage();
if (!image) 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', () => !service.getActiveImage());
// 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'))
.call(uiTooltip().title(() => t.append('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 +579,10 @@ export function uiFieldText(field, context) {
outlinkButton.classed('disabled', disabled);
}
if (mapillaryViewButton && !mapillaryViewButton.empty()) {
mapillaryViewButton.classed('disabled', !utilGetSetValue(input).trim());
}
if (!isMixed) {
_lengthIndicator.update(tags[field.key]);
}