fix: restore svg support

apps/demo/package.json

@@ -6,6 +6,7 @@
   "dependencies": {
     "@nativescript/canvas": "file:../../packages/canvas",
     "@nativescript/canvas-babylon": "file:../../packages/canvas-babylon",
+    "@nativescript/canvas-chartjs": "file:../../packages/canvas-chartjs",
     "@nativescript/canvas-media": "file:../../packages/canvas-media",
     "@nativescript/canvas-phaser": "file:../../packages/canvas-phaser",
     "@nativescript/canvas-phaser-ce": "file:../../packages/canvas-phaser-ce",
@@ -23,11 +24,11 @@
     "pixi.js": "file:../../node_modules/pixi.js",
     "three": "file:../../node_modules/three",
     "vexflow": "file:../../node_modules/vexflow",
-    "zen-3d": "file:../../node_modules/zen-3d",
-    "@nativescript/canvas-chartjs": "file:../../packages/canvas-chartjs"
+    "zen-3d": "file:../../node_modules/zen-3d"
   },
   "devDependencies": {
     "@nativescript/android": "8.6.2",
-    "@nativescript/ios": "8.6.1"
+    "@nativescript/ios": "8.6.1",
+    "@nativescript/visionos": "8.6.0"
   }
 }

apps/demo/src/app.ts

@@ -4,7 +4,7 @@ require('@nativescript/canvas-polyfill');
 */
 const TextDecoderO = TextDecoder;
 require('@nativescript/canvas-polyfill');
-// import { CanvasRenderingContext2D } from '@nativescript/canvas';
+import { Canvas } from '@nativescript/canvas';
 declare const jp, GDPerformanceMonitor;
 let monitor;
 import { Application, path as filePath, knownFolders, Utils, path as nsPath, ImageSource, Trace } from '@nativescript/core';
@@ -75,7 +75,10 @@ const font = nsPath.join(knownFolders.currentApp().path, 'fonts/Creepster-Regula
 
 global.CanvasModule.__addFontFamily('creepster', [font]);
 
-const path = new Path2D();
+// Canvas.useSurface = true;
+
+// const path = new Path2D();
+
 
 // slow 0.484
 // eval(`

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

@@ -1,6 +1,7 @@
-import { EventData, ImageSource, Page, WebView } from '@nativescript/core';
+import { EventData, ImageSource, Page, Screen, View, WebView } from '@nativescript/core';
 import { DemoSharedCanvas } from '@demo/shared';
 import { ImageAsset } from '@nativescript/canvas';
+import { Dom } from '@nativescript/canvas/Dom';
 
 export function navigatingTo(args: EventData) {
 	const page = <Page>args.object;
@@ -54,6 +55,8 @@ document.addEventListener('DOMContentLoaded', ()=>{
 `;
 }
 
+declare const android;
+
 export class DemoModel extends DemoSharedCanvas {
 	origin = { x: 128, y: 128 };
 	points = [
@@ -73,8 +76,7 @@ export class DemoModel extends DemoSharedCanvas {
 	start = { x: 0, y: 0 };
 	end = { x: 256, y: 256 };
 
-
-  start1 = { x: 128, y: 128 };
+	start1 = { x: 128, y: 128 };
 	end1 = { x: 128, y: 16 };
 
 	colors = ['blue', 'yellow'];
@@ -87,9 +89,48 @@ export class DemoModel extends DemoSharedCanvas {
 	c = { x: this.width / 2, y: this.height / 2 };
 	r = (this.width - this.strokeWidth) / 2;
 	groupR = 128;
+	dom: Dom;
 	constructor() {
 		super();
 		this.image.fromFileSync('~/assets/file-assets/webgl/svh.jpeg');
 		console.log(this.image.width);
 	}
+
+	domLoaded(event) {
+		this.dom = event.object;
+	}
+
+	rectLoaded(event) {
+		event.object.parent.on(View.layoutChangedEvent, (e) => {
+			const view = event.object;
+			view.x = 50;
+			view.y = 50;
+			const width = view.width;
+			const height = view.height;
+			const maxWidth = view.parent.getMeasuredWidth() / Screen.mainScreen.scale;
+			const maxHeight = view.parent.getMeasuredHeight() / Screen.mainScreen.scale;
+			const maxX = maxWidth - width;
+			const maxY = maxHeight - height;
+			if (global.isAndroid) {
+				const animator = android.animation.ValueAnimator.ofFloat([0, 1] as any);
+				animator.setDuration(3000);
+
+				animator.addUpdateListener(
+					new android.animation.ValueAnimator.AnimatorUpdateListener({
+						onAnimationUpdate(value) {
+							const progress = value.getAnimatedValue();
+							view.x = maxX * progress;
+							view.y = maxY * progress;
+						},
+					})
+				);
+
+				animator.setInterpolator(new android.view.animation.AccelerateDecelerateInterpolator());
+				animator.setRepeatMode(android.view.animation.Animation.REVERSE);
+				animator.setRepeatCount(android.animation.ValueAnimator.INFINITE);
+
+				animator.start();
+			}
+		});
+	}
 }

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

@@ -6,36 +6,46 @@
 
   <GridLayout rows="*" columns="*" loaded="{{ gridLoaded }}" iosOverflowSafeArea="false" width="100%" height="100%">
 
-  <ui:Dom rowSpan="2" colSpan="2">
+  <!-- <ui:Dom rowSpan="2" colSpan="2" loaded="{{ domLoaded }}}"> -->
+
+
+  <!-- <ui:Line
+        p1="{{({x: 0, y: 0})}}"
+        p2="{{({x: 256, y: 256})}}"
+        color="lightblue"
+        paintStyle="stroke"
+        strokeWidth="4"
+      /> -->
 
   <!-- <ui:Fill color="#e8f4f8" />
 
     <ui:Rect x="0" y="0" width="256" height="256" color="lightblue"/>
     <ui:Path path="M 128 0 L 168 80 L 256 93 L 192 155 L 207 244 L 128 202 L 49 244 L 64 155 L 0 93 L 88 80 L 128 0 Z" color="red"/> -->
 
 <!-- <ui:RoundedRect
+loaded="{{ rectLoaded }}"
         x="0"
         y="0"
         width="256"
         height="256"
         r="25"
         color="lightblue"
       /> -->
-    <ui:Rect x="0" y="0" width="256" height="256">
+    <!-- <ui:Rect x="0" y="0" width="256" height="256"> -->
  <!-- <ui:LinearGradient
           start="{{ start }}"
           end="{{ end }}"
           colors="{{colors}}"
         /> -->
 
-        <ui:TwoPointConicalGradient
+        <!-- <ui:TwoPointConicalGradient
            start="{{ start1 }}"
           startR="128"
           end="{{ end1 }}"
           endR="16"
            colors="{{colors}}"
         />
-    </ui:Rect>
+    </ui:Rect> -->
 
      <!-- <ui:Points
         points="{{ points }}"
@@ -105,16 +115,16 @@
       </ui:RoundedRect>
 -->
 
-  </ui:Dom> 
+  <!-- </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}}"/> -->
+		 <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}}"/> -->
     <!-- <Button height="40" text="Draw" tap="{{ draw }}"/> -->
 
     <!-- <ScrollView  rowSpan="4" visibility="{{ show ? 'visible': 'collapse' }}" orientation="vertical">

packages/canvas-babylon/package.json

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

packages/canvas-polyfill/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nativescript/canvas-polyfill",
-  "version": "2.0.0-beta.3",
+  "version": "2.0.0-beta.4",
   "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",

packages/canvas-three/package.json

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

packages/canvas/Canvas/index.android.ts

@@ -41,6 +41,7 @@ export class Canvas extends CanvasBase {
 	private _contextType = ContextType.None;
 	private _is2D = false;
 	private _isBatch = false;
+	static useSurface = false;
 	constructor(nativeInstance?) {
 		super();
 		if (nativeInstance) {
@@ -49,7 +50,12 @@ export class Canvas extends CanvasBase {
 			(global as any).__canvasLoaded = true;
 		} else {
 			const activity = Application.android.foregroundActivity || Application.android.startActivity || Utils.android.getApplicationContext();
-			this._canvas = new org.nativescript.canvas.NSCCanvas(activity);
+			if (Canvas.useSurface) {
+				this._canvas = new org.nativescript.canvas.NSCCanvas(activity, org.nativescript.canvas.NSCCanvas.SurfaceType.Surface);
+			} else {
+				this._canvas = new org.nativescript.canvas.NSCCanvas(activity);
+			}
+
 			(global as any).__canvasLoaded = true;
 			const ref = new WeakRef(this);
 			this._canvas.setTouchEventListener(

packages/canvas/Canvas/index.d.ts

@@ -31,6 +31,8 @@ export declare class Canvas extends CanvasBase {
 
 	flush(): void;
 
+	static useSurface: boolean;
+
 	static createCustomView(): Canvas;
 
 	createNativeView(): any;

packages/canvas/Canvas/index.ios.ts

@@ -46,6 +46,8 @@ export class Canvas extends CanvasBase {
 	private _isBatch = false;
 	_didLayout = false;
 
+	static useSurface = false;
+
 	constructor(nativeInstance?) {
 		super();
 		if (nativeInstance) {

packages/canvas/Dom/Dom.ts

@@ -2,10 +2,18 @@ import { EventData, LayoutBase, ViewBase, Utils, View } from '@nativescript/core
 import { Canvas } from '../Canvas';
 import { Image } from './Image';
 import { Paint } from './Paint';
+enum State {
+	None,
+	Pending,
+	Invalidating,
+}
 export class Dom extends LayoutBase {
 	_canvas: Canvas;
 	_children = [];
 
+	_raf: any;
+	_state: State = State.None;
+	_isReady: boolean = false;
 	constructor() {
 		super();
 		this._canvas = new Canvas();
@@ -28,6 +36,22 @@ export class Dom extends LayoutBase {
 		this._addView(this._canvas);
 	}
 
+	onLoaded(): void {
+		super.onLoaded();
+		if (this._ready) {
+			this._bindRaf();
+		}
+	}
+
+	onUnloaded(): void {
+		if (this._raf) {
+			cancelAnimationFrame(this._raf);
+			this._raf = undefined;
+			this._state = State.Pending;
+		}
+		super.onUnloaded();
+	}
+
 	public onLayout(left: number, top: number, right: number, bottom: number): void {
 		super.onLayout(left, top, right, bottom);
 		View.layoutChild(this, this._canvas, left, top, right, bottom);
@@ -44,10 +68,36 @@ export class Dom extends LayoutBase {
 	}
 
 	_ready(args: EventData) {
-		for (const child of this._children) {
-			child.draw();
+		this._isReady = true;
+		this._dirty();
+		this._draw();
+	}
+
+	_draw() {
+		const state = this._state & State.Pending;
+		if (state === State.Pending) {
+			const ctx = this._canvas.getContext('2d');
+			this._state = State.Invalidating;
+			ctx.clearRect(0, 0, this._canvas.width as number, this._canvas.height as number);
+			for (const child of this._children) {
+				child.draw();
+			}
+			this._state = State.None;
+		}
+		this._bindRaf();
+	}
+
+	_bindRaf() {
+		if (!this._isReady) {
+			return;
 		}
+		this._raf = requestAnimationFrame(this._draw.bind(this));
+	}
+
+	_dirty() {
+		this._state = this._state | State.Pending;
 	}
+
 	_addViewToNativeVisualTree(view: ViewBase, atIndex?: number): boolean {
 		if (view === this._canvas) {
 			if (global.isIOS) {

packages/canvas/Dom/Group.ts

@@ -200,6 +200,7 @@ export class Group extends Paint {
 				parseTransformation(item, matrix);
 			});
 			this._matrix = matrix;
+			this.invalidate();
 		}
 	}