diff --git a/modules/ui/inspector.js b/modules/ui/inspector.js index cfc24ef05..7b35b83cf 100644 --- a/modules/ui/inspector.js +++ b/modules/ui/inspector.js @@ -3,6 +3,7 @@ import { EntityEditor } from './entity_editor'; import { PresetList } from './preset_list'; import { ViewOnOSM } from './view_on_osm'; + export function Inspector(context) { var presetList = PresetList(context), entityEditor = EntityEditor(context), @@ -21,20 +22,24 @@ export function Inspector(context) { .entityID(entityID) .on('choose', showList); - var $wrap = selection.selectAll('.panewrap') + var wrap = selection.selectAll('.panewrap') .data([0]); - var $enter = $wrap.enter().append('div') + var enter = wrap.enter() + .append('div') .attr('class', 'panewrap'); - $enter.append('div') + enter + .append('div') .attr('class', 'preset-list-pane pane'); - $enter.append('div') + enter + .append('div') .attr('class', 'entity-editor-pane pane'); - var $presetPane = $wrap.select('.preset-list-pane'); - var $editorPane = $wrap.select('.entity-editor-pane'); + wrap = wrap.merge(enter); + var presetPane = wrap.selectAll('.preset-list-pane'); + var editorPane = wrap.selectAll('.entity-editor-pane'); var graph = context.graph(), entity = context.entity(entityID), @@ -43,41 +48,43 @@ export function Inspector(context) { entity.isHighwayIntersection(graph); if (showEditor) { - $wrap.style('right', '0%'); - $editorPane.call(entityEditor); + wrap.style('right', '0%'); + editorPane.call(entityEditor); } else { - $wrap.style('right', '-100%'); - $presetPane.call(presetList); + wrap.style('right', '-100%'); + presetPane.call(presetList); } - var $footer = selection.selectAll('.footer') + var footer = selection.selectAll('.footer') .data([0]); - $footer.enter().append('div') + footer.enter() + .append('div') .attr('class', 'footer'); - selection.select('.footer') - .call(ViewOnOSM(context) - .entityID(entityID)); + selection.selectAll('.footer') + .call(ViewOnOSM(context).entityID(entityID)); + function showList(preset) { - $wrap.transition() + wrap.transition() .styleTween('right', function() { return d3.interpolate('0%', '-100%'); }); - $presetPane.call(presetList - .preset(preset) - .autofocus(true)); + presetPane + .call(presetList.preset(preset).autofocus(true)); } + function setPreset(preset) { - $wrap.transition() + wrap.transition() .styleTween('right', function() { return d3.interpolate('-100%', '0%'); }); - $editorPane.call(entityEditor - .preset(preset)); + editorPane + .call(entityEditor.preset(preset)); } } + inspector.state = function(_) { if (!arguments.length) return state; state = _; @@ -85,12 +92,14 @@ export function Inspector(context) { return inspector; }; + inspector.entityID = function(_) { if (!arguments.length) return entityID; entityID = _; return inspector; }; + inspector.newFeature = function(_) { if (!arguments.length) return newFeature; newFeature = _; diff --git a/modules/ui/preset_icon.js b/modules/ui/preset_icon.js index e0defc8c8..7750dde89 100644 --- a/modules/ui/preset_icon.js +++ b/modules/ui/preset_icon.js @@ -3,6 +3,7 @@ import { functor } from '../util/index'; import { Icon } from '../svg/index'; import { featureIcons } from '../../data/index'; + export function PresetIcon() { var preset, geometry; @@ -14,10 +15,12 @@ export function PresetIcon() { var selection = d3.select(this), p = preset.apply(this, arguments), geom = geometry.apply(this, arguments), - icon = p.icon || (geom === 'line' ? 'other-line' : 'marker-stroked'), - maki = featureIcons.hasOwnProperty(icon + '-24'); + picon = p.icon || (geom === 'line' ? 'other-line' : 'marker-stroked'), + isMaki = featureIcons.hasOwnProperty(picon + '-24'); - if (icon === 'dentist') maki = true; // workaround for dentist icon missing in `maki-sprite.json` + if (picon === 'dentist') { + isMaki = true; // workaround for dentist icon missing in `maki-sprite.json` + } function tag_classes(p) { var s = ''; @@ -30,53 +33,61 @@ export function PresetIcon() { return s; } - var $fill = selection.selectAll('.preset-icon-fill') + var fill = selection.selectAll('.preset-icon-fill') .data([0]); - $fill.enter().append('div'); - - $fill.attr('class', function() { - return 'preset-icon-fill preset-icon-fill-' + geom + tag_classes(p); - }); - - var $frame = selection.selectAll('.preset-icon-frame') - .data([0]); - - $frame.enter() + fill = fill.enter() .append('div') - .call(Icon('#preset-icon-frame')); + .merge(fill); - $frame.attr('class', function() { - return 'preset-icon-frame ' + (geom === 'area' ? '' : 'hide'); - }); - - - var $icon = selection.selectAll('.preset-icon') - .data([0]); - - $icon.enter() - .append('div') - .attr('class', 'preset-icon') - .call(Icon('')); - - $icon - .attr('class', 'preset-icon preset-icon-' + (maki ? '32' : (geom === 'area' ? '44' : '60'))); - - $icon.selectAll('svg') + fill .attr('class', function() { - return 'icon ' + icon + tag_classes(p); + return 'preset-icon-fill preset-icon-fill-' + geom + tag_classes(p); }); - $icon.selectAll('use') // workaround: maki parking-24 broken? - .attr('href', '#' + icon + (maki ? ( icon === 'parking' ? '-18' : '-24') : '')); + var frame = selection.selectAll('.preset-icon-frame') + .data([0]); + + frame = frame.enter() + .append('div') + .call(Icon('#preset-icon-frame')) + .merge(frame); + + frame + .attr('class', function() { + return 'preset-icon-frame ' + (geom === 'area' ? '' : 'hide'); + }); + + + var icon = selection.selectAll('.preset-icon') + .data([0]); + + icon = icon.enter() + .append('div') + .attr('class', 'preset-icon') + .call(Icon('')) + .merge(icon); + + icon + .attr('class', 'preset-icon preset-icon-' + (isMaki ? '32' : (geom === 'area' ? '44' : '60'))); + + icon.selectAll('svg') + .attr('class', function() { + return 'icon ' + picon + tag_classes(p); + }); + + icon.selectAll('use') // workaround: maki parking-24 broken? + .attr('href', '#' + picon + (isMaki ? (picon === 'parking' ? '-18' : '-24') : '')); } + presetIcon.preset = function(_) { if (!arguments.length) return preset; preset = functor(_); return presetIcon; }; + presetIcon.geometry = function(_) { if (!arguments.length) return geometry; geometry = functor(_); diff --git a/modules/ui/preset_list.js b/modules/ui/preset_list.js index ee0ab8857..946fe5856 100644 --- a/modules/ui/preset_list.js +++ b/modules/ui/preset_list.js @@ -9,12 +9,14 @@ import { Icon } from '../svg/index'; import { PresetIcon } from './preset_icon'; import { TagReference } from './tag_reference'; + export function PresetList(context) { var dispatch = d3.dispatch('choose'), id, currentPreset, autofocus = false; + function presetList(selection) { var entity = context.entity(id), geometry = context.geometry(id); @@ -118,6 +120,7 @@ export function PresetList(context) { .call(drawList, context.presets().defaults(geometry, 36)); } + function drawList(list, presets) { var collection = presets.collection.map(function(preset) { return preset.members ? CategoryItem(preset) : PresetItem(preset); @@ -126,22 +129,22 @@ export function PresetList(context) { var items = list.selectAll('.preset-list-item') .data(collection, function(d) { return d.preset.id; }); - items.enter().append('div') - .attr('class', function(item) { return 'preset-list-item preset-' + item.preset.id.replace('/', '-'); }) - .classed('current', function(item) { return item.preset === currentPreset; }) - .each(function(item) { - d3.select(this).call(item); - }) - .style('opacity', 0) - .transition() - .style('opacity', 1); - items.order(); items.exit() .remove(); + + items.enter() + .append('div') + .attr('class', function(item) { return 'preset-list-item preset-' + item.preset.id.replace('/', '-'); }) + .classed('current', function(item) { return item.preset === currentPreset; }) + .each(function(item) { d3.select(this).call(item); }) + .style('opacity', 0) + .transition() + .style('opacity', 1); } + function CategoryItem(preset) { var box, sublist, shown = false; @@ -206,6 +209,7 @@ export function PresetList(context) { return item; } + function PresetItem(preset) { function item(selection) { var wrap = selection.append('div') @@ -246,12 +250,14 @@ export function PresetList(context) { return item; } + presetList.autofocus = function(_) { if (!arguments.length) return autofocus; autofocus = _; return presetList; }; + presetList.entityID = function(_) { if (!arguments.length) return id; id = _; @@ -259,6 +265,7 @@ export function PresetList(context) { return presetList; }; + presetList.preset = function(_) { if (!arguments.length) return currentPreset; currentPreset = _;