From 36a27c8cc1286212b9e0bdd9d680347bc7d157cc Mon Sep 17 00:00:00 2001 From: triniwiz Date: Fri, 15 Oct 2021 14:47:59 -0400 Subject: [PATCH] chore: update demos --- apps/demo-angular/package.json | 11 ++-- apps/demo-angular/src/app.module.ts | 3 +- apps/demo-angular/src/home.component.html | 4 +- apps/demo-angular/src/home.component.ts | 60 +++++++++++-------- .../canvas-babylon.component.html | 6 +- .../plugin-demos/canvas-babylon.component.ts | 1 - .../plugin-demos/canvas-media.component.html | 6 +- .../plugin-demos/canvas-media.component.ts | 1 - .../canvas-phaser-ce.component.html | 6 +- .../canvas-phaser-ce.component.ts | 1 - .../plugin-demos/canvas-phaser.component.html | 6 +- .../plugin-demos/canvas-phaser.component.ts | 1 - .../plugin-demos/canvas-pixi.component.html | 6 +- .../src/plugin-demos/canvas-pixi.component.ts | 1 - .../canvas-polyfill.component.html | 6 +- .../plugin-demos/canvas-polyfill.component.ts | 1 - .../plugin-demos/canvas-three.component.html | 6 +- .../plugin-demos/canvas-three.component.ts | 13 +++- .../src/plugin-demos/canvas.component.html | 6 +- .../src/plugin-demos/canvas.component.ts | 1 - apps/demo-angular/webpack.config.js | 44 ++++++++++++-- tools/demo/canvas-phaser-ce/games/utils.ts | 2 +- tools/demo/canvas/webgl2/environment-map.ts | 8 +-- tools/demo/canvas/webgl2/fog.ts | 4 +- workspace.json | 6 +- 25 files changed, 110 insertions(+), 100 deletions(-) diff --git a/apps/demo-angular/package.json b/apps/demo-angular/package.json index a267708c..eda50a02 100644 --- a/apps/demo-angular/package.json +++ b/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" } -} \ No newline at end of file +} diff --git a/apps/demo-angular/src/app.module.ts b/apps/demo-angular/src/app.module.ts index c869e4d1..e419e2c0 100644 --- a/apps/demo-angular/src/app.module.ts +++ b/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 {} diff --git a/apps/demo-angular/src/home.component.html b/apps/demo-angular/src/home.component.html index b6ad2798..49849060 100644 --- a/apps/demo-angular/src/home.component.html +++ b/apps/demo-angular/src/home.component.html @@ -2,10 +2,10 @@ - + - + diff --git a/apps/demo-angular/src/home.component.ts b/apps/demo-angular/src/home.component.ts index 384e40d5..e351d431 100644 --- a/apps/demo-angular/src/home.component.ts +++ b/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]); } -]; -} \ No newline at end of file +} diff --git a/apps/demo-angular/src/plugin-demos/canvas-babylon.component.html b/apps/demo-angular/src/plugin-demos/canvas-babylon.component.html index c0c48710..935ea90b 100644 --- a/apps/demo-angular/src/plugin-demos/canvas-babylon.component.html +++ b/apps/demo-angular/src/plugin-demos/canvas-babylon.component.html @@ -1,8 +1,4 @@ - - - - - + diff --git a/apps/demo-angular/src/plugin-demos/canvas-babylon.component.ts b/apps/demo-angular/src/plugin-demos/canvas-babylon.component.ts index a99a90f5..5977ae37 100644 --- a/apps/demo-angular/src/plugin-demos/canvas-babylon.component.ts +++ b/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', diff --git a/apps/demo-angular/src/plugin-demos/canvas-media.component.html b/apps/demo-angular/src/plugin-demos/canvas-media.component.html index a8f15c83..9745de23 100644 --- a/apps/demo-angular/src/plugin-demos/canvas-media.component.html +++ b/apps/demo-angular/src/plugin-demos/canvas-media.component.html @@ -1,8 +1,4 @@ - - - - - + diff --git a/apps/demo-angular/src/plugin-demos/canvas-media.component.ts b/apps/demo-angular/src/plugin-demos/canvas-media.component.ts index 9f8dedd3..0089d71f 100644 --- a/apps/demo-angular/src/plugin-demos/canvas-media.component.ts +++ b/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', diff --git a/apps/demo-angular/src/plugin-demos/canvas-phaser-ce.component.html b/apps/demo-angular/src/plugin-demos/canvas-phaser-ce.component.html index d6b4813a..ee7b70b8 100644 --- a/apps/demo-angular/src/plugin-demos/canvas-phaser-ce.component.html +++ b/apps/demo-angular/src/plugin-demos/canvas-phaser-ce.component.html @@ -1,8 +1,4 @@ - - - - - + diff --git a/apps/demo-angular/src/plugin-demos/canvas-phaser-ce.component.ts b/apps/demo-angular/src/plugin-demos/canvas-phaser-ce.component.ts index 0ae99ac8..d7d41cc6 100644 --- a/apps/demo-angular/src/plugin-demos/canvas-phaser-ce.component.ts +++ b/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', diff --git a/apps/demo-angular/src/plugin-demos/canvas-phaser.component.html b/apps/demo-angular/src/plugin-demos/canvas-phaser.component.html index 1a98dbda..f74970a3 100644 --- a/apps/demo-angular/src/plugin-demos/canvas-phaser.component.html +++ b/apps/demo-angular/src/plugin-demos/canvas-phaser.component.html @@ -1,8 +1,4 @@ - - - - - + diff --git a/apps/demo-angular/src/plugin-demos/canvas-phaser.component.ts b/apps/demo-angular/src/plugin-demos/canvas-phaser.component.ts index 9e882c85..c1e8cb76 100644 --- a/apps/demo-angular/src/plugin-demos/canvas-phaser.component.ts +++ b/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', diff --git a/apps/demo-angular/src/plugin-demos/canvas-pixi.component.html b/apps/demo-angular/src/plugin-demos/canvas-pixi.component.html index 77e8533a..0962d412 100644 --- a/apps/demo-angular/src/plugin-demos/canvas-pixi.component.html +++ b/apps/demo-angular/src/plugin-demos/canvas-pixi.component.html @@ -1,8 +1,4 @@ - - - - - + diff --git a/apps/demo-angular/src/plugin-demos/canvas-pixi.component.ts b/apps/demo-angular/src/plugin-demos/canvas-pixi.component.ts index 0a501e1f..c37c1b6e 100644 --- a/apps/demo-angular/src/plugin-demos/canvas-pixi.component.ts +++ b/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', diff --git a/apps/demo-angular/src/plugin-demos/canvas-polyfill.component.html b/apps/demo-angular/src/plugin-demos/canvas-polyfill.component.html index 6a932112..aab1b03c 100644 --- a/apps/demo-angular/src/plugin-demos/canvas-polyfill.component.html +++ b/apps/demo-angular/src/plugin-demos/canvas-polyfill.component.html @@ -1,8 +1,4 @@ - - - - - + diff --git a/apps/demo-angular/src/plugin-demos/canvas-polyfill.component.ts b/apps/demo-angular/src/plugin-demos/canvas-polyfill.component.ts index d436635f..1c3fdd59 100644 --- a/apps/demo-angular/src/plugin-demos/canvas-polyfill.component.ts +++ b/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', diff --git a/apps/demo-angular/src/plugin-demos/canvas-three.component.html b/apps/demo-angular/src/plugin-demos/canvas-three.component.html index 3737a874..f7158161 100644 --- a/apps/demo-angular/src/plugin-demos/canvas-three.component.html +++ b/apps/demo-angular/src/plugin-demos/canvas-three.component.html @@ -1,8 +1,4 @@ - - - - - + diff --git a/apps/demo-angular/src/plugin-demos/canvas-three.component.ts b/apps/demo-angular/src/plugin-demos/canvas-three.component.ts index 6afb4f2f..ebb1c3a3 100644 --- a/apps/demo-angular/src/plugin-demos/canvas-three.component.ts +++ b/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); + } } diff --git a/apps/demo-angular/src/plugin-demos/canvas.component.html b/apps/demo-angular/src/plugin-demos/canvas.component.html index 8fb5ead7..0ebccc58 100644 --- a/apps/demo-angular/src/plugin-demos/canvas.component.html +++ b/apps/demo-angular/src/plugin-demos/canvas.component.html @@ -1,8 +1,4 @@ - - - - - + diff --git a/apps/demo-angular/src/plugin-demos/canvas.component.ts b/apps/demo-angular/src/plugin-demos/canvas.component.ts index 9c97903d..66551ed2 100644 --- a/apps/demo-angular/src/plugin-demos/canvas.component.ts +++ b/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', diff --git a/apps/demo-angular/webpack.config.js b/apps/demo-angular/webpack.config.js index daf3cbd9..9dbf5c3a 100644 --- a/apps/demo-angular/webpack.config.js +++ b/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(); }; diff --git a/tools/demo/canvas-phaser-ce/games/utils.ts b/tools/demo/canvas-phaser-ce/games/utils.ts index 04c528d2..9ebfe105 100644 --- a/tools/demo/canvas-phaser-ce/games/utils.ts +++ b/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((resolve, reject) => { const asset = new ImageAsset(); asset.loadFileAsync(image) .then(loaded => { diff --git a/tools/demo/canvas/webgl2/environment-map.ts b/tools/demo/canvas/webgl2/environment-map.ts index 6db31074..a9acaed9 100644 --- a/tools/demo/canvas/webgl2/environment-map.ts +++ b/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); } } diff --git a/tools/demo/canvas/webgl2/fog.ts b/tools/demo/canvas/webgl2/fog.ts index 5d8f5b56..c52ae9f5 100644 --- a/tools/demo/canvas/webgl2/fog.ts +++ b/tools/demo/canvas/webgl2/fog.ts @@ -231,9 +231,7 @@ void main() { } if (!nativeCanvas) { - } else { - native - } + } else {} LAF = requestAnimationFrame(drawScene); } } diff --git a/workspace.json b/workspace.json index dec4ab85..ec3745c5 100644 --- a/workspace.json +++ b/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": {