Merge pull request #598 from ecomfe/release-dev

release 4.3.1

dist/zrender.js

@@ -10203,6 +10203,10 @@ Painter.prototype = {
  if (this._layerConfig[zlevel]) {
  merge(layer, this._layerConfig[zlevel], true);
  }
+ // TODO Remove EL_AFTER_INCREMENTAL_INC magic number
+ else if (this._layerConfig[zlevel - EL_AFTER_INCREMENTAL_INC]) {
+ merge(layer, this._layerConfig[zlevel - EL_AFTER_INCREMENTAL_INC], true);
+ }
 
  if (virtual) {
  layer.virtual = virtual;
@@ -10355,12 +10359,26 @@ Painter.prototype = {
 
  var prevLayer = null;
  var incrementalLayerCount = 0;
+ var prevZlevel;
  for (var i = 0; i < list.length; i++) {
  var el = list[i];
  var zlevel = el.zlevel;
  var layer;
- // PENDING If change one incremental element style ?
- // TODO Where there are non-incremental elements between incremental elements.
+
+ if (prevZlevel !== zlevel) {
+ prevZlevel = zlevel;
+ incrementalLayerCount = 0;
+ }
+
+ // TODO Not use magic number on zlevel.
+
+ // Each layer with increment element can be separated to 3 layers.
+ // (Other Element drawn after incremental element)
+ // -----------------zlevel + EL_AFTER_INCREMENTAL_INC--------------------
+ // (Incremental element)
+ // ----------------------zlevel + INCREMENTAL_INC------------------------
+ // (Element drawn before incremental element)
+ // --------------------------------zlevel--------------------------------
  if (el.incremental) {
  layer = this.getLayer(zlevel + INCREMENTAL_INC, this._needsManuallyCompositing);
  layer.incremental = true;
@@ -10455,6 +10473,7 @@ Painter.prototype = {
 
  for (var i = 0; i < this._zlevelList.length; i++) {
  var _zlevel = this._zlevelList[i];
+ // TODO Remove EL_AFTER_INCREMENTAL_INC magic number
  if (_zlevel === zlevel || _zlevel === zlevel + EL_AFTER_INCREMENTAL_INC) {
  var layer = this._layers[_zlevel];
  merge(layer, layerConfig[zlevel], true);
@@ -11527,7 +11546,7 @@ var instances = {}; // ZRender实例map索引
 /**
  * @type {string}
  */
-var version = '4.3.0';
+var version = '4.3.1';
 
 /**
  * Initializing a zrender instance
@@ -18829,11 +18848,16 @@ var SVGPainter = function (root, storage, opts, zrId) {
  this.storage = storage;
  this._opts = opts = extend({}, opts || {});
 
- var svgRoot = createElement('svg');
- svgRoot.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
- svgRoot.setAttribute('version', '1.1');
- svgRoot.setAttribute('baseProfile', 'full');
- svgRoot.style.cssText = 'user-select:none;position:absolute;left:0;top:0;';
+ var svgDom = createElement('svg');
+ svgDom.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+ svgDom.setAttribute('version', '1.1');
+ svgDom.setAttribute('baseProfile', 'full');
+ svgDom.style.cssText = 'user-select:none;position:absolute;left:0;top:0;';
+
+ var bgRoot = createElement('g');
+ svgDom.appendChild(bgRoot);
+ var svgRoot = createElement('g');
+ svgDom.appendChild(svgRoot);
 
  this.gradientManager = new GradientManager(zrId, svgRoot);
  this.clipPathManager = new ClippathManager(zrId, svgRoot);
@@ -18842,11 +18866,13 @@ var SVGPainter = function (root, storage, opts, zrId) {
  var viewport = document.createElement('div');
  viewport.style.cssText = 'overflow:hidden;position:relative';
 
+ this._svgDom = svgDom;
  this._svgRoot = svgRoot;
+ this._backgroundRoot = bgRoot;
  this._viewport = viewport;
 
  root.appendChild(viewport);
- viewport.appendChild(svgRoot);
+ viewport.appendChild(svgDom);
 
  this.resize(opts.width, opts.height);
 
@@ -18865,6 +18891,14 @@ SVGPainter.prototype = {
  return this._viewport;
  },
 
+ getSvgDom: function () {
+ return this._svgDom;
+ },
+
+ getSvgRoot: function () {
+ return this._svgRoot;
+ },
+
  getViewportRootOffset: function () {
  var viewportRoot = this.getViewportRoot();
  if (viewportRoot) {
@@ -18884,7 +18918,21 @@ SVGPainter.prototype = {
 
  setBackgroundColor: function (backgroundColor) {
  // TODO gradient
- this._viewport.style.background = backgroundColor;
+ // Insert a bg rect instead of setting background to viewport.
+ // Otherwise, the exported SVG don't have background.
+ if (this._backgroundRoot && this._backgroundNode) {
+ this._backgroundRoot.removeChild(this._backgroundNode);
+ }
+
+ var bgNode = createElement('rect');
+ bgNode.setAttribute('width', this.getWidth());
+ bgNode.setAttribute('height', this.getHeight());
+ bgNode.setAttribute('x', 0);
+ bgNode.setAttribute('y', 0);
+ bgNode.setAttribute('id', 0);
+ bgNode.style.fill = backgroundColor;
+ this._backgroundRoot.appendChild(bgNode);
+ this._backgroundNode = bgNode;
  },
 
  _paintList: function (list) {
@@ -19014,8 +19062,8 @@ SVGPainter.prototype = {
  },
 
  _getDefs: function (isForceCreating) {
- var svgRoot = this._svgRoot;
- var defs = this._svgRoot.getElementsByTagName('defs');
+ var svgRoot = this._svgDom;
+ var defs = svgRoot.getElementsByTagName('defs');
  if (defs.length === 0) {
  // Not exist
  if (isForceCreating) {
@@ -19072,11 +19120,16 @@ SVGPainter.prototype = {
  viewportStyle.width = width + 'px';
  viewportStyle.height = height + 'px';
 
- var svgRoot = this._svgRoot;
+ var svgRoot = this._svgDom;
  // Set width by 'svgRoot.width = width' is invalid
  svgRoot.setAttribute('width', width);
  svgRoot.setAttribute('height', height);
  }
+
+ if (this._backgroundNode) {
+ this._backgroundNode.setAttribute('width', width);
+ this._backgroundNode.setAttribute('height', height);
+ }
  },
 
  /**
@@ -19118,10 +19171,13 @@ SVGPainter.prototype = {
  dispose: function () {
  this.root.innerHTML = '';
 
- this._svgRoot =
- this._viewport =
- this.storage =
- null;
+ this._svgRoot
+ = this._backgroundRoot
+ = this._svgDom
+ = this._backgroundNode
+ = this._viewport
+ = this.storage
+ = null;
  },
 
  clear: function () {
@@ -19130,9 +19186,9 @@ SVGPainter.prototype = {
  }
  },
 
- pathToDataUrl: function () {
+ toDataURL: function () {
  this.refresh();
- var html = this._svgRoot.outerHTML;
+ var html = encodeURIComponent(this._svgDom.outerHTML.replace(/></g, '>\n\r<'));
  return 'data:image/svg+xml;charset=UTF-8,' + html;
  }
 };
@@ -19148,7 +19204,7 @@ function createMethodNotSupport(method) {
 each([
  'getLayer', 'insertLayer', 'eachLayer', 'eachBuiltinLayer',
  'eachOtherLayer', 'getLayers', 'modLayer', 'delLayer', 'clearLayer',
- 'toDataURL', 'pathToImage'
+ 'pathToImage'
 ], function (name) {
  SVGPainter.prototype[name] = createMethodNotSupport(name);
 });

package.json

@@ -1,6 +1,6 @@
 {
  "name": "zrender",
- "version": "4.3.0",
+ "version": "4.3.1",
  "description": "A lightweight canvas library.",
  "keywords": [
  "canvas",

src/zrender.js

@@ -28,7 +28,7 @@ var instances = {}; // ZRender实例map索引
 /**
  * @type {string}
  */
-export var version = '4.3.0';
+export var version = '4.3.1';
 
 /**
  * Initializing a zrender instance