diff --git a/css/25_areas.css b/css/25_areas.css index 9944a2bf4..7ffdfc369 100644 --- a/css/25_areas.css +++ b/css/25_areas.css @@ -10,9 +10,9 @@ path.area.fill { fill: rgba(255, 255, 255, 0.3); fill-rule: evenodd; } -.preset-icon-fill-area { - border: 1px solid rgb(170, 170, 170); - background-color: rgba(170, 170, 170, 0.3); +.preset-icon-fill path.fill { + stroke: rgb(170, 170, 170); + fill: rgba(170, 170, 170, 0.3); } path.shadow.old-multipolygon, @@ -52,20 +52,6 @@ path.fill.tag-barrier-hedge { stroke: rgba(140, 208, 95, 0.3); fill: rgba(140, 208, 95, 0.3); } -.preset-icon-fill-area.tag-landuse, -.preset-icon-fill-area.tag-natural, -.preset-icon-fill-area.tag-leisure-nature_reserve, -.preset-icon-fill-area.tag-leisure-pitch, -.preset-icon-fill-area.tag-leisure-track, -.preset-icon-fill-area.tag-leisure-golf_course, -.preset-icon-fill-area.tag-leisure-garden, -.preset-icon-fill-area.tag-leisure-park, -.preset-icon-fill-area.tag-landuse-forest, -.preset-icon-fill-area.tag-natural-wood, -.preset-icon-fill-area.tag-landuse-grass { - border-color: rgb(140, 208, 95); - background-color: rgba(140, 208, 95, 0.3); -} .pattern-color-forest, .pattern-color-forest_broadleaved, .pattern-color-forest_needleleaved, @@ -98,17 +84,6 @@ path.fill.tag-natural-water { stroke: rgba(119, 211, 222, 0.3); fill: rgba(119, 211, 222, 0.3); } -.preset-icon-fill-area.tag-amenity-fountain, -.preset-icon-fill-area.tag-amenity-swimming_pool, -.preset-icon-fill-area.tag-leisure-swimming_pool, -.preset-icon-fill-area.tag-landuse-aquaculture, -.preset-icon-fill-area.tag-landuse-basin, -.preset-icon-fill-area.tag-landuse-harbour, -.preset-icon-fill-area.tag-landuse-reservoir, -.preset-icon-fill-area.tag-natural-water { - border-color: rgb(119, 211, 222); - background-color: rgba(119, 211, 222, 0.3); -} .pattern-color-waves, .pattern-color-water_standing, .pattern-color-pond { @@ -146,20 +121,19 @@ path.fill.tag-amenity-university { stroke: rgba(255, 255, 148, 0.25); fill: rgba(255, 255, 148, 0.25); } -.preset-icon-fill-area.tag-leisure-pitch.tag-sport-beachvolleyball, -.preset-icon-fill-area.tag-leisure-pitch.tag-sport-baseball, -.preset-icon-fill-area.tag-leisure-pitch.tag-sport-softball, -.preset-icon-fill-area.tag-leisure-track, -.preset-icon-fill-area.tag-natural-beach, -.preset-icon-fill-area.tag-natural-sand, -.preset-icon-fill-area.tag-natural-scrub, -.preset-icon-fill-area.tag-amenity-childcare, -.preset-icon-fill-area.tag-amenity-kindergarten, -.preset-icon-fill-area.tag-amenity-school, -.preset-icon-fill-area.tag-amenity-college, -.preset-icon-fill-area.tag-amenity-university { - border-color: rgb(232, 232, 0); - background-color: rgba(255, 255, 148, 0.25); +.preset-icon-fill path.area.stroke.tag-leisure-pitch.tag-sport-beachvolleyball, +.preset-icon-fill path.area.stroke.tag-leisure-pitch.tag-sport-baseball, +.preset-icon-fill path.area.stroke.tag-leisure-pitch.tag-sport-softball, +.preset-icon-fill path.area.stroke.tag-leisure-track, +.preset-icon-fill path.area.stroke.tag-natural-beach, +.preset-icon-fill path.area.stroke.tag-natural-sand, +.preset-icon-fill path.area.stroke.tag-natural-scrub, +.preset-icon-fill path.area.stroke.tag-amenity-childcare, +.preset-icon-fill path.area.stroke.tag-amenity-kindergarten, +.preset-icon-fill path.area.stroke.tag-amenity-school, +.preset-icon-fill path.area.stroke.tag-amenity-college, +.preset-icon-fill path.area.stroke.tag-amenity-university { + stroke: rgb(232, 232, 0); } .pattern-color-beach, .pattern-color-sand, @@ -177,11 +151,6 @@ path.fill.tag-landuse-residential { stroke: rgba(196, 189, 25, 0.3); fill: rgba(196, 189, 25, 0.3); } -.preset-icon-fill-area.tag-landuse-residential, -.preset-icon-fill-area.tag-status-construction { - border-color: rgb(196, 189, 25); - background: rgba(196, 189, 25, 0.3); -} .pattern-color-construction { fill: rgba(196, 189, 25, 0.3); } @@ -203,14 +172,6 @@ path.fill.tag-landuse-military { stroke: rgba(214, 136, 26, 0.3); fill: rgba(214, 136, 26, 0.3); } -.preset-icon-fill-area.tag-landuse-retail, -.preset-icon-fill-area.tag-landuse-commercial, -.preset-icon-fill-area.tag-landuse-landfill, -.preset-icon-fill-area.tag-military, -.preset-icon-fill-area.tag-landuse-military { - border-color: rgb(214, 136, 26); - background-color: rgba(214, 136, 26, 0.3); -} .pattern-color-landfill { fill: rgba(214, 136, 26, 0.3); } @@ -226,20 +187,14 @@ path.fill.tag-power-plant { stroke: rgba(228, 164, 245, 0.3); fill: rgba(228, 164, 245, 0.3); } -.preset-icon-fill-area.tag-landuse-industrial, -.preset-icon-fill-area.tag-power-plant { - border-color: rgb(228, 164, 245); - background-color: rgba(228, 164, 245, 0.3); -} /* Teal things */ path.stroke.tag-natural-wetland { stroke: rgb(153, 225, 170); } -.preset-icon-fill-area.tag-natural-wetland { - border-color: rgb(153, 225, 170); - background-color: rgba(153, 225, 170, 0.2); +.preset-icon-fill path.area.fill.tag-natural-wetland { + fill: rgba(153, 225, 170, 0.2); } .pattern-color-wetland, .pattern-color-wetland_marsh, @@ -258,12 +213,12 @@ path.stroke.tag-landuse-meadow, path.stroke.tag-landuse-farmland { stroke: rgb(191, 232, 63); } -.preset-icon-fill-area.tag-landuse-cemetery, -.preset-icon-fill-area.tag-landuse-orchard, -.preset-icon-fill-area.tag-landuse-vineyard, -.preset-icon-fill-area.tag-landuse-meadow, -.preset-icon-fill-area.tag-landuse-farmland { - background-color: rgba(191, 232, 63, 0.2); +.preset-icon-fill path.area.fill.tag-landuse-cemetery, +.preset-icon-fill path.area.fill.tag-landuse-orchard, +.preset-icon-fill path.area.fill.tag-landuse-vineyard, +.preset-icon-fill path.area.fill.tag-landuse-meadow, +.preset-icon-fill path.area.fill.tag-landuse-farmland { + fill: rgba(191, 232, 63, 0.2); } .pattern-color-cemetery, .pattern-color-cemetery_christian, @@ -286,9 +241,8 @@ path.fill.tag-landuse-farmyard { stroke: rgba(245, 220, 186, 0.3); fill: rgba(245, 220, 186, 0.3); } -.preset-icon-fill-area.tag-landuse-farmyard { - border-color: rgb(226, 177, 111); - background: rgba(245, 220, 186, 0.3); +.preset-icon-fill path.area.stroke.tag-landuse-farmyard { + stroke: rgb(226, 177, 111); } .pattern-color-farmyard { fill: rgba(245, 220, 186, 0.3); @@ -323,18 +277,6 @@ path.fill.tag-waterway-weir { stroke: rgba(140, 140, 140, 0.5); fill: rgba(140, 140, 140, 0.5); } -.preset-icon-fill-area.tag-amenity-parking, -.preset-icon-fill-area.tag-landuse-railway, -.preset-icon-fill-area.tag-landuse-quarry, -.preset-icon-fill-area.tag-leisure-pitch.tag-sport-basketball, -.preset-icon-fill-area.tag-leisure-pitch.tag-sport-skateboard, -.preset-icon-fill-area.tag-natural-bare_rock, -.preset-icon-fill-area.tag-natural-scree, -.preset-icon-fill-area.tag-waterway-dam, -.preset-icon-fill-area.tag-waterway-weir { - border-color: rgb(170, 170, 170); - background-color: rgba(140, 140, 140, 0.5); -} .pattern-color-quarry { fill: rgba(140, 140, 140, 0.5); } @@ -350,8 +292,8 @@ path.fill.tag-natural-glacier { stroke: rgba(255, 255, 255, 0.3); fill: rgba(255, 255, 255, 0.3); } -.preset-icon-fill-area.tag-natural-cave_entrance, -.preset-icon-fill-area.tag-natural-glacier { - border-color: rgb(170, 170, 170); - background: rgba(170, 170, 170, 0.3); +.preset-icon-fill path.fill.tag-natural-cave_entrance, +.preset-icon-fill path.fill.tag-natural-glacier { + stroke: rgb(170, 170, 170); + fill: rgba(170, 170, 170, 0.3); } diff --git a/css/80_app.css b/css/80_app.css index 8f9994981..9371b5350 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -1001,23 +1001,27 @@ a.hide-toggle { .preset-icon-fill { cursor: inherit; - height: 66%; - width: 66%; margin: auto; position: absolute; - left: 17%; - top: 17%; + width: 100%; + height: 100%; + left: 0; + top: 0; +} +.preset-icon-fill path.area.stroke { + fill: transparent; } -.preset-icon-fill-vertex { - border: 1.5px solid #333; - border-radius: 100%; - background-color: #efefef; +.preset-icon-fill-vertex circle { + stroke-width: 1.5px; + stroke: #333; + fill: #efefef; backface-visibility: hidden; } .preset-icon-frame { width: 100%; height:100%; + position: absolute; } .preset-icon-frame .icon{ position: absolute; @@ -1031,6 +1035,8 @@ a.hide-toggle { .preset-icon { width: 100%; height:100%; + position: absolute; + z-index: 1; } .preset-icon .icon { position: absolute; diff --git a/modules/ui/preset_icon.js b/modules/ui/preset_icon.js index 571b164f9..daaa2110b 100644 --- a/modules/ui/preset_icon.js +++ b/modules/ui/preset_icon.js @@ -23,60 +23,47 @@ export function uiPresetIcon() { return 'maki-marker-stroked'; } + function renderCircleFill(fillEnter) { + var w = 60, h = 60, d = 40; + fillEnter = fillEnter + .append('svg') + .attr('class', 'preset-icon-fill preset-icon-fill-vertex') + .attr('width', w) + .attr('height', h) + .attr('viewBox', '0 0 ' + w + ' ' + h); - function render() { - var selection = d3_select(this); + fillEnter.append('circle') + .attr('cx', w/2) + .attr('cy', h/2) + .attr('r', d/2); + } - var container = selection.selectAll('.preset-icon-container') - .data([0]); + function renderSquareFill(fillEnter) { + var w = 60, h = 60, l = 40, c1 = (w-l)/2, c2 = c1 + l; + fillEnter = fillEnter + .append('svg') + .attr('class', 'preset-icon-fill preset-icon-fill-area') + .attr('width', w) + .attr('height', h) + .attr('viewBox', '0 0 ' + w + ' ' + h); - container = container.enter() - .append('div') - .attr('class', 'preset-icon-container') - .merge(container); + var data = 'M' + c1 + ' ' + c1 + ' L' + c1 + ' ' + c2 + ' L' + c2 + ' ' + c2 + ' L' + c2 + ' ' + c1 + ' Z'; - var p = preset.apply(this, arguments); - var geom = geometry.apply(this, arguments); - var picon = getIcon(p, geom); - var isMaki = /^maki-/.test(picon); - var isTemaki = /^temaki-/.test(picon); - var isFa = /^fa[srb]-/.test(picon); - var isiDIcon = !(isMaki || isTemaki || isFa); - var isCategory = !p.setTags; - var drawLine = geom === 'line' && !isCategory; - var isFramed = (geom === 'area' || drawLine || geom === 'vertex'); + fillEnter.append('path') + .attr('d', data) + .attr('class', 'line area fill'); - var tags = !isCategory ? p.setTags({}, geom) : {}; - for (var k in tags) { - if (tags[k] === '*') { - tags[k] = 'yes'; - } - } - var tagClasses = svgTagClasses().getClassesString(tags, ''); - - var fill = container.selectAll('.preset-icon-fill') - .data([0]); - - fill = fill.enter() - .append('div') - .merge(fill); - - fill - .attr('class', function() { - return 'preset-icon-fill preset-icon-fill-' + geom + ' ' + tagClasses; - }); - - var line = container.selectAll('.preset-icon-line') - .data(drawLine ? [0] : []); - - line.exit() - .remove(); + fillEnter.append('path') + .attr('d', data) + .attr('class', 'line area stroke'); + } + function renderLine(lineEnter) { // draw the line parametrically var w = 60, h = 60, y = 43, l = 36, r = 2.5; var x1 = (w - l)/2, x2 = x1 + l; - var lineEnter = line.enter() + lineEnter = lineEnter .append('svg') .attr('class', 'preset-icon-line') .attr('width', w) @@ -99,6 +86,76 @@ export function uiPresetIcon() { .attr('cx', x2 + 1) .attr('cy', y) .attr('r', r); + } + + + function render() { + var selection = d3_select(this); + + var container = selection.selectAll('.preset-icon-container') + .data([0]); + + container = container.enter() + .append('div') + .attr('class', 'preset-icon-container') + .merge(container); + + var p = preset.apply(this, arguments); + var geom = geometry.apply(this, arguments); + var picon = getIcon(p, geom); + var isMaki = /^maki-/.test(picon); + var isTemaki = /^temaki-/.test(picon); + var isFa = /^fa[srb]-/.test(picon); + var isiDIcon = !(isMaki || isTemaki || isFa); + var isCategory = !p.setTags; + var drawLine = geom === 'line' && !isCategory; + var drawFill = geom === 'area' || geom === 'vertex'; + var isFramed = (drawFill || drawLine); + + var tags = !isCategory ? p.setTags({}, geom) : {}; + for (var k in tags) { + if (tags[k] === '*') { + tags[k] = 'yes'; + } + } + var tagClasses = svgTagClasses().getClassesString(tags, ''); + + + var vertexFill = container.selectAll('.preset-icon-fill-vertex') + .data(geom === 'vertex' ? [0] : []); + + vertexFill.exit() + .remove(); + + var vertexFillEnter = vertexFill.enter(); + renderCircleFill(vertexFillEnter); + vertexFill = vertexFillEnter.merge(vertexFill); + + + var fill = container.selectAll('.preset-icon-fill-area') + .data(geom === 'area' ? [0] : []); + + fill.exit() + .remove(); + + var fillEnter = fill.enter(); + renderSquareFill(fillEnter); + fill = fillEnter.merge(fill); + + fill.selectAll('path.stroke') + .attr('class', 'area stroke ' + tagClasses); + fill.selectAll('path.fill') + .attr('class', 'area fill ' + tagClasses); + + + var line = container.selectAll('.preset-icon-line') + .data(drawLine ? [0] : []); + + line.exit() + .remove(); + + var lineEnter = line.enter(); + renderLine(lineEnter); line = lineEnter.merge(line);