angular-three-soba 1.10.0 → 1.11.1

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

@@ -2,11 +2,10 @@ 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 * as THREE from 'three';
-import { Group, CatmullRomCurve3, Vector3, Quaternion, Object3D, Matrix4, Mesh, BoxGeometry, MeshBasicMaterial, MeshLambertMaterial, CanvasTexture, AmbientLight, PointLight, Sprite, SpriteMaterial } from 'three';
+import { Group, CatmullRomCurve3, LineSegments, LineBasicMaterial, Vector3, Quaternion, Object3D, Matrix4, Mesh, BoxGeometry, MeshBasicMaterial, MeshLambertMaterial, CanvasTexture, AmbientLight, PointLight, Sprite, SpriteMaterial } from 'three';
 import { combineLatest, map, switchMap, of } from 'rxjs';
 import { LineMaterial, LineSegmentsGeometry, LineGeometry, LineSegments2, Line2, TextGeometry, FontLoader } from 'three-stdlib';
 import { NgIf, NgTemplateOutlet, DOCUMENT, NgFor } from '@angular/common';
-import { selectSlice } from '@rx-angular/state';
 import { NgtsOrthographicCamera } from 'angular-three-soba/cameras';
 import { RxActionFactory } from '@rx-angular/state/actions';
 import { Text, preloadFont } from 'troika-three-text';
@@ -479,6 +478,95 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
                 type: Input
             }] } });
 
+extend({ LineSegments, LineBasicMaterial });
+class NgtsEdges extends NgtRxStore {
+    constructor() {
+        super(...arguments);
+        this.edgesRef = injectNgtRef();
+        this.withChildren = false;
+        this.noop = () => null;
+    }
+    set threshold(threshold) {
+        this.set({ threshold });
+    }
+    set color(color) {
+        this.set({ color });
+    }
+    set geometry(geometry) {
+        this.set({ geometry });
+    }
+    set userData(userData) {
+        this.set({ userData });
+    }
+    initialize() {
+        super.initialize();
+        this.set({
+            threshold: 15,
+            color: 'black',
+            userData: {},
+        });
+    }
+    ngOnInit() {
+        this.setupGeometry();
+    }
+    setupGeometry() {
+        this.hold(this.edgesRef.$, (segments) => {
+            const parent = segments.parent;
+            if (parent) {
+                const geom = this.get('geometry') || parent.geometry;
+                const threshold = this.get('threshold');
+                if (geom !== segments.userData['currentGeom'] || threshold !== segments.userData['currentThreshold']) {
+                    segments.userData['currentGeom'] = geom;
+                    segments.userData['currentThreshold'] = threshold;
+                    segments.geometry = new THREE.EdgesGeometry(geom, threshold);
+                }
+            }
+        });
+    }
+}
+NgtsEdges.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtsEdges, deps: null, target: i0.ɵɵFactoryTarget.Component });
+NgtsEdges.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: NgtsEdges, isStandalone: true, selector: "ngts-edges", inputs: { edgesRef: "edgesRef", threshold: "threshold", color: "color", geometry: "geometry", userData: "userData", withChildren: "withChildren" }, usesInheritance: true, ngImport: i0, template: `
+        <ngt-line-segments [ref]="edgesRef" [raycast]="noop" ngtCompound>
+            <ng-container *ngIf="withChildren; else noChildren">
+                <ng-content />
+            </ng-container>
+            <ng-template #noChildren>
+                <ngt-line-basic-material [color]="color" />
+            </ng-template>
+        </ngt-line-segments>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgtsEdges, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-edges',
+                    standalone: true,
+                    template: `
+        <ngt-line-segments [ref]="edgesRef" [raycast]="noop" ngtCompound>
+            <ng-container *ngIf="withChildren; else noChildren">
+                <ng-content />
+            </ng-container>
+            <ng-template #noChildren>
+                <ngt-line-basic-material [color]="color" />
+            </ng-template>
+        </ngt-line-segments>
+    `,
+                    imports: [NgIf],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }], propDecorators: { edgesRef: [{
+                type: Input
+            }], threshold: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], geometry: [{
+                type: Input
+            }], userData: [{
+                type: Input
+            }], withChildren: [{
+                type: Input
+            }] } });
+
 const isOrbitControls = (controls) => {
     return 'minPolarAngle' in controls;
 };
@@ -595,7 +683,13 @@ class NgtsGizmoHelper extends NgtRxStore {
         }
     }
     setGizmoPosition() {
-        this.connect('gizmoPosition', combineLatest([this.store.select('size'), this.select(selectSlice(['alignment', 'margin']))]).pipe(map(([size, { alignment, margin }]) => {
+        this.connect('gizmoPosition', combineLatest([
+            this.store.select('size'),
+            combineLatest({
+                alignment: this.select('alignment'),
+                margin: this.select('margin'),
+            }),
+        ]).pipe(map(([size, { alignment, margin }]) => {
             const [marginX, marginY] = margin;
             const x = alignment.endsWith('-center')
                 ? 0
@@ -1947,5 +2041,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NGTS_GIZMO_HELPER_API, NgtsBillboard, NgtsCatmullRomLine, NgtsCubicBezierLine, NgtsGizmoHelper, NgtsGizmoHelperContent, NgtsGizmoViewcube, NgtsGizmoViewport, NgtsLine, NgtsQuadraticBezierLine, NgtsText, NgtsText3D };
+export { NGTS_GIZMO_HELPER_API, NgtsBillboard, NgtsCatmullRomLine, NgtsCubicBezierLine, NgtsEdges, NgtsGizmoHelper, NgtsGizmoHelperContent, NgtsGizmoViewcube, NgtsGizmoViewport, NgtsLine, NgtsQuadraticBezierLine, NgtsText, NgtsText3D };
 //# sourceMappingURL=angular-three-soba-abstractions.mjs.map