zrender - npm Package Compare versions

Comparing version 4.0.5 to 4.0.6

build/babel-plugin-transform-modules-commonjs-ec.js

@@ -650,3 +650,3 @@ /**
     // We have to do this for workaround temporarily.
-    if (/^[A-Z_]+$/.test(localName)) {
+    if (/^[A-Z0-9_]+$/.test(localName)) {
         opt[localName] = localName;
@@ -653,0 +653,0 @@ }

lib/animation/Animator.js

@@ -55,3 +55,3 @@ var Clip = require("./Clip");
 
-  if (arrDim == 1) {
+  if (arrDim === 1) {
     for (var i = 0; i < len; i++) {
@@ -165,3 +165,3 @@ out[i] = interpolateNumber(p0[i], p1[i], percent);
 
-  if (arrDim == 1) {
+  if (arrDim === 1) {
     for (var i = 0; i < len; i++) {
@@ -272,3 +272,3 @@ out[i] = catmullRomInterpolate(p0[i], p1[i], p2[i], p3[i], t, t2, t3);
 
-    if (typeof value == 'string') {
+    if (typeof value === 'string') {
       var colorArray = color.parse(value);
@@ -275,0 +275,0 @@

lib/animation/Clip.js

@@ -60,7 +60,7 @@ var easingFuncs = require("./easing");
     var easing = this.easing;
-    var easingFunc = typeof easing == 'string' ? easingFuncs[easing] : easing;
+    var easingFunc = typeof easing === 'string' ? easingFuncs[easing] : easing;
     var schedule = typeof easingFunc === 'function' ? easingFunc(percent) : percent;
     this.fire('frame', schedule); // 结束
 
-    if (percent == 1) {
+    if (percent === 1) {
       if (this.loop) {
@@ -67,0 +67,0 @@ this.restart(globalTime); // 重新开始周期

lib/contain/path.js

@@ -50,3 +50,4 @@ var PathProxy = require("../core/PathProxy");
     var nExtrema = -1;
-    var y0_, y1_;
+    var y0_;
+    var y1_;
 
@@ -78,3 +79,3 @@ for (var i = 0; i < nRoots; i++) {
 
-      if (nExtrema == 2) {
+      if (nExtrema === 2) {
         // 分成三段单调函数
@@ -243,3 +244,3 @@ if (t < extrema[0]) {
 
-    if (i == 1) {
+    if (i === 1) {
       // 如果第一个命令是 L, C, Q
@@ -314,3 +315,3 @@ // 则 previous point 同绘制命令的第一个 point
 
-        var psi = data[i++];
+        i += 1;
         var anticlockwise = 1 - data[i++];
@@ -317,0 +318,0 @@ var x1 = Math.cos(theta) * rx + cx;

lib/contain/text.js

@@ -69,8 +69,8 @@ var BoundingRect = require("../core/BoundingRect");
 
-function getBoundingRect(text, font, textAlign, textVerticalAlign, textPadding, rich, truncate) {
-  return rich ? getRichTextRect(text, font, textAlign, textVerticalAlign, textPadding, rich, truncate) : getPlainTextRect(text, font, textAlign, textVerticalAlign, textPadding, truncate);
+function getBoundingRect(text, font, textAlign, textVerticalAlign, textPadding, textLineHeight, rich, truncate) {
+  return rich ? getRichTextRect(text, font, textAlign, textVerticalAlign, textPadding, rich, textLineHeight, truncate) : getPlainTextRect(text, font, textAlign, textVerticalAlign, textPadding, textLineHeight, truncate);
 }
 
-function getPlainTextRect(text, font, textAlign, textVerticalAlign, textPadding, truncate) {
-  var contentBlock = parsePlainText(text, font, textPadding, truncate);
+function getPlainTextRect(text, font, textAlign, textVerticalAlign, textPadding, textLineHeight, truncate) {
+  var contentBlock = parsePlainText(text, font, textPadding, textLineHeight, truncate);
   var outerWidth = getWidth(text, font);
@@ -90,3 +90,3 @@
 
-function getRichTextRect(text, font, textAlign, textVerticalAlign, textPadding, rich, truncate) {
+function getRichTextRect(text, font, textAlign, textVerticalAlign, textPadding, textLineHeight, rich, truncate) {
   var contentBlock = parseRichText(text, {
@@ -97,3 +97,4 @@ rich: rich,
     textAlign: textAlign,
-    textPadding: textPadding
+    textPadding: textPadding,
+    textLineHeight: textLineHeight
   });
@@ -308,3 +309,3 @@ var outerWidth = contentBlock.outerWidth;
 
-  var ellipsisWidth = getWidth(ellipsis);
+  var ellipsisWidth = getWidth(ellipsis, font);
 
@@ -407,5 +408,5 @@ if (ellipsisWidth > contentWidth) {
 
-function parsePlainText(text, font, padding, truncate) {
+function parsePlainText(text, font, padding, textLineHeight, truncate) {
   text != null && (text += '');
-  var lineHeight = getLineHeight(font);
+  var lineHeight = retrieve2(textLineHeight, getLineHeight(font));
   var lines = text ? text.split('\n') : [];
@@ -412,0 +413,0 @@ var height = lines.length * lineHeight;

lib/core/event.js

@@ -86,3 +86,3 @@ var Eventful = require("../mixin/Eventful");
   } else {
-    var touch = eventType != 'touchend' ? e.targetTouches[0] : e.changedTouches[0];
+    var touch = eventType !== 'touchend' ? e.targetTouches[0] : e.changedTouches[0];
     touch && clientToLocal(el, touch, e, calculate);
@@ -99,4 +99,8 @@ } // Add which for click: 1 === left; 2 === middle; 3 === right; otherwise: 0;
     e.which = button & 1 ? 1 : button & 2 ? 3 : button & 4 ? 2 : 0;
-  }
+  } // [Caution]: `e.which` from browser is not always reliable. For example,
+  // when press left button and `mousemove (pointermove)` in Edge, the `e.which`
+  // is 65536 and the `e.button` is -1. But the `mouseup (pointerup)` and
+  // `mousedown (pointerdown)` is the same as Chrome does.
 
+
   return e;
@@ -165,3 +169,19 @@ }
 };
+/**
+ * This method only works for mouseup and mousedown. The functionality is restricted
+ * for fault tolerance, See the `e.which` compatibility above.
+ *
+ * @param {MouseEvent} e
+ * @return {boolean}
+ */
 
+function isMiddleOrRightButtonOnMouseUpDown(e) {
+  return e.which === 2 || e.which === 3;
+}
+/**
+ * To be removed.
+ * @deprecated
+ */
+
+
 function notLeftMouse(e) {
@@ -178,2 +198,3 @@ // If e.which is undefined, considered as left mouse event.
 exports.stop = stop;
+exports.isMiddleOrRightButtonOnMouseUpDown = isMiddleOrRightButtonOnMouseUpDown;
 exports.notLeftMouse = notLeftMouse;

lib/core/PathProxy.js

@@ -50,3 +50,3 @@ var curve = require("./curve");
 var mathAbs = Math.abs;
-var hasTypedArray = typeof Float32Array != 'undefined';
+var hasTypedArray = typeof Float32Array !== 'undefined';
 /**
@@ -319,3 +319,3 @@ * @alias module:zrender/core/PathProxy
 
-    if (!(this.data && this.data.length == len) && hasTypedArray) {
+    if (!(this.data && this.data.length === len) && hasTypedArray) {
       this.data = new Float32Array(len);
@@ -436,3 +436,3 @@ }
 
-    while (dx > 0 && x <= x1 || dx < 0 && x >= x1 || dx == 0 && (dy > 0 && y <= y1 || dy < 0 && y >= y1)) {
+    while (dx > 0 && x <= x1 || dx < 0 && x >= x1 || dx === 0 && (dy > 0 && y <= y1 || dy < 0 && y >= y1)) {
       idx = this._dashIdx;
@@ -558,3 +558,3 @@ dash = lineDash[idx];
 
-      if (i == 1) {
+      if (i === 1) {
         // 如果第一个命令是 L, C, Q
@@ -611,6 +611,6 @@ // 则 previous point 同绘制命令的第一个 point
 
-          var psi = data[i++];
+          i += 1;
           var anticlockwise = 1 - data[i++];
 
-          if (i == 1) {
+          if (i === 1) {
             // 直接使用 arc 命令
@@ -672,3 +672,3 @@ // 第一个命令起点还未定义
 
-      if (i == 1) {
+      if (i === 1) {
         // 如果第一个命令是 L, C, Q
@@ -742,3 +742,3 @@ // 则 previous point 同绘制命令的第一个 point
 
-          if (i == 1) {
+          if (i === 1) {
             // 直接使用 arc 命令
@@ -745,0 +745,0 @@ // 第一个命令起点还未定义

lib/core/util.js

@@ -64,3 +64,3 @@ /**
 function clone(source) {
-  if (source == null || typeof source != 'object') {
+  if (source == null || typeof source !== 'object') {
     return source;
@@ -278,7 +278,7 @@ }
 
-  if (typeof data == 'string') {
+  if (typeof data === 'string') {
     return false;
   }
 
-  return typeof data.length == 'number';
+  return typeof data.length === 'number';
 }
@@ -483,3 +483,3 @@ /**
   var type = typeof value;
-  return type === 'function' || !!value && type == 'object';
+  return type === 'function' || !!value && type === 'object';
 }
@@ -486,0 +486,0 @@ /**

lib/dom/HandlerProxy.js

@@ -13,4 +13,2 @@ var _event = require("../core/event");
 
-var GestureMgr = require("../core/GestureMgr");
-
 var TOUCH_CLICK_DELAY = 300;
@@ -32,17 +30,2 @@ var mouseHandlerNames = ['click', 'dblclick', 'mousewheel', 'mouseout', 'mouseup', 'mousedown', 'mousemove', 'contextmenu'];
   return name === 'mousewheel' && env.browser.firefox ? 'DOMMouseScroll' : name;
-}
-
-function processGesture(proxy, event, stage) {
-  var gestureMgr = proxy._gestureMgr;
-  stage === 'start' && gestureMgr.clear();
-  var gestureInfo = gestureMgr.recognize(event, proxy.handler.findHover(event.zrX, event.zrY, null).target, proxy.dom);
-  stage === 'end' && gestureMgr.clear(); // Do not do any preventDefault here. Upper application do that if necessary.
-
-  if (gestureInfo) {
-    var type = gestureInfo.type;
-    event.gestureEvent = type;
-    proxy.handler.dispatchToElement({
-      target: gestureInfo.target
-    }, type, gestureInfo.event);
-  }
 } // function onMSGestureChange(proxy, event) {
@@ -98,4 +81,4 @@ //     if (event.translationX || event.translationY) {
 
-    if (element != this.dom) {
-      while (element && element.nodeType != 9) {
+    if (element !== this.dom) {
+      while (element && element.nodeType !== 9) {
         // 忽略包含在root中的dom引起的mouseOut
@@ -126,3 +109,3 @@ if (element === this.dom) {
     this._lastTouchMoment = new Date();
-    processGesture(this, event, 'start'); // In touch device, trigger `mousemove`(`mouseover`) should
+    this.handler.processGesture(this, event, 'start'); // In touch device, trigger `mousemove`(`mouseover`) should
     // be triggered, and must before `mousedown` triggered.
@@ -145,3 +128,3 @@
     event.zrByTouch = true;
-    processGesture(this, event, 'change'); // Mouse move should always be triggered no matter whether
+    this.handler.processGesture(this, event, 'change'); // Mouse move should always be triggered no matter whether
     // there is gestrue event, because mouse move and pinch may
@@ -164,3 +147,3 @@ // be used at the same time.
     event.zrByTouch = true;
-    processGesture(this, event, 'end');
+    this.handler.processGesture(this, event, 'end');
     domHandlers.mouseup.call(this, event); // Do not trigger `mouseout` here, in spite of `mousemove`(`mouseover`) is
@@ -271,8 +254,2 @@ // triggered in `touchstart`. This seems to be illogical, but by this mechanism,
   this._touchTimer;
-  /**
-   * @private
-   * @type {module:zrender/core/GestureMgr}
-   */
-
-  this._gestureMgr = new GestureMgr();
   this._handlers = {};
@@ -279,0 +256,0 @@ initDomHandler(this);

lib/graphic/helper/image.js

@@ -52,3 +52,3 @@ var LRU = require("../../core/LRU");
     } else {
-      !image && (image = new Image());
+      image = new Image();
       image.onload = image.onerror = imageOnLoad;
@@ -55,0 +55,0 @@ globalImageCache.put(newImageOrSrc, image.__cachedImgObj = {

lib/graphic/helper/roundRect.js

@@ -0,1 +1,10 @@
+/**
+ * @param {Object} ctx
+ * @param {Object} shape
+ * @param {number} shape.x
+ * @param {number} shape.y
+ * @param {number} shape.width
+ * @param {number} shape.height
+ * @param {number} shape.r
+ */
 function buildPath(ctx, shape) {
@@ -2,0 +11,0 @@ var x = shape.x;

lib/graphic/helper/smoothBezier.js

@@ -37,3 +37,4 @@ var _vector = require("../../core/vector");
   var nextPoint;
-  var min, max;
+  var min;
+  var max;
 
@@ -40,0 +41,0 @@ if (constraint) {

lib/graphic/helper/text.js

@@ -9,3 +9,2 @@ var _util = require("../../core/util");
 var isObject = _util.isObject;
-var isFunction = _util.isFunction;
 
@@ -20,3 +19,8 @@ var textContain = require("../../contain/text");
 
-// TODO: Have not support 'start', 'end' yet.
+var _constant = require("../constant");
+
+var ContextCachedBy = _constant.ContextCachedBy;
+var WILL_BE_RESTORED = _constant.WILL_BE_RESTORED;
+var DEFAULT_FONT = textContain.DEFAULT_FONT; // TODO: Have not support 'start', 'end' yet.
+
 var VALID_TEXT_ALIGN = {
@@ -69,3 +73,3 @@ left: 1,
  *                  If set false, rect text is not used.
- * @param {Element} [prevEl] For ctx prop cache.
+ * @param {Element|module:zrender/graphic/helper/constant.WILL_BE_RESTORED} [prevEl] For ctx prop cache.
  */
@@ -75,3 +79,3 @@
 function renderText(hostEl, ctx, text, style, rect, prevEl) {
-  style.rich ? renderRichText(hostEl, ctx, text, style, rect) : renderPlainText(hostEl, ctx, text, style, rect, prevEl);
+  style.rich ? renderRichText(hostEl, ctx, text, style, rect, prevEl) : renderPlainText(hostEl, ctx, text, style, rect, prevEl);
 } // Avoid setting to ctx according to prevEl if possible for
@@ -84,8 +88,35 @@ // performance in scenarios of large amount text.
 
-  var prevStyle = prevEl && prevEl.style; // Some cache only available on textEl.
+  var needDrawBg = needDrawBackground(style);
+  var prevStyle;
+  var checkCache = false;
+  var cachedByMe = ctx.__attrCachedBy === ContextCachedBy.PLAIN_TEXT; // Only take and check cache for `Text` el, but not RectText.
 
-  var isPrevTextEl = prevStyle && prevEl.type === 'text';
-  var styleFont = style.font || textContain.DEFAULT_FONT;
+  if (prevEl !== WILL_BE_RESTORED) {
+    if (prevEl) {
+      prevStyle = prevEl.style;
+      checkCache = !needDrawBg && cachedByMe && prevStyle;
+    } // Prevent from using cache in `Style::bind`, because of the case:
+    // ctx property is modified by other properties than `Style::bind`
+    // used, and Style::bind is called next.
 
-  if (!isPrevTextEl || styleFont !== (prevStyle.font || textContain.DEFAULT_FONT)) {
+
+    ctx.__attrCachedBy = needDrawBg ? ContextCachedBy.NONE : ContextCachedBy.PLAIN_TEXT;
+  } // Since this will be restored, prevent from using these props to check cache in the next
+  // entering of this method. But do not need to clear other cache like `Style::bind`.
+  else if (cachedByMe) {
+      ctx.__attrCachedBy = ContextCachedBy.NONE;
+    }
+
+  var styleFont = style.font || DEFAULT_FONT; // PENDING
+  // Only `Text` el set `font` and keep it (`RectText` will restore). So theoretically
+  // we can make font cache on ctx, which can cache for text el that are discontinuous.
+  // But layer save/restore needed to be considered.
+  // if (styleFont !== ctx.__fontCache) {
+  //     ctx.font = styleFont;
+  //     if (prevEl !== WILL_BE_RESTORED) {
+  //         ctx.__fontCache = styleFont;
+  //     }
+  // }
+
+  if (!checkCache || styleFont !== (prevStyle.font || DEFAULT_FONT)) {
     ctx.font = styleFont;
@@ -105,6 +136,7 @@ } // Use the final font from context-2d, because the final
   var textPadding = style.textPadding;
+  var textLineHeight = style.textLineHeight;
   var contentBlock = hostEl.__textCotentBlock;
 
   if (!contentBlock || hostEl.__dirtyText) {
-    contentBlock = hostEl.__textCotentBlock = textContain.parsePlainText(text, computedFont, textPadding, style.truncate);
+    contentBlock = hostEl.__textCotentBlock = textContain.parsePlainText(text, computedFont, textPadding, textLineHeight, style.truncate);
   }
@@ -125,3 +157,2 @@
   var textY = boxY;
-  var needDrawBg = needDrawBackground(style);
 
@@ -148,4 +179,6 @@ if (needDrawBg || textPadding) {
 
-  ctx.textBaseline = 'middle'; // Always set shadowBlur and shadowOffset to avoid leak from displayable.
+  ctx.textBaseline = 'middle'; // Set text opacity
 
+  ctx.globalAlpha = style.opacity || 1; // Always set shadowBlur and shadowOffset to avoid leak from displayable.
+
   for (var i = 0; i < SHADOW_STYLE_COMMON_PROPS.length; i++) {
@@ -157,3 +190,3 @@ var propItem = SHADOW_STYLE_COMMON_PROPS[i];
 
-    if (!isPrevTextEl || val !== prevStyle[styleProp]) {
+    if (!checkCache || val !== prevStyle[styleProp]) {
       ctx[ctxProp] = fixShadow(ctx, ctxProp, val || propItem[2]);
@@ -166,5 +199,5 @@ }
   var textStrokeWidth = style.textStrokeWidth;
-  var textStrokeWidthPrev = isPrevTextEl ? prevStyle.textStrokeWidth : null;
-  var strokeWidthChanged = !isPrevTextEl || textStrokeWidth !== textStrokeWidthPrev;
-  var strokeChanged = !isPrevTextEl || strokeWidthChanged || style.textStroke !== prevStyle.textStroke;
+  var textStrokeWidthPrev = checkCache ? prevStyle.textStrokeWidth : null;
+  var strokeWidthChanged = !checkCache || textStrokeWidth !== textStrokeWidthPrev;
+  var strokeChanged = !checkCache || strokeWidthChanged || style.textStroke !== prevStyle.textStroke;
   var textStroke = getStroke(style.textStroke, textStrokeWidth);
@@ -184,3 +217,3 @@ var textFill = getFill(style.textFill);
   if (textFill) {
-    if (!isPrevTextEl || style.textFill !== prevStyle.textFill || prevStyle.textBackgroundColor) {
+    if (!checkCache || style.textFill !== prevStyle.textFill) {
       ctx.fillStyle = textFill;
@@ -205,3 +238,9 @@ }
 
-function renderRichText(hostEl, ctx, text, style, rect) {
+function renderRichText(hostEl, ctx, text, style, rect, prevEl) {
+  // Do not do cache for rich text because of the complexity.
+  // But `RectText` this will be restored, do not need to clear other cache like `Style::bind`.
+  if (prevEl !== WILL_BE_RESTORED) {
+    ctx.__attrCachedBy = ContextCachedBy.NONE;
+  }
+
   var contentBlock = hostEl.__textCotentBlock;
@@ -332,3 +371,3 @@
   setCtx(ctx, 'textBaseline', 'middle');
-  setCtx(ctx, 'font', token.font || textContain.DEFAULT_FONT);
+  setCtx(ctx, 'font', token.font || DEFAULT_FONT);
   var textStroke = getStroke(tokenStyle.textStroke || style.textStroke, textStrokeWidth);
@@ -351,3 +390,3 @@ var textFill = getFill(tokenStyle.textFill || style.textFill);
 function needDrawBackground(style) {
-  return style.textBackgroundColor || style.textBorderWidth && style.textBorderColor;
+  return !!(style.textBackgroundColor || style.textBorderWidth && style.textBorderColor);
 } // style: {textBackgroundColor, textBorderWidth, textBorderColor, textBorderRadius, text}
@@ -397,5 +436,2 @@ // shape: {x, y, width, height}
     }
-  } else if (isFunction(textBackgroundColor)) {
-    setCtx(ctx, 'fillStyle', textBackgroundColor(style));
-    ctx.fill();
   } else if (isObject(textBackgroundColor)) {
@@ -402,0 +438,0 @@ var image = textBackgroundColor.image;

lib/graphic/IncrementalDisplayable.js

@@ -11,3 +11,3 @@ var _util = require("../core/util");
  * Displayable for incremental rendering. It will be rendered in a separate layer
- * IncrementalDisplay have too main methods. `clearDisplayables` and `addDisplayables`
+ * IncrementalDisplay have two main methods. `clearDisplayables` and `addDisplayables`
  * addDisplayables will render the added displayables incremetally.
@@ -14,0 +14,0 @@ *

lib/graphic/mixin/RectText.js

@@ -5,2 +5,6 @@ var textHelper = require("../helper/text");
 
+var _constant = require("../constant");
+
+var WILL_BE_RESTORED = _constant.WILL_BE_RESTORED;
+
 /**
@@ -54,3 +58,3 @@ * Mixin for drawing text in a element bounding rect
 
-    textHelper.renderText(this, ctx, text, style, rect);
+    textHelper.renderText(this, ctx, text, style, rect, WILL_BE_RESTORED);
     ctx.restore();
@@ -57,0 +61,0 @@ }

lib/graphic/Path.js

@@ -36,2 +36,8 @@ var Displayable = require("./Displayable");
   strokeContainThreshold: 5,
+
+  /**
+   * See `module:zrender/src/graphic/helper/subPixelOptimize`.
+   * @type {boolean}
+   */
+  subPixelOptimize: false,
   brush: function (ctx, prevEl) {
@@ -38,0 +44,0 @@ var style = this.style;

lib/graphic/shape/Line.js

 var Path = require("../Path");
 
+var _subPixelOptimize = require("../helper/subPixelOptimize");
+
+var subPixelOptimizeLine = _subPixelOptimize.subPixelOptimizeLine;
+
 /**
@@ -7,2 +11,5 @@ * 直线
  */
+// Avoid create repeatly.
+var subPixelOptimizeOutputShape = {};
+
 var _default = Path.extend({
@@ -24,6 +31,20 @@ type: 'line',
   buildPath: function (ctx, shape) {
-    var x1 = shape.x1;
-    var y1 = shape.y1;
-    var x2 = shape.x2;
-    var y2 = shape.y2;
+    var x1;
+    var y1;
+    var x2;
+    var y2;
+
+    if (this.subPixelOptimize) {
+      subPixelOptimizeLine(subPixelOptimizeOutputShape, shape, this.style);
+      x1 = subPixelOptimizeOutputShape.x1;
+      y1 = subPixelOptimizeOutputShape.y1;
+      x2 = subPixelOptimizeOutputShape.x2;
+      y2 = subPixelOptimizeOutputShape.y2;
+    } else {
+      x1 = shape.x1;
+      y1 = shape.y1;
+      x2 = shape.x2;
+      y2 = shape.y2;
+    }
+
     var percent = shape.percent;
@@ -30,0 +51,0 @@

lib/graphic/shape/Rect.js

@@ -5,2 +5,6 @@ var Path = require("../Path");
 
+var _subPixelOptimize = require("../helper/subPixelOptimize");
+
+var subPixelOptimizeRect = _subPixelOptimize.subPixelOptimizeRect;
+
 /**
@@ -10,2 +14,5 @@ * 矩形
  */
+// Avoid create repeatly.
+var subPixelOptimizeOutputShape = {};
+
 var _default = Path.extend({
@@ -26,7 +33,22 @@ type: 'rect',
   buildPath: function (ctx, shape) {
-    var x = shape.x;
-    var y = shape.y;
-    var width = shape.width;
-    var height = shape.height;
+    var x;
+    var y;
+    var width;
+    var height;
 
+    if (this.subPixelOptimize) {
+      subPixelOptimizeRect(subPixelOptimizeOutputShape, shape, this.style);
+      x = subPixelOptimizeOutputShape.x;
+      y = subPixelOptimizeOutputShape.y;
+      width = subPixelOptimizeOutputShape.width;
+      height = subPixelOptimizeOutputShape.height;
+      subPixelOptimizeOutputShape.r = shape.r;
+      shape = subPixelOptimizeOutputShape;
+    } else {
+      x = shape.x;
+      y = shape.y;
+      width = shape.width;
+      height = shape.height;
+    }
+
     if (!shape.r) {
@@ -33,0 +55,0 @@ ctx.rect(x, y, width, height);

lib/graphic/shape/Trochoid.js

@@ -34,3 +34,3 @@ var Path = require("../Path");
     var offsetY = shape.cy;
-    var delta = shape.location == 'out' ? 1 : -1;
+    var delta = shape.location === 'out' ? 1 : -1;
 
@@ -37,0 +37,0 @@ if (shape.location && R <= r) {

lib/graphic/States.js

@@ -34,3 +34,3 @@ var zrUtil = require("../core/util");
 var TransitionObject = function (opts) {
-  if (typeof opts == 'string') {
+  if (typeof opts === 'string') {
     this._fromStr(opts);
@@ -227,3 +227,3 @@ } else if (opts) {
           if ( // Not initial state
-          name != this._initialState // Not copied from initial state in _extendFromInitial method
+          name !== this._initialState // Not copied from initial state in _extendFromInitial method
           && initialState.style !== state.style) {
@@ -230,0 +230,0 @@ el.style.extendFrom(state.style, true);

lib/graphic/Style.js

 var fixShadow = require("./helper/fixShadow");
 
+var _constant = require("./constant");
+
+var ContextCachedBy = _constant.ContextCachedBy;
 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);
@@ -351,5 +354,8 @@ // var LINE_PROPS = STYLE_COMMON_PROPS.slice(4);
     var style = this;
-    var prevStyle = prevEl && prevEl.style;
-    var firstDraw = !prevStyle;
+    var prevStyle = prevEl && prevEl.style; // If no prevStyle, it means first draw.
+    // Only apply cache if the last time cachced by this function.
 
+    var notCheckCache = !prevStyle || ctx.__attrCachedBy !== ContextCachedBy.STYLE_BIND;
+    ctx.__attrCachedBy = ContextCachedBy.STYLE_BIND;
+
     for (var i = 0; i < STYLE_COMMON_PROPS.length; i++) {
@@ -359,3 +365,3 @@ var prop = STYLE_COMMON_PROPS[i];
 
-      if (firstDraw || style[styleName] !== prevStyle[styleName]) {
+      if (notCheckCache || style[styleName] !== prevStyle[styleName]) {
         // FIXME Invalid property value will cause style leak from previous element.
@@ -366,15 +372,15 @@ ctx[styleName] = fixShadow(ctx, styleName, style[styleName] || prop[1]);
 
-    if (firstDraw || style.fill !== prevStyle.fill) {
+    if (notCheckCache || style.fill !== prevStyle.fill) {
       ctx.fillStyle = style.fill;
     }
 
-    if (firstDraw || style.stroke !== prevStyle.stroke) {
+    if (notCheckCache || style.stroke !== prevStyle.stroke) {
       ctx.strokeStyle = style.stroke;
     }
 
-    if (firstDraw || style.opacity !== prevStyle.opacity) {
+    if (notCheckCache || style.opacity !== prevStyle.opacity) {
       ctx.globalAlpha = style.opacity == null ? 1 : style.opacity;
     }
 
-    if (firstDraw || style.blend !== prevStyle.blend) {
+    if (notCheckCache || style.blend !== prevStyle.blend) {
       ctx.globalCompositeOperation = style.blend || 'source-over';
@@ -381,0 +387,0 @@ }

lib/graphic/Text.js

@@ -9,2 +9,6 @@ var Displayable = require("./Displayable");
 
+var _constant = require("./constant");
+
+var ContextCachedBy = _constant.ContextCachedBy;
+
 /**
@@ -38,2 +42,5 @@ * @alias zrender/graphic/Text
     if (!textHelper.needDrawText(text, style)) {
+      // The current el.style is not applied
+      // and should not be used as cache.
+      ctx.__attrCachedBy = ContextCachedBy.NONE;
       return;
@@ -40,0 +47,0 @@ }

lib/Handler.js

@@ -11,2 +11,4 @@ var util = require("./core/util");
 
+var GestureMgr = require("./core/GestureMgr");
+
 var SILENT = 'silent';
@@ -91,2 +93,8 @@
   this._lastY;
+  /**
+   * @private
+   * @type {module:zrender/core/GestureMgr}
+   */
+
+  this._gestureMgr;
   Draggable.call(this);
@@ -155,3 +163,3 @@ this.setHandlerProxy(proxy);
       element = element && element.parentNode;
-    } while (element && element.nodeType != 9 && !(innerDom = element === this.painterRoot));
+    } while (element && element.nodeType !== 9 && !(innerDom = element === this.painterRoot));
 
@@ -232,3 +240,3 @@ !innerDom && this.trigger('globalout', {
       this.painter && this.painter.eachOtherLayer(function (layer) {
-        if (typeof layer[eventHandler] == 'function') {
+        if (typeof layer[eventHandler] === 'function') {
           layer[eventHandler].call(layer, eventPacket);
@@ -274,2 +282,20 @@ }
     return out;
+  },
+  processGesture: function (event, stage) {
+    if (!this._gestureMgr) {
+      this._gestureMgr = new GestureMgr();
+    }
+
+    var gestureMgr = this._gestureMgr;
+    stage === 'start' && gestureMgr.clear();
+    var gestureInfo = gestureMgr.recognize(event, this.findHover(event.zrX, event.zrY, null).target, this.proxy.dom);
+    stage === 'end' && gestureMgr.clear(); // Do not do any preventDefault here. Upper application do that if necessary.
+
+    if (gestureInfo) {
+      var type = gestureInfo.type;
+      event.gestureEvent = type;
+      this.dispatchToElement({
+        target: gestureInfo.target
+      }, type, gestureInfo.event);
+    }
   }
@@ -276,0 +302,0 @@ }; // Common handlers

lib/Layer.js

@@ -141,3 +141,3 @@ var util = require("./core/util");
 
-    if (dpr != 1) {
+    if (dpr !== 1) {
       this.ctxBack.scale(dpr, dpr);
@@ -169,3 +169,3 @@ }
 
-      if (dpr != 1) {
+      if (dpr !== 1) {
         this.ctxBack.scale(dpr, dpr);
@@ -172,0 +172,0 @@ }

lib/mixin/Eventful.js

@@ -44,34 +44,3 @@ /**
   one: function (event, query, handler, context) {
-    var _h = this._$handlers;
-
-    if (typeof query === 'function') {
-      context = handler;
-      handler = query;
-      query = null;
-    }
-
-    if (!handler || !event) {
-      return this;
-    }
-
-    query = normalizeQuery(this, query);
-
-    if (!_h[event]) {
-      _h[event] = [];
-    }
-
-    for (var i = 0; i < _h[event].length; i++) {
-      if (_h[event][i].h === handler) {
-        return this;
-      }
-    }
-
-    _h[event].push({
-      h: handler,
-      one: true,
-      query: query,
-      ctx: context || this
-    });
-
-    return this;
+    return on(this, event, query, handler, context, true);
   },
@@ -88,34 +57,3 @@
   on: function (event, query, handler, context) {
-    var _h = this._$handlers;
-
-    if (typeof query === 'function') {
-      context = handler;
-      handler = query;
-      query = null;
-    }
-
-    if (!handler || !event) {
-      return this;
-    }
-
-    query = normalizeQuery(this, query);
-
-    if (!_h[event]) {
-      _h[event] = [];
-    }
-
-    for (var i = 0; i < _h[event].length; i++) {
-      if (_h[event][i].h === handler) {
-        return this;
-      }
-    }
-
-    _h[event].push({
-      h: handler,
-      one: false,
-      query: query,
-      ctx: context || this
-    });
-
-    return this;
+    return on(this, event, query, handler, context, false);
   },
@@ -131,3 +69,3 @@
     var _h = this._$handlers;
-    return _h[event] && _h[event].length;
+    return !_h[event] || !_h[event].length;
   },
@@ -304,2 +242,42 @@
   return query;
+}
+
+function on(eventful, event, query, handler, context, isOnce) {
+  var _h = eventful._$handlers;
+
+  if (typeof query === 'function') {
+    context = handler;
+    handler = query;
+    query = null;
+  }
+
+  if (!handler || !event) {
+    return eventful;
+  }
+
+  query = normalizeQuery(eventful, query);
+
+  if (!_h[event]) {
+    _h[event] = [];
+  }
+
+  for (var i = 0; i < _h[event].length; i++) {
+    if (_h[event][i].h === handler) {
+      return eventful;
+    }
+  }
+
+  var wrap = {
+    h: handler,
+    one: isOnce,
+    query: query,
+    ctx: context || eventful,
+    // FIXME
+    // Do not publish this feature util it is proved that it makes sense.
+    callAtLast: handler.zrEventfulCallAtLast
+  };
+  var lastIndex = _h[event].length - 1;
+  var lastWrap = _h[event][lastIndex];
+  lastWrap && lastWrap.callAtLast ? _h[event].splice(lastIndex, 0, wrap) : _h[event].push(wrap);
+  return eventful;
 } // ----------------------
@@ -306,0 +284,0 @@ // The events in zrender

lib/Painter.js

@@ -62,3 +62,3 @@ var _config = require("./config");
 function isClipPathChanged(clipPaths, prevClipPaths) {
-  if (clipPaths == prevClipPaths) {
+  if (clipPaths === prevClipPaths) {
     // Can both be null or undefined
@@ -832,3 +832,3 @@ return false;
 
-      if (this._width != width || height != this._height) {
+      if (this._width !== width || height !== this._height) {
         domRoot.style.width = width + 'px';
@@ -835,0 +835,0 @@ domRoot.style.height = height + 'px';

lib/svg/graphic.js

@@ -58,6 +58,2 @@ var _core = require("./core");
     // Don't set attribute for gradient, since it need new dom nodes
-    if (typeof val === 'string' && val.indexOf('NaN') > -1) {
-      console.log(val);
-    }
-
     el.setAttribute(key, val);
@@ -258,2 +254,3 @@ }
     path.beginPath();
+    path.subPixelOptimize = false;
     el.buildPath(path, el.shape);
@@ -363,3 +360,3 @@ el.__dirtyPath = false;
   var verticalAlign = getVerticalAlignForSvg(style.textVerticalAlign);
-  textRect = textContain.getBoundingRect(text, font, align, verticalAlign);
+  textRect = textContain.getBoundingRect(text, font, align, verticalAlign, style.textPadding, style.textLineHeight);
   var lineHeight = textRect.lineHeight; // Text position represented by coord
@@ -366,0 +363,0 @@

lib/svg/helper/GradientManager.js

@@ -7,2 +7,4 @@ var Definable = require("./Definable");
 
+var colorTool = require("../../tool/color");
+
 /**
@@ -159,3 +161,19 @@ * @file Manages SVG gradient elements.
     stop.setAttribute('offset', colors[i].offset * 100 + '%');
-    stop.setAttribute('stop-color', colors[i].color);
+    var color = colors[i].color;
+
+    if (color.indexOf('rgba' > -1)) {
+      // Fix Safari bug that stop-color not recognizing alpha #9014
+      var opacity = colorTool.parse(color)[3];
+      var hex = colorTool.toHex(color); // stop-color cannot be color, since:
+      // The opacity value used for the gradient calculation is the
+      // *product* of the value of stop-opacity and the opacity of the
+      // value of stop-color.
+      // See https://www.w3.org/TR/SVG2/pservers.html#StopOpacityProperty
+
+      stop.setAttribute('stop-color', '#' + hex);
+      stop.setAttribute('stop-opacity', opacity);
+    } else {
+      stop.setAttribute('stop-color', colors[i].color);
+    }
+
     dom.appendChild(stop);
@@ -162,0 +180,0 @@ } // Store dom element in gradient, to avoid creating multiple

lib/svg/Painter.js

@@ -7,4 +7,2 @@ var _core = require("./core");
 
-var each = util.each;
-
 var zrLog = require("../core/log");
@@ -358,3 +356,3 @@
 
-each(['getLayer', 'insertLayer', 'eachLayer', 'eachBuiltinLayer', 'eachOtherLayer', 'getLayers', 'modLayer', 'delLayer', 'clearLayer', 'toDataURL', 'pathToImage'], function (name) {
+util.each(['getLayer', 'insertLayer', 'eachLayer', 'eachBuiltinLayer', 'eachOtherLayer', 'getLayers', 'modLayer', 'delLayer', 'clearLayer', 'toDataURL', 'pathToImage'], function (name) {
   SVGPainter.prototype[name] = createMethodNotSupport(name);
@@ -361,0 +359,0 @@ });

lib/tool/color.js

@@ -304,4 +304,4 @@ var LRU = require("../core/LRU");
 
-  var op = str.indexOf('('),
-      ep = str.indexOf(')');
+  var op = str.indexOf('(');
+  var ep = str.indexOf(')');
 
@@ -308,0 +308,0 @@ if (op !== -1 && ep + 1 === str.length) {

lib/tool/parseSVG.js

@@ -615,5 +615,5 @@ var Group = require("../container/Group");
     }
+
+    node.setLocalTransform(m);
   }
-
-  node.setLocalTransform(m);
 } // Value may contain space.
@@ -620,0 +620,0 @@

lib/vml/graphic.js

@@ -248,3 +248,3 @@ var env = require("../core/env");
   var updateFillAndStroke = function (vmlEl, type, style, zrEl) {
-    var isFill = type == 'fill';
+    var isFill = type === 'fill';
     var el = vmlEl.getElementsByTagName(type)[0]; // Stroke must have lineWidth
@@ -489,2 +489,3 @@
       path.beginPath();
+      path.subPixelOptimize = false;
       this.buildPath(path, this.shape);
@@ -684,3 +685,3 @@ path.toStatic();
 
-      if (imageEl.parentNode != cropEl) {
+      if (imageEl.parentNode !== cropEl) {
         cropEl.appendChild(imageEl);
@@ -836,3 +837,3 @@ }
     var font = fontStyle.style + ' ' + fontStyle.variant + ' ' + fontStyle.weight + ' ' + fontStyle.size + 'px "' + fontStyle.family + '"';
-    textRect = textRect || textContain.getBoundingRect(text, font, align, verticalAlign); // Transform rect to view space
+    textRect = textRect || textContain.getBoundingRect(text, font, align, verticalAlign, style.textPadding, style.textLineHeight); // Transform rect to view space
 
@@ -839,0 +840,0 @@ var m = this.transform; // Ignore transform for text in other element

lib/vml/Painter.js

@@ -129,3 +129,3 @@ var zrLog = require("../core/log");
 
-    if (this._width != width || this._height != height) {
+    if (this._width !== width || this._height !== height) {
       this._width = width;
@@ -132,0 +132,0 @@ this._height = height;

lib/zrender.js

@@ -36,7 +36,7 @@ var guid = require("./core/guid");
 
-var version = '4.0.5';
+var version = '4.0.6';
 /**
  * Initializing a zrender instance
  * @param {HTMLElement} dom
- * @param {Object} opts
+ * @param {Object} [opts]
  * @param {string} [opts.renderer='canvas'] 'canvas' or 'svg'
@@ -43,0 +43,0 @@ * @param {number} [opts.devicePixelRatio]

package.json

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

src/animation/Animation.js

@@ -50,3 +50,3 @@ /**
 
-    this.onframe = options.onframe || function() {};
+    this.onframe = options.onframe || function () {};
 
@@ -94,3 +94,3 @@ // private properties
      */
-    removeClip: function(clip) {
+    removeClip: function (clip) {
         var idx = util.indexOf(this._clips, clip);
@@ -114,3 +114,3 @@ if (idx >= 0) {
 
-    _update: function() {
+    _update: function () {
         var time = new Date().getTime() - this._pausedTime;
@@ -117,0 +117,0 @@ var delta = time - this._time;

src/animation/Animator.js

@@ -48,3 +48,3 @@ /**
     var len = p0.length;
-    if (arrDim == 1) {
+    if (arrDim === 1) {
         for (var i = 0; i < len; i++) {
@@ -155,3 +155,3 @@ out[i] = interpolateNumber(p0[i], p1[i], percent);
     var len = p0.length;
-    if (arrDim == 1) {
+    if (arrDim === 1) {
         for (var i = 0; i < len; i++) {
@@ -245,3 +245,3 @@ out[i] = catmullRomInterpolate(
     // Sort keyframe as ascending
-    keyframes.sort(function(a, b) {
+    keyframes.sort(function (a, b) {
         return a.time - b.time;
@@ -270,3 +270,3 @@ });
         // Try converting a string to a color array
-        if (typeof value == 'string') {
+        if (typeof value === 'string') {
             var colorArray = color.parse(value);
@@ -449,3 +449,3 @@ if (colorArray) {
  */
-var Animator = function(target, loop, getter, setter) {
+var Animator = function (target, loop, getter, setter) {
     this._tracks = {};
@@ -477,3 +477,3 @@ this._target = target;
      */
-    when: function(time /* ms */, props) {
+    when: function (time /* ms */, props) {
         var tracks = this._tracks;
@@ -563,3 +563,3 @@ for (var propName in props) {
 
-        var oneTrackDone = function() {
+        var oneTrackDone = function () {
             clipCount--;
@@ -644,3 +644,3 @@ if (!clipCount) {
      */
-    done: function(cb) {
+    done: function (cb) {
         if (cb) {
@@ -647,0 +647,0 @@ this._doneList.push(cb);

src/animation/Clip.js

@@ -72,3 +72,3 @@ /**
         var easing = this.easing;
-        var easingFunc = typeof easing == 'string' ? easingFuncs[easing] : easing;
+        var easingFunc = typeof easing === 'string' ? easingFuncs[easing] : easing;
         var schedule = typeof easingFunc === 'function'
@@ -81,5 +81,5 @@ ? easingFunc(percent)
         // 结束
-        if (percent == 1) {
+        if (percent === 1) {
             if (this.loop) {
-                this.restart (globalTime);
+                this.restart(globalTime);
                 // 重新开始周期
@@ -86,0 +86,0 @@ // 抛出而不是直接调用事件直到 stage.update 后再统一调用这些事件

src/animation/easing.js

@@ -215,3 +215,4 @@ /**
         if (!a || a < 1) {
-            a = 1; s = p / 4;
+            a = 1;
+            s = p / 4;
         }
@@ -221,4 +222,4 @@ else {
         }
-        return -(a * Math.pow(2, 10 * (k -= 1)) *
-                    Math.sin((k - s) * (2 * Math.PI) / p));
+        return -(a * Math.pow(2, 10 * (k -= 1))
+                    * Math.sin((k - s) * (2 * Math.PI) / p));
     },
@@ -240,3 +241,4 @@ /**
         if (!a || a < 1) {
-            a = 1; s = p / 4;
+            a = 1;
+            s = p / 4;
         }
@@ -246,4 +248,4 @@ else {
         }
-        return (a * Math.pow(2, -10 * k) *
-                Math.sin((k - s) * (2 * Math.PI) / p) + 1);
+        return (a * Math.pow(2, -10 * k)
+                    * Math.sin((k - s) * (2 * Math.PI) / p) + 1);
     },
@@ -265,3 +267,4 @@ /**
         if (!a || a < 1) {
-            a = 1; s = p / 4;
+            a = 1;
+            s = p / 4;
         }
@@ -268,0 +271,0 @@ else {

src/contain/arc.js

@@ -44,3 +44,4 @@
         endAngle = normalizeRadian(tmp);
-    } else {
+    }
+    else {
         startAngle = normalizeRadian(startAngle);
@@ -47,0 +48,0 @@ endAngle = normalizeRadian(endAngle);

src/contain/line.js

@@ -32,3 +32,3 @@
         _a = (y0 - y1) / (x0 - x1);
-        _b = (x0 * y1 - x1 * y0) / (x0 - x1) ;
+        _b = (x0 * y1 - x1 * y0) / (x0 - x1);
     }
@@ -35,0 +35,0 @@ else {

src/contain/path.js

@@ -44,3 +44,4 @@ import PathProxy from '../core/PathProxy';
         var nExtrema = -1;
-        var y0_, y1_;
+        var y0_;
+        var y1_;
         for (var i = 0; i < nRoots; i++) {
@@ -66,3 +67,3 @@ var t = roots[i];
             }
-            if (nExtrema == 2) {
+            if (nExtrema === 2) {
                 // 分成三段单调函数
@@ -164,3 +165,4 @@ if (t < extrema[0]) {
             return dir;
-        } else {
+        }
+        else {
             return 0;
@@ -227,3 +229,3 @@ }
 
-        if (i == 1) {
+        if (i === 1) {
             // 如果第一个命令是 L, C, Q
@@ -309,3 +311,3 @@ // 则 previous point 同绘制命令的第一个 point
                 // TODO Arc 旋转
-                var psi = data[i++];
+                i += 1;
                 var anticlockwise = 1 - data[i++];
@@ -312,0 +314,0 @@ var x1 = Math.cos(theta) * rx + cx;

src/contain/text.js

@@ -68,10 +68,10 @@ import BoundingRect from '../core/BoundingRect';
  */
-export function getBoundingRect(text, font, textAlign, textVerticalAlign, textPadding, rich, truncate) {
+export function getBoundingRect(text, font, textAlign, textVerticalAlign, textPadding, textLineHeight, rich, truncate) {
     return rich
-        ? getRichTextRect(text, font, textAlign, textVerticalAlign, textPadding, rich, truncate)
-        : getPlainTextRect(text, font, textAlign, textVerticalAlign, textPadding, truncate);
+        ? getRichTextRect(text, font, textAlign, textVerticalAlign, textPadding, rich, textLineHeight, truncate)
+        : getPlainTextRect(text, font, textAlign, textVerticalAlign, textPadding, textLineHeight, truncate);
 }
 
-function getPlainTextRect(text, font, textAlign, textVerticalAlign, textPadding, truncate) {
-    var contentBlock = parsePlainText(text, font, textPadding, truncate);
+function getPlainTextRect(text, font, textAlign, textVerticalAlign, textPadding, textLineHeight, truncate) {
+    var contentBlock = parsePlainText(text, font, textPadding, textLineHeight, truncate);
     var outerWidth = getWidth(text, font);
@@ -92,3 +92,3 @@ if (textPadding) {
 
-function getRichTextRect(text, font, textAlign, textVerticalAlign, textPadding, rich, truncate) {
+function getRichTextRect(text, font, textAlign, textVerticalAlign, textPadding, textLineHeight, rich, truncate) {
     var contentBlock = parseRichText(text, {
@@ -99,3 +99,4 @@ rich: rich,
         textAlign: textAlign,
-        textPadding: textPadding
+        textPadding: textPadding,
+        textLineHeight: textLineHeight
     });
@@ -301,3 +302,3 @@ var outerWidth = contentBlock.outerWidth;
 
-    var ellipsisWidth = getWidth(ellipsis);
+    var ellipsisWidth = getWidth(ellipsis, font);
     if (ellipsisWidth > contentWidth) {
@@ -333,3 +334,3 @@ ellipsis = '';
 
-    for (var j = 0;; j++) {
+    for (var j = 0; ; j++) {
         if (lineWidth <= contentWidth || j >= options.maxIterations) {
@@ -402,6 +403,6 @@ textLine += options.ellipsis;
  */
-export function parsePlainText(text, font, padding, truncate) {
+export function parsePlainText(text, font, padding, textLineHeight, truncate) {
     text != null && (text += '');
 
-    var lineHeight = getLineHeight(font);
+    var lineHeight = retrieve2(textLineHeight, getLineHeight(font));
     var lines = text ? text.split('\n') : [];
@@ -408,0 +409,0 @@ var height = lines.length * lineHeight;

src/core/arrayDiff.js

@@ -93,3 +93,3 @@ // Hirschberg's algorithm
     var j;
-    if (! len0) {
+    if (!len0) {
         for (j = 0; j < len1; j++) {
@@ -99,3 +99,3 @@ append(out, '+', j + j0);
     }
-    else if (! len1) {
+    else if (!len1) {
         for (i = 0; i < len0; i++) {
@@ -109,3 +109,3 @@ append(out, '-', i + i0);
         for (j = 0; j < len1; j++) {
-            if (equal(a, arr1[j + j0]) && ! matched) {
+            if (equal(a, arr1[j + j0]) && !matched) {
                 matched = true;
@@ -124,3 +124,3 @@ // Equal and update use the index in first array
         }
-        if (! matched) {
+        if (!matched) {
             append(out, '-', i0);
@@ -133,3 +133,3 @@ }
         for (i = 0; i < len0; i++) {
-            if (equal(b, arr0[i + i0]) && ! matched) {
+            if (equal(b, arr0[i + i0]) && !matched) {
                 matched = true;
@@ -147,3 +147,3 @@ append(out, '=', i + i0, j0);
         }
-        if (! matched) {
+        if (!matched) {
             append(out, '+', j0);
@@ -190,3 +190,3 @@ }
     for (i = 0; i < lenMin; i++) {
-        if (! equal(arr0[i], arr1[i])) {
+        if (!equal(arr0[i], arr1[i])) {
             break;
@@ -198,3 +198,3 @@ }
     for (j = 0; j < lenMin; j++) {
-        if (! equal(arr0[len0 - j - 1], arr1[len1 - j - 1])) {
+        if (!equal(arr0[len0 - j - 1], arr1[len1 - j - 1])) {
             break;
@@ -201,0 +201,0 @@ }

src/core/BoundingRect.js

@@ -147,3 +147,3 @@ /**
 
-        return ! (ax1 < bx0 || bx1 < ax0 || ay1 < by0 || by1 < ay0);
+        return !(ax1 < bx0 || bx1 < ax0 || ay1 < by0 || by1 < ay0);
     },
@@ -150,0 +150,0 @@

src/core/curve.js

@@ -81,3 +81,3 @@ /**
     var b = 3 * (p2 - p1 * 2 + p0);
-    var c = 3 * (p1  - p0);
+    var c = 3 * (p1 - p0);
     var d = p0 - val;
@@ -179,3 +179,3 @@
             var t1 = -c / b;
-            if (t1 >= 0 && t1 <=1) {
+            if (t1 >= 0 && t1 <= 1) {
                 extrema[n++] = t1;
@@ -182,0 +182,0 @@ }

src/core/env.js

@@ -22,3 +22,3 @@ /**
         domSupported: false
-    }
+    };
 }
@@ -25,0 +25,0 @@ else if (typeof document === 'undefined' && typeof self !== 'undefined') {

src/core/event.js

@@ -88,3 +88,3 @@ /**
     else {
-        var touch = eventType != 'touchend'
+        var touch = eventType !== 'touchend'
             ? e.targetTouches[0]
@@ -103,2 +103,6 @@ : e.changedTouches[0];
     }
+    // [Caution]: `e.which` from browser is not always reliable. For example,
+    // when press left button and `mousemove (pointermove)` in Edge, the `e.which`
+    // is 65536 and the `e.button` is -1. But the `mouseup (pointerup)` and
+    // `mousedown (pointerdown)` is the same as Chrome does.
 
@@ -172,2 +176,17 @@ return e;
 
+/**
+ * This method only works for mouseup and mousedown. The functionality is restricted
+ * for fault tolerance, See the `e.which` compatibility above.
+ *
+ * @param {MouseEvent} e
+ * @return {boolean}
+ */
+export function isMiddleOrRightButtonOnMouseUpDown(e) {
+    return e.which === 2 || e.which === 3;
+}
+
+/**
+ * To be removed.
+ * @deprecated
+ */
 export function notLeftMouse(e) {
@@ -178,3 +197,4 @@ // If e.which is undefined, considered as left mouse event.
 
+
 // 做向上兼容
 export {Eventful as Dispatcher};

src/core/matrix.js

@@ -8,3 +8,3 @@ /**
     ? Array
-   : Float32Array;
+    : Float32Array;
 
@@ -11,0 +11,0 @@ /**

src/core/PathProxy.js

@@ -49,3 +49,3 @@ /**
 
-var hasTypedArray = typeof Float32Array != 'undefined';
+var hasTypedArray = typeof Float32Array !== 'undefined';
 
@@ -340,3 +340,3 @@ /**
 
-        if (! (this.data && this.data.length == len) && hasTypedArray) {
+        if (!(this.data && this.data.length === len) && hasTypedArray) {
             this.data = new Float32Array(len);
@@ -449,3 +449,3 @@ }
         while ((dx > 0 && x <= x1) || (dx < 0 && x >= x1)
-        || (dx == 0 && ((dy > 0 && y <= y1) || (dy < 0 && y >= y1)))) {
+        || (dx === 0 && ((dy > 0 && y <= y1) || (dy < 0 && y >= y1)))) {
             idx = this._dashIdx;
@@ -580,3 +580,3 @@ dash = lineDash[idx];
 
-            if (i == 1) {
+            if (i === 1) {
                 // 如果第一个命令是 L, C, Q
@@ -636,6 +636,6 @@ // 则 previous point 同绘制命令的第一个 point
                     // TODO Arc 旋转
-                    var psi = data[i++];
+                    i += 1;
                     var anticlockwise = 1 - data[i++];
 
-                    if (i == 1) {
+                    if (i === 1) {
                         // 直接使用 arc 命令
@@ -700,3 +700,3 @@ // 第一个命令起点还未定义
 
-            if (i == 1) {
+            if (i === 1) {
                 // 如果第一个命令是 L, C, Q
@@ -767,3 +767,3 @@ // 则 previous point 同绘制命令的第一个 point
 
-                    if (i == 1) {
+                    if (i === 1) {
                         // 直接使用 arc 命令
@@ -770,0 +770,0 @@ // 第一个命令起点还未定义

src/core/timsort.js

@@ -453,3 +453,3 @@ // https://github.com/mziccard/node-timsort
 
-    function mergeHigh (start1, length1, start2, length2) {
+    function mergeHigh(start1, length1, start2, length2) {
         var i = 0;
@@ -456,0 +456,0 @@

src/core/util.js

@@ -68,3 +68,3 @@ /**
 export function clone(source) {
-    if (source == null || typeof source != 'object') {
+    if (source == null || typeof source !== 'object') {
         return source;
@@ -273,9 +273,9 @@ }
 export function isArrayLike(data) {
-    if (! data) {
+    if (!data) {
         return;
     }
-    if (typeof data == 'string') {
+    if (typeof data === 'string') {
         return false;
     }
-    return typeof data.length == 'number';
+    return typeof data.length === 'number';
 }
@@ -464,3 +464,3 @@
     var type = typeof value;
-    return type === 'function' || (!!value && type == 'object');
+    return type === 'function' || (!!value && type === 'object');
 }
@@ -467,0 +467,0 @@

src/dom/HandlerProxy.js

@@ -10,3 +10,2 @@
 import env from '../core/env';
-import GestureMgr from '../core/GestureMgr';
 
@@ -37,24 +36,2 @@ var TOUCH_CLICK_DELAY = 300;
 
-function processGesture(proxy, event, stage) {
-    var gestureMgr = proxy._gestureMgr;
-
-    stage === 'start' && gestureMgr.clear();
-
-    var gestureInfo = gestureMgr.recognize(
-        event,
-        proxy.handler.findHover(event.zrX, event.zrY, null).target,
-        proxy.dom
-    );
-
-    stage === 'end' && gestureMgr.clear();
-
-    // Do not do any preventDefault here. Upper application do that if necessary.
-    if (gestureInfo) {
-        var type = gestureInfo.type;
-        event.gestureEvent = type;
-
-        proxy.handler.dispatchToElement({target: gestureInfo.target}, type, gestureInfo.event);
-    }
-}
-
 // function onMSGestureChange(proxy, event) {
@@ -110,4 +87,4 @@ //     if (event.translationX || event.translationY) {
         var element = event.toElement || event.relatedTarget;
-        if (element != this.dom) {
-            while (element && element.nodeType != 9) {
+        if (element !== this.dom) {
+            while (element && element.nodeType !== 9) {
                 // 忽略包含在root中的dom引起的mouseOut
@@ -141,3 +118,3 @@ if (element === this.dom) {
 
-        processGesture(this, event, 'start');
+        this.handler.processGesture(this, event, 'start');
 
@@ -166,3 +143,3 @@ // In touch device, trigger `mousemove`(`mouseover`) should
 
-        processGesture(this, event, 'change');
+        this.handler.processGesture(this, event, 'change');
 
@@ -190,3 +167,3 @@ // Mouse move should always be triggered no matter whether
 
-        processGesture(this, event, 'end');
+        this.handler.processGesture(this, event, 'end');
 
@@ -311,8 +288,2 @@ domHandlers.mouseup.call(this, event);
 
-    /**
-     * @private
-     * @type {module:zrender/core/GestureMgr}
-     */
-    this._gestureMgr = new GestureMgr();
-
     this._handlers = {};
@@ -319,0 +290,0 @@

src/graphic/Displayable.js

@@ -27,4 +27,4 @@ /**
         if (
-            opts.hasOwnProperty(name) &&
-            name !== 'style'
+            opts.hasOwnProperty(name)
+                && name !== 'style'
         ) {
@@ -31,0 +31,0 @@ this[name] = opts[name];

src/graphic/helper/image.js

@@ -53,3 +53,3 @@
         else {
-            !image && (image = new Image());
+            image = new Image();
             image.onload = image.onerror = imageOnLoad;
@@ -56,0 +56,0 @@

src/graphic/helper/roundRect.js

 
+/**
+ * @param {Object} ctx
+ * @param {Object} shape
+ * @param {number} shape.x
+ * @param {number} shape.y
+ * @param {number} shape.width
+ * @param {number} shape.height
+ * @param {number} shape.r
+ */
 export function buildPath(ctx, shape) {
@@ -3,0 +12,0 @@ var x = shape.x;

src/graphic/helper/smoothBezier.js

@@ -39,3 +39,4 @@ /**
 
-    var min, max;
+    var min;
+    var max;
     if (constraint) {
@@ -42,0 +43,0 @@ min = [Infinity, Infinity];

src/graphic/helper/text.js

@@ -8,4 +8,3 @@
     isString,
-    isObject,
-    isFunction
+    isObject
 } from '../../core/util';
@@ -16,3 +15,6 @@ import * as textContain from '../../contain/text';
 import fixShadow from './fixShadow';
+import {ContextCachedBy, WILL_BE_RESTORED} from '../constant';
 
+var DEFAULT_FONT = textContain.DEFAULT_FONT;
+
 // TODO: Have not support 'start', 'end' yet.
@@ -71,7 +73,7 @@ var VALID_TEXT_ALIGN = {left: 1, right: 1, center: 1};
  *                  If set false, rect text is not used.
- * @param {Element} [prevEl] For ctx prop cache.
+ * @param {Element|module:zrender/graphic/helper/constant.WILL_BE_RESTORED} [prevEl] For ctx prop cache.
  */
 export function renderText(hostEl, ctx, text, style, rect, prevEl) {
     style.rich
-        ? renderRichText(hostEl, ctx, text, style, rect)
+        ? renderRichText(hostEl, ctx, text, style, rect, prevEl)
         : renderPlainText(hostEl, ctx, text, style, rect, prevEl);
@@ -85,10 +87,41 @@ }
 
-    var prevStyle = prevEl && prevEl.style;
-    // Some cache only available on textEl.
-    var isPrevTextEl = prevStyle && prevEl.type === 'text';
+    var needDrawBg = needDrawBackground(style);
 
-    var styleFont = style.font || textContain.DEFAULT_FONT;
-    if (!isPrevTextEl || styleFont !== (prevStyle.font || textContain.DEFAULT_FONT)) {
+    var prevStyle;
+    var checkCache = false;
+    var cachedByMe = ctx.__attrCachedBy === ContextCachedBy.PLAIN_TEXT;
+
+    // Only take and check cache for `Text` el, but not RectText.
+    if (prevEl !== WILL_BE_RESTORED) {
+        if (prevEl) {
+            prevStyle = prevEl.style;
+            checkCache = !needDrawBg && cachedByMe && prevStyle;
+        }
+
+        // Prevent from using cache in `Style::bind`, because of the case:
+        // ctx property is modified by other properties than `Style::bind`
+        // used, and Style::bind is called next.
+        ctx.__attrCachedBy = needDrawBg ? ContextCachedBy.NONE : ContextCachedBy.PLAIN_TEXT;
+    }
+    // Since this will be restored, prevent from using these props to check cache in the next
+    // entering of this method. But do not need to clear other cache like `Style::bind`.
+    else if (cachedByMe) {
+        ctx.__attrCachedBy = ContextCachedBy.NONE;
+    }
+
+    var styleFont = style.font || DEFAULT_FONT;
+    // PENDING
+    // Only `Text` el set `font` and keep it (`RectText` will restore). So theoretically
+    // we can make font cache on ctx, which can cache for text el that are discontinuous.
+    // But layer save/restore needed to be considered.
+    // if (styleFont !== ctx.__fontCache) {
+    //     ctx.font = styleFont;
+    //     if (prevEl !== WILL_BE_RESTORED) {
+    //         ctx.__fontCache = styleFont;
+    //     }
+    // }
+    if (!checkCache || styleFont !== (prevStyle.font || DEFAULT_FONT)) {
         ctx.font = styleFont;
     }
+
     // Use the final font from context-2d, because the final
@@ -104,2 +137,3 @@ // font might not be the style.font when it is illegal.
     var textPadding = style.textPadding;
+    var textLineHeight = style.textLineHeight;
 
@@ -109,3 +143,3 @@ var contentBlock = hostEl.__textCotentBlock;
         contentBlock = hostEl.__textCotentBlock = textContain.parsePlainText(
-            text, computedFont, textPadding, style.truncate
+            text, computedFont, textPadding, textLineHeight, style.truncate
         );
@@ -132,3 +166,2 @@ }
 
-    var needDrawBg = needDrawBackground(style);
     if (needDrawBg || textPadding) {
@@ -156,2 +189,4 @@ // Consider performance, do not call getTextWidth util necessary.
     ctx.textBaseline = 'middle';
+    // Set text opacity
+    ctx.globalAlpha = style.opacity || 1;
 
@@ -164,3 +199,3 @@ // Always set shadowBlur and shadowOffset to avoid leak from displayable.
         var val = style[styleProp];
-        if (!isPrevTextEl || val !== prevStyle[styleProp]) {
+        if (!checkCache || val !== prevStyle[styleProp]) {
             ctx[ctxProp] = fixShadow(ctx, ctxProp, val || propItem[2]);
@@ -174,5 +209,5 @@ }
     var textStrokeWidth = style.textStrokeWidth;
-    var textStrokeWidthPrev = isPrevTextEl ? prevStyle.textStrokeWidth : null;
-    var strokeWidthChanged = !isPrevTextEl || textStrokeWidth !== textStrokeWidthPrev;
-    var strokeChanged = !isPrevTextEl || strokeWidthChanged || style.textStroke !== prevStyle.textStroke;
+    var textStrokeWidthPrev = checkCache ? prevStyle.textStrokeWidth : null;
+    var strokeWidthChanged = !checkCache || textStrokeWidth !== textStrokeWidthPrev;
+    var strokeChanged = !checkCache || strokeWidthChanged || style.textStroke !== prevStyle.textStroke;
     var textStroke = getStroke(style.textStroke, textStrokeWidth);
@@ -190,3 +225,3 @@ var textFill = getFill(style.textFill);
     if (textFill) {
-        if (!isPrevTextEl || style.textFill !== prevStyle.textFill || prevStyle.textBackgroundColor) {
+        if (!checkCache || style.textFill !== prevStyle.textFill) {
             ctx.fillStyle = textFill;
@@ -212,3 +247,9 @@ }
 
-function renderRichText(hostEl, ctx, text, style, rect) {
+function renderRichText(hostEl, ctx, text, style, rect, prevEl) {
+    // Do not do cache for rich text because of the complexity.
+    // But `RectText` this will be restored, do not need to clear other cache like `Style::bind`.
+    if (prevEl !== WILL_BE_RESTORED) {
+        ctx.__attrCachedBy = ContextCachedBy.NONE;
+    }
+
     var contentBlock = hostEl.__textCotentBlock;
@@ -364,3 +405,3 @@
 
-    setCtx(ctx, 'font', token.font || textContain.DEFAULT_FONT);
+    setCtx(ctx, 'font', token.font || DEFAULT_FONT);
 
@@ -384,4 +425,6 @@ var textStroke = getStroke(tokenStyle.textStroke || style.textStroke, textStrokeWidth);
 function needDrawBackground(style) {
-    return style.textBackgroundColor
-        || (style.textBorderWidth && style.textBorderColor);
+    return !!(
+        style.textBackgroundColor
+        || (style.textBorderWidth && style.textBorderColor)
+    );
 }
@@ -429,6 +472,2 @@
     }
-    else if (isFunction(textBackgroundColor)) {
-        setCtx(ctx, 'fillStyle', textBackgroundColor(style));
-        ctx.fill();
-    }
     else if (isObject(textBackgroundColor)) {
@@ -435,0 +474,0 @@ var image = textBackgroundColor.image;

src/graphic/Image.js

@@ -95,3 +95,3 @@ import Displayable from './Displayable';
             // Only restore transform when needs draw text.
-            this.restoreTransform(ctx);    
+            this.restoreTransform(ctx);
             this.drawRectText(ctx, this.getBoundingRect());
@@ -103,3 +103,3 @@ }
         var style = this.style;
-        if (! this._rect) {
+        if (!this._rect) {
             this._rect = new BoundingRect(
@@ -106,0 +106,0 @@ style.x || 0, style.y || 0, style.width || 0, style.height || 0

src/graphic/IncrementalDisplayable.js

 /**
  * Displayable for incremental rendering. It will be rendered in a separate layer
- * IncrementalDisplay have too main methods. `clearDisplayables` and `addDisplayables`
+ * IncrementalDisplay have two main methods. `clearDisplayables` and `addDisplayables`
  * addDisplayables will render the added displayables incremetally.
@@ -54,3 +54,3 @@ *
 
-IncrementalDisplayble.prototype.eachPendingDisplayable = function  (cb) {
+IncrementalDisplayble.prototype.eachPendingDisplayable = function (cb) {
     for (var i = this._cursor; i < this._displayables.length; i++) {
@@ -57,0 +57,0 @@ cb && cb(this._displayables[i]);

src/graphic/mixin/RectText.js

@@ -8,2 +8,3 @@ /**
 import BoundingRect from '../../core/BoundingRect';
+import {WILL_BE_RESTORED} from '../constant';
 
@@ -60,3 +61,3 @@ var tmpRect = new BoundingRect();
         // transformText and textRotation can not be used at the same time.
-        textHelper.renderText(this, ctx, text, style, rect);
+        textHelper.renderText(this, ctx, text, style, rect, WILL_BE_RESTORED);
 
@@ -63,0 +64,0 @@ ctx.restore();

src/graphic/Path.js

@@ -38,2 +38,8 @@ import Displayable from './Displayable';
 
+    /**
+     * See `module:zrender/src/graphic/helper/subPixelOptimize`.
+     * @type {boolean}
+     */
+    subPixelOptimize: false,
+
     brush: function (ctx, prevEl) {
@@ -358,3 +364,3 @@ var style = this.style;
                 if (
-                    ! thisShape.hasOwnProperty(name)
+                    !thisShape.hasOwnProperty(name)
                     && defaultShape.hasOwnProperty(name)
@@ -361,0 +367,0 @@ ) {

src/graphic/shape/Droplet.js

@@ -17,3 +17,3 @@ /**
 
-    buildPath : function (ctx, shape) {
+    buildPath: function (ctx, shape) {
         var x = shape.cx;
@@ -20,0 +20,0 @@ var y = shape.cy;

src/graphic/shape/Heart.js

@@ -31,3 +31,3 @@ /**
         ctx.bezierCurveTo(
-            x - a *  2, y + b / 3,
+            x - a * 2, y + b / 3,
             x - a / 2, y - b * 2 / 3,
@@ -34,0 +34,0 @@ x, y

src/graphic/shape/Line.js

@@ -7,3 +7,7 @@ /**
 import Path from '../Path';
+import {subPixelOptimizeLine} from '../helper/subPixelOptimize';
 
+// Avoid create repeatly.
+var subPixelOptimizeOutputShape = {};
+
 export default Path.extend({
@@ -30,6 +34,21 @@
     buildPath: function (ctx, shape) {
-        var x1 = shape.x1;
-        var y1 = shape.y1;
-        var x2 = shape.x2;
-        var y2 = shape.y2;
+        var x1;
+        var y1;
+        var x2;
+        var y2;
+
+        if (this.subPixelOptimize) {
+            subPixelOptimizeLine(subPixelOptimizeOutputShape, shape, this.style);
+            x1 = subPixelOptimizeOutputShape.x1;
+            y1 = subPixelOptimizeOutputShape.y1;
+            x2 = subPixelOptimizeOutputShape.x2;
+            y2 = subPixelOptimizeOutputShape.y2;
+        }
+        else {
+            x1 = shape.x1;
+            y1 = shape.y1;
+            x2 = shape.x2;
+            y2 = shape.y2;
+        }
+
         var percent = shape.percent;
@@ -36,0 +55,0 @@

src/graphic/shape/Rect.js

@@ -8,3 +8,7 @@ /**
 import * as roundRectHelper from '../helper/roundRect';
+import {subPixelOptimizeRect} from '../helper/subPixelOptimize';
 
+// Avoid create repeatly.
+var subPixelOptimizeOutputShape = {};
+
 export default Path.extend({
@@ -29,6 +33,23 @@
     buildPath: function (ctx, shape) {
-        var x = shape.x;
-        var y = shape.y;
-        var width = shape.width;
-        var height = shape.height;
+        var x;
+        var y;
+        var width;
+        var height;
+
+        if (this.subPixelOptimize) {
+            subPixelOptimizeRect(subPixelOptimizeOutputShape, shape, this.style);
+            x = subPixelOptimizeOutputShape.x;
+            y = subPixelOptimizeOutputShape.y;
+            width = subPixelOptimizeOutputShape.width;
+            height = subPixelOptimizeOutputShape.height;
+            subPixelOptimizeOutputShape.r = shape.r;
+            shape = subPixelOptimizeOutputShape;
+        }
+        else {
+            x = shape.x;
+            y = shape.y;
+            width = shape.width;
+            height = shape.height;
+        }
+
         if (!shape.r) {
@@ -35,0 +56,0 @@ ctx.rect(x, y, width, height);

src/graphic/shape/Rose.js

@@ -42,3 +42,3 @@ /**
 
-        for (var i = 0, len = R.length; i < len ; i++) {
+        for (var i = 0, len = R.length; i < len; i++) {
             r = R[i];
@@ -45,0 +45,0 @@

src/graphic/shape/Trochoid.js

@@ -40,3 +40,3 @@ /**
         var offsetY = shape.cy;
-        var delta = shape.location == 'out' ? 1 : -1;
+        var delta = shape.location === 'out' ? 1 : -1;
 
@@ -67,3 +67,3 @@ if (shape.location && R <= r) {
             x2 = (R + delta * r) * cos(theta)
-                    - delta * d * cos((R / r +  delta) * theta)
+                    - delta * d * cos((R / r + delta) * theta)
                     + offsetX;
@@ -70,0 +70,0 @@ y2 = (R + delta * r) * sin(theta)

src/graphic/States.js

@@ -30,3 +30,3 @@ /**
 var TransitionObject = function (opts) {
-    if (typeof opts == 'string') {
+    if (typeof opts === 'string') {
         this._fromStr(opts);
@@ -185,3 +185,3 @@ }
         if (name === this._currentState
-            && ! this.transiting()
+            && !this.transiting()
         ) {
@@ -196,3 +196,3 @@ return;
 
-            if (! silent) {
+            if (!silent) {
                 var prevState = this._states[this._currentState];
@@ -235,3 +235,3 @@ if (prevState) {
                         // Not initial state
-                        name != this._initialState
+                        name !== this._initialState
                         // Not copied from initial state in _extendFromInitial method
@@ -263,3 +263,3 @@ && initialState.style !== state.style
             target === this._currentState
-            && ! this.transiting()
+            && !this.transiting()
         ) {
@@ -266,0 +266,0 @@ return;

src/graphic/Style.js

 
 import fixShadow from './helper/fixShadow';
+import {ContextCachedBy} from './constant';
 
@@ -363,4 +364,8 @@ var STYLE_COMMON_PROPS = [
         var prevStyle = prevEl && prevEl.style;
-        var firstDraw = !prevStyle;
+        // If no prevStyle, it means first draw.
+        // Only apply cache if the last time cachced by this function.
+        var notCheckCache = !prevStyle || ctx.__attrCachedBy !== ContextCachedBy.STYLE_BIND;
 
+        ctx.__attrCachedBy = ContextCachedBy.STYLE_BIND;
+
         for (var i = 0; i < STYLE_COMMON_PROPS.length; i++) {
@@ -370,3 +375,3 @@ var prop = STYLE_COMMON_PROPS[i];
 
-            if (firstDraw || style[styleName] !== prevStyle[styleName]) {
+            if (notCheckCache || style[styleName] !== prevStyle[styleName]) {
                 // FIXME Invalid property value will cause style leak from previous element.
@@ -378,13 +383,13 @@ ctx[styleName] =
 
-        if ((firstDraw || style.fill !== prevStyle.fill)) {
+        if ((notCheckCache || style.fill !== prevStyle.fill)) {
             ctx.fillStyle = style.fill;
         }
-        if ((firstDraw || style.stroke !== prevStyle.stroke)) {
+        if ((notCheckCache || style.stroke !== prevStyle.stroke)) {
             ctx.strokeStyle = style.stroke;
         }
-        if ((firstDraw || style.opacity !== prevStyle.opacity)) {
+        if ((notCheckCache || style.opacity !== prevStyle.opacity)) {
             ctx.globalAlpha = style.opacity == null ? 1 : style.opacity;
         }
 
-        if ((firstDraw || style.blend !== prevStyle.blend)) {
+        if ((notCheckCache || style.blend !== prevStyle.blend)) {
             ctx.globalCompositeOperation = style.blend || 'source-over';
@@ -391,0 +396,0 @@ }

src/graphic/Text.js

@@ -5,2 +5,3 @@ import Displayable from './Displayable';
 import * as textHelper from './helper/text';
+import {ContextCachedBy} from './constant';
 
@@ -43,2 +44,5 @@ /**
         if (!textHelper.needDrawText(text, style)) {
+            // The current el.style is not applied
+            // and should not be used as cache.
+            ctx.__attrCachedBy = ContextCachedBy.NONE;
             return;
@@ -45,0 +49,0 @@ }

src/Handler.js

@@ -6,2 +6,3 @@ import * as util from './core/util';
 import * as eventTool from './core/event';
+import GestureMgr from './core/GestureMgr';
 
@@ -36,3 +37,3 @@ var SILENT = 'silent';
 
-function EmptyProxy () {}
+function EmptyProxy() {}
 EmptyProxy.prototype.dispose = function () {};
@@ -53,3 +54,3 @@
  */
-var Handler = function(storage, painter, proxy, painterRoot) {
+var Handler = function (storage, painter, proxy, painterRoot) {
     Eventful.call(this);
@@ -95,3 +96,9 @@
 
+    /**
+     * @private
+     * @type {module:zrender/core/GestureMgr}
+     */
+    this._gestureMgr;
 
+
     Draggable.call(this);
@@ -170,3 +177,3 @@
         }
-        while (element && element.nodeType != 9 && !(
+        while (element && element.nodeType !== 9 && !(
             innerDom = element === this.painterRoot
@@ -252,3 +259,3 @@ ));
             this.painter && this.painter.eachOtherLayer(function (layer) {
-                if (typeof(layer[eventHandler]) == 'function') {
+                if (typeof (layer[eventHandler]) === 'function') {
                     layer[eventHandler].call(layer, eventPacket);
@@ -271,7 +278,7 @@ }
      */
-    findHover: function(x, y, exclude) {
+    findHover: function (x, y, exclude) {
         var list = this.storage.getDisplayList();
         var out = {x: x, y: y};
 
-        for (var i = list.length - 1; i >= 0 ; i--) {
+        for (var i = list.length - 1; i >= 0; i--) {
             var hoverCheckResult;
@@ -292,2 +299,27 @@ if (list[i] !== exclude
         return out;
+    },
+
+    processGesture: function (event, stage) {
+        if (!this._gestureMgr) {
+            this._gestureMgr = new GestureMgr();
+        }
+        var gestureMgr = this._gestureMgr;
+
+        stage === 'start' && gestureMgr.clear();
+
+        var gestureInfo = gestureMgr.recognize(
+            event,
+            this.findHover(event.zrX, event.zrY, null).target,
+            this.proxy.dom
+        );
+
+        stage === 'end' && gestureMgr.clear();
+
+        // Do not do any preventDefault here. Upper application do that if necessary.
+        if (gestureInfo) {
+            var type = gestureInfo.type;
+            event.gestureEvent = type;
+
+            this.dispatchToElement({target: gestureInfo.target}, type, gestureInfo.event);
+        }
     }
@@ -339,3 +371,3 @@ };
             // el.clipPath.contain(x, y) will always return false.
-            if (el.clipPath && !el.clipPath.contain(x, y))  {
+            if (el.clipPath && !el.clipPath.contain(x, y)) {
                 return false;
@@ -342,0 +374,0 @@ }

src/Layer.js

@@ -53,3 +53,3 @@ /**
  */
-var Layer = function(id, painter, dpr) {
+var Layer = function (id, painter, dpr) {
     var dom;
@@ -143,3 +143,3 @@ dpr = dpr || devicePixelRatio;
 
-        if (dpr != 1) {
+        if (dpr !== 1) {
             this.ctxBack.scale(dpr, dpr);
@@ -172,3 +172,3 @@ }
 
-            if (dpr != 1) {
+            if (dpr !== 1) {
                 this.ctxBack.scale(dpr, dpr);
@@ -175,0 +175,0 @@ }

src/mixin/Eventful.js

@@ -46,34 +46,3 @@ /**
     one: function (event, query, handler, context) {
-        var _h = this._$handlers;
-
-        if (typeof query === 'function') {
-            context = handler;
-            handler = query;
-            query = null;
-        }
-
-        if (!handler || !event) {
-            return this;
-        }
-
-        query = normalizeQuery(this, query);
-
-        if (!_h[event]) {
-            _h[event] = [];
-        }
-
-        for (var i = 0; i < _h[event].length; i++) {
-            if (_h[event][i].h === handler) {
-                return this;
-            }
-        }
-
-        _h[event].push({
-            h: handler,
-            one: true,
-            query: query,
-            ctx: context || this
-        });
-
-        return this;
+        return on(this, event, query, handler, context, true);
     },
@@ -90,34 +59,3 @@
     on: function (event, query, handler, context) {
-        var _h = this._$handlers;
-
-        if (typeof query === 'function') {
-            context = handler;
-            handler = query;
-            query = null;
-        }
-
-        if (!handler || !event) {
-            return this;
-        }
-
-        query = normalizeQuery(this, query);
-
-        if (!_h[event]) {
-            _h[event] = [];
-        }
-
-        for (var i = 0; i < _h[event].length; i++) {
-            if (_h[event][i].h === handler) {
-                return this;
-            }
-        }
-
-        _h[event].push({
-            h: handler,
-            one: false,
-            query: query,
-            ctx: context || this
-        });
-
-        return this;
+        return on(this, event, query, handler, context, false);
     },
@@ -133,3 +71,3 @@
         var _h = this._$handlers;
-        return _h[event] && _h[event].length;
+        return !_h[event] || !_h[event].length;
     },
@@ -307,2 +245,46 @@
 
+function on(eventful, event, query, handler, context, isOnce) {
+    var _h = eventful._$handlers;
+
+    if (typeof query === 'function') {
+        context = handler;
+        handler = query;
+        query = null;
+    }
+
+    if (!handler || !event) {
+        return eventful;
+    }
+
+    query = normalizeQuery(eventful, query);
+
+    if (!_h[event]) {
+        _h[event] = [];
+    }
+
+    for (var i = 0; i < _h[event].length; i++) {
+        if (_h[event][i].h === handler) {
+            return eventful;
+        }
+    }
+
+    var wrap = {
+        h: handler,
+        one: isOnce,
+        query: query,
+        ctx: context || eventful,
+        // FIXME
+        // Do not publish this feature util it is proved that it makes sense.
+        callAtLast: handler.zrEventfulCallAtLast
+    };
+
+    var lastIndex = _h[event].length - 1;
+    var lastWrap = _h[event][lastIndex];
+    (lastWrap && lastWrap.callAtLast)
+        ? _h[event].splice(lastIndex, 0, wrap)
+        : _h[event].push(wrap);
+
+    return eventful;
+}
+
 // ----------------------
@@ -309,0 +291,0 @@ // The events in zrender

src/Painter.js

@@ -30,4 +30,4 @@ import {devicePixelRatio} from './config';
 
-    if (typeof(layer.resize) !== 'function'
-        || typeof(layer.refresh) !== 'function'
+    if (typeof (layer.resize) !== 'function'
+        || typeof (layer.refresh) !== 'function'
     ) {
@@ -53,3 +53,3 @@ return false;
 function isClipPathChanged(clipPaths, prevClipPaths) {
-    if (clipPaths == prevClipPaths) { // Can both be null or undefined
+    if (clipPaths === prevClipPaths) { // Can both be null or undefined
         return false;
@@ -863,3 +863,3 @@ }
             // 优化没有实际改变的resize
-            if (this._width != width || height != this._height) {
+            if (this._width !== width || height !== this._height) {
                 domRoot.style.width = width + 'px';
@@ -866,0 +866,0 @@ domRoot.style.height = height + 'px';

src/svg/graphic.js

@@ -53,5 +53,2 @@ // TODO
         // Don't set attribute for gradient, since it need new dom nodes
-        if (typeof val === 'string' && val.indexOf('NaN') > -1) {
-            console.log(val);
-        }
         el.setAttribute(key, val);
@@ -261,2 +258,3 @@ }
         path.beginPath();
+        path.subPixelOptimize = false;
         el.buildPath(path, el.shape);
@@ -295,3 +293,3 @@ el.__dirtyPath = false;
     }
-    if (! image) {
+    if (!image) {
         return;
@@ -307,3 +305,3 @@ }
     var svgEl = el.__svgEl;
-    if (! svgEl) {
+    if (!svgEl) {
         svgEl = createElement('image');
@@ -355,3 +353,3 @@ el.__svgEl = svgEl;
     var textSvgEl = el.__textSvgEl;
-    if (! textSvgEl) {
+    if (!textSvgEl) {
         textSvgEl = createElement('text');
@@ -382,3 +380,3 @@ el.__textSvgEl = textSvgEl;
     textRect = textContain.getBoundingRect(text, font, align,
-        verticalAlign);
+        verticalAlign, style.textPadding, style.textLineHeight);
 
@@ -455,3 +453,3 @@ var lineHeight = textRect.lineHeight;
     // PENDING
-    if (textAnchor === 'left')  {
+    if (textAnchor === 'left') {
         textAnchor = 'start';
@@ -489,3 +487,3 @@ textPadding && (x += textPadding[3]);
             var tspan = tspanList[i];
-            if (! tspan) {
+            if (!tspan) {
                 tspan = tspanList[i] = createElement('tspan');
@@ -492,0 +490,0 @@ textSvgEl.appendChild(tspan);

src/svg/helper/Definable.js

@@ -15,3 +15,3 @@ /**
     image as svgImage,
-    text as svgText,
+    text as svgText
 } from '../graphic';
@@ -18,0 +18,0 @@

src/svg/helper/GradientManager.js

@@ -9,2 +9,3 @@ /**
 import zrLog from '../../core/log';
+import * as colorTool from '../../tool/color';
 
@@ -181,3 +182,21 @@ /**
         stop.setAttribute('offset', colors[i].offset * 100 + '%');
-        stop.setAttribute('stop-color', colors[i].color);
+
+        var color = colors[i].color;
+        if (color.indexOf('rgba' > -1)) {
+            // Fix Safari bug that stop-color not recognizing alpha #9014
+            var opacity = colorTool.parse(color)[3];
+            var hex = colorTool.toHex(color);
+
+            // stop-color cannot be color, since:
+            // The opacity value used for the gradient calculation is the
+            // *product* of the value of stop-opacity and the opacity of the
+            // value of stop-color.
+            // See https://www.w3.org/TR/SVG2/pservers.html#StopOpacityProperty
+            stop.setAttribute('stop-color', '#' + hex);
+            stop.setAttribute('stop-opacity', opacity);
+        }
+        else {
+            stop.setAttribute('stop-color', colors[i].color);
+        }
+
         dom.appendChild(stop);
@@ -184,0 +203,0 @@ }

src/svg/Painter.js

@@ -16,3 +16,2 @@ /**
 import ShadowManager from './helper/ShadowManager';
-import {each} from '../core/util';
 import {
@@ -247,5 +246,5 @@ path as svgPath,
                     var displayable = newVisibleList[item.indices[k]];
-                    prevSvgElement
-                        = svgElement
-                        = getTextSvgElement(displayable)
+                    prevSvgElement =
+                        svgElement =
+                        getTextSvgElement(displayable)
                         || getSvgElement(displayable)
@@ -379,6 +378,6 @@ || prevSvgElement;
 
-        this._svgRoot
-            = this._viewport
-            = this.storage
-            = null;
+        this._svgRoot =
+            this._viewport =
+            this.storage =
+            null;
     },
@@ -407,3 +406,3 @@
 // Unsuppoted methods
-each([
+util.each([
     'getLayer', 'insertLayer', 'eachLayer', 'eachBuiltinLayer',
@@ -410,0 +409,0 @@ 'eachOtherLayer', 'getLayers', 'modLayer', 'delLayer', 'clearLayer',

src/tool/color.js

 import LRU from '../core/LRU';
 
 var kCSSColorTable = {
-    'transparent': [0,0,0,0], 'aliceblue': [240,248,255,1],
-    'antiquewhite': [250,235,215,1], 'aqua': [0,255,255,1],
-    'aquamarine': [127,255,212,1], 'azure': [240,255,255,1],
-    'beige': [245,245,220,1], 'bisque': [255,228,196,1],
-    'black': [0,0,0,1], 'blanchedalmond': [255,235,205,1],
-    'blue': [0,0,255,1], 'blueviolet': [138,43,226,1],
-    'brown': [165,42,42,1], 'burlywood': [222,184,135,1],
-    'cadetblue': [95,158,160,1], 'chartreuse': [127,255,0,1],
-    'chocolate': [210,105,30,1], 'coral': [255,127,80,1],
-    'cornflowerblue': [100,149,237,1], 'cornsilk': [255,248,220,1],
-    'crimson': [220,20,60,1], 'cyan': [0,255,255,1],
-    'darkblue': [0,0,139,1], 'darkcyan': [0,139,139,1],
-    'darkgoldenrod': [184,134,11,1], 'darkgray': [169,169,169,1],
-    'darkgreen': [0,100,0,1], 'darkgrey': [169,169,169,1],
-    'darkkhaki': [189,183,107,1], 'darkmagenta': [139,0,139,1],
-    'darkolivegreen': [85,107,47,1], 'darkorange': [255,140,0,1],
-    'darkorchid': [153,50,204,1], 'darkred': [139,0,0,1],
-    'darksalmon': [233,150,122,1], 'darkseagreen': [143,188,143,1],
-    'darkslateblue': [72,61,139,1], 'darkslategray': [47,79,79,1],
-    'darkslategrey': [47,79,79,1], 'darkturquoise': [0,206,209,1],
-    'darkviolet': [148,0,211,1], 'deeppink': [255,20,147,1],
-    'deepskyblue': [0,191,255,1], 'dimgray': [105,105,105,1],
-    'dimgrey': [105,105,105,1], 'dodgerblue': [30,144,255,1],
-    'firebrick': [178,34,34,1], 'floralwhite': [255,250,240,1],
-    'forestgreen': [34,139,34,1], 'fuchsia': [255,0,255,1],
-    'gainsboro': [220,220,220,1], 'ghostwhite': [248,248,255,1],
-    'gold': [255,215,0,1], 'goldenrod': [218,165,32,1],
-    'gray': [128,128,128,1], 'green': [0,128,0,1],
-    'greenyellow': [173,255,47,1], 'grey': [128,128,128,1],
-    'honeydew': [240,255,240,1], 'hotpink': [255,105,180,1],
-    'indianred': [205,92,92,1], 'indigo': [75,0,130,1],
-    'ivory': [255,255,240,1], 'khaki': [240,230,140,1],
-    'lavender': [230,230,250,1], 'lavenderblush': [255,240,245,1],
-    'lawngreen': [124,252,0,1], 'lemonchiffon': [255,250,205,1],
-    'lightblue': [173,216,230,1], 'lightcoral': [240,128,128,1],
-    'lightcyan': [224,255,255,1], 'lightgoldenrodyellow': [250,250,210,1],
-    'lightgray': [211,211,211,1], 'lightgreen': [144,238,144,1],
-    'lightgrey': [211,211,211,1], 'lightpink': [255,182,193,1],
-    'lightsalmon': [255,160,122,1], 'lightseagreen': [32,178,170,1],
-    'lightskyblue': [135,206,250,1], 'lightslategray': [119,136,153,1],
-    'lightslategrey': [119,136,153,1], 'lightsteelblue': [176,196,222,1],
-    'lightyellow': [255,255,224,1], 'lime': [0,255,0,1],
-    'limegreen': [50,205,50,1], 'linen': [250,240,230,1],
-    'magenta': [255,0,255,1], 'maroon': [128,0,0,1],
-    'mediumaquamarine': [102,205,170,1], 'mediumblue': [0,0,205,1],
-    'mediumorchid': [186,85,211,1], 'mediumpurple': [147,112,219,1],
-    'mediumseagreen': [60,179,113,1], 'mediumslateblue': [123,104,238,1],
-    'mediumspringgreen': [0,250,154,1], 'mediumturquoise': [72,209,204,1],
-    'mediumvioletred': [199,21,133,1], 'midnightblue': [25,25,112,1],
-    'mintcream': [245,255,250,1], 'mistyrose': [255,228,225,1],
-    'moccasin': [255,228,181,1], 'navajowhite': [255,222,173,1],
-    'navy': [0,0,128,1], 'oldlace': [253,245,230,1],
-    'olive': [128,128,0,1], 'olivedrab': [107,142,35,1],
-    'orange': [255,165,0,1], 'orangered': [255,69,0,1],
-    'orchid': [218,112,214,1], 'palegoldenrod': [238,232,170,1],
-    'palegreen': [152,251,152,1], 'paleturquoise': [175,238,238,1],
-    'palevioletred': [219,112,147,1], 'papayawhip': [255,239,213,1],
-    'peachpuff': [255,218,185,1], 'peru': [205,133,63,1],
-    'pink': [255,192,203,1], 'plum': [221,160,221,1],
-    'powderblue': [176,224,230,1], 'purple': [128,0,128,1],
-    'red': [255,0,0,1], 'rosybrown': [188,143,143,1],
-    'royalblue': [65,105,225,1], 'saddlebrown': [139,69,19,1],
-    'salmon': [250,128,114,1], 'sandybrown': [244,164,96,1],
-    'seagreen': [46,139,87,1], 'seashell': [255,245,238,1],
-    'sienna': [160,82,45,1], 'silver': [192,192,192,1],
-    'skyblue': [135,206,235,1], 'slateblue': [106,90,205,1],
-    'slategray': [112,128,144,1], 'slategrey': [112,128,144,1],
-    'snow': [255,250,250,1], 'springgreen': [0,255,127,1],
-    'steelblue': [70,130,180,1], 'tan': [210,180,140,1],
-    'teal': [0,128,128,1], 'thistle': [216,191,216,1],
-    'tomato': [255,99,71,1], 'turquoise': [64,224,208,1],
-    'violet': [238,130,238,1], 'wheat': [245,222,179,1],
-    'white': [255,255,255,1], 'whitesmoke': [245,245,245,1],
-    'yellow': [255,255,0,1], 'yellowgreen': [154,205,50,1]
+    'transparent': [0, 0, 0, 0], 'aliceblue': [240, 248, 255, 1],
+    'antiquewhite': [250, 235, 215, 1], 'aqua': [0, 255, 255, 1],
+    'aquamarine': [127, 255, 212, 1], 'azure': [240, 255, 255, 1],
+    'beige': [245, 245, 220, 1], 'bisque': [255, 228, 196, 1],
+    'black': [0, 0, 0, 1], 'blanchedalmond': [255, 235, 205, 1],
+    'blue': [0, 0, 255, 1], 'blueviolet': [138, 43, 226, 1],
+    'brown': [165, 42, 42, 1], 'burlywood': [222, 184, 135, 1],
+    'cadetblue': [95, 158, 160, 1], 'chartreuse': [127, 255, 0, 1],
+    'chocolate': [210, 105, 30, 1], 'coral': [255, 127, 80, 1],
+    'cornflowerblue': [100, 149, 237, 1], 'cornsilk': [255, 248, 220, 1],
+    'crimson': [220, 20, 60, 1], 'cyan': [0, 255, 255, 1],
+    'darkblue': [0, 0, 139, 1], 'darkcyan': [0, 139, 139, 1],
+    'darkgoldenrod': [184, 134, 11, 1], 'darkgray': [169, 169, 169, 1],
+    'darkgreen': [0, 100, 0, 1], 'darkgrey': [169, 169, 169, 1],
+    'darkkhaki': [189, 183, 107, 1], 'darkmagenta': [139, 0, 139, 1],
+    'darkolivegreen': [85, 107, 47, 1], 'darkorange': [255, 140, 0, 1],
+    'darkorchid': [153, 50, 204, 1], 'darkred': [139, 0, 0, 1],
+    'darksalmon': [233, 150, 122, 1], 'darkseagreen': [143, 188, 143, 1],
+    'darkslateblue': [72, 61, 139, 1], 'darkslategray': [47, 79, 79, 1],
+    'darkslategrey': [47, 79, 79, 1], 'darkturquoise': [0, 206, 209, 1],
+    'darkviolet': [148, 0, 211, 1], 'deeppink': [255, 20, 147, 1],
+    'deepskyblue': [0, 191, 255, 1], 'dimgray': [105, 105, 105, 1],
+    'dimgrey': [105, 105, 105, 1], 'dodgerblue': [30, 144, 255, 1],
+    'firebrick': [178, 34, 34, 1], 'floralwhite': [255, 250, 240, 1],
+    'forestgreen': [34, 139, 34, 1], 'fuchsia': [255, 0, 255, 1],
+    'gainsboro': [220, 220, 220, 1], 'ghostwhite': [248, 248, 255, 1],
+    'gold': [255, 215, 0, 1], 'goldenrod': [218, 165, 32, 1],
+    'gray': [128, 128, 128, 1], 'green': [0, 128, 0, 1],
+    'greenyellow': [173, 255, 47, 1], 'grey': [128, 128, 128, 1],
+    'honeydew': [240, 255, 240, 1], 'hotpink': [255, 105, 180, 1],
+    'indianred': [205, 92, 92, 1], 'indigo': [75, 0, 130, 1],
+    'ivory': [255, 255, 240, 1], 'khaki': [240, 230, 140, 1],
+    'lavender': [230, 230, 250, 1], 'lavenderblush': [255, 240, 245, 1],
+    'lawngreen': [124, 252, 0, 1], 'lemonchiffon': [255, 250, 205, 1],
+    'lightblue': [173, 216, 230, 1], 'lightcoral': [240, 128, 128, 1],
+    'lightcyan': [224, 255, 255, 1], 'lightgoldenrodyellow': [250, 250, 210, 1],
+    'lightgray': [211, 211, 211, 1], 'lightgreen': [144, 238, 144, 1],
+    'lightgrey': [211, 211, 211, 1], 'lightpink': [255, 182, 193, 1],
+    'lightsalmon': [255, 160, 122, 1], 'lightseagreen': [32, 178, 170, 1],
+    'lightskyblue': [135, 206, 250, 1], 'lightslategray': [119, 136, 153, 1],
+    'lightslategrey': [119, 136, 153, 1], 'lightsteelblue': [176, 196, 222, 1],
+    'lightyellow': [255, 255, 224, 1], 'lime': [0, 255, 0, 1],
+    'limegreen': [50, 205, 50, 1], 'linen': [250, 240, 230, 1],
+    'magenta': [255, 0, 255, 1], 'maroon': [128, 0, 0, 1],
+    'mediumaquamarine': [102, 205, 170, 1], 'mediumblue': [0, 0, 205, 1],
+    'mediumorchid': [186, 85, 211, 1], 'mediumpurple': [147, 112, 219, 1],
+    'mediumseagreen': [60, 179, 113, 1], 'mediumslateblue': [123, 104, 238, 1],
+    'mediumspringgreen': [0, 250, 154, 1], 'mediumturquoise': [72, 209, 204, 1],
+    'mediumvioletred': [199, 21, 133, 1], 'midnightblue': [25, 25, 112, 1],
+    'mintcream': [245, 255, 250, 1], 'mistyrose': [255, 228, 225, 1],
+    'moccasin': [255, 228, 181, 1], 'navajowhite': [255, 222, 173, 1],
+    'navy': [0, 0, 128, 1], 'oldlace': [253, 245, 230, 1],
+    'olive': [128, 128, 0, 1], 'olivedrab': [107, 142, 35, 1],
+    'orange': [255, 165, 0, 1], 'orangered': [255, 69, 0, 1],
+    'orchid': [218, 112, 214, 1], 'palegoldenrod': [238, 232, 170, 1],
+    'palegreen': [152, 251, 152, 1], 'paleturquoise': [175, 238, 238, 1],
+    'palevioletred': [219, 112, 147, 1], 'papayawhip': [255, 239, 213, 1],
+    'peachpuff': [255, 218, 185, 1], 'peru': [205, 133, 63, 1],
+    'pink': [255, 192, 203, 1], 'plum': [221, 160, 221, 1],
+    'powderblue': [176, 224, 230, 1], 'purple': [128, 0, 128, 1],
+    'red': [255, 0, 0, 1], 'rosybrown': [188, 143, 143, 1],
+    'royalblue': [65, 105, 225, 1], 'saddlebrown': [139, 69, 19, 1],
+    'salmon': [250, 128, 114, 1], 'sandybrown': [244, 164, 96, 1],
+    'seagreen': [46, 139, 87, 1], 'seashell': [255, 245, 238, 1],
+    'sienna': [160, 82, 45, 1], 'silver': [192, 192, 192, 1],
+    'skyblue': [135, 206, 235, 1], 'slateblue': [106, 90, 205, 1],
+    'slategray': [112, 128, 144, 1], 'slategrey': [112, 128, 144, 1],
+    'snow': [255, 250, 250, 1], 'springgreen': [0, 255, 127, 1],
+    'steelblue': [70, 130, 180, 1], 'tan': [210, 180, 140, 1],
+    'teal': [0, 128, 128, 1], 'thistle': [216, 191, 216, 1],
+    'tomato': [255, 99, 71, 1], 'turquoise': [64, 224, 208, 1],
+    'violet': [238, 130, 238, 1], 'wheat': [245, 222, 179, 1],
+    'white': [255, 255, 255, 1], 'whitesmoke': [245, 245, 245, 1],
+    'yellow': [255, 255, 0, 1], 'yellowgreen': [154, 205, 50, 1]
 };
@@ -123,3 +123,3 @@
     if (h * 3 < 2) {
-        return m1 + (m2 - m1) * (2/3 - h) * 6;
+        return m1 + (m2 - m1) * (2 / 3 - h) * 6;
     }
@@ -217,3 +217,4 @@ return m1;
     }
-    var op = str.indexOf('('), ep = str.indexOf(')');
+    var op = str.indexOf('(');
+    var ep = str.indexOf(')');
     if (op !== -1 && ep + 1 === str.length) {
@@ -220,0 +221,0 @@ var fname = str.substr(0, op);

src/tool/parseSVG.js

@@ -614,5 +614,4 @@ import Group from '../container/Group';
         }
+        node.setLocalTransform(m);
     }
-    node.setLocalTransform(m);
-
 }
@@ -619,0 +618,0 @@

src/tool/path.js

@@ -16,9 +16,9 @@ import Path from '../graphic/Path';
 
-var vMag = function(v) {
+var vMag = function (v) {
     return Math.sqrt(v[0] * v[0] + v[1] * v[1]);
 };
-var vRatio = function(u, v) {
+var vRatio = function (u, v) {
     return (u[0] * v[0] + u[1] * v[1]) / (vMag(u) * vMag(v));
 };
-var vAngle = function(u, v) {
+var vAngle = function (u, v) {
     return (u[0] * v[1] < u[1] * v[0] ? -1 : 1)
@@ -25,0 +25,0 @@ * Math.acos(vRatio(u, v));

src/vml/graphic.js

@@ -40,3 +40,3 @@ // http://www.w3.org/TR/NOTE-VML
         el.style.cssText = 'position:absolute;left:0;top:0;width:1px;height:1px;';
-        el.coordsize = Z + ','  + Z;
+        el.coordsize = Z + ',' + Z;
         el.coordorigin = '0,0';
@@ -169,3 +169,3 @@ };
                 var stops = fill.colorStops.slice();
-                stops.sort(function(cs1, cs2) {
+                stops.sort(function (cs1, cs2) {
                     return cs1.offset - cs2.offset;
@@ -236,3 +236,3 @@ });
     var updateFillAndStroke = function (vmlEl, type, style, zrEl) {
-        var isFill = type == 'fill';
+        var isFill = type === 'fill';
         var el = vmlEl.getElementsByTagName(type)[0];
@@ -492,2 +492,3 @@ // Stroke must have lineWidth
             path.beginPath();
+            path.subPixelOptimize = false;
             this.buildPath(path, this.shape);
@@ -667,3 +668,3 @@ path.toStatic();
             // Needs know image original width and height
-            if (! (ow && oh)) {
+            if (!(ow && oh)) {
                 var tmpImage = new Image();
@@ -691,3 +692,3 @@ var self = this;
 
-            if (! cropEl) {
+            if (!cropEl) {
                 cropEl = vmlCore.doc.createElement('div');
@@ -703,6 +704,6 @@ cropEl.style.overflow = 'hidden';
 
-            if (! cropEl.parentNode) {
+            if (!cropEl.parentNode) {
                 vmlEl.appendChild(cropEl);
             }
-            if (imageEl.parentNode != cropEl) {
+            if (imageEl.parentNode !== cropEl) {
                 cropEl.appendChild(imageEl);
@@ -815,3 +816,4 @@ }
             textMeasureEl.style.font = textFont;
-        } catch (ex) {
+        }
+        catch (ex) {
             // Ignore failures to set to invalid font.
@@ -869,3 +871,3 @@ }
 
-        textRect = textRect || textContain.getBoundingRect(text, font, align, verticalAlign);
+        textRect = textRect || textContain.getBoundingRect(text, font, align, verticalAlign, style.textPadding, style.textLineHeight);
 
@@ -996,4 +998,4 @@ // Transform rect to view space
 
-            skewEl.matrix = m[0].toFixed(3) + comma + m[2].toFixed(3) + comma +
-            m[1].toFixed(3) + comma + m[3].toFixed(3) + ',0,0';
+            skewEl.matrix = m[0].toFixed(3) + comma + m[2].toFixed(3) + comma
+                            + m[1].toFixed(3) + comma + m[3].toFixed(3) + ',0,0';
 
@@ -1000,0 +1002,0 @@ // Text position

src/vml/Painter.js

@@ -136,3 +136,3 @@ /**
 
-        if (this._width != width || this._height != height) {
+        if (this._width !== width || this._height !== height) {
             this._width = width;
@@ -139,0 +139,0 @@ this._height = height;

src/zrender.js

@@ -31,3 +31,3 @@ /*!
  */
-export var version = '4.0.5';
+export var version = '4.0.6';
 
@@ -37,3 +37,3 @@ /**
  * @param {HTMLElement} dom
- * @param {Object} opts
+ * @param {Object} [opts]
  * @param {string} [opts.renderer='canvas'] 'canvas' or 'svg'
@@ -250,3 +250,3 @@ * @param {number} [opts.devicePixelRatio]
      */
-    refresh: function() {
+    refresh: function () {
         this._needsRefresh = true;
@@ -330,3 +330,3 @@ },
      */
-    resize: function(opts) {
+    resize: function (opts) {
         opts = opts || {};
@@ -347,3 +347,3 @@ this.painter.resize(opts.width, opts.height);
      */
-    getWidth: function() {
+    getWidth: function () {
         return this.painter.getWidth();
@@ -355,3 +355,3 @@ },
      */
-    getHeight: function() {
+    getHeight: function () {
         return this.painter.getHeight();
@@ -379,3 +379,3 @@ },
      */
-    pathToImage: function(e, dpr) {
+    pathToImage: function (e, dpr) {
         return this.painter.pathToImage(e, dpr);
@@ -409,3 +409,3 @@ },
      */
-    on: function(eventName, eventHandler, context) {
+    on: function (eventName, eventHandler, context) {
         this.handler.on(eventName, eventHandler, context);
@@ -419,3 +419,3 @@ },
      */
-    off: function(eventName, eventHandler) {
+    off: function (eventName, eventHandler) {
         this.handler.off(eventName, eventHandler);
@@ -422,0 +422,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

3292240

increased by0.6%

Number of package files

223

increased by0.9%

Worsened metrics

Lines of code

65157

decreased by-0.21%

No dependency changes