feat: add env detect variables, support node-canvas

antvis · Apr 23, 2018 · fcc792f · fcc792f
1 parent 5685e24
commit fcc792f
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 25 deletions.
diff --git a/src/chart/controller/axis.js b/src/chart/controller/axis.js
@@ -174,7 +174,8 @@ class AxisController {
           }, labelCfg),
           value: tick.value,
           textStyle,
-          top: labelCfg.top
+          top: labelCfg.top,
+          context: self.chart.get('canvas').get('context')
         });
         labels.push(axisLabel);
         const { width, height } = axisLabel.getBBox();

diff --git a/src/graphic/canvas.js b/src/graphic/canvas.js
@@ -2,10 +2,6 @@ const Util = require('../util/common');
 const Container = require('./container');
 const Group = require('./group');
 
-/* global wx, my */
-const isWx = (typeof wx === 'object') && (typeof wx.getSystemInfoSync === 'function'); // weixin miniprogram
-const isMy = (typeof my === 'object') && (typeof my.getSystemInfoSync === 'function'); // ant miniprogram
-
 class Canvas {
   get(name) {
     return this._attrs[name];
@@ -34,7 +30,7 @@ class Canvas {
   _beforeDraw() {
     const context = this._attrs.context;
     const el = this._attrs.el;
-    !isWx && !isMy && context && context.clearRect(0, 0, el.width, el.height);
+    !Util.isWx && !Util.isMy && context && context.clearRect(0, 0, el.width, el.height);
   }
 
   _initCanvas() {
@@ -85,12 +81,15 @@ class Canvas {
   changeSize(width, height) {
     const pixelRatio = this.get('pixelRatio');
     const canvasDOM = this.get('el');
-    canvasDOM.style.width = width + 'px';
-    canvasDOM.style.height = height + 'px';
-    canvasDOM.width = width * pixelRatio;
-    canvasDOM.height = height * pixelRatio;
 
-    if (pixelRatio !== 1 && !isWx && !isMy) {
+    if (Util.isBrowser) {
+      canvasDOM.style.width = width + 'px';
+      canvasDOM.style.height = height + 'px';
+      canvasDOM.width = width * pixelRatio;
+      canvasDOM.height = height * pixelRatio;
+    }
+
+    if (pixelRatio !== 1 && !Util.isWx && !Util.isMy) {
       const ctx = this.get('context');
       ctx.scale(pixelRatio, pixelRatio);
     }
@@ -150,7 +149,7 @@ class Canvas {
         child.draw(context);
       }
 
-      if (isWx || isMy) {
+      if (Util.isWx || Util.isMy) {
         context.draw();
       }
     } catch (ev) { // 绘制时异常，中断重绘

diff --git a/src/graphic/shape/text.js b/src/graphic/shape/text.js
@@ -178,6 +178,7 @@ class Text extends Shape {
   _getTextWidth() {
     const attrs = this._attrs.attrs;
     const text = attrs.text;
+    const context = this.get('context');
 
     if (Util.isNil(text)) return undefined;
 
@@ -192,10 +193,10 @@ class Text extends Shape {
     if (textArr) {
       for (let i = 0, length = textArr.length; i < length; i++) {
         const subText = textArr[i];
-        width = Math.max(width, Util.measureText(subText, font).width);
+        width = Math.max(width, Util.measureText(subText, font, context).width);
       }
     } else {
-      width = Util.measureText(text, font).width;
+      width = Util.measureText(text, font, context).width;
     }
 
     if (textWidthCacheCounter > TEXT_CACHE_MAX) {

diff --git a/src/plugin/tooltip.js b/src/plugin/tooltip.js
@@ -429,7 +429,7 @@ class TooltipController {
     triggerOff && this._handleEvent(triggerOff, hideMethod, 'bind');
     // TODO: 当用户点击canvas 外的事件时 tooltip 消失
     const docMethod = Util.wrapBehavior(this, 'handleDocEvent');
-    document && Util.addEventListener(document, 'touchstart', docMethod);
+    Util.isBrowser && Util.addEventListener(document, 'touchstart', docMethod);
   }
 
   unBindEvents() {
@@ -442,7 +442,7 @@ class TooltipController {
     triggerOff && this._handleEvent(triggerOff, hideMethod, 'unBind');
     // TODO: 当用户点击canvas 外的事件时 tooltip 消失
     const docMethod = Util.getWrapBehavior(this, 'handleDocEvent');
-    document && Util.removeEventListener(document, 'touchstart', docMethod);
+    Util.isBrowser && Util.removeEventListener(document, 'touchstart', docMethod);
   }
 }
 

diff --git a/src/util/dom.js b/src/util/dom.js
@@ -51,9 +51,12 @@ function fromNativeEvent(event, chart) { // TODO: chart 改成 dom
   return createEvent(type, chart, pos.x, pos.y, event);
 }
 
-let _dummyCtx;
-
 DomUtil = {
+  /* global wx, my, module */
+  isWx: (typeof wx === 'object') && (typeof wx.getSystemInfoSync === 'function'),  // weixin miniprogram
+  isMy: (typeof my === 'object') && (typeof my.getSystemInfoSync === 'function'), // ant miniprogram
+  isNode: (typeof module !== 'undefined') && (typeof module.exports !== 'undefined'), // in node
+  isBrowser: (typeof window !== 'undefined') && (typeof window.document !== 'undefined'), // in browser
   getPixelRatio() {
     return window && window.devicePixelRatio || 1;
   },
@@ -108,21 +111,21 @@ DomUtil = {
     };
   },
   addEventListener(source, type, listener) {
-    source.addEventListener(type, listener, eventListenerOptions);
+    DomUtil.isBrowser && source.addEventListener(type, listener, eventListenerOptions);
   },
   removeEventListener(source, type, listener) {
-    source.removeEventListener(type, listener, eventListenerOptions);
+    DomUtil.isBrowser && source.removeEventListener(type, listener, eventListenerOptions);
   },
   createEvent(event, chart) {
     return fromNativeEvent(event, chart);
   },
-  measureText(text, font) {
-    if (!_dummyCtx) {
-      _dummyCtx = document.createElement('canvas').getContext('2d');
+  measureText(text, font, ctx) {
+    if (!ctx) {
+      ctx = document.createElement('canvas').getContext('2d');
     }
 
-    _dummyCtx.font = font || '12px sans-serif';
-    return _dummyCtx.measureText(text);
+    ctx.font = font || '12px sans-serif';
+    return ctx.measureText(text);
   }
 };