From 2325de466200da0a59ef6942f2a35c54b9fa6456 Mon Sep 17 00:00:00 2001 From: laigyu Date: Fri, 12 Apr 2024 18:37:26 +0800 Subject: [PATCH] update butotn logic --- modules/services/mapillary.js | 11 +++ modules/ui/photoviewer.js | 166 ++++++++++++++++++++++------------ 2 files changed, 119 insertions(+), 58 deletions(-) diff --git a/modules/services/mapillary.js b/modules/services/mapillary.js index fb64e1eab..8e0c2fe32 100644 --- a/modules/services/mapillary.js +++ b/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) { diff --git a/modules/ui/photoviewer.js b/modules/ui/photoviewer.js index 0651a07fa..358ac75ca 100644 --- a/modules/ui/photoviewer.js +++ b/modules/ui/photoviewer.js @@ -63,39 +63,103 @@ export function uiPhotoviewer(context) { ); // set_photo_from_viewer button - context.container().on('click.setPhotoFromViewer', setPhotoFromViewerButton); + let _selectedID = context.selectedIDs(); + context.container().on('click.setPhotoFromViewer', function(e) { + setPhotoFromViewerButton(e); + }); - function setPhotoFromViewerButton() { - services.mapillary.on('imageChanged', function() { - let activeImageId; - const layers = context.layers(); - function layerStatus(which) { - const layer = layers.layer(which); - return layer.enabled(); + 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]; } - 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(); - } - }); + return serviceId; + } function paneCheck() { const inspectorWrap = d3_select('.inspector-wrap'); @@ -103,26 +167,35 @@ export function uiPhotoviewer(context) { const presetPane = d3_select('.preset-list-pane'); return !inspectorWrap.classed('inspector-hidden') && - !editorPane.classed('hide') && - presetPane.classed('hide') && - context.mode().id === 'select'; + !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') - .append('div') .call(svgIcon('#iD-operation-merge')) .call(uiTooltip() .title(() => t.append('inspector.set_photo_from_viewer')) .placement('right') ); - buttonEnter - .select('.tooltip') + buttonEnter.select('.tooltip') .classed('dark', true) .style('width', '300px'); @@ -131,36 +204,13 @@ export function uiPhotoviewer(context) { function buttonRemove() { const button = selection.selectAll('.set-photo-from-viewer').data([0]); - button?.remove(); + button.remove(); } - } - function setPhotoFromMapillaryViewer() { - 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 buttonDisable(disabled) { + const button = selection.selectAll('.set-photo-from-viewer').data([0]); + button.attr('disabled', disabled ? 'true' : null); + button.classed('disabled', disabled); } }