Adjust tag_classes perimeter overrides to style barriers as lines

(closes #5761)

css/25_areas.css

@@ -31,7 +31,6 @@ path.stroke.tag-leisure-track,
 path.stroke.tag-leisure-golf_course,
 path.stroke.tag-leisure-garden,
 path.stroke.tag-leisure-park,
-path.stroke.tag-barrier-hedge,
 path.stroke.tag-landuse-forest,
 path.stroke.tag-landuse-wood,
 path.stroke.tag-landuse-grass {

css/50_misc.css

@@ -95,9 +95,13 @@ path.line.stroke.tag-natural-tree_row {
 
 
 /* barriers and similar */
-path.line.stroke.tag-barrier:not(.tag-barrier-hedge) {
+path.line.stroke.tag-barrier {
     stroke: #ddd;
 }
+path.line.stroke.tag-barrier-hedge {
+    stroke: rgb(140, 208, 95);
+}
+
 path.line.stroke.tag-barrier,
 path.line.stroke.tag-man_made-groyne,
 path.line.stroke.tag-man_made-breakwater {

modules/svg/tag_classes.js

@@ -30,21 +30,29 @@ export function svgTagClasses() {
             }
 
             var t = _tags(entity);
-            var isMultiPolygon = (t.type === 'multipolygon');
-            var shouldRenderLineAsArea = isMultiPolygon && !entity.hasInterestingTags();
-
             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) {  // style multipolygon inner/outers as areas not lines
-                    return (klass === 'line' && shouldRenderLineAsArea) ? 'area' : 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];

test/spec/svg/tag_classes.js

@@ -209,6 +209,25 @@ describe('iD.svgTagClasses', function () {
         expect(selection.attr('class')).to.equal('selected');
     });
 
+    it('stroke overrides: renders areas with barriers as lines', function() {
+        selection
+            .attr('class', 'way area stroke')
+            .datum(iD.osmEntity({tags: {landuse: 'residential', barrier: 'hedge'}}))
+            .call(iD.svgTagClasses());
+        expect(selection.classed('area')).to.be.false;
+        expect(selection.classed('line')).to.be.true;
+    });
+
+    it('stroke overrides: renders simple multipolygon lines as areas', function() {
+        var multipolygon = function () { return { type: 'multipolygon' }; };
+        selection
+            .attr('class', 'way line stroke')
+            .datum(iD.osmEntity({tags: {}}))
+            .call(iD.svgTagClasses().tags(multipolygon));
+        expect(selection.classed('area')).to.be.true;
+        expect(selection.classed('line')).to.be.false;
+    });
+
     it('works on SVG elements', function() {
         selection = d3.select(document.createElementNS('http://www.w3.org/2000/svg', 'g'));
         selection