From 0009ceb9c6fcf9957b1f43e1780e4fe9ea69ad1d Mon Sep 17 00:00:00 2001 From: Mourner Date: Tue, 21 Jun 2011 11:43:31 +0300 Subject: [PATCH] merge Florian's pull, fixes, cleanup, circle click, added todos --- debug/vector/vector-canvas.html | 82 ++++++++++++++++++++++++ debug/vector/vector.html | 44 +------------ src/core/Class.js | 14 ++-- src/layer/vector/Circle.Canvas.js | 28 ++++++-- src/layer/vector/Path.Canvas.js | 102 ++++++++++++++---------------- src/layer/vector/Polygon.js | 4 ++ src/layer/vector/Polyline.js | 4 ++ 7 files changed, 169 insertions(+), 109 deletions(-) create mode 100644 debug/vector/vector-canvas.html diff --git a/debug/vector/vector-canvas.html b/debug/vector/vector-canvas.html new file mode 100644 index 000000000..7a31181d2 --- /dev/null +++ b/debug/vector/vector-canvas.html @@ -0,0 +1,82 @@ + + + + Leaflet debug page + + + + + + + + + +
+ + + + + diff --git a/debug/vector/vector.html b/debug/vector/vector.html index 0197bfd4f..4886f3b46 100644 --- a/debug/vector/vector.html +++ b/debug/vector/vector.html @@ -30,51 +30,9 @@ 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', - fillColor: 'blue', - fillOpacity: 0.7 - }; - - var circle = new L.Circle(circleLocation, 500000, circleOptions); - map.addLayer(circle); - map.addLayer(path); - var p1 = latlngs[0], - p2 = latlngs[parseInt(len/4)], - p3 = latlngs[parseInt(len/3)], - p4 = latlngs[parseInt(len/2)], - p5 = latlngs[len - 1], - polygonPoints = [p1, p2, p3, p4, p5]; - - var h1 = new L.LatLng(p1.lat, p1.lng), - h2 = new L.LatLng(p2.lat, p2.lng), - h3 = new L.LatLng(p3.lat, p3.lng), - h4 = new L.LatLng(p4.lat, p4.lng), - h5 = new L.LatLng(p5.lat, p5.lng); - - h1.lng += 20; - h2.lat -= 5; - h3.lat -= 5; - h4.lng -= 10; - h5.lng -= 8; - h5.lat += 10; - - var holePoints = [h5, h4, h3, h2, h1]; - - var polygon = new L.Polygon([polygonPoints, holePoints], { - fillColor: "#333" - }); - map.addLayer(polygon); - - /*var hole = new L.Polygon([h1,h2,h3,h4,h5], { - fillColor: "green" - }); - map.addLayer(hole); - */ path.bindPopup("Hello world"); - + \ No newline at end of file diff --git a/src/core/Class.js b/src/core/Class.js index 09a9e5393..32833769a 100644 --- a/src/core/Class.js +++ b/src/core/Class.js @@ -27,6 +27,13 @@ L.Class.extend = function(/*Object*/ props) /*-> Class*/ { // add class name //proto.className = props; + //inherit parent's statics + for (var i in this) { + if (this.hasOwnProperty(i) && i != 'prototype') { + NewClass[i] = this[i]; + } + } + // mix static properties into the class if (props.statics) { L.Util.extend(NewClass, props.statics); @@ -55,12 +62,5 @@ L.Class.extend = function(/*Object*/ props) /*-> Class*/ { L.Util.extend(this.prototype, props); }; - //inherit parent's statics - for (var i in this) { - if (this.hasOwnProperty(i) && i != 'prototype') { - NewClass[i] = this[i]; - } - } - return NewClass; }; \ No newline at end of file diff --git a/src/layer/vector/Circle.Canvas.js b/src/layer/vector/Circle.Canvas.js index 924d0838a..92e5ace4d 100644 --- a/src/layer/vector/Circle.Canvas.js +++ b/src/layer/vector/Circle.Canvas.js @@ -2,11 +2,29 @@ * Circle canvas specific drawing parts. */ -L.Circle = L.Path.SVG || !L.Path.Canvas ? L.Circle : L.Circle.extend({ - _drawPath : function() { +L.Circle = /*L.Path.SVG || !L.Path.Canvas ? L.Circle :*/ L.Circle.extend({ + _drawPath: function() { + var p = this._point; + this._updateStyle(); - var p = this._point, - r = this._radius; - this._ctx.arc(p.x,p.y,r, 0,Math.PI*2); + this._ctx.arc(p.x, p.y, this._radius, 0, Math.PI * 2); + }, + + _initEvents: function() { + 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; + + // TODO take strokeWidth into account + if (p1.distanceTo(p2) <= this._radius) { + this.fire('click', e); + } } }); diff --git a/src/layer/vector/Path.Canvas.js b/src/layer/vector/Path.Canvas.js index accdcc639..163818278 100644 --- a/src/layer/vector/Path.Canvas.js +++ b/src/layer/vector/Path.Canvas.js @@ -6,36 +6,41 @@ L.Path.Canvas = (function() { return !!document.createElement('canvas').getContext; })(); -L.Path = L.Path.SVG ? L.Path : !L.Path.Canvas ? L.Path.VML : L.Path.extend({ +/* + * TODO define L.Path.Canvas as a separate class instead of extending L.Path, + * and implement class factories for Polyline and Circle that choose the right + * renderer based on constructor options + */ + +L.Path = /*L.Path.SVG ? L.Path : !L.Path.Canvas ? L.Path.VML :*/ L.Path.extend({ initialize: function(options) { L.Util.setOptions(this, options); }, - statics: { - CLIP_PADDING: 0.02 + /*statics: { + CLIP_PADDING: 0.02 // not sure if there's a need to set it to a small value + },*/ + + options: { + updateOnMoveEnd: true }, - options : { - updateOnMoveEnd: true + _initElements: function() { + this._initRoot(); }, _initRoot: function() { - if (!this._map._pathRoot) { - this._map._pathRoot = document.createElement("canvas"); - this._ctx = this._map._pathRoot.getContext('2d'); - - this._map._panes.overlayPane.appendChild(this._map._pathRoot); + var root = this._map._pathRoot; + + if (!root) { + root = this._map._pathRoot = document.createElement("canvas"); + this._map._panes.overlayPane.appendChild(root); this._map.on('moveend', this._updateCanvasViewport, this); this._updateCanvasViewport(); } - else { - this._ctx = this._map._pathRoot.getContext('2d'); - } - }, - _initStyle: function() { - //NOOP. + this._ctx = root.getContext('2d'); }, _updateStyle: function() { @@ -48,35 +53,32 @@ L.Path = L.Path.SVG ? L.Path : !L.Path.Canvas ? L.Path.VML : L.Path.extend({ } }, - _drawPath : function() { - this._updateStyle(); + _drawPath: function() { + var i, j, len, len2, point, drawMethod; + this._ctx.beginPath(); - - for (var i = 0, len = this._parts.length; i < len; i++) { - for (var j=0;j 0) { - this._ctx.closePath(); - } - this._ctx.moveTo(point.x, point.y); - } - else { - this._ctx.lineTo(point.x,point.y); - } + this._ctx[drawMethod](point.x, point.y); + } + // TODO refactor ugly hack + if (this instanceof L.Polygon) { + this._ctx.closePath(); } } - - }, _updatePath: function() { this._drawPath(); + this._updateStyle(); + if (this.options.fill) { this._ctx.globalAlpha = this.options.fillOpacity; - this._ctx.closePath(); this._ctx.fill(); } @@ -85,6 +87,10 @@ L.Path = L.Path.SVG ? L.Path : !L.Path.Canvas ? L.Path.VML : L.Path.extend({ this._ctx.stroke(); } + /* + * TODO not sure if possible to implement, but a great optimization would be to do + * 1 fill/stroke for all features with equal style instead of 1 for each feature + */ }, _updateCanvasViewport: function() { @@ -92,28 +98,16 @@ L.Path = L.Path.SVG ? L.Path : !L.Path.Canvas ? L.Path.VML : L.Path.extend({ var vp = this._map._pathViewport, min = vp.min, - max = vp.max, - width = max.x - min.x, - height = max.y - min.y, - root = this._map._pathRoot, - pane = this._map._panes.overlayPane; + size = vp.max.subtract(min), + root = this._map._pathRoot; - // Hack to make flicker on drag end on mobile webkit less irritating - // Unfortunately I haven't found a good workaround for this yet - if (L.Browser.mobileWebkit) { pane.removeChild(root); } - + //TODO check if it's works properly on mobile webkit L.DomUtil.setPosition(root, min); - root.setAttribute('width', width); //Attention resets canvas, but not on mobile webkit! - root.setAttribute('height', height); - - var vp = this._map._pathViewport; - this._ctx.translate(-vp.min.x, -vp.min.y); - - - if (L.Browser.mobileWebkit) { pane.appendChild(root); } + root.width = size.x; + root.height = size.y; + root.getContext('2d').translate(-min.x, -min.y); }, - _initEvents :function() { - //doesn't work currently. - } + // will be implemented for each of the children classes + _initEvents: L.Util.falseFn }); diff --git a/src/layer/vector/Polygon.js b/src/layer/vector/Polygon.js index 52bf2d6bd..702ebe08e 100644 --- a/src/layer/vector/Polygon.js +++ b/src/layer/vector/Polygon.js @@ -54,5 +54,9 @@ L.Polygon = L.Polyline.extend({ _getPathPartStr: function(points) { var str = L.Polyline.prototype._getPathPartStr.call(this, points); return str + (L.Path.SVG ? 'z' : 'x'); + }, + + _initEvents: function() { + // TODO polygon events (through http://en.wikipedia.org/wiki/Point_in_polygon) } }); \ No newline at end of file diff --git a/src/layer/vector/Polyline.js b/src/layer/vector/Polyline.js index 606d7d71c..6540e1f67 100644 --- a/src/layer/vector/Polyline.js +++ b/src/layer/vector/Polyline.js @@ -108,5 +108,9 @@ L.Polyline = L.Path.extend({ this._simplifyPoints(); L.Path.prototype._updatePath.call(this); + }, + + _initEvents: function() { + // TODO polyline events (through loop with pointToSegmentDistance) } }); \ No newline at end of file