fix: 修复微信下因为因为把AnyTouch的实例传入识别器而造成的JSON解析错误

__tests__/pan.spec.ts

@@ -1,10 +1,11 @@
 import panSimulator from './utils/Gesture/panSimulator';
 import pan2Simulator from './utils/Gesture/pan2Simulator';
 import AnyTouch from '../src/main'
-const el = document.createElement('div');
-
+import sleep from './utils/sleep';
+import TouchSimulator from './utils/TouchSimulator';
 test('通过多点pan, 测试Pan构造函数是否正确?', (done) => {
-    const at = new AnyTouch(el, {isPreventDefault:true});
+    const el = document.createElement('div');
+    const at = new AnyTouch(el, { isPreventDefault: true });
     const pan2 = new AnyTouch.Pan({
         name: 'pan2',
         pointLength: 2,
@@ -21,21 +22,22 @@ test('通过多点pan, 测试Pan构造函数是否正确?', (done) => {
     pan2Simulator(el, { direction: 'left' });
 });
 
-
-['up', 'right', 'down', 'left'].forEach(direction => {
-    test('panup|panright|pandown|panleft是否正确?', (done) => {
+['up', 'right', 'down', 'left'].forEach( (direction) => {
+    test(`设置pan的directions为${direction}, pan${direction}是否触发?`, async(done) => {
+        const el = document.createElement('div');
         const at = new AnyTouch(el);
+        const mockCallback = jest.fn();
         const pan = at.get('pan');
-        if(undefined === pan) return
-        pan.set({ directions: [direction] });
+        if(undefined === pan) return;
+        pan.set({directions:[direction]});
         at.on(`pan${direction}`, (ev) => {
-            expect(ev.direction).toBe(direction);
-        });
-
-        at.on(`panend`, (ev) => {
-            done();
+            mockCallback(ev.direction);
+            // console.warn(ev.direction);
         });
-        // 模拟事件
-        panSimulator(el, { direction });
+
+        panSimulator(el, {direction});
+        await sleep(100);
+        expect(mockCallback.mock.calls[0][0]).toBe(direction);
+        done();
     });
-});
+});

__tests__/pinch.spec.ts

@@ -2,10 +2,8 @@ import pinchSimulator from './utils/Gesture/pinchSimulator';
 import sleep from './utils/sleep';
 import AnyTouch from '../src/main'
 const el = document.createElement('div');
-
 const at = new AnyTouch(el);
 
-
 test('pinch缩放计算是否正确?', (done) => {
     let index = 0;
     let expectScales = [2, 4, 6, 3, 1, 0.5, 0.2];

example/index.js

@@ -1,5 +1,5 @@
 let log = console.log;
-log = () => {};
+log = () => { };
 new Vue({
     el: '#app',
 
@@ -16,7 +16,7 @@ new Vue({
         };
     },
     mounted() {
-        this.$refs.circle.addEventListener('animationend', e=>{
+        this.$refs.circle.addEventListener('animationend', e => {
             this.activeType = 'AnyTouch';
         });
 
@@ -40,7 +40,7 @@ new Vue({
         // 初始化
         const anyTouch = new AnyTouch(el, {
             touchAction: 'auto',
-            syncToAttr:true
+            syncToAttr: true
         });
 
 
@@ -124,7 +124,7 @@ new Vue({
             // anyTouch.set({touchAction:'auto',isPreventDefault:false});
             this.message = e;
             console.warn(e.type);
-            
+
         });
 
         anyTouch.on('panmove', e => {
@@ -133,21 +133,29 @@ new Vue({
             log(e.type);
         });
 
+
+
+        anyTouch.on('panup', e => {
+            console.warn(e.type);
+        });
+
         anyTouch.on('pancancel', e => {
             // e.nativeEvent.preventDefault()
             this.message = e;
             log(e.type);
         });
 
-        anyTouch.on('panend', e => {            
-            console.warn('panend',e.direction);
+        anyTouch.on('panend', e => {
+            console.warn('panend', e.direction);
             this.message = e;
             log(e.type);
         });
 
 
+
+
         anyTouch.on('pan', e => {
-            const {deltaXYAngle,deltaX, deltaY} = e;
+            const { deltaXYAngle, deltaX, deltaY } = e;
             log(`%c ${e.type} `, 'background-color:#69c;color:#fff;');
             this.message = e;
             this.x += e.deltaX;
@@ -158,7 +166,7 @@ new Vue({
          * =========================== press ===========================
          */
         anyTouch.on('press', e => {
-            
+
             log(`%c ${e.type} `, 'background-color:#fa0;color:#fff;');
             this.message = e;
         });
@@ -174,10 +182,10 @@ new Vue({
         anyTouch.on('tap', e => {
             e.preventDefault();
             log(`%c ${e.type} `, 'background-color:#f10;color:#fff;');
-            log(e.x,e.y)
+            log(e.x, e.y)
             this.message = e;
         });
-        this.$refs.circle.addEventListener('click', ev=>{
+        this.$refs.circle.addEventListener('click', ev => {
             log('click');
         })
         anyTouch.on('doubletap', e => {
@@ -194,7 +202,7 @@ new Vue({
             log(`%c ${e.type} `, 'background-color:#19c;color:#fff;');
             this.message = e;
         });
-        
+
         /**
          * =========================== pinch ===========================
          */
@@ -224,7 +232,7 @@ new Vue({
         });
 
         anyTouch.on('rotate', e => {
-            log(e.deltaAngle, e.deltaX,e.deltaY);
+            log(e.deltaAngle, e.deltaX, e.deltaY);
             this.message = e;
             this.angle += e.deltaAngle;
             this.centerX = e.center.x;
@@ -309,8 +317,8 @@ new Vue({
         // }
     },
 
-    watch:{
-        message(){
+    watch: {
+        message() {
             this.activeType = this.message.type;
         }
     }

src/AnyTouch.ts

@@ -81,6 +81,8 @@ export class AnyTouch {
 
     $store: Store;
 
+    _root: any;
+
     // 是否阻止后面的识别器运行
     private _isStopped: boolean;
 
@@ -115,19 +117,22 @@ export class AnyTouch {
         this._isStopped = false;
         // 识别器
         // 注入当前方法和属性, 方便在识别器中调用类上的方法和属性
+        // fix: 不注入this, 因为微信下回报错, 提示对象里有循环引用
+        const root = { eventEmitter: this.eventEmitter, options: this.options, el, update: this.update.bind(this) };
+        this._root = root;
         this.recognizers = [
-            new Rotate().$injectRoot(this),
-            new Pinch().$injectRoot(this),
-            new Pan().$injectRoot(this),
-            new Swipe().$injectRoot(this),
-            new Tap().$injectRoot(this),
+            new Rotate().$injectRoot(root),
+            new Pinch().$injectRoot(root),
+            new Pan().$injectRoot(root),
+            new Swipe().$injectRoot(root),
+            new Tap().$injectRoot(root),
             new Tap({
                 name: 'doubletap',
                 pointLength: 1,
                 tapTimes: 2,
                 disabled: true
-            }).$injectRoot(this),
-            new Press().$injectRoot(this),
+            }).$injectRoot(root),
+            new Press().$injectRoot(root),
         ];
         // 默认单击需要双击识别失败后触发
         this.recognizers[4].requireFailure(this.recognizers[5]);
@@ -155,6 +160,7 @@ export class AnyTouch {
      * @param {HTMLElement} 目标元素 
      */
     updateTouchAction() {
+        // console.warn(this.options.touchAction);
         if (COMPUTE === this.options.touchAction) {
             let touchActions = [];
             for (let recognizer of this.recognizers) {
@@ -220,7 +226,7 @@ export class AnyTouch {
 
         // Touch
         if (TOUCH === this.touchDevice) {
-            const events = [TOUCH_START,TOUCH_MOVE,TOUCH_END,TOUCH_CANCEL];
+            const events = [TOUCH_START, TOUCH_MOVE, TOUCH_END, TOUCH_CANCEL];
             events.forEach(eventName => {
                 el.addEventListener(eventName, boundInputListener);
             });
@@ -261,7 +267,7 @@ export class AnyTouch {
      * @param recognizer 识别器
      */
     add(recognizer: Recognizer): void {
-        recognizer.$injectRoot(this);
+        recognizer.$injectRoot(this._root);
         const hasSameName = this.recognizers.some((theRecognizer: Recognizer) => recognizer.name === theRecognizer.name);
         if (hasSameName) {
             this.eventEmitter.emit('error', { code: 1, message: `${recognizer.name}识别器已经存在!` })

src/recognitions/Base.ts

@@ -66,7 +66,6 @@ export default abstract class Recognizer {
     public emit(type: string, payload: any) {
         payload.type = type;
         this.$root.eventEmitter.emit(type, payload);
-
         if (undefined !== this.$root.el) {
             if (this.$root.options.syncToAttr) {
                 this.$root.el.setAttribute('at-gesture', type);

src/recognitions/Pan.ts

@@ -18,6 +18,7 @@ export default class PanRecognizer extends Recognizer {
     getTouchAction() {
         let touchActions = [AUTO];
         let { hasHorizontal, hasVertical } = getHV(this.options.directions);
+        // console.log(this.options.directions, hasHorizontal, hasVertical);
         if (hasHorizontal && hasVertical) {
             touchActions = [NONE];
         } else if (!hasHorizontal && hasVertical) {