@antv/g - npm Package Compare versions

Comparing version 3.1.0-beta.4 to 3.1.0-beta.5

lib/canvas.js

@@ -69,2 +69,4 @@ var Util = require('./util/index');
   init: function init() {
+    var _this = this;
+
     Canvas.superclass.init.call(this);
@@ -78,2 +80,7 @@ this._setGlobalParam();
     }
+    this.draw = Util.throttle(function () {
+      _this.emit('beforedraw');
+      _this._cfg.painter.draw(_this);
+      _this.emit('afterdraw');
+    }, 16);
   },
@@ -265,5 +272,2 @@ getEmitter: function getEmitter(element, event) {
   },
-  draw: function draw() {
-    this._cfg.painter.draw(this);
-  },
   getShape: function getShape(x, y, e) {
@@ -270,0 +274,0 @@ if (arguments.length === 3 && this._cfg.renderer.getShape) {

lib/core/mixin/timeline.js

@@ -152,2 +152,3 @@ var Util = require('../../util/index');
     this._animators = [];
+    this.canvas.draw();
   },
@@ -154,0 +155,0 @@ getTime: function getTime() {

lib/index.js

@@ -26,3 +26,3 @@ module.exports = {
   // version, etc.
-  version: '3.1.0-beta.4'
+  version: '3.1.0-beta.5'
 };

lib/renderers/canvas/painter.js

@@ -31,26 +31,26 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
   Painter.prototype.draw = function draw(model) {
-    var self = this;
-    function drawInner() {
-      self.animateHandler = Util.requestAnimationFrame(function () {
-        self.animateHandler = undefined;
-        if (self.toDraw) {
-          drawInner();
-        }
-      });
-      self.beforeDraw();
-      try {
-        self._drawGroup(model);
-      } catch (ev) {
-        // 绘制时异常，中断重绘
-        console.warn('error in draw canvas, detail as:');
-        console.warn(ev);
-        self.toDraw = false;
-      }
-      self.toDraw = false;
-    }
-    if (self.animateHandler) {
-      self.toDraw = true;
-    } else {
-      drawInner();
-    }
+    this._drawGroup(model);
+    // const self = this;
+    // function drawInner() {
+    //   self.animateHandler = Util.requestAnimationFrame(() => {
+    //     self.animateHandler = undefined;
+    //     if (self.toDraw) {
+    //       drawInner();
+    //     }
+    //   });
+    //   self.beforeDraw();
+    //   try {
+    //     self._drawGroup(model);
+    //   } catch (ev) { // 绘制时异常，中断重绘
+    //     console.warn('error in draw canvas, detail as:');
+    //     console.warn(ev);
+    //     self.toDraw = false;
+    //   }
+    //   self.toDraw = false;
+    // }
+    // if (self.animateHandler) {
+    //   self.toDraw = true;
+    // } else {
+    //   drawInner();
+    // }
   };
@@ -57,0 +57,0 @@

lib/util/common.js

@@ -28,3 +28,60 @@ var Util = require('@antv/util/lib');
   mod: Util.mod,
-  clamp: Util.clamp
+  clamp: Util.clamp,
+  /**
+  * @param  {Function} fn 实际要执行的函数
+  * @param  {Number} threshhold 执行间隔，单位是毫秒（ms）
+  * @return {Function}     返回一个“节流”函数
+  */
+  throttle: function throttle(fn, threshhold) {
+    // 记录上次执行的时间
+    var last = void 0;
+    // 定时器
+    var timer = void 0;
+    // 默认间隔为 250ms
+    threshhold || (threshhold = 250);
+    // 返回的函数，每过 threshhold 毫秒就执行一次 fn 函数
+    return function () {
+      // 保存函数调用时的上下文和参数，传递给 fn
+      var context = this;
+      var args = arguments;
+      var now = +new Date();
+      // 如果距离上次执行 fn 函数的时间小于 threshhold，那么就放弃
+      // 执行 fn，并重新计时
+      if (last && now < last + threshhold) {
+        clearTimeout(timer);
+        // 保证在当前时间区间结束后，再执行一次 fn
+        timer = setTimeout(function () {
+          last = now;
+          fn.apply(context, args);
+        }, threshhold);
+        // 在时间区间的最开始和到达指定间隔的时候执行一次 fn
+      } else {
+        last = now;
+        fn.apply(context, args);
+      }
+    };
+  },
+
+  /**
+   * @param  {Function} fn 实际要执行的函数
+   * @param  {Number} threshhold 延迟时间，单位是毫秒（ms）
+   * @return {Function}     返回一个“防反跳”了的函数
+   */
+  debounce: function debounce(fn, threshhold) {
+    // 定时器，用来 setTimeout
+    var timer = void 0;
+    // 返回一个函数，这个函数会在一个时间区间结束后的 threshhold 毫秒时执行 fn 函数
+    return function () {
+      // 保存函数调用时的上下文和参数，传递给 fn
+      var context = this;
+      var args = arguments;
+      // 每次这个返回的函数被调用，就清除定时器，以保证不执行 fn
+      clearTimeout(timer);
+      // 当返回的函数被最后一次调用后（也就是用户停止了某个连续的操作），
+      // 再过 threshhold 毫秒就执行 fn
+      timer = setTimeout(function () {
+        fn.apply(context, args);
+      }, threshhold);
+    };
+  }
 };

package.json

 {
   "name": "@antv/g",
-  "version": "3.1.0-beta.4",
+  "version": "3.1.0-beta.5",
   "description": "A canvas library which providing 2d draw for G2.",
@@ -5,0 +5,0 @@ "keywords": [

src/canvas.js

@@ -77,2 +77,7 @@ const Util = require('./util/index');
     }
+    this.draw = Util.throttle(() => {
+      this.emit('beforedraw');
+      this._cfg.painter.draw(this);
+      this.emit('afterdraw');
+    }, 16);
   },
@@ -273,5 +278,2 @@ getEmitter(element, event) {
   },
-  draw() {
-    this._cfg.painter.draw(this);
-  },
   getShape(x, y, e) {
@@ -278,0 +280,0 @@ if (arguments.length === 3 && this._cfg.renderer.getShape) {

src/core/mixin/timeline.js

@@ -147,2 +147,3 @@ const Util = require('../../util/index');
     this._animators = [];
+    this.canvas.draw();
   },
@@ -149,0 +150,0 @@ getTime() {

src/index.js

@@ -26,3 +26,3 @@ module.exports = {
   // version, etc.
-  version: '3.1.0-beta.4'
+  version: '3.1.0-beta.5'
 };

src/renderers/canvas/painter.js

@@ -42,25 +42,26 @@ const Util = require('../../util');
   draw(model) {
-    const self = this;
-    function drawInner() {
-      self.animateHandler = Util.requestAnimationFrame(() => {
-        self.animateHandler = undefined;
-        if (self.toDraw) {
-          drawInner();
-        }
-      });
-      self.beforeDraw();
-      try {
-        self._drawGroup(model);
-      } catch (ev) { // 绘制时异常，中断重绘
-        console.warn('error in draw canvas, detail as:');
-        console.warn(ev);
-        self.toDraw = false;
-      }
-      self.toDraw = false;
-    }
-    if (self.animateHandler) {
-      self.toDraw = true;
-    } else {
-      drawInner();
-    }
+    this._drawGroup(model);
+    // const self = this;
+    // function drawInner() {
+    //   self.animateHandler = Util.requestAnimationFrame(() => {
+    //     self.animateHandler = undefined;
+    //     if (self.toDraw) {
+    //       drawInner();
+    //     }
+    //   });
+    //   self.beforeDraw();
+    //   try {
+    //     self._drawGroup(model);
+    //   } catch (ev) { // 绘制时异常，中断重绘
+    //     console.warn('error in draw canvas, detail as:');
+    //     console.warn(ev);
+    //     self.toDraw = false;
+    //   }
+    //   self.toDraw = false;
+    // }
+    // if (self.animateHandler) {
+    //   self.toDraw = true;
+    // } else {
+    //   drawInner();
+    // }
   }
@@ -67,0 +68,0 @@ _drawGroup(group) {

src/util/common.js

@@ -28,3 +28,59 @@ const Util = require('@antv/util/lib');
   mod: Util.mod,
-  clamp: Util.clamp
+  clamp: Util.clamp,
+  /**
+  * @param  {Function} fn 实际要执行的函数
+  * @param  {Number} threshhold 执行间隔，单位是毫秒（ms）
+  * @return {Function}     返回一个“节流”函数
+  */
+  throttle(fn, threshhold) {
+    // 记录上次执行的时间
+    let last;
+    // 定时器
+    let timer;
+    // 默认间隔为 250ms
+    threshhold || (threshhold = 250);
+    // 返回的函数，每过 threshhold 毫秒就执行一次 fn 函数
+    return function() {
+      // 保存函数调用时的上下文和参数，传递给 fn
+      const context = this;
+      const args = arguments;
+      const now = +new Date();
+      // 如果距离上次执行 fn 函数的时间小于 threshhold，那么就放弃
+      // 执行 fn，并重新计时
+      if (last && now < last + threshhold) {
+        clearTimeout(timer);
+        // 保证在当前时间区间结束后，再执行一次 fn
+        timer = setTimeout(function() {
+          last = now;
+          fn.apply(context, args);
+        }, threshhold);
+      // 在时间区间的最开始和到达指定间隔的时候执行一次 fn
+      } else {
+        last = now;
+        fn.apply(context, args);
+      }
+    };
+  },
+  /**
+   * @param  {Function} fn 实际要执行的函数
+   * @param  {Number} threshhold 延迟时间，单位是毫秒（ms）
+   * @return {Function}     返回一个“防反跳”了的函数
+   */
+  debounce(fn, threshhold) {
+    // 定时器，用来 setTimeout
+    let timer;
+    // 返回一个函数，这个函数会在一个时间区间结束后的 threshhold 毫秒时执行 fn 函数
+    return function() {
+      // 保存函数调用时的上下文和参数，传递给 fn
+      const context = this;
+      const args = arguments;
+      // 每次这个返回的函数被调用，就清除定时器，以保证不执行 fn
+      clearTimeout(timer);
+      // 当返回的函数被最后一次调用后（也就是用户停止了某个连续的操作），
+      // 再过 threshhold 毫秒就执行 fn
+      timer = setTimeout(function() {
+        fn.apply(context, args);
+      }, threshhold);
+    };
+  }
 };

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

Worsened metrics

Total package byte prevSize

1214844

decreased by-7.54%

Number of package files

187

decreased by-10.95%

Lines of code

34280

decreased by-8.93%

No dependency changes