feat: add selection entry point

Author: nartc

libs/angular-three-postprocessing/project.json

@@ -53,7 +53,9 @@
                     "libs/angular-three-postprocessing/**/*.ts",
                     "libs/angular-three-postprocessing/**/*.html",
                     "libs/angular-three-postprocessing/effects/**/*.ts",
-                    "libs/angular-three-postprocessing/effects/**/*.html"
+                    "libs/angular-three-postprocessing/effects/**/*.html",
+                    "libs/angular-three-postprocessing/selection/**/*.ts",
+                    "libs/angular-three-postprocessing/selection/**/*.html"
                 ]
             }
         },

libs/angular-three-postprocessing/selection/README.md

@@ -0,0 +1,3 @@
+# angular-three-postprocessing/selection
+
+Secondary entry point of `angular-three-postprocessing`. It can be used by importing from `angular-three-postprocessing/selection`.

libs/angular-three-postprocessing/selection/ng-package.json

@@ -0,0 +1,5 @@
+{
+    "lib": {
+        "entryFile": "src/index.ts"
+    }
+}

libs/angular-three-postprocessing/selection/src/index.ts

@@ -0,0 +1,2 @@
+export * from './lib/select';
+export * from './lib/selection';

libs/angular-three-postprocessing/selection/src/lib/select.ts

@@ -0,0 +1,57 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, Input, OnInit } from '@angular/core';
+import { extend, injectNgtRef, NgtRxStore } from 'angular-three';
+import { combineLatest } from 'rxjs';
+import { Group } from 'three';
+import { NGTP_SELECTION_API } from './selection';
+
+extend({ Group });
+
+@Component({
+    selector: 'ngtp-select',
+    standalone: true,
+    template: `
+        <ngt-group ngtCompound [ref]="groupRef">
+            <ng-content />
+        </ngt-group>
+    `,
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class NgtpSelect extends NgtRxStore implements OnInit {
+    readonly groupRef = injectNgtRef<THREE.Group>();
+
+    private readonly selectionApi = inject(NGTP_SELECTION_API);
+
+    @Input() set enabled(enabled: boolean) {
+        this.set({ enabled });
+    }
+
+    override initialize(): void {
+        super.initialize();
+        this.set({ enabled: false });
+    }
+
+    ngOnInit() {
+        this.setSelectEffect();
+    }
+
+    private setSelectEffect() {
+        this.effect(combineLatest([this.select('enabled'), this.groupRef.children$()]), ([enabled]) => {
+            if (enabled) {
+                let changed = false;
+                const current: THREE.Object3D[] = [];
+                this.groupRef.nativeElement.traverse((obj) => {
+                    if (obj.type === 'Mesh') current.push(obj);
+                    if (this.selectionApi.selected.indexOf(obj) === -1) changed = true;
+                });
+                if (changed) {
+                    this.selectionApi.select((state) => ({ selected: [...state.selected, ...current] }));
+                    return () => {
+                        this.selectionApi.select((state) => ({
+                            selected: state.selected.filter((selected) => !current.includes(selected)),
+                        }));
+                    };
+                }
+            }
+        });
+    }
+}

libs/angular-three-postprocessing/selection/src/lib/selection.ts

@@ -0,0 +1,42 @@
+import { Component, InjectionToken, Input } from '@angular/core';
+import { RxState } from '@rx-angular/state';
+import { NgtRxStore } from 'angular-three';
+
+export interface NgtpSelectionAPI {
+    selected: THREE.Object3D[];
+    select: RxState<{ selected: THREE.Object3D[] }>['set'];
+    enabled: boolean;
+}
+
+export const NGTP_SELECTION_API = new InjectionToken<NgtpSelectionAPI>('NgtpSelection API');
+function ngtpSelectionApiFactory(selection: NgtpSelection) {
+    const api: NgtpSelectionAPI = {
+        get selected() {
+            return selection.get('selected');
+        },
+        select: selection.set.bind(selection),
+        get enabled() {
+            return selection.get('enabled');
+        },
+    };
+    return api;
+}
+
+@Component({
+    selector: 'ngtp-selection',
+    standalone: true,
+    template: `
+        <ng-content />
+    `,
+    providers: [{ provide: NGTP_SELECTION_API, useFactory: ngtpSelectionApiFactory, deps: [NgtpSelection] }],
+})
+export class NgtpSelection extends NgtRxStore {
+    @Input() set enabled(enabled: boolean) {
+        this.set({ enabled });
+    }
+
+    override initialize(): void {
+        super.initialize();
+        this.set({ selected: [], enabled: true });
+    }
+}

libs/angular-three-postprocessing/tsconfig.json

@@ -6,7 +6,7 @@
         "strict": true,
         "noImplicitOverride": true,
         "noPropertyAccessFromIndexSignature": true,
-        "noImplicitReturns": true,
+        "noImplicitReturns": false,
         "noFallthroughCasesInSwitch": true
     },
     "files": [],

tsconfig.base.json

@@ -17,7 +17,8 @@
         "paths": {
             "angular-three-postprocessing": ["libs/angular-three-postprocessing/src/index.ts"],
             "angular-three-postprocessing-plugin": ["libs/plugin/src/index.ts"],
-            "angular-three-postprocessing/effects": ["libs/angular-three-postprocessing/effects/src/index.ts"]
+            "angular-three-postprocessing/effects": ["libs/angular-three-postprocessing/effects/src/index.ts"],
+            "angular-three-postprocessing/selection": ["libs/angular-three-postprocessing/selection/src/index.ts"]
         }
     },
     "exclude": ["node_modules", "tmp"]