fix: improve the way to use ngZone.runOutsideAngular() in time, screen-size and pointer service

Author: AxiomeCG

.gitignore

@@ -43,3 +43,4 @@ Thumbs.db
 
 # Custom
 documentation
+pnpm-lock.yaml

src/app/three-viewer/engine/service/pointer/pointer.service.ts

@@ -1,4 +1,4 @@
-import { Injectable, NgZone } from '@angular/core';
+import { Injectable, NgZone, OnDestroy, Renderer2, RendererFactory2 } from '@angular/core';
 import { Consumer } from '../type/Consumer';
 
 /**
@@ -7,23 +7,33 @@ import { Consumer } from '../type/Consumer';
 @Injectable({
   providedIn: 'root'
 })
-export class PointerService {
+export class PointerService implements OnDestroy {
+
+
+  private unlisten: Function | undefined;
 
   /**
    * Constructor
    * Listens on the pointermove event and executes the callback of the engine (if set) outside of Angular to prevent
    * Change Detection triggering
    */
-  constructor(private readonly ngZone: NgZone) {
+  constructor(private readonly ngZone: NgZone, rendererFactory: RendererFactory2) {
+    const renderer2 = rendererFactory.createRenderer(null, null);
     this.ngZone.runOutsideAngular(
       () => {
-        window.addEventListener('pointermove', (pointerEvent) => {
+        this.unlisten = renderer2.listen(window, 'pointermove', (pointerEvent) => {
+          console.log(pointerEvent);
+          NgZone.assertNotInAngularZone();
           this.engineConsumer(pointerEvent);
         });
       }
     );
   }
 
+  ngOnDestroy(): void {
+    if (this.unlisten) this.unlisten();
+  }
+
   /**
    * Sets the consumer that will be used by the engine to determine its pointermove behaviour based on event.
    * @param consumer Callback that needs to be executed outside the NgZone to avoid heavy change detection processes.

src/app/three-viewer/engine/service/size/screen-size.service.ts

@@ -1,4 +1,4 @@
-import { Injectable, NgZone } from '@angular/core';
+import { Injectable, NgZone, OnDestroy, RendererFactory2 } from '@angular/core';
 import { ISize } from './ISize';
 import { Consumer } from '../type/Consumer';
 
@@ -8,16 +8,26 @@ import { Consumer } from '../type/Consumer';
 @Injectable({
   providedIn: 'root'
 })
-export class ScreenSizeService {
+export class ScreenSizeService implements OnDestroy {
+  private unlisten: Function | undefined;
+
   /**
    * Constructor
    * Listen to the resize outside of Angular to execute the Engine's consumer to avoid ChangeDetection triggers
    */
-  constructor(private readonly ngZone: NgZone) {
+  constructor(private readonly ngZone: NgZone, rendererFactory: RendererFactory2) {
     this.ngZone.runOutsideAngular(() => {
-      window.addEventListener('resize', () => {
-        this.engineConsumer(ScreenSizeService.getSize());
-      });
+
+      const renderer2 = rendererFactory.createRenderer(null, null);
+      this.ngZone.runOutsideAngular(
+        () => {
+          this.unlisten = renderer2.listen(window, 'resize', () => {
+            NgZone.assertNotInAngularZone();
+            this.engineConsumer(ScreenSizeService.getSize());
+          });
+        }
+      );
+
     });
   }
 
@@ -66,4 +76,10 @@ export class ScreenSizeService {
    * Slot to keep track of the engine consumer to execute out of the NgZone on resize
    */
   private engineConsumer: Consumer<ISize> = () => {};
+
+  ngOnDestroy(): void {
+    if (this.unlisten) {
+      this.unlisten();
+    }
+  }
 }

src/app/three-viewer/engine/service/time/time.service.ts

@@ -1,6 +1,5 @@
 import { Injectable, NgZone } from '@angular/core';
 import { IExperienceTime } from './IExperienceTime';
-import { Consumer } from '../type/Consumer';
 
 
 /**
@@ -32,17 +31,24 @@ export class TimeService {
    * Handles the time of the experience by emitting on each frame an event to forward updates.
    * Executed outside the NgZone to avoid heavy load and performance issues due to the Change Detection.
    */
-  tick() {
-    this.ngZone.runOutsideAngular(() => {
-      const currentTime = Date.now();
-      this.experienceTime.delta = currentTime - this.experienceTime.current;
-      this.experienceTime.current = currentTime;
+  launch() {
+    this.ngZone.runOutsideAngular(() => this.tick());
+  }
+
+  /**
+   * Recursive call of the animation to handle the time of the experience
+   * @private
+   */
+  private tick() {
+    NgZone.assertNotInAngularZone()
+    const currentTime = Date.now();
+    this.experienceTime.delta = currentTime - this.experienceTime.current;
+    this.experienceTime.current = currentTime;
 
-      this.experienceTime.elapsed = this.experienceTime.current - this.experienceTime.start;
+    this.experienceTime.elapsed = this.experienceTime.current - this.experienceTime.start;
 
-      this.engineConsumer(this.experienceTime);
-      window.requestAnimationFrame(() => this.tick());
-    });
+    this.engineConsumer(this.experienceTime);
+    window.requestAnimationFrame(() => this.tick());
   }
 
   /**
@@ -57,13 +63,13 @@ export class TimeService {
    * Sets the consumer that will be used by the engine to determine its update behaviour based on the new time bundle
    * @param consumer Callback that needs to be executed outside the NgZone to avoid heavy change detection processes.
    */
-  setConsumer(consumer: Consumer<IExperienceTime>): void {
+  setConsumer(consumer: (experienceTime: IExperienceTime) => void): void {
     this.engineConsumer = consumer;
   }
 
   /**
    * Slot to keep track of the engine consumer to execute out of the NgZone on tick
    */
-  private engineConsumer: Consumer<IExperienceTime> = () => {};
+  private engineConsumer: (experienceTime: IExperienceTime) => void = () => {};
 
 }

src/app/three-viewer/three-viewer.component.ts

@@ -45,7 +45,7 @@ export class ThreeViewerComponent implements OnInit, OnDestroy {
     this.engine = new Engine(this.canvasRef.nativeElement);
 
     this.timeService.setConsumer((experienceTime) => this.engine?.update(experienceTime));
-    this.timeService.tick(); //First impulsion of the tick loop
+    this.timeService.launch(); //First impulsion of the tick loop
 
     this.screenSizeService.setConsumer((size) => this.engine?.resize(size));