add VML implementation (not tested yet)
This commit is contained in:
Vladimir Agafonkin
parent
5d8e7279b2
commit
08028b7a7a
@ -154,6 +154,7 @@ var deps = {
|
|||||||
src: [
|
src: [
|
||||||
'layer/vector2/Renderer.js',
|
'layer/vector2/Renderer.js',
|
||||||
'layer/vector2/SVG.js',
|
'layer/vector2/SVG.js',
|
||||||
|
'layer/vector2/SVG.VML.js',
|
||||||
'layer/vector2/Canvas.js',
|
'layer/vector2/Canvas.js',
|
||||||
'layer/vector2/Path.js',
|
'layer/vector2/Path.js',
|
||||||
'layer/vector2/Path.Popup.js',
|
'layer/vector2/Path.Popup.js',
|
||||||
|
|||||||
@ -1,132 +0,0 @@
|
|||||||
/*
|
|
||||||
* Vector rendering for IE6-8 through VML.
|
|
||||||
* Thanks to Dmitry Baranovsky and his Raphael library for inspiration!
|
|
||||||
*/
|
|
||||||
|
|
||||||
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.Path = L.Browser.svg || !L.Browser.vml ? L.Path : L.Path.extend({
|
|
||||||
statics: {
|
|
||||||
VML: true,
|
|
||||||
CLIP_PADDING: 0.02
|
|
||||||
},
|
|
||||||
|
|
||||||
_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">');
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}()),
|
|
||||||
|
|
||||||
_initPath: function () {
|
|
||||||
var container = this._container = this._createElement('shape');
|
|
||||||
|
|
||||||
L.DomUtil.addClass(container, 'leaflet-vml-shape ' +
|
|
||||||
(this.options.className || '') +
|
|
||||||
(this.options.clickable ? ' leaflet-clickable' : ''));
|
|
||||||
|
|
||||||
container.coordsize = '1 1';
|
|
||||||
|
|
||||||
this._path = this._createElement('path');
|
|
||||||
container.appendChild(this._path);
|
|
||||||
|
|
||||||
this._map._pathRoot.appendChild(container);
|
|
||||||
},
|
|
||||||
|
|
||||||
_initStyle: function () {
|
|
||||||
this._updateStyle();
|
|
||||||
},
|
|
||||||
|
|
||||||
_updateStyle: function () {
|
|
||||||
var stroke = this._stroke,
|
|
||||||
fill = this._fill,
|
|
||||||
options = this.options,
|
|
||||||
container = this._container;
|
|
||||||
|
|
||||||
container.stroked = options.stroke;
|
|
||||||
container.filled = options.fill;
|
|
||||||
|
|
||||||
if (options.stroke) {
|
|
||||||
if (!stroke) {
|
|
||||||
stroke = this._stroke = this._createElement('stroke');
|
|
||||||
stroke.endcap = 'round';
|
|
||||||
container.appendChild(stroke);
|
|
||||||
}
|
|
||||||
stroke.weight = options.weight + 'px';
|
|
||||||
stroke.color = options.color;
|
|
||||||
stroke.opacity = options.opacity;
|
|
||||||
|
|
||||||
if (options.dashArray) {
|
|
||||||
stroke.dashStyle = L.Util.isArray(options.dashArray) ?
|
|
||||||
options.dashArray.join(' ') :
|
|
||||||
options.dashArray.replace(/( *, *)/g, ' ');
|
|
||||||
} else {
|
|
||||||
stroke.dashStyle = '';
|
|
||||||
}
|
|
||||||
if (options.lineCap) {
|
|
||||||
stroke.endcap = options.lineCap.replace('butt', 'flat');
|
|
||||||
}
|
|
||||||
if (options.lineJoin) {
|
|
||||||
stroke.joinstyle = options.lineJoin;
|
|
||||||
}
|
|
||||||
|
|
||||||
} else if (stroke) {
|
|
||||||
container.removeChild(stroke);
|
|
||||||
this._stroke = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (options.fill) {
|
|
||||||
if (!fill) {
|
|
||||||
fill = this._fill = this._createElement('fill');
|
|
||||||
container.appendChild(fill);
|
|
||||||
}
|
|
||||||
fill.color = options.fillColor || options.color;
|
|
||||||
fill.opacity = options.fillOpacity;
|
|
||||||
|
|
||||||
} else if (fill) {
|
|
||||||
container.removeChild(fill);
|
|
||||||
this._fill = null;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
_updatePath: function () {
|
|
||||||
var style = this._container.style;
|
|
||||||
|
|
||||||
style.display = 'none';
|
|
||||||
this._path.v = this.getPathString() + ' '; // the space fixes IE empty path string bug
|
|
||||||
style.display = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
L.Map.include(L.Browser.svg || !L.Browser.vml ? {} : {
|
|
||||||
_initPathRoot: function () {
|
|
||||||
if (this._pathRoot) { return; }
|
|
||||||
|
|
||||||
var root = this._pathRoot = document.createElement('div');
|
|
||||||
root.className = 'leaflet-vml-container';
|
|
||||||
this._panes.overlayPane.appendChild(root);
|
|
||||||
|
|
||||||
this.on('moveend', this._updatePathViewport);
|
|
||||||
this._updatePathViewport();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
129
src/layer/vector2/SVG.VML.js
Normal file
129
src/layer/vector2/SVG.VML.js
Normal file
@ -0,0 +1,129 @@
|
|||||||
|
/*
|
||||||
|
* Vector rendering for IE7-8 through VML.
|
||||||
|
* Thanks to Dmitry Baranovsky and his Raphael library for inspiration!
|
||||||
|
*/
|
||||||
|
|
||||||
|
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.SVG.include(L.Browser.vml ? {} : {
|
||||||
|
|
||||||
|
onAdd: function () {
|
||||||
|
this._container = L.DomUtil.create('div', 'leaflet-vml-container', this.getPane());
|
||||||
|
this._update();
|
||||||
|
},
|
||||||
|
|
||||||
|
onRemove: function () {
|
||||||
|
L.DomUtil.remove(this._container);
|
||||||
|
},
|
||||||
|
|
||||||
|
_update: function () {
|
||||||
|
if (this._map._animatingZoom) { return; }
|
||||||
|
L.Renderer.prototype._update.call(this);
|
||||||
|
},
|
||||||
|
|
||||||
|
_initPath: function (layer) {
|
||||||
|
var container = layer._container = L.SVG.create('shape');
|
||||||
|
|
||||||
|
L.DomUtil.addClass(container, 'leaflet-vml-shape ' + (this.options.className || ''));
|
||||||
|
|
||||||
|
container.coordsize = '1 1';
|
||||||
|
|
||||||
|
layer._path = L.SVG.create('path');
|
||||||
|
container.appendChild(layer._path);
|
||||||
|
|
||||||
|
if (layer.options.clickable) {
|
||||||
|
this._initEvents(layer);
|
||||||
|
}
|
||||||
|
|
||||||
|
this._updateStyle(layer);
|
||||||
|
},
|
||||||
|
|
||||||
|
_addPath: function (layer) {
|
||||||
|
this._container.appendChild(layer._container);
|
||||||
|
},
|
||||||
|
|
||||||
|
_removePath: function (layer) {
|
||||||
|
L.DomUtil.remove(layer._container);
|
||||||
|
},
|
||||||
|
|
||||||
|
_updateStyle: function (layer) {
|
||||||
|
var stroke = layer._stroke,
|
||||||
|
fill = layer._fill,
|
||||||
|
options = layer.options,
|
||||||
|
container = layer._container;
|
||||||
|
|
||||||
|
container.stroked = options.stroke;
|
||||||
|
container.filled = options.fill;
|
||||||
|
|
||||||
|
if (options.stroke) {
|
||||||
|
if (!stroke) {
|
||||||
|
stroke = layer._stroke = L.SVG.create('stroke');
|
||||||
|
container.appendChild(stroke);
|
||||||
|
}
|
||||||
|
stroke.weight = options.weight + 'px';
|
||||||
|
stroke.color = options.color;
|
||||||
|
stroke.opacity = options.opacity;
|
||||||
|
|
||||||
|
if (options.dashArray) {
|
||||||
|
stroke.dashStyle = L.Util.isArray(options.dashArray) ?
|
||||||
|
options.dashArray.join(' ') :
|
||||||
|
options.dashArray.replace(/( *, *)/g, ' ');
|
||||||
|
} else {
|
||||||
|
stroke.dashStyle = '';
|
||||||
|
}
|
||||||
|
stroke.endcap = options.lineCap.replace('butt', 'flat');
|
||||||
|
stroke.joinstyle = options.lineJoin;
|
||||||
|
|
||||||
|
} else if (stroke) {
|
||||||
|
container.removeChild(stroke);
|
||||||
|
layer._stroke = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.fill) {
|
||||||
|
if (!fill) {
|
||||||
|
fill = layer._fill = L.SVG.create('fill');
|
||||||
|
container.appendChild(fill);
|
||||||
|
}
|
||||||
|
fill.color = options.fillColor || options.color;
|
||||||
|
fill.opacity = options.fillOpacity;
|
||||||
|
|
||||||
|
} else if (fill) {
|
||||||
|
container.removeChild(fill);
|
||||||
|
layer._fill = null;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
_updatePoly: function (layer, closed) {
|
||||||
|
var style = layer._container.style;
|
||||||
|
|
||||||
|
style.display = 'none';
|
||||||
|
layer._path.v = L.SVG.pointsToPath(layer._parts, closed));
|
||||||
|
style.display = '';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
L.SVG.create = (function (name) {
|
||||||
|
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">');
|
||||||
|
};
|
||||||
|
}
|
||||||
|
})();
|
||||||
Loading…
Reference in New Issue
Block a user