angular-three-soba 2.2.0 → 2.2.1

package/fesm2022/angular-three-soba-performances.mjs

@@ -1,7 +1,6 @@
 import * as i0 from '@angular/core';
-import { input, afterNextRender, untracked, Directive, viewChild, Component, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, inject, computed } from '@angular/core';
+import { input, effect, untracked, inject, DestroyRef, Directive, viewChild, Component, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, computed } from '@angular/core';
 import { injectStore, omit, pick, extend, getLocalState, injectBeforeRender, resolveRef, checkUpdate, NgtArgs, vector3 } from 'angular-three';
-import { injectAutoEffect } from 'ngxtension/auto-effect';
 import { mergeInputs } from 'ngxtension/inject-inputs';
 import { LOD, Matrix4, Mesh, Group, Color, Material, Vector3, Quaternion, DynamicDrawUsage, InstancedMesh, InstancedBufferAttribute, Ray, Sphere, Points, BufferAttribute, BufferGeometry, Vector2 } from 'three';
 import { setUpdateRange } from 'angular-three-soba/misc';
@@ -16,65 +15,57 @@ class NgtsAdaptiveDpr {
         const current = store.select('performance', 'current');
         const initialDpr = store.select('viewport', 'initialDpr');
         const setDpr = store.select('setDpr');
-        const autoEffect = injectAutoEffect();
-        afterNextRender(() => {
-            autoEffect(() => {
-                const domElement = untracked(gl).domElement;
-                return () => {
-                    const [_active, _setDpr, _initialDpr, pixelated] = [
-                        untracked(active),
-                        untracked(setDpr),
-                        untracked(initialDpr),
-                        untracked(this.pixelated),
-                    ];
-                    if (_active)
-                        _setDpr(_initialDpr);
-                    if (pixelated && domElement)
-                        domElement.style.imageRendering = 'auto';
-                };
-            });
-            autoEffect(() => {
-                const [_current, pixelated, domElement, _setDpr, _initialDpr] = [
-                    current(),
-                    untracked(this.pixelated),
-                    untracked(gl).domElement,
-                    untracked(setDpr),
-                    untracked(initialDpr),
-                ];
-                _setDpr(_current * _initialDpr);
-                if (pixelated && domElement)
-                    domElement.style.imageRendering = _current === 1 ? 'auto' : 'pixelated';
-            });
+        effect(() => {
+            const [_current, pixelated, domElement, _setDpr, _initialDpr] = [
+                current(),
+                untracked(this.pixelated),
+                untracked(gl).domElement,
+                untracked(setDpr),
+                untracked(initialDpr),
+            ];
+            _setDpr(_current * _initialDpr);
+            if (pixelated && domElement)
+                domElement.style.imageRendering = _current === 1 ? 'auto' : 'pixelated';
+        });
+        inject(DestroyRef).onDestroy(() => {
+            const [domElement, _active, _setDpr, _initialDpr, pixelated] = [
+                untracked(gl).domElement,
+                untracked(active),
+                untracked(setDpr),
+                untracked(initialDpr),
+                untracked(this.pixelated),
+            ];
+            if (_active)
+                _setDpr(_initialDpr);
+            if (pixelated && domElement)
+                domElement.style.imageRendering = 'auto';
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsAdaptiveDpr, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.0", type: NgtsAdaptiveDpr, isStandalone: true, selector: "ngts-adaptive-dpr", inputs: { pixelated: { classPropertyName: "pixelated", publicName: "pixelated", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsAdaptiveDpr, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.4", type: NgtsAdaptiveDpr, isStandalone: true, selector: "ngts-adaptive-dpr", inputs: { pixelated: { classPropertyName: "pixelated", publicName: "pixelated", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsAdaptiveDpr, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsAdaptiveDpr, decorators: [{
             type: Directive,
             args: [{ selector: 'ngts-adaptive-dpr', standalone: true }]
         }], ctorParameters: () => [] });
 
 class NgtsAdaptiveEvents {
     constructor() {
-        const autoEffect = injectAutoEffect();
         const store = injectStore();
         const current = store.select('performance', 'current');
-        afterNextRender(() => {
-            autoEffect(() => {
-                const enabled = store.snapshot.events.enabled;
-                return () => store.snapshot.setEvents({ enabled });
-            });
-            autoEffect(() => {
-                const _current = current();
-                return () => store.snapshot.setEvents({ enabled: _current === 1 });
-            });
+        const currentEnabled = store.snapshot.events.enabled;
+        effect((onCleanup) => {
+            const _current = current();
+            onCleanup(() => store.snapshot.setEvents({ enabled: _current === 1 }));
+        });
+        inject(DestroyRef).onDestroy(() => {
+            store.snapshot.setEvents({ enabled: currentEnabled });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsAdaptiveEvents, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: NgtsAdaptiveEvents, isStandalone: true, selector: "ngts-adaptive-events", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsAdaptiveEvents, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.4", type: NgtsAdaptiveEvents, isStandalone: true, selector: "ngts-adaptive-events", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsAdaptiveEvents, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsAdaptiveEvents, decorators: [{
             type: Directive,
             args: [{ standalone: true, selector: 'ngts-adaptive-events' }]
         }], ctorParameters: () => [] });
@@ -90,32 +81,29 @@ class NgtsDetailed {
         this.lodRef = viewChild.required('lod');
         this.hysteresis = pick(this.options, 'hysteresis');
         extend({ LOD });
-        const autoEffect = injectAutoEffect();
-        afterNextRender(() => {
-            autoEffect(() => {
-                const lod = this.lodRef().nativeElement;
-                const localState = getLocalState(lod);
-                if (!localState)
-                    return;
-                const [, distances, hysteresis] = [localState.objects(), this.distances(), this.hysteresis()];
-                lod.levels.length = 0;
-                lod.children.forEach((object, index) => {
-                    lod.levels.push({ object, distance: distances[index], hysteresis });
-                });
+        effect(() => {
+            const lod = this.lodRef().nativeElement;
+            const localState = getLocalState(lod);
+            if (!localState)
+                return;
+            const [, distances, hysteresis] = [localState.objects(), this.distances(), this.hysteresis()];
+            lod.levels.length = 0;
+            lod.children.forEach((object, index) => {
+                lod.levels.push({ object, distance: distances[index], hysteresis });
             });
         });
         injectBeforeRender(({ camera }) => {
             this.lodRef().nativeElement.update(camera);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsDetailed, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsDetailed, isStandalone: true, selector: "ngts-detailed", inputs: { distances: { classPropertyName: "distances", publicName: "distances", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "lodRef", first: true, predicate: ["lod"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsDetailed, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.4", type: NgtsDetailed, isStandalone: true, selector: "ngts-detailed", inputs: { distances: { classPropertyName: "distances", publicName: "distances", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "lodRef", first: true, predicate: ["lod"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<ngt-lOD #lod [parameters]="parameters()">
 			<ng-content />
 		</ngt-lOD>
 	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsDetailed, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsDetailed, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-detailed',
@@ -191,21 +179,19 @@ class NgtsInstance {
         this.instances = inject(NgtsInstances);
         this.positionMeshRef = viewChild.required('positionMesh');
         extend({ PositionMesh });
-        const autoEffect = injectAutoEffect();
-        afterNextRender(() => {
-            autoEffect(() => {
-                return this.instances.subscribe(this.positionMeshRef().nativeElement);
-            });
+        effect((onCleanup) => {
+            const cleanup = this.instances.subscribe(this.positionMeshRef().nativeElement);
+            onCleanup(() => cleanup());
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsInstance, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsInstance, isStandalone: true, selector: "ngts-instance", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "positionMeshRef", first: true, predicate: ["positionMesh"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsInstance, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.4", type: NgtsInstance, isStandalone: true, selector: "ngts-instance", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "positionMeshRef", first: true, predicate: ["positionMesh"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<ngt-position-mesh #positionMesh [instance]="instances.instancedMeshRef()" [parameters]="options()">
 			<ng-content />
 		</ngt-position-mesh>
 	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsInstance, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsInstance, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-instance',
@@ -241,14 +227,11 @@ class NgtsInstances {
         });
         this.instances = [];
         extend({ InstancedMesh, InstancedBufferAttribute });
-        const autoEffect = injectAutoEffect();
-        afterNextRender(() => {
-            autoEffect(() => {
-                const instancedMesh = this.instancedMeshRef()?.nativeElement;
-                if (!instancedMesh)
-                    return;
-                checkUpdate(instancedMesh.instanceMatrix);
-            });
+        effect(() => {
+            const instancedMesh = this.instancedMeshRef()?.nativeElement;
+            if (!instancedMesh)
+                return;
+            checkUpdate(instancedMesh.instanceMatrix);
         });
         let iterations = 0;
         let count = 0;
@@ -291,8 +274,8 @@ class NgtsInstances {
             this.instances = this.instances.filter((i) => i !== ref);
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsInstances, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsInstances, isStandalone: true, selector: "ngts-instances", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "instancedMeshRef", first: true, predicate: ["instancedMesh"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsInstances, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.4", type: NgtsInstances, isStandalone: true, selector: "ngts-instances", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "instancedMeshRef", first: true, predicate: ["instancedMesh"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<ngt-instanced-mesh
 			#instancedMesh
 			[userData]="{ instances }"
@@ -318,7 +301,7 @@ class NgtsInstances {
 		</ngt-instanced-mesh>
 	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsInstances, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsInstances, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-instances',
@@ -411,21 +394,19 @@ class NgtsPoint {
         this.positionPointRef = viewChild.required('positionPoint');
         this.points = inject(NgtsPointsInstances);
         extend({ PositionPoint });
-        const autoEffect = injectAutoEffect();
-        afterNextRender(() => {
-            autoEffect(() => {
-                return this.points.subscribe(this.positionPointRef().nativeElement);
-            });
+        effect((onCleanup) => {
+            const cleanUp = this.points.subscribe(this.positionPointRef().nativeElement);
+            onCleanup(() => cleanUp());
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsPoint, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsPoint, isStandalone: true, selector: "ngts-point", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "positionPointRef", first: true, predicate: ["positionPoint"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsPoint, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.4", type: NgtsPoint, isStandalone: true, selector: "ngts-point", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "positionPointRef", first: true, predicate: ["positionPoint"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<ngt-position-point #positionPoint [parameters]="options()" [instance]="points.pointsRef()">
 			<ng-content />
 		</ngt-position-point>
 	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsPoint, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsPoint, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-point',
@@ -461,8 +442,8 @@ class NgtsPointsBuffer {
                 checkUpdate(attributes['size']);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsPointsBuffer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: NgtsPointsBuffer, isStandalone: true, selector: "ngts-points-buffer", inputs: { positions: { classPropertyName: "positions", publicName: "positions", isSignal: true, isRequired: true, transformFunction: null }, colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null }, sizes: { classPropertyName: "sizes", publicName: "sizes", isSignal: true, isRequired: false, transformFunction: null }, stride: { classPropertyName: "stride", publicName: "stride", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "pointsRef", first: true, predicate: ["points"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsPointsBuffer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.4", type: NgtsPointsBuffer, isStandalone: true, selector: "ngts-points-buffer", inputs: { positions: { classPropertyName: "positions", publicName: "positions", isSignal: true, isRequired: true, transformFunction: null }, colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null }, sizes: { classPropertyName: "sizes", publicName: "sizes", isSignal: true, isRequired: false, transformFunction: null }, stride: { classPropertyName: "stride", publicName: "stride", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "pointsRef", first: true, predicate: ["points"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<ngt-points #points [parameters]="options()">
 			<ngt-buffer-geometry>
 				<ngt-buffer-attribute
@@ -495,7 +476,7 @@ class NgtsPointsBuffer {
 		</ngt-points>
 	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsPointsBuffer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsPointsBuffer, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-points-buffer',
@@ -556,14 +537,11 @@ class NgtsPointsInstances {
         this.positionPoints = [];
         this.DynamicDrawUsage = DynamicDrawUsage;
         extend({ Points, BufferAttribute, BufferGeometry });
-        const autoEffect = injectAutoEffect();
-        afterNextRender(() => {
-            autoEffect(() => {
-                const points = this.pointsRef()?.nativeElement;
-                if (!points)
-                    return;
-                checkUpdate(points.geometry.attributes['position']);
-            });
+        effect(() => {
+            const points = this.pointsRef()?.nativeElement;
+            if (!points)
+                return;
+            checkUpdate(points.geometry.attributes['position']);
         });
         injectBeforeRender(() => {
             const points = this.pointsRef()?.nativeElement;
@@ -596,8 +574,8 @@ class NgtsPointsInstances {
             this.positionPoints = this.positionPoints.filter((p) => p !== ref);
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsPointsInstances, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsPointsInstances, isStandalone: true, selector: "ngts-points-instances", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "pointsRef", first: true, predicate: ["points"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsPointsInstances, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.4", type: NgtsPointsInstances, isStandalone: true, selector: "ngts-points-instances", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "pointsRef", first: true, predicate: ["points"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<ngt-points
 			#points
 			[userData]="{ instances: positionPoints }"
@@ -632,7 +610,7 @@ class NgtsPointsInstances {
 		</ngt-points>
 	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsPointsInstances, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsPointsInstances, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-points-instances',
@@ -694,19 +672,17 @@ class NgtsSegment {
         this.segmentRef = viewChild.required('segment');
         this.segments = inject(NgtsSegments);
         extend({ SegmentObject });
-        const autoEffect = injectAutoEffect();
-        afterNextRender(() => {
-            autoEffect(() => {
-                return this.segments.subscribe(this.segmentRef());
-            });
+        effect((onCleanup) => {
+            const cleanUp = this.segments.subscribe(this.segmentRef());
+            onCleanup(() => cleanUp());
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsSegment, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsSegment, isStandalone: true, selector: "ngts-segment", inputs: { start: { classPropertyName: "start", publicName: "start", isSignal: true, isRequired: true, transformFunction: null }, end: { classPropertyName: "end", publicName: "end", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "segmentRef", first: true, predicate: ["segment"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsSegment, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.4", type: NgtsSegment, isStandalone: true, selector: "ngts-segment", inputs: { start: { classPropertyName: "start", publicName: "start", isSignal: true, isRequired: true, transformFunction: null }, end: { classPropertyName: "end", publicName: "end", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "segmentRef", first: true, predicate: ["segment"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<ngt-segment-object #segment [color]="color()" [start]="normalizedStart()" [end]="normalizedEnd()" />
 	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsSegment, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsSegment, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-segment',
@@ -778,8 +754,8 @@ class NgtsSegments {
             this.segments = this.segments.filter((i) => i !== ref);
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsSegments, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsSegments, isStandalone: true, selector: "ngts-segments", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "lineRef", first: true, predicate: ["line"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsSegments, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.4", type: NgtsSegments, isStandalone: true, selector: "ngts-segments", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "lineRef", first: true, predicate: ["line"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<ngt-primitive #line *args="[line]">
 			<ngt-primitive *args="[geometry]" attach="geometry" />
 			<ngt-primitive *args="[material]" attach="material" [parameters]="materialParameters()" />
@@ -787,7 +763,7 @@ class NgtsSegments {
 		</ngt-primitive>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsSegments, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsSegments, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-segments',