chore: updates

fixes: svg crash

Author: triniwiz

apps/demo/package.json

@@ -14,6 +14,7 @@
     "@nativescript/canvas-polyfill": "file:../../packages/canvas-polyfill",
     "@nativescript/canvas-three": "file:../../packages/canvas-three",
     "@nativescript/core": "file:../../node_modules/@nativescript/core",
+    "@pixi-essentials/svg": "file:../../node_modules/@pixi-essentials/svg",
     "babylonjs": "file:../../node_modules/babylonjs",
     "babylonjs-materials": "file:../../node_modules/babylonjs-materials",
     "chart.js": "file:../../node_modules/chart.js",

package.json

@@ -40,7 +40,9 @@
 		"@nativescript/types": "~8.5.0",
 		"@nativescript/webpack": "~5.0.5",
 		"@ngtools/webpack": "^15.0.0",
+		"@pixi-essentials/svg": "^2.0.1",
 		"@types/three": "^0.157.0",
+		"@xmldom/xmldom": "0.8.10",
 		"babylonjs": "^6.0.0",
 		"babylonjs-materials": "^6.0.0",
 		"canvg": "^4.0.1",
@@ -60,6 +62,7 @@
 		"pixi-filters": "~5.3.0",
 		"pixi.js": "~7.3.1",
 		"pixi.js-legacy": "~7.3.1",
+		"pixi-viewport": "^5.0.2",
 		"playcanvas": "^1.66.1",
 		"query-selector": "2.0.0",
 		"react-nativescript": "^4.0.0",
@@ -70,16 +73,12 @@
 		"typescript": "~4.8.0",
 		"util": "~0.12.5",
 		"vexflow": "^4.2.3",
-		"@xmldom/xmldom": "0.8.10",
 		"zen-3d": "0.0.3",
 		"zone.js": "~0.13.0"
 	},
 	"lint-staged": {
 		"**/*.{js,ts,scss,json,html}": [
 			"npx prettier --write"
 		]
-	},
-	"dependencies": {
-		"pixi-viewport": "^5.0.2"
 	}
 }

packages/canvas-babylon/package.json

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

packages/canvas-polyfill/DOM/Document.ts

@@ -8,16 +8,16 @@ import { Canvas } from '@nativescript/canvas';
 import { Frame, StackLayout } from '@nativescript/core';
 import { Node } from './Node';
 import { Element } from './Element';
-
+import { SVGSVGElement } from './svg/SVGSVGElement';
 export class Document extends Node {
 	readonly body: Element;
 	private _documentElement: Element;
 	private readyState: string;
 	readonly head: Element;
-
+	__instance: Document;
 	get defaultView() {
 		return global.window;
-	};
+	}
 
 	constructor() {
 		super('#document');
@@ -41,7 +41,7 @@ export class Document extends Node {
 				// Return nothing to keep firebase working.
 				return null;
 			case 'svg':
-				return new SVGElement();
+				return new SVGSVGElement('svg');
 			case 'rect':
 				return new SVGRectElement();
 			case 'circle':
@@ -69,6 +69,9 @@ export class Document extends Node {
 	}
 
 	getElementById(id: string) {
+		if (this.__instance) {
+			return this.__instance.getElementById(id);
+		}
 		const topmost = Frame.topmost();
 		if (topmost) {
 			const nativeElement = topmost.getViewById(id);
@@ -91,24 +94,34 @@ export class Document extends Node {
 	}
 
 	getElementsByTagName(tagname: string) {
+		if (this.__instance) {
+			return this.__instance.getElementsByTagName(tagname);
+		}
 		return [];
 	}
 
 	get documentElement() {
-		return this._documentElement;
+		if (this._documentElement) {
+			return this._documentElement;
+		}
+		if (this.__instance) {
+			return this.__instance?.documentElement;
+		}
+		return null;
 	}
 
 	//@ts-ignore
-	set documentElement(value) {
-	}
+	set documentElement(value) {}
 
 	querySelectorAll(selector) {
+		if (this.__instance) {
+			return this.__instance.querySelectorAll?.(selector) ?? [];
+		}
 		return [];
-		//return (this as any)._instance?.querySelectorAll?.(selector) ?? [];
 	}
 
 	querySelector(selector) {
-		// const ret = (this as any)._instance?.querySelectorAll?.(selector);
+		const ret = this.__instance?.querySelectorAll?.(selector);
 		// let element = ret?.[0] ?? null;
 		// if (ret === undefined) {
 		// 	const items = (this as any)._instance.getElementsByTagName(selector);

packages/canvas-polyfill/DOM/Element.ts

@@ -33,7 +33,6 @@ export class DOMRect extends DOMRectReadOnly {
 	}
 }
 
-
 export class Element extends Node {
 	private _classList = new Set();
 	_nativeElement: ViewBase;
@@ -43,7 +42,6 @@ export class Element extends Node {
 	private _attributeOriginalValue: Map<string, unknown> = new Map();
 	private _jsBuffer: Float32Array;
 
-
 	set nativeElement(value) {
 		this._nativeElement = value;
 		if (value) {
@@ -76,6 +74,61 @@ export class Element extends Node {
 		return this.nodeName;
 	}
 
+	get children() {
+		const element = (<any>this)._xmlDom?.documentElement ?? (<any>this)._xmlDom;
+		if (element) {
+			const ret = [];
+			const length = element?.childNodes?.length ?? 0;
+
+			for (let i = 0; i < length; i++) {
+				const node = element.childNodes.item(i);
+				if (node) {
+					switch (node.nodeName) {
+						case 'line':
+							{
+								const line = new SVGLineElement() as any;
+								line.__instance = node;
+								ret.push(line);
+							}
+							break;
+						case 'polyline':
+							{
+								const polyline = new SVGPolylineElement() as any;
+								polyline.__instance = node;
+								ret.push(polyline);
+							}
+							break;
+						case 'g':
+							{
+								const g = new SVGGElement() as any;
+								g.__instance = node;
+								ret.push(g);
+							}
+							break;
+						case 'path':
+							{
+								const path = new SVGPathElement() as any;
+								path.__instance = node;
+								ret.push(path);
+							}
+							break;
+						case 'rect':
+							{
+								const rect = new SVGRectElement() as any;
+								rect.__instance = node;
+								ret.push(rect);
+							}
+							break;
+					}
+				}
+			}
+
+			return ret;
+		}
+
+		return [];
+	}
+
 	getAttribute(key: string): unknown {
 		if (this.nativeElement) {
 			return this.nativeElement[key];
@@ -108,11 +161,9 @@ export class Element extends Node {
 		}
 	}
 
-	setAttributeNS() {
-	}
+	setAttributeNS() {}
 
-	removeAttributeNS() {
-	}
+	removeAttributeNS() {}
 
 	querySelector(selector: string) {
 		const selection = querySelector(selector, this);
@@ -126,7 +177,6 @@ export class Element extends Node {
 		return querySelector(selector, this);
 	}
 
-
 	getBoundingClientRect() {
 		const nativeElement = this['nativeElement'];
 		if (this.nodeName === 'CANVAS') {
@@ -152,7 +202,7 @@ export class Element extends Node {
 			x: 0,
 			y: 0,
 			width: this.innerWidth,
-			height: this.innerHeight
+			height: this.innerHeight,
 		};
 	}
 
@@ -216,9 +266,7 @@ export class Element extends Node {
 		return {};
 	}
 
-	setPointerCapture(id: string) {
-	}
+	setPointerCapture(id: string) {}
 
-	releasePointerCapture(id: string) {
-	}
+	releasePointerCapture(id: string) {}
 }

packages/canvas-polyfill/DOM/XMLDocument.ts

@@ -1,11 +1,14 @@
-import { Document as Doc} from './Document';
+import { Document as Doc } from './Document';
 
 import querySelector from 'query-selector';
 
 import { DOMParser } from '@xmldom/xmldom';
 
+import { SVGSVGElement } from './svg/SVGSVGElement';
+
 export class XMLDocument extends Doc {
-	private __instance: Document;
+	//@ts-ignore
+	__instance: Document;
 	static fromParser(instance) {
 		if (instance) {
 			const documentPrototype = Object.getPrototypeOf(instance);
@@ -15,6 +18,12 @@ 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;
+				(<any>doc)._documentElement = svg;
+			}
 			return doc;
 		}
 		return null;

packages/canvas-polyfill/DOM/svg/SVGAnimatedLength.ts

@@ -0,0 +1,68 @@
+const SVG_LENGTHTYPE_UNKNOWN = 0;
+const SVG_LENGTHTYPE_NUMBER = 1;
+const SVG_LENGTHTYPE_PERCENTAGE = 2;
+const SVG_LENGTHTYPE_EMS = 3;
+const SVG_LENGTHTYPE_EXS = 4;
+const SVG_LENGTHTYPE_PX = 5;
+const SVG_LENGTHTYPE_CM = 6;
+const SVG_LENGTHTYPE_MM = 7;
+const SVG_LENGTHTYPE_IN = 8;
+const SVG_LENGTHTYPE_PT = 9;
+const SVG_LENGTHTYPE_PC = 10;
+
+// @ts-ignore
+export class SVGLength {
+	_unitType: number = SVG_LENGTHTYPE_UNKNOWN;
+
+	_value: number = 0;
+	_valueInSpecifiedUnits: number = 0;
+	_valueAsString: number = 0;
+
+	newValueSpecifiedUnits(unitType: number, valueInSpecifiedUnits: number) {}
+
+	convertToSpecifiedUnits(unitType: number) {}
+
+	static SVG_LENGTHTYPE_UNKNOWN = SVG_LENGTHTYPE_UNKNOWN;
+
+	static SVG_LENGTHTYPE_NUMBER = SVG_LENGTHTYPE_NUMBER;
+
+	static SVG_LENGTHTYPE_PERCENTAGE = SVG_LENGTHTYPE_PERCENTAGE;
+
+	static SVG_LENGTHTYPE_EMS = SVG_LENGTHTYPE_EMS;
+
+	static SVG_LENGTHTYPE_EXS = SVG_LENGTHTYPE_EXS;
+
+	static SVG_LENGTHTYPE_PX = SVG_LENGTHTYPE_PX;
+
+	static SVG_LENGTHTYPE_CM = SVG_LENGTHTYPE_CM;
+
+	static SVG_LENGTHTYPE_MM = SVG_LENGTHTYPE_MM;
+
+	static SVG_LENGTHTYPE_IN = SVG_LENGTHTYPE_IN;
+
+	static SVG_LENGTHTYPE_PT = SVG_LENGTHTYPE_PT;
+
+	static SVG_LENGTHTYPE_PC = SVG_LENGTHTYPE_PC;
+}
+
+// @ts-ignore
+export class SVGAnimatedLength {
+	_baseVal: SVGLength;
+	_animVal: SVGLength;
+
+	constructor() {
+		this._baseVal = new SVGLength();
+		this._animVal = new SVGLength();
+	}
+
+	get baseVal() {
+		return this._baseVal;
+	}
+
+	get animVal() {
+		return this._animVal;
+	}
+}
+
+export const SVGAnimatedLengthEmpty = new SVGAnimatedLength();
+Object.freeze(SVGAnimatedLengthEmpty);

packages/canvas-polyfill/DOM/svg/SVGCircleElement.ts

@@ -1,7 +1,7 @@
-import { SVGElement } from './SVGElement';
+import { SVGGeometryElement } from './SVGGeometryElement';
 import { Circle } from '@nativescript/canvas-svg';
 
-export class SVGCircleElement extends SVGElement {
+export class SVGCircleElement extends SVGGeometryElement {
 	//__internalElement: Circle;
 	constructor() {
 		super('circle');