diff --git a/css/80_app.css b/css/80_app.css index 00fa702b3..533592d8b 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -54,7 +54,7 @@ body { transition-duration: 200ms; } -#defs { +#ideditor-defs { /* Can't be display: none or the clippaths are ignored. */ position: absolute; width: 0; diff --git a/modules/svg/areas.js b/modules/svg/areas.js index bcb437174..6a0da6d3c 100644 --- a/modules/svg/areas.js +++ b/modules/svg/areas.js @@ -12,7 +12,7 @@ export function svgAreas(projection, context) { function getPatternStyle(tags) { var imageID = svgTagPattern(tags); if (imageID) { - return 'url("#' + imageID + '")'; + return 'url("#ideditor-' + imageID + '")'; } return ''; } @@ -134,7 +134,7 @@ export function svgAreas(projection, context) { var clipPathsEnter = clipPaths.enter() .append('clipPath') .attr('class', 'clipPath-osm') - .attr('id', function(entity) { return entity.id + '-clippath'; }); + .attr('id', function(entity) { return 'ideditor-' + entity.id + '-clippath'; }); clipPathsEnter .append('path'); @@ -183,7 +183,7 @@ export function svgAreas(projection, context) { this.setAttribute('class', entity.type + ' area ' + layer + ' ' + entity.id); if (layer === 'fill') { - this.setAttribute('clip-path', 'url(#' + entity.id + '-clippath)'); + this.setAttribute('clip-path', 'url(#ideditor-' + entity.id + '-clippath)'); this.style.fill = this.style.stroke = getPatternStyle(entity.tags); } }) diff --git a/modules/svg/data.js b/modules/svg/data.js index 6df3cabcf..859e604cf 100644 --- a/modules/svg/data.js +++ b/modules/svg/data.js @@ -150,7 +150,7 @@ export function svgData(projection, context, dispatch) { function clipPathID(d) { - return 'data-' + d.__featurehash__ + '-clippath'; + return 'ideditor-data-' + d.__featurehash__ + '-clippath'; } diff --git a/modules/svg/defs.js b/modules/svg/defs.js index 39ca45098..53642bba2 100644 --- a/modules/svg/defs.js +++ b/modules/svg/defs.js @@ -16,7 +16,7 @@ export function svgDefs(context) { // add markers defs .append('marker') - .attr('id', 'oneway-marker') + .attr('id', 'ideditor-oneway-marker') .attr('viewBox', '0 0 10 5') .attr('refX', 2.5) .attr('refY', 2.5) @@ -39,7 +39,7 @@ export function svgDefs(context) { function addSidedMarker(name, color, offset) { defs .append('marker') - .attr('id', 'sided-marker-' + name) + .attr('id', 'ideditor-sided-marker-' + name) .attr('viewBox', '0 0 2 2') .attr('refX', 1) .attr('refY', -offset) @@ -66,7 +66,7 @@ export function svgDefs(context) { defs .append('marker') - .attr('id', 'viewfield-marker') + .attr('id', 'ideditor-viewfield-marker') .attr('viewBox', '0 0 16 16') .attr('refX', 8) .attr('refY', 16) @@ -85,7 +85,7 @@ export function svgDefs(context) { defs .append('marker') - .attr('id', 'viewfield-marker-wireframe') + .attr('id', 'ideditor-viewfield-marker-wireframe') .attr('viewBox', '0 0 16 16') .attr('refX', 8) .attr('refY', 16) @@ -137,7 +137,7 @@ export function svgDefs(context) { ]) .enter() .append('pattern') - .attr('id', function (d) { return 'pattern-' + d[0]; }) + .attr('id', function (d) { return 'ideditor-pattern-' + d[0]; }) .attr('width', 32) .attr('height', 32) .attr('patternUnits', 'userSpaceOnUse'); @@ -165,7 +165,7 @@ export function svgDefs(context) { .data([12, 18, 20, 32, 45]) .enter() .append('clipPath') - .attr('id', function (d) { return 'clip-square-' + d; }) + .attr('id', function (d) { return 'ideditor-clip-square-' + d; }) .append('rect') .attr('x', 0) .attr('y', 0) diff --git a/modules/svg/labels.js b/modules/svg/labels.js index 3b9a44f17..6d21f5f1a 100644 --- a/modules/svg/labels.js +++ b/modules/svg/labels.js @@ -111,7 +111,7 @@ export function svgLabels(projection, context) { paths.enter() .append('path') .style('stroke-width', get(labels, 'font-size')) - .attr('id', function(d) { return 'labelpath-' + d.id; }) + .attr('id', function(d) { return 'ideditor-labelpath-' + d.id; }) .attr('class', classes) .merge(paths) .attr('d', get(labels, 'lineString')); @@ -140,7 +140,7 @@ export function svgLabels(projection, context) { .filter(filter) .data(entities, osmEntity.key) .attr('startOffset', '50%') - .attr('xlink:href', function(d) { return '#labelpath-' + d.id; }) + .attr('xlink:href', function(d) { return '#ideditor-labelpath-' + d.id; }) .text(utilDisplayNameForPath); } diff --git a/modules/svg/lines.js b/modules/svg/lines.js index f33f9e6ce..3b326a1b8 100644 --- a/modules/svg/lines.js +++ b/modules/svg/lines.js @@ -306,11 +306,11 @@ export function svgLines(projection, context) { layergroup.selectAll('g.line-stroke-highlighted') .call(drawLineGroup, 'stroke', true); - addMarkers(layergroup, 'oneway', 'onewaygroup', onewaydata, 'url(#oneway-marker)'); + addMarkers(layergroup, 'oneway', 'onewaygroup', onewaydata, 'url(#ideditor-oneway-marker)'); addMarkers(layergroup, 'sided', 'sidedgroup', sideddata, function marker(d) { var category = graph.entity(d.id).sidednessIdentifier(); - return 'url(#sided-marker-' + category + ')'; + return 'url(#ideditor-sided-marker-' + category + ')'; } ); }); diff --git a/modules/svg/vertices.js b/modules/svg/vertices.js index 1ef0debf2..d38e5651e 100644 --- a/modules/svg/vertices.js +++ b/modules/svg/vertices.js @@ -192,7 +192,7 @@ export function svgVertices(projection, context) { .attr('class', 'viewfield') .attr('d', 'M0,0H0') .merge(viewfields) - .attr('marker-start', 'url(#viewfield-marker' + (wireframe ? '-wireframe' : '') + ')') + .attr('marker-start', 'url(#ideditor-viewfield-marker' + (wireframe ? '-wireframe' : '') + ')') .attr('transform', function(d) { return 'rotate(' + d + ')'; }); } diff --git a/modules/ui/init.js b/modules/ui/init.js index ba1ba783f..432742a70 100644 --- a/modules/ui/init.js +++ b/modules/ui/init.js @@ -91,7 +91,7 @@ export function uiInit(context) { container .append('svg') - .attr('id', 'defs') + .attr('id', 'ideditor-defs') .call(svgDefs(context)); container diff --git a/test/spec/svg/lines.js b/test/spec/svg/lines.js index 3d22a35b1..7ee42c6c6 100644 --- a/test/spec/svg/lines.js +++ b/test/spec/svg/lines.js @@ -162,9 +162,9 @@ describe('iD.svgLines', function () { var selection = surface.selectAll('g.onewaygroup > path'); expect(selection.size()).to.eql(3); - expect(selection.nodes()[0].attributes['marker-mid'].nodeValue).to.eql('url(#oneway-marker)'); - expect(selection.nodes()[1].attributes['marker-mid'].nodeValue).to.eql('url(#oneway-marker)'); - expect(selection.nodes()[2].attributes['marker-mid'].nodeValue).to.eql('url(#oneway-marker)'); + expect(selection.nodes()[0].attributes['marker-mid'].nodeValue).to.eql('url(#ideditor-oneway-marker)'); + expect(selection.nodes()[1].attributes['marker-mid'].nodeValue).to.eql('url(#ideditor-oneway-marker)'); + expect(selection.nodes()[2].attributes['marker-mid'].nodeValue).to.eql('url(#ideditor-oneway-marker)'); }); it('has two marker layers for alternating oneway ways', function() { @@ -179,8 +179,8 @@ describe('iD.svgLines', function () { var selection = surface.selectAll('g.onewaygroup > path'); expect(selection.size()).to.eql(2); - expect(selection.nodes()[0].attributes['marker-mid'].nodeValue).to.eql('url(#oneway-marker)'); - expect(selection.nodes()[1].attributes['marker-mid'].nodeValue).to.eql('url(#oneway-marker)'); + expect(selection.nodes()[0].attributes['marker-mid'].nodeValue).to.eql('url(#ideditor-oneway-marker)'); + expect(selection.nodes()[1].attributes['marker-mid'].nodeValue).to.eql('url(#ideditor-oneway-marker)'); }); it('has no marker layer for oneway=no ways', function() { @@ -216,10 +216,10 @@ describe('iD.svgLines', function () { surface.call(iD.svgLines(projection, context), graph, [i_n, i_nc, i_b, i_mm], all); var selection = surface.selectAll('g.sidedgroup > path'); expect(selection.size()).to.eql(4); - expect(selection.nodes()[0].attributes['marker-mid'].nodeValue).to.eql('url(#sided-marker-natural)'); - expect(selection.nodes()[1].attributes['marker-mid'].nodeValue).to.eql('url(#sided-marker-coastline)'); - expect(selection.nodes()[2].attributes['marker-mid'].nodeValue).to.eql('url(#sided-marker-barrier)'); - expect(selection.nodes()[3].attributes['marker-mid'].nodeValue).to.eql('url(#sided-marker-man_made)'); + expect(selection.nodes()[0].attributes['marker-mid'].nodeValue).to.eql('url(#ideditor-sided-marker-natural)'); + expect(selection.nodes()[1].attributes['marker-mid'].nodeValue).to.eql('url(#ideditor-sided-marker-coastline)'); + expect(selection.nodes()[2].attributes['marker-mid'].nodeValue).to.eql('url(#ideditor-sided-marker-barrier)'); + expect(selection.nodes()[3].attributes['marker-mid'].nodeValue).to.eql('url(#ideditor-sided-marker-man_made)'); }); it('has no marker layer for two_sided way', function() {