chore: update demos

apps/demo-angular/package.json

@@ -1,18 +1,19 @@
 {
   "main": "./src/main.ts",
   "dependencies": {
-    "@nativescript/core": "file:../../node_modules/@nativescript/core",
-    "@nativescript/canvas-media": "file:../../dist/packages/canvas-media",
     "@nativescript/canvas": "file:../../dist/packages/canvas",
     "@nativescript/canvas-babylon": "file:../../dist/packages/canvas-babylon",
+    "@nativescript/canvas-media": "file:../../dist/packages/canvas-media",
     "@nativescript/canvas-phaser": "file:../../dist/packages/canvas-phaser",
     "@nativescript/canvas-phaser-ce": "file:../../dist/packages/canvas-phaser-ce",
     "@nativescript/canvas-pixi": "file:../../dist/packages/canvas-pixi",
     "@nativescript/canvas-polyfill": "file:../../dist/packages/canvas-polyfill",
-    "@nativescript/canvas-three": "file:../../dist/packages/canvas-three"
+    "@nativescript/canvas-three": "file:../../dist/packages/canvas-three",
+    "@nativescript/core": "file:../../node_modules/@nativescript/core",
+    "three": "file:../../node_modules/three"
   },
   "devDependencies": {
-    "@nativescript/android": "8.0.0",
+    "@nativescript/android": "8.2.0-alpha.2",
     "@nativescript/ios": "8.0.0"
   }
-}
+}

apps/demo-angular/src/app.module.ts

@@ -4,11 +4,12 @@ import { NativeScriptModule } from '@nativescript/angular';
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
 import { HomeComponent } from './home.component';
+import { CanvasModule } from '@nativescript/canvas/angular';
 
 @NgModule({
 	schemas: [NO_ERRORS_SCHEMA],
 	declarations: [AppComponent, HomeComponent],
 	bootstrap: [AppComponent],
-	imports: [NativeScriptModule, AppRoutingModule],
+	imports: [NativeScriptModule, AppRoutingModule, CanvasModule],
 })
 export class AppModule {}

apps/demo-angular/src/home.component.html

@@ -2,10 +2,10 @@
 	<ActionBar title="Demos"></ActionBar>
 </ActionBar>
 <GridLayout>
-	<ListView [items]="demos">
+	<ListView [items]="demos" (itemTap)="onTap($event)">
 		<ng-template let-item="item" let-i="index">
 			<GridLayout class="p-y-10">
-				<Label [text]="item.name" [nsRouterLink]="['/' + item.name]"></Label>
+				<Label [text]="item.name"></Label>
 			</GridLayout>
 		</ng-template>
 	</ListView>

apps/demo-angular/src/home.component.ts

@@ -1,34 +1,42 @@
 import { Component } from '@angular/core';
-
+import { RouterExtensions } from '@nativescript/angular';
 @Component({
 	selector: 'demo-home',
 	templateUrl: 'home.component.html',
 })
 export class HomeComponent {
+
+	constructor(private router: RouterExtensions){}
+
 	demos = [
-	{
-		name: 'canvas'
-	},
-	{
-		name: 'canvas-babylon'
-	},
-	{
-		name: 'canvas-media'
-	},
-	{
-		name: 'canvas-phaser'
-	},
-	{
-		name: 'canvas-phaser-ce'
-	},
-	{
-		name: 'canvas-pixi'
-	},
-	{
-		name: 'canvas-polyfill'
-	},
-	{
-		name: 'canvas-three'
+		{
+			name: 'canvas',
+		},
+		{
+			name: 'canvas-babylon',
+		},
+		{
+			name: 'canvas-media',
+		},
+		{
+			name: 'canvas-phaser',
+		},
+		{
+			name: 'canvas-phaser-ce',
+		},
+		{
+			name: 'canvas-pixi',
+		},
+		{
+			name: 'canvas-polyfill',
+		},
+		{
+			name: 'canvas-three',
+		},
+	];
+
+	onTap(event){
+		const item = this.demos[event.index];
+		this.router.navigate(['/' + item.name]);
 	}
-];
-}
+}

apps/demo-angular/src/plugin-demos/canvas-babylon.component.html

@@ -1,8 +1,4 @@
 <ActionBar title="canvas-babylon" class="action-bar"> </ActionBar>
 <StackLayout class="p-20">
-	<ScrollView class="h-full">
-		<StackLayout>
-			<Button text="Test canvas-babylon" (tap)="demoShared.testIt()" class="btn btn-primary"></Button>
-		</StackLayout>
-	</ScrollView>
+
 </StackLayout>

apps/demo-angular/src/plugin-demos/canvas-babylon.component.ts

@@ -1,6 +1,5 @@
 import { Component, NgZone } from '@angular/core';
 import { DemoSharedCanvasBabylon } from '@demo/shared';
-import {} from '@nativescript/canvas-babylon';
 
 @Component({
 	selector: 'demo-canvas-babylon',

apps/demo-angular/src/plugin-demos/canvas-media.component.html

@@ -1,8 +1,4 @@
 <ActionBar title="canvas-media" class="action-bar"> </ActionBar>
 <StackLayout class="p-20">
-	<ScrollView class="h-full">
-		<StackLayout>
-			<Button text="Test canvas-media" (tap)="demoShared.testIt()" class="btn btn-primary"></Button>
-		</StackLayout>
-	</ScrollView>
+
 </StackLayout>

apps/demo-angular/src/plugin-demos/canvas-media.component.ts

@@ -1,6 +1,5 @@
 import { Component, NgZone } from '@angular/core';
 import { DemoSharedCanvasMedia } from '@demo/shared';
-import {} from '@nativescript/canvas-media';
 
 @Component({
 	selector: 'demo-canvas-media',

apps/demo-angular/src/plugin-demos/canvas-phaser-ce.component.html

@@ -1,8 +1,4 @@
 <ActionBar title="canvas-phaser-ce" class="action-bar"> </ActionBar>
 <StackLayout class="p-20">
-	<ScrollView class="h-full">
-		<StackLayout>
-			<Button text="Test canvas-phaser-ce" (tap)="demoShared.testIt()" class="btn btn-primary"></Button>
-		</StackLayout>
-	</ScrollView>
+
 </StackLayout>

apps/demo-angular/src/plugin-demos/canvas-phaser-ce.component.ts

@@ -1,6 +1,5 @@
 import { Component, NgZone } from '@angular/core';
 import { DemoSharedCanvasPhaserCe } from '@demo/shared';
-import {} from '@nativescript/canvas-phaser-ce';
 
 @Component({
 	selector: 'demo-canvas-phaser-ce',

apps/demo-angular/src/plugin-demos/canvas-phaser.component.html

@@ -1,8 +1,4 @@
 <ActionBar title="canvas-phaser" class="action-bar"> </ActionBar>
 <StackLayout class="p-20">
-	<ScrollView class="h-full">
-		<StackLayout>
-			<Button text="Test canvas-phaser" (tap)="demoShared.testIt()" class="btn btn-primary"></Button>
-		</StackLayout>
-	</ScrollView>
+
 </StackLayout>

apps/demo-angular/src/plugin-demos/canvas-phaser.component.ts

@@ -1,6 +1,5 @@
 import { Component, NgZone } from '@angular/core';
 import { DemoSharedCanvasPhaser } from '@demo/shared';
-import {} from '@nativescript/canvas-phaser';
 
 @Component({
 	selector: 'demo-canvas-phaser',

apps/demo-angular/src/plugin-demos/canvas-pixi.component.html

@@ -1,8 +1,4 @@
 <ActionBar title="canvas-pixi" class="action-bar"> </ActionBar>
 <StackLayout class="p-20">
-	<ScrollView class="h-full">
-		<StackLayout>
-			<Button text="Test canvas-pixi" (tap)="demoShared.testIt()" class="btn btn-primary"></Button>
-		</StackLayout>
-	</ScrollView>
+
 </StackLayout>

apps/demo-angular/src/plugin-demos/canvas-pixi.component.ts

@@ -1,6 +1,5 @@
 import { Component, NgZone } from '@angular/core';
 import { DemoSharedCanvasPixi } from '@demo/shared';
-import {} from '@nativescript/canvas-pixi';
 
 @Component({
 	selector: 'demo-canvas-pixi',

apps/demo-angular/src/plugin-demos/canvas-polyfill.component.html

@@ -1,8 +1,4 @@
 <ActionBar title="canvas-polyfill" class="action-bar"> </ActionBar>
 <StackLayout class="p-20">
-	<ScrollView class="h-full">
-		<StackLayout>
-			<Button text="Test canvas-polyfill" (tap)="demoShared.testIt()" class="btn btn-primary"></Button>
-		</StackLayout>
-	</ScrollView>
+
 </StackLayout>

apps/demo-angular/src/plugin-demos/canvas-polyfill.component.ts

@@ -1,6 +1,5 @@
 import { Component, NgZone } from '@angular/core';
 import { DemoSharedCanvasPolyfill } from '@demo/shared';
-import {} from '@nativescript/canvas-polyfill';
 
 @Component({
 	selector: 'demo-canvas-polyfill',

apps/demo-angular/src/plugin-demos/canvas-three.component.html

@@ -1,8 +1,4 @@
 <ActionBar title="canvas-three" class="action-bar"> </ActionBar>
 <StackLayout class="p-20">
-	<ScrollView class="h-full">
-		<StackLayout>
-			<Button text="Test canvas-three" (tap)="demoShared.testIt()" class="btn btn-primary"></Button>
-		</StackLayout>
-	</ScrollView>
+	<Canvas height="100%" width="100%" id="canvas" (ready)="canvasLoaded($event)" (loaded)="loaded($event)" (unloaded)="unloaded($event)" ></Canvas>
 </StackLayout>

apps/demo-angular/src/plugin-demos/canvas-three.component.ts

@@ -1,6 +1,5 @@
 import { Component, NgZone } from '@angular/core';
 import { DemoSharedCanvasThree } from '@demo/shared';
-import {} from '@nativescript/canvas-three';
 
 @Component({
 	selector: 'demo-canvas-three',
@@ -14,4 +13,16 @@ export class CanvasThreeComponent {
 	ngOnInit() {
 		this.demoShared = new DemoSharedCanvasThree();
 	}
+
+	canvasLoaded(event) {
+		this.demoShared?.canvasLoaded?.(event);
+	}
+
+	loaded(event) {
+		this.demoShared?.loaded?.(event);
+	}
+
+	unloaded(event) {
+		this.demoShared?.unloaded?.(event);
+	}
 }

apps/demo-angular/src/plugin-demos/canvas.component.html

@@ -1,8 +1,4 @@
 <ActionBar title="canvas" class="action-bar"> </ActionBar>
 <StackLayout class="p-20">
-	<ScrollView class="h-full">
-		<StackLayout>
-			<Button text="Test canvas" (tap)="demoShared.testIt()" class="btn btn-primary"></Button>
-		</StackLayout>
-	</ScrollView>
+
 </StackLayout>

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

@@ -1,6 +1,5 @@
 import { Component, NgZone } from '@angular/core';
 import { DemoSharedCanvas } from '@demo/shared';
-import {} from '@nativescript/canvas';
 
 @Component({
 	selector: 'demo-canvas',

apps/demo-angular/webpack.config.js

@@ -11,12 +11,44 @@ module.exports = (env) => {
     config.resolve.alias.set('@demo/shared', resolve(__dirname, '..', '..', 'tools', 'demo'));
   });
 
-  // Example if you need to share images across demo apps:
-  // webpack.Utils.addCopyRule({
-  //   from: '../../../tools/images', 
-	// 	to: 'images',
-  //   context: webpack.Utils.project.getProjectFilePath('node_modules')
-  // });
+  webpack.Utils.addCopyRule('**/*.svg')
+  webpack.Utils.addCopyRule('**/*.mp4')
+
+  webpack.Utils.addCopyRule({
+    from: '../../../tools/demo/canvas/assets', 
+		to: 'assets/file-assets',
+    context: webpack.Utils.project.getProjectFilePath('node_modules')
+  });
+
+  webpack.Utils.addCopyRule({
+    from: '../../../tools/demo/canvas-babylon/assets', 
+		to: 'assets/babylon',
+    context: webpack.Utils.project.getProjectFilePath('node_modules')
+  });
+
+  webpack.Utils.addCopyRule({
+    from: '../../../tools/demo/canvas-phaser/assets', 
+		to: 'assets/phaser',
+    context: webpack.Utils.project.getProjectFilePath('node_modules')
+  });
+
+  webpack.Utils.addCopyRule({
+    from: '../../../tools/demo/canvas-phaser-ce/assets', 
+		to: 'assets/phaser-ce',
+    context: webpack.Utils.project.getProjectFilePath('node_modules')
+  });
+
+  webpack.Utils.addCopyRule({
+    from: '../../../tools/demo/canvas-pixi/assets', 
+		to: 'assets/pixi',
+    context: webpack.Utils.project.getProjectFilePath('node_modules')
+  });
+
+  webpack.Utils.addCopyRule({
+    from: '../../../tools/demo/canvas-three/assets', 
+		to: 'assets/three',
+    context: webpack.Utils.project.getProjectFilePath('node_modules')
+  });
 
   return webpack.resolveConfig();
 };

tools/demo/canvas-phaser-ce/games/utils.ts

@@ -27,7 +27,7 @@ const imageSourceCache = {};
 function cacheImages(images: any) {
   const imageArray = Object.keys(images).map((key) => images[key]);
   return imageArray.map((image) => {
-    return new Promise((resolve, reject) => {
+    return new Promise<void>((resolve, reject) => {
       const asset = new ImageAsset();
       asset.loadFileAsync(image)
         .then(loaded => {

tools/demo/canvas/webgl2/environment-map.ts

@@ -221,9 +221,7 @@ void main() {
     var then = 0;
     if (!nativeCanvas) {
 
-    } else {
-      native
-    }
+    } else {}
     requestAnimationFrame(drawScene);
 
     // Draw the scene.
@@ -289,9 +287,7 @@ void main() {
 
       if (!nativeCanvas) {
 
-      } else {
-        native
-      }
+      } else {}
       LAF = requestAnimationFrame(drawScene);
     }
   }

tools/demo/canvas/webgl2/fog.ts

@@ -231,9 +231,7 @@ void main() {
       }
       if (!nativeCanvas) {
 
-      } else {
-        native
-      }
+      } else {}
       LAF = requestAnimationFrame(drawScene);
     }
   }

workspace.json

@@ -58,13 +58,15 @@
         "ios": {
           "executor": "@nativescript/nx:build",
           "options": {
-            "platform": "ios"
+            "platform": "ios",
+            "noHmr": true
           }
         },
         "android": {
           "executor": "@nativescript/nx:build",
           "options": {
-            "platform": "android"
+            "platform": "android",
+            "noHmr": true
           }
         },
         "clean": {