From 47ea7276d9eca3c15a138fe42f7d2c34236ec0e5 Mon Sep 17 00:00:00 2001
From: Chau Tran <nartc7789@gmail.com>
Date: Sun, 12 Feb 2023 13:40:03 -0600
Subject: [PATCH] fix: clean up spotlight

---
 .../src/staging/spot-light.stories.ts         | 16 +++++---------
 .../src/lib/spot-light/shadow-mesh-input.ts   |  5 +----
 .../spot-light/spot-light-shadow-no-shader.ts | 17 ++++++++-------
 .../src/lib/spot-light/spot-light-shadow.ts   | 21 ++++++++++---------
 package.json                                  |  2 +-
 pnpm-lock.yaml                                |  8 +++----
 6 files changed, 31 insertions(+), 38 deletions(-)

diff --git a/libs/angular-three-soba/src/staging/spot-light.stories.ts b/libs/angular-three-soba/src/staging/spot-light.stories.ts
index d11f79f..2bf640f 100644
--- a/libs/angular-three-soba/src/staging/spot-light.stories.ts
+++ b/libs/angular-three-soba/src/staging/spot-light.stories.ts
@@ -1,7 +1,7 @@
 import { NgIf } from '@angular/common';
-import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, Input, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA, inject, Input, OnInit } from '@angular/core';
 import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { checkUpdate, createRunInContext, NgtArgs, NgtInjectedRef, NgtPush, NgtRxStore, NgtStore } from 'angular-three';
+import { checkUpdate, createRunInContext, NgtArgs, NgtInjectedRef, NgtPush, NgtRxStore } from 'angular-three';
 import { NgtsPerspectiveCamera } from 'angular-three-soba/cameras';
 import { NgtsOrbitControls } from 'angular-three-soba/controls';
 import { injectNgtsTextureLoader } from 'angular-three-soba/loaders';
@@ -12,8 +12,6 @@ import * as THREE from 'three';
 import { makeCanvasOptions, StorybookSetup } from '../setup-canvas';
 // @ts-ignore
 
-// TODO(chau): investigate why ngIf doesn't work
-
 @Component({
     standalone: true,
     template: `
@@ -78,6 +76,8 @@ class ShadowsSpotLightStory {
     readonly Math = Math;
     readonly MathUtils = THREE.MathUtils;
 
+    readonly cdr = inject(ChangeDetectorRef);
+
     readonly shader = /* glsl */ `
             varying vec2 vUv;
             uniform sampler2D uShadowMap;
@@ -110,18 +110,12 @@ class ShadowsSpotLightStory {
     );
 
     readonly leaf$ = injectNgtsTextureLoader('/soba/textures/other/leaves.jpg');
-
-    readonly store = inject(NgtStore);
-
-    ngOnInit() {
-        console.log(this.store.get('scene'));
-    }
 }
 
 @Component({
     standalone: true,
     template: `
-        <ng-container *ngIf="depthBuffer.nativeElement">
+        <ng-container *ngIf="depthBuffer?.nativeElement">
             <ngts-spot-light
                 [penumbra]="0.5"
                 [depthBuffer]="depthBuffer.nativeElement"
diff --git a/libs/angular-three-soba/staging/src/lib/spot-light/shadow-mesh-input.ts b/libs/angular-three-soba/staging/src/lib/spot-light/shadow-mesh-input.ts
index 770b0b4..8352185 100644
--- a/libs/angular-three-soba/staging/src/lib/spot-light/shadow-mesh-input.ts
+++ b/libs/angular-three-soba/staging/src/lib/spot-light/shadow-mesh-input.ts
@@ -1,10 +1,8 @@
-import { ChangeDetectorRef, Directive, inject, Input } from '@angular/core';
+import { Directive, Input } from '@angular/core';
 import { NgtRxStore } from 'angular-three';
 
 @Directive()
 export abstract class NgtsSpotLightShadowMeshInput extends NgtRxStore {
-    private readonly cdr = inject(ChangeDetectorRef);
-
     @Input() set distance(distance: number) {
         this.set({ distance });
     }
@@ -23,7 +21,6 @@ export abstract class NgtsSpotLightShadowMeshInput extends NgtRxStore {
 
     @Input() set shader(shader: string) {
         this.set({ shader });
-        this.cdr.detectChanges();
     }
 
     @Input() set width(width: number) {
diff --git a/libs/angular-three-soba/staging/src/lib/spot-light/spot-light-shadow-no-shader.ts b/libs/angular-three-soba/staging/src/lib/spot-light/spot-light-shadow-no-shader.ts
index 5264e24..d2ba3bb 100644
--- a/libs/angular-three-soba/staging/src/lib/spot-light/spot-light-shadow-no-shader.ts
+++ b/libs/angular-three-soba/staging/src/lib/spot-light/spot-light-shadow-no-shader.ts
@@ -1,6 +1,5 @@
-import { NgIf } from '@angular/common';
 import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, OnInit } from '@angular/core';
-import { createRunInContext, extend, injectNgtRef } from 'angular-three';
+import { checkUpdate, createRunInContext, extend, injectNgtRef, NgtPush } from 'angular-three';
 import * as THREE from 'three';
 import { Mesh, MeshBasicMaterial, PlaneGeometry } from 'three';
 import { injectShadowMeshCommon } from './common';
@@ -16,20 +15,17 @@ extend({ Mesh, PlaneGeometry, MeshBasicMaterial });
         <ngt-mesh [ref]="mesh" [scale]="get('scale')" [castShadow]="true">
             <ngt-plane-geometry />
             <ngt-mesh-basic-material
-                *ngIf="!!get('map')"
                 [transparent]="true"
                 [side]="DoubleSide"
                 [alphaTest]="get('alphaTest')"
-                [alphaMap]="get('map')"
+                [alphaMap]="key$('map') | ngtPush"
                 [opacity]="spotLightApi.debug ? 1 : 0"
             >
-                <ngt-value [rawValue]="RepeatWrapping" attach="alphaMap.wrapS" />
-                <ngt-value [rawValue]="RepeatWrapping" attach="alphaMap.wrapT" />
                 <ng-content />
             </ngt-mesh-basic-material>
         </ngt-mesh>
     `,
-    imports: [NgIf],
+    imports: [NgtPush],
     schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class NgtsSpotLightShadowNoShader extends NgtsSpotLightShadowMeshInput implements OnInit {
@@ -37,13 +33,18 @@ export class NgtsSpotLightShadowNoShader extends NgtsSpotLightShadowMeshInput im
     readonly spotLightApi = inject(NGTS_SPOT_LIGHT_API);
 
     readonly DoubleSide = THREE.DoubleSide;
-    readonly RepeatWrapping = THREE.RepeatWrapping;
 
     readonly runInContext = createRunInContext();
 
     override initialize(): void {
         super.initialize();
         this.set({ distance: 0.4, alphaTest: 0.5, width: 512, height: 512 });
+        this.hold(this.select('map'), (map) => {
+            if (map) {
+                map.wrapS = map.wrapT = THREE.RepeatWrapping;
+                checkUpdate(map);
+            }
+        });
     }
 
     ngOnInit() {
diff --git a/libs/angular-three-soba/staging/src/lib/spot-light/spot-light-shadow.ts b/libs/angular-three-soba/staging/src/lib/spot-light/spot-light-shadow.ts
index 2256ff7..8f57ac5 100644
--- a/libs/angular-three-soba/staging/src/lib/spot-light/spot-light-shadow.ts
+++ b/libs/angular-three-soba/staging/src/lib/spot-light/spot-light-shadow.ts
@@ -10,7 +10,7 @@ import { NgtsSpotLightShadowShader } from './spot-light-shadow-shader';
     standalone: true,
     template: `
         <ngts-spot-light-shadow-shader
-            *ngIf="!!get('shader')"
+            *ngIf="!!get('shader'); else noShader"
             [distance]="get('distance')"
             [shader]="get('shader')"
             [alphaTest]="get('alphaTest')"
@@ -19,15 +19,16 @@ import { NgtsSpotLightShadowShader } from './spot-light-shadow-shader';
             [width]="get('width')"
             [height]="get('height')"
         />
-        <ngts-spot-light-shadow-no-shader
-            *ngIf="!get('shader')"
-            [distance]="get('distance')"
-            [alphaTest]="get('alphaTest')"
-            [scale]="get('scale')"
-            [map]="get('map')"
-            [width]="get('width')"
-            [height]="get('height')"
-        />
+        <ng-template #noShader>
+            <ngts-spot-light-shadow-no-shader
+                [distance]="get('distance')"
+                [alphaTest]="get('alphaTest')"
+                [scale]="get('scale')"
+                [map]="get('map')"
+                [width]="get('width')"
+                [height]="get('height')"
+            />
+        </ng-template>
     `,
     imports: [NgtsSpotLightShadowShader, NgtsSpotLightShadowNoShader, NgIf, NgtPush],
 })
diff --git a/package.json b/package.json
index 5987ed2..2f51a9b 100644
--- a/package.json
+++ b/package.json
@@ -77,7 +77,7 @@
         "@angular/router": "~15.1.4",
         "@rx-angular/state": "^1.7.0",
         "@swc/helpers": "~0.4.14",
-        "angular-three": "^1.6.9",
+        "angular-three": "^1.6.11",
         "rxjs": "~7.8.0",
         "stats.js": "^0.17.0",
         "three": "0.149",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index afb0e88..9a73d8d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -43,7 +43,7 @@ specifiers:
   '@types/three': ^0.149.0
   '@typescript-eslint/eslint-plugin': ^5.51.0
   '@typescript-eslint/parser': ^5.51.0
-  angular-three: ^1.6.9
+  angular-three: ^1.6.11
   dotenv-cli: ^7.0.0
   eslint: ~8.34.0
   eslint-config-prettier: 8.6.0
@@ -87,7 +87,7 @@ dependencies:
   '@angular/router': 15.1.4_g7mjdvsmeszabti4mywkhjexwi
   '@rx-angular/state': 1.7.0_xpftpgyr2j6ijglyfnh3f5jave
   '@swc/helpers': 0.4.14
-  angular-three: 1.6.9_nmlawmh7jq7hh6ha4anyvue5hi
+  angular-three: 1.6.11_nmlawmh7jq7hh6ha4anyvue5hi
   rxjs: 7.8.0
   stats.js: 0.17.0
   three: 0.149.0
@@ -7362,8 +7362,8 @@ packages:
       require-from-string: 2.0.2
       uri-js: 4.4.1
 
-  /angular-three/1.6.9_nmlawmh7jq7hh6ha4anyvue5hi:
-    resolution: {integrity: sha512-5t0xHxO/85JnBvT/PJkCB3rlsVdxUPGMO2UNiYPsf3EBMbUjYHHi4zvgXruSbV6Xt8gkYu62rg/bG8Tud4Em/g==}
+  /angular-three/1.6.11_nmlawmh7jq7hh6ha4anyvue5hi:
+    resolution: {integrity: sha512-BcNBAPvLmVRzH0f+adS+IVZ1WdeAmJJrOrkIle4UOqmwl0hHBRUl4GjcMhwEkNh5Sz3QRjLQzWkjImAcm+uTcA==}
     peerDependencies:
       '@angular/common': ^15.1.0
       '@angular/core': ^15.1.0