fix(core): remove runOutsideAngular utils and remove zonelessReady

nartc · Apr 24, 2021 · 50a0459 · 50a0459
1 parent d8815e4
commit 50a0459
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 100 deletions.
diff --git a/packages/controls/src/lib/controls.abstract.ts b/packages/controls/src/lib/controls.abstract.ts
@@ -4,7 +4,6 @@ import {
   AnimationStore,
   CanvasStore,
   DestroyedService,
-  runOutsideAngular,
 } from '@angular-three/core';
 import {
   Directive,
@@ -22,7 +21,6 @@ export abstract class ThreeControls<TControls = unknown>
   extends AnimationLoopParticipant<TControls>
   implements OnInit {
   @Output() ready = new EventEmitter<TControls>();
-  @Output() zonelessReady = new EventEmitter<TControls>();
 
   constructor(
     readonly ngZone: NgZone,
@@ -38,23 +36,19 @@ export abstract class ThreeControls<TControls = unknown>
   ngOnInit() {
     this.ngZone.runOutsideAngular(() => {
       this.canvasStore.active$
-        .pipe(
-          runOutsideAngular(this.ngZone, (active, run) => {
+        .pipe(takeUntil(this.destroyed))
+        .subscribe((active) => {
+          this.ngZone.runOutsideAngular(() => {
             const { camera, renderer } = this.canvasStore.getImperativeState();
             if (active && camera && renderer) {
               this._controls = this.initControls(camera, renderer);
               if (this.controls) {
-                run(() => {
-                  this.ready.emit(this.controls);
-                });
-                this.zonelessReady.emit(this.controls);
+                this.ready.emit(this.controls);
                 this.participate(this.controls);
               }
             }
-          }),
-          takeUntil(this.destroyed)
-        )
-        .subscribe();
+          });
+        });
     });
   }
 

diff --git a/packages/core/audios/src/lib/audio-listener/audio-listener.directive.ts b/packages/core/audios/src/lib/audio-listener/audio-listener.directive.ts
@@ -1,8 +1,4 @@
-import {
-  CanvasStore,
-  DestroyedService,
-  runOutsideAngular,
-} from '@angular-three/core';
+import { CanvasStore, DestroyedService } from '@angular-three/core';
 import {
   Directive,
   EventEmitter,
@@ -25,7 +21,6 @@ export class AudioListenerDirective implements OnInit {
   @Input() timeDelta?: number;
 
   @Output() ready = new EventEmitter<AudioListener>();
-  @Output() zonelessReady = new EventEmitter<AudioListener>();
 
   private _listener!: AudioListener;
 
@@ -48,20 +43,16 @@ export class AudioListenerDirective implements OnInit {
       }
 
       this.canvasStore.active$
-        .pipe(
-          runOutsideAngular(this.ngZone, (active, run) => {
+        .pipe(takeUntil(this.destroyed))
+        .subscribe((active) => {
+          this.ngZone.runOutsideAngular(() => {
             const { camera } = this.canvasStore.getImperativeState();
             if (active && camera) {
               camera.add(this.audioListener);
-              run(() => {
-                this.ready.emit(this.audioListener);
-              });
-              this.zonelessReady.emit(this.audioListener);
+              this.ready.emit(this.audioListener);
             }
-          }),
-          takeUntil(this.destroyed)
-        )
-        .subscribe();
+          });
+        });
     });
   }
 

diff --git a/packages/core/canvas/src/lib/canvas.component.ts b/packages/core/canvas/src/lib/canvas.component.ts
@@ -11,7 +11,6 @@ import {
   EventsStore,
   InstancesStore,
   LoopService,
-  runOutsideAngular,
 } from '@angular-three/core';
 import { DOCUMENT } from '@angular/common';
 import {
@@ -146,26 +145,20 @@ export class CanvasComponent implements OnInit, OnDestroy {
 
   private initActiveListener() {
     this.canvasStore.active$
-      .pipe(
-        takeUntil(this.destroyed),
-        observeOn(asyncScheduler),
-        runOutsideAngular(this.ngZone, (active, run) => {
-          if (active) {
-            const {
-              renderer,
-              camera,
-              scene,
-            } = this.canvasStore.getImperativeState();
-            if (renderer && camera && scene) {
-              run(() => {
-                this.created.emit({ gl: renderer, camera, scene });
-              });
-              this.eventsStore.connectEffect(renderer.domElement);
-              this.loopService.start();
-            }
+      .pipe(takeUntil(this.destroyed), observeOn(asyncScheduler))
+      .subscribe((active) => {
+        if (active) {
+          const {
+            renderer,
+            camera,
+            scene,
+          } = this.canvasStore.getImperativeState();
+          if (renderer && camera && scene) {
+            this.created.emit({ gl: renderer, camera, scene });
+            this.eventsStore.connectEffect(renderer.domElement);
+            this.loopService.start();
           }
-        })
-      )
-      .subscribe();
+        }
+      });
   }
 }
diff --git a/packages/core/meshes/src/lib/skinned-mesh/skeleton.directive.ts b/packages/core/meshes/src/lib/skinned-mesh/skeleton.directive.ts
@@ -22,7 +22,6 @@ import { SkinnedMeshDirective } from './skinned-mesh.directive';
 export class SkeletonDirective implements OnInit {
   @Input() boneInverses?: ThreeMatrix4[];
   @Output() ready = new EventEmitter<Skeleton>();
-  @Output() zonelessReady = new EventEmitter<Skeleton>();
 
   @ContentChildren(BoneDirective) bones?: QueryList<BoneDirective>;
 
@@ -47,10 +46,7 @@ export class SkeletonDirective implements OnInit {
           boneInverses
         );
 
-        this.ngZone.run(() => {
-          this.ready.emit(this.skeleton);
-        });
-        this.zonelessReady.emit(this.skeleton);
+        this.ready.emit(this.skeleton);
 
         if (this.hostObject) {
           if (this.hostObject instanceof SkinnedMeshDirective) {

diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -3,4 +3,3 @@ export * from './lib/services';
 export * from './lib/abstracts';
 export * from './lib/typings';
 export * from './lib/utils/apply-props.util';
-export * from './lib/utils/run-outside-angular.util';
diff --git a/packages/core/src/lib/abstracts/object-3d.abstract.ts b/packages/core/src/lib/abstracts/object-3d.abstract.ts
@@ -73,7 +73,6 @@ export abstract class ThreeObject3d<TObject extends Object3D = Object3D>
   }
 
   @Output() ready = this.object3d$.pipe(filter(Boolean)) as Observable<TObject>;
-  @Output() zonelessReady = new EventEmitter<TObject>();
 
   constructor(
     protected readonly canvasStore: CanvasStore,
@@ -148,11 +147,7 @@ export abstract class ThreeObject3d<TObject extends Object3D = Object3D>
   }
 
   protected objectReady() {
-    this.ngZone.run(() => {
-      this.$object3d.next(this.object3d);
-    });
-
-    this.zonelessReady.emit(this.object3d);
+    this.$object3d.next(this.object3d);
     this.participate(this.object3d);
   }
 

diff --git a/packages/core/src/lib/utils/run-outside-angular.util.ts b/packages/core/src/lib/utils/run-outside-angular.util.ts
diff --git a/packages/postprocessing/src/lib/abstracts/pass.abstract.ts b/packages/postprocessing/src/lib/abstracts/pass.abstract.ts
@@ -42,7 +42,6 @@ export abstract class ThreePass<TPass extends Pass = Pass>
   }
 
   @Output() ready = new EventEmitter<TPass>();
-  @Output() zonelessReady = new EventEmitter<TPass>();
 
   constructor(
     protected readonly ngZone: NgZone,
@@ -81,10 +80,7 @@ export abstract class ThreePass<TPass extends Pass = Pass>
       if (this.composer) {
         this.composer.composer.addPass(this.pass);
       }
-      this.ngZone.run(() => {
-        this.ready.emit(this.pass);
-      });
-      this.zonelessReady.emit(this.pass);
+      this.ready.emit(this.pass);
     });
   }
 

diff --git a/packages/postprocessing/src/lib/effect-composer.directive.ts b/packages/postprocessing/src/lib/effect-composer.directive.ts
@@ -1,8 +1,4 @@
-import {
-  CanvasStore,
-  DestroyedService,
-  runOutsideAngular,
-} from '@angular-three/core';
+import { CanvasStore, DestroyedService } from '@angular-three/core';
 import {
   Directive,
   EventEmitter,
@@ -27,7 +23,6 @@ export class EffectComposerDirective implements OnInit {
   @Input() watchSizeChanged = true;
 
   @Output() ready = new EventEmitter<EffectComposer>();
-  @Output() zonelessReady = new EventEmitter<EffectComposer>();
 
   constructor(
     @SkipSelf() private readonly canvasStore: CanvasStore,
@@ -39,36 +34,34 @@ export class EffectComposerDirective implements OnInit {
 
   ngOnInit() {
     this.ngZone.runOutsideAngular(() => {
+      // TODO: figure out how to clean up nested subscription
       this.canvasStore.active$
-        .pipe(
-          runOutsideAngular(this.ngZone, (active, run) => {
+        .pipe(takeUntil(this.destroyed))
+        .subscribe((active) => {
+          this.ngZone.runOutsideAngular(() => {
             const { renderer } = this.canvasStore.getImperativeState();
             if (active && renderer) {
               this._composer = new EffectComposer(renderer, this.renderTarget);
 
-              run(() => {
-                this.ready.emit(this.composer);
-              });
-              this.zonelessReady.emit(this.composer);
+              this.ready.emit(this.composer);
 
               if (this.watchSizeChanged) {
                 // nested subscription
                 this.canvasStore.canvasInternal$
                   .pipe(
                     distinctUntilKeyChanged('size'),
                     pluck('size'),
-                    runOutsideAngular(this.ngZone, ({ width, height }) => {
-                      this._composer.setSize(width, height);
-                    }),
                     takeUntil(race(this.canvasStore.active$, this.destroyed))
                   )
-                  .subscribe();
+                  .subscribe(({ width, height }) => {
+                    this.ngZone.runOutsideAngular(() => {
+                      this._composer.setSize(width, height);
+                    });
+                  });
               }
             }
-          }),
-          takeUntil(this.destroyed)
-        )
-        .subscribe();
+          });
+        });
     });
   }