Compare commits

...

6 Commits

Author SHA1 Message Date
Vladimir Agafonkin
64f6422a23 Merge branch 'refactorvectors' of github.com:CloudMade/Leaflet into refactorvectors 2012-10-31 14:47:41 +02:00
Vladimir Agafonkin
d5ea49e047 Merge branch 'master' into refactorvectors 2012-10-31 13:43:31 +02:00
Vladimir Agafonkin
9e8f8e47f5 Update src/layer/vector2/TODO.md
markdown formatting for vector refactoring todo
2012-10-18 22:58:31 +03:00
Vladimir Agafonkin
68cb13d016 more viewport refactoring 2012-10-18 17:22:50 +03:00
Vladimir Agafonkin
e67aed7c7f add vector refactoring todo 2012-10-18 17:22:27 +03:00
Vladimir Agafonkin
8202e7a03b SVG viewport refactoring 2012-10-18 16:35:47 +03:00
5 changed files with 285 additions and 1 deletions

2
dist/leaflet.css vendored
View File

@ -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 */

109
src/layer/vector2/TODO.md Normal file
View File

@ -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
```

View File

@ -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);
}
})

View File

@ -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">');
};
}
}())
});

View File

@ -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);