diff --git a/css/65_data.css b/css/65_data.css index 6be709a5f..1cf8de123 100644 --- a/css/65_data.css +++ b/css/65_data.css @@ -60,12 +60,18 @@ } .layer-mapdata path.shadow { + pointer-events: stroke; stroke: #f6634f; stroke-width: 16; stroke-opacity: 0; fill: none; } -.layer-mapdata path.shadow.related:not(.selected), +.layer-mapdata path.MultiPoint.shadow, +.layer-mapdata path.Point.shadow { + pointer-events: fill; + fill: #f6634f; + fill-opacity: 0; +} .layer-mapdata path.shadow.hover:not(.selected) { stroke-opacity: 0.4; } @@ -97,6 +103,10 @@ .layer-mapdata text.label { fill: #ff26d4; } +.layer-mapdata text.label.hover, +.layer-mapdata text.label.selected { + fill: #f6634f; +} .layer-mapdata text.label-halo { opacity: 0.7; stroke: #000; diff --git a/modules/behavior/hover.js b/modules/behavior/hover.js index d086ac72c..9b2000e62 100644 --- a/modules/behavior/hover.js +++ b/modules/behavior/hover.js @@ -110,13 +110,32 @@ export function behaviorHover(context) { _selection.selectAll('.hover-suppressed') .classed('hover-suppressed', false); - var entity; - if (datum instanceof osmNote || datum instanceof osmEntity) { + // What are we hovering over? + var entity, selector; + if (datum && datum.__featurehash__) { entity = datum; - } else { - entity = datum && datum.properties && datum.properties.entity; + selector = '.data' + datum.__featurehash__; + + } else if (datum instanceof osmNote) { + entity = datum; + selector = '.note-' + datum.id; + + } else if (datum instanceof osmEntity) { + entity = datum; + selector = '.' + entity.id; + if (entity.type === 'relation') { + entity.members.forEach(function(member) { selector += ', .' + member.id; }); + } + + } else if (datum && datum.properties && (datum.properties.entity instanceof osmEntity)) { + entity = datum.properties.entity; + selector = '.' + entity.id; + if (entity.type === 'relation') { + entity.members.forEach(function(member) { selector += ', .' + member.id; }); + } } + // Update hover state and dispatch event if (entity && entity.id !== _newId) { // If drawing a way, don't hover on a node that was just placed. #3974 var mode = context.mode() && context.mode().id; @@ -125,24 +144,11 @@ export function behaviorHover(context) { return; } - var selector = (datum instanceof osmNote) ? 'note-' + entity.id : '.' + entity.id; - - if (entity.type === 'relation') { - entity.members.forEach(function(member) { - selector += ', .' + member.id; - }); - } - var suppressed = _altDisables && d3_event && d3_event.altKey; - _selection.selectAll(selector) .classed(suppressed ? 'hover-suppressed' : 'hover', true); - if (datum instanceof osmNote) { - dispatch.call('hover', this, !suppressed && entity); - } else { - dispatch.call('hover', this, !suppressed && entity.id); - } + dispatch.call('hover', this, !suppressed && entity); } else { dispatch.call('hover', this, null); diff --git a/modules/svg/data.js b/modules/svg/data.js index 80f97b1d3..b902a7648 100644 --- a/modules/svg/data.js +++ b/modules/svg/data.js @@ -170,8 +170,9 @@ export function svgData(projection, context, dispatch) { return [ 'data' + d.__featurehash__, d.geometry.type, + isPolygon(d) ? 'area' : '', d.__layerID__ || '' - ].join(' '); + ].filter(Boolean).join(' '); } @@ -228,7 +229,7 @@ export function svgData(projection, context, dispatch) { .attr('d', getPath); - // Draw fill, shadow, stroke layers + // Draw fill, shadow, stroke layers var datagroups = layer .selectAll('g.datagroup') .data(['fill', 'shadow', 'stroke']); @@ -239,7 +240,7 @@ export function svgData(projection, context, dispatch) { .merge(datagroups); - // Draw paths + // Draw paths var pathData = { shadow: geoData, stroke: geoData, @@ -259,8 +260,7 @@ export function svgData(projection, context, dispatch) { .append('path') .attr('class', function(d) { var datagroup = this.parentNode.__data__; - var area = (datagroup === 'fill' ? 'area ' : ''); - return 'pathdata ' + area + datagroup + ' ' + featureClasses(d); + return 'pathdata ' + datagroup + ' ' + featureClasses(d); }) .attr('clip-path', function(d) { var datagroup = this.parentNode.__data__; diff --git a/modules/ui/sidebar.js b/modules/ui/sidebar.js index 02035d905..cb972eb10 100644 --- a/modules/ui/sidebar.js +++ b/modules/ui/sidebar.js @@ -2,7 +2,7 @@ import _throttle from 'lodash-es/throttle'; import { selectAll as d3_selectAll } from 'd3-selection'; -import { osmNote } from '../osm'; +import { osmEntity, osmNote } from '../osm'; import { uiFeatureList } from './feature_list'; import { uiInspector } from './inspector'; import { uiNoteEditor } from './note_editor'; @@ -13,7 +13,6 @@ export function uiSidebar(context) { var noteEditor = uiNoteEditor(context); var _current; var _wasNote = false; - // var layer = d3_select(null); function sidebar(selection) { @@ -22,26 +21,27 @@ export function uiSidebar(context) { .attr('class', 'feature-list-pane') .call(uiFeatureList(context)); - var inspectorWrap = selection .append('div') .attr('class', 'inspector-hidden inspector-wrap fr'); - function hover(what) { - if ((what instanceof osmNote) && (context.mode().id !== 'drag-note')) { - // TODO: figure out why `what` isn't an updated note. Won't hover since .loc doesn't match - _wasNote = true; - var notes = d3_selectAll('.note'); - notes - .classed('hover', function(d) { return d === what; }); + function hover(datum) { + if (datum && datum.__featurehash__) { // hovering on data + console.log ('hover on data ' + datum.__featurehash__); + // show something - sidebar.show(noteEditor.note(what)); + } else if (datum instanceof osmNote) { + if (context.mode().id === 'drag-note') return; + _wasNote = true; + + sidebar + .show(noteEditor.note(datum)); selection.selectAll('.sidebar-component') .classed('inspector-hover', true); - } else if (!_current && context.hasEntity(what)) { + } else if (!_current && (datum instanceof osmEntity)) { featureListWrap .classed('inspector-hidden', true); @@ -49,10 +49,10 @@ export function uiSidebar(context) { .classed('inspector-hidden', false) .classed('inspector-hover', true); - if (inspector.entityID() !== what || inspector.state() !== 'hover') { + if (inspector.entityID() !== datum.id || inspector.state() !== 'hover') { inspector .state('hover') - .entityID(what); + .entityID(datum.id); inspectorWrap .call(inspector);