CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-03-06 11:21:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Render errors like points with icons

Browse Source 
This allows more diverse representation of the error subject at a glance
than relying on colour alone.

However, it would be good to have a generic error icon that can contain
icons which is differentiated from the point icon for clarity.

Sidebar header currently still uses the bolt icon until I figure out
how to deal with that. Also the font awesome icons don't seem to work,
perhaps there's additional code needed for those that I've missed.
This commit is contained in:
SilentSpike
2019-01-23 16:27:56 +00:00
parent 4a166d7a5b
commit 5d907c1e16
2 changed files with 37 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
modules/services/improveOSM.js
View File

@@ -188,6 +188,7 @@ export default {
comments: null,
error_subtype: '',
error_type: k,
icon: 'fas-arrow-circle-up', //TODO: Change arrow based on direction?
identifier: { // this is used to post changes to the error
wayId: feature.wayId,
fromNodeId: feature.fromNodeId,
@@ -215,12 +216,19 @@ export default {
if (data.tiles) {
data.tiles.forEach(function(feature) {
var geoType = feature.type.toLowerCase();
var geoIcons = {
road: 'maki-car',
parking: 'maki-parking',
both: 'maki-car',
path: 'maki-shoe'
};
var d = new impOsmError({
loc: pointAverage(feature.points),
comments: null,
error_subtype: geoType,
error_type: k,
icon: geoIcons[geoType],
identifier: { x: feature.x, y: feature.y },
status: feature.status
});
@@ -256,6 +264,7 @@ export default {
comments: null,
error_subtype: '',
error_type: k,
icon: 'temaki-junction',
identifier: feature.id,
object_id: via_node,
object_type: 'node',

45
modules/svg/improveOSM.js
View File

@@ -16,13 +16,11 @@ export function svgImproveOSM(projection, context, dispatch) {
var drawLayer = d3_select(null);
var _improveOsmVisible = false;
// TODO this is just reusing the path from the svg, probably some way to make that automatic (and therefore general)
function markerPath(selection, klass) {
selection
.attr('class', klass)
.attr('transform', 'translate(-9, -20)')
.attr('d', 'M15,6.5h-4.2l1.3-4.7c0.1-0.5-0.4-1-0.9-1H6.2C5.8,0.7,5.4,1,5.4,1.5l-1.2,8.7c-0.1,0.6,0.4,1,0.8,1h4.3l-1.7,7.1c-0.1,0.5,0.4,1,0.9,1c0.3,0,0.6-0.2,0.7-0.5l6.4-11C16,7.2,15.6,6.5,15,6.5z');
.attr('transform', 'translate(-8, -23)')
.attr('d', 'M 17,8 C 17,13 11,21 8.5,23.5 C 6,21 0,13 0,8 C 0,4 4,-0.5 8.5,-0.5 C 13,-0.5 17,4 17,8 z');
}
@@ -125,26 +123,39 @@ export function svgImproveOSM(projection, context, dispatch) {
].join(' ');
});
markersEnter
.append('path')
.call(markerPath, 'shadow');
markersEnter
.append('ellipse')
.attr('cx', 0)
.attr('cy', 0)
.attr('rx', 5)
.attr('cx', 0.5)
.attr('cy', 1)
.attr('rx', 6.5)
.attr('ry', 2)
.attr('class', 'stroke');
markersEnter
.append('path')
.call(markerPath, 'shadow');
.attr('fill', 'currentColor')
.call(markerPath, 'qa_error-fill');
markersEnter
.append('use')
.attr('class', 'qa_error-fill')
.attr('width', '20px')
.attr('height', '20px')
.attr('x', '-9px') // point of bolt is not perfectly centered
.attr('y', '-20px')
.attr('xlink:href', '#iD-icon-bolt');
.attr('transform', 'translate(-5, -19)')
.attr('class', 'icon')
.attr('width', '11px')
.attr('height', '11px')
.attr('xlink:href', function(d) {
var picon = d.icon;
if (!picon) {
return '';
} else {
var isMaki = /^maki-/.test(picon);
return '#' + picon + (isMaki ? '-11' : '');
}
});
// update
markers
@@ -169,9 +180,9 @@ export function svgImproveOSM(projection, context, dispatch) {
targets.enter()
.append('rect')
.attr('width', '20px')
.attr('height', '20px')
.attr('x', '-9px')
.attr('y', '-20px')
.attr('height', '30px')
.attr('x', '-10px')
.attr('y', '-26px')
.merge(targets)
.sort(sortY)
.attr('class', function(d) {