zrender - npm Package Compare versions

Comparing version 3.7.4 to 4.0.0

lib/animation/Animation.js

@@ -152,3 +152,5 @@ var util = require("../core/util");
     this._time = time;
-    this.onframe(delta);
+    this.onframe(delta); // Frame should before stage update. Upper application
+    // depends on the sequence (e.g., echarts-stream)
+
     this.trigger('frame', delta);
@@ -155,0 +157,0 @@

lib/contain/text.js

@@ -11,2 +11,3 @@ var BoundingRect = require("../core/BoundingRect");
 var retrieve3 = _util.retrieve3;
+var trim = _util.trim;
 var textWidthCache = {};
@@ -672,4 +673,5 @@ var textWidthCacheCounter = 0;
   // Use `fontSize` `fontFamily` to check whether font properties are defined.
-  return (style.fontSize || style.fontFamily) && [style.fontStyle, style.fontWeight, (style.fontSize || 12) + 'px', // If font properties are defined, `fontFamily` should not be ignored.
-  style.fontFamily || 'sans-serif'].join(' ') || style.textFont || style.font;
+  var font = (style.fontSize || style.fontFamily) && [style.fontStyle, style.fontWeight, (style.fontSize || 12) + 'px', // If font properties are defined, `fontFamily` should not be ignored.
+  style.fontFamily || 'sans-serif'].join(' ');
+  return font && trim(font) || style.textFont || style.font;
 }
@@ -676,0 +678,0 @@

lib/core/env.js

@@ -10,3 +10,24 @@ /**
 
-if (typeof navigator === 'undefined') {
+if (typeof wx !== 'undefined') {
+  // In Weixin Application
+  env = {
+    browser: {},
+    os: {},
+    node: false,
+    wxa: true,
+    // Weixin Application
+    canvasSupported: true,
+    svgSupported: false,
+    touchEventsSupported: true
+  };
+} else if (typeof document === 'undefined' && typeof self !== 'undefined') {
+  // In worker
+  env = {
+    browser: {},
+    os: {},
+    node: false,
+    worker: true,
+    canvasSupported: true
+  };
+} else if (typeof navigator === 'undefined') {
   // In node
@@ -17,2 +38,3 @@ env = {
     node: true,
+    worker: false,
     // Assume canvas is supported
@@ -111,3 +133,2 @@ canvasSupported: true,
     svgSupported: typeof SVGRect !== 'undefined',
-    // @see <http://stackoverflow.com/questions/4817029/whats-the-best-way-to-detect-a-touch-screen-device-using-javascript>
     // works on most browsers
@@ -114,0 +135,0 @@ // IE10/11 does not support touch event, and MS Edge supports them but not by

lib/core/matrix.js

@@ -7,3 +7,3 @@ /**
 /**
- * 创建一个单位矩阵
+ * Create a identity matrix.
  * @return {Float32Array|Array.<number>}
@@ -164,3 +164,14 @@ */
 }
+/**
+ * Clone a new matrix.
+ * @param {Float32Array|Array.<number>} a
+ */
 
+
+function clone(a) {
+  var b = create();
+  copy(b, a);
+  return b;
+}
+
 exports.create = create;
@@ -173,2 +184,3 @@ exports.identity = identity;
 exports.scale = scale;
-exports.invert = invert;
+exports.invert = invert;
+exports.clone = clone;

lib/core/util.js

@@ -38,2 +38,7 @@ /**
 function $override(name, fn) {
+  // Clear ctx instance for different environment
+  if (name === 'createCanvas') {
+    _ctx = null;
+  }
+
   methods[name] = fn;
@@ -68,17 +73,21 @@ }
   if (typeStr === '[object Array]') {
-    result = [];
+    if (!isPrimitive(source)) {
+      result = [];
 
-    for (var i = 0, len = source.length; i < len; i++) {
-      result[i] = clone(source[i]);
+      for (var i = 0, len = source.length; i < len; i++) {
+        result[i] = clone(source[i]);
+      }
     }
   } else if (TYPED_ARRAY[typeStr]) {
-    var Ctor = source.constructor;
+    if (!isPrimitive(source)) {
+      var Ctor = source.constructor;
 
-    if (source.constructor.from) {
-      result = Ctor.from(source);
-    } else {
-      result = new Ctor(source.length);
+      if (source.constructor.from) {
+        result = Ctor.from(source);
+      } else {
+        result = new Ctor(source.length);
 
-      for (var i = 0, len = source.length; i < len; i++) {
-        result[i] = clone(source[i]);
+        for (var i = 0, len = source.length; i < len; i++) {
+          result[i] = clone(source[i]);
+        }
       }
@@ -493,2 +502,12 @@ }
 
+function isTypedArray(value) {
+  return !!TYPED_ARRAY[objToString.call(value)];
+}
+/**
+ * @memberOf module:zrender/core/util
+ * @param {*} value
+ * @return {boolean}
+ */
+
+
 function isDom(value) {
@@ -582,3 +601,19 @@ return typeof value === 'object' && typeof value.nodeType === 'number' && typeof value.ownerDocument === 'object';
 }
+/**
+ * @memberOf module:zrender/core/util
+ * @param {string} str string to be trimed
+ * @return {string} trimed string
+ */
 
+
+function trim(str) {
+  if (str == null) {
+    return null;
+  } else if (typeof str.trim === 'function') {
+    return str.trim();
+  } else {
+    return str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
+  }
+}
+
 var primitiveKey = '__ec_primitive__';
@@ -603,10 +638,12 @@ /**
 function HashMap(obj) {
-  obj && each(obj, function (value, key) {
-    this.set(key, value);
-  }, this);
+  var isArr = isArray(obj);
+  var thisMap = this;
+  obj instanceof HashMap ? obj.each(visit) : obj && each(obj, visit);
+
+  function visit(value, key) {
+    isArr ? thisMap.set(value, key) : thisMap.set(key, value);
+  }
 } // Add prefix to avoid conflict with Object.prototype.
 
 
-var HASH_MAP_PREFIX = '_ec_';
-var HASH_MAP_PREFIX_LENGTH = 4;
 HashMap.prototype = {
@@ -618,9 +655,8 @@ constructor: HashMap,
   get: function (key) {
-    return this[HASH_MAP_PREFIX + key];
+    return this.hasOwnProperty(key) ? this[key] : null;
   },
   set: function (key, value) {
-    this[HASH_MAP_PREFIX + key] = value; // Comparing with invocation chaining, `return value` is more commonly
+    // Comparing with invocation chaining, `return value` is more commonly
     // used in this case: `var someVal = map.set('a', genVal());`
-
-    return value;
+    return this[key] = value;
   },
@@ -632,4 +668,4 @@ // Although util.each can be performed on this hashMap directly, user
 
-    for (var prefixedKey in this) {
-      this.hasOwnProperty(prefixedKey) && cb(this[prefixedKey], prefixedKey.slice(HASH_MAP_PREFIX_LENGTH));
+    for (var key in this) {
+      this.hasOwnProperty(key) && cb(this[key], key);
     }
@@ -639,3 +675,3 @@ },
   removeKey: function (key) {
-    delete this[HASH_MAP_PREFIX + key];
+    delete this[key];
   }
@@ -648,2 +684,18 @@ };
 
+function concatArray(a, b) {
+  var newArray = new a.constructor(a.length + b.length);
+
+  for (var i = 0; i < a.length; i++) {
+    newArray[i] = a[i];
+  }
+
+  var offset = a.length;
+
+  for (i = 0; i < b.length; i++) {
+    newArray[i + offset] = b[i];
+  }
+
+  return newArray;
+}
+
 function noop() {}
@@ -675,2 +727,3 @@
 exports.isBuiltInObject = isBuiltInObject;
+exports.isTypedArray = isTypedArray;
 exports.isDom = isDom;
@@ -684,5 +737,7 @@ exports.eqNaN = eqNaN;
 exports.assert = assert;
+exports.trim = trim;
 exports.setAsPrimitive = setAsPrimitive;
 exports.isPrimitive = isPrimitive;
 exports.createHashMap = createHashMap;
+exports.concatArray = concatArray;
 exports.noop = noop;

lib/dom/HandlerProxy.js

@@ -328,3 +328,3 @@ var _event = require("../core/event");
 handlerDomProxyProto.setCursor = function (cursorStyle) {
-  this.dom.style.cursor = cursorStyle || 'default';
+  this.dom.style && (this.dom.style.cursor = cursorStyle || 'default');
 };
@@ -331,0 +331,0 @@

lib/Element.js

@@ -73,2 +73,8 @@ var guid = require("./core/guid");
   /**
+   * 是否是 Group
+   * @type {boolean}
+   */
+  isGroup: false,
+
+  /**
    * Drift element
@@ -75,0 +81,0 @@ * @param  {number} dx dx on the global space

lib/export.js

@@ -41,2 +41,6 @@ var zrUtil = require("./core/util");
 
+var _IncrementalDisplayable = require("./graphic/IncrementalDisplayable");
+
+exports.IncrementalDisplayable = _IncrementalDisplayable;
+
 var _Arc = require("./graphic/shape/Arc");
@@ -43,0 +47,0 @@

lib/graphic/Displayable.js

@@ -132,5 +132,12 @@ var zrUtil = require("../core/util");
    * usefull for large data.
-   * @type {number}
+   * @type {boolean}
    */
-  progressive: -1,
+  progressive: false,
+
+  /**
+   * @type {boolean}
+   */
+  incremental: false,
+  // inplace is used with incremental
+  inplace: false,
   beforeBrush: function (ctx) {},
@@ -137,0 +144,0 @@ afterBrush: function (ctx) {},

lib/graphic/helper/text.js

@@ -16,2 +16,4 @@ var _util = require("../../core/util");
 
+var fixShadow = require("./fixShadow");
+
 // TODO: Have not support 'start', 'end' yet.
@@ -382,7 +384,3 @@ var VALID_TEXT_ALIGN = {
 function setCtx(ctx, prop, value) {
-  // FIXME ??? performance try
-  // if (ctx.__currentValues[prop] !== value) {
-  // ctx[prop] = ctx.__currentValues[prop] = value;
-  ctx[prop] = value; // }
-
+  ctx[prop] = fixShadow(ctx, prop, value);
   return ctx[prop];
@@ -389,0 +387,0 @@ }

lib/graphic/Image.js

@@ -71,7 +71,8 @@ var Displayable = require("./Displayable");
       ctx.drawImage(image, x, y, width, height);
-    }
+    } // Draw rect text
 
-    this.restoreTransform(ctx); // Draw rect text
 
     if (style.text != null) {
+      // Only restore transform when needs draw text.
+      this.restoreTransform(ctx);
       this.drawRectText(ctx, this.getBoundingRect());
@@ -78,0 +79,0 @@ }

lib/graphic/Path.js

@@ -121,7 +121,8 @@ var Displayable = require("./Displayable");
       ctx.setLineDash([]);
-    }
+    } // Draw rect text
 
-    this.restoreTransform(ctx); // Draw rect text
 
     if (style.text != null) {
+      // Only restore transform when needs draw text.
+      this.restoreTransform(ctx);
       this.drawRectText(ctx, this.getBoundingRect());
@@ -128,0 +129,0 @@ }

lib/graphic/Style.js

@@ -0,1 +1,3 @@
+var fixShadow = require("./helper/fixShadow");
+
 var STYLE_COMMON_PROPS = [['shadowBlur', 0], ['shadowOffsetX', 0], ['shadowOffsetY', 0], ['shadowColor', '#000'], ['lineCap', 'butt'], ['lineJoin', 'miter'], ['miterLimit', 10]]; // var SHADOW_PROPS = STYLE_COMMON_PROPS.slice(0, 4);
@@ -349,3 +351,3 @@ // var LINE_PROPS = STYLE_COMMON_PROPS.slice(4);
         // FIXME Invalid property value will cause style leak from previous element.
-        ctx[styleName] = style[styleName] || prop[1];
+        ctx[styleName] = fixShadow(ctx, styleName, style[styleName] || prop[1]);
       }
@@ -352,0 +354,0 @@ }

lib/Handler.js

@@ -9,9 +9,2 @@ var util = require("./core/util");
 
-/**
- * Handler
- * @module zrender/Handler
- * @author Kener (@Kener-林峰, [e-mail])
- *         errorrik ([e-mail])
- *         pissang ([e-mail])
- */
 var SILENT = 'silent';
@@ -65,5 +58,3 @@
 
-  this.proxy = proxy; // Attach handler
-
-  proxy.handler = this;
+  this.proxy = null;
   /**
@@ -95,5 +86,3 @@ * {target, topTarget, x, y}
   Draggable.call(this);
-  util.each(handlerNames, function (name) {
-    proxy.on && proxy.on(name, this[name], this);
-  }, this);
+  this.setHandlerProxy(proxy);
 };
@@ -103,2 +92,17 @@
   constructor: Handler,
+  setHandlerProxy: function (proxy) {
+    if (this.proxy) {
+      this.proxy.dispose();
+    }
+
+    if (proxy) {
+      util.each(handlerNames, function (name) {
+        proxy.on && proxy.on(name, this[name], this);
+      }, this); // Attach handler
+
+      proxy.handler = this;
+    }
+
+    this.proxy = proxy;
+  },
   mousemove: function (event) {
@@ -277,3 +281,3 @@ var x = event.zrX;
       this._upEl = hoveredTarget;
-    } else if (name === 'mosueup') {
+    } else if (name === 'mouseup') {
       this._upEl = hoveredTarget;
@@ -280,0 +284,0 @@ } else if (name === 'click') {

lib/Layer.js

@@ -32,13 +32,16 @@ var util = require("./core/util");
   var height = painter.getHeight();
-  var newDomStyle = newDom.style; // 没append呢，请原谅我这样写，清晰~
+  var newDomStyle = newDom.style;
 
-  newDomStyle.position = 'absolute';
-  newDomStyle.left = 0;
-  newDomStyle.top = 0;
-  newDomStyle.width = width + 'px';
-  newDomStyle.height = height + 'px';
+  if (newDomStyle) {
+    // In node or some other non-browser environment
+    newDomStyle.position = 'absolute';
+    newDomStyle.left = 0;
+    newDomStyle.top = 0;
+    newDomStyle.width = width + 'px';
+    newDomStyle.height = height + 'px';
+    newDom.setAttribute('data-zr-dom-id', id);
+  }
+
   newDom.width = width * dpr;
-  newDom.height = height * dpr; // id不作为索引用，避免可能造成的重名，定义为私有属性
-
-  newDom.setAttribute('data-zr-dom-id', id);
+  newDom.height = height * dpr;
   return newDom;
@@ -121,7 +124,13 @@ }
   constructor: Layer,
-  elCount: 0,
   __dirty: true,
+  __used: false,
+  __drawIndex: 0,
+  __startIndex: 0,
+  __endIndex: 0,
+  incremental: false,
+  getElementCount: function () {
+    return this.__endIndex - this.__startIndex;
+  },
   initContext: function () {
     this.ctx = this.dom.getContext('2d');
-    this.ctx.__currentValues = {};
     this.ctx.dpr = this.dpr;
@@ -133,3 +142,2 @@ },
     this.ctxBack = this.domBack.getContext('2d');
-    this.ctxBack.__currentValues = {};
 
@@ -136,0 +144,0 @@ if (dpr != 1) {

lib/Painter.js

@@ -19,15 +19,9 @@ var _config = require("./config");
 
-/**
- * Default canvas painter
- * @module zrender/Painter
- * @author Kener (@Kener-林峰, [e-mail])
- *         errorrik ([e-mail])
- *         pissang (https://www.github.com/pissang)
- */
-// PENDIGN
-// Layer exceeds MAX_PROGRESSIVE_LAYER_NUMBER may have some problem when flush directly second time.
-//
-// Maximum progressive layer. When exceeding this number. All elements will be drawed in the last layer.
-var MAX_PROGRESSIVE_LAYER_NUMBER = 5;
+var env = require("./core/env");
 
+var HOVER_LAYER_ZLEVEL = 1e5;
+var CANVAS_ZLEVEL = 314159;
+var EL_AFTER_INCREMENTAL_INC = 0.01;
+var INCREMENTAL_INC = 0.001;
+
 function parseInt10(val) {
@@ -53,12 +47,2 @@ return parseInt(val, 10);
 
-function preProcessLayer(layer) {
-  layer.__unusedCount++;
-}
-
-function postProcessLayer(layer) {
-  if (layer.__unusedCount == 1) {
-    layer.clear();
-  }
-}
-
 var tmpRect = new BoundingRect(0, 0, 0, 0);
@@ -173,7 +157,12 @@ var viewRect = new BoundingRect(0, 0, 0, 0);
    * @type {Object.<string, Object>}
-   * @type {private}
+   * @private
    */
 
   this._layerConfig = {};
+  /**
+   * zrender will do compositing when root is a canvas and have multiple zlevels.
+   */
 
+  this._needsManuallyCompositing = false;
+
   if (!singleCanvas) {
@@ -201,12 +190,11 @@ this._width = this._getSize(0);
     var mainLayer = new Layer(root, this, 1);
+    mainLayer.__builtin__ = true;
     mainLayer.initContext(); // FIXME Use canvas width and height
     // mainLayer.resize(width, height);
 
-    layers[0] = mainLayer;
-    zlevelList.push(0);
+    layers[CANVAS_ZLEVEL] = mainLayer; // Not use common zlevel.
+
+    zlevelList.push(CANVAS_ZLEVEL);
     this._domRoot = root;
-  } // Layers for progressive rendering
-
-
-  this._progressiveLayers = [];
+  }
   /**
@@ -217,3 +205,4 @@ * @type {module:zrender/Layer}
 
-  this._hoverlayer;
+
+  this._hoverlayer = null;
   this._hoverElements = [];
@@ -260,4 +249,5 @@ };
     var zlevelList = this._zlevelList;
+    this._redrawId = Math.random();
 
-    this._paintList(list, paintAll); // Paint custum layers
+    this._paintList(list, paintAll, this._redrawId); // Paint custum layers
 
@@ -275,7 +265,2 @@
     this.refreshHover();
-
-    if (this._progressiveLayers.length) {
-      this._startProgessive();
-    }
-
     return this;
@@ -336,3 +321,3 @@ },
     if (!hoverLayer) {
-      hoverLayer = this._hoverlayer = this.getLayer(1e5);
+      hoverLayer = this._hoverlayer = this.getLayer(HOVER_LAYER_ZLEVEL);
     }
@@ -369,169 +354,114 @@
   },
-  _startProgessive: function () {
-    var self = this;
-
-    if (!self._furtherProgressive) {
+  getHoverLayer: function () {
+    return this.getLayer(HOVER_LAYER_ZLEVEL);
+  },
+  _paintList: function (list, paintAll, redrawId) {
+    if (this._redrawId !== redrawId) {
       return;
-    } // Use a token to stop progress steps triggered by
-    // previous zr.refresh calling.
+    }
 
+    paintAll = paintAll || false;
 
-    var token = self._progressiveToken = +new Date();
-    self._progress++;
-    requestAnimationFrame(step);
+    this._updateLayerStatus(list);
 
-    function step() {
-      // In case refreshed or disposed
-      if (token === self._progressiveToken && self.storage) {
-        self._doPaintList(self.storage.getDisplayList());
+    var finished = this._doPaintList(list, paintAll);
 
-        if (self._furtherProgressive) {
-          self._progress++;
-          requestAnimationFrame(step);
-        } else {
-          self._progressiveToken = -1;
-        }
-      }
+    if (this._needsManuallyCompositing) {
+      this._compositeManually();
     }
+
+    if (!finished) {
+      var self = this;
+      requestAnimationFrame(function () {
+        self._paintList(list, paintAll, redrawId);
+      });
+    }
   },
-  _clearProgressive: function () {
-    this._progressiveToken = -1;
-    this._progress = 0;
-    util.each(this._progressiveLayers, function (layer) {
-      layer.__dirty && layer.clear();
+  _compositeManually: function () {
+    var ctx = this.getLayer(CANVAS_ZLEVEL).ctx;
+    var width = this._domRoot.width;
+    var height = this._domRoot.height;
+    ctx.clearRect(0, 0, width, height); // PENDING, If only builtin layer?
+
+    this.eachBuiltinLayer(function (layer) {
+      if (layer.virtual) {
+        ctx.drawImage(layer.dom, 0, 0, width, height);
+      }
     });
   },
-  _paintList: function (list, paintAll) {
-    if (paintAll == null) {
-      paintAll = false;
-    }
-
-    this._updateLayerStatus(list);
-
-    this._clearProgressive();
-
-    this.eachBuiltinLayer(preProcessLayer);
-
-    this._doPaintList(list, paintAll);
-
-    this.eachBuiltinLayer(postProcessLayer);
-  },
   _doPaintList: function (list, paintAll) {
-    var currentLayer;
-    var currentZLevel;
-    var ctx; // var invTransform = [];
+    var layerList = [];
 
-    var scope;
-    var progressiveLayerIdx = 0;
-    var currentProgressiveLayer;
-    var width = this._width;
-    var height = this._height;
-    var layerProgress;
-    var frame = this._progress;
+    for (var zi = 0; zi < this._zlevelList.length; zi++) {
+      var zlevel = this._zlevelList[zi];
+      var layer = this._layers[zlevel];
 
-    function flushProgressiveLayer(layer) {
-      var dpr = ctx.dpr || 1;
-      ctx.save();
-      ctx.globalAlpha = 1;
-      ctx.shadowBlur = 0; // Avoid layer don't clear in next progressive frame
-
-      currentLayer.__dirty = true;
-      ctx.setTransform(1, 0, 0, 1, 0, 0);
-      ctx.drawImage(layer.dom, 0, 0, width * dpr, height * dpr);
-      ctx.restore();
+      if (layer.__builtin__ && layer !== this._hoverlayer && (layer.__dirty || paintAll)) {
+        layerList.push(layer);
+      }
     }
 
-    for (var i = 0, l = list.length; i < l; i++) {
-      var el = list[i];
-      var elZLevel = this._singleCanvas ? 0 : el.zlevel;
-      var elFrame = el.__frame; // Flush at current context
-      // PENDING
+    var finished = true;
 
-      if (elFrame < 0 && currentProgressiveLayer) {
-        flushProgressiveLayer(currentProgressiveLayer);
-        currentProgressiveLayer = null;
-      } // Change draw layer
+    for (var k = 0; k < layerList.length; k++) {
+      var layer = layerList[k];
+      var ctx = layer.ctx;
+      var scope = {};
+      ctx.save();
+      var start = paintAll ? layer.__startIndex : layer.__drawIndex;
+      var useTimer = !paintAll && layer.incremental && Date.now;
+      var startTime = useTimer && Date.now(); // All elements in this layer are cleared.
 
+      if (layer.__startIndex === layer.__endIndex) {
+        layer.clear();
+      } else if (start === layer.__startIndex) {
+        var firstEl = list[start];
 
-      if (currentZLevel !== elZLevel) {
-        if (ctx) {
-          ctx.restore();
-        } // Reset scope
-
-
-        scope = {}; // Only 0 zlevel if only has one canvas
-
-        currentZLevel = elZLevel;
-        currentLayer = this.getLayer(currentZLevel);
-
-        if (!currentLayer.__builtin__) {
-          log('ZLevel ' + currentZLevel + ' has been used by unkown layer ' + currentLayer.id);
+        if (!firstEl.incremental || !firstEl.notClear || paintAll) {
+          layer.clear();
         }
-
-        ctx = currentLayer.ctx;
-        ctx.save(); // Reset the count
-
-        currentLayer.__unusedCount = 0;
-
-        if (currentLayer.__dirty || paintAll) {
-          currentLayer.clear();
-        }
       }
 
-      if (!(currentLayer.__dirty || paintAll)) {
-        continue;
+      if (start === -1) {
+        console.error('For some unknown reason. drawIndex is -1');
+        start = layer.__startIndex;
       }
 
-      if (elFrame >= 0) {
-        // Progressive layer changed
-        if (!currentProgressiveLayer) {
-          currentProgressiveLayer = this._progressiveLayers[Math.min(progressiveLayerIdx++, MAX_PROGRESSIVE_LAYER_NUMBER - 1)];
-          currentProgressiveLayer.ctx.save();
-          currentProgressiveLayer.renderScope = {};
+      for (var i = start; i < layer.__endIndex; i++) {
+        var el = list[i];
 
-          if (currentProgressiveLayer && currentProgressiveLayer.__progress > currentProgressiveLayer.__maxProgress) {
-            // flushProgressiveLayer(currentProgressiveLayer);
-            // Quick jump all progressive elements
-            // All progressive element are not dirty, jump over and flush directly
-            i = currentProgressiveLayer.__nextIdxNotProg - 1; // currentProgressiveLayer = null;
+        this._doPaintEl(el, layer, paintAll, scope);
 
-            continue;
-          }
+        el.__dirty = false;
 
-          layerProgress = currentProgressiveLayer.__progress;
+        if (useTimer) {
+          // Date.now can be executed in 13,025,305 ops/second.
+          var dTime = Date.now() - startTime; // Give 15 millisecond to draw.
+          // The rest elements will be drawn in the next frame.
 
-          if (!currentProgressiveLayer.__dirty) {
-            // Keep rendering
-            frame = layerProgress;
+          if (dTime > 15) {
+            break;
           }
-
-          currentProgressiveLayer.__progress = frame + 1;
         }
+      }
 
-        if (elFrame === frame) {
-          this._doPaintEl(el, currentProgressiveLayer, true, currentProgressiveLayer.renderScope);
-        }
-      } else {
-        this._doPaintEl(el, currentLayer, paintAll, scope);
+      layer.__drawIndex = i;
+
+      if (layer.__drawIndex < layer.__endIndex) {
+        finished = false;
       }
 
-      el.__dirty = false;
+      ctx.restore();
     }
 
-    if (currentProgressiveLayer) {
-      flushProgressiveLayer(currentProgressiveLayer);
-    } // Restore the lastLayer ctx
+    if (env.wxa) {
+      // Flush for weixin application
+      util.each(this._layers, function (layer) {
+        if (layer && layer.ctx && layer.ctx.draw) {
+          layer.ctx.draw();
+        }
+      });
+    }
 
-
-    ctx && ctx.restore(); // If still has clipping state
-    // if (scope.prevElClipPaths) {
-    //     ctx.restore();
-    // }
-
-    this._furtherProgressive = false;
-    util.each(this._progressiveLayers, function (layer) {
-      if (layer.__maxProgress >= layer.__progress) {
-        this._furtherProgressive = true;
-      }
-    }, this);
+    return finished;
   },
@@ -579,7 +509,8 @@ _doPaintEl: function (el, currentLayer, forcePaint, scope) {
    * @param {number} zlevel
+   * @param {boolean} virtual Virtual layer will not be inserted into dom.
    * @return {module:zrender/Layer}
    */
-  getLayer: function (zlevel) {
-    if (this._singleCanvas) {
-      return this._layers[0];
+  getLayer: function (zlevel, virtual) {
+    if (this._singleCanvas && !this._needsManuallyCompositing) {
+      zlevel = CANVAS_ZLEVEL;
     }
@@ -592,2 +523,3 @@
       layer = new Layer('zr_' + zlevel, this, this.dpr);
+      layer.zlevel = zlevel;
       layer.__builtin__ = true;
@@ -599,2 +531,6 @@
 
+      if (virtual) {
+        layer.virtual = virtual;
+      }
+
       this.insertLayer(zlevel, layer); // Context is created after dom inserted to document
@@ -712,92 +648,89 @@ // Or excanvas will get 0px clientWidth and clientHeight
   _updateLayerStatus: function (list) {
-    var layers = this._layers;
-    var progressiveLayers = this._progressiveLayers;
-    var elCountsLastFrame = {};
-    var progressiveElCountsLastFrame = {};
     this.eachBuiltinLayer(function (layer, z) {
-      elCountsLastFrame[z] = layer.elCount;
-      layer.elCount = 0;
-      layer.__dirty = false;
+      layer.__dirty = layer.__used = false;
     });
-    util.each(progressiveLayers, function (layer, idx) {
-      progressiveElCountsLastFrame[idx] = layer.elCount;
-      layer.elCount = 0;
-      layer.__dirty = false;
-    });
-    var progressiveLayerCount = 0;
-    var currentProgressiveLayer;
-    var lastProgressiveKey;
-    var frameCount = 0;
 
-    for (var i = 0, l = list.length; i < l; i++) {
-      var el = list[i];
-      var zlevel = this._singleCanvas ? 0 : el.zlevel;
-      var layer = layers[zlevel];
-      var elProgress = el.progressive;
+    function updatePrevLayer(idx) {
+      if (prevLayer) {
+        if (prevLayer.__endIndex !== idx) {
+          prevLayer.__dirty = true;
+        }
 
-      if (layer) {
-        layer.elCount++;
-        layer.__dirty = layer.__dirty || el.__dirty;
-      } /////// Update progressive
+        prevLayer.__endIndex = idx;
+      }
+    }
 
+    if (this._singleCanvas) {
+      for (var i = 1; i < list.length; i++) {
+        var el = list[i];
 
-      if (elProgress >= 0) {
-        // Fix wrong progressive sequence problem.
-        if (lastProgressiveKey !== elProgress) {
-          lastProgressiveKey = elProgress;
-          frameCount++;
+        if (el.zlevel !== list[i - 1].zlevel || el.incremental) {
+          this._needsManuallyCompositing = true;
+          break;
         }
+      }
+    }
 
-        var elFrame = el.__frame = frameCount - 1;
+    var prevLayer = null;
+    var incrementalLayerCount = 0;
 
-        if (!currentProgressiveLayer) {
-          var idx = Math.min(progressiveLayerCount, MAX_PROGRESSIVE_LAYER_NUMBER - 1);
-          currentProgressiveLayer = progressiveLayers[idx];
+    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 (!currentProgressiveLayer) {
-            currentProgressiveLayer = progressiveLayers[idx] = new Layer('progressive', this, this.dpr);
-            currentProgressiveLayer.initContext();
-          }
+      if (el.incremental) {
+        layer = this.getLayer(zlevel + INCREMENTAL_INC, this._needsManuallyCompositing);
+        layer.incremental = true;
+        incrementalLayerCount = 1;
+      } else {
+        layer = this.getLayer(zlevel + (incrementalLayerCount > 0 ? EL_AFTER_INCREMENTAL_INC : 0), this._needsManuallyCompositing);
+      }
 
-          currentProgressiveLayer.__maxProgress = 0;
-        }
+      if (!layer.__builtin__) {
+        log('ZLevel ' + zlevel + ' has been used by unkown layer ' + layer.id);
+      }
 
-        currentProgressiveLayer.__dirty = currentProgressiveLayer.__dirty || el.__dirty;
-        currentProgressiveLayer.elCount++;
-        currentProgressiveLayer.__maxProgress = Math.max(currentProgressiveLayer.__maxProgress, elFrame);
+      if (layer !== prevLayer) {
+        layer.__used = true;
 
-        if (currentProgressiveLayer.__maxProgress >= currentProgressiveLayer.__progress) {
-          // Should keep rendering this  layer because progressive rendering is not finished yet
+        if (layer.__startIndex !== i) {
           layer.__dirty = true;
         }
-      } else {
-        el.__frame = -1;
 
-        if (currentProgressiveLayer) {
-          currentProgressiveLayer.__nextIdxNotProg = i;
-          progressiveLayerCount++;
-          currentProgressiveLayer = null;
+        layer.__startIndex = i;
+
+        if (!layer.incremental) {
+          layer.__drawIndex = i;
+        } else {
+          // Mark layer draw index needs to update.
+          layer.__drawIndex = -1;
         }
+
+        updatePrevLayer(i);
+        prevLayer = layer;
       }
-    }
 
-    if (currentProgressiveLayer) {
-      progressiveLayerCount++;
-      currentProgressiveLayer.__nextIdxNotProg = i;
-    } // 层中的元素数量有发生变化
+      if (el.__dirty) {
+        layer.__dirty = true;
 
+        if (layer.incremental && layer.__drawIndex < 0) {
+          // Start draw from the first dirty element.
+          layer.__drawIndex = i;
+        }
+      }
+    }
 
+    updatePrevLayer(i);
     this.eachBuiltinLayer(function (layer, z) {
-      if (elCountsLastFrame[z] !== layer.elCount) {
+      // Used in last frame but not in this frame. Needs clear
+      if (!layer.__used && layer.getElementCount() > 0) {
         layer.__dirty = true;
-      }
-    });
-    progressiveLayers.length = Math.min(progressiveLayerCount, MAX_PROGRESSIVE_LAYER_NUMBER);
-    util.each(progressiveLayers, function (layer, idx) {
-      if (progressiveElCountsLastFrame[idx] !== layer.elCount) {
-        el.__dirty = true;
-      }
+        layer.__startIndex = layer.__endIndex = layer.__drawIndex = 0;
+      } // For incremental layer. In case start index changed and no elements are dirty.
 
-      if (layer.__dirty) {
-        layer.__progress = 0;
+
+      if (layer.__dirty && layer.__drawIndex < 0) {
+        layer.__drawIndex = layer.__startIndex;
       }
@@ -838,6 +771,9 @@ });
 
-      var layer = this._layers[zlevel];
+      for (var i = 0; i < this._zlevelList.length; i++) {
+        var _zlevel = this._zlevelList[i];
 
-      if (layer) {
-        util.merge(layer, layerConfig[zlevel], true);
+        if (_zlevel === zlevel || _zlevel === zlevel + EL_AFTER_INCREMENTAL_INC) {
+          var layer = this._layers[_zlevel];
+          util.merge(layer, layerConfig[zlevel], true);
+        }
       }
@@ -869,31 +805,43 @@ }
   resize: function (width, height) {
-    var domRoot = this._domRoot; // FIXME Why ?
+    if (!this._domRoot.style) {
+      // Maybe in node or worker
+      if (width == null || height == null) {
+        return;
+      }
 
-    domRoot.style.display = 'none'; // Save input w/h
+      this._width = width;
+      this._height = height;
+      this.getLayer(CANVAS_ZLEVEL).resize(width, height);
+    } else {
+      var domRoot = this._domRoot; // FIXME Why ?
 
-    var opts = this._opts;
-    width != null && (opts.width = width);
-    height != null && (opts.height = height);
-    width = this._getSize(0);
-    height = this._getSize(1);
-    domRoot.style.display = ''; // 优化没有实际改变的resize
+      domRoot.style.display = 'none'; // Save input w/h
 
-    if (this._width != width || height != this._height) {
-      domRoot.style.width = width + 'px';
-      domRoot.style.height = height + 'px';
+      var opts = this._opts;
+      width != null && (opts.width = width);
+      height != null && (opts.height = height);
+      width = this._getSize(0);
+      height = this._getSize(1);
+      domRoot.style.display = ''; // 优化没有实际改变的resize
 
-      for (var id in this._layers) {
-        if (this._layers.hasOwnProperty(id)) {
-          this._layers[id].resize(width, height);
+      if (this._width != width || height != this._height) {
+        domRoot.style.width = width + 'px';
+        domRoot.style.height = height + 'px';
+
+        for (var id in this._layers) {
+          if (this._layers.hasOwnProperty(id)) {
+            this._layers[id].resize(width, height);
+          }
         }
+
+        util.each(this._progressiveLayers, function (layer) {
+          layer.resize(width, height);
+        });
+        this.refresh(true);
       }
 
-      util.each(this._progressiveLayers, function (layer) {
-        layer.resize(width, height);
-      });
-      this.refresh(true);
+      this._width = width;
+      this._height = height;
     }
 
-    this._width = width;
-    this._height = height;
     return this;
@@ -931,4 +879,4 @@ },
 
-    if (this._singleCanvas) {
-      return this._layers[0].dom;
+    if (this._singleCanvas && !this._compositeManually) {
+      return this._layers[CANVAS_ZLEVEL].dom;
     }
@@ -940,45 +888,29 @@
     imageLayer.clear();
-    var displayList = this.storage.getDisplayList(true);
-    var scope = {};
-    var zlevel;
-    var self = this;
 
-    function findAndDrawOtherLayer(smaller, larger) {
-      var zlevelList = self._zlevelList;
-
-      if (smaller == null) {
-        smaller = -Infinity;
-      }
-
-      var intermediateLayer;
-
-      for (var i = 0; i < zlevelList.length; i++) {
-        var z = zlevelList[i];
-        var layer = self._layers[z];
-
-        if (!layer.__builtin__ && z > smaller && z < larger) {
-          intermediateLayer = layer;
-          break;
+    if (opts.pixelRatio <= this.dpr) {
+      this.refresh();
+      var width = imageLayer.dom.width;
+      var height = imageLayer.dom.height;
+      var ctx = imageLayer.ctx;
+      this.eachLayer(function (layer) {
+        if (layer.__builtin__) {
+          ctx.drawImage(layer.dom, 0, 0, width, height);
+        } else if (layer.renderToCanvas) {
+          imageLayer.ctx.save();
+          layer.renderToCanvas(imageLayer.ctx);
+          imageLayer.ctx.restore();
         }
-      }
+      });
+    } else {
+      // PENDING, echarts-gl and incremental rendering.
+      var scope = {};
+      var displayList = this.storage.getDisplayList(true);
 
-      if (intermediateLayer && intermediateLayer.renderToCanvas) {
-        imageLayer.ctx.save();
-        intermediateLayer.renderToCanvas(imageLayer.ctx);
-        imageLayer.ctx.restore();
-      }
-    }
+      for (var i = 0; i < displayList.length; i++) {
+        var el = displayList[i];
 
-    for (var i = 0; i < displayList.length; i++) {
-      var el = displayList[i];
-
-      if (el.zlevel !== zlevel) {
-        findAndDrawOtherLayer(zlevel, el.zlevel);
-        zlevel = el.zlevel;
+        this._doPaintEl(el, imageLayer, true, scope);
       }
-
-      this._doPaintEl(el, imageLayer, true, scope);
     }
 
-    findAndDrawOtherLayer(zlevel, Infinity);
     return imageLayer.dom;
@@ -1022,5 +954,5 @@ },
     var style = path.style;
-    var shadowBlurSize = style.shadowBlur;
-    var shadowOffsetX = style.shadowOffsetX;
-    var shadowOffsetY = style.shadowOffsetY;
+    var shadowBlurSize = style.shadowBlur * dpr;
+    var shadowOffsetX = style.shadowOffsetX * dpr;
+    var shadowOffsetY = style.shadowOffsetY * dpr;
     var lineWidth = style.hasStroke() ? style.lineWidth : 0;
@@ -1027,0 +959,0 @@ var leftMargin = Math.max(lineWidth / 2, -shadowOffsetX + shadowBlurSize);

lib/Storage.js

@@ -9,9 +9,2 @@ var util = require("./core/util");
 
-/**
- * Storage内容仓库模块
- * @module zrender/Storage
- * @author Kener (@Kener-林峰, [e-mail])
- * @author errorrik ([e-mail])
- * @author pissang (https://github.com/pissang/)
- */
 // Use timsort because in most case elements are partially sorted
@@ -96,7 +89,3 @@ // https://jsfiddle.net/pissang/jr4x7mdm/8/
 
-    displayList.length = this._displayListLen; // for (var i = 0, len = displayList.length; i < len; i++) {
-    //     displayList[i].__renderidx = i;
-    // }
-    // displayList.sort(shapeCompareFunc);
-
+    displayList.length = this._displayListLen;
     env.canvasSupported && timsort(displayList, shapeCompareFunc);
@@ -221,4 +210,7 @@ },
   addToStorage: function (el) {
-    el.__storage = this;
-    el.dirty(false);
+    if (el) {
+      el.__storage = this;
+      el.dirty(false);
+    }
+
     return this;
@@ -225,0 +217,0 @@ },

lib/svg/graphic.js

@@ -99,5 +99,6 @@ var _core = require("./core");
     var strokeWidth = isText ? style.textStrokeWidth : style.lineWidth;
-    var strokeScale = style.strokeNoScale ? style.host.getLineScale() : 1;
-    attr(svgEl, 'stroke-width', strokeWidth / strokeScale);
-    attr(svgEl, 'paint-order', 'stroke');
+    var strokeScale = !isText && style.strokeNoScale ? style.host.getLineScale() : 1;
+    attr(svgEl, 'stroke-width', strokeWidth / strokeScale); // stroke then fill for text; fill then stroke for others
+
+    attr(svgEl, 'paint-order', isText ? 'stroke' : 'fill');
     attr(svgEl, 'stroke-opacity', style.opacity);
@@ -167,3 +168,3 @@ var lineDash = style.lineDash;
         var dThetaPositive = Math.abs(dTheta);
-        var isCircle = isAroundZero(dThetaPositive % PI2) && !isAroundZero(dThetaPositive);
+        var isCircle = isAroundZero(dThetaPositive - PI2) && !isAroundZero(dThetaPositive);
         var large = false;
@@ -170,0 +171,0 @@

lib/svg/helper/ClippathManager.js

@@ -17,6 +17,7 @@ var Definable = require("./Definable");
  * @extends Definable
+ * @param   {number}     zrId    zrender instance id
  * @param   {SVGElement} svgRoot root of SVG document
  */
-function ClippathManager(svgRoot) {
-  Definable.call(this, svgRoot, 'clipPath', '__clippath_in_use__');
+function ClippathManager(zrId, svgRoot) {
+  Definable.call(this, zrId, svgRoot, 'clipPath', '__clippath_in_use__');
 }
@@ -79,3 +80,3 @@
       // New <clipPath>
-      id = 'zr-clip-' + this.nextId;
+      id = 'zr' + this._zrId + '-clip-' + this.nextId;
       ++this.nextId;
@@ -111,2 +112,3 @@ clipPathEl = this.createElement('clipPath');
     var pathEl = this.getSvgElement(clipPath);
+    clipPathEl.innerHTML = '';
     /**
@@ -113,0 +115,0 @@ * Use `cloneNode()` here to appendChild to multiple parents,

lib/svg/helper/Definable.js

@@ -31,2 +31,3 @@ var _core = require("../core");
  * @class
+ * @param {number}          zrId      zrender instance id
  * @param {SVGElement}      svgRoot   root of SVG document
@@ -38,6 +39,8 @@ * @param {string|string[]} tagNames  possible tag names
 
-function Definable(svgRoot, tagNames, markLabel) {
+function Definable(zrId, svgRoot, tagNames, markLabel, domName) {
+  this._zrId = zrId;
   this._svgRoot = svgRoot;
   this._tagNames = typeof tagNames === 'string' ? [tagNames] : tagNames;
   this._markLabel = markLabel;
+  this._domName = domName || '_dom';
   this.nextId = 0;
@@ -110,6 +113,6 @@ }
 
-  if (element._dom && defs.contains(element._dom)) {
+  if (element[this._domName] && defs.contains(element[this._domName])) {
     // Update DOM
     if (typeof onUpdate === 'function') {
-      onUpdate();
+      onUpdate(element);
     }
@@ -121,3 +124,3 @@ } else {
     if (dom) {
-      element._dom = dom;
+      element[this._domName] = dom;
     }
@@ -146,3 +149,7 @@ }
   var defs = this.getDefs(false);
-  defs.removeChild(element._dom);
+
+  if (defs && element[this._domName]) {
+    defs.removeChild(element[this._domName]);
+    element[this._domName] = null;
+  }
 };
@@ -149,0 +156,0 @@ /**

lib/svg/helper/GradientManager.js

@@ -17,6 +17,7 @@ var Definable = require("./Definable");
  * @extends Definable
+ * @param   {number}     zrId    zrender instance id
  * @param   {SVGElement} svgRoot root of SVG document
  */
-function GradientManager(svgRoot) {
-  Definable.call(this, svgRoot, ['linearGradient', 'radialGradient'], '__gradient_in_use__');
+function GradientManager(zrId, svgRoot) {
+  Definable.call(this, zrId, svgRoot, ['linearGradient', 'radialGradient'], '__gradient_in_use__');
 }
@@ -90,3 +91,3 @@
   gradient.id = gradient.id || this.nextId++;
-  dom.setAttribute('id', 'zr-gradient-' + gradient.id);
+  dom.setAttribute('id', 'zr' + this._zrId + '-gradient-' + gradient.id);
   this.updateDom(gradient, dom);
@@ -93,0 +94,0 @@ this.addDom(dom);

lib/svg/Painter.js

@@ -23,2 +23,4 @@ var _core = require("./core");
 
+var ShadowManager = require("./helper/ShadowManager");
+
 var _graphic = require("./graphic");
@@ -96,3 +98,3 @@
 
-var SVGPainter = function (root, storage, opts) {
+var SVGPainter = function (root, storage, opts, zrId) {
   this.root = root;
@@ -105,6 +107,6 @@ this.storage = storage;
   svgRoot.setAttribute('baseProfile', 'full');
-  svgRoot.style['user-select'] = 'none';
-  svgRoot.style.cssText = 'position:absolute;left:0;top:0;';
-  this.gradientManager = new GradientManager(svgRoot);
-  this.clipPathManager = new ClippathManager(svgRoot);
+  svgRoot.style.cssText = 'user-select:none;position:absolute;left:0;top:0;';
+  this.gradientManager = new GradientManager(zrId, svgRoot);
+  this.clipPathManager = new ClippathManager(zrId, svgRoot);
+  this.shadowManager = new ShadowManager(zrId, svgRoot);
   var viewport = document.createElement('div');
@@ -146,2 +148,3 @@ viewport.style.cssText = 'overflow:hidden;position:relative';
     this.clipPathManager.markAllUnused();
+    this.shadowManager.markAllUnused();
     var svgRoot = this._svgRoot;
@@ -156,2 +159,3 @@ var visibleList = this._visibleList;
       var svgProxy = getSvgProxy(displayable);
+      var svgElement = getSvgElement(displayable) || getTextSvgElement(displayable);
 
@@ -162,3 +166,3 @@ if (!displayable.invisible) {
 
-          this.clipPathManager.update(displayable); // Update gradient
+          this.clipPathManager.update(displayable); // Update gradient and shadow
 
@@ -168,2 +172,3 @@ if (displayable.style) {
             this.gradientManager.update(displayable.style.stroke);
+            this.shadowManager.update(svgElement, displayable);
           }
@@ -218,2 +223,3 @@
           this.gradientManager.addWithoutUpdate(svgElement, displayable);
+          this.shadowManager.addWithoutUpdate(prevSvgElement, displayable);
           this.clipPathManager.markUsed(displayable);
@@ -227,2 +233,4 @@ }
           this.gradientManager.addWithoutUpdate(svgElement, displayable);
+          this.shadowManager.markUsed(displayable);
+          this.shadowManager.addWithoutUpdate(svgElement, displayable);
           this.clipPathManager.markUsed(displayable);
@@ -235,2 +243,3 @@ }
     this.clipPathManager.removeUnused();
+    this.shadowManager.removeUnused();
     this._visibleList = newVisibleList;
@@ -289,3 +298,3 @@ },
 
-    if (this._width !== width && this._height !== height) {
+    if (this._width !== width || this._height !== height) {
       this._width = width;
@@ -292,0 +301,0 @@ this._height = height;

lib/zrender.js

@@ -36,3 +36,3 @@ var guid = require("./core/guid");
 
-var version = '3.7.4';
+var version = '4.0.0';
 /**
@@ -136,6 +136,6 @@ * Initializing a zrender instance
 
-  var painter = new painterCtors[rendererType](dom, storage, opts);
+  var painter = new painterCtors[rendererType](dom, storage, opts, id);
   this.storage = storage;
   this.painter = painter;
-  var handerProxy = !env.node ? new HandlerProxy(painter.getViewportRoot()) : null;
+  var handerProxy = !env.node && !env.worker ? new HandlerProxy(painter.getViewportRoot()) : null;
   this.handler = new Handler(storage, painter, handerProxy, painter.root);
@@ -142,0 +142,0 @@ /**

package.json

 {
   "name": "zrender",
-  "version": "3.7.4",
+  "version": "4.0.0",
   "description": "A lightweight canvas library.",
@@ -9,16 +9,2 @@ "keywords": [
   ],
-  "author": [
-    {
-      "name": "Kenner",
-      "email": "[e-mail]"
-    },
-    {
-      "name": "Yi Shen",
-      "url": "https://github.com/pissang"
-    },
-    {
-      "name": "Shuang Su",
-      "url": "https://github.com/100pah"
-    }
-  ],
   "contributors": [
@@ -35,3 +21,5 @@ {
   "scripts": {
-    "prepublish": "node build/build.js --prepublish"
+    "prepublish": "node build/build.js --prepublish",
+    "build": "node build/build.js --release",
+    "dev": "node build/build.js --watch"
   },
@@ -38,0 +26,0 @@ "license": "BSD",

src/animation/Animation.js

@@ -153,2 +153,4 @@ /**
 
+        // Frame should before stage update. Upper application
+        // depends on the sequence (e.g., echarts-stream)
         this.trigger('frame', delta);
@@ -155,0 +157,0 @@

src/contain/text.js

@@ -7,3 +7,4 @@ import BoundingRect from '../core/BoundingRect';
     retrieve2,
-    retrieve3
+    retrieve3,
+    trim
 } from '../core/util';
@@ -674,3 +675,3 @@
     // Use `fontSize` `fontFamily` to check whether font properties are defined.
-    return (style.fontSize || style.fontFamily) && [
+    var font = (style.fontSize || style.fontFamily) && [
         style.fontStyle,
@@ -681,3 +682,4 @@ style.fontWeight,
         style.fontFamily || 'sans-serif'
-    ].join(' ') || style.textFont || style.font;
+    ].join(' ');
+    return font && trim(font) || style.textFont || style.font;
 }

src/core/env.js

@@ -11,3 +11,25 @@ /**
 
-if (typeof navigator === 'undefined') {
+if (typeof wx !== 'undefined') {
+    // In Weixin Application
+    env = {
+        browser: {},
+        os: {},
+        node: false,
+        wxa: true, // Weixin Application
+        canvasSupported: true,
+        svgSupported: false,
+        touchEventsSupported: true
+    }
+}
+else if (typeof document === 'undefined' && typeof self !== 'undefined') {
+    // In worker
+    env = {
+        browser: {},
+        os: {},
+        node: false,
+        worker: true,
+        canvasSupported: true
+    };
+}
+else if (typeof navigator === 'undefined') {
     // In node
@@ -18,2 +40,3 @@ env = {
         node: true,
+        worker: false,
         // Assume canvas is supported
@@ -120,3 +143,2 @@ canvasSupported: true,
         svgSupported: typeof SVGRect !== 'undefined',
-        // @see <http://stackoverflow.com/questions/4817029/whats-the-best-way-to-detect-a-touch-screen-device-using-javascript>
         // works on most browsers
@@ -123,0 +145,0 @@ // IE10/11 does not support touch event, and MS Edge supports them but not by

src/core/matrix.js

@@ -11,3 +11,3 @@ /**
 /**
- * 创建一个单位矩阵
+ * Create a identity matrix.
  * @return {Float32Array|Array.<number>}
@@ -163,1 +163,11 @@ */
 }
+
+/**
+ * Clone a new matrix.
+ * @param {Float32Array|Array.<number>} a
+ */
+export function clone(a) {
+    var b = create();
+    copy(b, a);
+    return b;
+}

src/core/util.js

@@ -43,2 +43,7 @@ /**
 export function $override(name, fn) {
+    // Clear ctx instance for different environment
+    if (name === 'createCanvas') {
+        _ctx = null;
+    }
+
     methods[name] = fn;
@@ -72,17 +77,21 @@ }
     if (typeStr === '[object Array]') {
-        result = [];
-        for (var i = 0, len = source.length; i < len; i++) {
-            result[i] = clone(source[i]);
+        if (!isPrimitive(source)) {
+            result = [];
+            for (var i = 0, len = source.length; i < len; i++) {
+                result[i] = clone(source[i]);
+            }
         }
     }
     else if (TYPED_ARRAY[typeStr]) {
-        var Ctor = source.constructor;
-        if (source.constructor.from) {
-            result = Ctor.from(source);
-        }
-        else {
-            result = new Ctor(source.length);
-            for (var i = 0, len = source.length; i < len; i++) {
-                result[i] = clone(source[i]);
+        if (!isPrimitive(source)) {
+            var Ctor = source.constructor;
+            if (source.constructor.from) {
+                result = Ctor.from(source);
             }
+            else {
+                result = new Ctor(source.length);
+                for (var i = 0, len = source.length; i < len; i++) {
+                    result[i] = clone(source[i]);
+                }
+            }
         }
@@ -472,2 +481,11 @@ }
  */
+export function isTypedArray(value) {
+    return !!TYPED_ARRAY[objToString.call(value)];
+}
+
+/**
+ * @memberOf module:zrender/core/util
+ * @param {*} value
+ * @return {boolean}
+ */
 export function isDom(value) {
@@ -563,2 +581,19 @@ return typeof value === 'object'
 
+/**
+ * @memberOf module:zrender/core/util
+ * @param {string} str string to be trimed
+ * @return {string} trimed string
+ */
+export function trim(str) {
+    if (str == null) {
+        return null;
+    }
+    else if (typeof str.trim === 'function') {
+        return str.trim();
+    }
+    else {
+        return str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
+    }
+}
+
 var primitiveKey = '__ec_primitive__';
@@ -581,10 +616,15 @@ /**
 function HashMap(obj) {
-    obj && each(obj, function (value, key) {
-        this.set(key, value);
-    }, this);
+    var isArr = isArray(obj);
+    var thisMap = this;
+
+    (obj instanceof HashMap)
+        ? obj.each(visit)
+        : (obj && each(obj, visit));
+
+    function visit(value, key) {
+        isArr ? thisMap.set(value, key) : thisMap.set(key, value);
+    }
 }
 
 // Add prefix to avoid conflict with Object.prototype.
-var HASH_MAP_PREFIX = '_ec_';
-var HASH_MAP_PREFIX_LENGTH = 4;
 
@@ -597,9 +637,8 @@ HashMap.prototype = {
     get: function (key) {
-        return this[HASH_MAP_PREFIX + key];
+        return this.hasOwnProperty(key) ? this[key] : null;
     },
     set: function (key, value) {
-        this[HASH_MAP_PREFIX + key] = value;
         // Comparing with invocation chaining, `return value` is more commonly
         // used in this case: `var someVal = map.set('a', genVal());`
-        return value;
+        return (this[key] = value);
     },
@@ -610,5 +649,4 @@ // Although util.each can be performed on this hashMap directly, user
         context !== void 0 && (cb = bind(cb, context));
-        for (var prefixedKey in this) {
-            this.hasOwnProperty(prefixedKey)
-                && cb(this[prefixedKey], prefixedKey.slice(HASH_MAP_PREFIX_LENGTH));
+        for (var key in this) {
+            this.hasOwnProperty(key) && cb(this[key], key);
         }
@@ -618,3 +656,3 @@ },
     removeKey: function (key) {
-        delete this[HASH_MAP_PREFIX + key];
+        delete this[key];
     }
@@ -627,2 +665,15 @@ };
 
+export function concatArray(a, b) {
+    var newArray = new a.constructor(a.length + b.length);
+    for (var i = 0; i < a.length; i++) {
+        newArray[i] = a[i];
+    }
+    var offset = a.length;
+    for (i = 0; i < b.length; i++) {
+        newArray[i + offset] = b[i];
+    }
+    return newArray;
+}
+
+
 export function noop() {}

src/dom/HandlerProxy.js

@@ -372,3 +372,3 @@
 handlerDomProxyProto.setCursor = function (cursorStyle) {
-    this.dom.style.cursor = cursorStyle || 'default';
+    this.dom.style && (this.dom.style.cursor = cursorStyle || 'default');
 };
@@ -375,0 +375,0 @@

src/Element.js

@@ -70,2 +70,8 @@ import guid from './core/guid';
     /**
+     * 是否是 Group
+     * @type {boolean}
+     */
+    isGroup: false,
+
+    /**
      * Drift element
@@ -72,0 +78,0 @@ * @param  {number} dx dx on the global space

src/export.js

@@ -17,2 +17,3 @@ /**
 export {default as Text} from './graphic/Text';
+export {default as IncrementalDisplayable} from './graphic/IncrementalDisplayable';
 
@@ -19,0 +20,0 @@ export {default as Arc} from './graphic/shape/Arc';

src/graphic/Displayable.js

@@ -140,6 +140,13 @@ /**
      * usefull for large data.
-     * @type {number}
+     * @type {boolean}
      */
-    progressive: -1,
+    progressive: false,
 
+    /**
+     * @type {boolean}
+     */
+    incremental: false,
+    // inplace is used with incremental
+    inplace: false,
+
     beforeBrush: function (ctx) {},
@@ -146,0 +153,0 @@

src/graphic/helper/text.js

@@ -13,2 +13,3 @@
 import * as imageHelper from './image';
+import fixShadow from './fixShadow';
 
@@ -418,7 +419,3 @@ // TODO: Have not support 'start', 'end' yet.
 function setCtx(ctx, prop, value) {
-    // FIXME ??? performance try
-    // if (ctx.__currentValues[prop] !== value) {
-        // ctx[prop] = ctx.__currentValues[prop] = value;
-    ctx[prop] = value;
-    // }
+    ctx[prop] = fixShadow(ctx, prop, value);
     return ctx[prop];
@@ -425,0 +422,0 @@ }

src/graphic/Image.js

@@ -92,6 +92,6 @@ import Displayable from './Displayable';
 
-        this.restoreTransform(ctx);
-
         // Draw rect text
         if (style.text != null) {
+            // Only restore transform when needs draw text.
+            this.restoreTransform(ctx);    
             this.drawRectText(ctx, this.getBoundingRect());
@@ -98,0 +98,0 @@ }

src/graphic/Path.js

@@ -133,6 +133,6 @@ import Displayable from './Displayable';
 
-        this.restoreTransform(ctx);
-
         // Draw rect text
         if (style.text != null) {
+            // Only restore transform when needs draw text.
+            this.restoreTransform(ctx);    
             this.drawRectText(ctx, this.getBoundingRect());
@@ -139,0 +139,0 @@ }

src/graphic/Style.js

 
+import fixShadow from './helper/fixShadow';
+
 var STYLE_COMMON_PROPS = [
@@ -359,3 +361,4 @@ ['shadowBlur', 0], ['shadowOffsetX', 0], ['shadowOffsetY', 0], ['shadowColor', '#000'],
                 // FIXME Invalid property value will cause style leak from previous element.
-                ctx[styleName] = style[styleName] || prop[1];
+                ctx[styleName] =
+                    fixShadow(ctx, styleName, style[styleName] || prop[1]);
             }
@@ -362,0 +365,0 @@ }

src/Handler.js

@@ -1,9 +0,1 @@
-/**
- * Handler
- * @module zrender/Handler
- * @author Kener (@Kener-林峰, [e-mail])
- *         errorrik ([e-mail])
- *         pissang ([e-mail])
- */
-
 import * as util from './core/util';
@@ -67,7 +59,4 @@ import * as vec2 from './core/vector';
      */
-    this.proxy = proxy;
+    this.proxy = null;
 
-    // Attach handler
-    proxy.handler = this;
-
     /**
@@ -101,5 +90,3 @@ * {target, topTarget, x, y}
 
-    util.each(handlerNames, function (name) {
-        proxy.on && proxy.on(name, this[name], this);
-    }, this);
+    this.setHandlerProxy(proxy);
 };
@@ -111,2 +98,17 @@
 
+    setHandlerProxy: function (proxy) {
+        if (this.proxy) {
+            this.proxy.dispose();
+        }
+
+        if (proxy) {
+            util.each(handlerNames, function (name) {
+                proxy.on && proxy.on(name, this[name], this);
+            }, this);
+            // Attach handler
+            proxy.handler = this;
+        }
+        this.proxy = proxy;
+    },
+
     mousemove: function (event) {
@@ -296,3 +298,3 @@ var x = event.zrX;
         }
-        else if (name === 'mosueup') {
+        else if (name === 'mouseup') {
             this._upEl = hoveredTarget;
@@ -344,2 +346,2 @@ }
 
-export default Handler;
+export default Handler;

src/Layer.js

@@ -29,13 +29,15 @@ /**
     var newDomStyle = newDom.style;
-    // 没append呢，请原谅我这样写，清晰~
-    newDomStyle.position = 'absolute';
-    newDomStyle.left = 0;
-    newDomStyle.top = 0;
-    newDomStyle.width = width + 'px';
-    newDomStyle.height = height + 'px';
+    if (newDomStyle) {  // In node or some other non-browser environment
+        newDomStyle.position = 'absolute';
+        newDomStyle.left = 0;
+        newDomStyle.top = 0;
+        newDomStyle.width = width + 'px';
+        newDomStyle.height = height + 'px';
+
+        newDom.setAttribute('data-zr-dom-id', id);
+    }
+
     newDom.width = width * dpr;
     newDom.height = height * dpr;
 
-    // id不作为索引用，避免可能造成的重名，定义为私有属性
-    newDom.setAttribute('data-zr-dom-id', id);
     return newDom;
@@ -116,9 +118,18 @@ }
 
-    elCount: 0,
-
     __dirty: true,
 
+    __used: false,
+
+    __drawIndex: 0,
+    __startIndex: 0,
+    __endIndex: 0,
+
+    incremental: false,
+
+    getElementCount: function () {
+        return this.__endIndex - this.__startIndex;
+    },
+
     initContext: function () {
         this.ctx = this.dom.getContext('2d');
-        this.ctx.__currentValues = {};
         this.ctx.dpr = this.dpr;
@@ -132,3 +143,2 @@ },
         this.ctxBack = this.domBack.getContext('2d');
-        this.ctxBack.__currentValues = {};
 
@@ -135,0 +145,0 @@ if (dpr != 1) {

src/Painter.js

@@ -1,9 +0,1 @@
-/**
- * Default canvas painter
- * @module zrender/Painter
- * @author Kener (@Kener-林峰, [e-mail])
- *         errorrik ([e-mail])
- *         pissang (https://www.github.com/pissang)
- */
-
 import {devicePixelRatio} from './config';
@@ -17,9 +9,10 @@ import * as util from './core/util';
 import Image from './graphic/Image';
+import env from './core/env';
 
-// PENDIGN
-// Layer exceeds MAX_PROGRESSIVE_LAYER_NUMBER may have some problem when flush directly second time.
-//
-// Maximum progressive layer. When exceeding this number. All elements will be drawed in the last layer.
-var MAX_PROGRESSIVE_LAYER_NUMBER = 5;
+var HOVER_LAYER_ZLEVEL = 1e5;
+var CANVAS_ZLEVEL = 314159;
 
+var EL_AFTER_INCREMENTAL_INC = 0.01;
+var INCREMENTAL_INC = 0.001;
+
 function parseInt10(val) {
@@ -47,12 +40,2 @@ return parseInt(val, 10);
 
-function preProcessLayer(layer) {
-    layer.__unusedCount++;
-}
-
-function postProcessLayer(layer) {
-    if (layer.__unusedCount == 1) {
-        layer.clear();
-    }
-}
-
 var tmpRect = new BoundingRect(0, 0, 0, 0);
@@ -115,2 +98,3 @@ var viewRect = new BoundingRect(0, 0, 0, 0);
 
+
 /**
@@ -178,6 +162,11 @@ * @alias module:zrender/Painter
      * @type {Object.<string, Object>}
-     * @type {private}
+     * @private
      */
     this._layerConfig = {};
 
+    /**
+     * zrender will do compositing when root is a canvas and have multiple zlevels.
+     */
+    this._needsManuallyCompositing = false;
+
     if (!singleCanvas) {
@@ -208,7 +197,9 @@ this._width = this._getSize(0);
         var mainLayer = new Layer(root, this, 1);
+        mainLayer.__builtin__ = true;
         mainLayer.initContext();
         // FIXME Use canvas width and height
         // mainLayer.resize(width, height);
-        layers[0] = mainLayer;
-        zlevelList.push(0);
+        layers[CANVAS_ZLEVEL] = mainLayer;
+        // Not use common zlevel.
+        zlevelList.push(CANVAS_ZLEVEL);
 
@@ -218,5 +209,2 @@ this._domRoot = root;
 
-    // Layers for progressive rendering
-    this._progressiveLayers = [];
-
     /**
@@ -226,3 +214,3 @@ * @type {module:zrender/Layer}
      */
-    this._hoverlayer;
+    this._hoverlayer = null;
 
@@ -274,4 +262,6 @@ this._hoverElements = [];
 
-        this._paintList(list, paintAll);
+        this._redrawId = Math.random();
 
+        this._paintList(list, paintAll, this._redrawId);
+
         // Paint custum layers
@@ -288,6 +278,2 @@ for (var i = 0; i < zlevelList.length; i++) {
 
-        if (this._progressiveLayers.length) {
-            this._startProgessive();
-        }
-
         return this;
@@ -345,3 +331,3 @@ },
         if (!hoverLayer) {
-            hoverLayer = this._hoverlayer = this.getLayer(1e5);
+            hoverLayer = this._hoverlayer = this.getLayer(HOVER_LAYER_ZLEVEL);
         }
@@ -377,192 +363,117 @@
 
-    _startProgessive: function () {
-        var self = this;
+    getHoverLayer: function () {
+        return this.getLayer(HOVER_LAYER_ZLEVEL);
+    },
 
-        if (!self._furtherProgressive) {
+    _paintList: function (list, paintAll, redrawId) {
+        if (this._redrawId !== redrawId) {
             return;
         }
 
-        // Use a token to stop progress steps triggered by
-        // previous zr.refresh calling.
-        var token = self._progressiveToken = +new Date();
+        paintAll = paintAll || false;
 
-        self._progress++;
-        requestAnimationFrame(step);
+        this._updateLayerStatus(list);
 
-        function step() {
-            // In case refreshed or disposed
-            if (token === self._progressiveToken && self.storage) {
+        var finished = this._doPaintList(list, paintAll);
 
-                self._doPaintList(self.storage.getDisplayList());
+        if (this._needsManuallyCompositing) {
+            this._compositeManually();
+        }
 
-                if (self._furtherProgressive) {
-                    self._progress++;
-                    requestAnimationFrame(step);
-                }
-                else {
-                    self._progressiveToken = -1;
-                }
-            }
+        if (!finished) {
+            var self = this;
+            requestAnimationFrame(function () {
+                self._paintList(list, paintAll, redrawId);
+            });
         }
     },
 
-    _clearProgressive: function () {
-        this._progressiveToken = -1;
-        this._progress = 0;
-        util.each(this._progressiveLayers, function (layer) {
-            layer.__dirty && layer.clear();
+    _compositeManually: function () {
+        var ctx = this.getLayer(CANVAS_ZLEVEL).ctx;
+        var width = this._domRoot.width;
+        var height = this._domRoot.height;
+        ctx.clearRect(0, 0, width, height);
+        // PENDING, If only builtin layer?
+        this.eachBuiltinLayer(function (layer) {
+            if (layer.virtual) {
+                ctx.drawImage(layer.dom, 0, 0, width, height);
+            }
         });
     },
 
-    _paintList: function (list, paintAll) {
-
-        if (paintAll == null) {
-            paintAll = false;
+    _doPaintList: function (list, paintAll) {
+        var layerList = [];
+        for (var zi = 0; zi < this._zlevelList.length; zi++) {
+            var zlevel = this._zlevelList[zi];
+            var layer = this._layers[zlevel];
+            if (layer.__builtin__
+                && layer !== this._hoverlayer
+                && (layer.__dirty || paintAll)
+            ) {
+                layerList.push(layer);
+            }
         }
 
-        this._updateLayerStatus(list);
+        var finished = true;
 
-        this._clearProgressive();
-
-        this.eachBuiltinLayer(preProcessLayer);
-
-        this._doPaintList(list, paintAll);
-
-        this.eachBuiltinLayer(postProcessLayer);
-    },
-
-    _doPaintList: function (list, paintAll) {
-        var currentLayer;
-        var currentZLevel;
-        var ctx;
-
-        // var invTransform = [];
-        var scope;
-
-        var progressiveLayerIdx = 0;
-        var currentProgressiveLayer;
-
-        var width = this._width;
-        var height = this._height;
-        var layerProgress;
-        var frame = this._progress;
-        function flushProgressiveLayer(layer) {
-            var dpr = ctx.dpr || 1;
+        for (var k = 0; k < layerList.length; k++) {
+            var layer = layerList[k];
+            var ctx = layer.ctx;
+            var scope = {};
             ctx.save();
-            ctx.globalAlpha = 1;
-            ctx.shadowBlur = 0;
-            // Avoid layer don't clear in next progressive frame
-            currentLayer.__dirty = true;
-            ctx.setTransform(1, 0, 0, 1, 0, 0);
-            ctx.drawImage(layer.dom, 0, 0, width * dpr, height * dpr);
-            ctx.restore();
-        }
 
-        for (var i = 0, l = list.length; i < l; i++) {
-            var el = list[i];
-            var elZLevel = this._singleCanvas ? 0 : el.zlevel;
+            var start = paintAll ? layer.__startIndex : layer.__drawIndex;
 
-            var elFrame = el.__frame;
+            var useTimer = !paintAll && layer.incremental && Date.now;
+            var startTime = useTimer && Date.now();
 
-            // Flush at current context
-            // PENDING
-            if (elFrame < 0 && currentProgressiveLayer) {
-                flushProgressiveLayer(currentProgressiveLayer);
-                currentProgressiveLayer = null;
+            // All elements in this layer are cleared.
+            if (layer.__startIndex === layer.__endIndex) {
+                layer.clear();
             }
-
-            // Change draw layer
-            if (currentZLevel !== elZLevel) {
-                if (ctx) {
-                    ctx.restore();
+            else if (start === layer.__startIndex) {
+                var firstEl = list[start];
+                if (!firstEl.incremental || !firstEl.notClear || paintAll) {
+                    layer.clear();
                 }
-
-                // Reset scope
-                scope = {};
-
-                // Only 0 zlevel if only has one canvas
-                currentZLevel = elZLevel;
-                currentLayer = this.getLayer(currentZLevel);
-
-                if (!currentLayer.__builtin__) {
-                    log(
-                        'ZLevel ' + currentZLevel
-                        + ' has been used by unkown layer ' + currentLayer.id
-                    );
-                }
-
-                ctx = currentLayer.ctx;
-                ctx.save();
-
-                // Reset the count
-                currentLayer.__unusedCount = 0;
-
-                if (currentLayer.__dirty || paintAll) {
-                    currentLayer.clear();
-                }
             }
-
-            if (!(currentLayer.__dirty || paintAll)) {
-                continue;
+            if (start === -1) {
+                console.error('For some unknown reason. drawIndex is -1');
+                start = layer.__startIndex;
             }
+            for (var i = start; i < layer.__endIndex; i++) {
+                var el = list[i];
+                this._doPaintEl(el, layer, paintAll, scope);
+                el.__dirty = false;
 
-            if (elFrame >= 0) {
-                // Progressive layer changed
-                if (!currentProgressiveLayer) {
-                    currentProgressiveLayer = this._progressiveLayers[
-                        Math.min(progressiveLayerIdx++, MAX_PROGRESSIVE_LAYER_NUMBER - 1)
-                    ];
-
-                    currentProgressiveLayer.ctx.save();
-                    currentProgressiveLayer.renderScope = {};
-
-                    if (currentProgressiveLayer
-                        && (currentProgressiveLayer.__progress > currentProgressiveLayer.__maxProgress)
-                    ) {
-                        // flushProgressiveLayer(currentProgressiveLayer);
-                        // Quick jump all progressive elements
-                        // All progressive element are not dirty, jump over and flush directly
-                        i = currentProgressiveLayer.__nextIdxNotProg - 1;
-                        // currentProgressiveLayer = null;
-                        continue;
+                if (useTimer) {
+                    // Date.now can be executed in 13,025,305 ops/second.
+                    var dTime = Date.now() - startTime;
+                    // Give 15 millisecond to draw.
+                    // The rest elements will be drawn in the next frame.
+                    if (dTime > 15) {
+                        break;
                     }
+                }
+            }
 
-                    layerProgress = currentProgressiveLayer.__progress;
+            layer.__drawIndex = i;
 
-                    if (!currentProgressiveLayer.__dirty) {
-                        // Keep rendering
-                        frame = layerProgress;
-                    }
-
-                    currentProgressiveLayer.__progress = frame + 1;
-                }
-
-                if (elFrame === frame) {
-                    this._doPaintEl(el, currentProgressiveLayer, true, currentProgressiveLayer.renderScope);
-                }
+            if (layer.__drawIndex < layer.__endIndex) {
+                finished = false;
             }
-            else {
-                this._doPaintEl(el, currentLayer, paintAll, scope);
-            }
 
-            el.__dirty = false;
+            ctx.restore();
         }
 
-        if (currentProgressiveLayer) {
-            flushProgressiveLayer(currentProgressiveLayer);
+        if (env.wxa) {
+            // Flush for weixin application
+            util.each(this._layers, function (layer) {
+                if (layer && layer.ctx && layer.ctx.draw) {
+                    layer.ctx.draw();
+                }
+            });
         }
 
-        // Restore the lastLayer ctx
-        ctx && ctx.restore();
-        // If still has clipping state
-        // if (scope.prevElClipPaths) {
-        //     ctx.restore();
-        // }
-
-        this._furtherProgressive = false;
-        util.each(this._progressiveLayers, function (layer) {
-            if (layer.__maxProgress >= layer.__progress) {
-                this._furtherProgressive = true;
-            }
-        }, this);
+        return finished;
     },
@@ -621,9 +532,9 @@
      * @param {number} zlevel
+     * @param {boolean} virtual Virtual layer will not be inserted into dom.
      * @return {module:zrender/Layer}
      */
-    getLayer: function (zlevel) {
-        if (this._singleCanvas) {
-            return this._layers[0];
+    getLayer: function (zlevel, virtual) {
+        if (this._singleCanvas && !this._needsManuallyCompositing) {
+            zlevel = CANVAS_ZLEVEL;
         }
-
         var layer = this._layers[zlevel];
@@ -633,2 +544,3 @@ if (!layer) {
             layer = new Layer('zr_' + zlevel, this, this.dpr);
+            layer.zlevel = zlevel;
             layer.__builtin__ = true;
@@ -640,2 +552,6 @@
 
+            if (virtual) {
+                layer.virtual = virtual;
+            }
+
             this.insertLayer(zlevel, layer);
@@ -763,72 +679,67 @@
 
-        var layers = this._layers;
-        var progressiveLayers = this._progressiveLayers;
-
-        var elCountsLastFrame = {};
-        var progressiveElCountsLastFrame = {};
-
         this.eachBuiltinLayer(function (layer, z) {
-            elCountsLastFrame[z] = layer.elCount;
-            layer.elCount = 0;
-            layer.__dirty = false;
+            layer.__dirty = layer.__used = false;
         });
 
-        util.each(progressiveLayers, function (layer, idx) {
-            progressiveElCountsLastFrame[idx] = layer.elCount;
-            layer.elCount = 0;
-            layer.__dirty = false;
-        });
+        function updatePrevLayer(idx) {
+            if (prevLayer) {
+                if (prevLayer.__endIndex !== idx) {
+                    prevLayer.__dirty = true;
+                }
+                prevLayer.__endIndex = idx;
+            }
+        }
 
-        var progressiveLayerCount = 0;
-        var currentProgressiveLayer;
-        var lastProgressiveKey;
-        var frameCount = 0;
-        for (var i = 0, l = list.length; i < l; i++) {
+        if (this._singleCanvas) {
+            for (var i = 1; i < list.length; i++) {
+                var el = list[i];
+                if (el.zlevel !== list[i - 1].zlevel || el.incremental) {
+                    this._needsManuallyCompositing = true;
+                    break;
+                }
+            }
+        }
+
+        var prevLayer = null;
+        var incrementalLayerCount = 0;
+        for (var i = 0; i < list.length; i++) {
             var el = list[i];
-            var zlevel = this._singleCanvas ? 0 : el.zlevel;
-            var layer = layers[zlevel];
-            var elProgress = el.progressive;
-            if (layer) {
-                layer.elCount++;
-                layer.__dirty = layer.__dirty || el.__dirty;
+            var zlevel = el.zlevel;
+            var layer;
+            // PENDING If change one incremental element style ?
+            // TODO Where there are non-incremental elements between incremental elements.
+            if (el.incremental) {
+                layer = this.getLayer(zlevel + INCREMENTAL_INC, this._needsManuallyCompositing);
+                layer.incremental = true;
+                incrementalLayerCount = 1;
             }
+            else {
+                layer = this.getLayer(zlevel + (incrementalLayerCount > 0 ? EL_AFTER_INCREMENTAL_INC : 0), this._needsManuallyCompositing);
+            }
 
-            /////// Update progressive
-            if (elProgress >= 0) {
-                // Fix wrong progressive sequence problem.
-                if (lastProgressiveKey !== elProgress) {
-                    lastProgressiveKey = elProgress;
-                    frameCount++;
-                }
-                var elFrame = el.__frame = frameCount - 1;
-                if (!currentProgressiveLayer) {
-                    var idx = Math.min(progressiveLayerCount, MAX_PROGRESSIVE_LAYER_NUMBER - 1);
-                    currentProgressiveLayer = progressiveLayers[idx];
-                    if (!currentProgressiveLayer) {
-                        currentProgressiveLayer = progressiveLayers[idx] = new Layer(
-                            'progressive', this, this.dpr
-                        );
-                        currentProgressiveLayer.initContext();
-                    }
-                    currentProgressiveLayer.__maxProgress = 0;
-                }
-                currentProgressiveLayer.__dirty = currentProgressiveLayer.__dirty || el.__dirty;
-                currentProgressiveLayer.elCount++;
+            if (!layer.__builtin__) {
+                log('ZLevel ' + zlevel + ' has been used by unkown layer ' + layer.id);
+            }
 
-                currentProgressiveLayer.__maxProgress = Math.max(
-                    currentProgressiveLayer.__maxProgress, elFrame
-                );
-
-                if (currentProgressiveLayer.__maxProgress >= currentProgressiveLayer.__progress) {
-                    // Should keep rendering this  layer because progressive rendering is not finished yet
+            if (layer !== prevLayer) {
+                layer.__used = true;
+                if (layer.__startIndex !== i) {
                     layer.__dirty = true;
                 }
+                layer.__startIndex = i;
+                if (!layer.incremental) {
+                    layer.__drawIndex = i;
+                }
+                else {
+                    // Mark layer draw index needs to update.
+                    layer.__drawIndex = -1;
+                }
+                updatePrevLayer(i);
+                prevLayer = layer;
             }
-            else {
-                el.__frame = -1;
-
-                if (currentProgressiveLayer) {
-                    currentProgressiveLayer.__nextIdxNotProg = i;
-                    progressiveLayerCount++;
-                    currentProgressiveLayer = null;
+            if (el.__dirty) {
+                layer.__dirty = true;
+                if (layer.incremental && layer.__drawIndex < 0) {
+                    // Start draw from the first dirty element.
+                    layer.__drawIndex = i;
                 }
@@ -838,22 +749,14 @@ }
 
-        if (currentProgressiveLayer) {
-            progressiveLayerCount++;
-            currentProgressiveLayer.__nextIdxNotProg = i;
-        }
+        updatePrevLayer(i);
 
-        // 层中的元素数量有发生变化
         this.eachBuiltinLayer(function (layer, z) {
-            if (elCountsLastFrame[z] !== layer.elCount) {
+            // Used in last frame but not in this frame. Needs clear
+            if (!layer.__used && layer.getElementCount() > 0) {
                 layer.__dirty = true;
+                layer.__startIndex = layer.__endIndex = layer.__drawIndex = 0;
             }
-        });
-
-        progressiveLayers.length = Math.min(progressiveLayerCount, MAX_PROGRESSIVE_LAYER_NUMBER);
-        util.each(progressiveLayers, function (layer, idx) {
-            if (progressiveElCountsLastFrame[idx] !== layer.elCount) {
-                el.__dirty = true;
+            // For incremental layer. In case start index changed and no elements are dirty.
+            if (layer.__dirty && layer.__drawIndex < 0) {
+                layer.__drawIndex = layer.__startIndex;
             }
-            if (layer.__dirty) {
-                layer.__progress = 0;
-            }
         });
@@ -894,6 +797,8 @@ },
 
-            var layer = this._layers[zlevel];
-
-            if (layer) {
-                util.merge(layer, layerConfig[zlevel], true);
+            for (var i = 0; i < this._zlevelList.length; i++) {
+                var _zlevel = this._zlevelList[i];
+                if (_zlevel === zlevel || _zlevel === zlevel + EL_AFTER_INCREMENTAL_INC) {
+                    var layer = this._layers[_zlevel];
+                    util.merge(layer, layerConfig[zlevel], true);
+                }
             }
@@ -924,36 +829,47 @@ }
     resize: function (width, height) {
-        var domRoot = this._domRoot;
-        // FIXME Why ?
-        domRoot.style.display = 'none';
+        if (!this._domRoot.style) { // Maybe in node or worker
+            if (width == null || height == null) {
+                return;
+            }
+            this._width = width;
+            this._height = height;
 
-        // Save input w/h
-        var opts = this._opts;
-        width != null && (opts.width = width);
-        height != null && (opts.height = height);
+            this.getLayer(CANVAS_ZLEVEL).resize(width, height);
+        }
+        else {
+            var domRoot = this._domRoot;
+            // FIXME Why ?
+            domRoot.style.display = 'none';
 
-        width = this._getSize(0);
-        height = this._getSize(1);
+            // Save input w/h
+            var opts = this._opts;
+            width != null && (opts.width = width);
+            height != null && (opts.height = height);
 
-        domRoot.style.display = '';
+            width = this._getSize(0);
+            height = this._getSize(1);
 
-        // 优化没有实际改变的resize
-        if (this._width != width || height != this._height) {
-            domRoot.style.width = width + 'px';
-            domRoot.style.height = height + 'px';
+            domRoot.style.display = '';
 
-            for (var id in this._layers) {
-                if (this._layers.hasOwnProperty(id)) {
-                    this._layers[id].resize(width, height);
+            // 优化没有实际改变的resize
+            if (this._width != width || height != this._height) {
+                domRoot.style.width = width + 'px';
+                domRoot.style.height = height + 'px';
+
+                for (var id in this._layers) {
+                    if (this._layers.hasOwnProperty(id)) {
+                        this._layers[id].resize(width, height);
+                    }
                 }
+                util.each(this._progressiveLayers, function (layer) {
+                    layer.resize(width, height);
+                });
+
+                this.refresh(true);
             }
-            util.each(this._progressiveLayers, function (layer) {
-                layer.resize(width, height);
-            });
 
-            this.refresh(true);
+            this._width = width;
+            this._height = height;
+
         }
-
-        this._width = width;
-        this._height = height;
-
         return this;
@@ -994,4 +910,4 @@ },
         opts = opts || {};
-        if (this._singleCanvas) {
-            return this._layers[0].dom;
+        if (this._singleCanvas && !this._compositeManually) {
+            return this._layers[CANVAS_ZLEVEL].dom;
         }
@@ -1001,44 +917,32 @@
         imageLayer.initContext();
-
         imageLayer.clearColor = opts.backgroundColor;
         imageLayer.clear();
 
-        var displayList = this.storage.getDisplayList(true);
+        if (opts.pixelRatio <= this.dpr) {
+            this.refresh();
 
-        var scope = {};
-        var zlevel;
-
-        var self = this;
-        function findAndDrawOtherLayer(smaller, larger) {
-            var zlevelList = self._zlevelList;
-            if (smaller == null) {
-                smaller = -Infinity;
-            }
-            var intermediateLayer;
-            for (var i = 0; i < zlevelList.length; i++) {
-                var z = zlevelList[i];
-                var layer = self._layers[z];
-                if (!layer.__builtin__ && z > smaller && z < larger) {
-                    intermediateLayer = layer;
-                    break;
+            var width = imageLayer.dom.width;
+            var height = imageLayer.dom.height;
+            var ctx = imageLayer.ctx;
+            this.eachLayer(function (layer) {
+                if (layer.__builtin__) {
+                    ctx.drawImage(layer.dom, 0, 0, width, height);
                 }
-            }
-            if (intermediateLayer && intermediateLayer.renderToCanvas) {
-                imageLayer.ctx.save();
-                intermediateLayer.renderToCanvas(imageLayer.ctx);
-                imageLayer.ctx.restore();
-            }
+                else if (layer.renderToCanvas) {
+                    imageLayer.ctx.save();
+                    layer.renderToCanvas(imageLayer.ctx);
+                    imageLayer.ctx.restore();
+                }
+            });
         }
-        for (var i = 0; i < displayList.length; i++) {
-            var el = displayList[i];
-
-            if (el.zlevel !== zlevel) {
-                findAndDrawOtherLayer(zlevel, el.zlevel);
-                zlevel = el.zlevel;
+        else {
+            // PENDING, echarts-gl and incremental rendering.
+            var scope = {};
+            var displayList = this.storage.getDisplayList(true);
+            for (var i = 0; i < displayList.length; i++) {
+                var el = displayList[i];
+                this._doPaintEl(el, imageLayer, true, scope);
             }
-            this._doPaintEl(el, imageLayer, true, scope);
         }
 
-        findAndDrawOtherLayer(zlevel, Infinity);
-
         return imageLayer.dom;
@@ -1089,5 +993,5 @@ },
         var style = path.style;
-        var shadowBlurSize = style.shadowBlur;
-        var shadowOffsetX = style.shadowOffsetX;
-        var shadowOffsetY = style.shadowOffsetY;
+        var shadowBlurSize = style.shadowBlur * dpr;
+        var shadowOffsetX = style.shadowOffsetX * dpr;
+        var shadowOffsetY = style.shadowOffsetY * dpr;
         var lineWidth = style.hasStroke() ? style.lineWidth : 0;
@@ -1094,0 +998,0 @@

src/Storage.js

@@ -1,9 +0,1 @@
-/**
- * Storage内容仓库模块
- * @module zrender/Storage
- * @author Kener (@Kener-林峰, [e-mail])
- * @author errorrik ([e-mail])
- * @author pissang (https://github.com/pissang/)
- */
-
 import * as util from './core/util';
@@ -83,2 +75,3 @@ import env from './core/env';
         this._displayListLen = 0;
+
         var roots = this._roots;
@@ -89,9 +82,5 @@ var displayList = this._displayList;
         }
+
         displayList.length = this._displayListLen;
 
-        // for (var i = 0, len = displayList.length; i < len; i++) {
-        //     displayList[i].__renderidx = i;
-        // }
-
-        // displayList.sort(shapeCompareFunc);
         env.canvasSupported && timsort(displayList, shapeCompareFunc);
@@ -225,5 +214,6 @@ },
     addToStorage: function (el) {
-        el.__storage = this;
-        el.dirty(false);
-
+        if (el) {
+            el.__storage = this;
+            el.dirty(false);
+        }
         return this;
@@ -230,0 +220,0 @@ },

src/svg/graphic.js

@@ -98,7 +98,8 @@ // TODO
             : style.lineWidth;
-        var strokeScale = style.strokeNoScale
+        var strokeScale = !isText && style.strokeNoScale
             ? style.host.getLineScale()
             : 1;
         attr(svgEl, 'stroke-width', strokeWidth / strokeScale);
-        attr(svgEl, 'paint-order', 'stroke');
+        // stroke then fill for text; fill then stroke for others
+        attr(svgEl, 'paint-order', isText ? 'stroke' : 'fill');
         attr(svgEl, 'stroke-opacity', style.opacity);
@@ -163,3 +164,3 @@ var lineDash = style.lineDash;
                 var dThetaPositive = Math.abs(dTheta);
-                var isCircle = isAroundZero(dThetaPositive % PI2)
+                var isCircle = isAroundZero(dThetaPositive - PI2)
                     && !isAroundZero(dThetaPositive);
@@ -166,0 +167,0 @@

src/svg/helper/ClippathManager.js

@@ -15,6 +15,7 @@ /**
  * @extends Definable
+ * @param   {number}     zrId    zrender instance id
  * @param   {SVGElement} svgRoot root of SVG document
  */
-function ClippathManager(svgRoot) {
-    Definable.call(this, svgRoot, 'clipPath', '__clippath_in_use__');
+function ClippathManager(zrId, svgRoot) {
+    Definable.call(this, zrId, svgRoot, 'clipPath', '__clippath_in_use__');
 }
@@ -84,3 +85,3 @@
             // New <clipPath>
-            id = 'zr-clip-' + this.nextId;
+            id = 'zr' + this._zrId + '-clip-' + this.nextId;
             ++this.nextId;
@@ -128,2 +129,4 @@ clipPathEl = this.createElement('clipPath');
         var pathEl = this.getSvgElement(clipPath);
+
+        clipPathEl.innerHTML = '';
         /**
@@ -130,0 +133,0 @@ * Use `cloneNode()` here to appendChild to multiple parents,

src/svg/helper/Definable.js

@@ -27,2 +27,3 @@ /**
  * @class
+ * @param {number}          zrId      zrender instance id
  * @param {SVGElement}      svgRoot   root of SVG document
@@ -34,10 +35,13 @@ * @param {string|string[]} tagNames  possible tag names
 function Definable(
+    zrId,
     svgRoot,
     tagNames,
-    markLabel
+    markLabel,
+    domName
 ) {
-
+    this._zrId = zrId;
     this._svgRoot = svgRoot;
     this._tagNames = typeof tagNames === 'string' ? [tagNames] : tagNames;
     this._markLabel = markLabel;
+    this._domName = domName || '_dom';
 
@@ -108,6 +112,6 @@ this.nextId = 0;
     var defs = this.getDefs(false);
-    if (element._dom && defs.contains(element._dom)) {
+    if (element[this._domName] && defs.contains(element[this._domName])) {
         // Update DOM
         if (typeof onUpdate === 'function') {
-            onUpdate();
+            onUpdate(element);
         }
@@ -119,3 +123,3 @@ }
         if (dom) {
-            element._dom = dom;
+            element[this._domName] = dom;
         }
@@ -144,3 +148,6 @@ }
     var defs = this.getDefs(false);
-    defs.removeChild(element._dom);
+    if (defs && element[this._domName]) {
+        defs.removeChild(element[this._domName]);
+        element[this._domName] = null;
+    }
 };
@@ -147,0 +154,0 @@

src/svg/helper/GradientManager.js

@@ -15,7 +15,9 @@ /**
  * @extends Definable
+ * @param   {number}     zrId    zrender instance id
  * @param   {SVGElement} svgRoot root of SVG document
  */
-function GradientManager(svgRoot) {
+function GradientManager(zrId, svgRoot) {
     Definable.call(
         this,
+        zrId,
         svgRoot,
@@ -103,3 +105,4 @@ ['linearGradient', 'radialGradient'],
     gradient.id = gradient.id || this.nextId++;
-    dom.setAttribute('id', 'zr-gradient-' + gradient.id);
+    dom.setAttribute('id', 'zr' + this._zrId
+        + '-gradient-' + gradient.id);
 
@@ -106,0 +109,0 @@ this.updateDom(gradient, dom);

src/svg/Painter.js

@@ -15,2 +15,3 @@ /**
 import ClippathManager from './helper/ClippathManager';
+import ShadowManager from './helper/ShadowManager';
 import {each} from '../core/util';
@@ -89,3 +90,3 @@ import {
  */
-var SVGPainter = function (root, storage, opts) {
+var SVGPainter = function (root, storage, opts, zrId) {
 
@@ -100,7 +101,7 @@ this.root = root;
     svgRoot.setAttribute('baseProfile', 'full');
-    svgRoot.style['user-select'] = 'none';
-    svgRoot.style.cssText = 'position:absolute;left:0;top:0;';
+    svgRoot.style.cssText = 'user-select:none;position:absolute;left:0;top:0;';
 
-    this.gradientManager = new GradientManager(svgRoot);
-    this.clipPathManager = new ClippathManager(svgRoot);
+    this.gradientManager = new GradientManager(zrId, svgRoot);
+    this.clipPathManager = new ClippathManager(zrId, svgRoot);
+    this.shadowManager = new ShadowManager(zrId, svgRoot);
 
@@ -153,2 +154,3 @@ var viewport = document.createElement('div');
         this.clipPathManager.markAllUnused();
+        this.shadowManager.markAllUnused();
 
@@ -164,2 +166,4 @@ var svgRoot = this._svgRoot;
             var svgProxy = getSvgProxy(displayable);
+            var svgElement = getSvgElement(displayable)
+                || getTextSvgElement(displayable);
             if (!displayable.invisible) {
@@ -172,3 +176,3 @@ if (displayable.__dirty) {
 
-                    // Update gradient
+                    // Update gradient and shadow
                     if (displayable.style) {
@@ -179,2 +183,5 @@ this.gradientManager
                             .update(displayable.style.stroke);
+
+                        this.shadowManager
+                            .update(svgElement, displayable);
                     }
@@ -233,2 +240,4 @@
                         .addWithoutUpdate(svgElement, displayable);
+                    this.shadowManager
+                        .addWithoutUpdate(prevSvgElement, displayable);
                     this.clipPathManager.markUsed(displayable);
@@ -250,2 +259,6 @@ }
 
+                    this.shadowManager.markUsed(displayable);
+                    this.shadowManager
+                        .addWithoutUpdate(svgElement, displayable);
+
                     this.clipPathManager.markUsed(displayable);
@@ -258,2 +271,3 @@ }
         this.clipPathManager.removeUnused();
+        this.shadowManager.removeUnused();
 
@@ -314,3 +328,3 @@ this._visibleList = newVisibleList;
 
-        if (this._width !== width && this._height !== height) {
+        if (this._width !== width || this._height !== height) {
             this._width = width;
@@ -317,0 +331,0 @@ this._height = height;

src/zrender.js

@@ -31,3 +31,3 @@ /*!
  */
-export var version = '3.7.4';
+export var version = '4.0.0';
 
@@ -129,3 +129,3 @@ /**
     }
-    var painter = new painterCtors[rendererType](dom, storage, opts);
+    var painter = new painterCtors[rendererType](dom, storage, opts, id);
 
@@ -135,3 +135,3 @@ this.storage = storage;
 
-    var handerProxy = !env.node ? new HandlerProxy(painter.getViewportRoot()) : null;
+    var handerProxy = (!env.node && !env.worker) ? new HandlerProxy(painter.getViewportRoot()) : null;
     this.handler = new Handler(storage, painter, handerProxy, painter.root);
@@ -138,0 +138,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

3065380

increased by2.09%

Number of package files

216

increased by3.85%

Lines of code

61640

increased by1.79%

No dependency changes