Merge pull request #60 from demike/perf/use-on-push

perf: use on push

Author: demike

projects/ngx-three-demo/src/app/app.component.ts

@@ -1,9 +1,10 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  styleUrls: ['./app.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {
   title = 'ngx-three-demo';

projects/ngx-three-demo/src/app/dynamic-loader-example/dynamic-loader-example.component.ts

@@ -5,7 +5,7 @@ import { ASSET_PATH } from '../assets';
 @Component({
   selector: 'app-dynamic-loader-example',
   templateUrl: './dynamic-loader-example.component.html',
-  changeDetection: ChangeDetectionStrategy.Default,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DynamicLoaderExampleComponent implements OnDestroy {
   public modelUrl: string;

projects/ngx-three-demo/src/app/example-page/example-page.component.ts

@@ -1,11 +1,12 @@
-import { Component, Type } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Type } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { EditorService } from '../code/EditorService';
 
 @Component({
   selector: 'app-example-page',
   templateUrl: './example-page.component.html',
   styleUrls: ['./example-page.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ExamplePageComponent {
   public exampleComponent: Type<any> | null = null;

projects/ngx-three-demo/src/app/outline-pass-events-example/outline-pass-events-example.component.ts

@@ -1,12 +1,13 @@
-import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { RaycasterEmitEvent, ThMesh, ThObject3D, ThOutlinePass } from 'ngx-three';
 import { Color, MeshPhongMaterial, Vector2 } from 'three';
 import GUI from 'lil-gui';
 
 @Component({
   selector: 'app-outline-pass-events-example',
   templateUrl: './outline-pass-events-example.component.html',
-  styleUrls: ['./outline-pass-events-example.component.scss']
+  styleUrls: ['./outline-pass-events-example.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class OutlinePassEventsExampleComponent implements OnInit {
   protected outlinePassResolution = new Vector2(window.innerWidth, window.innerHeight);
@@ -53,7 +54,7 @@ export class OutlinePassEventsExampleComponent implements OnInit {
         x: Math.random() * 4 - 2,
         y: Math.random() * 4 - 2,
         z: Math.random() * 4 - 2,
-        scale: Math.random() * 0.3 + 0.1
+        scale: Math.random() * 0.3 + 0.1,
       });
     }
   }

projects/ngx-three-demo/src/main.ts

@@ -9,5 +9,5 @@ if (environment.production) {
 }
 
 platformBrowserDynamic()
-  .bootstrapModule(AppModule)
+  .bootstrapModule(AppModule, { ngZoneEventCoalescing: true, ngZoneRunCoalescing: true /*, ngZone: 'noop'  */ })
   .catch((err) => console.error(err));

projects/ngx-three/src/lib/ThControlBase.ts

@@ -1,4 +1,4 @@
-import { Component, inject, OnDestroy } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, OnDestroy } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { EventDispatcher } from 'three';
 import { ThObject3D } from './generated/ThObject3D';
@@ -8,6 +8,7 @@ import { ThWrapperBase } from './ThWrapperBase';
 @Component({
   selector: 'th-abs-control',
   template: '',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 // eslint-disable-next-line @angular-eslint/component-class-suffix
 export class ThControlBase<T, ARGS> extends ThWrapperBase<T, ARGS> implements OnDestroy {

projects/ngx-three/src/lib/ThGeometryBase.ts

@@ -1,10 +1,11 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BufferGeometry, NormalOrGLBufferAttributes } from 'three';
 import { ThObject3D } from './generated/ThObject3D';
 import { ThWrapperBase } from './ThWrapperBase';
 @Component({
   selector: 'th-abs-geometry',
-  template: ''
+  template: '',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 // eslint-disable-next-line @angular-eslint/component-class-suffix
 export class ThGeometryBase<T extends BufferGeometry<NormalOrGLBufferAttributes>, ARGS> extends ThWrapperBase<T, ARGS> {

projects/ngx-three/src/lib/ThMaterialBase.ts

@@ -1,10 +1,11 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { Material, Mesh } from 'three';
 import { ThObject3D } from './generated/ThObject3D';
 import { ThWrapperBase } from './ThWrapperBase';
 @Component({
   selector: 'th-abs-material',
-  template: ''
+  template: '',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 // eslint-disable-next-line @angular-eslint/component-class-suffix
 export class ThMaterialBase<T extends Material, ARGS> extends ThWrapperBase<T, ARGS> {

projects/ngx-three/src/lib/ThObjectBase.ts

@@ -1,9 +1,10 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
 import { Object3D, Vector3 } from 'three';
 import { ThWrapperBase } from './ThWrapperBase';
 @Component({
   selector: 'th-abs-object',
-  template: '<ng-content/>'
+  template: '<ng-content/>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 // eslint-disable-next-line @angular-eslint/component-class-suffix
 export class ThObjectBase<T extends Object3D, ARGS = unknown> extends ThWrapperBase<T, ARGS> implements OnInit {

projects/ngx-three/src/lib/ThPassBase.ts

@@ -1,10 +1,11 @@
-import { Component, OnInit, Optional } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit, Optional } from '@angular/core';
 import { ThEffectComposer } from './generated/overrides/ThEffectComposer';
 import { Pass } from 'three/examples/jsm/postprocessing/Pass.js';
 import { ThWrapperBase } from './ThWrapperBase';
 @Component({
   selector: 'th-abs-control',
   template: '',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 // eslint-disable-next-line @angular-eslint/component-class-suffix
 export class ThPassBase<T extends Pass = Pass, ARGS = unknown> extends ThWrapperBase<T, ARGS> implements OnInit {

projects/ngx-three/src/lib/ThTextureBase.ts

@@ -1,9 +1,10 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { Texture } from 'three';
 import { ThWrapperBase } from './ThWrapperBase';
 @Component({
   selector: 'th-abs-texture',
-  template: ''
+  template: '',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 // eslint-disable-next-line @angular-eslint/component-class-suffix
 export class ThTextureBase<T extends Texture, ARGS> extends ThWrapperBase<T, ARGS> {}

projects/ngx-three/src/lib/ThView.ts

@@ -1,4 +1,5 @@
 import {
+  ChangeDetectionStrategy,
   Component,
   ContentChild,
   ElementRef,
@@ -28,6 +29,7 @@ export const HOST_ELEMENT = new InjectionToken<ElementRef<HTMLElement>>('HOST_EL
     { provide: RAYCASTER, useValue: new Raycaster() },
     RaycasterService,
   ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 // eslint-disable-next-line @angular-eslint/component-class-suffix
 export class ThView implements OnInit {

projects/ngx-three/src/lib/ThWrapperBase.spec.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { EventDispatcher, Object3DEventMap } from 'three';
 import { ThWrapperBase } from './ThWrapperBase';
@@ -17,6 +17,7 @@ class ExampleObj extends EventDispatcher<Object3DEventMap & ExampleEventMap> {
 @Component({
   selector: 'th-wrapper-impl',
   template: '',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 class ThWrapperImplComponent extends ThWrapperBase<ExampleObj, any> {
   getType() {

projects/ngx-three/src/lib/ThWrapperBase.ts

@@ -1,4 +1,5 @@
 import {
+  ChangeDetectionStrategy,
   Component,
   EventEmitter,
   Input,
@@ -18,11 +19,13 @@ import { isDisposable } from './util';
 export interface ThWrapperEventMap<T = Object3D> extends Object3DEventMap {
   changes: { changes: SimpleChanges };
   loaded: { object: T };
+  removed: { object: T };
 }
 
 @Component({
   selector: 'th-abs-wrapper',
   template: '',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 // eslint-disable-next-line @angular-eslint/component-class-suffix
 export class ThWrapperBase<T, ARGS = unknown> implements ThWrapperLifeCycle, OnChanges, OnInit, OnDestroy {
@@ -149,6 +152,7 @@ export class ThWrapperBase<T, ARGS = unknown> implements ThWrapperLifeCycle, OnC
     if (this.autoDispose) {
       this.disposeObjRef();
     }
+    this.emitRemoveEvent();
   }
 
   protected applyObjRef(objRef: T | undefined) {
@@ -176,6 +180,20 @@ export class ThWrapperBase<T, ARGS = unknown> implements ThWrapperLifeCycle, OnC
     }
   }
 
+  protected emitRemoveEvent() {
+    // only emit change if _objRef is no proxy,
+    // and trigger emit over objRef event emitter
+    if (this._objRef && !isLazyObject3dProxy(this._objRef as any)) {
+      (this._objRef as unknown as Object3D<ThWrapperEventMap<T>>).dispatchEvent?.({
+        type: 'removed',
+        object: this._objRef,
+      });
+      if (this._objRef$) {
+        this._objRef$.next(this._objRef);
+      }
+    }
+  }
+
   protected emitPropertyChanges(changes: SimpleChanges) {
     if (this._objRef) {
       (this._objRef as unknown as EventDispatcher<ThWrapperEventMap<T>>).dispatchEvent?.({ type: 'changes', changes });