canvas polyline click events

debug/vector/vector-canvas.html

@@ -27,9 +27,6 @@
 
 		map.fitBounds(new L.LatLngBounds(latlngs));
 		
-		map.addLayer(new L.Marker(latlngs[0]));
-		map.addLayer(new L.Marker(latlngs[len - 1]));
-		
 		var circleLocation = new L.LatLng(51.508, -0.11),
 		circleOptions = {
 		    color: 'red', 
@@ -40,10 +37,10 @@
 		
 		var circle = new L.Circle(circleLocation, 500000, circleOptions);
 		map.addLayer(circle);
-		
 		circle.bindPopup('I am a circle');
 		
 		map.addLayer(path);		
+		path.bindPopup('I am a polyline');
 		
 		var p1 = latlngs[0],
 			p2 = latlngs[parseInt(len/4)],
@@ -73,12 +70,6 @@
 		});
 		map.addLayer(polygon);
 
-		/*var hole = new L.Polygon([h1,h2,h3,h4,h5], {
-			fillColor: "green"
-		});
-		map.addLayer(hole);
-		*/
-		path.bindPopup("Hello world");
 	</script>
 </body>
 </html>

src/layer/vector/Polyline.Canvas.js

@@ -1,6 +1,29 @@
 
 L.Polyline.include(L.Path.SVG || !L.Path.CANVAS ? {} : {
 	_initEvents: function() {
-		// TODO polyline events (through loop with pointToSegmentDistance)
+		if (this.options.clickable) {
+			// TODO hand cursor
+			// TODO mouseover, mouseout, dblclick 
+			this._map.on('click', this._onClick, this);
+		}
+	},
+	
+	_onClick: function(e) {
+		var p1 = this._point, 
+			p2 = e.layerPoint;
+		
+		var i, j, len, len2, dist, part;
+	
+		for (i = 0, len = this._parts.length; i < len; i++) {
+			part = this._parts[i];
+			for (j = 0, len2 = part.length; j < len2 - 1; j++) {
+				dist = L.LineUtil.pointToSegmentDistance(e.layerPoint, part[j], part[j+1]);
+				
+				if (dist <= this.options.weight / 2) {
+					this.fire('click', e);
+					return;
+				}
+			}
+		}
 	}
 });