From 94e32a85b03b8462feb2bd9963ad9f515e4c1cdf Mon Sep 17 00:00:00 2001 From: laigyu Date: Sun, 7 Apr 2024 22:04:22 +0800 Subject: [PATCH] revert field button --- data/core.yaml | 2 - modules/ui/fields/input.js | 145 +------------------------------------ modules/ui/photoviewer.js | 82 ++++++++++++--------- 3 files changed, 50 insertions(+), 179 deletions(-) diff --git a/data/core.yaml b/data/core.yaml index d30a2fc4f..b2d8cb809 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -789,8 +789,6 @@ en: 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: "Store this photo on the currently selected map object" - set_photo_from_field: "Use the currently displayed photo" - show_photo_from_field: "Open image in viewer" show_photo_from_field_error: "Invalid ID" background: title: Background diff --git a/modules/ui/fields/input.js b/modules/ui/fields/input.js index 1317d191b..c5061b5ea 100644 --- a/modules/ui/fields/input.js +++ b/modules/ui/fields/input.js @@ -13,7 +13,6 @@ 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, @@ -31,8 +30,6 @@ 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 = []; @@ -172,12 +169,8 @@ export function uiFieldText(field, context) { change()(); }); } else if (field.type === 'identifier' && field.urlFormat && field.pattern) { + input.attr('type', 'text'); - - if (field.id === 'mapillary') { - updateMapillaryImageIDField(); - } - outlinkButton = wrap.selectAll('.foreign-id-permalink') .data([0]); @@ -362,116 +355,6 @@ export function uiFieldText(field, context) { if (format) input.attr('placeholder', format); } - function updateMapillaryImageIDField() { - const service = services.mapillary; - // set button - mapillarySetButton = wrap.selectAll('.mapillary-set-current') - .data([0]); - - mapillarySetButton.enter() - .append('button') - .attr('class', 'form-field-button mapillary-set-current') - .call(svgIcon('#fas-rotate')) - .attr('title', t('inspector.set_photo_from_field')) - .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() { - utilGetSetValue(input, image.id); - change()(); - }); - mapillarySetButton.node()?.blur(); - }) - .merge(mapillarySetButton) - .classed('disabled', _debounce(() => { - const image = service.getActiveImage(); - if (!image) return true; - if (image.id === utilGetSetValue(input).trim()) return true; - return false; - }), 100); - - // view button - mapillaryViewButton = wrap.selectAll('.mapillary-show-view') - .data([0]); - - mapillaryViewButton.enter() - .append('button') - .attr('class', 'form-field-button mapillary-show-view') - .call(svgIcon('#fas-eye')) - .attr('title', t('inspector.show_photo_from_field')) - .on('click', function(d3_event) { - d3_event.preventDefault(); - const isHidden = context.container() - .select('.photoviewer') - .selectAll('.photo-wrapper.mly-wrapper.hide') - .size(); - - if (isHidden) { - if (!utilGetSetValue(input).trim()) return; - - service - .ensureViewerLoaded(context) - .then(function() { - service - .selectImage(context, utilGetSetValue(input).trim()) - .showViewer(context); - }); - mapillaryViewButton.classed('disabled', true); - } else { - if (!utilGetSetValue(input).trim()) return; - const image = service.getActiveImage(); - if (!image) return; - if (image.id === utilGetSetValue(input).trim()) return; - - service - .ensureViewerLoaded(context) - .then(function() { - service - .selectImage(context, utilGetSetValue(input).trim()); - }); - } - mapillaryViewButton.node()?.blur(); - }) - .merge(mapillaryViewButton) - .classed('disabled', _debounce(() => { - if (!utilGetSetValue(input).trim()) return true; - const isHidden = context.container() - .select('.photoviewer') - .selectAll('.photo-wrapper.mly-wrapper.hide') - .size(); - if (isHidden) return false; - const image = service.getActiveImage(); - if (!image) return true; - if (image.id === utilGetSetValue(input).trim()) return true; - return false; - }, 100)); - - 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; - }); - mapillaryViewButton.classed('disabled', () => { - const isHidden = context.container() - .select('.photoviewer') - .selectAll('.photo-wrapper.mly-wrapper.hide') - .size(); - if (isHidden) return false; - if (!utilGetSetValue(input).trim()) return true; - const image = service.getActiveImage(); - if (!image) return true; - if (image.id === utilGetSetValue(input).trim()) return true; - return false; - }); - }); - } - function validIdentifierValueForLink() { const value = utilGetSetValue(input).trim(); @@ -642,32 +525,6 @@ export function uiFieldText(field, context) { outlinkButton.classed('disabled', disabled); } - 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; - return false; - }); - } - - if (mapillaryViewButton && !mapillaryViewButton.empty()) { - const service = services.mapillary; - mapillaryViewButton.classed('disabled', () => { - if (!utilGetSetValue(input).trim()) return true; - const isHidden = context.container() - .select('.photoviewer') - .selectAll('.photo-wrapper.mly-wrapper.hide') - .size(); - if (isHidden) return false; - const image = service.getActiveImage(); - if (!image) return true; - if (image.id === utilGetSetValue(input).trim()) return true; - return false; - }); - } - if (!isMixed) { _lengthIndicator.update(tags[field.key]); } diff --git a/modules/ui/photoviewer.js b/modules/ui/photoviewer.js index 9ba33e3f5..16bd7b62e 100644 --- a/modules/ui/photoviewer.js +++ b/modules/ui/photoviewer.js @@ -65,48 +65,64 @@ export function uiPhotoviewer(context) { context.container().on('click.setPhotoFromViewer', setPhotoFromViewerButton); function setPhotoFromViewerButton() { - const inspectorWrap = d3_select('.inspector-wrap'); - const editorPane = d3_select('.entity-editor-pane'); - const presetPane = d3_select('.preset-list-pane'); - const button = selection.selectAll('.set-photo-from-viewer').data([0]); - const hash = utilStringQs(window.location.hash); - let [serviceId, photoId] = []; - let photo_overlay = []; - if (hash.photo) { - [serviceId, photoId] = hash.photo.split('/'); + services.mapillary.on('imageChanged', function() { + let activeImageId; + const layers = context.layers(); + function layerStatus(which) { + const layer = layers.layer(which); + return layer.enabled(); + } + + const hash = utilStringQs(window.location.hash); + let serviceId; + if (hash.photo) { + let result = hash.photo.split('/'); + serviceId = result[0]; + } + activeImageId = services.mapillary.getActiveImage()?.id; + // check layer enabled && currently only support mapillary && editorpane open + if (layerStatus('mapillary') && serviceId === 'mapillary' && paneCheck()) { + const fieldInput = d3_select('.wrap-form-field-mapillary .identifier'); + if (!fieldInput.empty()) { + if (activeImageId === utilGetSetValue(fieldInput)) return buttonRemove(); + } + const buttonWithoutClickEvent = buttonCreate(); + buttonWithoutClickEvent.on('click', function () { + setPhotoFromMapillaryViewer(); + buttonRemove(); + }); + } else { + buttonRemove(); + } + }); + + 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') && + context.mode().id === 'select'; } - if (hash.photo_overlay) { - photo_overlay = hash.photo_overlay.split(','); - } - - // check photoviewer open && photo and layer match && currently only support mapillary && editorpane open - if (serviceId && - photo_overlay.includes(serviceId) && - serviceId === 'mapillary' && - !inspectorWrap.classed('inspector-hidden') && - !editorPane.classed('hide') && - presetPane.classed('hide') && - context.mode().id === 'select') { - buttonCreate(); - context.features().on('change.setPhotoFromViewerButtonCreate', buttonCreate); - } else { - // remove listener and button - context.features().on('change.setPhotoFromViewerButtonCreate', null); - const button = selection.selectAll('.set-photo-from-viewer'); - button.remove(); - } function buttonCreate() { - button.enter() + const button = selection.selectAll('.set-photo-from-viewer').data([0]); + const buttonEnter = button.enter() .append('button') .attr('class', 'set-photo-from-viewer') - .on('click', function () { - if (serviceId === 'mapillary' && services.mapillary) { setPhotoFromMapillaryViewer(); } - }) .append('div') .call(svgIcon('#iD-operation-merge')) .attr('title', t('inspector.set_photo_from_viewer')); + + return buttonEnter; + } + + function buttonRemove() { + const button = selection.selectAll('.set-photo-from-viewer').data([0]); + button?.remove(); } }