zrender - npm Package Compare versions

Comparing version 4.0.1 to 4.0.2

lib/animation/Animation.js

@@ -152,4 +152,5 @@ var util = require("../core/util");
     this._time = time;
-    this.onframe(delta); // Frame should before stage update. Upper application
-    // depends on the sequence (e.g., echarts-stream)
+    this.onframe(delta); // 'frame' should be triggered before stage, because upper application
+    // depends on the sequence (e.g., echarts-stream and finish
+    // event judge)
 
@@ -177,3 +178,3 @@ this.trigger('frame', delta);
   /**
-   * 开始运行动画
+   * Start animation.
    */
@@ -188,3 +189,3 @@ start: function () {
   /**
-   * 停止运行动画
+   * Stop animation.
    */
@@ -196,3 +197,3 @@ stop: function () {
   /**
-   * Pause
+   * Pause animation.
    */
@@ -207,3 +208,3 @@ pause: function () {
   /**
-   * Resume
+   * Resume animation.
    */
@@ -218,3 +219,3 @@ resume: function () {
   /**
-   * 清除所有动画片段
+   * Clear animation.
    */
@@ -226,10 +227,16 @@ clear: function () {
   /**
-   * 对一个目标创建一个animator对象，可以指定目标中的属性使用动画
+   * Whether animation finished.
+   */
+  isFinished: function () {
+    return !this._clips.length;
+  },
+
+  /**
+   * Creat animator for a target, whose props can be animated.
+   *
    * @param  {Object} target
    * @param  {Object} options
-   * @param  {boolean} [options.loop=false] 是否循环播放动画
-   * @param  {Function} [options.getter=null]
-   *         如果指定getter函数，会通过getter函数取属性值
-   * @param  {Function} [options.setter=null]
-   *         如果指定setter函数，会通过setter函数设置属性值
+   * @param  {boolean} [options.loop=false] Whether loop animation.
+   * @param  {Function} [options.getter=null] Get value from target.
+   * @param  {Function} [options.setter=null] Set value to target.
    * @return {module:zrender/animation/Animation~Animator}
@@ -236,0 +243,0 @@ */

lib/core/env.js

@@ -140,6 +140,22 @@ /**
     // standard. So we exclude that. (IE 10 is hardly used on touch device)
-    && (browser.edge || browser.ie && browser.version >= 11)
+    && (browser.edge || browser.ie && browser.version >= 11) // passiveSupported: detectPassiveSupport()
+
   };
-}
+} // See https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md#feature-detection
+// function detectPassiveSupport() {
+//     // Test via a getter in the options object to see if the passive property is accessed
+//     var supportsPassive = false;
+//     try {
+//         var opts = Object.defineProperty({}, 'passive', {
+//             get: function() {
+//                 supportsPassive = true;
+//             }
+//         });
+//         window.addEventListener('testPassive', function() {}, opts);
+//     } catch (e) {
+//     }
+//     return supportsPassive;
+// }
 
+
 module.exports = _default;

lib/core/event.js

@@ -102,5 +102,31 @@ var Eventful = require("../mixin/Eventful");
 }
+/**
+ * @param {HTMLElement} el
+ * @param {string} name
+ * @param {Function} handler
+ */
 
+
 function addEventListener(el, name, handler) {
   if (isDomLevel2) {
+    // Reproduct the console warning:
+    // [Violation] Added non-passive event listener to a scroll-blocking <some> event.
+    // Consider marking event handler as 'passive' to make the page more responsive.
+    // Just set console log level: verbose in chrome dev tool.
+    // then the warning log will be printed when addEventListener called.
+    // See https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
+    // We have not yet found a neat way to using passive. Because in zrender the dom event
+    // listener delegate all of the upper events of element. Some of those events need
+    // to prevent default. For example, the feature `preventDefaultMouseMove` of echarts.
+    // Before passive can be adopted, these issues should be considered:
+    // (1) Whether and how a zrender user specifies an event listener passive. And by default,
+    // passive or not.
+    // (2) How to tread that some zrender event listener is passive, and some is not. If
+    // we use other way but not preventDefault of mousewheel and touchmove, browser
+    // compatibility should be handled.
+    // var opts = (env.passiveSupported && name === 'mousewheel')
+    //     ? {passive: true}
+    //     // By default, the third param of el.addEventListener is `capture: false`.
+    //     : void 0;
+    // el.addEventListener(name, handler /* , opts */);
     el.addEventListener(name, handler);
@@ -107,0 +133,0 @@ } else {

lib/graphic/helper/roundRect.js

@@ -72,11 +72,11 @@ function buildPath(ctx, shape) {
   ctx.lineTo(x + width - r2, y);
-  r2 !== 0 && ctx.quadraticCurveTo(x + width, y, x + width, y + r2);
+  r2 !== 0 && ctx.arc(x + width - r2, y + r2, r2, -Math.PI / 2, 0);
   ctx.lineTo(x + width, y + height - r3);
-  r3 !== 0 && ctx.quadraticCurveTo(x + width, y + height, x + width - r3, y + height);
+  r3 !== 0 && ctx.arc(x + width - r3, y + height - r3, r3, 0, Math.PI / 2);
   ctx.lineTo(x + r4, y + height);
-  r4 !== 0 && ctx.quadraticCurveTo(x, y + height, x, y + height - r4);
+  r4 !== 0 && ctx.arc(x + r4, y + height - r4, r4, Math.PI / 2, Math.PI);
   ctx.lineTo(x, y + r1);
-  r1 !== 0 && ctx.quadraticCurveTo(x, y, x + r1, y);
+  r1 !== 0 && ctx.arc(x + r1, y + r1, r1, Math.PI, Math.PI * 1.5);
 }
 
 exports.buildPath = buildPath;

lib/graphic/Style.js

@@ -22,4 +22,9 @@ var fixShadow = require("./helper/fixShadow");
     y2 = y2 * rect.height + rect.y;
-  }
+  } // Fix NaN when rect is Infinity
 
+
+  x = isNaN(x) ? 0 : x;
+  x2 = isNaN(x2) ? 1 : x2;
+  y = isNaN(y) ? 0 : y;
+  y2 = isNaN(y2) ? 0 : y2;
   var canvasGradient = ctx.createLinearGradient(x, y, x2, y2);
@@ -26,0 +31,0 @@ return canvasGradient;

lib/svg/graphic.js

@@ -343,19 +343,2 @@ var _core = require("./core");
 
-  bindStyle(textSvgEl, style, true);
-
-  if (el instanceof Text || el.style.transformText) {
-    // Transform text with element
-    setTransform(textSvgEl, el.transform);
-  } else {
-    if (el.transform) {
-      tmpRect.copy(rect);
-      tmpRect.applyTransform(el.transform);
-      rect = tmpRect;
-    } else {
-      var pos = el.transformCoordToGlobal(rect.x, rect.y);
-      rect.x = pos[0];
-      rect.y = pos[1];
-    }
-  }
-
   var x;
@@ -397,2 +380,33 @@ var y;
   attr(textSvgEl, 'y', y);
+  bindStyle(textSvgEl, style, true);
+
+  if (el instanceof Text || el.style.transformText) {
+    // Transform text with element
+    setTransform(textSvgEl, el.transform);
+  } else {
+    if (el.transform) {
+      tmpRect.copy(rect);
+      tmpRect.applyTransform(el.transform);
+      rect = tmpRect;
+    } else {
+      var pos = el.transformCoordToGlobal(rect.x, rect.y);
+      rect.x = pos[0];
+      rect.y = pos[1];
+    } // Text rotation, but no element transform
+
+
+    var origin = style.textOrigin;
+
+    if (origin === 'center') {
+      x = textRect.width / 2 + x;
+      y = textRect.height / 2 + y;
+    } else if (origin) {
+      x = origin[0] + x;
+      y = origin[1] + y;
+    }
+
+    var rotate = -style.textRotation * 180 / Math.PI;
+    attr(textSvgEl, 'transform', 'rotate(' + rotate + ',' + x + ',' + y + ')');
+  }
+
   var textLines = text.split('\n');
@@ -399,0 +413,0 @@ var nTextLines = textLines.length;

lib/zrender.js

@@ -36,3 +36,3 @@ var guid = require("./core/guid");
 
-var version = '4.0.1';
+var version = '4.0.2';
 /**
@@ -246,3 +246,6 @@ * Initializing a zrender instance
   flush: function () {
+    var triggerRendered;
+
     if (this._needsRefresh) {
+      triggerRendered = true;
       this.refreshImmediately();
@@ -252,4 +255,7 @@ }
     if (this._needsRefreshHover) {
+      triggerRendered = true;
       this.refreshHoverImmediately();
     }
+
+    triggerRendered && this.trigger('rendered');
   },
@@ -256,0 +262,0 @@

package.json

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

src/animation/Animation.js

@@ -113,3 +113,2 @@ /**
     _update: function() {
-
         var time = new Date().getTime() - this._pausedTime;
@@ -154,4 +153,5 @@ var delta = time - this._time;
 
-        // Frame should before stage update. Upper application
-        // depends on the sequence (e.g., echarts-stream)
+        // 'frame' should be triggered before stage, because upper application
+        // depends on the sequence (e.g., echarts-stream and finish
+        // event judge)
         this.trigger('frame', delta);
@@ -182,3 +182,3 @@
     /**
-     * 开始运行动画
+     * Start animation.
      */
@@ -192,4 +192,5 @@ start: function () {
     },
+
     /**
-     * 停止运行动画
+     * Stop animation.
      */
@@ -201,3 +202,3 @@ stop: function () {
     /**
-     * Pause
+     * Pause animation.
      */
@@ -212,3 +213,3 @@ pause: function () {
     /**
-     * Resume
+     * Resume animation.
      */
@@ -223,3 +224,3 @@ resume: function () {
     /**
-     * 清除所有动画片段
+     * Clear animation.
      */
@@ -229,11 +230,18 @@ clear: function () {
     },
+
     /**
-     * 对一个目标创建一个animator对象，可以指定目标中的属性使用动画
+     * Whether animation finished.
+     */
+    isFinished: function () {
+        return !this._clips.length;
+    },
+
+    /**
+     * Creat animator for a target, whose props can be animated.
+     *
      * @param  {Object} target
      * @param  {Object} options
-     * @param  {boolean} [options.loop=false] 是否循环播放动画
-     * @param  {Function} [options.getter=null]
-     *         如果指定getter函数，会通过getter函数取属性值
-     * @param  {Function} [options.setter=null]
-     *         如果指定setter函数，会通过setter函数设置属性值
+     * @param  {boolean} [options.loop=false] Whether loop animation.
+     * @param  {Function} [options.getter=null] Get value from target.
+     * @param  {Function} [options.setter=null] Set value to target.
      * @return {module:zrender/animation/Animation~Animator}
@@ -240,0 +248,0 @@ */

src/core/env.js

@@ -152,3 +152,20 @@ /**
             && (browser.edge || (browser.ie && browser.version >= 11))
+        // passiveSupported: detectPassiveSupport()
     };
-}
+}
+
+// See https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md#feature-detection
+// function detectPassiveSupport() {
+//     // Test via a getter in the options object to see if the passive property is accessed
+//     var supportsPassive = false;
+//     try {
+//         var opts = Object.defineProperty({}, 'passive', {
+//             get: function() {
+//                 supportsPassive = true;
+//             }
+//         });
+//         window.addEventListener('testPassive', function() {}, opts);
+//     } catch (e) {
+//     }
+//     return supportsPassive;
+// }

src/core/event.js

@@ -106,4 +106,30 @@ /**
 
+/**
+ * @param {HTMLElement} el
+ * @param {string} name
+ * @param {Function} handler
+ */
 export function addEventListener(el, name, handler) {
     if (isDomLevel2) {
+        // Reproduct the console warning:
+        // [Violation] Added non-passive event listener to a scroll-blocking <some> event.
+        // Consider marking event handler as 'passive' to make the page more responsive.
+        // Just set console log level: verbose in chrome dev tool.
+        // then the warning log will be printed when addEventListener called.
+        // See https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
+        // We have not yet found a neat way to using passive. Because in zrender the dom event
+        // listener delegate all of the upper events of element. Some of those events need
+        // to prevent default. For example, the feature `preventDefaultMouseMove` of echarts.
+        // Before passive can be adopted, these issues should be considered:
+        // (1) Whether and how a zrender user specifies an event listener passive. And by default,
+        // passive or not.
+        // (2) How to tread that some zrender event listener is passive, and some is not. If
+        // we use other way but not preventDefault of mousewheel and touchmove, browser
+        // compatibility should be handled.
+
+        // var opts = (env.passiveSupported && name === 'mousewheel')
+        //     ? {passive: true}
+        //     // By default, the third param of el.addEventListener is `capture: false`.
+        //     : void 0;
+        // el.addEventListener(name, handler /* , opts */);
         el.addEventListener(name, handler);
@@ -110,0 +136,0 @@ }

src/graphic/helper/roundRect.js

@@ -73,15 +73,9 @@
     ctx.lineTo(x + width - r2, y);
-    r2 !== 0 && ctx.quadraticCurveTo(
-        x + width, y, x + width, y + r2
-    );
+    r2 !== 0 && ctx.arc(x + width - r2, y + r2, r2, -Math.PI / 2, 0);
     ctx.lineTo(x + width, y + height - r3);
-    r3 !== 0 && ctx.quadraticCurveTo(
-        x + width, y + height, x + width - r3, y + height
-    );
+    r3 !== 0 && ctx.arc(x + width - r3, y + height - r3, r3, 0, Math.PI / 2);
     ctx.lineTo(x + r4, y + height);
-    r4 !== 0 && ctx.quadraticCurveTo(
-        x, y + height, x, y + height - r4
-    );
+    r4 !== 0 && ctx.arc(x + r4, y + height - r4, r4, Math.PI / 2, Math.PI);
     ctx.lineTo(x, y + r1);
-    r1 !== 0 && ctx.quadraticCurveTo(x, y, x + r1, y);
+    r1 !== 0 && ctx.arc(x + r1, y + r1, r1, Math.PI, Math.PI * 1.5);
 }

src/graphic/Style.js

@@ -30,2 +30,8 @@
 
+    // Fix NaN when rect is Infinity
+    x = isNaN(x) ? 0 : x;
+    x2 = isNaN(x2) ? 1 : x2;
+    y = isNaN(y) ? 0 : y;
+    y2 = isNaN(y2) ? 0 : y2;
+
     var canvasGradient = ctx.createLinearGradient(x, y, x2, y2);
@@ -32,0 +38,0 @@

src/svg/graphic.js

@@ -352,20 +352,2 @@ // TODO
 
-    bindStyle(textSvgEl, style, true);
-    if (el instanceof Text || el.style.transformText) {
-        // Transform text with element
-        setTransform(textSvgEl, el.transform);
-    }
-    else {
-        if (el.transform) {
-            tmpRect.copy(rect);
-            tmpRect.applyTransform(el.transform);
-            rect = tmpRect;
-        }
-        else {
-            var pos = el.transformCoordToGlobal(rect.x, rect.y);
-            rect.x = pos[0];
-            rect.y = pos[1];
-        }
-    }
-
     var x;
@@ -422,2 +404,34 @@ var y;
 
+    bindStyle(textSvgEl, style, true);
+    if (el instanceof Text || el.style.transformText) {
+        // Transform text with element
+        setTransform(textSvgEl, el.transform);
+    }
+    else {
+        if (el.transform) {
+            tmpRect.copy(rect);
+            tmpRect.applyTransform(el.transform);
+            rect = tmpRect;
+        }
+        else {
+            var pos = el.transformCoordToGlobal(rect.x, rect.y);
+            rect.x = pos[0];
+            rect.y = pos[1];
+        }
+
+        // Text rotation, but no element transform
+        var origin = style.textOrigin;
+        if (origin === 'center') {
+            x = textRect.width / 2 + x;
+            y = textRect.height / 2 + y;
+        }
+        else if (origin) {
+            x = origin[0] + x;
+            y = origin[1] + y;
+        }
+        var rotate = -style.textRotation * 180 / Math.PI;
+        attr(textSvgEl, 'transform', 'rotate(' + rotate + ','
+            + x + ',' + y + ')');
+    }
+
     var textLines = text.split('\n');
@@ -424,0 +438,0 @@ var nTextLines = textLines.length;

src/zrender.js

@@ -31,3 +31,3 @@ /*!
  */
-export var version = '4.0.1';
+export var version = '4.0.2';
 
@@ -245,8 +245,14 @@ /**
     flush: function () {
+        var triggerRendered;
+
         if (this._needsRefresh) {
+            triggerRendered = true;
             this.refreshImmediately();
         }
         if (this._needsRefreshHover) {
+            triggerRendered = true;
             this.refreshHoverImmediately();
         }
+
+        triggerRendered && this.trigger('rendered');
     },
@@ -253,0 +259,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

3078834

increased by0.43%

Lines of code

61840

increased by0.31%

No dependency changes