From 2c22fe00a2304db7309b64f7eff104c90642c71d Mon Sep 17 00:00:00 2001 From: Thomas Hervey Date: Mon, 2 Jul 2018 10:44:47 -0400 Subject: [PATCH] updated: hacky note hovering; todo: complete note click handling --- modules/behavior/hover.js | 17 ++++++++--------- modules/behavior/select.js | 14 +++++++++++--- modules/svg/notes.js | 37 +++---------------------------------- modules/ui/sidebar.js | 36 ++++++++++++++++-------------------- 4 files changed, 38 insertions(+), 66 deletions(-) diff --git a/modules/behavior/hover.js b/modules/behavior/hover.js index 1a1a9ee67..d086ac72c 100644 --- a/modules/behavior/hover.js +++ b/modules/behavior/hover.js @@ -111,14 +111,9 @@ export function behaviorHover(context) { .classed('hover-suppressed', false); var entity; - if (datum instanceof osmEntity) { + if (datum instanceof osmNote || datum instanceof osmEntity) { entity = datum; - } - // TODO: TAH - reintroduce if we need a check for osmNote here - // else if (datum instanceof osmNote) { - // entity = datum; - // } - else { + } else { entity = datum && datum.properties && datum.properties.entity; } @@ -130,7 +125,7 @@ export function behaviorHover(context) { return; } - var selector = '.' + entity.id; + var selector = (datum instanceof osmNote) ? 'note-' + entity.id : '.' + entity.id; if (entity.type === 'relation') { entity.members.forEach(function(member) { @@ -143,7 +138,11 @@ export function behaviorHover(context) { _selection.selectAll(selector) .classed(suppressed ? 'hover-suppressed' : 'hover', true); - dispatch.call('hover', this, !suppressed && entity.id); + if (datum instanceof osmNote) { + dispatch.call('hover', this, !suppressed && entity); + } else { + dispatch.call('hover', this, !suppressed && entity.id); + } } else { dispatch.call('hover', this, null); diff --git a/modules/behavior/select.js b/modules/behavior/select.js index 9a9c0b34d..a3f85b203 100644 --- a/modules/behavior/select.js +++ b/modules/behavior/select.js @@ -13,7 +13,10 @@ import { modeSelect } from '../modes'; -import { osmEntity } from '../osm'; +import { + osmEntity, + osmNote +} from '../osm'; export function behaviorSelect(context) { @@ -115,14 +118,19 @@ export function behaviorSelect(context) { var datum = d3_event.target.__data__ || (lastMouse && lastMouse.target.__data__); var mode = context.mode(); - var entity = datum && datum.properties && datum.properties.entity; + var entity; + + // check if datum is a note + if (datum instanceof osmNote) { entity = datum; } + else { entity = datum && datum.properties && datum.properties.entity; } + if (entity) datum = entity; if (datum && datum.type === 'midpoint') { datum = datum.parents[0]; } - if (!(datum instanceof osmEntity)) { + if (!(datum instanceof osmEntity) && !(datum instanceof osmNote)) { // clicked nothing.. if (!isMultiselect && mode.id !== 'browse') { context.enter(modeBrowse(context)); diff --git a/modules/svg/notes.js b/modules/svg/notes.js index c1c261dcb..bead738fd 100644 --- a/modules/svg/notes.js +++ b/modules/svg/notes.js @@ -3,6 +3,8 @@ import { select as d3_select } from 'd3-selection'; import { svgPointTransform } from './index'; import { services } from '../services'; +import { osmNote } from '../osm'; + import { uiNoteEditor } from '../ui'; export function svgNotes(projection, context, dispatch) { @@ -62,36 +64,6 @@ export function svgNotes(projection, context, dispatch) { .on('end', editOff); } - - function click(which) { - _selected = which; - context.map().centerEase(which.loc); - - layer.selectAll('.note') - .classed('selected', function(d) { return d === _selected; }); - - context.ui().sidebar.show(noteEditor, which); - } - - - function mouseover(which) { - layer.selectAll('.note') - .classed('hovered', function(d) { return d === which; }); - - context.ui().sidebar.show(noteEditor, which); - } - - - function mouseout() { - layer.selectAll('.note') - .classed('hovered', false); - - // TODO: check if the item was clicked. If so, it should remain on the sidebar. - // TODO: handle multi-clicks. Otherwise, utilize behavior/select.js - context.ui().sidebar.hide(); - } - - function update() { var service = getService(); var data = (service ? service.notes(projection) : []); @@ -106,10 +78,7 @@ export function svgNotes(projection, context, dispatch) { // enter var notesEnter = notes.enter() .append('g') - .attr('class', function(d) { return 'note note-' + d.id + ' ' + d.status; }) - .on('click', click) - .on('mouseover', mouseover) - .on('mouseout', mouseout); + .attr('class', function(d) { return 'note note-' + d.id + ' ' + d.status; }); notesEnter .append('use') diff --git a/modules/ui/sidebar.js b/modules/ui/sidebar.js index 8782097d4..9f40fbb60 100644 --- a/modules/ui/sidebar.js +++ b/modules/ui/sidebar.js @@ -3,24 +3,16 @@ import { uiFeatureList } from './feature_list'; import { uiInspector } from './inspector'; import { uiNoteEditor } from './note_editor'; +import { + osmNote +} from '../osm'; + export function uiSidebar(context) { var inspector = uiInspector(context), noteEditor = uiNoteEditor(context), current, - wasNote; - - function isNote(id) { - var isNote = (id && id.slice(0,4) === 'note') ? id.slice(0,4) : null; - // TODO: have a better check, perhaps see if the hover class is activated on a note - if (!isNote && wasNote) { - wasNote = false; - sidebar.hide(); - } else if (isNote) { - wasNote = true; - sidebar.show(noteEditor); - } - } + wasNote = false; function sidebar(selection) { var featureListWrap = selection @@ -34,10 +26,12 @@ export function uiSidebar(context) { .attr('class', 'inspector-hidden inspector-wrap fr'); - function hover(id) { - // isNote(id); TODO: instantiate check if needed - - if (!current && context.hasEntity(id)) { + function hover(what) { + if ((what instanceof osmNote)) { + wasNote = true; + context.ui().sidebar.show(noteEditor, what); + } + else if (!current && context.hasEntity(what)) { featureListWrap .classed('inspector-hidden', true); @@ -45,10 +39,10 @@ export function uiSidebar(context) { .classed('inspector-hidden', false) .classed('inspector-hover', true); - if (inspector.entityID() !== id || inspector.state() !== 'hover') { + if (inspector.entityID() !== what || inspector.state() !== 'hover') { inspector .state('hover') - .entityID(id); + .entityID(what); inspectorWrap .call(inspector); @@ -61,8 +55,10 @@ export function uiSidebar(context) { .classed('inspector-hidden', true); inspector .state('hide'); + } else if (wasNote) { + wasNote = false; + context.ui().sidebar.hide(); } - // } // TODO: - remove if note check logic is moved }