diff --git a/Makefile b/Makefile
index d52445dd9..e19e3d9f4 100644
--- a/Makefile
+++ b/Makefile
@@ -6,8 +6,7 @@ all: \
dist/iD.css \
dist/iD.js \
dist/iD.min.js \
- dist/img/line-presets.png \
- dist/img/relation-presets.png
+ dist/img/iD-sprite.svg
MAKI_TARGETS = \
css/feature-icons.css \
@@ -27,6 +26,8 @@ $(MAKI_SOURCES): node_modules/.install
dist/img/maki-sprite.png: node_modules/maki/www/images/maki-sprite.png
cp $< $@
+dist/img/iD-sprite.svg: svg/iD-sprite.svg
+ cp $< $@
BUILDJS_TARGETS = \
data/presets/categories.json \
@@ -131,14 +132,6 @@ wikipedias:
npm install wmf-sitematrix@git://github.com/osmlab/wmf-sitematrix.git
cp node_modules/wmf-sitematrix/wikipedia.min.json data/wikipedia.json
-SPRITE = inkscape --export-area-page
-
-dist/img/line-presets.png: svg/line-presets.svg
- if [ `which inkscape` ]; then $(SPRITE) --export-png=$@ $<; else echo "Inkscape is not installed"; fi;
-
-dist/img/relation-presets.png: svg/relation-presets.svg
- if [ `which inkscape` ]; then $(SPRITE) --export-png=$@ $<; else echo "Inkscape is not installed"; fi;
-
D3_FILES = \
node_modules/d3/src/start.js \
node_modules/d3/src/arrays/index.js \
diff --git a/css/app.css b/css/app.css
index 746f2d88c..f508ac59e 100644
--- a/css/app.css
+++ b/css/app.css
@@ -485,10 +485,10 @@ button.save.has-count .count::before {
vertical-align:top;
width:20px;
height:20px;
- background:transparent url(img/sprite.svg) no-repeat 0 0;
+ background:transparent url(img/iD-sprite.svg) no-repeat 0 0;
text-indent:-9999px;
overflow:hidden;
- }
+}
.icon-pre-text {
margin-right: 3px;
@@ -515,28 +515,34 @@ button.save.has-count .count::before {
.icon.apply { background-position: -120px 0;}
.icon.save { background-position: -140px 0;}
.icon.close { background-position: -160px 0;}
-.icon.delete { background-position: -180px 0;}
-.icon.remove { background-position: -200px 0;}
+
+.icon.out-link { background-position: -200px 0;}
.icon.inspect { background-position: -220px 0;}
+.icon.zoom-in,
.icon.plus { background-position: -240px 0;}
-.icon.search { background-position: -280px 0;}
+.icon.zoom-out,
+.icon.minus { background-position: -260px 0;}
+.icon.search,
.icon.geocode { background-position: -280px 0;}
.icon.layers { background-position: -300px 0;}
.icon.avatar { background-position: -320px 0;}
.icon.nearby { background-position: -340px 0;}
.icon.geolocate { background-position: -360px 0;}
-.icon.warning { background-position: -380px 0;}
-.icon.bug { background-position: -400px 0;}
-.icon.back { background-position: -420px 0;}
-.icon.forward { background-position: -440px 0;}
-.icon.help { background-position: -460px 0;}
-.icon.relation { background-position: -520px 0;}
-.icon.relation.route { background-position: -540px 0;}
-.icon.relation.multipolygon { background-position: -560px 0;}
-.icon.vertex { background-position: -580px 0;}
-.icon.data { background-position: -600px 0;}
-.icon.inspect.light { background-position: -220px -20px;}
+.icon.bug { background-position: -400px 0;}
+.icon.translate { background-position: -420px 0;}
+
+.icon.help { background-position: -460px 0;}
+.icon.data { background-position: -480px 0;}
+.icon.full-screen { background-position: -500px 0;}
+.active .icon.full-screen { background-position: -520px 0;}
+
+.icon.delete { background-position: 0 -140px; }
+
+
+.icon.zoom-in-invert { background-position: -240px 0; }
+
+/*.icon.inspect.light { background-position: -220px -20px;}
.icon.plus.light { background-position: -240px -20px;}
.icon.zoom-in { background-position: -240px -20px;}
.icon.zoom-out { background-position: -260px -20px;}
@@ -549,12 +555,6 @@ button.save.has-count .count::before {
.icon.help.light { background-position: -460px -20px;}
.icon.data.light { background-position: -600px -20px;}
-.icon.back.blue { background-position: -420px -20px;}
-.icon.forward.blue { background-position: -440px -20px;}
-
-.icon.full-screen { background-position: -620px -20px;}
-.active .icon.full-screen { background-position: -640px -20px;}
-
button[disabled] .icon.alert { background-position: 0 -40px;}
button[disabled] .icon.add-point { background-position: -20px -40px;}
button[disabled] .icon.add-line { background-position: -40px -40px;}
@@ -583,26 +583,12 @@ button[disabled] .icon.data { background-position: -600px -40px;}
.icon.area.created { background-position: -520px -100px;}
.icon.point.modified { background-position: -22px 0; }
-
+*/
.icon.modified { opacity: .5; }
-/* Out link is special */
-
-.icon.out-link { height: 14px; width: 14px; background-position: -500px 0;}
+/*.icon.out-link { height: 14px; width: 14px; background-position: -500px 0;}
a:hover .icon.out-link { background-position: -500px -14px;}
-
-.icon.plus-dark { background-position: -240px -40px;}
-
-/* Universal preset icons */
-
-.icon.source { background-position: 0 -200px;}
-.icon.address { background-position: -20px -200px;}
-.icon.telephone { background-position: -40px -200px;}
-.icon.website { background-position: -60px -200px;}
-.icon.elevation { background-position: -80px -200px;}
-.icon.wikipedia { background-position: -100px -200px;}
-.icon.note { background-position: -120px -200px;}
-.icon.wheelchair { background-position: -140px -200px;}
+*/
/* ToolBar / Persistent UI Elements
------------------------------------------------------- */
@@ -986,7 +972,7 @@ a:hover .icon.out-link { background-position: -500px -14px;}
height: 45px;
width: 45px;
position: absolute;
- background:transparent url(img/sprite.svg) no-repeat 0 -80px;
+ background:transparent url(img/iD-sprite.svg) no-repeat 0 -80px;
}
/* preset form basics */
@@ -2486,7 +2472,7 @@ div.full-screen > button:hover {
max-width: 100px;
margin: auto;
margin-bottom: 10px;
- background:transparent url(img/sprite.svg) no-repeat 0 -220px;
+ background:transparent url(img/iD-sprite.svg) no-repeat 0 -220px;
}
.modal-actions :first-child {
@@ -2710,10 +2696,6 @@ div.full-screen > button:hover {
margin-right:10px;
}
-.icon.zoom-in-invert {
- background-position: -240px -40px;
-}
-
/* Tooltips
------------------------------------------------------- */
@@ -3077,7 +3059,7 @@ div.full-screen > button:hover {
content: "";
height: 80px;
width: 200px;
- background:transparent url(img/sprite.svg) no-repeat 0 -320px;
+ background:transparent url(img/iD-sprite.svg) no-repeat 0 -320px;
}
.intro-areas-add .tooltip-inner::before {
@@ -3097,6 +3079,6 @@ div.full-screen > button:hover {
.huge-modal-button .illustration {
height: 100px;
width: 100px;
- background: rgba(0, 0, 0, 0) url(img/sprite.svg) no-repeat -400px -220px;
+ background: rgba(0, 0, 0, 0) url(img/iD-sprite.svg) no-repeat -400px -220px;
margin: auto;
}
diff --git a/css/map.css b/css/map.css
index ef94e0092..59714fc40 100644
--- a/css/map.css
+++ b/css/map.css
@@ -22,13 +22,9 @@ img.tile-removing {
}
/* base styles */
-path {
- fill: none;
-}
-
-use {
- pointer-events: none;
-}
+path { fill: none; }
+#defs path { fill: inherit; }
+use { pointer-events: none; }
g.point .shadow,
g.vertex .shadow,
diff --git a/data/operations-sprite.json b/data/operations-sprite.json
index f9ae5a12c..4df95996a 100644
--- a/data/operations-sprite.json
+++ b/data/operations-sprite.json
@@ -1,29 +1,16 @@
{
- "icon-operation-delete": [0, 140],
- "icon-operation-circularize": [20, 140],
- "icon-operation-straighten": [40, 140],
- "icon-operation-split": [60, 140],
- "icon-operation-disconnect": [80, 140],
- "icon-operation-reverse": [100, 140],
- "icon-operation-move": [120, 140],
- "icon-operation-merge": [140, 140],
- "icon-operation-orthogonalize": [160, 140],
- "icon-operation-rotate": [180, 140],
- "icon-operation-simplify": [200, 140],
- "icon-operation-continue": [220, 140],
-
- "icon-operation-disabled-delete": [0, 160],
- "icon-operation-disabled-circularize": [20, 160],
- "icon-operation-disabled-straighten": [40, 160],
- "icon-operation-disabled-split": [60, 160],
- "icon-operation-disabled-disconnect": [80, 160],
- "icon-operation-disabled-reverse": [100, 160],
- "icon-operation-disabled-move": [120, 160],
- "icon-operation-disabled-merge": [140, 160],
- "icon-operation-disabled-orthogonalize": [160, 160],
- "icon-operation-disabled-rotate": [180, 160],
- "icon-operation-disabled-simplify": [200, 160],
- "icon-operation-disabled-continue": [220, 160],
+ "operation-delete": [0, 140],
+ "operation-circularize": [20, 140],
+ "operation-straighten": [40, 140],
+ "operation-split": [60, 140],
+ "operation-disconnect": [80, 140],
+ "operation-reverse": [100, 140],
+ "operation-move": [120, 140],
+ "operation-merge": [140, 140],
+ "operation-orthogonalize": [160, 140],
+ "operation-rotate": [180, 140],
+ "operation-simplify": [200, 140],
+ "operation-continue": [220, 140],
"icon-restriction-yes": [50, 80],
"icon-restriction-no": [95, 80],
@@ -31,4 +18,4 @@
"icon-restriction-yes-u": [185, 80],
"icon-restriction-no-u": [230, 80],
"icon-restriction-only-u": [275, 80]
-}
\ No newline at end of file
+}
diff --git a/dist/img/iD-sprite.svg b/dist/img/iD-sprite.svg
new file mode 100644
index 000000000..643cd0489
--- /dev/null
+++ b/dist/img/iD-sprite.svg
@@ -0,0 +1,327 @@
+
+
+
diff --git a/js/id/svg/defs.js b/js/id/svg/defs.js
index 25ce53082..2fe5b0fed 100644
--- a/js/id/svg/defs.js
+++ b/js/id/svg/defs.js
@@ -14,7 +14,18 @@ iD.svg.Defs = function(context) {
};
}
- function SpriteDefinition(id, href, data) {
+ function SVGSpriteDefinition(id, href, data) {
+ return function(defs) {
+ d3.xml(href, 'image/svg+xml', function(err, svg) {
+ if (err) return;
+ defs.node().appendChild(
+ d3.select(svg.documentElement).attr('id', id).node()
+ );
+ });
+ };
+ }
+
+ function ImageSpriteDefinition(id, href, data) {
return function(defs) {
defs.append('image')
.attr('id', id)
@@ -33,6 +44,7 @@ iD.svg.Defs = function(context) {
return function (selection) {
var defs = selection.append('defs');
+ // marker
defs.append('marker')
.attr({
id: 'oneway-marker',
@@ -46,6 +58,7 @@ iD.svg.Defs = function(context) {
.append('path')
.attr('d', 'M 5 3 L 0 3 L 0 2 L 5 2 L 5 0 L 10 2.5 L 5 5 z');
+ // patterns
var patterns = defs.selectAll('pattern')
.data([
// pattern name, pattern image name
@@ -91,6 +104,7 @@ iD.svg.Defs = function(context) {
return context.imagePath('pattern/' + d[1] + '.png');
});
+ // clip paths
defs.selectAll()
.data([12, 18, 20, 32, 45])
.enter().append('clipPath')
@@ -107,6 +121,7 @@ iD.svg.Defs = function(context) {
return d;
});
+ // maki
var maki = [];
_.forEach(iD.data.featureIcons, function (dimensions, name) {
if (dimensions['12'] && dimensions['18'] && dimensions['24']) {
@@ -116,12 +131,12 @@ iD.svg.Defs = function(context) {
}
});
- defs.call(SpriteDefinition(
- 'sprite',
- context.imagePath('sprite.svg'),
+ defs.call(SVGSpriteDefinition(
+ 'iD-sprite',
+ context.imagePath('iD-sprite.svg'),
d3.entries(iD.data.operations)));
- defs.call(SpriteDefinition(
+ defs.call(ImageSpriteDefinition(
'maki-sprite',
context.imagePath('maki-sprite.png'),
maki));
diff --git a/js/id/ui/radial_menu.js b/js/id/ui/radial_menu.js
index 5fc187967..cd2499e32 100644
--- a/js/id/ui/radial_menu.js
+++ b/js/id/ui/radial_menu.js
@@ -42,16 +42,18 @@ iD.ui.RadialMenu = function(context, operations) {
var button = menu.selectAll()
.data(operations)
- .enter().append('g')
+ .enter()
+ .append('g')
+ .attr('class', function(d) { return 'radial-menu-item radial-menu-item-' + d.id; })
+ .classed('disabled', function(d) { return d.disabled(); })
.attr('transform', function(d, i) {
- return 'translate(' + r * Math.sin(a0 + i * a) + ',' +
- r * Math.cos(a0 + i * a) + ')';
+ return 'translate(' + iD.geo.roundCoords([
+ r * Math.sin(a0 + i * a),
+ r * Math.cos(a0 + i * a)]).join(',') + ')';
});
button.append('circle')
- .attr('class', function(d) { return 'radial-menu-item radial-menu-item-' + d.id; })
.attr('r', 15)
- .classed('disabled', function(d) { return d.disabled(); })
.on('click', click)
.on('mousedown', mousedown)
.on('mouseover', mouseover)
@@ -59,8 +61,7 @@ iD.ui.RadialMenu = function(context, operations) {
button.append('use')
.attr('transform', 'translate(-10, -10)')
- .attr('clip-path', 'url(#clip-square-20)')
- .attr('xlink:href', function(d) { return '#icon-operation-' + (d.disabled() ? 'disabled-' : '') + d.id; });
+ .attr('xlink:href', function(d) { return '#operation-' + d.id; });
tooltip = d3.select(document.body)
.append('div')
diff --git a/svg/iD-sprite.idraw b/svg/iD-sprite.idraw
new file mode 100644
index 000000000..5b0596200
Binary files /dev/null and b/svg/iD-sprite.idraw differ
diff --git a/svg/iD-sprite.svg b/svg/iD-sprite.svg
new file mode 100644
index 000000000..2aab0bc55
--- /dev/null
+++ b/svg/iD-sprite.svg
@@ -0,0 +1,327 @@
+
+
+
diff --git a/svg/sprite.svg b/svg/sprite.svg
deleted file mode 100644
index 7aec0cc11..000000000
--- a/svg/sprite.svg
+++ /dev/null
@@ -1,2177 +0,0 @@
-
-
-
-