zrender - npm Package Compare versions

Comparing version 4.3.0 to 4.3.1

lib/Painter.js

@@ -544,3 +544,6 @@ var _config = require("./config");
         util.merge(layer, this._layerConfig[zlevel], true);
-      }
+      } // TODO Remove EL_AFTER_INCREMENTAL_INC magic number
+      else if (this._layerConfig[zlevel - EL_AFTER_INCREMENTAL_INC]) {
+          util.merge(layer, this._layerConfig[zlevel - EL_AFTER_INCREMENTAL_INC], true);
+        }
 
@@ -690,2 +693,3 @@ if (virtual) {
     var incrementalLayerCount = 0;
+    var prevZlevel;
 
@@ -695,5 +699,17 @@ for (var i = 0; i < list.length; i++) {
       var zlevel = el.zlevel;
-      var layer; // PENDING If change one incremental element style ?
-      // TODO Where there are non-incremental elements between incremental elements.
+      var layer;
 
+      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) {
@@ -791,3 +807,3 @@ layer = this.getLayer(zlevel + INCREMENTAL_INC, this._needsManuallyCompositing);
       for (var i = 0; i < this._zlevelList.length; i++) {
-        var _zlevel = this._zlevelList[i];
+        var _zlevel = this._zlevelList[i]; // TODO Remove EL_AFTER_INCREMENTAL_INC magic number
 
@@ -794,0 +810,0 @@ if (_zlevel === zlevel || _zlevel === zlevel + EL_AFTER_INCREMENTAL_INC) {

lib/svg/Painter.js

@@ -98,7 +98,11 @@ var _core = require("./core");
   this._opts = opts = util.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);
@@ -109,6 +113,8 @@ this.clipPathManager = new ClippathManager(zrId, svgRoot);
   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);
@@ -126,2 +132,8 @@ this._visibleList = [];
   },
+  getSvgDom: function () {
+    return this._svgDom;
+  },
+  getSvgRoot: function () {
+    return this._svgRoot;
+  },
   getViewportRootOffset: function () {
@@ -144,3 +156,19 @@ var viewportRoot = this.getViewportRoot();
     // 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;
   },
@@ -254,6 +282,5 @@ _paintList: function (list) {
   _getDefs: function (isForceCreating) {
-    var svgRoot = this._svgRoot;
+    var svgRoot = this._svgDom;
+    var defs = svgRoot.getElementsByTagName('defs');
 
-    var defs = this._svgRoot.getElementsByTagName('defs');
-
     if (defs.length === 0) {
@@ -311,3 +338,3 @@ // Not exist
       viewportStyle.height = height + 'px';
-      var svgRoot = this._svgRoot; // Set width by 'svgRoot.width = width' is invalid
+      var svgRoot = this._svgDom; // Set width by 'svgRoot.width = width' is invalid
 
@@ -317,2 +344,8 @@ svgRoot.setAttribute('width', width);
     }
+
+    if (this._backgroundNode) {
+      this._backgroundNode.setAttribute('width', width);
+
+      this._backgroundNode.setAttribute('height', height);
+    }
   },
@@ -351,3 +384,3 @@
     this.root.innerHTML = '';
-    this._svgRoot = this._viewport = this.storage = null;
+    this._svgRoot = this._backgroundRoot = this._svgDom = this._backgroundNode = this._viewport = this.storage = null;
   },
@@ -359,5 +392,5 @@ clear: function () {
   },
-  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;
@@ -374,3 +407,3 @@ }
 
-util.each(['getLayer', 'insertLayer', 'eachLayer', 'eachBuiltinLayer', 'eachOtherLayer', 'getLayers', 'modLayer', 'delLayer', 'clearLayer', 'toDataURL', 'pathToImage'], function (name) {
+util.each(['getLayer', 'insertLayer', 'eachLayer', 'eachBuiltinLayer', 'eachOtherLayer', 'getLayers', 'modLayer', 'delLayer', 'clearLayer', 'pathToImage'], function (name) {
   SVGPainter.prototype[name] = createMethodNotSupport(name);
@@ -377,0 +410,0 @@ });

lib/zrender.js

@@ -36,3 +36,3 @@ var guid = require("./core/guid");
 
-var version = '4.3.0';
+var version = '4.3.1';
 /**
@@ -39,0 +39,0 @@ * Initializing a zrender instance

package.json

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

src/Painter.js

@@ -563,2 +563,6 @@ import {devicePixelRatio} from './config';
             }
+            // TODO Remove EL_AFTER_INCREMENTAL_INC magic number
+            else if (this._layerConfig[zlevel - EL_AFTER_INCREMENTAL_INC]) {
+                util.merge(layer, this._layerConfig[zlevel - EL_AFTER_INCREMENTAL_INC], true);
+            }
 
@@ -716,2 +720,3 @@ if (virtual) {
         var incrementalLayerCount = 0;
+        var prevZlevel;
         for (var i = 0; i < list.length; i++) {
@@ -721,4 +726,17 @@ var el = list[i];
             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) {
@@ -818,2 +836,3 @@ layer = this.getLayer(zlevel + INCREMENTAL_INC, this._needsManuallyCompositing);
                 var _zlevel = this._zlevelList[i];
+                // TODO Remove EL_AFTER_INCREMENTAL_INC magic number
                 if (_zlevel === zlevel || _zlevel === zlevel + EL_AFTER_INCREMENTAL_INC) {
@@ -820,0 +839,0 @@ var layer = this._layers[_zlevel];

src/svg/Painter.js

@@ -94,8 +94,13 @@ /**
 
-    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);
@@ -108,7 +113,9 @@ this.clipPathManager = new ClippathManager(zrId, svgRoot);
 
+    this._svgDom = svgDom;
     this._svgRoot = svgRoot;
+    this._backgroundRoot = bgRoot;
     this._viewport = viewport;
 
     root.appendChild(viewport);
-    viewport.appendChild(svgRoot);
+    viewport.appendChild(svgDom);
 
@@ -132,2 +139,10 @@ this.resize(opts.width, opts.height);
 
+    getSvgDom: function () {
+        return this._svgDom;
+    },
+
+    getSvgRoot: function () {
+        return this._svgRoot;
+    },
+
     getViewportRootOffset: function () {
@@ -152,3 +167,17 @@ var viewportRoot = this.getViewportRoot();
         // 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;
     },
@@ -283,4 +312,4 @@
     _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) {
@@ -342,3 +371,3 @@ // Not exist
 
-            var svgRoot = this._svgRoot;
+            var svgRoot = this._svgDom;
             // Set width by 'svgRoot.width = width' is invalid
@@ -348,2 +377,7 @@ svgRoot.setAttribute('width', width);
         }
+
+        if (this._backgroundNode) {
+            this._backgroundNode.setAttribute('width', width);
+            this._backgroundNode.setAttribute('height', height);
+        }
     },
@@ -390,6 +424,9 @@
 
-        this._svgRoot =
-            this._viewport =
-            this.storage =
-            null;
+        this._svgRoot
+            = this._backgroundRoot
+            = this._svgDom
+            = this._backgroundNode
+            = this._viewport
+            = this.storage
+            = null;
     },
@@ -403,5 +440,5 @@
 
-    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;
@@ -422,3 +459,3 @@ }
     'eachOtherLayer', 'getLayers', 'modLayer', 'delLayer', 'clearLayer',
-    'toDataURL', 'pathToImage'
+    'pathToImage'
 ], function (name) {
@@ -425,0 +462,0 @@ SVGPainter.prototype[name] = createMethodNotSupport(name);

src/zrender.js

@@ -31,3 +31,3 @@ /*!
  */
-export var version = '4.3.0';
+export var version = '4.3.1';
 
@@ -34,0 +34,0 @@ /**

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3438967

increased by0.31%

Lines of code

67185

increased by0.21%

No dependency changes