CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-05-23 08:39:56 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #5888 from openstreetmap/dynamic-line-icon-lines

Browse Source 
Dynamic line previews in line preset icons
This commit is contained in:
Quincy Morgan
2019-02-14 12:27:02 -05:00
committed by GitHub
parent 6525bbf154 7c34a85eed
commit ea3a85e88e
71 changed files with 403 additions and 587 deletions
Download Patch File Download Diff File Expand all files Collapse all files
modules/ui/preset_icon.js
+53 -18
View File
@@ -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;
@@ -34,22 +33,17 @@ export function uiPresetIcon() {
var isTemaki = /^temaki-/.test(picon);
var isFa = /^fa[srb]-/.test(picon);
var isPOI = isMaki || isTemaki || isFa;
var isFramed = (geom === 'area' || geom === 'vertex');
var isCategory = !p.setTags;
var drawLine = geom === 'line' && !isCategory;
var isFramed = (geom === 'area' || drawLine || geom === 'vertex');
var tagClasses = '';
for (var k in p.tags) {
var v = p.tags[k];
tagClasses += ' tag-' + k;
if (v !== '*') {
tagClasses += ' tag-' + k + '-' + v;
var tags = !isCategory ? p.setTags({}, geom) : {};
for (var k in tags) {
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]);
@@ -60,9 +54,50 @@ 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')
.data(drawLine ? [0] : []);
line.exit()
.remove();
// 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()
.append('svg')
.attr('class', 'preset-icon-line')
.attr('width', w)
.attr('height', h)
.attr('viewBox', '0 0 ' + w + ' ' + h);
lineEnter.append('path')
.attr('d', 'M' + x1 + ' ' + y + ' L' + x2 + ' ' + y)
.attr('class', 'line casing');
lineEnter.append('path')
.attr('d', 'M' + x1 + ' ' + y + ' L' + x2 + ' ' + y)
.attr('class', 'line stroke');
lineEnter.append('circle')
.attr('class', 'vertex')
.attr('cx', x1 - 1)
.attr('cy', y)
.attr('r', r);
lineEnter.append('circle')
.attr('class', 'vertex')
.attr('cx', x2 + 1)
.attr('cy', y)
.attr('r', r);
line = lineEnter.merge(line);
line.selectAll('path.stroke')
.attr('class', 'line stroke ' + tagClasses);
line.selectAll('path.casing')
.attr('class', 'line casing ' + tagClasses);
var areaFrame = selection.selectAll('.preset-icon-frame')
.data((geom === 'area') ? [0] : []);
@@ -86,13 +121,13 @@ export function uiPresetIcon() {
.merge(icon);
icon
.attr('class', 'preset-icon preset-icon-' +
.attr('class', 'preset-icon ' + geom + '-geom ' + 'preset-icon-' +
(isPOI ? (isFramed ? '24' : '28') : (isFramed ? '44' : '60'))
);
icon.selectAll('svg')
.attr('class', function() {
return 'icon ' + picon + (isPOI ? '' : tagClasses);
return 'icon ' + picon + ' ' + (isPOI && geom !== 'line' ? '' : tagClasses);
});
icon.selectAll('use')