From 46dc44b35baeb8a505ea1f7d0c5cd2eb35243013 Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Mon, 23 Jul 2018 22:21:47 -0400 Subject: [PATCH] Make the mode buttons dynamic - show/hide the note button when the notes layer is enabled/disabled - enable/disable the note button based on notesEditable --- modules/renderer/map.js | 8 +-- modules/ui/modes.js | 127 +++++++++++++++++++++++----------------- 2 files changed, 76 insertions(+), 59 deletions(-) diff --git a/modules/renderer/map.js b/modules/renderer/map.js index 01e1fc294..050142720 100644 --- a/modules/renderer/map.js +++ b/modules/renderer/map.js @@ -212,7 +212,7 @@ export function rendererMap(context) { .call(context.background()); context.on('enter.map', function() { - if ((map.editable() && !_transformed) || map.noteEditable()) { + if (map.editable() && !_transformed) { // redraw immediately any objects affected by a change in selectedIDs. var graph = context.graph(); var selectedAndParents = {}; @@ -240,7 +240,6 @@ export function rendererMap(context) { dispatch.call('drawn', this, { full: false }); - // redraw everything else later scheduleRedraw(); } @@ -481,7 +480,8 @@ export function rendererMap(context) { .call(drawLayers); // OSM - if (map.editable() || map.noteEditable()) { // NOTE: when `map.noteEditable()` is removed, `redraw()` keep being called on timer + // NOTE: when `map.notesEditable()` is removed, `redraw()` keep being called on timer + if (map.editable() || map.notesEditable()) { context.loadTiles(projection); drawVector(difference, extent); } @@ -849,7 +849,7 @@ export function rendererMap(context) { }; - map.noteEditable = function() { + map.notesEditable = function() { var noteLayer = surface.selectAll('.data-layer-notes'); if (!noteLayer.empty() && noteLayer.classed('disabled')) return false; diff --git a/modules/ui/modes.js b/modules/ui/modes.js index c1c268fb2..dbff2e88e 100644 --- a/modules/ui/modes.js +++ b/modules/ui/modes.js @@ -3,8 +3,6 @@ import _debounce from 'lodash-es/debounce'; import { select as d3_select } from 'd3-selection'; import { d3keybinding as d3_keybinding } from '../lib/d3.keybinding.js'; -import { svgNotes } from '../svg'; - import { modeAddArea, modeAddLine, @@ -32,53 +30,18 @@ export function uiModes(context) { return context.editable() && mode && mode.id !== 'save'; } + function notesEnabled() { + var noteLayer = context.layers().layer('notes'); + return noteLayer && noteLayer.enabled(); + } - function toggleNewNote() { - return svgNotes().enabled() - && context.connection().authenticated() - && ~~context.map().zoom() >= 16; + function notesEditable() { + var mode = context.mode(); + return context.map().notesEditable() && mode && mode.id !== 'save'; } return function(selection) { - var buttons = selection.selectAll('button.add-button') - .data(modes); - - buttons = buttons.enter() - .append('button') - .attr('tabindex', -1) - .attr('class', function(mode) { return mode.id + ' add-button col3'; }) - .on('click.mode-buttons', function(mode) { - //TODO: prevent modeBrowse when in modeAddNote & osm layer is turned off - // When drawing, ignore accidental clicks on mode buttons - #4042 - var currMode = context.mode().id; - if (currMode.match(/^draw/) !== null) return; - - if (mode.id === currMode) { - context.enter(modeBrowse(context)); - } else { - context.enter(mode); - } - }) - .call(tooltip() - .placement('bottom') - .html(true) - .title(function(mode) { - return uiTooltipHtml(mode.description, mode.key); - }) - ); - - buttons - .each(function(d) { - d3_select(this) - .call(svgIcon('#iD-icon-' + d.button, 'pre-text')); - }); - - buttons - .append('span') - .attr('class', 'label') - .text(function(mode) { return mode.title; }); - context .on('enter.editor', function(entered) { selection.selectAll('button.add-button') @@ -97,12 +60,13 @@ export function uiModes(context) { modes.forEach(function(mode) { keybinding.on(mode.key, function() { - if ((editable() && mode.id !== 'add-note') || (toggleNewNote() && mode.id === 'add-note')) { - if (mode.id === context.mode().id) { - context.enter(modeBrowse(context)); - } else { - context.enter(mode); - } + if (mode.id === 'add-note' && !notesEditable()) return; + if (mode.id !== 'add-note' && !editable()) return; + + if (mode.id === context.mode().id) { + context.enter(modeBrowse(context)); + } else { + context.enter(mode); } }); }); @@ -120,14 +84,67 @@ export function uiModes(context) { context .on('enter.modes', update); + update(); + function update() { - selection.selectAll('button.add-button') - .filter(function(d) { return d.id !== 'add-note'; }) // disable all but add-note - .property('disabled', !editable()); + var showNotes = notesEnabled(); + var data = showNotes ? modes : modes.slice(0, 3); - selection.selectAll('button.add-note') // disable add-note - .property('disabled', !toggleNewNote()); + selection + .classed('col3', !showNotes) // 25% + .classed('col4', showNotes); // 33% + + var buttons = selection.selectAll('button.add-button') + .data(data, function(d) { return d.id; }); + + // exit + buttons.exit() + .remove(); + + // enter + var buttonsEnter = buttons.enter() + .append('button') + .attr('tabindex', -1) + .attr('class', function(d) { return d.id + ' add-button'; }) + .on('click.mode-buttons', function(mode) { + // When drawing, ignore accidental clicks on mode buttons - #4042 + var currMode = context.mode().id; + if (currMode.match(/^draw/) !== null) return; + + if (mode.id === currMode) { + context.enter(modeBrowse(context)); + } else { + context.enter(mode); + } + }) + .call(tooltip() + .placement('bottom') + .html(true) + .title(function(mode) { + return uiTooltipHtml(mode.description, mode.key); + }) + ); + + buttonsEnter + .each(function(d) { + d3_select(this) + .call(svgIcon('#iD-icon-' + d.button, 'pre-text')); + }); + + buttonsEnter + .append('span') + .attr('class', 'label') + .text(function(mode) { return mode.title; }); + + // update + buttons = buttons + .merge(buttonsEnter) + .classed('col3', showNotes) // 25% + .classed('col4', !showNotes) // 33% + .property('disabled', function(d) { + return d.id === 'add-note' ? !notesEditable() : !editable(); + }); } }; }