export line preset sprite straight from inkscape

We could also use an svg sprite, just swapping the
one line in line-presets.css, but it seemed to
make scrolling the preset grid significantly
less smooth in Firefox.

Makefile

@@ -98,6 +98,9 @@ translations:
 data/locales.js: data/locales/*.js
 	cat $^ > $@
 
+img/line-presets.png: svg/line-presets.svg
+	inkscape --export-area-page --export-png=img/line-presets.png svg/line-presets.svg
+
 D3_FILES = \
 	node_modules/d3/src/start.js \
 	node_modules/d3/src/arrays/index.js \

css/line-presets.css

@@ -0,0 +1,54 @@
+.preset-line-icon {
+    background-image: url(../img/line-presets.png);
+    width: 60px;
+    height: 60px;
+    overflow: hidden;
+    text-indent: -9999px;
+}
+
+/* Roads */
+.preset-line-icon.highway-motorway          { background-position: -20px -20px;}
+.preset-line-icon.highway-trunk             { background-position: -80px -20px;}
+.preset-line-icon.highway-primary           { background-position: -140px -20px;}
+.preset-line-icon.highway-secondary         { background-position: -200px -20px;}
+.preset-line-icon.highway-tertiary          { background-position: -260px -20px;}
+.preset-line-icon.highway-motorway-link     { background-position: -320px -20px;}
+.preset-line-icon.highway-trunk-link        { background-position: -380px -20px;}
+.preset-line-icon.highway-primary-link      { background-position: -440px -20px;}
+.preset-line-icon.highway-secondary-link    { background-position: -500px -20px;}
+.preset-line-icon.highway-tertiary-link     { background-position: -560px -20px;}
+.preset-line-icon.highway-residential       { background-position: -620px -20px;}
+.preset-line-icon.highway-unclassified      { background-position: -680px -20px;}
+.preset-line-icon.highway-service           { background-position: -740px -20px;}
+.preset-line-icon.highway-road              { background-position: -800px -20px;}
+.preset-line-icon.highway-track             { background-position: -860px -20px;}
+.preset-line-icon.highway-living-street     { background-position: -920px -20px;}
+.preset-line-icon.highway-path              { background-position: -980px -20px;}
+.preset-line-icon.highway-cycleway          { background-position: -1040px -20px;}
+.preset-line-icon.highway-footway           { background-position: -1100px -20px;}
+.preset-line-icon.highway-bridleway         { background-position: -1160px -20px;}
+.preset-line-icon.highway-steps             { background-position: -1220px -20px;}
+
+/* Railway */
+.preset-line-icon.railway-rail              { background-position: -1280px -20px;}
+.preset-line-icon.railway-disused           { background-position: -1340px -20px;}
+.preset-line-icon.railway-abandoned         { background-position: -1400px -20px;}
+.preset-line-icon.railway-subway            { background-position: -1460px -20px;}
+.preset-line-icon.railway-light-rail        { background-position: -1520px -20px;}
+.preset-line-icon.railway-monorail          { background-position: -1580px -20px;}
+
+/* Waterway */
+.preset-line-icon.waterway-river            { background-position: -1640px -20px;}
+.preset-line-icon.waterway-stream           { background-position: -1700px -20px;}
+.preset-line-icon.waterway-canal            { background-position: -1760px -20px;}
+.preset-line-icon.waterway-ditch            { background-position: -1820px -20px;}
+
+.preset-line-icon.power-line                { background-position: -1880px -20px;}
+
+.preset-line-icon.other-line                { background-position: -1940px -20px;}
+
+.preset-line-icon.category-roads            { background-position: -2000px -20px;}
+.preset-line-icon.category-rail             { background-position: -2060px -20px;}
+.preset-line-icon.category-path             { background-position: -2120px -20px;}
+.preset-line-icon.category-water            { background-position: -2180px -20px;}
+

index.html

@@ -7,6 +7,7 @@
         <link rel='stylesheet' href='css/map.css'>
         <link rel='stylesheet' href='css/app.css'>
         <link rel='stylesheet' href='css/feature-icons.css'>
+        <link rel='stylesheet' href='css/line-presets.css'>
 
         <!-- mobile devices -->
         <meta name='viewport' content='initial-scale=1.0 maximum-scale=1.0'>

index_packaged.html

@@ -7,6 +7,7 @@
         <link rel='stylesheet' href='css/map.css'>
         <link rel='stylesheet' href='css/app.css'>
         <link rel='stylesheet' href='css/feature-icons.css'>
+        <link rel='stylesheet' href='css/line-presets.css'>
 
         <!-- mobile devices -->
         <meta name='viewport' content='initial-scale=1.0 maximum-scale=1.0'>

js/id/ui/preset_icon.js

@@ -13,7 +13,9 @@ iD.ui.PresetIcon = function(geometry) {
 
         selection.append('div')
             .attr('class', function(preset) {
-                return 'feature-' + (preset.icon || fallbackIcon) + ' icon preset-icon preset-icon-' + geometry;
+                return (geometry === 'line' ? 'preset-line-icon ' : 'feature-') +
+                    (preset.icon || fallbackIcon) +
+                    ' preset-icon preset-icon-' + geometry;
             });
     };
 };

js/id/ui/tag_editor.js

@@ -36,8 +36,6 @@ iD.ui.TagEditor = function(context, entity) {
             .append('span')
             .attr('class', 'icon back');
 
-        var icon = preset.icon || (geometry === 'line' ? 'other-line' : 'marker-stroked');
-
         messagewrap.append('h3')
             .attr('class', 'inspector-inner')
             .text(t('inspector.editing_feature', { feature: preset.name() }));

svg/line-presets.svg

@@ -10,7 +10,7 @@
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="100"
+   width="3000"
    height="100"
    id="svg7013"
    version="1.1"