@openglobus/og 0.17.1 → 0.18.0

package/src/{og/renderer/RendererEvents.js → renderer/RendererEvents.ts}

@@ -1,12 +1,140 @@
-"use strict";
+import {Events, EventsHandler, EventCallback} from "../Events";
+import {input} from "../input/input";
+import {KeyboardHandler} from "../input/KeyboardHandler";
+import {MouseHandler, MouseHandlerEvent, MouseEventExt} from "../input/MouseHandler";
+import {Renderer} from "./Renderer";
+import {TouchEventExt, TouchHandler} from "../input/TouchHandler";
+import {Vec2} from "../math/Vec2";
+import {NumberArray3, Vec3} from "../math/Vec3";
+
+export type RendererEventsHandler = RendererEvents & EventsHandler<RendererEventsType>;
+
+export function createRendererEvents(renderer: Renderer) {
+    return new RendererEvents(renderer);
+}
+
+export type RendererEventsType = [
+    "draw",
+    "postdraw",
+    "resize",
+    "resizeend",
+    "mouseenter",
+    "mouseleave",
+    "mousemove",
+    "mousestop",
+    "lclick",
+    "rclick",
+    "mclick",
+    "ldblclick",
+    "rdblclick",
+    "mdblclick",
+    "lup",
+    "rup",
+    "mup",
+    "ldown",
+    "rdown",
+    "mdown",
+    "lhold",
+    "rhold",
+    "mhold",
+    "mousewheel",
+    "touchstart",
+    "touchend",
+    "touchcancel",
+    "touchmove",
+    "doubletouch",
+    "touchleave",
+    "touchenter"
+];
 
-import { Events } from "../Events.js";
-import { input } from "../input/input.js";
-import { KeyboardHandler } from "../input/KeyboardHandler.js";
-import { MouseHandler } from "../input/MouseHandler.js";
-import { TouchHandler } from "../input/TouchHandler.js";
-import { Vec2 } from "../math/Vec2.js";
-import { Vec3 } from "../math/Vec3.js";
+export interface IBaseInputState {
+    /** Current screen mouse X position. */
+    clientX: number;
+    /** Current screen mouse Y position. */
+    clientY: number;
+    /** Current screen mouse position. */
+    pos: Vec2;
+    /** Current touch X - coordinate. */
+    x: number;
+    /** Current touch Y - coordinate. */
+    y: number;
+    /** Current touch X - coordinate from 0 to 1 */
+    nx: number;
+    /** Current touch Y - coordinate from 0 to 1 */
+    ny: number;
+    /** Previous touch X coordinate. */
+    prev_x: number;
+    /** Previous touch Y coordinate. */
+    prev_y: number,
+    /** Screen touch position world direction. */
+    direction: Vec3;
+    /** Current touched(picking) object. */
+    pickingObject: any | null;
+    /** Renderer instance. */
+    renderer: Renderer;
+    /** Touching is moving now. */
+    moving: boolean;
+}
+
+export interface IMouseState extends IBaseInputState {
+    /** Left mouse button has stopped pushing down right now.*/
+    leftButtonUp: boolean;
+    /** Right mouse button has stopped pushing down right now.*/
+    rightButtonUp: boolean;
+    /** Middle mouse button has stopped pushing down right now.*/
+    middleButtonUp: boolean;
+    /** Left mouse button has pushed now.*/
+    leftButtonDown: boolean;
+    /** Right mouse button has pushed now.*/
+    rightButtonDown: boolean;
+    /** Middle mouse button has pushed now.*/
+    middleButtonDown: boolean;
+    /** Left mouse button is pushing.*/
+    leftButtonHold: boolean;
+    /** Right mouse button is pushing.*/
+    rightButtonHold: boolean;
+    /** Middle mouse button is pushing.*/
+    middleButtonHold: boolean;
+    /** Left mouse button has clicked twice now.*/
+    leftButtonDoubleClick: boolean;
+    /** Right mouse button has clicked twice now.*/
+    rightButtonDoubleClick: boolean;
+    /** Middle mouse button has clicked twice now.*/
+    middleButtonDoubleClick: boolean;
+    /** Left mouse button has clicked now. */
+    leftButtonClick: boolean;
+    /** Right mouse button has clicked now. */
+    rightButtonClick: boolean;
+    /** Middle mouse button has clicked now. */
+    middleButtonClick: boolean;
+    /** Mouse has just stopped now. */
+    justStopped: boolean;
+    /** Mose double click delay response time.*/
+    doubleClickDelay: number;
+    /** Mose click delay response time.*/
+    clickDelay: number;
+    /** Mouse wheel. */
+    wheelDelta: number;
+    /** JavaScript mouse system event message. */
+    sys: MouseEvent | null;
+}
+
+export interface ITouchState extends IBaseInputState {
+    /** Touch has ended right now.*/
+    touchEnd: boolean;
+    /** Touch has started right now.*/
+    touchStart: boolean;
+    /** Touch canceled.*/
+    touchCancel: boolean;
+    /** Touched twice.*/
+    doubleTouch: boolean;
+    /** Double touching responce delay.*/
+    doubleTouchDelay: number;
+    /** Double touching responce radius in screen pixels.*/
+    doubleTouchRadius: number;
+    /** JavaScript mouse system event message. */
+    sys: TouchEventExt | null;
+}
 
 const LB_M = 0b0001;
 const RB_M = 0b0010;
@@ -15,12 +143,11 @@ const MB_M = 0b0100;
 let __skipFrames__ = 0;
 const MAX_SKIP_FRAMES_ON_BLACK = 15;
 
-const ISBLACK = (c) => !(c[0] || c[1] || c[2]);
-const NOTBLACK = (c) => c[0] || c[1] || c[2];
+const ISBLACK = (c: NumberArray3 | Uint8Array): boolean => !(c[0] || c[1] || c[2]);
+const NOTBLACK = (c: NumberArray3 | Uint8Array): boolean => !!(c[0] || c[1] || c[2]);
 
 /**
  * Stores current picking rgb color.
- * @private
  * @type {Array.<number>} - (exactly 3 entries)
  */
 let _currPickingColor = new Uint8Array(4);
@@ -28,7 +155,6 @@ let _tempCurrPickingColor = new Uint8Array(4);
 
 /**
  * Stores previous picked rgb color.
- * @private
  * @type {Array.<number>} - (exactly 3 entries)
  */
 let _prevPickingColor = new Uint8Array(4);
@@ -38,162 +164,148 @@ let _prevPickingColor = new Uint8Array(4);
  * @class
  * @param {Renderer} renderer - Renderer object, events that works for.
  */
-class RendererEvents extends Events {
-    constructor(renderer) {
-        super(EVENT_NAMES);
-
-        /**
-         * Assigned renderer.
-         * @public
-         * @type {Renderer}
-         */
+class RendererEvents extends Events<RendererEventsType> implements RendererEventsHandler {
+    /**
+     * Assigned renderer.
+     * @public
+     * @type {Renderer}
+     */
+    public renderer: Renderer;
+
+    /**
+     * Low level touch events handler.
+     * @protected
+     * @type {TouchHandler}
+     */
+    protected _touchHandler: TouchHandler;
+
+    /**
+     * Low level mouse events handler.
+     * @protected
+     * @type {MouseHandler}
+     */
+    protected _mouseHandler: MouseHandler;
+
+    /**
+     * Low level keyboard events handler.
+     * @protected
+     * @type {KeyboardHandler}
+     */
+    protected _keyboardHandler: KeyboardHandler;
+
+    protected _active: boolean;
+
+    public clickRadius: number;
+
+    /**
+     * Current mouse state.
+     * @public
+     * @type {IMouseState}
+     */
+    public mouseState: IMouseState;
+
+    /**
+     * Current touch state.
+     * @public
+     * @type {ITouchState}
+     */
+    public touchState: ITouchState;
+
+    protected _dblTchCoords: Vec2;
+    protected _oneTouchStart: boolean;
+    protected _dblTchBegins: number;
+    protected _mousestopThread: any | null;
+    protected _ldblClkBegins: number;
+    protected _rdblClkBegins: number;
+    protected _mdblClkBegins: number;
+    protected _lClkBegins: number;
+    protected _rClkBegins: number;
+    protected _mClkBegins: number;
+    protected _lclickX: number;
+    protected _lclickY: number;
+    protected _rclickX: number;
+    protected _rclickY: number;
+    protected _mclickX: number;
+    protected _mclickY: number;
+
+    constructor(renderer: Renderer) {
+
+        super(RENDERER_EVENTS);
+
         this.renderer = renderer;
 
-        /**
-         * Low level touch events handler.
-         * @private
-         * @type {input.TouchHandler}
-         */
-        this._touchHandler = new TouchHandler(renderer.handler.canvas);
-
-        /**
-         * Low level mouse events handler.
-         * @private
-         * @type {input.MouseHandler}
-         */
-        this._mouseHandler = new MouseHandler(renderer.handler.canvas);
-
-        /**
-         * Low level keyboard events handler.
-         * @private
-         * @type {input.KeyboardHandler}
-         */
+        this._touchHandler = new TouchHandler(renderer.handler.canvas!);
+
+        this._mouseHandler = new MouseHandler(renderer.handler.canvas!);
+
         this._keyboardHandler = new KeyboardHandler();
 
         this._active = true;
 
         this.clickRadius = 15;
 
-        /**
-         * Current mouse state.
-         * @public
-         * @enum {Object}
-         */
         this.mouseState = {
-            /** Current screen mouse X position. */
             clientX: 0,
-            /** Current screen mouse Y position. */
             clientY: 0,
-            /** Current viewport mouse X position. */
+            pos: new Vec2(),
             x: 0,
-            /** Current viewport mouse Y position. */
             y: 0,
-            /** Current mouse X position from 0 to 1 */
             nx: 0,
-            /** Current mouse Y position from 0 to 1 */
             ny: 0,
-            /** Previous mouse X position. */
             prev_x: 0,
-            /** Previous mouse Y position. */
             prev_y: 0,
-            /** Screen mouse position world direction. */
             direction: new Vec3(),
-            /** Left mouse button has stopped pushing down right now.*/
             leftButtonUp: false,
-            /** Right mouse button has stopped pushing down right now.*/
             rightButtonUp: false,
-            /** Middle mouse button has stopped pushing down right now.*/
             middleButtonUp: false,
-            /** Left mouse button has pushed now.*/
             leftButtonDown: false,
-            /** Right mouse button has pushed now.*/
             rightButtonDown: false,
-            /** Middle mouse button has pushed now.*/
             middleButtonDown: false,
-            /** Left mouse button is pushing.*/
             leftButtonHold: false,
-            /** Right mouse button is pushing.*/
             rightButtonHold: false,
-            /** Middle mouse button is pushing.*/
             middleButtonHold: false,
-            /** Left mouse button has clicked twice now.*/
             leftButtonDoubleClick: false,
-            /** Right mouse button has clicked twice now.*/
             rightButtonDoubleClick: false,
-            /** Middle mouse button has clicked twice now.*/
             middleButtonDoubleClick: false,
-            /** Left mouse button has clicked now. */
             leftButtonClick: false,
-            /** Right mouse button has clicked now. */
             rightButtonClick: false,
-            /** Middle mouse button has clicked now. */
             middleButtonClick: false,
-            /** Mouse is moving now. */
             moving: false,
-            /** Mouse has just stopped now. */
             justStopped: false,
-            /** Mose double click delay response time.*/
             doubleClickDelay: 500,
-            /** Mose click delay response time.*/
             clickDelay: 200,
-            /** Mouse wheel. */
             wheelDelta: 0,
-            /** JavaScript mouse system event message. */
             sys: null,
-            /** Current picking object. */
             pickingObject: null,
-            /** Renderer instanve. */
             renderer: renderer
         };
 
-        /**
-         * Current touch state.
-         * @public
-         * @enum {Object}
-         */
         this.touchState = {
-            /** Touching is moving now. */
             moving: false,
-            /** Touch has ended right now.*/
             touchEnd: false,
-            /** Touch has started right now.*/
             touchStart: false,
-            /** Touch canceled.*/
             touchCancel: false,
-            /** Touched twice.*/
             doubleTouch: false,
-            /** Double touching responce delay.*/
             doubleTouchDelay: 550,
-            /** Double touching responce radius in screen pixels.*/
             doubleTouchRadius: 10,
-            /** Current touch X - coordinate. */
+            clientX: 0,
+            clientY: 0,
+            pos: new Vec2(),
             x: 0,
-            /** Current touch Y - coordinate. */
             y: 0,
-            /** Current touch X - coordinate from 0 to 1 */
             nx: 0,
-            /** Current touch Y - coordinate from 0 to 1 */
             ny: 0,
-            /** Previous touch X coordinate. */
             prev_x: 0,
-            /** Previous touch Y coordinate. */
             prev_y: 0,
-            /** Screen touch position world direction. */
             direction: new Vec3(),
-            /** JavaScript touching system event message. */
             sys: null,
-            /** Current touched(picking) object. */
             pickingObject: null,
-            /** Renderer instanve. */
             renderer: renderer
         };
 
         this._dblTchCoords = new Vec2();
         this._oneTouchStart = false;
         this._dblTchBegins = 0;
-        /**
-         * @type {number}
-         */
         this._mousestopThread = null;
         this._ldblClkBegins = 0;
         this._rdblClkBegins = 0;
@@ -209,42 +321,42 @@ class RendererEvents extends Events {
         this._mclickY = 0;
     }
 
-    pointerEvent() {
+    public pointerEvent(): boolean {
         let ms = this.mouseState,
             ts = this.touchState;
         return (
             ms.moving ||
             ms.justStopped ||
-            ms.wheelDelta ||
             ts.moving ||
             ts.touchStart ||
-            ts.touchEnd
+            ts.touchEnd ||
+            ms.wheelDelta !== 0
         )
     }
 
-    get active() {
+    public get active(): boolean {
         return this._active;
     }
 
-    set active(act) {
-        this._active = act;
-        this._keyboardHandler.setActivity(act);
+    public set active(isActive: boolean) {
+        this._active = isActive;
+        this._keyboardHandler.setActivity(isActive);
     }
 
     /**
      * Used in render node frame.
      * @public
      */
-    handleEvents() {
+    public handleEvents() {
         if (this._active) {
-            this.mouseState.direction = this.renderer.activeCamera.unproject(
+            this.mouseState.direction = this.renderer.activeCamera!.unproject(
                 this.mouseState.x,
                 this.mouseState.y
             );
             //
-            // TODO: Replace in some other place with a thought that we do            
+            // TODO: Replace in some other place with a thought that we do
             // not need to make unproject when we do not make touching
-            this.touchState.direction = this.renderer.activeCamera.unproject(
+            this.touchState.direction = this.renderer.activeCamera!.unproject(
                 this.touchState.x,
                 this.touchState.y
             );
@@ -256,33 +368,19 @@ class RendererEvents extends Events {
         }
     }
 
-    /**
-     * Set render event callback.
-     * @public
-     * @param {string} name - Event name
-     * @param {eventCallback} callback - Callback function
-     * @param {number} [key] - Key code from og.input
-     * @param {*} sender - Callback context
-     * @param {number} [priority] - Event callback priority
-     */
-    on(name, p0, p1, p2, p3) {
+    public override on(name: string, p0: EventCallback | number, p1?: number | EventCallback, p2?: any, keyPriority?: number) {
         if (name === "keypress" || name === "charkeypress" || name === "keyfree") {
-            this._keyboardHandler.addEvent(name, p2, p1, p0, p3);
+            this._keyboardHandler.addEvent(name, p0 as number, p1 as EventCallback, p2, keyPriority);
         } else {
-            super.on(name, p0, p1, p2);
+            super.on(name, p0 as EventCallback, p1, p2);
         }
     }
 
-    /**
-     * TODO: DOESNT WORK!!!
-     * @param {any} name
-     * @param {any} callback
-     */
-    off(name, callback) {
+    public override off(name: string, p1?: EventCallback | number | null, p2?: EventCallback) {
         if (name === "keypress" || name === "charkeypress" || name === "keyfree") {
-            this._keyboardHandler.removeEvent(name, callback);
+            this._keyboardHandler.removeEvent(name, p1 as number, p2 as EventCallback);
         } else {
-            super.off(name, callback);
+            super.off(name, p1 as EventCallback);
         }
     }
 
@@ -292,11 +390,11 @@ class RendererEvents extends Events {
      * @param {number} keyCode - Key code
      * @return {boolean}
      */
-    isKeyPressed(keyCode) {
+    public isKeyPressed(keyCode: number): boolean {
         return this._keyboardHandler.isKeyPressed(keyCode);
     }
 
-    releaseKeys() {
+    public releaseKeys() {
         this._keyboardHandler.releaseKeys();
     }
 
@@ -304,7 +402,7 @@ class RendererEvents extends Events {
      * Renderer events initialization.
      * @public
      */
-    initialize() {
+    public initialize() {
         this._mouseHandler.setEvent("mouseup", this, this.onMouseUp);
         this._mouseHandler.setEvent("mousemove", this, this.onMouseMove);
         this._mouseHandler.setEvent("mousedown", this, this.onMouseDown);
@@ -319,16 +417,14 @@ class RendererEvents extends Events {
     }
 
     /**
-     * @private
+     * @protected
      */
-    onMouseWheel(event) {
-        this.mouseState.wheelDelta = event.wheelDelta;
+    protected onMouseWheel(event: MouseEventExt) {
+        this.mouseState.sys = event;
+        this.mouseState.wheelDelta = event.wheelDelta || 0;
     }
 
-    /**
-     * @protected
-     */
-    updateButtonsStates(buttons) {
+    public updateButtonsStates(buttons: number) {
         let ms = this.mouseState;
         if ((buttons & LB_M) && ms.leftButtonDown) {
             ms.leftButtonDown = true;
@@ -352,16 +448,13 @@ class RendererEvents extends Events {
         }
     }
 
-    /**
-     * @private
-     */
-    onMouseMove(event, sys) {
-        var ms = this.mouseState;
+    protected onMouseMove(sys: MouseEvent, event?: MouseHandlerEvent) {
+        let ms = this.mouseState;
         this.updateButtonsStates(sys.buttons);
-        ms.sys = event;
+        ms.sys = sys;
 
-        let ex = event.clientX,
-            ey = event.clientY,
+        let ex = event!.clientX,
+            ey = event!.clientY,
             r = this.clickRadius;
 
         if (Math.abs(this._lclickX - ex) >= r && Math.abs(this._lclickY - ey) >= r) {
@@ -379,20 +472,20 @@ class RendererEvents extends Events {
             this._mClkBegins = 0;
         }
 
-        if (ms.clientX === event.clientX && ms.clientY === event.clientY) {
+        if (ms.clientX === event!.clientX && ms.clientY === event!.clientY) {
             return;
         }
 
-        ms.clientX = event.clientX;
-        ms.clientY = event.clientY;
+        ms.clientX = event!.clientX;
+        ms.clientY = event!.clientY;
 
         let h = this.renderer.handler;
 
-        ms.x = event.clientX * h.pixelRatio;
-        ms.y = event.clientY * h.pixelRatio;
+        ms.pos.x = ms.x = event!.clientX * h.pixelRatio;
+        ms.pos.y = ms.y = event!.clientY * h.pixelRatio;
 
-        ms.nx = ms.x / h.canvas.width;
-        ms.ny = ms.y / h.canvas.height;
+        ms.nx = ms.x / h.canvas!.width;
+        ms.ny = ms.y / h.canvas!.height;
 
         ms.moving = true;
 
@@ -403,54 +496,50 @@ class RendererEvents extends Events {
         }, 100);
     }
 
-    onMouseLeave(event) {
-        this.dispatch(this.mouseleave, event);
+    protected onMouseLeave(sys: MouseEvent) {
+        this.mouseState.sys = sys;
+        this.dispatch((this as RendererEventsHandler).mouseleave, this.mouseState);
     }
 
-    onMouseEnter(event) {
-        this.dispatch(this.mouseenter, event);
+    protected onMouseEnter(sys: MouseEvent) {
+        this.mouseState.sys = sys;
+        this.dispatch((this as RendererEventsHandler).mouseenter, this.mouseState);
     }
 
-    /**
-     * @private
-     */
-    onMouseDown(event) {
-        if (event.button === input.MB_LEFT) {
+    protected onMouseDown(sys: MouseEvent, event?: MouseHandlerEvent) {
+        if (event!.button === input.MB_LEFT) {
             this._lClkBegins = window.performance.now();
-            this._lclickX = event.clientX;
-            this._lclickY = event.clientY;
-            this.mouseState.sys = event;
+            this._lclickX = event!.clientX;
+            this._lclickY = event!.clientY;
+            this.mouseState.sys = sys;
             this.mouseState.leftButtonDown = true;
-        } else if (event.button === input.MB_RIGHT) {
+        } else if (event!.button === input.MB_RIGHT) {
             this._rClkBegins = window.performance.now();
-            this._rclickX = event.clientX;
-            this._rclickY = event.clientY;
-            this.mouseState.sys = event;
+            this._rclickX = event!.clientX;
+            this._rclickY = event!.clientY;
+            this.mouseState.sys = sys;
             this.mouseState.rightButtonDown = true;
-        } else if (event.button === input.MB_MIDDLE) {
+        } else if (event!.button === input.MB_MIDDLE) {
             this._mClkBegins = window.performance.now();
-            this._mclickX = event.clientX;
-            this._mclickY = event.clientY;
-            this.mouseState.sys = event;
+            this._mclickX = event!.clientX;
+            this._mclickY = event!.clientY;
+            this.mouseState.sys = sys;
             this.mouseState.middleButtonDown = true;
         }
     }
 
-    /**
-     * @private
-     */
-    onMouseUp(event) {
-        var ms = this.mouseState;
-        ms.sys = event;
-        var t = window.performance.now();
+    protected onMouseUp(sys: MouseEvent, event?: MouseHandlerEvent) {
+        let ms = this.mouseState;
+        ms.sys = sys;
+        let t = window.performance.now();
 
-        if (event.button === input.MB_LEFT) {
+        if (event!.button === input.MB_LEFT) {
             ms.leftButtonDown = false;
             ms.leftButtonUp = true;
 
             if (
-                Math.abs(this._lclickX - event.clientX) < this.clickRadius &&
-                Math.abs(this._lclickY - event.clientY) < this.clickRadius &&
+                Math.abs(this._lclickX - event!.clientX) < this.clickRadius &&
+                Math.abs(this._lclickY - event!.clientY) < this.clickRadius &&
                 t - this._lClkBegins <= ms.clickDelay
             ) {
                 if (this._ldblClkBegins) {
@@ -466,13 +555,13 @@ class RendererEvents extends Events {
                 ms.leftButtonClick = true;
                 this._lClkBegins = 0;
             }
-        } else if (event.button === input.MB_RIGHT) {
+        } else if (event!.button === input.MB_RIGHT) {
             ms.rightButtonDown = false;
             ms.rightButtonUp = true;
 
             if (
-                Math.abs(this._rclickX - event.clientX) < this.clickRadius &&
-                Math.abs(this._rclickY - event.clientY) < this.clickRadius &&
+                Math.abs(this._rclickX - event!.clientX) < this.clickRadius &&
+                Math.abs(this._rclickY - event!.clientY) < this.clickRadius &&
                 t - this._rClkBegins <= ms.clickDelay
             ) {
                 if (this._rdblClkBegins) {
@@ -488,17 +577,17 @@ class RendererEvents extends Events {
                 ms.rightButtonClick = true;
                 this._rClkBegins = 0;
             }
-        } else if (event.button === input.MB_MIDDLE) {
+        } else if (event!.button === input.MB_MIDDLE) {
             ms.middleButtonDown = false;
             ms.middleButtonUp = true;
 
             if (
-                Math.abs(this._mclickX - event.clientX) < this.clickRadius &&
-                Math.abs(this._mclickY - event.clientY) < this.clickRadius &&
+                Math.abs(this._mclickX - event!.clientX) < this.clickRadius &&
+                Math.abs(this._mclickY - event!.clientY) < this.clickRadius &&
                 t - this._mClkBegins <= ms.clickDelay
             ) {
                 if (this._mdblClkBegins) {
-                    var deltatime = window.performance.now() - this._mdblClkBegins;
+                    let deltatime = window.performance.now() - this._mdblClkBegins;
                     if (deltatime <= ms.doubleClickDelay) {
                         ms.middleButtonDoubleClick = true;
                     }
@@ -513,23 +602,20 @@ class RendererEvents extends Events {
         }
     }
 
-    /**
-     * @private
-     */
-    onTouchStart(event) {
-        var ts = this.touchState;
+    protected onTouchStart(event: TouchEventExt) {
+        let ts = this.touchState;
         ts.sys = event;
 
-        ts.clientX = event.touches.item(0).clientX - event.offsetLeft;
-        ts.clientY = event.touches.item(0).clientY - event.offsetTop;
+        ts.clientX = event.touches.item(0)!.clientX - event.offsetLeft;
+        ts.clientY = event.touches.item(0)!.clientY - event.offsetTop;
 
         let h = this.renderer.handler;
 
-        ts.x = ts.clientX * h.pixelRatio;
-        ts.y = ts.clientY * h.pixelRatio;
+        ts.pos.x = ts.x = ts.clientX * h.pixelRatio;
+        ts.pos.y = ts.y = ts.clientY * h.pixelRatio;
 
-        ts.nx = ts.x / h.canvas.width;
-        ts.ny = ts.y / h.canvas.height;
+        ts.nx = ts.x / h.canvas!.width;
+        ts.ny = ts.y / h.canvas!.height;
         ts.prev_x = ts.x;
         ts.prev_y = ts.y;
         ts.touchStart = true;
@@ -544,10 +630,10 @@ class RendererEvents extends Events {
     }
 
     /**
-     * @private
+     * @protected
      */
-    onTouchEnd(event) {
-        var ts = this.touchState;
+    protected onTouchEnd(event: TouchEventExt) {
+        let ts = this.touchState;
         ts.sys = event;
         ts.touchEnd = true;
 
@@ -557,7 +643,7 @@ class RendererEvents extends Events {
 
             if (this._oneTouchStart) {
                 if (this._dblTchBegins) {
-                    var deltatime = window.performance.now() - this._dblTchBegins;
+                    let deltatime = window.performance.now() - this._dblTchBegins;
                     if (deltatime <= ts.doubleTouchDelay) {
                         ts.doubleTouch = true;
                     }
@@ -569,46 +655,38 @@ class RendererEvents extends Events {
         }
     }
 
-    /**
-     * @private
-     */
-    onTouchCancel(event) {
-        var ts = this.touchState;
+    protected onTouchCancel(event: TouchEventExt) {
+        let ts = this.touchState;
         ts.sys = event;
         ts.touchCancel = true;
     }
 
-    /**
-     * @private
-     */
-    onTouchMove(event) {
-        var ts = this.touchState;
-        ts.clientX = event.touches.item(0).clientX - event.offsetLeft;
-        ts.clientY = event.touches.item(0).clientY - event.offsetTop;
+    protected onTouchMove(event: TouchEventExt) {
+        let ts = this.touchState;
+
+        ts.clientX = event.touches.item(0)!.clientX - event.offsetLeft;
+        ts.clientY = event.touches.item(0)!.clientY - event.offsetTop;
 
-        var h = this.renderer.handler;
+        let h = this.renderer.handler;
 
         ts.x = ts.clientX * h.pixelRatio;
         ts.y = ts.clientY * h.pixelRatio;
 
-        ts.nx = ts.x / h.canvas.width;
-        ts.ny = ts.y / h.canvas.height;
+        ts.nx = ts.x / h.canvas!.width;
+        ts.ny = ts.y / h.canvas!.height;
 
         ts.sys = event;
         ts.moving = true;
 
-        var dX = ts.x - ts.prev_x
-        var dY = ts.y - ts.prev_y
+        let dX = ts.x - ts.prev_x
+        let dY = ts.y - ts.prev_y
         if (Math.abs(dX) > 9 || Math.abs(dY) > 9) {
             this._dblTchBegins = 0;
             this._oneTouchStart = false;
         }
     }
 
-    /**
-     * @private
-     */
-    entityPickingEvents() {
+    protected entityPickingEvents() {
         let ts = this.touchState,
             ms = this.mouseState;
 
@@ -642,7 +720,7 @@ class RendererEvents extends Events {
             ms.pickingObject = null;
             ts.pickingObject = null;
 
-            let co = r.getPickingObjectArr(c);
+            let co = r.getPickingObjectArr<any>(c);
 
             ms.pickingObject = co;
             ts.pickingObject = co;
@@ -652,7 +730,7 @@ class RendererEvents extends Events {
 
                 //current is black
                 if (ISBLACK(c)) {
-                    let po = r.getPickingObjectArr(p);
+                    let po = r.getPickingObjectArr<any>(p);
                     if (po) {
                         let pe = po.rendererEvents;
                         ms.pickingObject = po;
@@ -665,7 +743,7 @@ class RendererEvents extends Events {
 
                     //previous is not black
                     if (NOTBLACK(p)) {
-                        let po = r.getPickingObjectArr(p);
+                        let po = r.getPickingObjectArr<any>(p);
                         if (po) {
                             let pe = po.rendererEvents;
                             ms.pickingObject = po;
@@ -687,10 +765,8 @@ class RendererEvents extends Events {
         }
     }
 
-    /**
-     * @private
-     */
-    handleMouseEvents() {
+    protected handleMouseEvents() {
+        let _this = this as RendererEventsHandler;
         let ms = this.mouseState;
         let po = ms.pickingObject,
             pe = null;
@@ -700,7 +776,7 @@ class RendererEvents extends Events {
                 pe = po.rendererEvents;
                 pe && pe.dispatch(pe.lclick, ms);
             }
-            this.dispatch(this.lclick, ms);
+            this.dispatch(_this.lclick, ms);
             ms.leftButtonClick = false;
         }
 
@@ -709,7 +785,7 @@ class RendererEvents extends Events {
                 pe = po.rendererEvents;
                 pe && pe.dispatch(pe.rclick, ms);
             }
-            this.dispatch(this.rclick, ms);
+            this.dispatch(_this.rclick, ms);
             ms.rightButtonClick = false;
         }
 
@@ -718,7 +794,7 @@ class RendererEvents extends Events {
                 pe = po.rendererEvents;
                 pe && pe.dispatch(pe.mclick, ms);
             }
-            this.dispatch(this.mclick, ms);
+            this.dispatch(_this.mclick, ms);
             ms.middleButtonClick = false;
         }
 
@@ -728,14 +804,14 @@ class RendererEvents extends Events {
                     pe = po.rendererEvents;
                     pe && pe.dispatch(pe.lhold, ms);
                 }
-                this.dispatch(this.lhold, ms);
+                this.dispatch(_this.lhold, ms);
             } else {
                 ms.leftButtonHold = true;
                 if (po) {
                     pe = po.rendererEvents;
                     pe && pe.dispatch(pe.ldown, ms);
                 }
-                this.dispatch(this.ldown, ms);
+                this.dispatch(_this.ldown, ms);
             }
         }
 
@@ -745,14 +821,14 @@ class RendererEvents extends Events {
                     pe = po.rendererEvents;
                     pe && pe.dispatch(pe.rhold, ms);
                 }
-                this.dispatch(this.rhold, ms);
+                this.dispatch(_this.rhold, ms);
             } else {
                 ms.rightButtonHold = true;
                 if (po) {
                     pe = po.rendererEvents;
                     pe && pe.dispatch(pe.rdown, ms);
                 }
-                this.dispatch(this.rdown, ms);
+                this.dispatch(_this.rdown, ms);
             }
         }
 
@@ -762,14 +838,14 @@ class RendererEvents extends Events {
                     pe = po.rendererEvents;
                     pe && pe.dispatch(pe.mhold, ms);
                 }
-                this.dispatch(this.mhold, ms);
+                this.dispatch(_this.mhold, ms);
             } else {
                 ms.middleButtonHold = true;
                 if (po) {
                     pe = po.rendererEvents;
                     pe && pe.dispatch(pe.mdown, ms);
                 }
-                this.dispatch(this.mdown, ms);
+                this.dispatch(_this.mdown, ms);
             }
         }
 
@@ -778,7 +854,7 @@ class RendererEvents extends Events {
                 pe = po.rendererEvents;
                 pe && pe.dispatch(pe.lup, ms);
             }
-            this.dispatch(this.lup, ms);
+            this.dispatch(_this.lup, ms);
             ms.leftButtonUp = false;
             ms.leftButtonHold = false;
         }
@@ -788,7 +864,7 @@ class RendererEvents extends Events {
                 pe = po.rendererEvents;
                 pe && pe.dispatch(pe.rup, ms);
             }
-            this.dispatch(this.rup, ms);
+            this.dispatch(_this.rup, ms);
             ms.rightButtonUp = false;
             ms.rightButtonHold = false;
         }
@@ -798,7 +874,7 @@ class RendererEvents extends Events {
                 pe = po.rendererEvents;
                 pe && pe.dispatch(pe.mup, ms);
             }
-            this.dispatch(this.mup, ms);
+            this.dispatch(_this.mup, ms);
             ms.middleButtonUp = false;
             ms.middleButtonHold = false;
         }
@@ -808,7 +884,7 @@ class RendererEvents extends Events {
                 pe = po.rendererEvents;
                 pe && pe.dispatch(pe.ldblclick, ms);
             }
-            this.dispatch(this.ldblclick, ms);
+            this.dispatch(_this.ldblclick, ms);
             ms.leftButtonDoubleClick = false;
         }
 
@@ -817,7 +893,7 @@ class RendererEvents extends Events {
                 pe = po.rendererEvents;
                 pe && pe.dispatch(pe.rdblclick, ms);
             }
-            this.dispatch(this.rdblclick, ms);
+            this.dispatch(_this.rdblclick, ms);
             ms.rightButtonDoubleClick = false;
         }
 
@@ -826,7 +902,7 @@ class RendererEvents extends Events {
                 pe = po.rendererEvents;
                 pe && pe.dispatch(pe.mdblclick, ms);
             }
-            this.dispatch(this.mdblclick, ms);
+            this.dispatch(_this.mdblclick, ms);
             ms.middleButtonDoubleClick = false;
         }
 
@@ -835,7 +911,7 @@ class RendererEvents extends Events {
                 pe = po.rendererEvents;
                 pe && pe.dispatch(pe.mousewheel, ms);
             }
-            this.dispatch(this.mousewheel, ms);
+            this.dispatch(_this.mousewheel, ms);
         }
 
         if (ms.moving) {
@@ -843,45 +919,46 @@ class RendererEvents extends Events {
                 pe = po.rendererEvents;
                 pe && pe.dispatch(pe.mousemove, ms);
             }
-            this.dispatch(this.mousemove, ms);
+            this.dispatch(_this.mousemove, ms);
             ms.prev_x = ms.x;
             ms.prev_y = ms.y;
         }
 
         if (ms.justStopped) {
-            this.dispatch(this.mousestop, ms);
+            this.dispatch(_this.mousestop, ms);
         }
     }
 
     /**
-     * @private
+     * @protected
      */
-    handleTouchEvents() {
+    protected handleTouchEvents() {
+        let _this = this as RendererEventsHandler;
+
         let ts = this.touchState;
 
         let tpo = ts.pickingObject,
             tpe = null;
 
         if (ts.touchCancel) {
-            this.dispatch(this.touchcancel, ts);
+            this.dispatch(_this.touchcancel, ts);
             ts.touchCancel = false;
         }
 
         if (ts.touchStart) {
             let r = this.renderer;
 
-            r.pickingFramebuffer.activate();
-            r.pickingFramebuffer.readPixels(_currPickingColor, ts.nx, 1.0 - ts.ny, 1);
-            r.pickingFramebuffer.deactivate();
+            r.pickingFramebuffer!.activate();
+            r.pickingFramebuffer!.readPixels(_currPickingColor, ts.nx, 1.0 - ts.ny, 1);
+            r.pickingFramebuffer!.deactivate();
 
-            let c = _currPickingColor;
-            let co = r.getPickingObjectArr(c);
+            let co = r.getPickingObjectArr<any>(_currPickingColor);
             tpo = ts.pickingObject = co;
             if (tpo) {
                 tpe = tpo.rendererEvents;
                 tpe && tpe.dispatch(tpe.touchstart, ts);
             }
-            this.dispatch(this.touchstart, ts);
+            this.dispatch(_this.touchstart, ts);
             ts.touchStart = false;
         }
 
@@ -890,7 +967,7 @@ class RendererEvents extends Events {
                 tpe = tpo.rendererEvents;
                 tpe && tpe.dispatch(tpe.doubletouch, ts);
             }
-            this.dispatch(this.doubletouch, ts);
+            this.dispatch(_this.doubletouch, ts);
             ts.doubleTouch = false;
         }
 
@@ -899,7 +976,7 @@ class RendererEvents extends Events {
                 tpe = tpo.rendererEvents;
                 tpe && tpe.dispatch(tpe.touchend, ts);
             }
-            this.dispatch(this.touchend, ts);
+            this.dispatch(_this.touchend, ts);
             ts.x = 0;
             ts.y = 0;
             ts.touchEnd = false;
@@ -910,14 +987,14 @@ class RendererEvents extends Events {
                 tpe = tpo.rendererEvents;
                 tpe && tpe.dispatch(tpe.touchmove, ts);
             }
-            this.dispatch(this.touchmove, ts);
+            this.dispatch(_this.touchmove, ts);
             ts.prev_x = ts.x;
             ts.prev_y = ts.y;
         }
     }
 }
 
-const EVENT_NAMES = [
+const RENDERER_EVENTS: RendererEventsType = [
     /**
      * Triggered before scene frame is rendered(before render nodes).
      * @event og.RendererEvents#draw
@@ -1105,4 +1182,4 @@ const EVENT_NAMES = [
     "touchenter"
 ];
 
-export { RendererEvents };
+export {RendererEvents};