From f443144fc645bf01d858a762d5b5dcb0882d8177 Mon Sep 17 00:00:00 2001 From: Quincy Morgan Date: Wed, 13 Feb 2019 13:11:27 -0500 Subject: [PATCH] Update preset icons to use same tag classes as map SVG --- css/30_highways.css | 20 ++-- css/40_railways.css | 4 - modules/svg/tag_classes.js | 198 +++++++++++++++++++------------------ modules/ui/preset_icon.js | 30 ++---- 4 files changed, 120 insertions(+), 132 deletions(-) diff --git a/css/30_highways.css b/css/30_highways.css index 4da6d1030..7c70ced90 100644 --- a/css/30_highways.css +++ b/css/30_highways.css @@ -33,7 +33,7 @@ path.line.stroke.tag-highway { } .preset-icon .icon.tag-highway-motorway, -.preset-icon .icon.tag-highway-motorway-link { +.preset-icon .icon.tag-highway-motorway_link { color: #CF2081; fill: #70372f; } @@ -49,7 +49,7 @@ path.line.casing.tag-motorway { } .preset-icon .icon.tag-highway-trunk, -.preset-icon .icon.tag-highway-trunk-link { +.preset-icon .icon.tag-highway-trunk_link { color: #DD2F22; fill: #70372f; } @@ -65,7 +65,7 @@ path.line.casing.tag-trunk { } .preset-icon .icon.tag-highway-primary, -.preset-icon .icon.tag-highway-primary-link { +.preset-icon .icon.tag-highway-primary_link { color: #F99806; fill: #70372f; } @@ -81,7 +81,7 @@ path.line.casing.tag-primary { } .preset-icon .icon.tag-highway-secondary, -.preset-icon .icon.tag-highway-secondary-link { +.preset-icon .icon.tag-highway-secondary_link { color: #F3F312; fill: #70372f; } @@ -97,7 +97,7 @@ path.line.casing.tag-secondary { } .preset-icon .icon.tag-highway-tertiary, -.preset-icon .icon.tag-highway-tertiary-link { +.preset-icon .icon.tag-highway-tertiary_link { color: #FFF9B3; fill: #70372f; } @@ -113,7 +113,7 @@ path.line.casing.tag-tertiary { } .legacy-carto .preset-icon .icon.tag-highway-motorway, -.legacy-carto .preset-icon .icon.tag-highway-motorway-link { +.legacy-carto .preset-icon .icon.tag-highway-motorway_link { color: #58a9ed; fill: #2c5476; } @@ -129,7 +129,7 @@ path.line.casing.tag-tertiary { } .legacy-carto .preset-icon .icon.tag-highway-trunk, -.legacy-carto .preset-icon .icon.tag-highway-trunk-link { +.legacy-carto .preset-icon .icon.tag-highway-trunk_link { color: #8cd05f; fill: #46682f; } @@ -145,7 +145,7 @@ path.line.casing.tag-tertiary { } .legacy-carto .preset-icon .icon.tag-highway-primary, -.legacy-carto .preset-icon .icon.tag-highway-primary-link { +.legacy-carto .preset-icon .icon.tag-highway-primary_link { color: #e06d5f; fill: #70372f; } @@ -161,7 +161,7 @@ path.line.casing.tag-tertiary { } .legacy-carto .preset-icon .icon.tag-highway-secondary, -.legacy-carto .preset-icon .icon.tag-highway-secondary-link { +.legacy-carto .preset-icon .icon.tag-highway-secondary_link { color: #eab056; fill: #75582b; } @@ -177,7 +177,7 @@ path.line.casing.tag-tertiary { } .legacy-carto .preset-icon .icon.tag-highway-tertiary, -.legacy-carto .preset-icon .icon.tag-highway-tertiary-link { +.legacy-carto .preset-icon .icon.tag-highway-tertiary_link { color: #ffff7e; fill: #7f7f3f; } diff --git a/css/40_railways.css b/css/40_railways.css index e8add8737..549f5c62d 100644 --- a/css/40_railways.css +++ b/css/40_railways.css @@ -59,10 +59,6 @@ path.line.stroke.tag-railway-abandoned { } -.preset-icon .icon.tag-railway-subway { - color: #222; - fill: #bbb; -} path.line.casing.tag-railway-subway { stroke: #222; } diff --git a/modules/svg/tag_classes.js b/modules/svg/tag_classes.js index 9d3b4a158..863f42d0f 100644 --- a/modules/svg/tag_classes.js +++ b/modules/svg/tag_classes.js @@ -23,111 +23,15 @@ export function svgTagClasses() { var tagClasses = function(selection) { selection.each(function tagClassesEach(entity) { var value = this.className; - var primary, status; if (value.baseVal !== undefined) { value = value.baseVal; } var t = _tags(entity); - var i, k, v; - // in some situations we want to render perimeter strokes a certain way - var overrideGeometry; - if (/\bstroke\b/.test(value)) { - if (!!t.barrier && t.barrier !== 'no') { - overrideGeometry = 'line'; - } else if (t.type === 'multipolygon' && !entity.hasInterestingTags()) { - overrideGeometry = 'area'; - } - } + var computed = tagClasses.getClassesString(t, value); - // preserve base classes (nothing with `tag-`) - var classes = value.trim().split(/\s+/) - .filter(function(klass) { - return klass.length && !/^tag-/.test(klass); - }) - .map(function(klass) { // special overrides for some perimeter strokes - return (klass === 'line' || klass === 'area') ? (overrideGeometry || klass) : klass; - }); - - - - // pick at most one primary classification tag.. - for (i = 0; i < primaries.length; i++) { - k = primaries[i]; - v = t[k]; - if (!v || v === 'no') continue; - - if (k === 'piste:type') { // avoid a ':' in the class name - k = 'piste'; - } - - primary = k; - if (statuses.indexOf(v) !== -1) { // e.g. `railway=abandoned` - status = v; - classes.push('tag-' + k); - } else { - classes.push('tag-' + k); - classes.push('tag-' + k + '-' + v); - } - - break; - } - - // add at most one status tag, only if relates to primary tag.. - if (!status) { - for (i = 0; i < statuses.length; i++) { - k = statuses[i]; - v = t[k]; - if (!v || v === 'no') continue; - - if (v === 'yes') { // e.g. `railway=rail + abandoned=yes` - status = k; - } - else if (primary && primary === v) { // e.g. `railway=rail + abandoned=railway` - status = k; - } else if (!primary && primaries.indexOf(v) !== -1) { // e.g. `abandoned=railway` - status = k; - primary = v; - classes.push('tag-' + v); - } // else ignore e.g. `highway=path + abandoned=railway` - - if (status) break; - } - } - - if (status) { - classes.push('tag-status'); - classes.push('tag-status-' + status); - } - - // add any secondary tags - for (i = 0; i < secondaries.length; i++) { - k = secondaries[i]; - v = t[k]; - if (!v || v === 'no') continue; - classes.push('tag-' + k); - classes.push('tag-' + k + '-' + v); - } - - // For highways, look for surface tagging.. - if (primary === 'highway' || primary === 'aeroway') { - var paved = (t.highway !== 'track'); - for (k in t) { - v = t[k]; - if (k in osmPavedTags) { - paved = !!osmPavedTags[k][v]; - break; - } - } - if (!paved) { - classes.push('tag-unpaved'); - } - } - - - var computed = classes.join(' ').trim(); if (computed !== value) { d3_select(this).attr('class', computed); } @@ -135,6 +39,106 @@ export function svgTagClasses() { }; + tagClasses.getClassesString = function(t, value) { + var primary, status; + var i, k, v; + + // in some situations we want to render perimeter strokes a certain way + var overrideGeometry; + if (/\bstroke\b/.test(value)) { + if (!!t.barrier && t.barrier !== 'no') { + overrideGeometry = 'line'; + } else if (t.type === 'multipolygon' && !entity.hasInterestingTags()) { + overrideGeometry = 'area'; + } + } + + // preserve base classes (nothing with `tag-`) + var classes = value.trim().split(/\s+/) + .filter(function(klass) { + return klass.length && !/^tag-/.test(klass); + }) + .map(function(klass) { // special overrides for some perimeter strokes + return (klass === 'line' || klass === 'area') ? (overrideGeometry || klass) : klass; + }); + + // pick at most one primary classification tag.. + for (i = 0; i < primaries.length; i++) { + k = primaries[i]; + v = t[k]; + if (!v || v === 'no') continue; + + if (k === 'piste:type') { // avoid a ':' in the class name + k = 'piste'; + } + + primary = k; + if (statuses.indexOf(v) !== -1) { // e.g. `railway=abandoned` + status = v; + classes.push('tag-' + k); + } else { + classes.push('tag-' + k); + classes.push('tag-' + k + '-' + v); + } + + break; + } + + // add at most one status tag, only if relates to primary tag.. + if (!status) { + for (i = 0; i < statuses.length; i++) { + k = statuses[i]; + v = t[k]; + if (!v || v === 'no') continue; + + if (v === 'yes') { // e.g. `railway=rail + abandoned=yes` + status = k; + } + else if (primary && primary === v) { // e.g. `railway=rail + abandoned=railway` + status = k; + } else if (!primary && primaries.indexOf(v) !== -1) { // e.g. `abandoned=railway` + status = k; + primary = v; + classes.push('tag-' + v); + } // else ignore e.g. `highway=path + abandoned=railway` + + if (status) break; + } + } + + if (status) { + classes.push('tag-status'); + classes.push('tag-status-' + status); + } + + // add any secondary tags + for (i = 0; i < secondaries.length; i++) { + k = secondaries[i]; + v = t[k]; + if (!v || v === 'no') continue; + classes.push('tag-' + k); + classes.push('tag-' + k + '-' + v); + } + + // For highways, look for surface tagging.. + if (primary === 'highway' || primary === 'aeroway') { + var paved = (t.highway !== 'track'); + for (k in t) { + v = t[k]; + if (k in osmPavedTags) { + paved = !!osmPavedTags[k][v]; + break; + } + } + if (!paved) { + classes.push('tag-unpaved'); + } + } + + return classes.join(' ').trim(); + } + + tagClasses.tags = function(val) { if (!arguments.length) return _tags; _tags = val; diff --git a/modules/ui/preset_icon.js b/modules/ui/preset_icon.js index a241049fc..e821961a9 100644 --- a/modules/ui/preset_icon.js +++ b/modules/ui/preset_icon.js @@ -1,9 +1,8 @@ import { select as d3_select } from 'd3-selection'; -import { svgIcon } from '../svg'; +import { svgIcon, svgTagClasses } from '../svg'; import { utilFunctor } from '../util'; - export function uiPresetIcon() { var preset, geometry; @@ -38,24 +37,13 @@ export function uiPresetIcon() { var drawLine = geom === 'line' && !isCategory; var isFramed = (geom === 'area' || drawLine || geom === 'vertex'); - var tagClasses = ''; - var tags = isCategory ? p.tags : p.setTags({}, geom); + var tags = !isCategory ? p.setTags({}, geom) : {}; for (var k in tags) { - if (k === 'piste:type') { // avoid a ':' in the class name - k = 'piste'; - } - var v = tags[k]; - tagClasses += ' tag-' + k; - if (v !== '*') { - tagClasses += ' tag-' + k + '-' + v; + if (tags[k] === '*') { + tags[k] = 'yes'; } } - - // if the preset includes a `building_area` field, class it as a building - if (p.fields && p.fields.filter(function(d) { return d.id === 'building_area'; }).length) { - tagClasses += ' tag-building'; - } - + var tagClasses = svgTagClasses().getClassesString(tags, ''); var fill = selection.selectAll('.preset-icon-fill') .data([0]); @@ -66,7 +54,7 @@ export function uiPresetIcon() { fill .attr('class', function() { - return 'preset-icon-fill preset-icon-fill-' + geom + tagClasses; + return 'preset-icon-fill preset-icon-fill-' + geom + ' ' + tagClasses; }); var line = selection.selectAll('.preset-icon-line') @@ -86,10 +74,10 @@ export function uiPresetIcon() { line.append('path') .attr('d', 'M0 13.5 L40 13.5') - .attr('class', 'line casing' + tagClasses); + .attr('class', 'line casing ' + tagClasses); line.append('path') .attr('d', 'M0 13.5 L40 13.5') - .attr('class', 'line stroke' + tagClasses); + .attr('class', 'line stroke ' + tagClasses); var areaFrame = selection.selectAll('.preset-icon-frame') @@ -120,7 +108,7 @@ export function uiPresetIcon() { icon.selectAll('svg') .attr('class', function() { - return 'icon ' + picon + (isPOI && geom !== 'line' ? '' : tagClasses); + return 'icon ' + picon + ' ' + (isPOI && geom !== 'line' ? '' : tagClasses); }); icon.selectAll('use')