chore: updates

apps/demo/src/plugin-demos/canvas-svg.xml

@@ -1,14 +1,13 @@
-<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
-    <Page.actionBar>
-        <ActionBar title="canvas-svg" icon="" class="action-bar">
-        </ActionBar>
-    </Page.actionBar>
-    <StackLayout class="p-20">
-        <ScrollView class="h-full">
-          <StackLayout>
-            <Button text="Test canvas-svg" tap="{{ testIt }}" class="btn btn-primary"/>
-
-          </StackLayout>
-        </ScrollView>
-    </StackLayout>
-</Page>
+<Page xmlns:ui="@nativescript/canvas-svg" xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo"
+			class="page">
+	<Page.actionBar>
+		<ActionBar title="canvas-svg" icon="" class="action-bar">
+		</ActionBar>
+	</Page.actionBar>
+	<GridLayout columns="*,*" rows="*,*">
+		<ui:Svg id="1" width="100%" height="100%" src="{{src1}}" loaded="{{svgViewLoaded}}"/>
+		<!--<ui:Svg id="2" col="1" width="100%" height="100%" src="{{src2}}" loaded="{{svgViewLoaded}}"/>
+		<ui:Svg id="3" row="1" width="100%" height="100%" src="{{src3}}" loaded="{{svgViewLoaded}}"/>
+		<ui:Svg id="4" row="1" col="1" width="100%" height="100%" src="{{src4}}" loaded="{{svgViewLoaded}}"/>-->
+	</GridLayout>
+</Page>

apps/demo/src/plugin-demos/canvas.xml

@@ -5,7 +5,7 @@
     </Page.actionBar>
 
   <GridLayout rows="*" columns="*" loaded="{{ gridLoaded }}" iosOverflowSafeArea="false" width="100%" height="100%">
-  
+
   <!-- <ui:Dom rowSpan="2" colSpan="2" loaded="{{ domLoaded }}"> -->
 
 
@@ -83,7 +83,7 @@ loaded="{{ rectLoaded }}"
         <ui:Paint color="#adbce6" paintStyle="stroke" strokeWidth="{{strokeWidth}}" />
         <ui:Paint color="#ade6d8" paintStyle="stroke" strokeWidth="{{strokeWidth / 2}}" />
       </ui:Rect> -->
-<!-- 
+<!--
         <ui:Circle cx="{{groupR}}" cy="{{groupR}}" r="{{groupR}}" color="#51AFED" />
       <ui:Group color="lightblue" paintStyle="stroke" strokeWidth="10">
         <ui:Circle cx="{{groupR}}" cy="{{groupR}}" r="{{groupR / 2}}" />
@@ -97,10 +97,10 @@ loaded="{{ rectLoaded }}"
         origin="{{origin}}"
         transform="{{[{ skewX: Math.PI / 6 }]}}"
       >
-        <ui:RoundedRect x="64" y="64" width="128" height="128" r="10" /> 
+        <ui:RoundedRect x="64" y="64" width="128" height="128" r="10" />
 
    </ui:Group> -->
-  
+
 
    <!-- <ui:Circle cx="{{groupR}}" cy="{{groupR}}" r="{{groupR}}" color="#51AFED" />
       <ui:Group color="lightblue" paintStyle="stroke" strokeWidth="10">
@@ -129,17 +129,13 @@ loaded="{{ rectLoaded }}"
         <ui:Shadow dx="-12" dy="-12" blur="25" color="#c7f8ff" />
       </ui:RoundedRect>
 -->
-        
+
   <!-- </ui:Dom>  -->
-   
-  
+
+
   <!-- <WebView rowSpan="2" colSpan="2" height="100%" width="100%" loaded="loaded"/> -->
 		 <canvas:Canvas rowSpan="2" colSpan="2" ready="{{ canvasLoaded }}"
-									 layoutChanged="{{ onLayout }}"/> 
-                                     <!-- <canvas:Svg  id="1" width="100%" height="100%" src="{{src1}}" loaded="{{svgViewLoaded}}"/> -->
-                                     <!-- <canvas:Svg  id="2" col="1" width="100%" height="100%" src="{{src2}}" loaded="{{svgViewLoaded}}"/> -->
-                                      <!-- <canvas:Svg  id="3" row="1" width="100%" height="100%" src="{{src3}}" loaded="{{svgViewLoaded}}"/> -->
-                                     <!-- <canvas:Svg id="4" row="1" col="1" width="100%" height="100%" src="{{src4}}" loaded="{{svgViewLoaded}}"/> -->
+									 layoutChanged="{{ onLayout }}"/>
     <!-- <Button height="40" text="Draw" tap="{{ draw }}"/> -->
 
     <!-- <ScrollView  rowSpan="4" visibility="{{ show ? 'visible': 'collapse' }}" orientation="vertical">

package.json

@@ -18,7 +18,9 @@
 		"build.canvas.ios.release": "nx run canvas:build.native.ios.release",
 		"build.canvas.ios.debug": "nx run canvas:build.native.ios.debug",
 		"build.canvas.ios.framework.release": "nx run canvas:build.native.ios.framework.release",
-		"build.canvas.ios.framework.debug": "nx run canvas:build.native.ios.framework.debug"
+		"build.canvas.ios.framework.debug": "nx run canvas:build.native.ios.framework.debug",
+		"build.canvas.svg.ios.framework.release": "nx run canvas-svg:build.native.ios.framework.release",
+		"build.canvas.svg.ios.framework.debug": "nx run canvas-svg:build.native.ios.framework.debug"
 	},
 	"private": true,
 	"devDependencies": {

packages/canvas-babylon/package.json

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

packages/canvas-polyfill/DOM/Document.ts

@@ -2,10 +2,10 @@ import { HTMLElement } from './HTMLElement';
 import { HTMLVideoElement } from './HTMLVideoElement';
 import { HTMLImageElement } from './HTMLImageElement';
 import { HTMLCanvasElement } from './HTMLCanvasElement';
-import { SVGElement, SVGCircleElement, SVGRectElement, SVGGElement, SVGPathElement } from './svg';
+import { HTMLDivElement } from './HTMLDivElement';
 import { Text } from './Text';
 import { Canvas } from '@nativescript/canvas';
-import { Frame } from '@nativescript/core';
+import { Frame, StackLayout } from '@nativescript/core';
 import { Node } from './Node';
 import { Element } from './Element';
 
@@ -29,6 +29,8 @@ export class Document extends Node {
 
 	createElement(tagName: string) {
 		switch ((tagName || '').toLowerCase()) {
+			case 'div':
+				return new HTMLDivElement();
 			case 'video':
 				return new HTMLVideoElement();
 			case 'img':
@@ -38,16 +40,16 @@ export class Document extends Node {
 			case 'iframe':
 				// Return nothing to keep firebase working.
 				return null;
-			// case 'svg':
-			// 	return new SVGElement();
-			// case 'rect':
-			// 	return new SVGRectElement();
-			// case 'circle':
-			// 	return new SVGCircleElement();
-			// case 'g':
-			// 	return new SVGGElement();
-			// case 'path':
-			// 	return new SVGPathElement();
+			case 'svg':
+				return new SVGElement();
+			case 'rect':
+				return new SVGRectElement();
+			case 'circle':
+				return new SVGCircleElement();
+			case 'g':
+				return new SVGGElement();
+			case 'path':
+				return new SVGPathElement();
 			default:
 				return new Element(tagName);
 		}
@@ -75,6 +77,10 @@ export class Document extends Node {
 					const canvas = new HTMLCanvasElement();
 					canvas.nativeElement = nativeElement;
 					return canvas;
+				} else if (nativeElement instanceof StackLayout) {
+					const div = new HTMLDivElement();
+					div.nativeElement = nativeElement;
+					return div;
 				}
 				const element = new HTMLElement();
 				element.nativeElement = nativeElement;
@@ -93,23 +99,25 @@ export class Document extends Node {
 	}
 
 	//@ts-ignore
-	set documentElement(value) {}
+	set documentElement(value) {
+	}
 
 	querySelectorAll(selector) {
-		return (this as any)._instance?.querySelectorAll?.(selector) ?? [];
+		return [];
+		//return (this as any)._instance?.querySelectorAll?.(selector) ?? [];
 	}
 
 	querySelector(selector) {
-		const ret = (this as any)._instance?.querySelectorAll?.(selector);
-		let element = ret?.[0] ?? null;
-		if (ret === undefined) {
-			const items = (this as any)._instance.getElementsByTagName(selector);
-			element = items[0];
-		}
-
-		if (element) {
-			return new (Element as any)(element);
-		}
+		// const ret = (this as any)._instance?.querySelectorAll?.(selector);
+		// let element = ret?.[0] ?? null;
+		// if (ret === undefined) {
+		// 	const items = (this as any)._instance.getElementsByTagName(selector);
+		// 	element = items[0];
+		// }
+		//
+		// if (element) {
+		// 	return new (Element as any)(element);
+		// }
 		return null;
 	}
 }

packages/canvas-polyfill/DOM/Element.ts

@@ -36,7 +36,7 @@ export class DOMRect extends DOMRectReadOnly {
 
 export class Element extends Node {
 	private _classList = new Set();
-	private _nativeElement: ViewBase;
+	_nativeElement: ViewBase;
 	private _width: number;
 	private _height: number;
 	private _attrs: Map<string, any> = new Map<string, unknown>();
@@ -185,22 +185,40 @@ export class Element extends Node {
 	}
 
 	get width() {
+		if (this.nativeElement) {
+			return this.nativeElement['width'];
+		}
 		return this._width;
 	}
 
 	set width(value: number) {
 		this._width = value;
+		if (this.nativeElement) {
+			setValue(this.nativeElement, 'width', value);
+		}
 	}
 
 	get height() {
+		if (this.nativeElement) {
+			return this.nativeElement['height'];
+		}
 		return this._height;
 	}
 
 	set height(value: number) {
 		this._height = value;
+		if (this.nativeElement) {
+			setValue(this.nativeElement, 'height', value);
+		}
 	}
 
 	get ontouchstart() {
 		return {};
 	}
+
+	setPointerCapture(id: string) {
+	}
+
+	releasePointerCapture(id: string) {
+	}
 }

packages/canvas-polyfill/DOM/EventTarget.ts

@@ -29,7 +29,6 @@ export class EventTarget {
 		if (global.isIOS) {
 			emitter = this._emitter?.deref?.();
 		}
-
 		if (emitter !== null && emitter !== undefined) {
 			emitter.addEventListener(event, handler);
 		}

packages/canvas-polyfill/DOM/HTMLDivElement.ts

@@ -0,0 +1,16 @@
+import { HTMLElement } from './HTMLElement';
+import { StackLayout } from '@nativescript/core';
+
+export class HTMLDivElement extends HTMLElement {
+	constructor() {
+		super('div');
+		const div = arguments[0];
+
+		// using StackLayout for now
+		if (!(div instanceof StackLayout)) {
+			this.nativeElement = new StackLayout();
+		} else {
+			this.nativeElement = arguments[0];
+		}
+	}
+}

packages/canvas-polyfill/DOM/HTMLElement.ts

@@ -1,7 +1,57 @@
 import { Element } from './Element';
+import { ViewBase } from '@nativescript/core';
+import setValue from 'set-value';
+
+export class Style {
+	proxy;
+
+	constructor() {
+		const values = new Map();
+		this.proxy = new Proxy(this, {
+			set(target, prop, value) {
+				target.setProperty(prop, value);
+				return true;
+			},
+			get(target, prop, receiver) {
+				return target.getPropertyValue(prop);
+			}
+		});
+		this._values = values;
+	}
+
+	_values: Map<any, any>;
+	nativeElement: WeakRef<ViewBase>;
+
+	setProperty(key: string | symbol, val: unknown) {
+		this._values.set(key, val);
+		// const nativeElement = this.nativeElement?.deref?.();
+		// if (nativeElement !== null) {
+		// 	setValue(nativeElement, key, val);
+		// }
+	}
+
+	getPropertyValue(key: string | symbol) {
+		// const nativeElement = this.nativeElement?.deref?.();
+		// if (nativeElement !== null) {
+		// 	return nativeElement[key];
+		// }
+		return this._values.get(key);
+	}
+}
 
 export class HTMLElement extends Element {
+
+	private _style = new Style();
+
 	constructor(tagName: string = '') {
 		super(tagName ?? '');
 	}
+
+	get style() {
+		if (this.nativeElement) {
+			return this.nativeElement.style;
+		}
+		return this._style;
+	}
+
 }