TouchWrapper for cocos creator 2.3

TouchWrapper.ts

// Learn TypeScript:
//  - https://docs.cocos.com/creator/manual/en/scripting/typescript.html
// Learn Attribute:
//  - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html

const { ccclass, property } = cc._decorator;

@ccclass
export default class TouchWrapper extends cc.Component {

    touchDataPool: TouchDataPool = {};

    touching: boolean = false;
    inputEnabled: boolean = true;
    touchMoveThreshold: number = 1;

    getTouchData(id: number) {
        let touchData = this.touchDataPool[id];
        if (!touchData) {
            touchData = this.createTouchData(id);
            this.touchDataPool[id] = touchData;
        }
        return touchData;
    }

    removeTouchData(id: number) {
        delete this.touchDataPool[id];
    }

    removeAllTouchData() {
        this.touchDataPool = {};
    }

    createTouchData(id: number): TouchData {
        let touchData: TouchData = {
            id: -1,
            startTarget: null,
            startCanvasPos: cc.v2(0, 0),
            startTime: -1,

            target: null,
            canvasPos: cc.v2(0, 0),
            updateTime: -1,

            endTarget: null,
            endCanvasPos: null,
            endTime: -1,

            deltaX: 0,
            deltaY: 0,
            moveAmountX: 0,
            moveAmountY: 0,

            moveTime: -1,

            prevTarget: null,
            prevCanvasPos: cc.v2(0, 0),
            prevUpdateTime: -1,
            prevMoveTime: -1,
        };

        return touchData;
    }


    updateTouchData(touchData: any, node: cc.Node, event: cc.Event.EventTouch) {

        touchData.prevType = touchData.type;
        touchData.prevTarget = touchData.target;
        touchData.prevCanvasPos = touchData.canvasPos;

        let canvasPos = event.getLocation();

        touchData.id = event.getID();
        touchData.type = event.type;
        touchData.target = event.getCurrentTarget();
        touchData.canvasPos = canvasPos;

        // let viewPos = event.getLocationInView();

        // let localPos = node.convertToNodeSpaceAR(canvasPos);
        // touchData.localX = localPos.x;
        // touchData.localY = localPos.y;

        // console.log("==========");
        // console.log(pos.x | 0, pos.y | 0);
        // console.log(canvasPos.x | 0, canvasPos.y | 0);
        // console.log(localPos.x | 0, localPos.y | 0);

        touchData.deltaX = canvasPos.x - touchData.prevCanvasPos.x;
        touchData.deltaY = canvasPos.y - touchData.prevCanvasPos.y;
        touchData.moveAmountX = canvasPos.x - touchData.startCanvasPos.x;
        touchData.moveAmountY = canvasPos.y - touchData.startCanvasPos.y;

        touchData.updateTime = Date.now();
    }

    touchStart(node: cc.Node, event: cc.Event.EventTouch): any {

        let id = event.getID();
        let touchData = this.getTouchData(id);

        this.updateTouchData(touchData, node, event);

        touchData.startCanvasPos = touchData.canvasPos;
        touchData.startTarget = touchData.target;

        touchData.deltaX = 0;
        touchData.deltaY = 0;
        touchData.moveAmountX = 0;
        touchData.moveAmountY = 0;

        touchData.startTime = touchData.updateTime;
        touchData.moveTime = -1;
        touchData.endTime = -1;

        this.touching = true;
        return touchData;
    }

    touchMove(node: cc.Node, event: cc.Event.EventTouch): any {

        let id = event.getID();
        let touchData = this.getTouchData(id);

        touchData.prevMoveTime = touchData.moveTime;

        this.updateTouchData(touchData, node, event);

        touchData.moveTime = touchData.updateTime;
        touchData.endTime = -1;

        // console.log("=======");
        // console.log(touchData.deltaX, touchData.deltaY);
        // console.log(event.getDeltaX(), event.getDeltaY());
        // console.log("aaa");
        // console.log(touchData.prevCanvasPos.x, touchData.prevCanvasPos.y);
        // console.log(event.getPreviousLocation().x, event.getPreviousLocation().y);
        // console.log("bbb");
        // console.log(touchData.startCanvasPos.x, touchData.startCanvasPos.y);
        // console.log(event.getStartLocation().x, event.getStartLocation().y);

        return touchData;
    }

    touchEnd(node: cc.Node, event: cc.Event.EventTouch): any {

        let id = event.getID();
        let touchData = this.getTouchData(id);

        let deltaX = touchData.deltaX;
        let deltaY = touchData.deltaY;

        this.updateTouchData(touchData, node, event);

        touchData.deltaX = deltaX;
        touchData.deltaY = deltaY;

        touchData.endCanvasPos = touchData.canvasPos;
        touchData.endTarget = touchData.target;

        touchData.endTime = touchData.updateTime;

        this.touching = false;

        return touchData;
    }

    onTouchStart: TouchCallback = null;
    onTouchMove: TouchCallback = null;
    onTouchEnd: TouchCallback = null;

    registerInput(node: cc.Node, useCapture: boolean = false) {

        node.on(cc.Node.EventType.TOUCH_START, (event: cc.Event.EventTouch) => {
            if (this.inputEnabled === false) {
                return true;
            }

            if (this.onTouchStart) {
                let touchData = this.touchStart(node, event);
                this.onTouchStart(touchData, event);
            }
        }, null, useCapture);

        node.on(cc.Node.EventType.TOUCH_MOVE, (event: cc.Event.EventTouch) => {
            if (this.inputEnabled === false) {
                return;
            }
            if (this.onTouchMove) {
                let touchData = this.touchMove(node, event);
                this.onTouchMove(touchData, event);
            }
        }, null, useCapture);

        node.on(cc.Node.EventType.TOUCH_END, (event: cc.Event.EventTouch) => {
            if (this.inputEnabled === false) {
                return;
            }
            if (this.onTouchEnd) {
                let touchData = this.touchEnd(node, event);
                this.onTouchEnd(touchData, event);
            }

            // TODO
            this.removeTouchData(event.getID());

        }, null, useCapture);
    }

}


interface TouchData {
    id: number,
    startTarget: cc.Node,
    startCanvasPos: cc.Vec2,
    startTime: number,

    target: cc.Node,
    canvasPos: cc.Vec2,
    updateTime: number,

    endTarget: cc.Node,
    endCanvasPos: cc.Vec2,
    endTime: number,

    deltaX: number,
    deltaY: number,
    moveAmountX: number,
    moveAmountY: number,

    moveTime: number,

    prevTarget: cc.Node,
    prevCanvasPos: cc.Vec2,
    prevUpdateTime: number,
    prevMoveTime: number,
}

interface TouchDataPool {
    [index: number]: TouchData;
}

interface TouchCallback {
    (touchData: TouchData, event: cc.Event.EventTouch): void;
}