@nativescript/canvas 2.0.0-beta.9 → 2.0.0-rc.1

package/Canvas/common.js

@@ -7,31 +7,8 @@ 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, Utils, 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,
-};
+import { CSSType, View, Property, booleanConverter } from '@nativescript/core';
+import { removeItemFromArray } from './utils';
 export class DOMRectReadOnly {
     constructor(x, y, width, height, top, right, bottom, left) {
         this.x = x;
@@ -59,6 +36,7 @@ export class Event {
         this.cancelable = options?.cancelable ?? false;
         this.cancelable = options?.cancelable ?? false;
         this.composed = options?.composed ?? false;
+        this.target = options?.target ?? null;
     }
     preventDefault() { }
     stopPropagation() { }
@@ -128,22 +106,20 @@ export class Touch {
     preventDefault() { }
     stopPropagation() { }
 }
-export class TouchList {
+export class TouchList extends Array {
     static fromList(list) {
         const ret = new TouchList();
-        ret._list = list;
+        ret.splice(0, 0, ...list);
         return ret;
     }
     static empty() {
-        const ret = new TouchList();
-        ret._list = [];
-        return ret;
+        return new TouchList();
     }
     item(index) {
-        return this._list[index];
+        return this[index];
     }
     get length() {
-        return this._list.length;
+        return this.length;
     }
 }
 export class TouchEvent extends UIEvent {
@@ -178,16 +154,6 @@ class Rectangle {
         this.height = height;
     }
 }
-export const ignorePixelScalingProperty = new Property({
-    name: 'ignorePixelScaling',
-    defaultValue: false,
-    valueConverter: booleanConverter,
-});
-export const upscaleProperty = new Property({
-    name: 'upscale',
-    defaultValue: false,
-    valueConverter: booleanConverter,
-});
 export const ignoreTouchEventsProperty = new Property({
     name: 'ignoreTouchEvents',
     defaultValue: false,
@@ -206,6 +172,8 @@ let CanvasBase = class CanvasBase extends View {
         this._isCustom = false;
         this._pointerMoveCallbacks = [];
         this._pointerUpCallbacks = [];
+        this._pointerOutCallbacks = [];
+        this._pointerLeaveCallbacks = [];
         this._pointerDownCallbacks = [];
         this._pointerCancelCallbacks = [];
         // For mouse compat because wtf
@@ -220,19 +188,34 @@ let CanvasBase = class CanvasBase extends View {
         this._touchCancelCallbacks = new Array();
         this._touches = [];
         this._touchesById = [];
-        this._lastPointerEventById = new Array();
+        this._lastPointerEventById = [];
+        this.__target = null;
         this._classList = new Set();
+        this.style.width = { unit: '%', value: 1 };
+        this.style.height = 'auto';
+    }
+    get isConnected() {
+        return this.parent !== null && this.parent !== undefined;
     }
     get ownerDocument() {
-        return window?.document ?? doc;
+        //return window?.document ?? doc;
+        return this;
+    }
+    emit() { }
+    dispatchEvent(event) {
+        return true;
     }
     addEventListener(arg, callback, thisArg) {
+        if (typeof thisArg === 'boolean') {
+            thisArg = {
+                capture: thisArg,
+            };
+        }
         super.addEventListener(arg, callback, thisArg);
         if (typeof arg !== 'string') {
             return;
         }
-        const eventtype = arg.toLowerCase();
-        switch (eventtype) {
+        switch (arg) {
             case 'mousemove':
                 this._mouseMoveCallbacks.push(callback);
                 break;
@@ -251,7 +234,13 @@ let CanvasBase = class CanvasBase extends View {
             case 'pointerup':
                 this._pointerUpCallbacks.push(callback);
                 break;
-            case 'moveout':
+            case 'pointerout':
+                this._pointerOutCallbacks.push(callback);
+                break;
+            case 'pointerleave':
+                this._pointerLeaveCallbacks.push(callback);
+                break;
+            case 'mouseout':
             case 'mousecancel':
                 this._mouseCancelCallbacks.push(callback);
                 break;
@@ -277,57 +266,61 @@ let CanvasBase = class CanvasBase extends View {
                 break;
         }
     }
-    _removeItemFromArray(array, item) {
-        const index = array.indexOf(item);
-        if (index !== -1) {
-            array.splice(index, 1);
-        }
-    }
     removeEventListener(arg, callback, thisArg) {
+        if (typeof thisArg === 'boolean') {
+            thisArg = {
+                capture: thisArg,
+            };
+        }
         super.removeEventListener(arg, callback, thisArg);
-        const eventtype = arg.toLowerCase();
-        switch (eventtype) {
+        switch (arg) {
             case 'mousemove':
-                this._removeItemFromArray(this._mouseMoveCallbacks, callback);
+                removeItemFromArray(this._mouseMoveCallbacks, callback);
                 break;
             case 'pointermove':
-                this._removeItemFromArray(this._pointerMoveCallbacks, callback);
+                removeItemFromArray(this._pointerMoveCallbacks, callback);
                 break;
             case 'mousedown':
-                this._removeItemFromArray(this._mouseDownCallbacks, callback);
+                removeItemFromArray(this._mouseDownCallbacks, callback);
                 break;
             case 'pointerdown':
-                this._removeItemFromArray(this._pointerDownCallbacks, callback);
+                removeItemFromArray(this._pointerDownCallbacks, callback);
                 break;
             case 'mouseup':
-                this._removeItemFromArray(this._mouseUpCallbacks, callback);
+                removeItemFromArray(this._mouseUpCallbacks, callback);
                 break;
             case 'pointerup':
-                this._removeItemFromArray(this._pointerUpCallbacks, callback);
+                removeItemFromArray(this._pointerUpCallbacks, callback);
+                break;
+            case 'pointerout':
+                removeItemFromArray(this._pointerOutCallbacks, callback);
+                break;
+            case 'pointerleave':
+                removeItemFromArray(this._pointerLeaveCallbacks, callback);
                 break;
-            case 'moveout':
+            case 'mouseout':
             case 'mousecancel':
-                this._removeItemFromArray(this._mouseCancelCallbacks, callback);
+                removeItemFromArray(this._mouseCancelCallbacks, callback);
                 break;
             case 'pointercancel':
-                this._removeItemFromArray(this._pointerCancelCallbacks, callback);
+                removeItemFromArray(this._pointerCancelCallbacks, callback);
                 break;
             case 'touchstart':
-                this._removeItemFromArray(this._touchStartCallbacks, callback);
+                removeItemFromArray(this._touchStartCallbacks, callback);
                 break;
             case 'touchend':
-                this._removeItemFromArray(this._touchEndCallbacks, callback);
+                removeItemFromArray(this._touchEndCallbacks, callback);
                 break;
             case 'touchmove':
-                this._removeItemFromArray(this._touchMoveCallbacks, callback);
+                removeItemFromArray(this._touchMoveCallbacks, callback);
                 break;
             case 'touchcancel':
-                this._removeItemFromArray(this._touchCancelCallbacks, callback);
+                removeItemFromArray(this._touchCancelCallbacks, callback);
                 break;
             case 'wheel':
             case 'mousewheel':
             case 'dommousescroll':
-                this._removeItemFromArray(this._mouseWheelCallbacks, callback);
+                removeItemFromArray(this._mouseWheelCallbacks, callback);
                 break;
         }
     }
@@ -361,6 +354,7 @@ let CanvasBase = class CanvasBase extends View {
                         movementY: pointer.y - previousEvent.y,
                         isPrimary: pointer.isPrimary,
                         button: -1,
+                        target: this.__target ?? this,
                     });
                     for (const callback of this._pointerMoveCallbacks) {
                         callback(event);
@@ -377,10 +371,12 @@ let CanvasBase = class CanvasBase extends View {
                         movementX: pointer.x - previousEvent.x,
                         movementY: pointer.y - previousEvent.y,
                         button: -1,
+                        target: this.__target ?? this,
                     });
-                    for (const callback of this._mouseMoveCallbacks) {
-                        callback(event);
-                    }
+                    // todo emit mousemove when desktop is supported
+                    // for (const callback of this._mouseMoveCallbacks) {
+                    // 	callback(event);
+                    // }
                 }
                 if (index > -1) {
                     this._lastPointerEventById[index] = { pointerId, x: pointer.x, y: pointer.y };
@@ -388,11 +384,11 @@ let CanvasBase = class CanvasBase extends View {
             }
         }
         if (this._touchMoveCallbacks.length > 0) {
-            const changedTouches = [];
+            const changedTouches = TouchList.empty();
             for (const pointer of pointers) {
                 changedTouches.push(new Touch({
                     identifier: pointer.ptrId,
-                    target: null,
+                    target: this.__target ?? this,
                     clientX: pointer.x,
                     clientY: pointer.y,
                     screenX: pointer.x,
@@ -406,19 +402,32 @@ let CanvasBase = class CanvasBase extends View {
                 touches,
                 targetTouches: touches,
                 changedTouches,
+                target: this.__target ?? this,
             });
             for (const callback of this._touchMoveCallbacks) {
                 callback(event);
             }
         }
     }
-    _upCallback(ptrId, x, y, isPrimary) {
-        const hasPointerCallbacks = this._pointerUpCallbacks.length > 0;
+    _upCallback(ptrId, x, y, isPrimary = false) {
+        const hasPointerCallbacks = this._pointerUpCallbacks.length > 0 || this._pointerOutCallbacks.length > 0 || this._pointerLeaveCallbacks.length > 0;
         const hasMouseCallbacks = this._mouseUpCallbacks.length > 0;
         if (hasPointerCallbacks || hasMouseCallbacks) {
             const pointerId = ptrId;
             if (hasPointerCallbacks) {
-                const event = new PointerEvent('pointerup', {
+                const up = new PointerEvent('pointerup', {
+                    pointerType: 'touch',
+                    pointerId,
+                    clientX: x,
+                    clientY: y,
+                    screenX: x,
+                    screenY: y,
+                    isPrimary,
+                    pageX: x,
+                    pageY: y,
+                    target: this.__target ?? this,
+                });
+                const out = new PointerEvent('pointerout', {
                     pointerType: 'touch',
                     pointerId,
                     clientX: x,
@@ -428,9 +437,28 @@ let CanvasBase = class CanvasBase extends View {
                     isPrimary,
                     pageX: x,
                     pageY: y,
+                    target: this.__target ?? this,
+                });
+                const leave = new PointerEvent('pointerleave', {
+                    pointerType: 'touch',
+                    pointerId,
+                    clientX: x,
+                    clientY: y,
+                    screenX: x,
+                    screenY: y,
+                    isPrimary,
+                    pageX: x,
+                    pageY: y,
+                    target: this.__target ?? this,
                 });
                 for (const callback of this._pointerUpCallbacks) {
-                    callback(event);
+                    callback(up);
+                }
+                for (const callback of this._pointerOutCallbacks) {
+                    callback(out);
+                }
+                for (const callback of this._pointerLeaveCallbacks) {
+                    callback(leave);
                 }
             }
             if (hasMouseCallbacks) {
@@ -441,10 +469,12 @@ let CanvasBase = class CanvasBase extends View {
                     screenY: y,
                     pageX: x,
                     pageY: y,
+                    target: this.__target ?? this,
                 });
-                for (const callback of this._mouseUpCallbacks) {
-                    callback(event);
-                }
+                // todo emit mouseup when desktop is supported
+                // for (const callback of this._mouseUpCallbacks) {
+                // 	callback(event);
+                // }
             }
             const index = this._lastPointerEventById.findIndex((item) => {
                 return item?.pointerId === pointerId;
@@ -462,10 +492,10 @@ let CanvasBase = class CanvasBase extends View {
         }
         if (this._touchEndCallbacks.length > 0) {
             const touches = TouchList.fromList(this._touches);
-            const changedTouches = [
+            const changedTouches = TouchList.fromList([
                 new Touch({
                     identifier: ptrId,
-                    target: null,
+                    target: this.__target ?? this,
                     clientX: x,
                     clientY: y,
                     screenX: x,
@@ -473,11 +503,12 @@ let CanvasBase = class CanvasBase extends View {
                     pageX: x,
                     pageY: y,
                 }),
-            ];
+            ]);
             const event = new TouchEvent('touchend', {
                 touches,
                 targetTouches: touches,
                 changedTouches,
+                target: this.__target ?? this,
             });
             for (const callback of this._touchEndCallbacks) {
                 callback(event);
@@ -500,6 +531,7 @@ let CanvasBase = class CanvasBase extends View {
                     isPrimary,
                     pageX: x,
                     pageY: y,
+                    target: this.__target ?? this,
                 });
                 for (const callback of this._pointerDownCallbacks) {
                     callback(event);
@@ -513,17 +545,19 @@ let CanvasBase = class CanvasBase extends View {
                     screenY: y,
                     pageX: x,
                     pageY: y,
+                    target: this.__target ?? this,
                 });
-                for (const callback of this._mouseDownCallbacks) {
-                    callback(event);
-                }
+                // todo emit mousedown when desktop is supported
+                // for (const callback of this._mouseDownCallbacks) {
+                // 	callback(event);
+                // }
             }
             this._lastPointerEventById.push({ pointerId, x, y });
         }
         if (this._touchStartCallbacks.length > 0) {
             const touch = new Touch({
                 identifier: ptrId,
-                target: this,
+                target: this.__target ?? this,
                 clientX: x,
                 clientY: y,
                 screenX: x,
@@ -538,17 +572,18 @@ let CanvasBase = class CanvasBase extends View {
                 touches,
                 targetTouches: touches,
                 changedTouches: this._touches,
+                target: this.__target ?? this,
             });
             for (const callback of this._touchStartCallbacks) {
                 callback(touchEvent);
             }
         }
     }
-    _cancelCallback(ptrid, x, y, isPrimary = false) {
+    _cancelCallback(ptrId, x, y, isPrimary = false) {
         const hasPointerCallbacks = this._pointerCancelCallbacks.length > 0;
         const hasMouseCallbacks = this._mouseCancelCallbacks.length > 0;
         if (hasPointerCallbacks || hasMouseCallbacks) {
-            const pointerId = ptrid;
+            const pointerId = ptrId;
             if (hasPointerCallbacks) {
                 const event = new PointerEvent('pointercancel', {
                     pointerType: 'touch',
@@ -560,6 +595,7 @@ let CanvasBase = class CanvasBase extends View {
                     pageX: x,
                     pageY: y,
                     isPrimary,
+                    target: this.__target ?? this,
                 });
                 for (const callback of this._pointerCancelCallbacks) {
                     callback(event);
@@ -573,16 +609,18 @@ let CanvasBase = class CanvasBase extends View {
                     screenY: y,
                     pageX: x,
                     pageY: y,
+                    target: this.__target ?? this,
                 });
-                for (const callback of this._mouseCancelCallbacks) {
-                    callback(event);
-                }
+                // todo emit mouseout when desktop is supported
+                // for (const callback of this._mouseCancelCallbacks) {
+                // 	callback(event);
+                // }
             }
         }
         if (this._touchCancelCallbacks.length > 0) {
             const touch = new Touch({
-                identifier: ptrid,
-                target: this,
+                identifier: ptrId,
+                target: this.__target ?? this,
                 clientX: x,
                 clientY: y,
                 screenX: x,
@@ -592,12 +630,13 @@ let CanvasBase = class CanvasBase extends View {
             });
             const touchesList = [touch];
             const touchesById = [];
-            touchesById[ptrid] = touch;
+            touchesById[ptrId] = touch;
             const touches = TouchList.fromList(touchesList);
             const touchEvent = new TouchEvent('touchcancel', {
                 touches,
                 targetTouches: touches,
                 changedTouches: touchesList,
+                target: this.__target ?? this,
             });
             for (const callback of this._touchCancelCallbacks) {
                 callback(touchEvent);
@@ -635,6 +674,7 @@ let CanvasBase = class CanvasBase extends View {
                         movementX: pointer.x - previousEvent.x,
                         movementY: pointer.y - previousEvent.y,
                         button: -1,
+                        target: this.__target ?? this,
                     });
                     for (const callback of this._pointerMoveCallbacks) {
                         callback(event);
@@ -651,10 +691,12 @@ let CanvasBase = class CanvasBase extends View {
                         movementX: pointer.x - previousEvent.x,
                         movementY: pointer.y - previousEvent.y,
                         button: -1,
+                        target: this.__target ?? this,
                     });
-                    for (const callback of this._mouseMoveCallbacks) {
-                        callback(event);
-                    }
+                    // todo emit mousemove when desktop is supported
+                    // for (const callback of this._mouseMoveCallbacks) {
+                    // 	callback(event);
+                    // }
                 }
                 if (hasMouseWheel) {
                     const event = new WheelEvent('wheel', {
@@ -662,10 +704,12 @@ let CanvasBase = class CanvasBase extends View {
                         deltaY: data.deltaY,
                         deltaZ: 0,
                         deltaMode: data.deltaMode,
+                        target: this.__target ?? this,
                     });
-                    for (const callback of this._mouseWheelCallbacks) {
-                        callback(event);
-                    }
+                    // todo emit wheel when desktop is supported
+                    // for (const callback of this._mouseWheelCallbacks) {
+                    // 	callback(event);
+                    // }
                 }
                 if (index > -1) {
                     this._lastPointerEventById[index] = { pointerId, x: pointer.x, y: pointer.y };
@@ -677,7 +721,7 @@ let CanvasBase = class CanvasBase extends View {
             for (const pointer of data.pointers) {
                 changedTouches.push(new Touch({
                     identifier: pointer.ptrId,
-                    target: this,
+                    target: this.__target ?? this,
                     clientX: pointer.x,
                     clientY: pointer.y,
                     screenX: pointer.x,
@@ -691,6 +735,7 @@ let CanvasBase = class CanvasBase extends View {
                 touches,
                 targetTouches: touches,
                 changedTouches,
+                target: this.__target ?? this,
             });
             for (const callback of this._touchMoveCallbacks) {
                 callback(event);
@@ -725,50 +770,6 @@ let CanvasBase = class CanvasBase extends View {
     get classList() {
         return this._classList;
     }
-    get _realSize() {
-        return {
-            width: this.getSize(this.style.width, this.getMeasuredWidth(), 'width'),
-            height: this.getSize(this.style.height, this.getMeasuredHeight(), 'height'),
-        };
-    }
-    _handleContextOptions(type, contextOpts) {
-        if (!contextOpts) {
-            if (type === '2d') {
-                return { ...default2DOptions };
-            }
-            if (type.indexOf('webgl') > -1) {
-                return { ...defaultGLOptions };
-            }
-        }
-        if (type === '2d') {
-            if (contextOpts.alpha !== undefined && typeof contextOpts.alpha === 'boolean') {
-                return contextOpts;
-            }
-            else {
-                return { alpha: true };
-            }
-        }
-        const glOptions = { ...defaultGLOptions };
-        const setIfDefined = (prop, value) => {
-            const property = glOptions[prop];
-            if (property !== undefined && typeof value === typeof property) {
-                glOptions[prop] = value;
-            }
-        };
-        if (type.indexOf('webgl') > -1) {
-            setIfDefined('alpha', contextOpts.alpha);
-            setIfDefined('antialias', contextOpts.antialias);
-            setIfDefined('depth', contextOpts.depth);
-            setIfDefined('failIfMajorPerformanceCaveat', contextOpts.failIfMajorPerformanceCaveat);
-            setIfDefined('powerPreference', contextOpts.powerPreference);
-            setIfDefined('premultipliedAlpha', contextOpts.premultipliedAlpha);
-            setIfDefined('preserveDrawingBuffer', contextOpts.preserveDrawingBuffer);
-            setIfDefined('stencil', contextOpts.stencil);
-            setIfDefined('desynchronized', contextOpts.desynchronized);
-            return glOptions;
-        }
-        return null;
-    }
     _readyEvent() {
         this.notify({
             eventName: 'ready',
@@ -776,63 +777,10 @@ let CanvasBase = class CanvasBase extends View {
         });
     }
     getAttribute(attrib) {
-        if (attrib === 'width') {
-            return this.width;
-        }
-        if (attrib === 'height') {
-            return this.height;
-        }
-        if (attrib === 'tabindex') {
-            return (this['tabindex'] = arguments[1]);
-        }
         return this[attrib];
     }
     setAttribute(attrib) {
-        if (attrib === 'width') {
-            if (!isNaN(parseInt(arguments[1]))) {
-                this.width = parseInt(arguments[1]);
-            }
-        }
-        if (attrib === 'height') {
-            if (!isNaN(parseInt(arguments[1]))) {
-                this.height = parseInt(arguments[1]);
-            }
-        }
-        if (attrib === 'tabindex') {
-            this['tabindex'] = arguments[1];
-        }
-    }
-    getSize(value, measuredSize, type) {
-        if (value === 'auto') {
-            return Utils.layout.toDeviceIndependentPixels(Utils.layout.getMeasureSpecSize(Utils.layout.makeMeasureSpec(measuredSize, Utils.layout.UNSPECIFIED)));
-        }
-        if (typeof value === 'string') {
-            value = PercentLength.parse(value);
-        }
-        if (typeof value === 'number') {
-            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') {
-                if (global.isAndroid) {
-                    return Utils.layout.toDevicePixels(value.value) || 0;
-                }
-                return value.value || 0;
-            }
-            else if (value.unit === '%') {
-                return Utils.layout.toDeviceIndependentPixels(measuredSize * value.value ?? 0);
-            }
-        }
-        return 0;
+        this[attrib] = attrib;
     }
     setPointerCapture(id) { }
     releasePointerCapture(id) { }
@@ -843,6 +791,4 @@ CanvasBase = __decorate([
     __metadata("design:paramtypes", [])
 ], CanvasBase);
 export { CanvasBase };
-ignorePixelScalingProperty.register(CanvasBase);
-upscaleProperty.register(CanvasBase);
 //# sourceMappingURL=common.js.map