feat(core): replace onCanvasReady with onReady

nartc · Jul 22, 2022 · 2083c50 · 2083c50
1 parent f174630
commit 2083c50
Show file tree

Hide file tree

Showing 62 changed files with 321 additions and 370 deletions.
diff --git a/apps/sandbox/src/app/height-field/height-field-geometry.component.ts b/apps/sandbox/src/app/height-field/height-field-geometry.component.ts
@@ -19,7 +19,7 @@ export class HeightFieldGeometryComponent extends NgtBufferGeometry {
   override ngOnInit() {
     super.ngOnInit();
     this.zone.runOutsideAngular(() => {
-      this.onCanvasReady(this.store.ready$, () => {
+      this.store.onReady(() => {
         this.effect(
           tap(() => {
             if (!this.instanceValue) return;

diff --git a/apps/sandbox/src/app/movement-regression/movement-regression.component.ts b/apps/sandbox/src/app/movement-regression/movement-regression.component.ts
@@ -28,9 +28,9 @@ import { ChangeDetectionStrategy, Component, Injectable, Input, NgModule, NgZone
 import { RouterModule } from '@angular/router';
 import { BlendFunction, KernelSize, SSAOEffect } from 'postprocessing';
 import { Observable } from 'rxjs';
+import * as THREE from 'three';
 // @ts-ignore
 import { FlakesTexture, GLTF, RectAreaLightUniformsLib } from 'three-stdlib';
-import * as THREE from 'three';
 
 RectAreaLightUniformsLib.init();
 THREE.Vector2.prototype.equals = function (v, epsilon = 0.001) {
@@ -48,23 +48,19 @@ export class LerpedPointer extends NgtComponentStore {
 
   load() {
     this.zone.runOutsideAngular(() => {
-      this.onCanvasReady(
-        this.store.ready$,
-        () => {
-          this.pointerRef.set(this.store.get((s) => s.pointer).clone());
-          return this.store.registerBeforeRender({
-            callback: ({ performance, pointer }) => {
-              this.previous.copy(this.pointerRef.value);
-              this.pointerRef.value.lerp(pointer, 0.1);
-              // Regress system when the mouse is moved
-              if (!this.previous.equals(this.pointerRef.value)) {
-                performance.regress();
-              }
-            },
-          });
-        },
-        true
-      );
+      this.store.onReady(() => {
+        this.pointerRef.set(this.store.get((s) => s.pointer).clone());
+        return this.store.registerBeforeRender({
+          callback: ({ performance, pointer }) => {
+            this.previous.copy(this.pointerRef.value);
+            this.pointerRef.value.lerp(pointer, 0.1);
+            // Regress system when the mouse is moved
+            if (!this.previous.equals(this.pointerRef.value)) {
+              performance.regress();
+            }
+          },
+        });
+      });
     });
   }
 }
@@ -262,18 +258,15 @@ export class Effects extends NgtComponentStore implements OnInit {
   }
 
   ngOnInit() {
-    this.onCanvasReady(
-      this.store.ready$,
-      () =>
-        this.store.registerBeforeRender({
-          callback: ({ performance }) => {
-            if (this.ssaoRef.value) {
-              this.ssaoRef.value.blendMode.blendFunction =
-                performance.current! < 1 ? BlendFunction.SKIP : BlendFunction.MULTIPLY;
-            }
-          },
-        }),
-      true
+    this.store.onReady(() =>
+      this.store.registerBeforeRender({
+        callback: ({ performance }) => {
+          if (this.ssaoRef.value) {
+            this.ssaoRef.value.blendMode.blendFunction =
+              performance.current && performance.current < 1 ? BlendFunction.SKIP : BlendFunction.MULTIPLY;
+          }
+        },
+      })
     );
   }
 }

diff --git a/apps/sandbox/src/app/object-clump/object-clump.component.ts b/apps/sandbox/src/app/object-clump/object-clump.component.ts
@@ -76,15 +76,12 @@ export class Pointer extends NgtComponentStore implements OnInit {
 
   ngOnInit() {
     this.zone.runOutsideAngular(() => {
-      this.onCanvasReady(
-        this.store.ready$,
-        () =>
-          this.store.registerBeforeRender({
-            callback: ({ pointer, viewport }) => {
-              this.pointerRef.api.position.set((pointer.x * viewport.width) / 2, (pointer.y * viewport.height) / 2, 0);
-            },
-          }),
-        true
+      this.store.onReady(() =>
+        this.store.registerBeforeRender({
+          callback: ({ pointer, viewport }) => {
+            this.pointerRef.api.position.set((pointer.x * viewport.width) / 2, (pointer.y * viewport.height) / 2, 0);
+          },
+        })
       );
     });
   }

diff --git a/libs/cannon/src/lib/body.ts b/libs/cannon/src/lib/body.ts
@@ -254,7 +254,7 @@ export class NgtPhysicBody extends NgtComponentStore {
 
       const physicsStore = this.physicsStore;
 
-      this.onCanvasReady(this.store.ready$, () => {
+      this.store.onReady(() => {
         this.effect<[CannonWorkerAPI, THREE.Object3D]>(
           tapEffect(() => {
             const { worker, refs, events } = physicsStore.get();

diff --git a/libs/cannon/src/lib/constraint.ts b/libs/cannon/src/lib/constraint.ts
@@ -103,7 +103,7 @@ export class NgtPhysicConstraint extends NgtComponentStore {
       const physicsStore = this.physicsStore;
       const uuid = makeId();
 
-      this.onCanvasReady(this.store.ready$, () => {
+      this.store.onReady(() => {
         this.effect<[CannonWorkerAPI, TObjectA, TObjectB]>(
           tapEffect(([worker, a, b]) => {
             worker.addConstraint({

diff --git a/libs/cannon/src/lib/debug.ts b/libs/cannon/src/lib/debug.ts
@@ -91,7 +91,7 @@ export class NgtCannonDebug extends NgtInstance<THREE.Scene, NgtCannonDebugState
   override ngOnInit() {
     super.ngOnInit();
     this.zone.runOutsideAngular(() => {
-      this.onCanvasReady(this.store.ready$, () => {
+      this.store.onReady(() => {
         this.prepareInstance(new THREE.Scene());
         this.set((state) => ({
           cannonDebugger: state.impl(this.instance.value, { bodies: state.bodies } as World, {

diff --git a/libs/cannon/src/lib/ray.ts b/libs/cannon/src/lib/ray.ts
@@ -28,7 +28,7 @@ export class NgtPhysicRaycast extends NgtComponentStore {
     this.zone.runOutsideAngular(() => {
       const uuid = makeId();
 
-      this.onCanvasReady(this.store.ready$, () => {
+      this.store.onReady(() => {
         this.effect<CannonWorkerAPI>(
           tapEffect((worker) => {
             const events = this.physicsStore.get((s) => s.events);

diff --git a/libs/cannon/src/lib/raycast-vehicle.ts b/libs/cannon/src/lib/raycast-vehicle.ts
@@ -58,7 +58,7 @@ export class NgtPhysicRaycastVehicle extends NgtComponentStore {
       const { chassisBody, indexForwardAxis = 2, indexRightAxis = 0, indexUpAxis = 1, wheelInfos, wheels } = fn();
       const physicsStore = this.physicsStore;
 
-      this.onCanvasReady(this.store.ready$, () => {
+      this.store.onReady(() => {
         this.effect<[CannonWorkerAPI, THREE.Object3D, THREE.Object3D, THREE.Object3D[]]>(
           tapEffect(() => {
             const worker = physicsStore.get((s) => s.worker);

diff --git a/libs/cannon/src/lib/spring.ts b/libs/cannon/src/lib/spring.ts
@@ -40,7 +40,7 @@ export class NgtPhysicSpring extends NgtComponentStore {
       const physicsStore = this.physicsStore;
       const uuid = makeId();
 
-      this.onCanvasReady(this.store.ready$, () => {
+      this.store.onReady(() => {
         this.effect<[CannonWorkerAPI, THREE.Object3D, THREE.Object3D]>(
           tapEffect(([worker, a, b]) => {
             worker.addSpring({

diff --git a/libs/core/attributes/src/lib/color-attribute/color-attribute.ts b/libs/core/attributes/src/lib/color-attribute/color-attribute.ts
@@ -1,5 +1,5 @@
 // GENERATED
-import { makeColor, NgtInstance, provideInstanceRef, NgtColor } from '@angular-three/core';
+import { makeColor, NgtColor, NgtInstance, provideInstanceRef } from '@angular-three/core';
 import { ChangeDetectionStrategy, Component, Input, NgModule } from '@angular/core';
 import type { Subscription } from 'rxjs';
 import * as THREE from 'three';
@@ -18,16 +18,12 @@ export class NgtColorAttribute extends NgtInstance<THREE.Color> {
         this.initSubscription.unsubscribe();
       }
 
-      this.initSubscription = this.onCanvasReady(
-        this.store.ready$,
-        () => {
-          this.prepareInstance(makeColor(color));
-          return () => {
-            this.initSubscription?.unsubscribe();
-          };
-        },
-        true
-      );
+      this.initSubscription = this.store.onReady(() => {
+        this.prepareInstance(makeColor(color));
+        return () => {
+          this.initSubscription?.unsubscribe();
+        };
+      });
     });
   }
 

diff --git a/libs/core/attributes/src/lib/fog-attribute/fog-attribute.ts b/libs/core/attributes/src/lib/fog-attribute/fog-attribute.ts
@@ -1,5 +1,5 @@
 // GENERATED
-import { make, NgtInstance, provideInstanceRef, NgtFog } from '@angular-three/core';
+import { make, NgtFog, NgtInstance, provideInstanceRef } from '@angular-three/core';
 import { ChangeDetectionStrategy, Component, Input, NgModule } from '@angular/core';
 import type { Subscription } from 'rxjs';
 import * as THREE from 'three';
@@ -18,16 +18,12 @@ export class NgtFogAttribute extends NgtInstance<THREE.Fog> {
         this.initSubscription.unsubscribe();
       }
 
-      this.initSubscription = this.onCanvasReady(
-        this.store.ready$,
-        () => {
-          this.prepareInstance(make(THREE.Fog, fog));
-          return () => {
-            this.initSubscription?.unsubscribe();
-          };
-        },
-        true
-      );
+      this.initSubscription = this.store.onReady(() => {
+        this.prepareInstance(make(THREE.Fog, fog));
+        return () => {
+          this.initSubscription?.unsubscribe();
+        };
+      });
     });
   }
 

diff --git a/libs/core/attributes/src/lib/fog-exp2-attribute/fog-exp2-attribute.ts b/libs/core/attributes/src/lib/fog-exp2-attribute/fog-exp2-attribute.ts
@@ -1,5 +1,5 @@
 // GENERATED
-import { make, NgtInstance, provideInstanceRef, NgtFogExp2 } from '@angular-three/core';
+import { make, NgtFogExp2, NgtInstance, provideInstanceRef } from '@angular-three/core';
 import { ChangeDetectionStrategy, Component, Input, NgModule } from '@angular/core';
 import type { Subscription } from 'rxjs';
 import * as THREE from 'three';
@@ -18,16 +18,12 @@ export class NgtFogExp2Attribute extends NgtInstance<THREE.FogExp2> {
         this.initSubscription.unsubscribe();
       }
 
-      this.initSubscription = this.onCanvasReady(
-        this.store.ready$,
-        () => {
-          this.prepareInstance(make(THREE.FogExp2, fogExp2));
-          return () => {
-            this.initSubscription?.unsubscribe();
-          };
-        },
-        true
-      );
+      this.initSubscription = this.store.onReady(() => {
+        this.prepareInstance(make(THREE.FogExp2, fogExp2));
+        return () => {
+          this.initSubscription?.unsubscribe();
+        };
+      });
     });
   }
 

diff --git a/libs/core/attributes/src/lib/matrix3-attribute/matrix3-attribute.ts b/libs/core/attributes/src/lib/matrix3-attribute/matrix3-attribute.ts
@@ -1,5 +1,5 @@
 // GENERATED
-import { make, NgtInstance, provideInstanceRef, NgtMatrix3 } from '@angular-three/core';
+import { make, NgtInstance, NgtMatrix3, provideInstanceRef } from '@angular-three/core';
 import { ChangeDetectionStrategy, Component, Input, NgModule } from '@angular/core';
 import type { Subscription } from 'rxjs';
 import * as THREE from 'three';
@@ -18,16 +18,12 @@ export class NgtMatrix3Attribute extends NgtInstance<THREE.Matrix3> {
         this.initSubscription.unsubscribe();
       }
 
-      this.initSubscription = this.onCanvasReady(
-        this.store.ready$,
-        () => {
-          this.prepareInstance(make(THREE.Matrix3, matrix3));
-          return () => {
-            this.initSubscription?.unsubscribe();
-          };
-        },
-        true
-      );
+      this.initSubscription = this.store.onReady(() => {
+        this.prepareInstance(make(THREE.Matrix3, matrix3));
+        return () => {
+          this.initSubscription?.unsubscribe();
+        };
+      });
     });
   }
 

diff --git a/libs/core/attributes/src/lib/matrix4-attribute/matrix4-attribute.ts b/libs/core/attributes/src/lib/matrix4-attribute/matrix4-attribute.ts
@@ -1,5 +1,5 @@
 // GENERATED
-import { make, NgtInstance, provideInstanceRef, NgtMatrix4 } from '@angular-three/core';
+import { make, NgtInstance, NgtMatrix4, provideInstanceRef } from '@angular-three/core';
 import { ChangeDetectionStrategy, Component, Input, NgModule } from '@angular/core';
 import type { Subscription } from 'rxjs';
 import * as THREE from 'three';
@@ -18,16 +18,12 @@ export class NgtMatrix4Attribute extends NgtInstance<THREE.Matrix4> {
         this.initSubscription.unsubscribe();
       }
 
-      this.initSubscription = this.onCanvasReady(
-        this.store.ready$,
-        () => {
-          this.prepareInstance(make(THREE.Matrix4, matrix4));
-          return () => {
-            this.initSubscription?.unsubscribe();
-          };
-        },
-        true
-      );
+      this.initSubscription = this.store.onReady(() => {
+        this.prepareInstance(make(THREE.Matrix4, matrix4));
+        return () => {
+          this.initSubscription?.unsubscribe();
+        };
+      });
     });
   }
 

diff --git a/libs/core/attributes/src/lib/value-attribute/value-attribute.ts b/libs/core/attributes/src/lib/value-attribute/value-attribute.ts
@@ -16,16 +16,12 @@ export class NgtValueAttribute extends NgtInstance<any> {
         this.initSubscription.unsubscribe();
       }
 
-      this.initSubscription = this.onCanvasReady(
-        this.store.ready$,
-        () => {
-          this.prepareInstance(value);
-          return () => {
-            this.initSubscription?.unsubscribe();
-          };
-        },
-        true
-      );
+      this.initSubscription = this.store.onReady(() => {
+        this.prepareInstance(value);
+        return () => {
+          this.initSubscription?.unsubscribe();
+        };
+      });
     });
   }
 

diff --git a/libs/core/attributes/src/lib/vector2-attribute/vector2-attribute.ts b/libs/core/attributes/src/lib/vector2-attribute/vector2-attribute.ts
@@ -1,5 +1,5 @@
 // GENERATED
-import { makeVector2, NgtInstance, provideInstanceRef, NgtVector2 } from '@angular-three/core';
+import { makeVector2, NgtInstance, NgtVector2, provideInstanceRef } from '@angular-three/core';
 import { ChangeDetectionStrategy, Component, Input, NgModule } from '@angular/core';
 import type { Subscription } from 'rxjs';
 import * as THREE from 'three';
@@ -18,16 +18,12 @@ export class NgtVector2Attribute extends NgtInstance<THREE.Vector2> {
         this.initSubscription.unsubscribe();
       }
 
-      this.initSubscription = this.onCanvasReady(
-        this.store.ready$,
-        () => {
-          this.prepareInstance(makeVector2(vector2));
-          return () => {
-            this.initSubscription?.unsubscribe();
-          };
-        },
-        true
-      );
+      this.initSubscription = this.store.onReady(() => {
+        this.prepareInstance(makeVector2(vector2));
+        return () => {
+          this.initSubscription?.unsubscribe();
+        };
+      });
     });
   }
 

diff --git a/libs/core/attributes/src/lib/vector3-attribute/vector3-attribute.ts b/libs/core/attributes/src/lib/vector3-attribute/vector3-attribute.ts
@@ -1,5 +1,5 @@
 // GENERATED
-import { makeVector3, NgtInstance, provideInstanceRef, NgtVector3 } from '@angular-three/core';
+import { makeVector3, NgtInstance, NgtVector3, provideInstanceRef } from '@angular-three/core';
 import { ChangeDetectionStrategy, Component, Input, NgModule } from '@angular/core';
 import type { Subscription } from 'rxjs';
 import * as THREE from 'three';
@@ -18,16 +18,12 @@ export class NgtVector3Attribute extends NgtInstance<THREE.Vector3> {
         this.initSubscription.unsubscribe();
       }
 
-      this.initSubscription = this.onCanvasReady(
-        this.store.ready$,
-        () => {
-          this.prepareInstance(makeVector3(vector3));
-          return () => {
-            this.initSubscription?.unsubscribe();
-          };
-        },
-        true
-      );
+      this.initSubscription = this.store.onReady(() => {
+        this.prepareInstance(makeVector3(vector3));
+        return () => {
+          this.initSubscription?.unsubscribe();
+        };
+      });
     });
   }