feat: 复杂交互支持小程序

src/chart/chart.js

@@ -1,4 +1,5 @@
 import {
+  EVENT_AFTER_INIT,
   EVENT_BEFORE_RENDER,
   EVENT_AFTER_RENDER,
   EVENT_BEFORE_DATA_CHANGE,
@@ -490,6 +491,7 @@ class Chart extends Base {
     this._syncYScales();
     // do some adjust for data
     this._adjustScale();
+    this.emit(EVENT_AFTER_INIT);
   }
 
   /**

src/chart/const.js

@@ -1,7 +1,8 @@
+const EVENT_AFTER_INIT = 'afterinit';
+
 const EVENT_BEFORE_RENDER = 'beforerender';
 const EVENT_AFTER_RENDER = 'afterrender';
 
-
 const EVENT_BEFORE_DATA_CHANGE = 'beforedatachange';
 const EVENT_AFTER_DATA_CHANGE = 'afterdatachange';
 
@@ -10,6 +11,7 @@ const EVENT_AFTER_SIZE_CHANGE = '_aftersizechange';
 const EVENT_AFTER_GEOM_INIT = '_aftergeominit';
 
 export {
+  EVENT_AFTER_INIT,
   EVENT_BEFORE_RENDER,
   EVENT_AFTER_RENDER,
   EVENT_BEFORE_DATA_CHANGE,

src/index.js

@@ -28,4 +28,7 @@ F2.Animate = require('./animation/animate');
 // register plugins
 F2.Chart.plugins.register([ Tooltip, Legend, Guide, Animation ]);
 
+// 默认添加交互
+require('./interaction/new/index');
+
 module.exports = F2;

src/interaction/base.js

@@ -2,8 +2,9 @@
  * The parent class of interaction
  * @author sima.zhang1990@gmail.com
  */
+import './register';
+
 const Util = require('../util/common');
-const Chart = require('../chart/chart');
 
 let Hammer;
 if (!Util.isWx && !Util.isMy) {
@@ -26,22 +27,22 @@ class Interaction {
     };
   }
 
-  _start(ev) {
+  _start = ev => {
     this.preStart && this.preStart(ev);
     this.start(ev);
     this.onStart && this.onStart(ev);
   }
-  _process(ev) {
+  _process = ev => {
     this.preProcess && this.preProcess(ev);
     this.process(ev);
     this.onProcess && this.onProcess(ev);
   }
-  _end(ev) {
+  _end = ev => {
     this.preEnd && this.preEnd(ev);
     this.end(ev);
     this.onEnd && this.onEnd(ev);
   }
-  _reset(ev) {
+  _reset = ev => {
     this.preReset && this.preReset(ev);
     this.reset(ev);
     this.onReset && this.onReset(ev);
@@ -71,10 +72,10 @@ class Interaction {
     if (Hammer) {
       this.hammer = new Hammer(el);
     }
-    this._bindEvent(startEvent, '_start');
-    this._bindEvent(processEvent, '_process');
-    this._bindEvent(endEvent, '_end');
-    this._bindEvent(resetEvent, '_reset');
+    this._bindEvent(startEvent, this._start);
+    this._bindEvent(processEvent, this._process);
+    this._bindEvent(endEvent, this._end);
+    this._bindEvent(resetEvent, this._reset);
   }
 
   _clearEvents() {
@@ -85,27 +86,27 @@ class Interaction {
       this.hammer = null;
     }
 
-    this._clearTouchEvent(startEvent, '_start');
-    this._clearTouchEvent(processEvent, '_process');
-    this._clearTouchEvent(endEvent, '_end');
-    this._clearTouchEvent(resetEvent, '_reset');
+    this._clearTouchEvent(startEvent, this._start);
+    this._clearTouchEvent(processEvent, this._process);
+    this._clearTouchEvent(endEvent, this._end);
+    this._clearTouchEvent(resetEvent, this._reset);
   }
 
-  _bindEvent(eventName, methodName) {
+  _bindEvent(eventName, method) {
     const el = this.el;
     if (eventName) {
       if (TOUCH_EVENTS.indexOf(eventName) !== -1) {
-        Util.addEventListener(el, eventName, Util.wrapBehavior(this, methodName));
+        Util.addEventListener(el, eventName, method);
       } else if (this.hammer) {
-        this.hammer.on(eventName, Util.wrapBehavior(this, methodName));
+        this.hammer.on(eventName, method);
       }
     }
   }
 
-  _clearTouchEvent(eventName, methodName) {
+  _clearTouchEvent(eventName, method) {
     const el = this.el;
     if (eventName && TOUCH_EVENTS.indexOf(eventName) !== -1) {
-      Util.removeEventListener(el, eventName, Util.getWrapBehavior(this, methodName));
+      Util.removeEventListener(el, eventName, method);
     }
   }
 
@@ -114,39 +115,4 @@ class Interaction {
   }
 }
 
-Chart._Interactions = {};
-Chart.registerInteraction = function(type, constructor) {
-  Chart._Interactions[type] = constructor;
-};
-Chart.getInteraction = function(type) {
-  return Chart._Interactions[type];
-};
-
-Chart.prototype.interaction = function(type, cfg) {
-  const interactions = this._interactions || {};
-  if (interactions[type]) { // if reprated, destroy last
-    interactions[type].destroy();
-  }
-  const Ctor = Chart.getInteraction(type);
-  const interact = new Ctor(cfg, this);
-  interactions[type] = interact;
-  this._interactions = interactions;
-  return this;
-};
-Chart.prototype.clearInteraction = function(type) {
-  const interactions = this._interactions;
-  if (!interactions) return;
-  if (type) {
-    interactions[type] && interactions[type].destroy();
-    delete interactions[type];
-  } else {
-    Util.each(interactions, (interaction, key) => {
-      interaction.destroy();
-      delete interactions[key];
-    });
-  }
-
-  return this;
-};
-
 module.exports = Interaction;

src/interaction/new/base.js

@@ -0,0 +1,82 @@
+import { mix } from '../../util/common';
+import Context from './context';
+
+class Base {
+  type = '';
+  startEvent = 'touchstart';
+  processEvent = 'touchmove';
+  endEvent = 'touchend';
+  resetEvent = null;
+  // 交互的上下文
+  context = null;
+
+  getDefaultCfg() {
+    return {};
+  }
+
+  getInteractionContext(chart) {
+    let interactionContext = chart.get('interactionContext');
+    if (interactionContext) {
+      return interactionContext;
+    }
+    interactionContext = new Context(chart);
+    chart.set('interactionContext', interactionContext);
+    return interactionContext;
+  }
+
+  constructor(cfg, chart) {
+    mix(this, this.getDefaultCfg(), cfg);
+    this.context = this.getInteractionContext(chart);
+    this.chart = chart;
+    this._bindEvents(chart);
+  }
+
+  _bindEvents(chart) {
+    const { startEvent, processEvent, endEvent, resetEvent } = this;
+    const canvas = chart.get('canvas');
+    // 统一绑定事件
+    canvas.on(startEvent, this._start);
+    canvas.on(processEvent, this._process);
+    canvas.on(endEvent, this._end);
+    canvas.on(resetEvent, this._reset);
+  }
+
+  _clearEvents() {
+    const { chart, startEvent, processEvent, endEvent, resetEvent } = this;
+    const canvas = chart.get('canvas');
+
+    // 统一绑定事件
+    canvas.off(startEvent, this._start);
+    canvas.off(processEvent, this._process);
+    canvas.off(endEvent, this._end);
+    canvas.off(resetEvent, this._start);
+  }
+
+  _start = ev => {
+    this.start(ev);
+  }
+  _process = ev => {
+    this.process(ev);
+  }
+  _end = ev => {
+    this.end(ev);
+  }
+  _reset = ev => {
+    this.reset(ev);
+  }
+
+  // override
+  start() {}
+  // override
+  process() {}
+  // override
+  end() {}
+  // override
+  reset() {}
+
+  destroy() {
+    this._clearEvents();
+  }
+}
+
+export default Base;