angular-three-soba 1.5.0 → 1.6.0-beta.0

package/fesm2020/angular-three-soba-abstractions.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { Component, CUSTOM_ELEMENTS_SCHEMA, Input, Directive, inject, InjectionToken, EventEmitter, TemplateRef, Output, ContentChild } from '@angular/core';
-import { extend, NgtRxStore, injectNgtRef, NgtStore, startWithUndefined, NgtArgs, NgtPortal, NgtPortalContent, NgtRepeat, NgtPush } from 'angular-three';
+import { extend, NgtRxStore, injectNgtRef, NgtRef, NgtStore, startWithUndefined, NgtArgs, NgtPortal, NgtPortalContent, NgtRepeat, NgtPush } from 'angular-three';
 import * as THREE from 'three';
 import { Group, CatmullRomCurve3, Vector3, Quaternion, Object3D, Matrix4, Mesh, BoxGeometry, MeshBasicMaterial, MeshLambertMaterial, CanvasTexture, AmbientLight, PointLight, Sprite, SpriteMaterial } from 'three';
 import { combineLatest, map, switchMap, of } from 'rxjs';
@@ -52,20 +52,21 @@ class NgtsBillboard extends NgtRxStore {
 }
 NgtsBillboard.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtsBillboard, deps: null, target: i0.ɵɵFactoryTarget.Component });
 NgtsBillboard.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.3", type: NgtsBillboard, isStandalone: true, selector: "ngts-billboard", inputs: { billboardRef: "billboardRef", follow: "follow", lockX: "lockX", lockY: "lockY", lockZ: "lockZ" }, usesInheritance: true, ngImport: i0, template: `
-        <ngt-group ngtCompound [ref]="billboardRef" (beforeRender)="onBeforeRender($any($event))">
+        <ngt-group ngtCompound *ref="billboardRef" (beforeRender)="onBeforeRender($any($event))">
             <ng-content />
         </ngt-group>
-    `, isInline: true });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgtRef, selector: "[ref]", inputs: ["ref"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtsBillboard, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-billboard',
                     standalone: true,
                     template: `
-        <ngt-group ngtCompound [ref]="billboardRef" (beforeRender)="onBeforeRender($any($event))">
+        <ngt-group ngtCompound *ref="billboardRef" (beforeRender)="onBeforeRender($any($event))">
             <ng-content />
         </ngt-group>
     `,
+                    imports: [NgtRef],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
         }], propDecorators: { billboardRef: [{
@@ -158,6 +159,7 @@ class NgtsLine extends NgtsLineInput {
         this.Boolean = Boolean;
         this.lineMaterial = new LineMaterial();
         this.store = inject(NgtStore);
+        this.line = null;
         this.lineRef = injectNgtRef();
     }
     set points(points) {
@@ -166,16 +168,8 @@ class NgtsLine extends NgtsLineInput {
     set segments(segments) {
         this.set({ segments });
     }
-    // TODO: Figure out if this is the case for everything else.
-    // We'd want to run computeLineDistances on the Line2 on "points" changed
-    // Consequently,when "points" changes, LineGeometry also changes and that causes
-    // the Renderer to replace the LineGeometry on the Line2, which is what's happening.
-    // But the effect that runs line.computeLineDistances() runs a little BEFORE the new lineGeometry
-    // has been attached. So it doesn't work with the props changed from the Material
-    //
-    // Alternatively, we can also run the effect on line#children changes.
-    onAfterGeometryAttached({ parent }) {
-        // parent.computeLineDistances();
+    onAfterAttach({ parent }) {
+        parent.computeLineDistances();
     }
     initialize() {
         super.initialize();
@@ -208,17 +202,9 @@ class NgtsLine extends NgtsLineInput {
     }
     ngOnInit() {
         this.connect('materialResolution', combineLatest([this.store.select('size'), this.select('resolution').pipe(startWithUndefined())]).pipe(map(([size, resolution]) => resolution ?? [size.width, size.height])));
-        if (!this.lineRef.nativeElement) {
-            this.lineRef.nativeElement = this.get('segments') ? new LineSegments2() : new Line2();
-        }
-        this.computeLineDistances();
+        this.line = this.get('segments') ? new LineSegments2() : new Line2();
         this.disposeGeometry();
     }
-    computeLineDistances() {
-        this.hold(combineLatest([this.lineRef.$, this.lineRef.children$('nonObjects'), this.select('points')]), ([line]) => {
-            line.computeLineDistances();
-        });
-    }
     disposeGeometry() {
         this.effect(this.select('lineGeometry'), (lineGeometry) => {
             return () => lineGeometry.dispose();
@@ -227,61 +213,65 @@ class NgtsLine extends NgtsLineInput {
 }
 NgtsLine.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtsLine, deps: null, target: i0.ɵɵFactoryTarget.Component });
 NgtsLine.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.3", type: NgtsLine, isStandalone: true, selector: "ngts-line[points]", inputs: { lineRef: "lineRef", points: "points", segments: "segments" }, usesInheritance: true, ngImport: i0, template: `
-        <ngt-primitive *args="[lineRef.nativeElement]" [ref]="lineRef" ngtCompound>
-            <ngt-primitive
-                *args="[get('lineGeometry')]"
-                attach="geometry"
-                (afterAttach)="onAfterGeometryAttached($any($event))"
-            />
-            <ngt-primitive
-                *args="[lineMaterial]"
-                attach="material"
-                [color]="get('color')"
-                [vertexColors]="Boolean(get('vertexColors'))"
-                [resolution]="get('materialResolution')"
-                [linewidth]="get('lineWidth')"
-                [alphaToCoverage]="get('alphaToCoverage')"
-                [dashed]="get('dashed')"
-                [dashScale]="get('dashScale') ?? lineMaterial.dashScale"
-                [dashSize]="get('dashSize') ?? lineMaterial.dashSize"
-                [dashOffset]="get('dashOffset') ?? lineMaterial.dashOffset"
-                [gapSize]="get('gapSize') ?? lineMaterial.gapSize"
-                [wireframe]="get('wireframe') ?? lineMaterial.wireframe"
-                [worldUnits]="get('worldUnits')"
-            />
-        </ngt-primitive>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }] });
+        <ng-container *args="[line]">
+            <ngt-primitive *ref="lineRef" ngtCompound>
+                <ngt-primitive
+                    *args="[get('lineGeometry')]"
+                    attach="geometry"
+                    (afterAttach)="onAfterAttach($any($event))"
+                />
+                <ngt-primitive
+                    *args="[lineMaterial]"
+                    attach="material"
+                    [color]="get('color')"
+                    [vertexColors]="Boolean(get('vertexColors'))"
+                    [resolution]="get('materialResolution')"
+                    [linewidth]="get('lineWidth')"
+                    [alphaToCoverage]="get('alphaToCoverage')"
+                    [dashed]="get('dashed')"
+                    [dashScale]="get('dashScale') ?? lineMaterial.dashScale"
+                    [dashSize]="get('dashSize') ?? lineMaterial.dashSize"
+                    [dashOffset]="get('dashOffset') ?? lineMaterial.dashOffset"
+                    [gapSize]="get('gapSize') ?? lineMaterial.gapSize"
+                    [wireframe]="get('wireframe') ?? lineMaterial.wireframe"
+                    [worldUnits]="get('worldUnits')"
+                />
+            </ngt-primitive>
+        </ng-container>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }, { kind: "directive", type: NgtRef, selector: "[ref]", inputs: ["ref"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtsLine, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-line[points]',
                     standalone: true,
                     template: `
-        <ngt-primitive *args="[lineRef.nativeElement]" [ref]="lineRef" ngtCompound>
-            <ngt-primitive
-                *args="[get('lineGeometry')]"
-                attach="geometry"
-                (afterAttach)="onAfterGeometryAttached($any($event))"
-            />
-            <ngt-primitive
-                *args="[lineMaterial]"
-                attach="material"
-                [color]="get('color')"
-                [vertexColors]="Boolean(get('vertexColors'))"
-                [resolution]="get('materialResolution')"
-                [linewidth]="get('lineWidth')"
-                [alphaToCoverage]="get('alphaToCoverage')"
-                [dashed]="get('dashed')"
-                [dashScale]="get('dashScale') ?? lineMaterial.dashScale"
-                [dashSize]="get('dashSize') ?? lineMaterial.dashSize"
-                [dashOffset]="get('dashOffset') ?? lineMaterial.dashOffset"
-                [gapSize]="get('gapSize') ?? lineMaterial.gapSize"
-                [wireframe]="get('wireframe') ?? lineMaterial.wireframe"
-                [worldUnits]="get('worldUnits')"
-            />
-        </ngt-primitive>
+        <ng-container *args="[line]">
+            <ngt-primitive *ref="lineRef" ngtCompound>
+                <ngt-primitive
+                    *args="[get('lineGeometry')]"
+                    attach="geometry"
+                    (afterAttach)="onAfterAttach($any($event))"
+                />
+                <ngt-primitive
+                    *args="[lineMaterial]"
+                    attach="material"
+                    [color]="get('color')"
+                    [vertexColors]="Boolean(get('vertexColors'))"
+                    [resolution]="get('materialResolution')"
+                    [linewidth]="get('lineWidth')"
+                    [alphaToCoverage]="get('alphaToCoverage')"
+                    [dashed]="get('dashed')"
+                    [dashScale]="get('dashScale') ?? lineMaterial.dashScale"
+                    [dashSize]="get('dashSize') ?? lineMaterial.dashSize"
+                    [dashOffset]="get('dashOffset') ?? lineMaterial.dashOffset"
+                    [gapSize]="get('gapSize') ?? lineMaterial.gapSize"
+                    [wireframe]="get('wireframe') ?? lineMaterial.wireframe"
+                    [worldUnits]="get('worldUnits')"
+                />
+            </ngt-primitive>
+        </ng-container>
     `,
-                    imports: [NgtArgs],
+                    imports: [NgtArgs, NgtRef],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
         }], propDecorators: { lineRef: [{
@@ -641,7 +631,7 @@ NgtsGizmoHelper.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
                     [position]="[0, 0, 200]"
                 />
                 <ngt-group
-                    [ref]="gizmoRef"
+                    *ref="gizmoRef"
                     [position]="get('gizmoPosition')"
                     (beforeRender)="onBeforeRender($any($event).state.delta)"
                 >
@@ -649,7 +639,7 @@ NgtsGizmoHelper.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
                 </ngt-group>
             </ng-template>
         </ngt-portal>
-    `, isInline: true, dependencies: [{ kind: "component", type: NgtPortal, selector: "ngt-portal", inputs: ["container", "state", "autoRender", "autoRenderPriority"], outputs: ["beforeRender"] }, { kind: "directive", type: NgtPortalContent, selector: "ng-template[ngtPortalContent]" }, { kind: "component", type: NgtsOrthographicCamera, selector: "ngts-orthographic-camera", inputs: ["left", "right", "top", "bottom"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: NgtPortal, selector: "ngt-portal", inputs: ["container", "state", "autoRender", "autoRenderPriority"], outputs: ["beforeRender"] }, { kind: "directive", type: NgtPortalContent, selector: "ng-template[ngtPortalContent]" }, { kind: "directive", type: NgtRef, selector: "[ref]", inputs: ["ref"] }, { kind: "component", type: NgtsOrthographicCamera, selector: "ngts-orthographic-camera", inputs: ["left", "right", "top", "bottom"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtsGizmoHelper, decorators: [{
             type: Component,
             args: [{
@@ -664,7 +654,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImpor
                     [position]="[0, 0, 200]"
                 />
                 <ngt-group
-                    [ref]="gizmoRef"
+                    *ref="gizmoRef"
                     [position]="get('gizmoPosition')"
                     (beforeRender)="onBeforeRender($any($event).state.delta)"
                 >
@@ -673,7 +663,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImpor
             </ng-template>
         </ngt-portal>
     `,
-                    imports: [NgtPortal, NgtPortalContent, NgtsOrthographicCamera, NgTemplateOutlet],
+                    imports: [NgtPortal, NgtPortalContent, NgtRef, NgtsOrthographicCamera, NgTemplateOutlet],
                     providers: [{ provide: NGTS_GIZMO_HELPER_API, useFactory: gizmoHelperApiFactory, deps: [NgtsGizmoHelper] }],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
@@ -1878,8 +1868,6 @@ class NgtsText extends NgtRxStore {
         this.set({ anchorX: 'center', anchorY: 'middle', text: '' });
     }
     ngOnInit() {
-        if (!this.textRef.nativeElement)
-            this.textRef.nativeElement = this.troikaText;
         this.preloadFont();
         this.syncText();
     }
@@ -1906,35 +1894,39 @@ class NgtsText extends NgtRxStore {
 }
 NgtsText.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtsText, deps: null, target: i0.ɵɵFactoryTarget.Component });
 NgtsText.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.3", type: NgtsText, isStandalone: true, selector: "ngts-text[text]", inputs: { textRef: "textRef", text: "text", characters: "characters", font: "font", anchorX: "anchorX", anchorY: "anchorY" }, outputs: { sync: "sync" }, providers: [RxActionFactory], usesInheritance: true, ngImport: i0, template: `
-        <ngt-primitive
-            ngtCompound
-            *args="[textRef.nativeElement]"
-            [text]="get('text')"
-            [anchorX]="get('anchorX')"
-            [anchorY]="get('anchorY')"
-            [font]="get('font')"
-        >
-            <ng-content />
-        </ngt-primitive>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }] });
+        <ng-container *args="[troikaText]">
+            <ngt-primitive
+                ngtCompound
+                *ref="textRef"
+                [text]="get('text')"
+                [anchorX]="get('anchorX')"
+                [anchorY]="get('anchorY')"
+                [font]="get('font')"
+            >
+                <ng-content />
+            </ngt-primitive>
+        </ng-container>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }, { kind: "directive", type: NgtRef, selector: "[ref]", inputs: ["ref"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.3", ngImport: i0, type: NgtsText, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-text[text]',
                     standalone: true,
                     template: `
-        <ngt-primitive
-            ngtCompound
-            *args="[textRef.nativeElement]"
-            [text]="get('text')"
-            [anchorX]="get('anchorX')"
-            [anchorY]="get('anchorY')"
-            [font]="get('font')"
-        >
-            <ng-content />
-        </ngt-primitive>
+        <ng-container *args="[troikaText]">
+            <ngt-primitive
+                ngtCompound
+                *ref="textRef"
+                [text]="get('text')"
+                [anchorX]="get('anchorX')"
+                [anchorY]="get('anchorY')"
+                [font]="get('font')"
+            >
+                <ng-content />
+            </ngt-primitive>
+        </ng-container>
     `,
-                    imports: [NgtArgs],
+                    imports: [NgtArgs, NgtRef],
                     providers: [RxActionFactory],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]