@nativescript/canvas 2.0.0-alpha.3 → 2.0.0-alpha.30

package/Canvas/common.js

@@ -7,66 +7,669 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 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';
-export class TouchEvent {
-    constructor(name, init) {
-        this.type = name;
-        if (init && typeof init === 'object') {
-            Object.keys(init).forEach((key) => {
-                this[key] = init[key];
-            });
-        }
+import { CSSType, PercentLength, View, Screen, Utils, Application, Property, booleanConverter } from '@nativescript/core';
+const defaultGLOptions = {
+    alpha: true,
+    antialias: true,
+    depth: true,
+    failIfMajorPerformanceCaveat: false,
+    powerPreference: 'default',
+    premultipliedAlpha: true,
+    preserveDrawingBuffer: false,
+    stencil: false,
+    desynchronized: false,
+    xrCompatible: false,
+};
+const default2DOptions = {
+    alpha: true,
+    antialias: true,
+    depth: true,
+    failIfMajorPerformanceCaveat: false,
+    powerPreference: 'default',
+    premultipliedAlpha: true,
+    preserveDrawingBuffer: false,
+    stencil: false,
+    desynchronized: false,
+    xrCompatible: false,
+};
+export class Event {
+    constructor(type, options) {
+        this.bubbles = false;
+        this.cancelable = false;
+        this.composed = false;
+        this.type = type;
+        this.bubbles = options?.bubbles ?? false;
+        this.cancelable = options?.cancelable ?? false;
+        this.cancelable = options?.cancelable ?? false;
+        this.composed = options?.composed ?? false;
     }
     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];
-            });
-        }
+export class UIEvent extends Event {
+    constructor(type, options) {
+        super(type, options);
+        this.detail = options?.detail ?? 0;
+        this.view = options?.view ?? null;
+        this.sourceCapabilities = options.sourceCapabilities ?? {};
+    }
+}
+export class MouseEvent extends UIEvent {
+    constructor(type, options) {
+        super(type, options);
+        this.screenX = options.screenX ?? 0;
+        this.screenY = options.screenY ?? 0;
+        this.clientX = options?.clientX ?? 0;
+        this.clientY = options?.clientY ?? 0;
+        this.ctrlKey = options?.ctrlKey ?? false;
+        this.shiftKey = options?.ctrlKey ?? false;
+        this.altKey = options?.ctrlKey ?? false;
+        this.metaKey = options?.ctrlKey ?? false;
+        this.button = options?.button ?? 0;
+        this.buttons = options?.buttons ?? 0;
+        this.relatedTarget = options?.relatedTarget ?? null;
+        this.region = options?.region ?? null;
+        this.movementX = options?.movementX ?? 0;
+        this.movementY = options?.movementY ?? 0;
+        this.pageX = options?.pageX ?? 0;
+        this.pageY = options?.pageY ?? 0;
+    }
+}
+export class PointerEvent extends MouseEvent {
+    constructor(type, options) {
+        super(type, options);
+        this.pointerType = options?.pointerType ?? '';
+        this.type = type;
+        this.pointerId = options?.pointerId ?? 0;
+        this.width = options?.width ?? 1;
+        this.height = options?.height ?? 1;
+        this.pressure = options?.pressure ?? 0;
+        this.tangentialPressure = options?.tangentialPressure ?? 0;
+        this.tiltX = options?.tiltX ?? 0;
+        this.tiltY = options?.tiltY ?? 0;
+        this.twist = options?.twist ?? 0;
+        this.isPrimary = options?.isPrimary ?? false;
     }
     preventDefault() { }
     stopPropagation() { }
 }
-const WEB_GESTURE_EVENTS = ['touchmove', 'touchstart', 'touchcancel', 'touchend', 'change', 'pointerup', 'pointerdown', 'pointermove', 'pointercancel'];
+export class Touch {
+    constructor(options) {
+        this.identifier = options.identifier;
+        this.target = options.target;
+        this.clientX = options?.clientX ?? 0;
+        this.clientY = options?.clientY ?? 0;
+        this.screenX = options?.screenX ?? 0;
+        this.screenY = options?.screenY ?? 0;
+        this.pageX = options?.pageX ?? 0;
+        this.pageY = options?.pageY ?? 0;
+        this.radiusX = options?.radiusX ?? 0;
+        this.radiusY = options?.radiusY ?? 0;
+        this.rotationAngle = options?.rotationAngle ?? 0;
+        this.force = options?.force ?? 0;
+    }
+    preventDefault() { }
+    stopPropagation() { }
+}
+export class TouchList {
+    static fromList(list) {
+        const ret = new TouchList();
+        ret._list = list;
+        return ret;
+    }
+    static empty() {
+        const ret = new TouchList();
+        ret._list = [];
+        return ret;
+    }
+    item(index) {
+        return this._list[index];
+    }
+    get length() {
+        return this._list.length;
+    }
+}
+export class TouchEvent extends UIEvent {
+    constructor(type, options) {
+        super(type, options);
+        this.touches = options?.touches ?? TouchList.empty();
+        this.targetTouches = options?.touches ?? TouchList.empty();
+        this.changedTouches = options?.changedTouches ?? [];
+        this.altKey = options?.altKey ?? false;
+        this.metaKey = options?.metaKey ?? false;
+        this.ctrlKey = options?.ctrlKey ?? false;
+        this.shiftKey = options?.shiftKey ?? false;
+    }
+    preventDefault() { }
+    stopPropagation() { }
+}
+export class WheelEvent extends UIEvent {
+    constructor(type, options) {
+        super('wheel', options);
+        this.deltaX = options?.deltaX ?? 0;
+        this.deltaY = options?.deltaY ?? 0;
+        this.deltaZ = options?.deltaZ ?? 0;
+        this.deltaMode = options?.deltaMode ?? 0;
+    }
+}
+class Rectangle {
+    constructor(top, left, width, height) {
+        this.top = top;
+        this.left = left;
+        // check name of fields!
+        this.width = width;
+        this.height = height;
+    }
+}
 export const ignorePixelScalingProperty = new Property({
     name: 'ignorePixelScaling',
     defaultValue: false,
     valueConverter: booleanConverter,
 });
-let pointerId = 0;
+export const upscaleProperty = new Property({
+    name: 'upscale',
+    defaultValue: false,
+    valueConverter: booleanConverter,
+});
+export const ignoreTouchEventsProperty = new Property({
+    name: 'ignoreTouchEvents',
+    defaultValue: false,
+    valueConverter: booleanConverter,
+});
+export const doc = {
+    defaultView: {
+        getComputedStyle: function () {
+            return null;
+        },
+    },
+};
 let CanvasBase = class CanvasBase extends View {
     constructor() {
         super();
         this._isCustom = false;
-        this._gesturesRegistered = false;
-        this._isPinching = false;
-        this._previousX = 0;
-        this._previousY = 0;
-        this._previousPinchDistance = 0;
-        this._previousPointerCount = 0;
-        this._pointers = [];
+        this._pointerMoveCallbacks = new Set();
+        this._pointerUpCallbacks = new Set();
+        this._pointerDownCallbacks = new Set();
+        this._pointerCancelCallbacks = new Set();
+        // For mouse compat because wtf
+        this._mouseMoveCallbacks = new Set();
+        this._mouseUpCallbacks = new Set();
+        this._mouseDownCallbacks = new Set();
+        this._mouseCancelCallbacks = new Set();
+        this._mouseWheelCallbacks = new Set();
+        this._touchStartCallbacks = new Set();
+        this._touchEndCallbacks = new Set();
+        this._touchMoveCallbacks = new Set();
+        this._touchCancelCallbacks = new Set();
+        this._touches = [];
+        this._touchesById = [];
+        this._lastPointerEventById = new Array(10);
         this._classList = new Set();
     }
+    get ownerDocument() {
+        return window?.document ?? doc;
+    }
     addEventListener(arg, callback, thisArg) {
         super.addEventListener(arg, callback, thisArg);
-        if (WEB_GESTURE_EVENTS.indexOf(arg) !== -1) {
-            this.__ensureGestures();
+        const eventtype = arg.toLowerCase();
+        switch (eventtype) {
+            case 'mousemove':
+                this._mouseMoveCallbacks.add(callback);
+                break;
+            case 'pointermove':
+                this._pointerMoveCallbacks.add(callback);
+                break;
+            case 'mousedown':
+                this._mouseDownCallbacks.add(callback);
+                break;
+            case 'pointerdown':
+                this._pointerDownCallbacks.add(callback);
+                break;
+            case 'mouseup':
+                this._mouseUpCallbacks.add(callback);
+                break;
+            case 'pointerup':
+                this._pointerUpCallbacks.add(callback);
+                break;
+            case 'moveout':
+            case 'mousecancel':
+                this._mouseCancelCallbacks.add(callback);
+                break;
+            case 'pointercancel':
+                this._pointerCancelCallbacks.add(callback);
+                break;
+            case 'touchstart':
+                this._touchStartCallbacks.add(callback);
+                break;
+            case 'touchend':
+                this._touchEndCallbacks.add(callback);
+                break;
+            case 'touchmove':
+                this._touchMoveCallbacks.add(callback);
+                break;
+            case 'touchcancel':
+                this._touchCancelCallbacks.add(callback);
+                break;
+            case 'wheel':
+            case 'mousewheel':
+            case 'dommousescroll':
+                this._mouseWheelCallbacks.add(callback);
+                break;
         }
     }
     removeEventListener(arg, callback, thisArg) {
         super.removeEventListener(arg, callback, thisArg);
-        if (WEB_GESTURE_EVENTS.indexOf(arg) !== -1) {
-            // if we dont have any other web gestures we can unregister gestures
-            if (!WEB_GESTURE_EVENTS.some((e) => this.hasListeners(e))) {
-                this.__unregisterGestures();
+        // if (WEB_GESTURE_EVENTS.indexOf(arg) !== -1) {
+        // 	// if we dont have any other web gestures we can unregister gestures
+        // 	if (!WEB_GESTURE_EVENTS.some((e) => this.hasListeners(e))) {
+        // 		this.__unregisterGestures();
+        // 	}
+        // }
+        const eventtype = arg.toLowerCase();
+        switch (eventtype) {
+            case 'mousemove':
+                this._mouseMoveCallbacks.delete(callback);
+                break;
+            case 'pointermove':
+                this._pointerMoveCallbacks.delete(callback);
+                break;
+            case 'mousedown':
+                this._mouseDownCallbacks.delete(callback);
+                break;
+            case 'pointerdown':
+                this._pointerDownCallbacks.delete(callback);
+                break;
+            case 'mouseup':
+                this._mouseUpCallbacks.delete(callback);
+                break;
+            case 'pointerup':
+                this._pointerUpCallbacks.delete(callback);
+                break;
+            case 'moveout':
+            case 'mousecancel':
+                this._mouseCancelCallbacks.delete(callback);
+                break;
+            case 'pointercancel':
+                this._pointerCancelCallbacks.delete(callback);
+                break;
+            case 'touchstart':
+                this._touchStartCallbacks.delete(callback);
+                break;
+            case 'touchend':
+                this._touchEndCallbacks.delete(callback);
+                break;
+            case 'touchmove':
+                this._touchMoveCallbacks.delete(callback);
+                break;
+            case 'touchcancel':
+                this._touchCancelCallbacks.delete(callback);
+                break;
+            case 'wheel':
+            case 'mousewheel':
+            case 'dommousescroll':
+                this._mouseWheelCallbacks.delete(callback);
+                break;
+        }
+    }
+    _moveCallback(pointers) {
+        const hasPointerCallbacks = this._pointerMoveCallbacks.size > 0;
+        const hasMouseCallbacks = this._mouseMoveCallbacks.size > 0;
+        if (hasPointerCallbacks || hasMouseCallbacks) {
+            for (const pointer of pointers) {
+                const pointerId = pointer.ptrId;
+                const previousEvent = this._lastPointerEventById[pointerId];
+                if (hasPointerCallbacks) {
+                    const event = new PointerEvent('pointermove', {
+                        pointerType: 'touch',
+                        pointerId,
+                        clientX: pointer.x,
+                        clientY: pointer.y,
+                        screenX: pointer.x,
+                        screenY: pointer.y,
+                        pageX: pointer.x,
+                        pageY: pointer.y,
+                        movementX: pointer.x - previousEvent.x,
+                        movementY: pointer.y - previousEvent.y,
+                        isPrimary: pointerId === 0,
+                    });
+                    for (const callback of this._pointerMoveCallbacks) {
+                        callback(event);
+                    }
+                }
+                if (hasMouseCallbacks) {
+                    const event = new MouseEvent('mousemove', {
+                        clientX: pointer.x,
+                        clientY: pointer.y,
+                        screenX: pointer.x,
+                        screenY: pointer.y,
+                        pageX: pointer.x,
+                        pageY: pointer.y,
+                        movementX: pointer.x - previousEvent.x,
+                        movementY: pointer.y - previousEvent.y,
+                    });
+                    for (const callback of this._mouseMoveCallbacks) {
+                        callback(event);
+                    }
+                }
+                this._lastPointerEventById[pointerId] = { pointerId, x: pointer.x, y: pointer.y };
+            }
+        }
+        if (this._touchMoveCallbacks.size > 0) {
+            const changedTouches = [];
+            for (const pointer of pointers) {
+                changedTouches.push(new Touch({
+                    identifier: pointer.ptrId,
+                    target: null,
+                    clientX: pointer.x,
+                    clientY: pointer.y,
+                    screenX: pointer.x,
+                    screenY: pointer.y,
+                    pageX: pointer.x,
+                    pageY: pointer.y,
+                }));
+            }
+            const touches = TouchList.fromList(this._touches);
+            const event = new TouchEvent('touchmove', {
+                touches,
+                targetTouches: touches,
+                changedTouches,
+            });
+            for (const callback of this._touchMoveCallbacks) {
+                callback(event);
+            }
+        }
+    }
+    _upCallback(ptrId, x, y) {
+        const hasPointerCallbacks = this._pointerUpCallbacks.size > 0;
+        const hasMouseCallbacks = this._mouseUpCallbacks.size > 0;
+        if (hasPointerCallbacks || hasMouseCallbacks) {
+            const pointerId = ptrId;
+            if (hasPointerCallbacks) {
+                const event = new PointerEvent('pointerup', {
+                    pointerType: 'touch',
+                    pointerId,
+                    clientX: x,
+                    clientY: y,
+                    screenX: x,
+                    screenY: y,
+                    isPrimary: pointerId === 0,
+                    pageX: x,
+                    pageY: y,
+                });
+                for (const callback of this._pointerUpCallbacks) {
+                    callback(event);
+                }
+            }
+            if (hasMouseCallbacks) {
+                const event = new MouseEvent('mouseup', {
+                    clientX: x,
+                    clientY: y,
+                    screenX: x,
+                    screenY: y,
+                    pageX: x,
+                    pageY: y,
+                });
+                for (const callback of this._mouseUpCallbacks) {
+                    callback(event);
+                }
+            }
+            delete this._lastPointerEventById[pointerId];
+        }
+        const length = this._touches.length;
+        for (let i = 0; i < length; i++) {
+            if (this._touches[i].identifier == ptrId) {
+                this._touches.splice(i, 1);
+                break;
+            }
+        }
+        if (this._touchEndCallbacks.size > 0) {
+            const touches = TouchList.fromList(this._touches);
+            const changedTouches = [
+                new Touch({
+                    identifier: ptrId,
+                    target: null,
+                    clientX: x,
+                    clientY: y,
+                    screenX: x,
+                    screenY: y,
+                    pageX: x,
+                    pageY: y,
+                }),
+            ];
+            const event = new TouchEvent('touchend', {
+                touches,
+                targetTouches: touches,
+                changedTouches,
+            });
+            for (const callback of this._touchEndCallbacks) {
+                callback(event);
+            }
+        }
+    }
+    _downCallback(ptrId, x, y) {
+        const hasPointerCallbacks = this._pointerDownCallbacks.size > 0;
+        const hasMouseCallbacks = this._mouseDownCallbacks.size > 0;
+        if (hasPointerCallbacks || hasMouseCallbacks) {
+            const pointerId = ptrId;
+            if (hasPointerCallbacks) {
+                const event = new PointerEvent('pointerdown', {
+                    pointerType: 'touch',
+                    pointerId,
+                    clientX: x,
+                    clientY: y,
+                    screenX: x,
+                    screenY: y,
+                    isPrimary: pointerId === 0,
+                    pageX: x,
+                    pageY: y,
+                });
+                for (const callback of this._pointerDownCallbacks) {
+                    callback(event);
+                }
+            }
+            if (hasMouseCallbacks) {
+                const event = new MouseEvent('mousedown', {
+                    clientX: x,
+                    clientY: y,
+                    screenX: x,
+                    screenY: y,
+                    pageX: x,
+                    pageY: y,
+                });
+                for (const callback of this._mouseDownCallbacks) {
+                    callback(event);
+                }
+            }
+            this._lastPointerEventById[pointerId] = { pointerId, x, y };
+        }
+        if (this._touchStartCallbacks.size > 0) {
+            const touch = new Touch({
+                identifier: ptrId,
+                target: this,
+                clientX: x,
+                clientY: y,
+                screenX: x,
+                screenY: y,
+                pageX: x,
+                pageY: y,
+            });
+            this._touches.push(touch);
+            this._touchesById[ptrId] = touch;
+            const touches = TouchList.fromList(this._touches);
+            const touchEvent = new TouchEvent('touchstart', {
+                touches,
+                targetTouches: touches,
+                changedTouches: this._touches,
+            });
+            for (const callback of this._touchStartCallbacks) {
+                callback(touchEvent);
+            }
+        }
+    }
+    _cancelCallback(ptrid, x, y) {
+        const hasPointerCallbacks = this._pointerCancelCallbacks.size > 0;
+        const hasMouseCallbacks = this._mouseCancelCallbacks.size > 0;
+        if (hasPointerCallbacks || hasMouseCallbacks) {
+            const pointerId = ptrid;
+            if (hasPointerCallbacks) {
+                const event = new PointerEvent('pointercancel', {
+                    pointerType: 'touch',
+                    pointerId,
+                    clientX: x,
+                    clientY: y,
+                    screenX: x,
+                    screenY: y,
+                    pageX: x,
+                    pageY: y,
+                });
+                for (const callback of this._pointerCancelCallbacks) {
+                    callback(event);
+                }
+            }
+            if (hasMouseCallbacks) {
+                const event = new MouseEvent('mouseout', {
+                    clientX: x,
+                    clientY: y,
+                    screenX: x,
+                    screenY: y,
+                    pageX: x,
+                    pageY: y,
+                });
+                for (const callback of this._mouseCancelCallbacks) {
+                    callback(event);
+                }
+            }
+        }
+        if (this._touchCancelCallbacks.size > 0) {
+            const touch = new Touch({
+                identifier: ptrid,
+                target: this,
+                clientX: x,
+                clientY: y,
+                screenX: x,
+                screenY: y,
+                pageX: x,
+                pageY: y,
+            });
+            const touchesList = [touch];
+            const touchesById = [];
+            touchesById[ptrid] = touch;
+            const touches = TouchList.fromList(touchesList);
+            const touchEvent = new TouchEvent('touchcancel', {
+                touches,
+                targetTouches: touches,
+                changedTouches: touchesList,
+            });
+            for (const callback of this._touchCancelCallbacks) {
+                callback(touchEvent);
+            }
+        }
+    }
+    _pinchCallback(data) {
+        // move callback
+        const hasPointerCallbacks = this._pointerMoveCallbacks.size > 0;
+        const hasMouseCallbacks = this._mouseMoveCallbacks.size > 0;
+        const hasMouseWheel = this._mouseWheelCallbacks.size > 0;
+        if (hasPointerCallbacks || hasMouseCallbacks || hasMouseWheel) {
+            for (const pointer of data.pointers) {
+                const pointerId = pointer.ptrId;
+                const previousEvent = this._lastPointerEventById[pointerId];
+                if (hasPointerCallbacks) {
+                    const event = new PointerEvent('pointermove', {
+                        pointerType: 'touch',
+                        pointerId,
+                        clientX: pointer.x,
+                        clientY: pointer.y,
+                        screenX: pointer.x,
+                        screenY: pointer.y,
+                        pageX: pointer.x,
+                        pageY: pointer.y,
+                        movementX: pointer.x - previousEvent.x,
+                        movementY: pointer.y - previousEvent.y,
+                    });
+                    for (const callback of this._pointerMoveCallbacks) {
+                        callback(event);
+                    }
+                }
+                if (hasMouseCallbacks) {
+                    const event = new MouseEvent('mousemove', {
+                        clientX: pointer.x,
+                        clientY: pointer.y,
+                        screenX: pointer.x,
+                        screenY: pointer.y,
+                        pageX: pointer.x,
+                        pageY: pointer.y,
+                        movementX: pointer.x - previousEvent.x,
+                        movementY: pointer.y - previousEvent.y,
+                    });
+                    for (const callback of this._mouseMoveCallbacks) {
+                        callback(event);
+                    }
+                }
+                if (hasMouseWheel) {
+                    const event = new WheelEvent('wheel', {
+                        deltaX: data.deltaX,
+                        deltaY: data.deltaY,
+                        deltaZ: 0,
+                        deltaMode: data.deltaMode,
+                    });
+                    for (const callback of this._mouseWheelCallbacks) {
+                        callback(event);
+                    }
+                }
+                this._lastPointerEventById[pointerId] = { pointerId, x: pointer.x, y: pointer.y };
+            }
+        }
+        if (this._touchMoveCallbacks.size > 0) {
+            const changedTouches = [];
+            for (const pointer of data.pointers) {
+                changedTouches.push(new Touch({
+                    identifier: pointer.ptrId,
+                    target: this,
+                    clientX: pointer.x,
+                    clientY: pointer.y,
+                    screenX: pointer.x,
+                    screenY: pointer.y,
+                    pageX: pointer.x,
+                    pageY: pointer.y,
+                }));
+            }
+            const touches = TouchList.fromList(this._touches);
+            const event = new TouchEvent('touchmove', {
+                touches,
+                targetTouches: touches,
+                changedTouches,
+            });
+            for (const callback of this._touchMoveCallbacks) {
+                callback(event);
             }
         }
     }
+    _handleEvents(event) {
+        try {
+            const data = JSON.parse(event);
+            switch (data.event) {
+                case 'down':
+                    this._downCallback(data.ptrId, data.x, data.y);
+                    break;
+                case 'move':
+                    this._moveCallback(data.pointers);
+                    break;
+                case 'up':
+                    this._upCallback(data.ptrId, data.x, data.y);
+                    break;
+                case 'scale':
+                    this._pinchCallback(data);
+                    break;
+                case 'cancel':
+                    this._cancelCallback(data.ptrId, data.x, data.y);
+                    break;
+                default:
+                    break;
+            }
+        }
+        catch (error) { }
+    }
     get classList() {
         return this._classList;
     }
@@ -77,35 +680,12 @@ let CanvasBase = class CanvasBase extends View {
         };
     }
     _handleContextOptions(type, contextOpts) {
-        const defaultGLOptions = {
-            alpha: true,
-            antialias: true,
-            depth: true,
-            failIfMajorPerformanceCaveat: false,
-            powerPreference: 'default',
-            premultipliedAlpha: true,
-            preserveDrawingBuffer: false,
-            stencil: false,
-            desynchronized: false,
-            xrCompatible: false,
-        };
         if (!contextOpts) {
             if (type === '2d') {
-                return {
-                    alpha: true,
-                    antialias: true,
-                    depth: true,
-                    failIfMajorPerformanceCaveat: false,
-                    powerPreference: 'default',
-                    premultipliedAlpha: true,
-                    preserveDrawingBuffer: false,
-                    stencil: false,
-                    desynchronized: false,
-                    xrCompatible: false,
-                };
+                return { ...default2DOptions };
             }
             if (type.indexOf('webgl') > -1) {
-                return defaultGLOptions;
+                return { ...defaultGLOptions };
             }
         }
         if (type === '2d') {
@@ -116,10 +696,11 @@ let CanvasBase = class CanvasBase extends View {
                 return { alpha: true };
             }
         }
+        const glOptions = { ...defaultGLOptions };
         const setIfDefined = (prop, value) => {
-            const property = defaultGLOptions[prop];
+            const property = glOptions[prop];
             if (property !== undefined && typeof value === typeof property) {
-                defaultGLOptions[prop] = value;
+                glOptions[prop] = value;
             }
         };
         if (type.indexOf('webgl') > -1) {
@@ -132,7 +713,7 @@ let CanvasBase = class CanvasBase extends View {
             setIfDefined('preserveDrawingBuffer', contextOpts.preserveDrawingBuffer);
             setIfDefined('stencil', contextOpts.stencil);
             setIfDefined('desynchronized', contextOpts.desynchronized);
-            return defaultGLOptions;
+            return glOptions;
         }
         return null;
     }
@@ -174,420 +755,38 @@ let CanvasBase = class CanvasBase extends View {
             value = PercentLength.parse(value);
         }
         if (typeof value === 'number') {
-            // treat as px
+            if (global.isAndroid) {
+                return Utils.layout.toDevicePixels(value) || 0;
+            }
             return value || 0;
         }
         else if ((value !== null || true) && typeof value === 'object' && typeof value.value && typeof value.unit) {
             if (value.unit === 'px') {
+                if (global.isIOS) {
+                    return Utils.layout.toDeviceIndependentPixels(value.value || 0);
+                }
                 return value.value || 0;
             }
             else if (value.unit === 'dip') {
-                return Utils.layout.toDevicePixels(value.value) || 0;
-            }
-            else if (value.unit === '%') {
-                if (Application.orientation() === 'portrait') {
-                    return type === 'width' ? Screen.mainScreen.widthPixels * value.value || 0 : Screen.mainScreen.heightPixels * value.value || 0;
-                }
-                else if (Application.orientation() === 'landscape') {
-                    return type === 'width' ? Screen.mainScreen.widthPixels * value.value || 0 : Screen.mainScreen.heightPixels * value.value || 0;
-                }
-                else {
-                    return 0;
-                }
-            }
-            else {
-                return 0;
-            }
-        }
-        else {
-            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 })));
-                        }
-                    }
+                if (global.isAndroid) {
+                    return Utils.layout.toDevicePixels(value.value) || 0;
                 }
+                return value.value || 0;
             }
-        }
-        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 }));
+            else if (value.unit === '%') {
+                const orientation = Application.orientation();
+                if (orientation === 'portrait' || orientation === 'landscape') {
+                    if (global.isAndroid) {
+                        return (measuredSize ?? (type === 'width' ? Screen.mainScreen.widthPixels : Screen.mainScreen.heightPixels)) * value.value ?? 0;
                     }
-                }
-                if (hasTouchMove) {
-                    this.notify(this._createTouchEvent('touchmove', extraData));
+                    return (measuredSize ?? (type === 'width' ? Screen.mainScreen.widthDIPs : Screen.mainScreen.heightDIPs)) * value.value ?? 0;
                 }
             }
         }
+        return 0;
     }
-    _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));
-    }
+    setPointerCapture(id) { }
+    releasePointerCapture(id) { }
 };
 CanvasBase.readyEvent = 'ready';
 CanvasBase = __decorate([
@@ -596,4 +795,5 @@ CanvasBase = __decorate([
 ], CanvasBase);
 export { CanvasBase };
 ignorePixelScalingProperty.register(CanvasBase);
+upscaleProperty.register(CanvasBase);
 //# sourceMappingURL=common.js.map