chore: updates

packages/canvas-babylon/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nativescript/canvas-babylon",
-  "version": "2.0.0-alpha.26",
+  "version": "2.0.0-alpha.27",
   "description": "",
   "main": "index",
   "typings": "index.d.ts",

packages/canvas-chartjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nativescript/canvas-chartjs",
-  "version": "2.0.0-alpha.26",
+  "version": "2.0.0-alpha.27",
   "description": "ChartJS",
   "main": "index",
   "typings": "index.d.ts",

packages/canvas-media/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nativescript/canvas-media",
-  "version": "2.0.0-alpha.26",
+  "version": "2.0.0-alpha.27",
   "description": "Canvas media",
   "main": "index",
   "typings": "index.d.ts",

packages/canvas-phaser-ce/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nativescript/canvas-phaser-ce",
-  "version": "2.0.0-alpha.26",
+  "version": "2.0.0-alpha.27",
   "description": "Tools for using Phaser-ce to build native 2D games in NativeScript 👾",
   "main": "index",
   "typings": "index.d.ts",

packages/canvas-phaser/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nativescript/canvas-phaser",
-  "version": "2.0.0-alpha.26",
+  "version": "2.0.0-alpha.27",
   "description": "Build awesome 2D games with Phaser.js and NativeScript",
   "main": "index",
   "typings": "index.d.ts",

packages/canvas-pixi/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nativescript/canvas-pixi",
-  "version": "2.0.0-alpha.26",
+  "version": "2.0.0-alpha.27",
   "description": "Plugin for using pixi.js in NativeScript",
   "main": "index",
   "typings": "index.d.ts",

packages/canvas-polyfill/MutationObserver.ts

@@ -0,0 +1,30 @@
+export class MutationObserver {
+	private callback: any;
+	private element: any;
+	private interval: any;
+	private oldHtml: any;
+	constructor(callback: () => void) {
+		this.callback = callback;
+	}
+
+	observe(element, options) {
+		this.element = element;
+		return (this.interval = setInterval(
+			(function (_this) {
+				return function () {
+					var html;
+					html = _this.element.innerHTML;
+					if (html !== _this.oldHtml) {
+						_this.oldHtml = html;
+						return _this.callback(null);
+					}
+				};
+			})(this),
+			200
+		));
+	}
+
+	disconnect() {
+		return clearInterval(this.interval);
+	}
+}

packages/canvas-polyfill/index.ts

@@ -45,6 +45,14 @@ import { URL } from './URL';
 
 (global as any).Intl = (global as any).window.Intl = (global as any).Intl || {}; // pixijs
 
+import { MutationObserver } from './MutationObserver';
+
+Object.defineProperty(global, 'MutationObserver', {
+	value: MutationObserver,
+	configurable: true,
+	writable: true,
+});
+
 Object.defineProperty(global, 'Element', {
 	value: Element,
 	configurable: true,

packages/canvas-polyfill/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nativescript/canvas-polyfill",
-  "version": "2.0.0-alpha.26",
+  "version": "2.0.0-alpha.27",
   "description": "Polyfill for making NativeScript compatible with web libs like pixi.js, three.js, phaser.js, babylon.js, etc....",
   "main": "index",
   "typings": "index.d.ts",
@@ -34,6 +34,7 @@
   "bootstrapper": "@nativescript/plugin-seed",
   "dependencies": {
     "@nativescript/canvas": "alpha",
+    "@nativescript/canvas-media": "alpha",
     "xmldom": "~0.6.0",
     "query-selector": "2.0.0"
   }

packages/canvas-three/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nativescript/canvas-three",
-  "version": "2.0.0-alpha.26",
+  "version": "2.0.0-alpha.27",
   "description": "Utilities for using THREE.js on NativeScript",
   "main": "index",
   "typings": "index.d.ts",

packages/canvas/Canvas/common.ts

@@ -321,11 +321,26 @@ export const upscaleProperty = new Property<CanvasBase, boolean>({
 	valueConverter: booleanConverter,
 });
 
+export const ignoreTouchEventsProperty = new Property<CanvasBase, boolean>({
+	name: 'ignoreTouchEvents',
+	defaultValue: false,
+	valueConverter: booleanConverter,
+});
+
+export const doc = {
+	defaultView: {
+		getComputedStyle: function () {
+			return null;
+		},
+	},
+};
+
 @CSSType('Canvas')
 export abstract class CanvasBase extends View implements ICanvasBase {
 	public static readyEvent = 'ready';
 	ignorePixelScaling: boolean;
 	upscaleProperty: boolean;
+	ignoreTouchEvents: boolean;
 	_isCustom: boolean = false;
 	_classList: Set<any>;
 
@@ -356,6 +371,10 @@ export abstract class CanvasBase extends View implements ICanvasBase {
 		this._classList = new Set();
 	}
 
+	get ownerDocument() {
+		return window?.document ?? doc;
+	}
+
 	public addEventListener(arg: string, callback: any, thisArg?: any) {
 		super.addEventListener(arg, callback, thisArg);
 
@@ -464,7 +483,7 @@ export abstract class CanvasBase extends View implements ICanvasBase {
 		}
 	}
 
-	_moveCallback(pointers: { ptrId: number; x: number; y: number }[]) {
+	private _moveCallback(pointers: { ptrId: number; x: number; y: number }[]) {
 		const hasPointerCallbacks = this._pointerMoveCallbacks.size > 0;
 		const hasMouseCallbacks = this._mouseMoveCallbacks.size > 0;
 		if (hasPointerCallbacks || hasMouseCallbacks) {
@@ -545,7 +564,7 @@ export abstract class CanvasBase extends View implements ICanvasBase {
 		}
 	}
 
-	_upCallback(ptrId, x, y) {
+	private _upCallback(ptrId, x, y) {
 		const hasPointerCallbacks = this._pointerUpCallbacks.size > 0;
 		const hasMouseCallbacks = this._mouseUpCallbacks.size > 0;
 
@@ -598,10 +617,23 @@ export abstract class CanvasBase extends View implements ICanvasBase {
 
 			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: this._touches,
+				changedTouches,
 			});
 
 			for (const callback of this._touchEndCallbacks) {
@@ -610,7 +642,7 @@ export abstract class CanvasBase extends View implements ICanvasBase {
 		}
 	}
 
-	_downCallback(ptrId, x, y) {
+	private _downCallback(ptrId, x, y) {
 		const hasPointerCallbacks = this._pointerDownCallbacks.size > 0;
 		const hasMouseCallbacks = this._mouseDownCallbacks.size > 0;
 
@@ -679,7 +711,7 @@ export abstract class CanvasBase extends View implements ICanvasBase {
 		}
 	}
 
-	_cancelCallback(ptrid, x, y) {
+	private _cancelCallback(ptrid, x, y) {
 		const hasPointerCallbacks = this._pointerCancelCallbacks.size > 0;
 		const hasMouseCallbacks = this._mouseCancelCallbacks.size > 0;
 		if (hasPointerCallbacks || hasMouseCallbacks) {
@@ -743,7 +775,7 @@ export abstract class CanvasBase extends View implements ICanvasBase {
 		}
 	}
 
-	_pinchCallback(data: { event: string; deltaX: number; deltaY: number; deltaMode: number; pointers: { ptrId: number; x: number; y: number }[]; isInProgress: boolean }) {
+	private _pinchCallback(data: { event: string; deltaX: number; deltaY: number; deltaMode: number; pointers: { ptrId: number; x: number; y: number }[]; isInProgress: boolean }) {
 		// move callback
 
 		const hasPointerCallbacks = this._pointerMoveCallbacks.size > 0;

packages/canvas/Canvas/index.android.ts

@@ -1,4 +1,4 @@
-import { CanvasBase, ignorePixelScalingProperty, upscaleProperty } from './common';
+import { CanvasBase, doc, ignorePixelScalingProperty, ignoreTouchEventsProperty, upscaleProperty } from './common';
 import { DOMMatrix } from '../Canvas2D';
 import { CanvasRenderingContext2D } from '../Canvas2D/CanvasRenderingContext2D';
 import { WebGLRenderingContext } from '../WebGL/WebGLRenderingContext';
@@ -68,6 +68,10 @@ export class Canvas extends CanvasBase {
 		this._canvas.setIgnorePixelScaling(value);
 	}
 
+	[ignoreTouchEventsProperty.setNative](value: boolean) {
+		this._canvas.setIgnoreTouchEvents = value;
+	}
+
 	// @ts-ignore
 	get android() {
 		return this._canvas;
@@ -173,6 +177,32 @@ export class Canvas extends CanvasBase {
 					},
 				});
 			}
+			if (parent && typeof parent.getBoundingClientRect !== 'function') {
+				parent.getBoundingClientRect = function () {
+					const view = this;
+					const nativeView = view.android;
+					const width = this.width;
+					const height = this.height;
+					return {
+						bottom: nativeView.getBottom() / Screen.mainScreen.scale,
+						height: height,
+						left: nativeView.getLeft() / Screen.mainScreen.scale,
+						right: nativeView.getRight() / Screen.mainScreen.scale,
+						top: nativeView.getTop() / Screen.mainScreen.scale,
+						width: width,
+						x: nativeView.getX() / Screen.mainScreen.scale,
+						y: nativeView.getY() / Screen.mainScreen.scale,
+					};
+				};
+			}
+
+			if (parent && parent.ownerDocument === undefined) {
+				Object.defineProperty(parent, 'ownerDocument', {
+					get: function () {
+						return window?.document ?? doc;
+					},
+				});
+			}
 		});
 		this._canvas.setListener(
 			new org.nativescript.canvas.NSCCanvas.Listener({
@@ -289,9 +319,7 @@ export class Canvas extends CanvasBase {
 
 				if (!this._2dContext) {
 					this._layoutNative();
-					const opts = Object.assign(defaultOpts, this._handleContextOptions(type, options));
-
-					opts['fontColor'] = this.parent?.style?.color?.android || -16777216;
+					const opts = { ...defaultOpts, ...this._handleContextOptions(type, options), fontColor: this.parent?.style?.color?.android || -16777216 };
 
 					const ctx = this._canvas.create2DContext(opts.alpha, opts.antialias, opts.depth, opts.failIfMajorPerformanceCaveat, opts.powerPreference, opts.premultipliedAlpha, opts.preserveDrawingBuffer, opts.stencil, opts.desynchronized, opts.xrCompatible, opts.fontColor);
 					this._2dContext = new (CanvasRenderingContext2D as any)(ctx);
@@ -310,8 +338,7 @@ export class Canvas extends CanvasBase {
 				}
 				if (!this._webglContext) {
 					this._layoutNative();
-					const opts = Object.assign({ version: 'v1' }, Object.assign(defaultOpts, this._handleContextOptions(type, options)));
-
+					const opts = { version: 'v1', ...defaultOpts, ...this._handleContextOptions(type, options) };
 					this._canvas.initContext(type, opts.alpha, false, opts.depth, opts.failIfMajorPerformanceCaveat, opts.powerPreference, opts.premultipliedAlpha, opts.preserveDrawingBuffer, opts.stencil, opts.desynchronized, opts.xrCompatible);
 					this._webglContext = new (WebGLRenderingContext as any)(this._canvas, opts);
 					(this._webglContext as any)._canvas = this;
@@ -326,7 +353,7 @@ export class Canvas extends CanvasBase {
 				}
 				if (!this._webgl2Context) {
 					this._layoutNative();
-					const opts = Object.assign({ version: 'v2' }, Object.assign(defaultOpts, this._handleContextOptions(type, options)));
+					const opts = { version: 'v2', ...defaultOpts, ...this._handleContextOptions(type, options) };
 
 					this._canvas.initContext(type, opts.alpha, false, opts.depth, opts.failIfMajorPerformanceCaveat, opts.powerPreference, opts.premultipliedAlpha, opts.preserveDrawingBuffer, opts.stencil, opts.desynchronized, opts.xrCompatible);
 
@@ -356,14 +383,14 @@ export class Canvas extends CanvasBase {
 		const width = this.width;
 		const height = this.height;
 		return {
-			bottom: nativeView.getBottom(),
+			bottom: nativeView.getBottom() / Screen.mainScreen.scale,
 			height: height,
-			left: nativeView.getLeft(),
-			right: nativeView.getRight(),
-			top: nativeView.getTop(),
+			left: nativeView.getLeft() / Screen.mainScreen.scale,
+			right: nativeView.getRight() / Screen.mainScreen.scale,
+			top: nativeView.getTop() / Screen.mainScreen.scale,
 			width: width,
-			x: nativeView.getX(),
-			y: nativeView.getY(),
+			x: nativeView.getX() / Screen.mainScreen.scale,
+			y: nativeView.getY() / Screen.mainScreen.scale,
 		};
 	}
 

packages/canvas/Canvas/index.ios.ts

@@ -1,4 +1,4 @@
-import { CanvasBase, ignorePixelScalingProperty } from './common';
+import { CanvasBase, doc, ignorePixelScalingProperty, ignoreTouchEventsProperty } from './common';
 import { DOMMatrix } from '../Canvas2D';
 import { CanvasRenderingContext2D } from '../Canvas2D/CanvasRenderingContext2D';
 import { WebGLRenderingContext } from '../WebGL/WebGLRenderingContext';
@@ -92,6 +92,10 @@ export class Canvas extends CanvasBase {
 		this._canvas.ignorePixelScaling = value;
 	}
 
+	[ignoreTouchEventsProperty.setNative](value: boolean) {
+		this._canvas.ignoreTouchEvents = value;
+	}
+
 	// @ts-ignore
 	get ios() {
 		return this._canvas;
@@ -178,6 +182,33 @@ export class Canvas extends CanvasBase {
 				},
 			});
 		}
+
+		if (parent && typeof parent.getBoundingClientRect !== 'function') {
+			parent.getBoundingClientRect = function () {
+				const view = this;
+				const frame = view.ios.frame as CGRect;
+				const width = view.width;
+				const height = view.height;
+				return {
+					bottom: height,
+					height: height,
+					left: frame.origin.x,
+					right: width,
+					top: frame.origin.y,
+					width: width,
+					x: frame.origin.x,
+					y: frame.origin.y,
+				};
+			};
+		}
+
+		if (parent && parent.ownerDocument === undefined) {
+			Object.defineProperty(parent, 'ownerDocument', {
+				get: function () {
+					return window?.document ?? doc;
+				},
+			});
+		}
 	}
 
 	createNativeView() {

packages/canvas/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nativescript/canvas",
-  "version": "2.0.0-alpha.26",
+  "version": "2.0.0-alpha.27",
   "description": "DOM Canvas API for NativeScript",
   "main": "index",
   "typings": "index.d.ts",

packages/canvas/platforms/ios/CanvasNative.xcframework/ios-arm64/CanvasNative.framework/Headers/canvas_native.h

@@ -1116,7 +1116,7 @@ struct U8Buffer *canvas_native_text_decoder_decode_as_bytes(const struct TextDec
                                                             uintptr_t size);
 
 const char *canvas_native_text_decoder_decode_c_string(const struct TextDecoder *decoder,
-                                                       const int8_t *data);
+                                                       const char *data);
 
 const char *canvas_native_text_decoder_get_encoding(const struct TextDecoder *decoder);