Clean up way drawing code

css/app.css

@@ -48,3 +48,7 @@
     font: normal 13px/20px 'Helvetica';
     width:135px;
 }
+
+polyline.way-fill {
+    cursor: pointer;
+}

js/iD/renderer/EntityUI.js

@@ -38,7 +38,9 @@ declare("iD.renderer.EntityUI", null, {
 	},
 	recordSprite:function(sprite) {
 		// summary:		Record that an individual sprite (one stroke, icon or text item) has been added.
-		if (this.sprites.indexOf(sprite)==-1) { this.sprites.push(sprite); }
+		if (!_.include(this.sprites, sprite)) {
+            this.sprites.push(sprite);
+        }
 		return sprite;
 	},
 	removeSprites:function() {
@@ -67,10 +69,10 @@ declare("iD.renderer.EntityUI", null, {
 	},
 	getEnhancedTags:function() {
 		// summary:		Return tags for this entity augmented by the EntityUI's state classes.
-		var tags=lang.clone(this.entity.tags);
+		var tags = lang.clone(this.entity.tags);
 		// Apply stateClasses (hover, selected, hoverway, selectedway)
 		for (var i in this.stateClasses) {
-			tags[':'+this.stateClasses[i]]='yes';
+			tags[':'+this.stateClasses[i]] = 'yes';
 		}
 		// todo - Add any common 'special-case' tags, e.g. :hasTags
 		return tags;	// Object

js/iD/renderer/WayUI.js

@@ -13,20 +13,20 @@ define(['dojo/_base/declare','dojo/_base/lang','iD/renderer/EntityUI'], function
 // WayUI class
 
 declare("iD.renderer.WayUI", [iD.renderer.EntityUI], {
-	constructor:function() {
+	constructor: function() {
 		// summary:		A UI (rendering) representing a way.
 		this.redraw();
 	},
-	getEnhancedTags:function() {
+	getEnhancedTags: function() {
 		var tags=this.inherited(arguments);
 		if (this.entity.isClosed()) { tags[':area']='yes'; }
 		return tags;
 	},
-	recalculate:function() {
+	recalculate: function() {
 		// summary:		Not yet implemented - calculate length/centrepoint of UI for use in rendering.
 		// ** FIXME: todo
 	},
-	redraw:function() {
+	redraw: function() {
 		// summary:		Draw the object and add hitzone sprites.
 		var way = this.entity,
             maxwidth=4,
@@ -36,50 +36,60 @@ declare("iD.renderer.WayUI", [iD.renderer.EntityUI], {
 		if (!way.nodes.length) { return; }
 
 		// Create tags and calculate styleList
-		var tags=this.getEnhancedTags();
+		var tags = this.getEnhancedTags();
 		this.refreshStyleList(tags);
 
 		// List of co-ordinates
-		var coords=[];
-		for (i = 0; i < way.nodes.length; i++) {
-			var node = way.nodes[i];
-			coords.push({
+		var coords = _.map(way.nodes, _.bind(function(node) {
+            return {
                 x: this.map.lon2coord(node.lon),
                 y: this.map.latp2coord(node.latp)
-            });
-		}
+            };
+        }, this));
 
 		// Iterate through each subpart, drawing any styles on that layer
 		var drawn = false;
 		for (i = 0; i < this.styleList.subparts.length; i++) {
-			var subpart=this.styleList.subparts[i];
+			var subpart = this.styleList.subparts[i];
 			if (this.styleList.shapeStyles[subpart]) {
-				var s=this.styleList.shapeStyles[subpart];
+				var s = this.styleList.shapeStyles[subpart], line;
 
 				// Stroke
 				if (s.width)  {
-					this.recordSprite(this.targetGroup('stroke',s.sublayer).createPolyline(coords).setStroke(s.strokeStyler()));
-					maxwidth=Math.max(maxwidth,s.width);
-					drawn=true;
+                    line = this.targetGroup('stroke',s.sublayer)
+                        .createPolyline(coords)
+                        .setStroke(s.strokeStyler());
+
+					this.recordSprite(line);
+					maxwidth = Math.max(maxwidth, s.width);
+					drawn = true;
 				}
 
 				// Fill
 				if (!isNaN(s.fill_color)) {
-					this.recordSprite(this.targetGroup('fill',s.sublayer).createPolyline(coords).setFill(s.fillStyler()));
-					drawn=true;
+                    line = this.targetGroup('fill',s.sublayer)
+                        .createPolyline(coords)
+                        .setFill(s.fillStyler());
+
+					this.recordSprite(line);
+					drawn = true;
 				}
 
 				// Casing
 				if (s.casing_width) {
-					this.recordSprite(this.targetGroup('casing').createPolyline(coords).setStroke(s.casingStyler()));
-					maxwidth=Math.max(maxwidth,s.width+s.casing_width*2);
-					drawn=true;
+                    line = this.targetGroup('casing')
+                        .createPolyline(coords)
+                        .setStroke(s.casingStyler());
+
+					this.recordSprite(line);
+					maxwidth = Math.max(maxwidth, s.width + s.casing_width * 2);
+					drawn = true;
 				}
 			}
 
 			// Text label on path
 			if (this.styleList.textStyles[subpart]) {
-				var t=this.styleList.textStyles[subpart];
+				var t = this.styleList.textStyles[subpart];
 				if (t.text && tags[t.text]) {
 					var tp=this.recordSprite(this.targetGroup('text')
 						.createTextPath(t.textStyler(tags[t.text]))
@@ -98,7 +108,13 @@ declare("iD.renderer.WayUI", [iD.renderer.EntityUI], {
 
 		// Add hitzone sprite
 		if (drawn) {
-			var hit=this.recordSprite(this.targetGroup('hit').createPolyline(coords).setStroke( { width:maxwidth+8, color: [0,0,0,0] } ));
+			var hit=this.recordSprite(this.targetGroup('hit')
+                .createPolyline(coords)
+                .setStroke({
+                    width: maxwidth+8,
+                    color: [0,0,0,0]
+                }));
+
 			hit.source=this;
 			hit.connect("onclick", lang.hitch(this,this.entityMouseEvent));
 			hit.connect("onmousedown", lang.hitch(this,this.entityMouseEvent));