zrender - npm Package Compare versions

Comparing version 4.0.2 to 4.0.3

lib/Layer.js

@@ -155,4 +155,8 @@ var util = require("./core/util");
     var domBack = this.domBack;
-    domStyle.width = width + 'px';
-    domStyle.height = height + 'px';
+
+    if (domStyle) {
+      domStyle.width = width + 'px';
+      domStyle.height = height + 'px';
+    }
+
     dom.width = width * dpr;
@@ -173,5 +177,6 @@ dom.height = height * dpr;
    * 清空该层画布
-   * @param {boolean} clearAll Clear all with out motion blur
+   * @param {boolean} [clearAll]=false Clear all with out motion blur
+   * @param {Color} [clearColor]
    */
-  clear: function (clearAll) {
+  clear: function (clearAll, clearColor) {
     var dom = this.dom;
@@ -181,3 +186,3 @@ var ctx = this.ctx;
     var height = dom.height;
-    var clearColor = this.clearColor;
+    var clearColor = clearColor || this.clearColor;
     var haveMotionBLur = this.motionBlur && !clearAll;
@@ -198,3 +203,3 @@ var lastFrameAlpha = this.lastFrameAlpha;
 
-    if (clearColor) {
+    if (clearColor && clearColor !== 'transparent') {
       var clearColorGradientOrPattern; // Gradient
@@ -201,0 +206,0 @@

lib/Painter.js

@@ -171,18 +171,22 @@ var _config = require("./config");
   } else {
+    var width = root.width;
+    var height = root.height;
+
     if (opts.width != null) {
-      root.width = opts.width;
+      width = opts.width;
     }
 
     if (opts.height != null) {
-      root.height = opts.height;
-    } // Use canvas width and height directly
+      height = opts.height;
+    }
 
+    this.dpr = opts.devicePixelRatio || 1; // Use canvas width and height directly
 
-    var width = root.width;
-    var height = root.height;
+    root.width = width * this.dpr;
+    root.height = height * this.dpr;
     this._width = width;
     this._height = height; // Create layer if only one given canvas
-    // Device pixel ratio is fixed to 1 because given canvas has its specified width and height
+    // Device can be specified to create a high dpi image.
 
-    var mainLayer = new Layer(root, this, 1);
+    var mainLayer = new Layer(root, this, this.dpr);
     mainLayer.__builtin__ = true;
@@ -255,3 +259,4 @@ mainLayer.initContext(); // FIXME Use canvas width and height
       if (!layer.__builtin__ && layer.refresh) {
-        layer.refresh();
+        var clearColor = i === 0 ? this._backgroundColor : null;
+        layer.refresh(clearColor);
       }
@@ -406,6 +411,7 @@ }
       var useTimer = !paintAll && layer.incremental && Date.now;
-      var startTime = useTimer && Date.now(); // All elements in this layer are cleared.
+      var startTime = useTimer && Date.now();
+      var clearColor = layer.zlevel === this._zlevelList[0] ? this._backgroundColor : null; // All elements in this layer are cleared.
 
       if (layer.__startIndex === layer.__endIndex) {
-        layer.clear();
+        layer.clear(false, clearColor);
       } else if (start === layer.__startIndex) {
@@ -415,3 +421,3 @@ var firstEl = list[start];
         if (!firstEl.incremental || !firstEl.notClear || paintAll) {
-          layer.clear();
+          layer.clear(false, clearColor);
         }
@@ -745,2 +751,5 @@ }
   },
+  setBackgroundColor: function (backgroundColor) {
+    this._backgroundColor = backgroundColor;
+  },
 
@@ -879,4 +888,3 @@ /**
     imageLayer.initContext();
-    imageLayer.clearColor = opts.backgroundColor;
-    imageLayer.clear();
+    imageLayer.clear(false, opts.backgroundColor || this._backgroundColor);
 
@@ -883,0 +891,0 @@ if (opts.pixelRatio <= this.dpr) {

lib/svg/Painter.js

@@ -142,2 +142,6 @@ var _core = require("./core");
   },
+  setBackgroundColor: function (backgroundColor) {
+    // TODO gradient
+    this._viewport.style.background = backgroundColor;
+  },
   _paintList: function (list) {
@@ -340,6 +344,6 @@ this.gradientManager.markAllUnused();
   },
-  pathToSvg: function () {
+  pathToDataUrl: function () {
     this.refresh();
     var html = this._svgRoot.outerHTML;
-    return 'data:img/svg+xml;utf-8,' + unescape(html);
+    return 'data:image/svg+xml;charset=UTF-8,' + html;
   }
@@ -346,0 +350,0 @@ }; // Not supported methods

lib/tool/color.js

@@ -469,2 +469,8 @@ var LRU = require("../core/LRU");
       }
+
+      if (colorArr[i] > 255) {
+        colorArr[i] = 255;
+      } else if (color[i] < 0) {
+        colorArr[i] = 0;
+      }
     }
@@ -471,0 +477,0 @@

lib/zrender.js

@@ -36,3 +36,3 @@ var guid = require("./core/guid");
 
-var version = '4.0.2';
+var version = '4.0.3';
 /**
@@ -211,3 +211,6 @@ * Initializing a zrender instance
   configLayer: function (zLevel, config) {
-    this.painter.configLayer(zLevel, config);
+    if (this.painter.configLayer) {
+      this.painter.configLayer(zLevel, config);
+    }
+
     this._needsRefresh = true;
@@ -217,2 +220,14 @@ },
   /**
+   * Set background color
+   * @param {string} backgroundColor
+   */
+  setBackgroundColor: function (backgroundColor) {
+    if (this.painter.setBackgroundColor) {
+      this.painter.setBackgroundColor(backgroundColor);
+    }
+
+    this._needsRefresh = true;
+  },
+
+  /**
    * Repaint the canvas immediately
@@ -219,0 +234,0 @@ */

package.json

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

src/Layer.js

@@ -158,4 +158,6 @@ /**
 
-        domStyle.width = width + 'px';
-        domStyle.height = height + 'px';
+        if (domStyle) {
+            domStyle.width = width + 'px';
+            domStyle.height = height + 'px';
+        }
 
@@ -177,5 +179,6 @@ dom.width = width * dpr;
      * 清空该层画布
-     * @param {boolean} clearAll Clear all with out motion blur
+     * @param {boolean} [clearAll]=false Clear all with out motion blur
+     * @param {Color} [clearColor]
      */
-    clear: function (clearAll) {
+    clear: function (clearAll, clearColor) {
         var dom = this.dom;
@@ -186,3 +189,3 @@ var ctx = this.ctx;
 
-        var clearColor = this.clearColor;
+        var clearColor = clearColor || this.clearColor;
         var haveMotionBLur = this.motionBlur && !clearAll;
@@ -207,3 +210,3 @@ var lastFrameAlpha = this.lastFrameAlpha;
         ctx.clearRect(0, 0, width, height);
-        if (clearColor) {
+        if (clearColor && clearColor !== 'transparent') {
             var clearColorGradientOrPattern;
@@ -210,0 +213,0 @@ // Gradient

src/Painter.js

@@ -178,11 +178,17 @@ import {devicePixelRatio} from './config';
     else {
+        var width = root.width;
+        var height = root.height;
+
         if (opts.width != null) {
-            root.width = opts.width;
+            width = opts.width;
         }
         if (opts.height != null) {
-            root.height = opts.height;
+            height = opts.height;
         }
+        this.dpr = opts.devicePixelRatio || 1;
+
         // Use canvas width and height directly
-        var width = root.width;
-        var height = root.height;
+        root.width = width * this.dpr;
+        root.height = height * this.dpr;
+
         this._width = width;
@@ -192,4 +198,4 @@ this._height = height;
         // Create layer if only one given canvas
-        // Device pixel ratio is fixed to 1 because given canvas has its specified width and height
-        var mainLayer = new Layer(root, this, 1);
+        // Device can be specified to create a high dpi image.
+        var mainLayer = new Layer(root, this, this.dpr);
         mainLayer.__builtin__ = true;
@@ -266,3 +272,4 @@ mainLayer.initContext();
             if (!layer.__builtin__ && layer.refresh) {
-                layer.refresh();
+                var clearColor = i === 0 ? this._backgroundColor : null;
+                layer.refresh(clearColor);
             }
@@ -422,5 +429,7 @@ }
 
+            var clearColor = layer.zlevel === this._zlevelList[0]
+                ? this._backgroundColor : null;
             // All elements in this layer are cleared.
             if (layer.__startIndex === layer.__endIndex) {
-                layer.clear();
+                layer.clear(false, clearColor);
             }
@@ -430,3 +439,3 @@ else if (start === layer.__startIndex) {
                 if (!firstEl.incremental || !firstEl.notClear || paintAll) {
-                    layer.clear();
+                    layer.clear(false, clearColor);
                 }
@@ -770,2 +779,6 @@ }
 
+    setBackgroundColor: function (backgroundColor) {
+        this._backgroundColor = backgroundColor;
+    },
+
     /**
@@ -908,4 +921,3 @@ * 修改指定zlevel的绘制参数
         imageLayer.initContext();
-        imageLayer.clearColor = opts.backgroundColor;
-        imageLayer.clear();
+        imageLayer.clear(false, opts.backgroundColor || this._backgroundColor);
 
@@ -912,0 +924,0 @@ if (opts.pixelRatio <= this.dpr) {

src/svg/Painter.js

@@ -148,2 +148,7 @@ /**
 
+    setBackgroundColor: function (backgroundColor) {
+        // TODO gradient
+        this._viewport.style.background = backgroundColor;
+    },
+
     _paintList: function (list) {
@@ -385,6 +390,6 @@ this.gradientManager.markAllUnused();
 
-    pathToSvg: function () {
+    pathToDataUrl: function () {
         this.refresh();
         var html = this._svgRoot.outerHTML;
-        return 'data:img/svg+xml;utf-8,' + unescape(html);
+        return 'data:image/svg+xml;charset=UTF-8,' + html;
     }
@@ -391,0 +396,0 @@ };

src/tool/color.js

@@ -379,2 +379,8 @@ import LRU from '../core/LRU';
             }
+            if (colorArr[i] > 255) {
+                colorArr[i] = 255;
+            }
+            else if (color[i] < 0) {
+                colorArr[i] = 0;
+            }
         }
@@ -381,0 +387,0 @@ return stringify(colorArr, colorArr.length === 4 ? 'rgba' : 'rgb');

src/zrender.js

@@ -31,3 +31,3 @@ /*!
  */
-export var version = '4.0.2';
+export var version = '4.0.3';
 
@@ -209,3 +209,5 @@ /**
     configLayer: function (zLevel, config) {
-        this.painter.configLayer(zLevel, config);
+        if (this.painter.configLayer) {
+            this.painter.configLayer(zLevel, config);
+        }
         this._needsRefresh = true;
@@ -215,2 +217,13 @@ },
     /**
+     * Set background color
+     * @param {string} backgroundColor
+     */
+    setBackgroundColor: function (backgroundColor) {
+        if (this.painter.setBackgroundColor) {
+            this.painter.setBackgroundColor(backgroundColor);
+        }
+        this._needsRefresh = true;
+    },
+
+    /**
      * Repaint the canvas immediately
@@ -217,0 +230,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

3085248

increased by0.21%

Lines of code

61939

increased by0.16%

No dependency changes