From f8f44401d7d2abe8637d0c035b543c1e943361bb Mon Sep 17 00:00:00 2001 From: Mourner Date: Tue, 21 Jun 2011 16:19:55 +0300 Subject: [PATCH] move SVG-specific code into a separate file --- debug/leaflet-include.js | 1 + src/layer/vector/Path.SVG.js | 128 ++++++++++++++++++++++++ src/layer/vector/Path.js | 130 ++----------------------- src/layer/vector/canvas/Path.Canvas.js | 2 +- 4 files changed, 136 insertions(+), 125 deletions(-) create mode 100644 src/layer/vector/Path.SVG.js diff --git a/debug/leaflet-include.js b/debug/leaflet-include.js index ab0036a5..79f1e640 100644 --- a/debug/leaflet-include.js +++ b/debug/leaflet-include.js @@ -50,6 +50,7 @@ 'layer/marker/Marker.Popup.js', 'layer/vector/Path.js', + 'layer/vector/Path.SVG.js', 'layer/vector/Path.VML.js', 'layer/vector/canvas/Path.Canvas.js', 'layer/vector/Path.Popup.js', diff --git a/src/layer/vector/Path.SVG.js b/src/layer/vector/Path.SVG.js new file mode 100644 index 00000000..0e782b15 --- /dev/null +++ b/src/layer/vector/Path.SVG.js @@ -0,0 +1,128 @@ + +L.Path = L.Path.extend({ + statics: (function() { + var svgns = 'http://www.w3.org/2000/svg', + ce = 'createElementNS'; + + return { + SVG_NS: svgns, + SVG: !!(document[ce] && document[ce](svgns, 'svg').createSVGRect) + }; + })(), + + _initElements: function() { + this._initRoot(); + this._initPath(); + this._initStyle(); + }, + + _initRoot: function() { + if (!this._map._pathRoot) { + this._map._pathRoot = this._createElement('svg'); + this._map._panes.overlayPane.appendChild(this._map._pathRoot); + + this._map.on('moveend', this._updateSvgViewport, this); + this._updateSvgViewport(); + } + }, + + _updateSvgViewport: function() { + this._updateViewport(); + + 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; + + // 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); } + + 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) { pane.appendChild(root); } + }, + + _initPath: function() { + this._container = this._createElement('g'); + + this._path = this._createElement('path'); + this._container.appendChild(this._path); + + this._map._pathRoot.appendChild(this._container); + }, + + _initStyle: function() { + if (this.options.stroke) { + this._path.setAttribute('stroke-linejoin', 'round'); + this._path.setAttribute('stroke-linecap', 'round'); + } + if (this.options.fill) { + this._path.setAttribute('fill-rule', 'evenodd'); + } else { + this._path.setAttribute('fill', 'none'); + } + this._updateStyle(); + }, + + _updateStyle: function() { + if (this.options.stroke) { + this._path.setAttribute('stroke', this.options.color); + this._path.setAttribute('stroke-opacity', this.options.opacity); + this._path.setAttribute('stroke-width', this.options.weight); + } + if (this.options.fill) { + this._path.setAttribute('fill', this.options.fillColor || this.options.color); + this._path.setAttribute('fill-opacity', this.options.fillOpacity); + } + }, + + _updatePath: function() { + var str = this.getPathString(); + if (!str) { + // fix webkit empty string parsing bug + str = 'M0 0'; + } + this._path.setAttribute('d', str); + }, + + _createElement: function(name) { + return document.createElementNS(L.Path.SVG_NS, name); + }, + + // TODO remove duplication with L.Map + _initEvents: function() { + if (this.options.clickable) { + if (!L.Path.VML) { + this._path.setAttribute('class', 'leaflet-clickable'); + } + + L.DomEvent.addListener(this._container, 'click', this._onMouseClick, this); + + var events = ['dblclick', 'mousedown', 'mouseover', 'mouseout']; + for (var i = 0; i < events.length; i++) { + L.DomEvent.addListener(this._container, events[i], this._fireMouseEvent, this); + } + } + }, + + _onMouseClick: function(e) { + if (this._map.dragging && this._map.dragging.moved()) { return; } + this._fireMouseEvent(e); + }, + + _fireMouseEvent: function(e) { + if (!this.hasEventListeners(e.type)) { return; } + this.fire(e.type, { + latlng: this._map.mouseEventToLatLng(e), + layerPoint: this._map.mouseEventToLayerPoint(e) + }); + L.DomEvent.stopPropagation(e); + } +}); \ No newline at end of file diff --git a/src/layer/vector/Path.js b/src/layer/vector/Path.js index 3d4837cc..2f721d8f 100644 --- a/src/layer/vector/Path.js +++ b/src/layer/vector/Path.js @@ -5,19 +5,11 @@ L.Path = L.Class.extend({ includes: [L.Mixin.Events], - statics: (function() { - var svgns = 'http://www.w3.org/2000/svg', - ce = 'createElementNS'; - - return { - SVG_NS: svgns, - SVG: !!(document[ce] && document[ce](svgns, 'svg').createSVGRect), - - // how much to extend the clip area around the map view - // (relative to its size, e.g. 0.5 is half the screen in each direction) - CLIP_PADDING: 0.5 - }; - })(), + statics: { + // how much to extend the clip area around the map view + // (relative to its size, e.g. 0.5 is half the screen in each direction) + CLIP_PADDING: 0.5 + }, options: { stroke: true, @@ -68,7 +60,7 @@ L.Path = L.Class.extend({ setStyle: function(style) { L.Util.setOptions(this, style); - if (this._path) { + if (this._container) { this._updateStyle(); } }, @@ -79,39 +71,6 @@ L.Path = L.Class.extend({ this._initStyle(); }, - _initRoot: function() { - if (!this._map._pathRoot) { - this._map._pathRoot = this._createElement('svg'); - this._map._panes.overlayPane.appendChild(this._map._pathRoot); - - this._map.on('moveend', this._updateSvgViewport, this); - this._updateSvgViewport(); - } - }, - - _updateSvgViewport: function() { - this._updateViewport(); - - 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; - - // 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); } - - 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) { pane.appendChild(root); } - }, - _updateViewport: function() { var p = L.Path.CLIP_PADDING, size = this._map.getSize(), @@ -123,83 +82,6 @@ L.Path = L.Class.extend({ this._map._pathViewport = new L.Bounds(min, max); }, - _initPath: function() { - this._container = this._createElement('g'); - - this._path = this._createElement('path'); - this._container.appendChild(this._path); - - this._map._pathRoot.appendChild(this._container); - }, - - _initStyle: function() { - if (this.options.stroke) { - this._path.setAttribute('stroke-linejoin', 'round'); - this._path.setAttribute('stroke-linecap', 'round'); - } - if (this.options.fill) { - this._path.setAttribute('fill-rule', 'evenodd'); - } else { - this._path.setAttribute('fill', 'none'); - } - this._updateStyle(); - }, - - _updateStyle: function() { - if (this.options.stroke) { - this._path.setAttribute('stroke', this.options.color); - this._path.setAttribute('stroke-opacity', this.options.opacity); - this._path.setAttribute('stroke-width', this.options.weight); - } - if (this.options.fill) { - this._path.setAttribute('fill', this.options.fillColor || this.options.color); - this._path.setAttribute('fill-opacity', this.options.fillOpacity); - } - }, - - _updatePath: function() { - var str = this.getPathString(); - if (!str) { - // fix webkit empty string parsing bug - str = 'M0 0'; - } - this._path.setAttribute('d', str); - }, - - _createElement: function(name) { - return document.createElementNS(L.Path.SVG_NS, name); - }, - - // TODO remove duplication with L.Map - _initEvents: function() { - if (this.options.clickable) { - if (!L.Path.VML) { - this._path.setAttribute('class', 'leaflet-clickable'); - } - - L.DomEvent.addListener(this._container, 'click', this._onMouseClick, this); - - var events = ['dblclick', 'mousedown', 'mouseover', 'mouseout']; - for (var i = 0; i < events.length; i++) { - L.DomEvent.addListener(this._container, events[i], this._fireMouseEvent, this); - } - } - }, - - _onMouseClick: function(e) { - if (this._map.dragging && this._map.dragging.moved()) { return; } - this._fireMouseEvent(e); - }, - - _fireMouseEvent: function(e) { - if (!this.hasEventListeners(e.type)) { return; } - this.fire(e.type, { - latlng: this._map.mouseEventToLatLng(e), - layerPoint: this._map.mouseEventToLayerPoint(e) - }); - L.DomEvent.stopPropagation(e); - }, - _redraw: function() { this.projectLatlngs(); this._updatePath(); diff --git a/src/layer/vector/canvas/Path.Canvas.js b/src/layer/vector/canvas/Path.Canvas.js index d55d7720..ab3acbf8 100644 --- a/src/layer/vector/canvas/Path.Canvas.js +++ b/src/layer/vector/canvas/Path.Canvas.js @@ -12,7 +12,7 @@ L.Path.CANVAS = (function() { * renderer based on constructor options */ -L.Path.SVG = false; // TODO temporary (for debugging) +//L.Path.SVG = false; // TODO temporary (for debugging) L.Path = L.Path.SVG || !L.Path.CANVAS ? L.Path : L.Path.extend({ initialize: function(options) {