@nativescript/canvas 2.0.0-rc.2 → 2.0.0-rc.21

package/Canvas/common.js

@@ -34,12 +34,23 @@ export class Event {
         this.type = type;
         this.bubbles = options?.bubbles ?? false;
         this.cancelable = options?.cancelable ?? false;
-        this.cancelable = options?.cancelable ?? false;
         this.composed = options?.composed ?? false;
         this.target = options?.target ?? null;
+        this._preventDefault = options?.preventDefault;
+        this._stopPropagation = options?.stopPropagation;
+    }
+    preventDefault() {
+        this._preventDefault?.();
+    }
+    stopPropagation() {
+        this._stopPropagation?.();
+    }
+}
+export class CustomEvent extends Event {
+    constructor(type, options) {
+        super(type, options);
+        this.detail = options?.detail ?? null;
     }
-    preventDefault() { }
-    stopPropagation() { }
 }
 export class UIEvent extends Event {
     constructor(type, options) {
@@ -85,8 +96,6 @@ export class PointerEvent extends MouseEvent {
         this.twist = options?.twist ?? 0;
         this.isPrimary = options?.isPrimary ?? false;
     }
-    preventDefault() { }
-    stopPropagation() { }
 }
 export class Touch {
     constructor(options) {
@@ -133,8 +142,6 @@ export class TouchEvent extends UIEvent {
         this.ctrlKey = options?.ctrlKey ?? false;
         this.shiftKey = options?.shiftKey ?? false;
     }
-    preventDefault() { }
-    stopPropagation() { }
 }
 export class WheelEvent extends UIEvent {
     constructor(type, options) {
@@ -188,7 +195,7 @@ let CanvasBase = class CanvasBase extends View {
         this._touchCancelCallbacks = new Array();
         this._touches = [];
         this._touchesById = [];
-        this._lastPointerEventById = [];
+        this._lastPointerEventById = new Map();
         this.__target = null;
         this._classList = new Set();
         this.style.width = { unit: '%', value: 1 };
@@ -327,19 +334,13 @@ let CanvasBase = class CanvasBase extends View {
     _moveCallback(pointers) {
         const hasPointerCallbacks = this._pointerMoveCallbacks.length > 0;
         const hasMouseCallbacks = this._mouseMoveCallbacks.length > 0;
-        if (hasPointerCallbacks || hasMouseCallbacks) {
+        const hasTouchCallbacks = this._touchMoveCallbacks.length > 0;
+        if (hasPointerCallbacks || hasMouseCallbacks || hasTouchCallbacks) {
+            let preventDefault = false;
+            const changedTouches = hasTouchCallbacks ? TouchList.empty() : null;
             for (const pointer of pointers) {
                 const pointerId = pointer.ptrId;
-                const index = this._lastPointerEventById.findIndex((item) => {
-                    return item?.pointerId === pointerId;
-                });
-                let previousEvent;
-                if (index > -1) {
-                    previousEvent = this._lastPointerEventById[index];
-                }
-                else {
-                    previousEvent = { pointerId, x: 0, y: 0 };
-                }
+                const previousEvent = this._lastPointerEventById.get(pointerId) ?? { pointerId, x: 0, y: 0 };
                 if (hasPointerCallbacks) {
                     const event = new PointerEvent('pointermove', {
                         pointerType: 'touch',
@@ -355,12 +356,49 @@ let CanvasBase = class CanvasBase extends View {
                         isPrimary: pointer.isPrimary,
                         button: -1,
                         target: this.__target ?? this,
+                        cancelable: true,
+                        preventDefault: () => {
+                            preventDefault = true;
+                        },
                     });
                     for (const callback of this._pointerMoveCallbacks) {
                         callback(event);
                     }
                 }
-                if (hasMouseCallbacks) {
+                if (!preventDefault && hasTouchCallbacks) {
+                    changedTouches.push(new Touch({
+                        identifier: pointer.ptrId,
+                        target: this.__target ?? this,
+                        clientX: pointer.x,
+                        clientY: pointer.y,
+                        screenX: pointer.x,
+                        screenY: pointer.y,
+                        pageX: pointer.x,
+                        pageY: pointer.y,
+                    }));
+                }
+                this._lastPointerEventById.set(pointerId, { pointerId, x: pointer.x, y: pointer.y });
+            }
+            if ((changedTouches?.length ?? 0) > 0) {
+                const touches = TouchList.fromList(this._touches);
+                const event = new TouchEvent('touchmove', {
+                    touches,
+                    targetTouches: touches,
+                    changedTouches,
+                    target: this.__target ?? this,
+                    cancelable: true,
+                    preventDefault: () => {
+                        preventDefault = true;
+                    },
+                });
+                for (const callback of this._touchMoveCallbacks) {
+                    callback(event);
+                }
+            }
+            if (!preventDefault && hasMouseCallbacks) {
+                for (const pointer of pointers) {
+                    const pointerId = pointer.ptrId;
+                    const previousEvent = this._lastPointerEventById.get(pointerId) ?? { pointerId, x: 0, y: 0 };
                     const event = new MouseEvent('mousemove', {
                         clientX: pointer.x,
                         clientY: pointer.y,
@@ -372,48 +410,24 @@ let CanvasBase = class CanvasBase extends View {
                         movementY: pointer.y - previousEvent.y,
                         button: -1,
                         target: this.__target ?? this,
+                        preventDefault: () => {
+                            preventDefault = true;
+                        },
                     });
-                    // 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 };
+                    for (const callback of this._mouseMoveCallbacks) {
+                        callback(event);
+                    }
                 }
             }
         }
-        if (this._touchMoveCallbacks.length > 0) {
-            const changedTouches = TouchList.empty();
-            for (const pointer of pointers) {
-                changedTouches.push(new Touch({
-                    identifier: pointer.ptrId,
-                    target: this.__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,
-                target: this.__target ?? this,
-            });
-            for (const callback of this._touchMoveCallbacks) {
-                callback(event);
-            }
-        }
     }
     _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;
+        const hasTouchCallbacks = this._touchEndCallbacks.length > 0;
+        const pointerId = ptrId;
+        if (hasPointerCallbacks || hasMouseCallbacks || hasTouchCallbacks) {
+            let preventDefault = false;
             if (hasPointerCallbacks) {
                 const up = new PointerEvent('pointerup', {
                     pointerType: 'touch',
@@ -426,6 +440,10 @@ let CanvasBase = class CanvasBase extends View {
                     pageX: x,
                     pageY: y,
                     target: this.__target ?? this,
+                    cancelable: true,
+                    preventDefault: () => {
+                        preventDefault = true;
+                    },
                 });
                 const out = new PointerEvent('pointerout', {
                     pointerType: 'touch',
@@ -461,7 +479,35 @@ let CanvasBase = class CanvasBase extends View {
                     callback(leave);
                 }
             }
-            if (hasMouseCallbacks) {
+            if (hasTouchCallbacks && !preventDefault) {
+                const touches = TouchList.fromList(this._touches.filter((t) => t.identifier !== ptrId));
+                const changedTouches = TouchList.fromList([
+                    new Touch({
+                        identifier: ptrId,
+                        target: this.__target ?? this,
+                        clientX: x,
+                        clientY: y,
+                        screenX: x,
+                        screenY: y,
+                        pageX: x,
+                        pageY: y,
+                    }),
+                ]);
+                const event = new TouchEvent('touchend', {
+                    touches,
+                    targetTouches: touches,
+                    changedTouches,
+                    target: this.__target ?? this,
+                    cancelable: true,
+                    preventDefault: () => {
+                        preventDefault = true;
+                    },
+                });
+                for (const callback of this._touchEndCallbacks) {
+                    callback(event);
+                }
+            }
+            if (hasMouseCallbacks && !preventDefault) {
                 const event = new MouseEvent('mouseup', {
                     clientX: x,
                     clientY: y,
@@ -470,17 +516,13 @@ let CanvasBase = class CanvasBase extends View {
                     pageX: x,
                     pageY: y,
                     target: this.__target ?? this,
+                    preventDefault: () => {
+                        preventDefault = true;
+                    },
                 });
-                // 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;
-            });
-            if (index > -1) {
-                this._lastPointerEventById.splice(index, 1);
+                for (const callback of this._mouseUpCallbacks) {
+                    callback(event);
+                }
             }
         }
         const length = this._touches.length;
@@ -490,35 +532,14 @@ let CanvasBase = class CanvasBase extends View {
                 break;
             }
         }
-        if (this._touchEndCallbacks.length > 0) {
-            const touches = TouchList.fromList(this._touches);
-            const changedTouches = TouchList.fromList([
-                new Touch({
-                    identifier: ptrId,
-                    target: this.__target ?? this,
-                    clientX: x,
-                    clientY: y,
-                    screenX: x,
-                    screenY: y,
-                    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);
-            }
-        }
+        this._lastPointerEventById.delete(pointerId);
     }
     _downCallback(ptrId, x, y, isPrimary = false) {
         const hasPointerCallbacks = this._pointerDownCallbacks.length > 0;
         const hasMouseCallbacks = this._mouseDownCallbacks.length > 0;
-        if (hasPointerCallbacks || hasMouseCallbacks) {
+        const hasTouchCallbacks = this._touchStartCallbacks.length > 0;
+        if (hasPointerCallbacks || hasMouseCallbacks || hasTouchCallbacks) {
+            let preventDefault = false;
             const pointerId = ptrId;
             if (hasPointerCallbacks) {
                 const event = new PointerEvent('pointerdown', {
@@ -532,57 +553,69 @@ let CanvasBase = class CanvasBase extends View {
                     pageX: x,
                     pageY: y,
                     target: this.__target ?? this,
+                    cancelable: true,
+                    preventDefault: () => {
+                        preventDefault = true;
+                    },
                 });
                 for (const callback of this._pointerDownCallbacks) {
                     callback(event);
                 }
             }
-            if (hasMouseCallbacks) {
-                const event = new MouseEvent('mousedown', {
+            if (hasTouchCallbacks && !preventDefault) {
+                const touch = new Touch({
+                    identifier: ptrId,
+                    target: this.__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,
                     target: this.__target ?? this,
+                    cancelable: true,
+                    preventDefault: () => {
+                        preventDefault = true;
+                    },
                 });
-                // todo emit mousedown when desktop is supported
-                // for (const callback of this._mouseDownCallbacks) {
-                // 	callback(event);
-                // }
+                for (const callback of this._touchStartCallbacks) {
+                    callback(touchEvent);
+                }
             }
-            this._lastPointerEventById.push({ pointerId, x, y });
-        }
-        if (this._touchStartCallbacks.length > 0) {
-            const touch = new Touch({
-                identifier: ptrId,
-                target: this.__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,
-                target: this.__target ?? this,
-            });
-            for (const callback of this._touchStartCallbacks) {
-                callback(touchEvent);
+            if (hasMouseCallbacks && !preventDefault) {
+                const event = new MouseEvent('mousedown', {
+                    clientX: x,
+                    clientY: y,
+                    screenX: x,
+                    screenY: y,
+                    pageX: x,
+                    pageY: y,
+                    target: this.__target ?? this,
+                    preventDefault: () => {
+                        preventDefault = true;
+                    },
+                });
+                for (const callback of this._mouseDownCallbacks) {
+                    callback(event);
+                }
             }
+            this._lastPointerEventById.set(pointerId, { pointerId, x, y });
         }
     }
     _cancelCallback(ptrId, x, y, isPrimary = false) {
         const hasPointerCallbacks = this._pointerCancelCallbacks.length > 0;
         const hasMouseCallbacks = this._mouseCancelCallbacks.length > 0;
-        if (hasPointerCallbacks || hasMouseCallbacks) {
+        const hasTouchCallbacks = this._touchCancelCallbacks.length > 0;
+        if (hasPointerCallbacks || hasMouseCallbacks || hasTouchCallbacks) {
+            let preventDefault = false;
             const pointerId = ptrId;
             if (hasPointerCallbacks) {
                 const event = new PointerEvent('pointercancel', {
@@ -596,51 +629,62 @@ let CanvasBase = class CanvasBase extends View {
                     pageY: y,
                     isPrimary,
                     target: this.__target ?? this,
+                    cancelable: true,
+                    preventDefault: () => {
+                        preventDefault = true;
+                    },
                 });
                 for (const callback of this._pointerCancelCallbacks) {
                     callback(event);
                 }
             }
-            if (hasMouseCallbacks) {
-                const event = new MouseEvent('mouseout', {
+            if (hasTouchCallbacks && !preventDefault) {
+                const touch = new Touch({
+                    identifier: ptrId,
+                    target: this.__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,
                     target: this.__target ?? this,
+                    cancelable: true,
+                    preventDefault: () => {
+                        preventDefault = true;
+                    },
                 });
-                // todo emit mouseout when desktop is supported
-                // for (const callback of this._mouseCancelCallbacks) {
-                // 	callback(event);
-                // }
+                for (const callback of this._touchCancelCallbacks) {
+                    callback(touchEvent);
+                }
             }
-        }
-        if (this._touchCancelCallbacks.length > 0) {
-            const touch = new Touch({
-                identifier: ptrId,
-                target: this.__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,
-                target: this.__target ?? this,
-            });
-            for (const callback of this._touchCancelCallbacks) {
-                callback(touchEvent);
+            if (hasMouseCallbacks && !preventDefault) {
+                const event = new MouseEvent('mouseout', {
+                    clientX: x,
+                    clientY: y,
+                    screenX: x,
+                    screenY: y,
+                    pageX: x,
+                    pageY: y,
+                    target: this.__target ?? this,
+                    preventDefault: () => {
+                        preventDefault = true;
+                    },
+                });
+                for (const callback of this._mouseCancelCallbacks) {
+                    callback(event);
+                }
             }
+            this._lastPointerEventById.set(pointerId, { pointerId, x, y });
         }
     }
     _pinchCallback(data) {
@@ -648,19 +692,13 @@ let CanvasBase = class CanvasBase extends View {
         const hasPointerCallbacks = this._pointerMoveCallbacks.length > 0;
         const hasMouseCallbacks = this._mouseMoveCallbacks.length > 0;
         const hasMouseWheel = this._mouseWheelCallbacks.length > 0;
-        if (hasPointerCallbacks || hasMouseCallbacks || hasMouseWheel) {
+        const hasTouchCallbacks = this._touchMoveCallbacks.length > 0;
+        if (hasPointerCallbacks || hasMouseCallbacks || hasMouseWheel || hasTouchCallbacks) {
+            const changedTouches = hasTouchCallbacks ? TouchList.empty() : null;
+            let preventDefault = false;
             for (const pointer of data.pointers) {
                 const pointerId = pointer.ptrId;
-                const index = this._lastPointerEventById.findIndex((item) => {
-                    return item?.pointerId === pointerId;
-                });
-                let previousEvent;
-                if (index > -1) {
-                    previousEvent = this._lastPointerEventById[index];
-                }
-                else {
-                    previousEvent = { pointerId, x: 0, y: 0 };
-                }
+                const previousEvent = this._lastPointerEventById.get(pointerId) ?? { pointerId, x: 0, y: 0 };
                 if (hasPointerCallbacks) {
                     const event = new PointerEvent('pointermove', {
                         pointerType: 'touch',
@@ -675,12 +713,49 @@ let CanvasBase = class CanvasBase extends View {
                         movementY: pointer.y - previousEvent.y,
                         button: -1,
                         target: this.__target ?? this,
+                        cancelable: true,
+                        preventDefault: () => {
+                            preventDefault = true;
+                        },
                     });
                     for (const callback of this._pointerMoveCallbacks) {
                         callback(event);
                     }
                 }
-                if (hasMouseCallbacks) {
+                if (hasTouchCallbacks && !preventDefault) {
+                    changedTouches.push(new Touch({
+                        identifier: pointer.ptrId,
+                        target: this.__target ?? this,
+                        clientX: pointer.x,
+                        clientY: pointer.y,
+                        screenX: pointer.x,
+                        screenY: pointer.y,
+                        pageX: pointer.x,
+                        pageY: pointer.y,
+                    }));
+                }
+                this._lastPointerEventById.set(pointerId, { pointerId, x: pointer.x, y: pointer.y });
+            }
+            if ((changedTouches?.length ?? 0) > 0) {
+                const touches = TouchList.fromList(this._touches);
+                const event = new TouchEvent('touchmove', {
+                    touches,
+                    targetTouches: touches,
+                    changedTouches,
+                    target: this.__target ?? this,
+                    cancelable: true,
+                    preventDefault: () => {
+                        preventDefault = true;
+                    },
+                });
+                for (const callback of this._touchMoveCallbacks) {
+                    callback(event);
+                }
+            }
+            if (!preventDefault && hasMouseCallbacks) {
+                for (const pointer of data.pointers) {
+                    const pointerId = pointer.ptrId;
+                    const previousEvent = this._lastPointerEventById.get(pointerId) ?? { pointerId, x: 0, y: 0 };
                     const event = new MouseEvent('mousemove', {
                         clientX: pointer.x,
                         clientY: pointer.y,
@@ -692,53 +767,26 @@ let CanvasBase = class CanvasBase extends View {
                         movementY: pointer.y - previousEvent.y,
                         button: -1,
                         target: this.__target ?? this,
+                        preventDefault: () => {
+                            preventDefault = true;
+                        },
                     });
-                    // todo emit mousemove when desktop is supported
-                    // 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,
-                        target: this.__target ?? this,
-                    });
-                    // 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 };
+                    for (const callback of this._mouseMoveCallbacks) {
+                        callback(event);
+                    }
                 }
             }
-        }
-        if (this._touchMoveCallbacks.length > 0) {
-            const changedTouches = [];
-            for (const pointer of data.pointers) {
-                changedTouches.push(new Touch({
-                    identifier: pointer.ptrId,
+            if (hasMouseWheel) {
+                const event = new WheelEvent('wheel', {
+                    deltaX: data.deltaX,
+                    deltaY: data.deltaY,
+                    deltaZ: 0,
+                    deltaMode: data.deltaMode,
                     target: this.__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,
-                target: this.__target ?? this,
-            });
-            for (const callback of this._touchMoveCallbacks) {
-                callback(event);
+                });
+                for (const callback of this._mouseWheelCallbacks) {
+                    callback(event);
+                }
             }
         }
     }
@@ -784,6 +832,9 @@ let CanvasBase = class CanvasBase extends View {
     }
     setPointerCapture(id) { }
     releasePointerCapture(id) { }
+    getRootNode() {
+        return this;
+    }
 };
 CanvasBase.readyEvent = 'ready';
 CanvasBase = __decorate([