CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-05-15 21:48:20 +02:00
Code Issues Packages Projects Releases Wiki Activity

Adds hover-highlighting for relations in the raw membership list

Browse Source 
Moves hover-highlighting behavior to its own function
Hover-highlighting now correctly highlights all members of the target relation
This commit is contained in:
Quincy Morgan
2018-10-24 22:17:28 -07:00
parent 7709a7ef3f
commit 81feb1cd99
4 changed files with 35 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
modules/ui/entity_highlight.js
+17
View File
@@ -0,0 +1,17 @@
import _forEach from 'lodash-es/forEach';
export function highlightEntity(context, entity, highlighted) {
// highlight the member feature in the map while hovering on the list item
var selectorPrefix = entity.type === 'node' ? 'g.' : 'path.';
context.surface().selectAll(selectorPrefix+entity.id).classed('highlighted', highlighted);
if (entity.members) {
// recursively highlight members so that relations will appear highlighted
_forEach(entity.members, function(member){
if (member.id && context.hasEntity(member.id)) {
highlightEntity(context, context.entity(member.id), highlighted);
}
});
}
}
modules/ui/raw_member_editor.js
+4 -6
View File
@@ -7,6 +7,7 @@ import { d3combobox as d3_combobox } from '../lib/d3.combobox.js';
import { t } from '../util/locale';
import { actionChangeMember, actionDeleteMember } from '../actions';
import { highlightEntity } from './entity_highlight';
import { modeBrowse, modeSelect } from '../modes';
import { osmEntity } from '../osm';
import { svgIcon } from '../svg';
@@ -37,8 +38,7 @@ export function uiRawMemberEditor(context) {
context.map().zoomTo(entity);
// highlight the feature in case it wasn't previously on-screen
var selectorPrefix = d.type === 'node' ? 'g.' : 'path.';
context.surface().selectAll(selectorPrefix+d.id).classed('highlighted', true);
highlightEntity(context, d.member, true);
}
@@ -134,13 +134,11 @@ export function uiRawMemberEditor(context) {
.each(function(d) {
if (d.member) {
// highlight the member feature in the map while hovering on the list item
var selectorPrefix = d.type === 'node' ? 'g.' : 'path.';
d3_select(this).on('mouseover', function() {
context.surface().selectAll(selectorPrefix+d.id).classed('highlighted', true);
highlightEntity(context, d.member, true);
});
d3_select(this).on('mouseout', function() {
context.surface().selectAll(selectorPrefix+d.id).classed('highlighted', false);
highlightEntity(context, d.member, false);
});
var label = d3_select(this).append('label')
modules/ui/raw_membership_editor.js
+10
View File
@@ -19,6 +19,7 @@ import {
actionDeleteMember
} from '../actions';
import { highlightEntity } from './entity_highlight';
import { modeSelect } from '../modes';
import { osmEntity, osmRelation } from '../osm';
import { services } from '../services';
@@ -173,6 +174,15 @@ export function uiRawMembershipEditor(context) {
.append('li')
.attr('class', 'member-row member-row-normal form-field');
enter.each(function(d){
d3_select(this).on('mouseover', function() {
highlightEntity(context, d.relation, true);
});
d3_select(this).on('mouseout', function() {
highlightEntity(context, d.relation, false);
});
});
var label = enter
.append('label')
.attr('class', 'form-label')
modules/ui/selection_list.js
+4 -4
View File
@@ -4,6 +4,7 @@ import {
} from 'd3-selection';
import { t } from '../util/locale';
import { highlightEntity } from './entity_highlight';
import { modeSelect } from '../modes';
import { osmEntity } from '../osm';
import { svgIcon } from '../svg';
@@ -69,13 +70,12 @@ export function uiSelectionList(context, selectedIDs) {
enter
.each(function(d) {
// highlight the feature in the map while hovering on the list item
var selectorPrefix = d.type === 'node' ? 'g.' : 'path.';
d3_select(this).on('mouseover', function() {
context.surface().selectAll(selectorPrefix+d.id).classed('highlighted', true);
highlightEntity(context, d, true);
});
d3_select(this).on('mouseout', function() {
context.surface().selectAll(selectorPrefix+d.id).classed('highlighted', false);
highlightEntity(context, d, false);
});
});