Merge branch 'refactorvectors' of github.com:CloudMade/Leaflet into refactorvectors

markdown formatting for vector refactoring todo

dist/leaflet.css

@@ -9,7 +9,7 @@
 .leaflet-shadow-pane,
 .leaflet-marker-pane,
 .leaflet-popup-pane,
-.leaflet-overlay-pane svg,
+.leaflet-vector-root,
 .leaflet-zoom-box,
 .leaflet-image-layer,
 .leaflet-layer { /* TODO optimize classes */

src/layer/vector2/TODO.md

@@ -0,0 +1,109 @@
+#### DONE - Viewport (SVG)
+
+ * calculating viewPort
+ * setting up/updating root
+ * creating elements
+ * zoom animation
+
+#### DONE - Viewport.VML mixin
+#### DONE - Viewport.Canvas extends Viewport
+
+#### Map.Viewport mixin
+
+ * managing viewports
+
+---
+
+#### Path
+	
+ * default style options
+ * update clip on moveend
+
+#### Polyline extends Path
+	
+ * project latlngs
+ * clip and simplify polyline points
+
+#### Polygon extends Polyline
+
+ * clip and simplify polygon points
+
+#### Circle extends Path
+
+ * project circle latlng / radius
+
+#### CircleMarker extends Path
+
+---
+
+#### Clip (SVG)
+ 
+ * set/update svg styles
+ * set up svg events
+ * create/update svg path
+
+#### Clip.VML mixin
+
+ * set/update vml styles
+ * set up vml events
+ * create/update vml path
+
+#### Clip.Polyline extends Clip
+
+ * generate polyline path string from points
+
+#### Clip.Polygon extends Clip
+
+ * generate polyline path string from points
+
+#### Clip.Circle extends Clip
+ * generate circle path string from circle/radius
+
+---
+
+#### Clip.Canvas
+
+ * set/update fill/stroke style
+ * draw path from points
+ * set up click event (depends on path containsPoint)
+
+#### Clip.Canvas.Polyline extends Clip.Canvas
+ 
+ * containsPoint
+
+#### Clip.Canvas.Polygon extends Clip.Canvas
+ 
+ * containsPoint
+
+#### Clip.Canvas.Circle extends Clip.Canvas
+
+ * containsPoint
+ * draw arc from point/radius
+
+---
+
+```
+vector
+	polyline
+		Polyline.js
+		Clip.Polyline.js
+		Clip.Canvas.Polyline.js
+	polygon
+		Polygon.js
+		Rectangle.js
+		Clip.Polygon.js
+		Clip.Canvas.Polygon.js
+	circle
+		Circle.js
+		CircleMarker.js
+		Clip.Circle.js
+		Clip.Canvas.Circle.js
+	Path.js
+	Clip.js
+	Clip.VML.js
+	Clip.Canvas.js
+	Viewport.js
+	Viewport.VML.js
+	Viewport.Canvas.js
+	Map.Viewport.js
+```

src/layer/vector2/Viewport.Canvas.js

@@ -0,0 +1,31 @@
+
+L.Browser.canvas = (function () {
+	return !!document.createElement('canvas').getContext;
+}());
+
+L.Viewport.Canvas = L.Viewport.extend({
+
+	initRoot: function () {
+		this._root = document.createElement("canvas"),
+
+		var ctx = this._ctx = root.getContext('2d');
+		ctx.lineCap = ctx.lineJoin = "round";
+	},
+
+	update: function () {
+		if (this._zooming) { return; }
+
+		this.updateBounds();
+
+		var bounds = this._bounds,
+			min = bounds.min,
+			size = bounds.max.subtract(min),
+			root = this._root;
+
+		L.DomUtil.setPosition(root, min);
+
+		root.width = size.x;
+		root.height = size.y;
+		root.getContext('2d').translate(-min.x, -min.y);
+	}
+})

src/layer/vector2/Viewport.VML.js

@@ -0,0 +1,42 @@
+
+L.Browser.vml = !L.Browser.svg && (function () {
+	try {
+		var div = document.createElement('div');
+		div.innerHTML = '<v:shape adj="1"/>';
+
+		var shape = div.firstChild;
+		shape.style.behavior = 'url(#default#VML)';
+
+		return shape && (typeof shape.adj === 'object');
+	} catch (e) {
+		return false;
+	}
+}());
+
+L.Viewport.include(L.Browser.svg || !L.Browser.vml ? {} : {
+
+	initialize: function (map) {
+		this._map = map;
+
+		var root = this._root = document.createElement('div');
+		root.className = 'leaflet-vml-container';
+
+		map._panes.overlayPane.appendChild(root);
+
+		map.on('moveend', this.updateBounds);
+		this.updateBounds();
+	},
+
+	createElement: (function () {
+		try {
+			document.namespaces.add('lvml', 'urn:schemas-microsoft-com:vml');
+			return function (name) {
+				return document.createElement('<lvml:' + name + ' class="lvml">');
+			};
+		} catch (e) {
+			return function (name) {
+				return document.createElement('<' + name + ' xmlns="urn:schemas-microsoft.com:vml" class="lvml">');
+			};
+		}
+	}())
+});

src/layer/vector2/Viewport.js

@@ -0,0 +1,102 @@
+
+L.Viewport = L.Class.extend({
+
+	statics: {
+		SVG_NS: 'http://www.w3.org/2000/svg'
+	},
+
+	options: {
+		padding:  L.Browser.mobile ? Math.max(0, Math.min(0.5,
+				(1280 / Math.max(window.innerWidth, window.innerHeight) - 1) / 2)) : 0.5,
+	},
+
+	initialize: function (map) {
+		this._map = map;
+		this._pane = map._panes.overlayPane,
+
+		this.initRoot();
+
+		var root = this._root,
+			className = 'leaflet-vector-root leaflet-zoom-';
+
+		this._pane.appendChild(root);
+
+		if (map.options.zoomAnimation && L.Browser.any3d) {
+			map.on({
+				'zoomanim': this._animateZoom,
+				'zoomend': this._endAnimate
+			}, this);
+			root.setAttribute('class', className + 'animated');
+
+		} else {
+			root.setAttribute('class', className + 'hide');
+		}
+
+		map.on('moveend', this.update, this);
+		this.update();
+	},
+
+	initRoot: function () {
+		this._root = this.createElement('svg');
+	},
+
+	updateBounds: function () {
+		var p = this.options.padding,
+			size = this._map.getSize(),
+			viewPos = L.DomUtil.getPosition(this._map._mapPane).multiplyBy(-1),
+
+			min = viewPos._subtract(size.multiplyBy(p))._round(),
+			max = min.add(size.multiplyBy(1 + p * 2))._round();
+
+		this._bounds = new L.Bounds(min, max);
+	},
+
+	update: function () {
+		if (this._zooming) { return; }
+
+		this.updateBounds();
+
+		var bounds = this._bounds,
+			min = bounds.min,
+			max = bounds.max,
+			width = max.x - min.x,
+			height = max.y - min.y,
+			root = this._root;
+
+		if (L.Browser.mobileWebkit) {
+			// hack to make flicker on drag end on mobile webkit less irritating
+			this._pane.removeChild(root);
+		}
+
+		L.DomUtil.setPosition(root, min);
+
+		root.setAttribute('width', width);
+		root.setAttribute('height', height);
+		root.setAttribute('viewBox', [min.x, min.y, width, height].join(' '));
+
+		if (L.Browser.mobileWebkit) {
+			this._pane.appendChild(root);
+		}
+	},
+
+	createElement: function (name) {
+		return document.createElementNS(L.Viewport.SVG_NS, name);
+	},
+
+	_animateZoom: function (options) {
+		var	scale = this._map.getZoomScale(options.zoom),
+			offset = this._map._getCenterOffset(options.center),
+			translate = offset.multiplyBy(-scale)._add(this._bounds.min);
+
+		this._root.style[L.DomUtil.TRANSFORM] =
+				L.DomUtil.getTranslateString(translate) + ' scale(' + scale + ') ';
+
+		this._zooming = true;
+	},
+
+	_endAnimate: function () {
+		this._zooming = false;
+	}
+});
+
+L.Browser.svg = !!(document.createElementNS && document.createElementNS(L.Viewport.SVG_NS, 'svg').createSVGRect);