@nativescript/canvas 1.0.0-alpha.8 → 1.0.0

package/Canvas/common.js

@@ -8,14 +8,37 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 import { CSSType, PercentLength, View, Screen, GestureStateTypes, Utils, Application, Property, booleanConverter } from '@nativescript/core';
-import { TouchList } from '../common';
-const WEB_GESTURE_EVENTS = ['touchmove', 'touchstart', 'touchcancel', 'touchend'];
+export class TouchEvent {
+    constructor(name, init) {
+        this.type = name;
+        if (init && typeof init === 'object') {
+            Object.keys(init).forEach(key => {
+                this[key] = init[key];
+            });
+        }
+    }
+    preventDefault() { }
+    stopPropagation() { }
+}
+export class PointerEvent {
+    constructor(name, init) {
+        this.type = name;
+        if (init && typeof init === 'object') {
+            Object.keys(init).forEach(key => {
+                this[key] = init[key];
+            });
+        }
+    }
+    preventDefault() { }
+    stopPropagation() { }
+}
+const WEB_GESTURE_EVENTS = ['touchmove', 'touchstart', 'touchcancel', 'touchend', 'change', 'pointerup', 'pointerdown', 'pointermove', 'pointercancel'];
 export const ignorePixelScalingProperty = new Property({
     name: 'ignorePixelScaling',
     defaultValue: false,
     valueConverter: booleanConverter
 });
-import { observe as gestureObserve } from '@nativescript-community/gesturehandler/gestures_override';
+let pointerId = 0;
 let CanvasBase = class CanvasBase extends View {
     constructor() {
         super();
@@ -25,31 +48,10 @@ let CanvasBase = class CanvasBase extends View {
         this._previousX = 0;
         this._previousY = 0;
         this._previousPinchDistance = 0;
+        this._previousPointerCount = 0;
+        this._pointers = [];
         this._classList = new Set();
     }
-    __ensureGestures() {
-        if (!this._gesturesRegistered) {
-            this._gesturesRegistered = true;
-            this.on('touch, pan, pinch', this._touchEvent, this);
-        }
-    }
-    __unregisterGestures() {
-        if (this._gesturesRegistered) {
-            this._gesturesRegistered = false;
-            this.off('touch, pan, pinch', this._touchEvent, this);
-        }
-    }
-    _observe(type, callback, thisArg) {
-        if (!this._gestureObservers[type]) {
-            this._gestureObservers[type] = [];
-        }
-        this._gestureObservers[type].push(gestureObserve(this, type, callback, thisArg));
-        if (global.isAndroid) {
-            if (this.isLoaded && !this.touchListenerIsSet) {
-                this.setOnTouchListener();
-            }
-        }
-    }
     addEventListener(arg, callback, thisArg) {
         super.addEventListener(arg, callback, thisArg);
         if (WEB_GESTURE_EVENTS.indexOf(arg) !== -1) {
@@ -125,182 +127,6 @@ let CanvasBase = class CanvasBase extends View {
         }
         return null;
     }
-    _touchEvent(event) {
-        if (event.eventName === 'touch') {
-            switch (event.action) {
-                case 'down':
-                    // ensure we dont have multiple touchstart
-                    // on the web seems to be called only on first touch
-                    if (!this.__touchStart) {
-                        this.__touchStart = event.getActivePointers()[0];
-                        this._emitEvent('touchstart', event);
-                    }
-                    break;
-                case 'up':
-                    if (event.getPointerCount() === 1 && this.__touchStart) {
-                        this._emitEvent('touchend', event);
-                        this._isPinching = false;
-                        this.__touchStart = undefined;
-                    }
-                    break;
-                case 'cancel':
-                    this._emitEvent('touchcancel', event);
-                    this.__touchStart = undefined;
-                    break;
-                case 'move':
-                    // NOOP
-                    break;
-                default:
-                    break;
-            }
-        }
-        else if (event.eventName === 'pinch') {
-            if (!this._isPinching && event.getPointerCount() >= 2 && (event.state === GestureStateTypes.began || event.state === GestureStateTypes.changed)) {
-                this._previousPinchDistance = 0;
-                this._isPinching = true;
-            }
-            if (this._isPinching) {
-                this._emitEvent('touchmove:pinch', event);
-            }
-            if (event.state === GestureStateTypes.ended || event.state === GestureStateTypes.cancelled) {
-                this._isPinching = false;
-            }
-        }
-        else if (event.eventName === 'pan') {
-            if (this._isPinching) {
-                return;
-            }
-            if (event.state === GestureStateTypes.began || event.state === GestureStateTypes.changed) {
-                this._emitEvent('touchmove', event);
-            }
-        }
-    }
-    _getTouchEvent(name, event, target) {
-        const pointers = new TouchList();
-        let scale = 1;
-        let activePointer;
-        if (name === 'touchmove') {
-            name = 'touchmove';
-            activePointer = {
-                clientX: event.getX() * scale,
-                clientY: event.getY() * scale,
-                force: 0.0,
-                identifier: 0,
-                pageX: event.getX() * scale,
-                pageY: event.getY() * scale,
-                radiusX: 0,
-                radiusY: 0,
-                rotationAngle: 0,
-                screenX: event.getX() * scale,
-                screenY: event.getY() * scale,
-                target
-            };
-            const count = event.getAllPointers().length;
-            for (let i = 0; i < count; i++) {
-                const point = event.getAllPointers()[i];
-                pointers.push({
-                    clientX: point.getX(),
-                    clientY: point.getY(),
-                    force: 0.0,
-                    identifier: i,
-                    pageX: point.getX(),
-                    pageY: point.getY(),
-                    radiusX: 0,
-                    radiusY: 0,
-                    rotationAngle: 0,
-                    screenX: point.getX(),
-                    screenY: point.getY(),
-                    target,
-                });
-            }
-            /* mouse */
-            // pointers.push({
-            // 	// * SCALE ??
-            // 	clientX: x,
-            // 	clientY: y,
-            // 	force: 0.0,
-            // 	identifier: 0,
-            // 	pageX: x,
-            // 	pageY: y,
-            // 	radiusX: 0,
-            // 	radiusY: 0,
-            // 	rotationAngle: 0,
-            // 	screenX: x,
-            // 	screenY: y,
-            // 	target,
-            // });
-            this._previousX = event.deltaX;
-            this._previousY = event.deltaY;
-        }
-        else if (name === 'touchmove:pinch') {
-            const dx = event.extraData.positions[2] - event.extraData.positions[0];
-            const dy = event.extraData.positions[3] - event.extraData.positions[1];
-            let delta = 0;
-            var distance = Math.sqrt(dx * dx + dy * dy);
-            if (this._previousPinchDistance) {
-                delta = this._previousPinchDistance - distance;
-            }
-            this._previousPinchDistance = distance;
-            name = 'wheel';
-            const x = event.getFocusX();
-            const y = event.getFocusY();
-            const scale = event.scale;
-            // mouse event
-            let data = {
-                deltaMode: 0,
-                clientX: x,
-                clientY: y,
-                screenX: x,
-                screenY: x,
-                deltaX: 0,
-                deltaY: delta,
-                deltaZ: 0,
-            };
-            return Object.assign(new TouchEvent(name), { eventName: name, object: null, defaultPrevented: false, cancelable: false, altKey: false, ctrlKey: true, metaKey: false, shiftKey: false, target }, data);
-        }
-        else {
-            const count = event.getAllPointers().length;
-            const point = event.getActivePointers()[0];
-            if (!point) {
-                return null;
-            }
-            // mouse event
-            activePointer = {
-                clientX: point.getX() * scale,
-                clientY: point.getY() * scale,
-                force: 0.0,
-                identifier: 0,
-                pageX: point.getX() * scale,
-                pageY: point.getY() * scale,
-                radiusX: 0,
-                radiusY: 0,
-                rotationAngle: 0,
-                screenX: point.getX() * scale,
-                screenY: point.getY() * scale,
-            };
-            for (let i = 0; i < count; i++) {
-                const point = event.getAllPointers()[i];
-                pointers.push({
-                    clientX: point.getX(),
-                    clientY: point.getY(),
-                    force: 0.0,
-                    identifier: i,
-                    pageX: point.getX(),
-                    pageY: point.getY(),
-                    radiusX: 0,
-                    radiusY: 0,
-                    rotationAngle: 0,
-                    screenX: point.getX(),
-                    screenY: point.getY(),
-                    target,
-                });
-            }
-        }
-        return Object.assign(new TouchEvent(name), Object.assign({ eventName: name, defaultPrevented: false, cancelable: false, altKey: false, changedTouches: pointers, ctrlKey: false, metaKey: false, shiftKey: false, targetTouches: pointers, touches: pointers, target }, activePointer));
-    }
-    _emitEvent(name, event) {
-        this.notify(this._getTouchEvent(name, event, this));
-    }
     _readyEvent() {
         this.notify({
             eventName: 'ready',
@@ -368,6 +194,391 @@ let CanvasBase = class CanvasBase extends View {
             return 0;
         }
     }
+    setPointerCapture() { }
+    releasePointerCapture() { }
+    __ensureGestures() {
+        if (!this._gesturesRegistered) {
+            this._gesturesRegistered = true;
+            this.on(global.isAndroid ? 'touch, pan, pinch' : 'touch, pan, pinch', this._touchEvent, this);
+        }
+    }
+    __unregisterGestures() {
+        if (this._gesturesRegistered) {
+            this._gesturesRegistered = false;
+            this.off(global.isAndroid ? 'touch, pan' : 'touch, pan, pinch', this._touchEvent, this);
+        }
+    }
+    _pointerCountFromEvent(event) {
+        var _a, _b, _c, _d;
+        let count = 0;
+        if (global.isIOS) {
+            count = (_a = event.ios.numberOfTouches) !== null && _a !== void 0 ? _a : 0;
+        }
+        else if (global.isAndroid) {
+            count = (_d = (_c = (_b = (event.android.current || event.android.initial || event.android)).getPointerCount) === null || _c === void 0 ? void 0 : _c.call(_b)) !== null && _d !== void 0 ? _d : 0;
+        }
+        return count;
+    }
+    _positionsFromEvent(event) {
+        var _a, _b, _c, _d;
+        const positions = [];
+        if (global.isIOS) {
+            const set = (_a = event === null || event === void 0 ? void 0 : event.ios) === null || _a === void 0 ? void 0 : _a.touches;
+            if (((_b = event === null || event === void 0 ? void 0 : event.ios) === null || _b === void 0 ? void 0 : _b.touches) instanceof NSSet) {
+                const objects = set.allObjects;
+                for (let i = 0; i < set.count; i++) {
+                    const touch = objects.objectAtIndex(i);
+                    const point = touch.locationInView(touch.view);
+                    positions.push(point.x, point.y);
+                }
+            }
+            else {
+                const count = event.ios.numberOfTouches;
+                const rec = event.ios;
+                for (let i = 0; i < count; i++) {
+                    const point = rec.locationOfTouchInView(i, rec.view);
+                    positions.push(point.x, point.y);
+                }
+            }
+        }
+        else if (global.isAndroid) {
+            const motionEvent = (_d = (_c = event.android) === null || _c === void 0 ? void 0 : _c.current) !== null && _d !== void 0 ? _d : event.android;
+            const count = motionEvent.getPointerCount();
+            const coords = new android.view.MotionEvent.PointerCoords();
+            for (let i = 0; i < count; i++) {
+                motionEvent.getPointerCoords(i, coords);
+                positions.push(coords.x / Screen.mainScreen.scale, coords.y / Screen.mainScreen.scale);
+                coords.clear();
+            }
+        }
+        return positions;
+    }
+    _touchEvent(event) {
+        let extraData;
+        let hasPointerDown = false;
+        let hasTouchStart = false;
+        let hasPointerMove = false;
+        let hasTouchMove = false;
+        let hasPointerUp = false;
+        let hasTouchEnd = false;
+        let hasPointerCancel = false;
+        let hasTouchCancel = false;
+        if (event.eventName === 'touch') {
+            switch (event.action) {
+                case 'down':
+                    hasPointerDown = this.hasListeners('pointerdown');
+                    hasTouchStart = this.hasListeners('touchstart');
+                    if (hasPointerDown || hasTouchStart) {
+                        const numberOfPointers = event.getPointerCount();
+                        const positions = this._positionsFromEvent(event);
+                        const x = event.getX();
+                        const y = event.getY();
+                        extraData = {
+                            numberOfPointers,
+                            positions,
+                            x,
+                            y
+                        };
+                    }
+                    if (hasPointerDown && this._previousPointerCount !== extraData.numberOfPointers) {
+                        this._previousPointerCount = extraData.numberOfPointers;
+                        pointerId++;
+                        this._pointers[this._previousPointerCount - 1] = {
+                            id: pointerId,
+                            coords: {
+                                x: extraData.x,
+                                y: extraData.y
+                            }
+                        };
+                        this.notify(Object.assign(Object.assign({}, this._createPointerEvent('pointerdown', extraData)), { pointerId: pointerId }));
+                    }
+                    if (hasTouchStart) {
+                        this.notify(this._createTouchEvent('touchstart', extraData));
+                    }
+                    break;
+                case 'up':
+                    hasPointerUp = this.hasListeners('pointerup');
+                    hasTouchEnd = this.hasListeners('touchend');
+                    if (hasPointerUp || hasTouchEnd) {
+                        const numberOfPointers = event.getPointerCount();
+                        const positions = this._positionsFromEvent(event);
+                        const x = event.getX();
+                        const y = event.getY();
+                        extraData = {
+                            numberOfPointers,
+                            positions,
+                            x,
+                            y
+                        };
+                    }
+                    if (hasPointerUp) {
+                        this._previousPointerCount -= extraData.numberOfPointers;
+                        for (let i = 0; i < extraData.numberOfPointers; i++) {
+                            const x = extraData.positions[i];
+                            const y = extraData.positions[i + 1];
+                            this.notify(Object.assign(Object.assign({}, this._createPointerEvent('pointerup', Object.assign(Object.assign({}, extraData), { x, y }))), { pointerId: this._pointers[i].id }));
+                        }
+                    }
+                    if (hasTouchEnd) {
+                        this.notify(this._createTouchEvent('touchend', extraData));
+                    }
+                    break;
+                case 'cancel':
+                    hasPointerCancel = this.hasListeners('pointercancel');
+                    hasTouchCancel = this.hasListeners('touchcancel');
+                    if (hasPointerCancel || hasTouchCancel) {
+                        const numberOfPointers = event.getPointerCount();
+                        const positions = this._positionsFromEvent(event);
+                        const x = event.getX();
+                        const y = event.getY();
+                        extraData = {
+                            numberOfPointers,
+                            positions,
+                            x,
+                            y
+                        };
+                    }
+                    if (hasPointerCancel) {
+                        if (global.isAndroid) {
+                            this._previousPointerCount -= extraData.numberOfPointers;
+                        }
+                        else if (global.isIOS) {
+                            this._previousPointerCount -= 1;
+                        }
+                        for (let i = 0; i < extraData.numberOfPointers; i++) {
+                            const x = extraData.positions[i];
+                            const y = extraData.positions[i + 1];
+                            this.notify(Object.assign(Object.assign({}, this._createPointerEvent('pointercancel', Object.assign(Object.assign({}, extraData), { x, y }))), { pointerId: this._pointers[i].id }));
+                        }
+                    }
+                    if (hasTouchCancel) {
+                        this.notify(this._createTouchEvent('touchcancel', extraData));
+                    }
+                    break;
+                case 'move':
+                    if (this._isPinching && global.isAndroid) {
+                        const numberOfPointers = this._pointerCountFromEvent(event);
+                        hasPointerMove = this.hasListeners('pointermove');
+                        hasTouchMove = this.hasListeners('touchmove');
+                        let data = {};
+                        if (hasPointerMove || hasTouchMove) {
+                            const positions = this._positionsFromEvent(event);
+                            extraData = {
+                                numberOfPointers,
+                                positions,
+                                x: positions[0],
+                                y: positions[1]
+                            };
+                            const dx = extraData.positions[2] - extraData.positions[0];
+                            const dy = extraData.positions[3] - extraData.positions[1];
+                            let delta = 0;
+                            var distance = Math.sqrt(dx * dx + dy * dy);
+                            if (this._previousPinchDistance) {
+                                delta = this._previousPinchDistance - distance;
+                            }
+                            this._previousPinchDistance = distance;
+                            const x = dx; //event.getFocusX();
+                            const y = dy; //event.getFocusY();
+                            const scale = event.scale;
+                            data = {
+                                deltaMode: 0,
+                                clientX: x,
+                                clientY: y,
+                                screenX: x,
+                                screenY: y,
+                                deltaX: 0,
+                                deltaY: delta,
+                                deltaZ: 0,
+                            };
+                        }
+                        if (hasPointerMove) {
+                            const count = extraData.numberOfPointers;
+                            const positions = extraData.positions;
+                            for (let i = 0; i < count; i++) {
+                                let x = positions[i] - extraData.x;
+                                let y = positions[i + 1] - extraData.y;
+                                this.notify(Object.assign(Object.assign({}, this._createPointerEvent('pointermove', Object.assign(Object.assign({}, extraData), { x, y }))), { pointerId: this._pointers[i].id }));
+                            }
+                        }
+                        if (hasTouchMove) {
+                            this.notify(this._createTouchEvent('touchmove', Object.assign(Object.assign({}, extraData), { data })));
+                        }
+                    }
+                    break;
+                default:
+                    break;
+            }
+        }
+        else if (event.eventName === 'pinch') {
+            if (global.isAndroid) {
+                if ((event.state === GestureStateTypes.began || event.state === GestureStateTypes.changed)) {
+                    this._isPinching = true;
+                    this._previousPinchDistance = 0;
+                }
+                if (event.state === GestureStateTypes.ended || event.state === GestureStateTypes.cancelled) {
+                    this._isPinching = false;
+                }
+            }
+            else {
+                const numberOfPointers = this._pointerCountFromEvent(event);
+                if (!this._isPinching && numberOfPointers >= 2 && (event.state === GestureStateTypes.began || event.state === GestureStateTypes.changed)) {
+                    this._previousPinchDistance = 0;
+                    this._isPinching = true;
+                }
+                if (event.state === GestureStateTypes.ended || event.state === GestureStateTypes.cancelled) {
+                    this._isPinching = false;
+                }
+                if (this._isPinching && numberOfPointers >= 2) {
+                    if (global.isIOS) {
+                        hasPointerMove = this.hasListeners('pointermove');
+                        hasTouchMove = this.hasListeners('touchmove');
+                        let data = {};
+                        let delta = 0;
+                        if (hasPointerMove || hasTouchMove) {
+                            const positions = this._positionsFromEvent(event);
+                            extraData = {
+                                numberOfPointers,
+                                positions,
+                                x: positions[0],
+                                y: positions[1]
+                            };
+                            const dx = extraData.positions[2] - extraData.positions[0];
+                            const dy = extraData.positions[3] - extraData.positions[1];
+                            var distance = Math.sqrt(dx * dx + dy * dy);
+                            if (this._previousPinchDistance) {
+                                delta = this._previousPinchDistance - distance;
+                            }
+                            this._previousPinchDistance = distance;
+                            const x = event.getFocusX();
+                            const y = event.getFocusY();
+                            const scale = event.scale;
+                            data = {
+                                deltaMode: 0,
+                                clientX: x,
+                                clientY: y,
+                                screenX: x,
+                                screenY: y,
+                                deltaX: 0,
+                                deltaY: delta,
+                                deltaZ: 0,
+                            };
+                        }
+                        if (hasPointerMove) {
+                            const count = extraData.numberOfPointers;
+                            const positions = extraData.positions;
+                            for (let i = 0; i < count; i++) {
+                                let x = positions[i] - extraData.x;
+                                let y = positions[i + 1] - extraData.y;
+                                this.notify(Object.assign(Object.assign({}, this._createPointerEvent('pointermove', Object.assign(Object.assign({}, extraData), { x, y }))), { pointerId: this._pointers[i].id }));
+                            }
+                        }
+                        if (hasTouchMove) {
+                            this.notify(this._createTouchEvent('touchmove', Object.assign(Object.assign({}, extraData), { data })));
+                        }
+                    }
+                }
+            }
+        }
+        else if (event.eventName === 'pan') {
+            if (this._isPinching) {
+                return;
+            }
+            if (event.state === GestureStateTypes.began || event.state === GestureStateTypes.changed) {
+                hasPointerMove = this.hasListeners('pointermove');
+                hasTouchMove = this.hasListeners('touchmove');
+                if (hasPointerMove || hasTouchMove) {
+                    const numberOfPointers = this._pointerCountFromEvent(event);
+                    const positions = this._positionsFromEvent(event);
+                    const x = positions[0];
+                    const y = positions[1];
+                    extraData = {
+                        numberOfPointers,
+                        positions,
+                        x,
+                        y
+                    };
+                }
+                if (hasPointerMove) {
+                    const positions = extraData.positions;
+                    for (let i = 0; i < extraData.numberOfPointers; i++) {
+                        const x = positions[i];
+                        const y = positions[i + 1];
+                        this.notify(Object.assign(Object.assign({}, this._createPointerEvent('pointermove', { numberOfPointers: extraData.numberOfPointers, positions, x, y })), { pointerId: this._pointers[i].id }));
+                    }
+                }
+                if (hasTouchMove) {
+                    this.notify(this._createTouchEvent('touchmove', extraData));
+                }
+            }
+        }
+    }
+    _createTouchEvent(name, extraData) {
+        const count = extraData.numberOfPointers;
+        const point = extraData.positions;
+        if (!point) {
+            return null;
+        }
+        const x = extraData.x;
+        const y = extraData.y;
+        const activePointer = {
+            clientX: x,
+            clientY: y,
+            force: 0.0,
+            identifier: 0,
+            pageX: x,
+            pageY: y,
+            radiusX: 0,
+            radiusY: 0,
+            rotationAngle: 0,
+            screenX: x,
+            screenY: y,
+        };
+        const pointers = [];
+        for (let i = 0; i < count; i++) {
+            const x = extraData.positions[i];
+            const y = extraData.positions[i + 1];
+            pointers.push({
+                clientX: x,
+                clientY: y,
+                force: 0.0,
+                identifier: i,
+                pageX: x,
+                pageY: y,
+                radiusX: 0,
+                radiusY: 0,
+                rotationAngle: 0,
+                screenX: x,
+                screenY: y,
+                target: this,
+            });
+        }
+        return Object.assign(new TouchEvent(name), Object.assign({ eventName: name, defaultPrevented: false, cancelable: false, altKey: false, ctrlKey: false, metaKey: false, shiftKey: false, target: this, changedTouches: pointers, targetTouches: pointers, touches: pointers }, activePointer));
+    }
+    _createPointerEvent(name, extraData) {
+        const x = extraData.x;
+        const y = extraData.y;
+        const activePointer = {
+            clientX: x,
+            clientY: y,
+            force: 0.0,
+            identifier: 0,
+            pageX: x,
+            pageY: y,
+            radiusX: 0,
+            radiusY: 0,
+            rotationAngle: 0,
+            screenX: x,
+            screenY: y,
+            pointerId: 0,
+            pointerType: 'touch',
+            x,
+            y,
+            width: 23.4375,
+            height: 23.4375,
+            isPrimary: true
+        };
+        return Object.assign(new PointerEvent(name), Object.assign({ eventName: name, defaultPrevented: false, cancelable: false, altKey: false, ctrlKey: false, metaKey: false, shiftKey: false, target: this }, activePointer));
+    }
 };
 CanvasBase.readyEvent = 'ready';
 CanvasBase = __decorate([