Merge pull request #61 from demike/feat/use-new-control-flow

demike · web-flow · commit 8f9366308c1b · 2024-11-11T21:52:19.000+01:00
feat: use new control flow
diff --git a/projects/ngx-three-demo/src/app/code/code.component.html b/projects/ngx-three-demo/src/app/code/code.component.html
@@ -2,11 +2,13 @@
   <mat-card-content>
     <div class="code-wrapper hljs">
       <mat-tab-group dynamicHeight color="primary" backgroundColor="primary">
-        <mat-tab *ngFor="let codeUrl of codeUrls; let i = index" [label]="fileNames[i]">
-          <pre>
-            <code [highlight]="$any(codeUrl | codeFromUrl | async ) " [language]="getLanguage(fileNames[i])"></code>
-        </pre>
-        </mat-tab>
+        @for (codeUrl of codeUrls; track codeUrl; let i = $index) {
+          <mat-tab [label]="fileNames[i]">
+            <pre>
+              <code [highlight]="$any(codeUrl | codeFromUrl | async ) " [language]="getLanguage(fileNames[i])"></code>
+            </pre>
+          </mat-tab>
+        }
       </mat-tab-group>
     </div>
   </mat-card-content>
diff --git a/projects/ngx-three-demo/src/app/css3d-renderer-example/css3d-renderer-example.component.html b/projects/ngx-three-demo/src/app/css3d-renderer-example/css3d-renderer-example.component.html
@@ -8,20 +8,22 @@
   <th-scene [thStats]="true">
     <th-ambientLight [intensity]="3" />
 
-    <th-cSS3DObject *ngFor="let el of this.table; let i = index" [position]="poses[i].position">
-      <div class="element" [style.background]="'rgba(0,127,127,' + (Math.random() * 0.5 + 0.25) + ')'">
-        <div class="number">
-          {{ i + 1 }}
+    @for (el of this.table; track el; let i = $index) {
+      <th-cSS3DObject [position]="poses[i].position">
+        <div class="element" [style.background]="'rgba(0,127,127,' + (Math.random() * 0.5 + 0.25) + ')'">
+          <div class="number">
+            {{ i + 1 }}
+          </div>
+          <div class="symbol">
+            {{ el[0] }}
+          </div>
+          <div class="details">
+            {{ el[1] }} <br />
+            {{ el[2] }}
+          </div>
         </div>
-        <div class="symbol">
-          {{ el[0] }}
-        </div>
-        <div class="details">
-          {{ el[1] }} <br />
-          {{ el[2] }}
-        </div>
-      </div>
-    </th-cSS3DObject>
+      </th-cSS3DObject>
+    }
 
     <th-pointLight [position]="[10, 10, 10]" [intensity]="3" />
 
diff --git a/projects/ngx-three-demo/src/app/events-example/events-example.component.html b/projects/ngx-three-demo/src/app/events-example/events-example.component.html
@@ -10,32 +10,34 @@
       [position]="this.position"
       (onUpdate)="logUpdates($event)"
       (onLoaded)="onLoaded()"
-    />
+      />
 
     <th-gridHelper [args]="[10, 10]" />
     <th-pointLight [position]="[10, 10, 10]" [intensity]="3" />
 
     <th-perspectiveCamera [args]="[45, 2, 0.1, 100]" [position]="[10, 10, 10]" [lookAt]="[0, 0, 0]">
-      <!-- 
+      <!--
       binding to three.js events:
-        1) change: with bind directive for preserving this scope
-        2) end: with using a fat arrow member function for preserving this scope
+      1) change: with bind directive for preserving this scope
+      2) end: with using a fat arrow member function for preserving this scope
       -->
       <th-orbitControls
         [threeEvents]="{
           change: onOrbitControlChange | bind: this,
           end: onOrbitControlEnd
         }"
-      />
+        />
     </th-perspectiveCamera>
   </th-scene>
 </th-canvas>
 
 <div class="change-list">
   <h1>Updates</h1>
   <ol>
-    <li *ngFor="let change of changes">
-      {{ change }}
-    </li>
+    @for (change of changes; track change) {
+      <li>
+        {{ change }}
+      </li>
+    }
   </ol>
 </div>
diff --git a/projects/ngx-three-demo/src/app/navigation-shell/navigation-shell.component.html b/projects/ngx-three-demo/src/app/navigation-shell/navigation-shell.component.html
@@ -6,45 +6,50 @@
     [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
     [mode]="(isHandset$ | async) ? 'over' : 'side'"
     [opened]="(isHandset$ | async) === false"
-  >
+    >
     <mat-toolbar>ngx-three</mat-toolbar>
     <mat-nav-list>
-      <a mat-list-item *ngFor="let route of routes" [routerLink]="route.path">{{
-        route.data.title
-      }}</a>
+      @for (route of routes; track route) {
+        <a mat-list-item [routerLink]="route.path">{{
+          route.data.title
+        }}</a>
+      }
     </mat-nav-list>
   </mat-sidenav>
   <mat-sidenav-content class="content">
     <mat-toolbar color="primary">
-      <button
-        type="button"
-        aria-label="Toggle sidenav"
-        mat-icon-button
-        (click)="drawer.toggle()"
-        *ngIf="isHandset$ | async"
-      >
-        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
-      </button>
+      @if (isHandset$ | async) {
+        <button
+          type="button"
+          aria-label="Toggle sidenav"
+          mat-icon-button
+          (click)="drawer.toggle()"
+          >
+          <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
+        </button>
+      }
       <span>ngx-three-demo</span>
       <span class="toolbar-spacer"></span>
-      <button
-        mat-button
-        *ngIf="this.editorService.urls.length"
-        (click)="this.editorService.toCodeSandbox($event)"
-        href="#"
-      >
-        <mat-icon>crop_din</mat-icon>
-        CodeSandbox
-      </button>
-      <button
-        mat-button
-        *ngIf="this.editorService.urls.length"
-        (click)="this.editorService.toStackblitz($event)"
-        href="#"
-      >
-        <mat-icon>bolt</mat-icon>
-        Stackblitz
-      </button>
+      @if (this.editorService.urls.length) {
+        <button
+          mat-button
+          (click)="this.editorService.toCodeSandbox($event)"
+          href="#"
+          >
+          <mat-icon>crop_din</mat-icon>
+          CodeSandbox
+        </button>
+      }
+      @if (this.editorService.urls.length) {
+        <button
+          mat-button
+          (click)="this.editorService.toStackblitz($event)"
+          href="#"
+          >
+          <mat-icon>bolt</mat-icon>
+          Stackblitz
+        </button>
+      }
     </mat-toolbar>
     <!-- Add Content Here -->
     <div class="main-route-content">
diff --git a/projects/ngx-three-demo/src/app/on-demand-example/on-demand-example.component.html b/projects/ngx-three-demo/src/app/on-demand-example/on-demand-example.component.html
@@ -27,24 +27,24 @@
     <th-gridHelper [args]="[10, 10]" />
     <th-pointLight [position]="[10, 10, 10]" [decay]="0" />
 
-    <th-perspectiveCamera
-      [ngSwitch]="controlType"
-      #camera
-      [args]="[45, 2, 0.1, 100]"
-      [position]="[10, 10, 10]"
-      [lookAt]="[0, 0, 0]"
-    >
-      <th-orbitControls *ngSwitchCase="'orbit'" />
-      <th-mapControls *ngSwitchCase="'map'" />
-      <th-arcballControls *ngSwitchCase="'arcball'" />
-      <th-transformControls *ngSwitchCase="'transform'" [object]="model.objRef" />
-      <th-dragControls
-        *ngSwitchCase="'drag'"
-        [args]="[[model.objRef], camera.objRef, canvas.hostElement.nativeElement]"
-      />
-      <th-flyControls *ngSwitchCase="'fly'" />
-      <th-trackballControls *ngSwitchCase="'trackball'" />
-      <th-firstPersonControls *ngSwitchCase="'firstpersion'" />
+    <th-perspectiveCamera #camera [args]="[45, 2, 0.1, 100]" [position]="[10, 10, 10]" [lookAt]="[0, 0, 0]">
+      @switch (controlType) { @case ('orbit') {
+      <th-orbitControls />
+      } @case ('map') {
+      <th-mapControls />
+      } @case ('arcball') {
+      <th-arcballControls />
+      } @case ('transform') {
+      <th-transformControls [object]="model.objRef" />
+      } @case ('drag') {
+      <th-dragControls [args]="[[model.objRef], camera.objRef, canvas.hostElement.nativeElement]" />
+      } @case ('fly') {
+      <th-flyControls />
+      } @case ('trackball') {
+      <th-trackballControls />
+      } @case ('firstpersion') {
+      <th-firstPersonControls />
+      } }
     </th-perspectiveCamera>
   </th-scene>
 </th-canvas>
diff --git a/projects/ngx-three-demo/src/app/outline-pass-events-example/outline-pass-events-example.component.html b/projects/ngx-three-demo/src/app/outline-pass-events-example/outline-pass-events-example.component.html
@@ -8,19 +8,20 @@
     <th-directionalLight #light [color]="['#ddffdd']" [intensity]="1.8" />
 
     <th-sphereGeometry #geometry [args]="[3, 48, 24]" />
-    <th-mesh
-      *ngFor="let data of meshData"
-      [geometry]="geometry.objRef"
-      [position]="[data.x, data.y, data.z]"
-      [scale]="[data.scale, data.scale, data.scale]"
-      [receiveShadow]="true"
-      [castShadow]="true"
-      (onMouseEnter)="onHover($event)"
-      (onMouseExit)="onBlur()"
-      (onPointerDown)="onPointerDown($event)"
-    >
-      <th-meshPhongMaterial [flatShading]="true" [color]="data.color" />
-    </th-mesh>
+    @for (data of meshData; track data) {
+      <th-mesh
+        [geometry]="geometry.objRef"
+        [position]="[data.x, data.y, data.z]"
+        [scale]="[data.scale, data.scale, data.scale]"
+        [receiveShadow]="true"
+        [castShadow]="true"
+        (onMouseEnter)="onHover($event)"
+        (onMouseExit)="onBlur()"
+        (onPointerDown)="onPointerDown($event)"
+        >
+        <th-meshPhongMaterial [flatShading]="true" [color]="data.color" />
+      </th-mesh>
+    }
   </th-scene>
   <th-effectComposer>
     <th-renderPass />
@@ -33,6 +34,6 @@
       [edgeGlow]="edgeGlow"
       [edgeThickness]="edgeThickness"
       [pulsePeriod]="pulsePeriod"
-    />
+      />
   </th-effectComposer>
 </th-canvas>
diff --git a/projects/ngx-three-demo/src/app/post-processing-example/post-processing-example.component.html b/projects/ngx-three-demo/src/app/post-processing-example/post-processing-example.component.html
@@ -16,15 +16,16 @@
 
     <th-sphereGeometry #geometry [args]="[1, 4, 4]" />
     <th-object3D #object>
-      <th-mesh
-        *ngFor="let data of meshData"
-        [geometry]="geometry.objRef"
-        [position]="data.pos"
-        [rotation]="data.rotation"
-        [scale]="data.scale"
-      >
-        <th-meshPhongMaterial [flatShading]="true" [color]="data.color" />
-      </th-mesh>
+      @for (data of meshData; track data) {
+        <th-mesh
+          [geometry]="geometry.objRef"
+          [position]="data.pos"
+          [rotation]="data.rotation"
+          [scale]="data.scale"
+          >
+          <th-meshPhongMaterial [flatShading]="true" [color]="data.color" />
+        </th-mesh>
+      }
     </th-object3D>
   </th-scene>
 </th-canvas>
diff --git a/projects/ngx-three-demo/src/app/views-example/views-example.component.html b/projects/ngx-three-demo/src/app/views-example/views-example.component.html
@@ -7,7 +7,7 @@
     width: 0.5 * canvasWidth,
     height: canvasHeight
   }"
->
+  >
   <th-scene #scene>
     <th-directionalLight [position]="[0, 0, 1]" [args]="['#ffffff']" [intensity]="3" />
     <th-mesh [position]="[0, 0, 0]" [rotation]="[-Math.PI / 2, 0, 0]">
@@ -18,45 +18,46 @@
         [shininess]="30"
         [specular]="['#fac400']"
         [color]="['#f83f0d']"
-      />
+        />
     </th-mesh>
     <th-mesh
       [position]="[-400, 0, 0]"
       [rotation]="[-Math.PI / 2, 0, 0]"
       [geometry]="geo.objRef"
       [material]="mat.objRef"
-    />
+      />
     <th-mesh
       [position]="[400, 0, 0]"
       [rotation]="[-Math.PI / 2, 0, 0]"
       [geometry]="geo.objRef"
       [material]="mat.objRef"
-    />
+      />
   </th-scene>
 
-  <th-view
-    #thview
-    *ngFor="let view of views; let i = index"
-    [scene]="scene"
+  @for (view of views; track view; let i = $index) {
+    <th-view
+      #thview
+      [scene]="scene"
     [viewPort]="{
       x: view.left * canvasWidth,
       y: view.bottom * canvasHeight,
       width: view.width * canvasWidth,
       height: view.height * canvasHeight
     }"
-    [scissor]="thview.viewPort"
-    [scissorTest]="true"
-    [clearColor]="view.background"
-    (onRender)="view.updateCamera(camera.objRef, scene.objRef)"
-  >
-    <th-perspectiveCamera
-      #camera
-      [position]="$any(view.eye)"
-      [up]="$any(view.up)"
-      [fov]="view.fov"
-      [aspect]="(view.width * canvasWidth) / (view.height * canvasHeight)"
-      [near]="1"
-      [far]="10000"
-    />
-  </th-view>
+      [scissor]="thview.viewPort"
+      [scissorTest]="true"
+      [clearColor]="view.background"
+      (onRender)="view.updateCamera(camera.objRef, scene.objRef)"
+      >
+      <th-perspectiveCamera
+        #camera
+        [position]="$any(view.eye)"
+        [up]="$any(view.up)"
+        [fov]="view.fov"
+        [aspect]="(view.width * canvasWidth) / (view.height * canvasHeight)"
+        [near]="1"
+        [far]="10000"
+        />
+    </th-view>
+  }
 </th-canvas>
diff --git a/projects/ngx-three/src/lib/ThCanvas.ts b/projects/ngx-three/src/lib/ThCanvas.ts
@@ -56,7 +56,7 @@ function provideDefaultRenderer(): StaticProvider[] {
 @Component({
   selector: 'th-canvas',
   styleUrls: ['./ThCanvas.scss'],
-  template: '<ng-content *ngIf="isDevMode()" ></ng-content>',
+  template: '@if (isDevMode()) {<ng-content ></ng-content>}',
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [
     { provide: HOST_ELEMENT, useFactory: () => inject(ElementRef) },
diff --git a/projects/ngx-three/src/lib/extra/web/html.component.html b/projects/ngx-three/src/lib/extra/web/html.component.html
