CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-02-12 16:52:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Line preset icons:

Browse Source 
- Render vertices with SVG
- Add viewBox to SVG
- Don't reload static parts of the SVG on every update
- Use dimensions that are friendly for low-res displays
- Use nicer-looking stroke dash patterns for ferry routes and railways
This commit is contained in:
Quincy Morgan
2019-02-14 09:40:17 -05:00
parent ed95fafac9
commit d63430e66a
4 changed files with 41 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
css/40_railways.css
View File

@@ -33,7 +33,9 @@ path.line.stroke.tag-railway {
stroke-width: 2;
stroke-dasharray: 6,6;
}
.preset-icon-line path.line.stroke.tag-railway:not(.tag-status) {
stroke-dasharray: 6;
}
/* styles */
path.line.casing.tag-railway {

3
css/50_misc.css
View File

@@ -73,7 +73,8 @@ path.line.stroke.tag-route-ferry {
.low-zoom path.line.shadow.tag-route-ferry {
stroke-width: 12;
}
.low-zoom path.line.stroke.tag-route-ferry {
.low-zoom path.line.stroke.tag-route-ferry,
.preset-icon-line path.line.stroke.tag-route-ferry {
stroke-width: 2;
stroke-dasharray: 6,4;
}

31
css/80_app.css
View File

@@ -951,39 +951,22 @@ a.hide-toggle {
.preset-icon-line {
margin: auto;
position: absolute;
left: 8px;
top: 30px;
width: 44px;
}
.preset-icon-line svg {
left: 2px;
right: 2px;
left: 0;
top: 0;
}
.preset-icon-line path.line {
cursor: inherit;
}
.preset-icon-line circle.vertex {
fill: #fff;
stroke: rgba(0, 0, 0, 0.25);
}
/* use a consistent stroke width */
.preset-icon-line path.line.stroke {
stroke-width: 2 !important;
}
.preset-icon-line path.line.casing {
stroke-width: 3.5 !important;
}
.preset-icon-line .vertex {
width: 6px;
height: 6px;
background: #fff;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.25);
position: absolute;
top: 10.5px;
}
.preset-icon-line .vertex.vertex-left {
left: 0;
}
.preset-icon-line .vertex.vertex-right {
right: 0;
stroke-width: 4 !important;
}
.preset-icon-fill-area {

47
modules/ui/preset_icon.js
View File

@@ -63,29 +63,40 @@ export function uiPresetIcon() {
line.exit()
.remove();
line = line.enter()
.append('div')
// draw the line parametrically
var w = 60, h = 60, y = 43, l = 38, r = 3;
var x1 = (w - l)/2, x2 = x1 + l;
var lineEnter = line.enter()
.append('svg')
.attr('class', 'preset-icon-line')
.merge(line);
.attr('width', w)
.attr('height', h)
.attr('viewBox', '0 0 ' + w + ' ' + h);
line.html('');
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)
.attr('cy', y)
.attr('r', r);
lineEnter.append('circle')
.attr('class', 'vertex')
.attr('cx', x2)
.attr('cy', y)
.attr('r', r);
line.append('div')
.attr('class', 'vertex vertex-left');
line.append('div')
.attr('class', 'vertex vertex-right');
line = lineEnter.merge(line);
var lineSvg = line.append('svg')
.attr('width', 40)
.attr('height', 20)
.merge(line);
lineSvg.append('path')
.attr('d', 'M0 13.5 L40 13.5')
.attr('class', 'line casing ' + tagClasses);
lineSvg.append('path')
.attr('d', 'M0 13.5 L40 13.5')
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')