chore: improve svg handling

apps/demo/src/app.ts

@@ -10,12 +10,15 @@ let monitor;
 import { Application, path as filePath, knownFolders, Utils, path as nsPath, ImageSource, Trace } from '@nativescript/core';
 
 Application.on('discardedError', (args) => {
-	console.log(args.error);
+	console.log('discardedError', args.error, args);
+});
+
+Application.on('uncaughtError', (args) => {
+	console.log('uncaughtError', args.error, args);
 });
 global.process = {} as any;
 global.process.env = {} as any;
 
-
 // 0.253ms 1
 // 0.438ms 10
 // 17.375ms 100
@@ -82,7 +85,6 @@ const age = parseInt(params.get("age") as any); // is the number 18
 
 // const path = new Path2D();
 
-
 // slow 0.484
 // eval(`
 // function arc(x, y) { return path.arc(x, y); }
@@ -122,15 +124,13 @@ const age = parseInt(params.get("age") as any); // is the number 18
 // }
 // console.timeEnd('fast');
 
-
 // const pathToAdd = new Path2D();
 // pathToAdd.arc(100, 75, 50, 0, 2 * Math.PI);
 // const path1 = new Path2D();
 // console.time('fast:addPath');
 // path1.addPath(pathToAdd);
 // console.timeEnd('fast:addPath');
 
-
 // eval(`
 // const pathToAdd = new Path2D();
 // pathToAdd.arc(100, 75, 50, 0, 2 * Math.PI);
@@ -141,7 +141,6 @@ const age = parseInt(params.get("age") as any); // is the number 18
 // console.timeEnd('fast:addPath');
 // `);
 
-
 // eval(`
 // const pathToAdd = new Path2D();
 // pathToAdd.arc(100, 75, 50, 0, 2 * Math.PI);
@@ -152,12 +151,10 @@ const age = parseInt(params.get("age") as any); // is the number 18
 // console.timeEnd('fast:addPath');
 // `);
 
-
 // for (let i = 0; i < 1_000; i++) {
 // 	path2.addPath(path);
 // }
 
-
 // console.time('url');
 // for (let i = 0; i < 1_000_000; i++) {
 // 	const url = new URL('https://example.com/?name=Jonathan%20Smith&age=18');

packages/canvas-babylon/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nativescript/canvas-babylon",
-  "version": "2.0.0-beta.18",
+  "version": "2.0.0-beta.19",
   "description": "",
   "main": "index",
   "typings": "index.d.ts",

packages/canvas-media/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nativescript/canvas-media",
-  "version": "2.0.0-beta.18",
+  "version": "2.0.0-beta.19",
   "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-beta.18",
+  "version": "2.0.0-beta.19",
   "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-beta.18",
+  "version": "2.0.0-beta.19",
   "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-beta.18",
+  "version": "2.0.0-beta.19",
   "description": "Plugin for using pixi.js in NativeScript",
   "main": "index",
   "typings": "index.d.ts",

packages/canvas-polyfill/DOM/DOMPointReadOnly.ts

@@ -0,0 +1,45 @@
+export class DOMPointReadOnly {
+	x: number = 0;
+	y: number = 0;
+	z: number = 0;
+	w: number = 1;
+	constructor(x = 0, y = 0, z = 0, w = 1) {
+		if (typeof x === 'number') {
+			this.x = x;
+		}
+		if (typeof y === 'number') {
+			this.y = y;
+		}
+		if (typeof z === 'number') {
+			this.z = z;
+		}
+		if (typeof w === 'number') {
+			this.w = w;
+		}
+	}
+
+	static fromPoint(value: DOMPointReadOnly | { x?: number; y?: number; z?: number; w?: number }) {
+		if (value instanceof DOMPointReadOnly) {
+			return new DOMPointReadOnly(value.x, value.y, value.z, value.y);
+		}
+		return new DOMPointReadOnly(value?.x ?? 0, value?.y ?? 0, value?.z ?? 0, value?.w ?? 1);
+	}
+
+	toJSON() {
+		return {
+			x: this.x,
+			y: this.y,
+			z: this.z,
+			w: this.w,
+		};
+	}
+}
+
+export class DOMPoint extends DOMPointReadOnly {
+	static fromPoint(value: DOMPointReadOnly | DOMPoint | { x?: number; y?: number; z?: number; w?: number }) {
+		if (value instanceof DOMPointReadOnly) {
+			return new DOMPoint(value.x, value.y, value.z, value.y);
+		}
+		return new DOMPoint(value?.x ?? 0, value?.y ?? 0, value?.z ?? 0, value?.w ?? 1);
+	}
+}

packages/canvas-polyfill/DOM/Element.ts

@@ -2,7 +2,7 @@ import { Node } from './Node';
 import { ViewBase } from '@nativescript/core';
 import setValue from 'set-value';
 import querySelector from 'query-selector';
-
+import { HTMLCollection } from './HTMLCollection';
 declare const NSCanvas;
 
 export class DOMRectReadOnly {
@@ -77,7 +77,7 @@ export class Element extends Node {
 	get children() {
 		const element = (<any>this)._xmlDom?.documentElement ?? (<any>this)._xmlDom;
 		if (element) {
-			const ret = [];
+			const ret = new HTMLCollection();
 			const length = element?.childNodes?.length ?? 0;
 
 			for (let i = 0; i < length; i++) {

packages/canvas-polyfill/DOM/HTMLCollection.ts

@@ -0,0 +1,10 @@
+export class HTMLCollection extends Array {
+	item(index: number) {
+		return this[index];
+	}
+
+	namedItem(nameOrId: string) {
+		// todo
+		return null;
+	}
+}

packages/canvas-polyfill/DOM/XMLDocument.ts

@@ -19,6 +19,7 @@ export class XMLDocument extends Doc {
 			const doc = new XMLDocument();
 			doc.__instance = instance;
 			const documentElement = instance?.documentElement;
+
 			if (documentElement?.nodeName === 'svg' && documentElement?.namespaceURI === 'http://www.w3.org/2000/svg') {
 				const svg = new SVGSVGElement('svg') as any;
 				svg.__instance = instance.documentElement;