docs: why not switch between the two

Author: nartc

apps/kitchen-sink/src/app/soba/inverted-stencil-buffer/experience.ts

@@ -4,9 +4,11 @@ import { NgtsRoundedBox } from 'angular-three-soba/abstractions';
 import { NgtsOrbitControls, NgtsPivotControls } from 'angular-three-soba/controls';
 import { NgtsBounds, NgtsEnvironment, NgtsFloat, NgtsMask } from 'angular-three-soba/staging';
 import { ColorRepresentation } from 'three';
+import { Angular } from './angular';
 import { Nx } from './nx';
 
 export const invert = signal(false);
+export const logo = signal<'angular' | 'nx'>('angular');
 
 @Component({
 	selector: 'app-frame',
@@ -90,8 +92,14 @@ export class Box {
 		<app-circular-mask />
 		<ngts-bounds [options]="{ fit: true, clip: true, observe: true }">
 			<ngts-float [options]="{ floatIntensity: 4, rotationIntensity: 0, speed: 4 }">
-				<!--				<app-angular [invert]="invert()" [scale]="20" />-->
-				<app-nx [invert]="invert()" [scale]="20" />
+				@switch (logo()) {
+					@case ('angular') {
+						<app-angular [invert]="invert()" [scale]="20" />
+					}
+					@case ('nx') {
+						<app-nx [invert]="invert()" [scale]="20" />
+					}
+				}
 			</ngts-float>
 			<app-box
 				color="#EAC435"
@@ -111,9 +119,10 @@ export class Box {
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: { class: 'inverted-stencil-buffer-soba-experience' },
-	imports: [CircularMask, NgtsBounds, NgtsFloat, Box, NgtsEnvironment, NgtsOrbitControls, NgtArgs, Nx],
+	imports: [CircularMask, NgtsBounds, NgtsFloat, Box, NgtsEnvironment, NgtsOrbitControls, NgtArgs, Nx, Angular],
 })
 export class Experience {
 	protected readonly Math = Math;
 	protected invert = invert;
+	protected logo = logo;
 }

apps/kitchen-sink/src/app/soba/inverted-stencil-buffer/inverted-stencil-buffer.ts

@@ -1,15 +1,24 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { NgtCanvas } from 'angular-three';
-import { Experience, invert } from './experience';
+import { Experience, invert, logo } from './experience';
 
 @Component({
 	standalone: true,
 	template: `
 		<ngt-canvas [sceneGraph]="scene" [shadows]="true" [gl]="{ stencil: true }" />
-		<label class="absolute top-2 right-2 font-mono flex gap-2 items-center">
-			<input type="checkbox" [value]="invert()" (change)="onChange($event)" />
-			invert
-		</label>
+		<div
+			class="absolute top-2 right-2 p-4 flex flex-col gap-4 items-center rounded border border-black border-dotted font-mono"
+		>
+			<label class="flex gap-2 items-center">
+				<input type="checkbox" [value]="invert()" (change)="onInvertChange($event)" />
+				invert
+			</label>
+			<select [value]="logo()" (change)="onLogoChange($event)">
+				<option value="angular">Angular</option>
+				<option value="nx">Nx</option>
+			</select>
+		</div>
+
 		<a
 			class="absolute top-2 left-2 font-mono underline"
 			href="https://pmndrs.github.io/examples/demos/inverted-stencil-buffer"
@@ -25,9 +34,15 @@ import { Experience, invert } from './experience';
 export default class InvertedStencilBuffer {
 	protected scene = Experience;
 	protected invert = invert;
+	protected logo = logo;
 
-	onChange(event: Event) {
+	onInvertChange(event: Event) {
 		const target = event.target as HTMLInputElement;
 		this.invert.set(target.checked);
 	}
+
+	onLogoChange(event: Event) {
+		const target = event.target as HTMLSelectElement;
+		this.logo.set(target.value as 'angular' | 'nx');
+	}
 }