From 5707f857ea3bb801edc43167843c97d6bbf36696 Mon Sep 17 00:00:00 2001 From: Chau Tran Date: Thu, 21 Jul 2022 21:12:23 +0700 Subject: [PATCH] feat(soba): standalone api --- .../kinematic-cube.component.ts | 10 +- .../src/lib/billboard/billboard.ts | 10 +- .../cubic-bezier-line/cubic-bezier-line.ts | 11 +- .../src/lib/gizmo-helper/gizmo-helper.ts | 26 +++- .../src/lib/gizmo-helper/gizmo-viewcube.ts | 50 +++---- .../src/lib/gizmo-helper/gizmo-viewport.ts | 127 +++++++++--------- .../lib/gradient-texture/gradient-texture.ts | 3 +- libs/soba/abstractions/src/lib/image/image.ts | 34 ++--- .../src/lib/line/line-geometry.ts | 5 +- .../src/lib/line/line-material.ts | 5 +- libs/soba/abstractions/src/lib/line/line.ts | 32 +++-- .../quadratic-bezier-line.ts | 11 +- libs/soba/abstractions/src/lib/text/text.ts | 12 +- .../abstractions/src/lib/text3d/text3d.ts | 9 +- .../orthographic-camera.ts | 3 +- .../perspective-camera/perspective-camera.ts | 3 +- .../first-person-controls.ts | 92 +------------ .../src/lib/fly-controls/fly-controls.ts | 3 +- .../src/lib/orbit-controls/orbit-controls.ts | 5 +- .../transform-controls/transform-controls.ts | 14 +- libs/soba/loaders/src/lib/loader/loader.ts | 7 +- libs/soba/materials/src/lib/blur-pass.ts | 6 +- libs/soba/misc/src/lib/html/html.ts | 13 +- .../src/lib/adaptive-dpr/adaptve-dpr.ts | 3 +- .../lib/adaptive-events/adaptive-events.ts | 3 +- .../performances/src/lib/detailed/detailed.ts | 12 +- .../performances/src/lib/preload/preload.ts | 3 +- .../image-shader-material.ts | 4 +- .../mesh-reflector-material.ts | 3 +- .../spot-light-material.ts | 3 +- .../star-field-material.ts | 3 +- .../soba/staging/src/lib/backdrop/backdrop.ts | 25 ++-- libs/soba/staging/src/lib/bounds/bounds.ts | 12 +- .../src/lib/camera-shake/camera-shake.ts | 3 +- libs/soba/staging/src/lib/center/center.ts | 12 +- .../lib/contact-shadows/contact-shadows.ts | 71 +++++----- .../src/lib/environment/environment.ts | 71 ++++++---- libs/soba/staging/src/lib/float/float.ts | 12 +- libs/soba/staging/src/lib/sky/sky.ts | 10 +- .../staging/src/lib/spot-light/spot-light.ts | 22 ++- libs/soba/staging/src/lib/stage/stage.ts | 41 +++--- libs/soba/staging/src/lib/stars/stars.ts | 32 ++--- 42 files changed, 406 insertions(+), 430 deletions(-) diff --git a/apps/sandbox/src/app/kinematic-cube/kinematic-cube.component.ts b/apps/sandbox/src/app/kinematic-cube/kinematic-cube.component.ts index ced5ed025..c39ee4d90 100644 --- a/apps/sandbox/src/app/kinematic-cube/kinematic-cube.component.ts +++ b/apps/sandbox/src/app/kinematic-cube/kinematic-cube.component.ts @@ -1,12 +1,5 @@ import { NgtPhysicBody, NgtPhysicsModule } from '@angular-three/cannon'; -import { - NgtCanvasModule, - NgtEuler, - NgtRenderState, - NgtTriple, - NgtVector3, - NgtVectorPipeModule, -} from '@angular-three/core'; +import { NgtCanvasModule, NgtEuler, NgtRenderState, NgtTriple, NgtVector3 } from '@angular-three/core'; import { NgtInstancedBufferAttributeModule, NgtVector2AttributeModule } from '@angular-three/core/attributes'; import { NgtBoxGeometryModule, NgtPlaneGeometryModule, NgtSphereGeometryModule } from '@angular-three/core/geometries'; import { NgtHemisphereLightModule, NgtPointLightModule, NgtSpotLightModule } from '@angular-three/core/lights'; @@ -167,7 +160,6 @@ export class InstancedSpheres implements OnInit { NgtStatsModule, NgtHemisphereLightModule, NgtSpotLightModule, - NgtVectorPipeModule, NgtPointLightModule, NgtPlaneGeometryModule, NgtMeshPhongMaterialModule, diff --git a/libs/soba/abstractions/src/lib/billboard/billboard.ts b/libs/soba/abstractions/src/lib/billboard/billboard.ts index 049d4ec71..71d735ef8 100644 --- a/libs/soba/abstractions/src/lib/billboard/billboard.ts +++ b/libs/soba/abstractions/src/lib/billboard/billboard.ts @@ -2,13 +2,13 @@ import { BooleanInput, coerceBooleanProperty, NgtObjectInputs, - NgtObjectPassThroughModule, + NgtObjectPassThrough, NgtRenderState, provideObjectHostRef, Ref, } from '@angular-three/core'; import { NgtGroupModule } from '@angular-three/core/group'; -import { CommonModule } from '@angular/common'; +import { NgIf, NgTemplateOutlet } from '@angular/common'; import { ChangeDetectionStrategy, Component, @@ -24,6 +24,7 @@ import * as THREE from 'three/src/Three'; @Directive({ selector: 'ng-template[ngt-soba-billboard-content]', + standalone: true, }) export class NgtSobaBillboardContent { constructor(public templateRef: TemplateRef<{ billboard: Ref }>) {} @@ -35,6 +36,7 @@ export class NgtSobaBillboardContent { @Component({ selector: 'ngt-soba-billboard', + standalone: true, template: ` `, + imports: [NgtGroupModule, NgtObjectPassThrough, NgIf, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideObjectHostRef(NgtSobaBillboard)], }) @@ -105,8 +108,7 @@ export class NgtSobaBillboard extends NgtObjectInputs { } @NgModule({ - declarations: [NgtSobaBillboard, NgtSobaBillboardContent], + imports: [NgtSobaBillboard, NgtSobaBillboardContent], exports: [NgtSobaBillboard, NgtSobaBillboardContent], - imports: [NgtGroupModule, CommonModule, NgtObjectPassThroughModule], }) export class NgtSobaBillboardModule {} diff --git a/libs/soba/abstractions/src/lib/cubic-bezier-line/cubic-bezier-line.ts b/libs/soba/abstractions/src/lib/cubic-bezier-line/cubic-bezier-line.ts index 119839ad6..7d9b09d75 100644 --- a/libs/soba/abstractions/src/lib/cubic-bezier-line/cubic-bezier-line.ts +++ b/libs/soba/abstractions/src/lib/cubic-bezier-line/cubic-bezier-line.ts @@ -2,18 +2,19 @@ import { coerceNumberProperty, is, makeVector3, - NgtObjectPassThroughModule, + NgtObjectPassThrough, NgtTriple, NumberInput, provideObjectHostRef, } from '@angular-three/core'; -import { CommonModule } from '@angular/common'; +import { AsyncPipe, NgIf, NgTemplateOutlet } from '@angular/common'; import { ChangeDetectionStrategy, Component, Input, NgModule } from '@angular/core'; import * as THREE from 'three/src/Three'; -import { NgtSobaLine, NgtSobaLineModule } from '../line/line'; +import { NgtSobaLine, NgtSobaLineContent } from '../line/line'; @Component({ selector: 'ngt-soba-cubic-bezier-line[start][end][midA][midB]', + standalone: true, template: ` `, + imports: [NgtSobaLine, NgtObjectPassThrough, NgtSobaLineContent, NgTemplateOutlet, NgIf, AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideObjectHostRef(NgtSobaCubicBezierLine)], }) @@ -104,8 +106,7 @@ export class NgtSobaCubicBezierLine extends NgtSobaLine { } @NgModule({ - declarations: [NgtSobaCubicBezierLine], + imports: [NgtSobaCubicBezierLine], exports: [NgtSobaCubicBezierLine], - imports: [NgtSobaLineModule, NgtObjectPassThroughModule, CommonModule], }) export class NgtSobaCubicBezierLineModule {} diff --git a/libs/soba/abstractions/src/lib/gizmo-helper/gizmo-helper.ts b/libs/soba/abstractions/src/lib/gizmo-helper/gizmo-helper.ts index 04b065cd4..a1b9f7ded 100644 --- a/libs/soba/abstractions/src/lib/gizmo-helper/gizmo-helper.ts +++ b/libs/soba/abstractions/src/lib/gizmo-helper/gizmo-helper.ts @@ -5,17 +5,18 @@ import { makeVector3, NgtObjectInputs, NgtObjectInputsState, - NgtObjectPassThroughModule, - NgtPortalModule, + NgtObjectPassThrough, + NgtPortal, + NgtPortalContent, NgtRenderState, prepare, provideObjectHostRef, Ref, tapEffect, } from '@angular-three/core'; -import { NgtGroupModule } from '@angular-three/core/group'; -import { NgtSobaOrthographicCameraModule } from '@angular-three/soba/cameras'; -import { CommonModule } from '@angular/common'; +import { NgtGroup } from '@angular-three/core/group'; +import { NgtSobaOrthographicCamera } from '@angular-three/soba/cameras'; +import { AsyncPipe, NgIf, NgTemplateOutlet } from '@angular/common'; import { ChangeDetectionStrategy, Component, @@ -43,6 +44,7 @@ export interface NgtSobaGizmoHelperState extends NgtObjectInputsState) {} @@ -63,6 +65,7 @@ const targetPosition = makeVector3(); @Component({ selector: 'ngt-soba-gizmo-helper', + standalone: true, template: ` @@ -83,6 +86,16 @@ const targetPosition = makeVector3(); `, + imports: [ + NgtPortal, + NgtPortalContent, + NgtGroup, + NgtObjectPassThrough, + NgtSobaOrthographicCamera, + NgIf, + NgTemplateOutlet, + AsyncPipe, + ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideObjectHostRef(NgtSobaGizmoHelper)], }) @@ -276,8 +289,7 @@ export class NgtSobaGizmoHelper extends NgtObjectInputs extends @Directive({ selector: '[ngtSobaGizmoViewCubeGenericPassThrough]', + standalone: true, }) export class NgtSobaGizmoViewCubePassThrough { @Input() set ngtSobaGizmoViewCubeGenericPassThrough(wrapper: unknown) { @@ -227,6 +228,7 @@ export class NgtSobaGizmoViewCubePassThrough { @Component({ selector: 'ngt-soba-gizmo-face-material[hover][index]', + standalone: true, template: ` `, + imports: [NgtMeshLambertMaterial, AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, providers: [ { @@ -294,6 +297,7 @@ export class NgtSobaGizmoFaceMaterial extends NgtSobaGizmoViewCubeGeneric `, + imports: [NgtMesh, NgtBoxGeometry, NgtSobaGizmoFaceMaterial, NgtSobaGizmoViewCubePassThrough, NgtRepeat, NgForOf], changeDetection: ChangeDetectionStrategy.OnPush, providers: [ { @@ -343,6 +348,7 @@ export class NgtSobaGizmoFaceCube extends NgtSobaGizmoViewCubeGeneric `, + imports: [NgtMesh, NgtBoxGeometry, NgtMeshBasicMaterial], changeDetection: ChangeDetectionStrategy.OnPush, providers: [ { @@ -408,6 +415,7 @@ export class NgtSobaGizmoEdgeCube extends NgtSobaGizmoViewCubeGeneric @@ -430,6 +438,15 @@ export class NgtSobaGizmoEdgeCube extends NgtSobaGizmoViewCubeGeneric `, + imports: [ + NgtGroup, + NgtSobaGizmoFaceCube, + NgtSobaGizmoEdgeCube, + NgtAmbientLight, + NgtPointLight, + NgtSobaGizmoViewCubePassThrough, + NgForOf, + ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [ { @@ -447,24 +464,7 @@ export class NgtSobaGizmoViewcube extends NgtSobaGizmoViewCubeGeneric @@ -50,6 +51,7 @@ import { NgtSobaGizmoHelper } from './gizmo-helper'; `, + imports: [NgtGroup, NgtMesh, NgtBoxGeometry, NgtMeshBasicMaterial], changeDetection: ChangeDetectionStrategy.OnPush, }) export class NgtSobaGizmoViewportAxis extends NgtInstance { @@ -85,6 +87,7 @@ export class NgtSobaGizmoViewportAxis extends NgtInstance { @Component({ selector: 'ngt-soba-gizmo-viewport-axis-head[arcStyle][labelColor][font], ngt-soba-gizmo-viewport-axis-head[ngtSobaGizmoViewportAxisHead]', + standalone: true, template: ` { > `, + imports: [NgtSprite, NgtObjectPassThrough, NgtSpriteMaterial, AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideObjectHostRef(NgtSobaGizmoViewportAxisHead)], }) @@ -234,8 +238,46 @@ export class NgtSobaGizmoViewportAxisHead extends NgtObjectInputs } } +@Directive({ + selector: '[ngtSobaGizmoViewportAxisHead]', + standalone: true, +}) +export class NgtSobaGizmoViewportAxisHeadPassThrough { + @Input() set ngtSobaGizmoViewportAxisHead(wrapper: unknown) { + this.assertWrapper(wrapper); + + wrapper + .select( + wrapper.select((s) => s['labelColor']).pipe(startWithUndefined()), + wrapper.select((s) => s['font']).pipe(startWithUndefined()), + wrapper.select((s) => s['disabled']).pipe(startWithUndefined()), + wrapper.select((s) => s['axisHeadScale']).pipe(startWithUndefined()) + ) + .pipe(takeUntil(wrapper.destroy$)) + .subscribe(() => { + this.axisHead.labelColor = wrapper.labelColor; + this.axisHead.font = wrapper.font; + this.axisHead.disabled = wrapper.disabled; + this.axisHead.axisHeadScale = wrapper.axisHeadScale; + }); + + if (wrapper.click.observed) { + this.axisHead.click.pipe(takeUntil(wrapper.destroy$)).subscribe(wrapper.click.emit.bind(wrapper.click)); + } + } + + constructor(@Self() private axisHead: NgtSobaGizmoViewportAxisHead) {} + + private assertWrapper(wrapper: unknown): asserts wrapper is NgtSobaGizmoViewport { + if (!(wrapper instanceof NgtSobaGizmoViewport)) { + throw new Error('wrapper must be NgtSobaGizmoViewport'); + } + } +} + @Component({ selector: 'ngt-soba-gizmo-viewport', + standalone: true, template: ` `, + imports: [ + NgtGroup, + NgtObjectPassThrough, + NgtAmbientLight, + NgtPointLight, + NgtSobaGizmoViewportAxis, + NgtSobaGizmoViewportAxisHead, + NgtSobaGizmoViewportAxisHeadPassThrough, + NgtRadianPipe, + NgIf, + ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideObjectHostRef(NgtSobaGizmoViewport)], }) @@ -375,62 +428,8 @@ export class NgtSobaGizmoViewport extends NgtObjectInputs { } } -@Directive({ - selector: '[ngtSobaGizmoViewportAxisHead]', -}) -export class NgtSobaGizmoViewportAxisHeadPassThrough { - @Input() set ngtSobaGizmoViewportAxisHead(wrapper: unknown) { - this.assertWrapper(wrapper); - - wrapper - .select( - wrapper.select((s) => s['labelColor']).pipe(startWithUndefined()), - wrapper.select((s) => s['font']).pipe(startWithUndefined()), - wrapper.select((s) => s['disabled']).pipe(startWithUndefined()), - wrapper.select((s) => s['axisHeadScale']).pipe(startWithUndefined()) - ) - .pipe(takeUntil(wrapper.destroy$)) - .subscribe(() => { - this.axisHead.labelColor = wrapper.labelColor; - this.axisHead.font = wrapper.font; - this.axisHead.disabled = wrapper.disabled; - this.axisHead.axisHeadScale = wrapper.axisHeadScale; - }); - - if (wrapper.click.observed) { - this.axisHead.click.pipe(takeUntil(wrapper.destroy$)).subscribe(wrapper.click.emit.bind(wrapper.click)); - } - } - - constructor(@Self() private axisHead: NgtSobaGizmoViewportAxisHead) {} - - private assertWrapper(wrapper: unknown): asserts wrapper is NgtSobaGizmoViewport { - if (!(wrapper instanceof NgtSobaGizmoViewport)) { - throw new Error('wrapper must be NgtSobaGizmoViewport'); - } - } -} - @NgModule({ - declarations: [ - NgtSobaGizmoViewport, - NgtSobaGizmoViewportAxis, - NgtSobaGizmoViewportAxisHead, - NgtSobaGizmoViewportAxisHeadPassThrough, - ], + imports: [NgtSobaGizmoViewport], exports: [NgtSobaGizmoViewport], - imports: [ - CommonModule, - NgtGroupModule, - NgtMeshModule, - NgtBoxGeometryModule, - NgtMeshBasicMaterialModule, - NgtSpriteModule, - NgtObjectPassThroughModule, - NgtSpriteMaterialModule, - NgtAmbientLightModule, - NgtPointLightModule, - NgtRadianPipeModule, - ], }) export class NgtSobaGizmoViewportModule {} diff --git a/libs/soba/abstractions/src/lib/gradient-texture/gradient-texture.ts b/libs/soba/abstractions/src/lib/gradient-texture/gradient-texture.ts index 18dc0f677..162b4df82 100644 --- a/libs/soba/abstractions/src/lib/gradient-texture/gradient-texture.ts +++ b/libs/soba/abstractions/src/lib/gradient-texture/gradient-texture.ts @@ -10,6 +10,7 @@ import * as THREE from 'three/src/Three'; @Component({ selector: 'ngt-soba-gradient-texture[stops][colors]', + standalone: true, template: ``, changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideCommonTextureRef(NgtSobaGradientTexture)], @@ -65,7 +66,7 @@ export class NgtSobaGradientTexture extends NgtCommonTexture { } @NgModule({ - declarations: [NgtSobaGradientTexture], + imports: [NgtSobaGradientTexture], exports: [NgtSobaGradientTexture], }) export class NgtSobaGradientTextureModule {} diff --git a/libs/soba/abstractions/src/lib/image/image.ts b/libs/soba/abstractions/src/lib/image/image.ts index ab6d2806e..04fa805bd 100644 --- a/libs/soba/abstractions/src/lib/image/image.ts +++ b/libs/soba/abstractions/src/lib/image/image.ts @@ -3,23 +3,23 @@ import { BooleanInput, coerceBooleanProperty, coerceNumberProperty, + NGT_INSTANCE_HOST_REF, + NGT_INSTANCE_REF, NgtObjectInputs, NgtObjectInputsState, - NgtObjectPassThroughModule, + NgtObjectPassThrough, NgtRenderState, NgtStore, - NGT_INSTANCE_HOST_REF, - NGT_INSTANCE_REF, NumberInput, provideObjectHostRef, Ref, startWithUndefined, } from '@angular-three/core'; -import { NgtPlaneGeometryModule } from '@angular-three/core/geometries'; -import { NgtMeshModule } from '@angular-three/core/meshes'; +import { NgtPlaneGeometry } from '@angular-three/core/geometries'; +import { NgtMesh } from '@angular-three/core/meshes'; import { NgtTextureLoader } from '@angular-three/soba/loaders'; -import { NgtSobaImageShaderMaterialModule } from '@angular-three/soba/shaders'; -import { CommonModule } from '@angular/common'; +import { NgtSobaImageShaderMaterial } from '@angular-three/soba/shaders'; +import { AsyncPipe, NgIf, NgTemplateOutlet } from '@angular/common'; import { ChangeDetectionStrategy, Component, @@ -40,6 +40,7 @@ import * as THREE from 'three/src/Three'; @Directive({ selector: 'ng-template[ngt-soba-image-content]', + standalone: true, }) export class NgtSobaImageContent { constructor(public templateRef: TemplateRef<{ image: Ref }>) {} @@ -60,6 +61,7 @@ export interface NgtSobaImageState extends NgtObjectInputsState { @Component({ selector: 'ngt-soba-image[url]', + standalone: true, template: ` { `, + imports: [ + NgtMesh, + NgtObjectPassThrough, + NgtPlaneGeometry, + NgtSobaImageShaderMaterial, + NgIf, + NgTemplateOutlet, + AsyncPipe, + ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [NgtTextureLoader, provideObjectHostRef(NgtSobaImage)], }) @@ -197,14 +208,7 @@ export class NgtSobaImage extends NgtObjectInputs } @NgModule({ - declarations: [NgtSobaImage, NgtSobaImageContent], + imports: [NgtSobaImage, NgtSobaImageContent], exports: [NgtSobaImage, NgtSobaImageContent], - imports: [ - NgtMeshModule, - NgtPlaneGeometryModule, - NgtSobaImageShaderMaterialModule, - CommonModule, - NgtObjectPassThroughModule, - ], }) export class NgtSobaImageModule {} diff --git a/libs/soba/abstractions/src/lib/line/line-geometry.ts b/libs/soba/abstractions/src/lib/line/line-geometry.ts index 8e6d8fb97..2c0b87c22 100644 --- a/libs/soba/abstractions/src/lib/line/line-geometry.ts +++ b/libs/soba/abstractions/src/lib/line/line-geometry.ts @@ -1,11 +1,12 @@ import { AnyConstructor, is, NgtCommonGeometry, NgtTriple, provideCommonGeometryRef } from '@angular-three/core'; import { ChangeDetectionStrategy, Component, Input, NgModule } from '@angular/core'; import { Observable } from 'rxjs'; -import * as THREE from 'three/src/Three'; import { LineGeometry } from 'three-stdlib'; +import * as THREE from 'three/src/Three'; @Component({ selector: 'ngt-soba-line-geometry', + standalone: true, template: ``, changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideCommonGeometryRef(NgtSobaLineGeometry)], @@ -47,7 +48,7 @@ export class NgtSobaLineGeometry extends NgtCommonGeometry { } @NgModule({ - declarations: [NgtSobaLineGeometry], + imports: [NgtSobaLineGeometry], exports: [NgtSobaLineGeometry], }) export class NgtSobaLineGeometryModule {} diff --git a/libs/soba/abstractions/src/lib/line/line-material.ts b/libs/soba/abstractions/src/lib/line/line-material.ts index b2045dfdc..503158c35 100644 --- a/libs/soba/abstractions/src/lib/line/line-material.ts +++ b/libs/soba/abstractions/src/lib/line/line-material.ts @@ -12,11 +12,12 @@ import { import { NgtShaderMaterial } from '@angular-three/core/materials'; import { ChangeDetectionStrategy, Component, Input, NgModule } from '@angular/core'; import { tap } from 'rxjs'; -import * as THREE from 'three/src/Three'; import { LineMaterial } from 'three-stdlib'; +import * as THREE from 'three/src/Three'; @Component({ selector: 'ngt-soba-line-material', + standalone: true, template: ``, changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideCommonMaterialRef(NgtSobaLineMaterial)], @@ -91,7 +92,7 @@ export class NgtSobaLineMaterial extends NgtShaderMaterial { } @NgModule({ - declarations: [NgtSobaLineMaterial], + imports: [NgtSobaLineMaterial], exports: [NgtSobaLineMaterial], }) export class NgtSobaLineMaterialModule {} diff --git a/libs/soba/abstractions/src/lib/line/line.ts b/libs/soba/abstractions/src/lib/line/line.ts index 56c9c9175..d13585a65 100644 --- a/libs/soba/abstractions/src/lib/line/line.ts +++ b/libs/soba/abstractions/src/lib/line/line.ts @@ -6,7 +6,7 @@ import { makeVector2, NgtObjectInputs, NgtObjectInputsState, - NgtObjectPassThroughModule, + NgtObjectPassThrough, NgtRenderState, NgtTriple, NgtVector2, @@ -15,8 +15,8 @@ import { Ref, tapEffect, } from '@angular-three/core'; -import { NgtPrimitiveModule } from '@angular-three/core/primitive'; -import { CommonModule } from '@angular/common'; +import { NgtPrimitive } from '@angular-three/core/primitive'; +import { AsyncPipe, NgIf, NgTemplateOutlet } from '@angular/common'; import { ChangeDetectionStrategy, Component, @@ -29,10 +29,10 @@ import { TemplateRef, } from '@angular/core'; import { animationFrameScheduler, observeOn, pipe, tap } from 'rxjs'; -import * as THREE from 'three/src/Three'; import { Line2 } from 'three-stdlib'; -import { NgtSobaLineGeometryModule } from './line-geometry'; -import { NgtSobaLineMaterialModule } from './line-material'; +import * as THREE from 'three/src/Three'; +import { NgtSobaLineGeometry } from './line-geometry'; +import { NgtSobaLineMaterial } from './line-material'; export interface NgtSobaCommonLineState extends NgtObjectInputsState { points: Array; @@ -78,6 +78,7 @@ export abstract class NgtSobaCommonLine extends NgtObjectInputs }>) {} @@ -89,6 +90,7 @@ export class NgtSobaLineContent { @Component({ selector: 'ngt-soba-line', + standalone: true, template: ` `, + imports: [ + NgtPrimitive, + NgtObjectPassThrough, + NgtSobaLineGeometry, + NgtSobaLineMaterial, + NgIf, + AsyncPipe, + NgTemplateOutlet, + ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideObjectHostRef(NgtSobaLine)], }) @@ -183,14 +194,7 @@ export class NgtSobaLine extends NgtSobaCommonLine { } @NgModule({ - declarations: [NgtSobaLine, NgtSobaLineContent], + imports: [NgtSobaLine, NgtSobaLineContent], exports: [NgtSobaLine, NgtSobaLineContent], - imports: [ - NgtPrimitiveModule, - NgtObjectPassThroughModule, - NgtSobaLineGeometryModule, - NgtSobaLineMaterialModule, - CommonModule, - ], }) export class NgtSobaLineModule {} diff --git a/libs/soba/abstractions/src/lib/quadratic-bezier-line/quadratic-bezier-line.ts b/libs/soba/abstractions/src/lib/quadratic-bezier-line/quadratic-bezier-line.ts index c4cf51095..e559d6531 100644 --- a/libs/soba/abstractions/src/lib/quadratic-bezier-line/quadratic-bezier-line.ts +++ b/libs/soba/abstractions/src/lib/quadratic-bezier-line/quadratic-bezier-line.ts @@ -1,22 +1,23 @@ import { coerceNumberProperty, is, - NgtObjectPassThroughModule, + NgtObjectPassThrough, NgtTriple, NumberInput, provideObjectHostRef, startWithUndefined, } from '@angular-three/core'; -import { CommonModule } from '@angular/common'; +import { AsyncPipe, NgIf, NgTemplateOutlet } from '@angular/common'; import { ChangeDetectionStrategy, Component, Input, NgModule } from '@angular/core'; import { tap } from 'rxjs'; import * as THREE from 'three/src/Three'; -import { NgtSobaLine, NgtSobaLineModule } from '../line/line'; +import { NgtSobaLine, NgtSobaLineContent } from '../line/line'; const v = new THREE.Vector3(); @Component({ selector: 'ngt-soba-quadratic-bezier-line', + standalone: true, template: ` `, + imports: [NgtSobaLine, NgtObjectPassThrough, NgtSobaLineContent, NgIf, AsyncPipe, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideObjectHostRef(NgtSobaQuadraticBezierLine)], }) @@ -149,8 +151,7 @@ export class NgtSobaQuadraticBezierLine extends NgtSobaLine { } @NgModule({ - declarations: [NgtSobaQuadraticBezierLine], + imports: [NgtSobaQuadraticBezierLine], exports: [NgtSobaQuadraticBezierLine], - imports: [NgtSobaLineModule, NgtObjectPassThroughModule, CommonModule], }) export class NgtSobaQuadraticBezierLineModule {} diff --git a/libs/soba/abstractions/src/lib/text/text.ts b/libs/soba/abstractions/src/lib/text/text.ts index a0c7eb700..686db778d 100644 --- a/libs/soba/abstractions/src/lib/text/text.ts +++ b/libs/soba/abstractions/src/lib/text/text.ts @@ -6,15 +6,15 @@ import { NgtColor, NgtCommonMaterial, NgtObjectInputs, - NgtObjectPassThroughModule, + NgtObjectPassThrough, NgtRenderState, NumberInput, provideObjectHostRef, Ref, tapEffect, } from '@angular-three/core'; -import { NgtPrimitiveModule } from '@angular-three/core/primitive'; -import { CommonModule } from '@angular/common'; +import { NgtPrimitive } from '@angular-three/core/primitive'; +import { NgIf, NgTemplateOutlet } from '@angular/common'; import { ChangeDetectionStrategy, Component, @@ -32,6 +32,7 @@ import { preloadFont, Text as TextMeshImpl } from 'troika-three-text'; @Directive({ selector: 'ng-template[ngt-soba-text-content]', + standalone: true, }) export class NgtSobaTextContent { constructor(public templateRef: TemplateRef<{ text: Ref }>) {} @@ -43,6 +44,7 @@ export class NgtSobaTextContent { @Component({ selector: 'ngt-soba-text[text]', + standalone: true, template: ` `, + imports: [NgtPrimitive, NgtObjectPassThrough, NgIf, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideObjectHostRef(NgtSobaText, (text) => text.textMesh)], }) @@ -292,8 +295,7 @@ export class NgtSobaText extends NgtObjectInputs { } @NgModule({ - declarations: [NgtSobaText, NgtSobaTextContent], + imports: [NgtSobaText, NgtSobaTextContent], exports: [NgtSobaText, NgtSobaTextContent], - imports: [NgtPrimitiveModule, CommonModule, NgtObjectPassThroughModule], }) export class NgtSobaTextModule {} diff --git a/libs/soba/abstractions/src/lib/text3d/text3d.ts b/libs/soba/abstractions/src/lib/text3d/text3d.ts index c05217fe6..788acb940 100644 --- a/libs/soba/abstractions/src/lib/text3d/text3d.ts +++ b/libs/soba/abstractions/src/lib/text3d/text3d.ts @@ -1,17 +1,19 @@ import { make, makeVector3, NgtEuler, NgtTriple, NgtVector3 } from '@angular-three/core'; -import { NgtGroupModule } from '@angular-three/core/group'; +import { NgtGroup } from '@angular-three/core/group'; import { ChangeDetectionStrategy, Component, Input, NgModule } from '@angular/core'; -import * as THREE from 'three/src/Three'; import { Font, FontLoader, TextGeometry } from 'three-stdlib'; +import * as THREE from 'three/src/Three'; /** * adapted from three.js example https://threejs.org/examples/?q=text#webgl_geometry_text */ @Component({ selector: 'ngt-soba-text3d[fontUrl]', + standalone: true, template: ` `, + imports: [NgtGroup], changeDetection: ChangeDetectionStrategy.OnPush, }) export class NgtSobaText3d { @@ -216,8 +218,7 @@ export class NgtSobaText3d { } @NgModule({ - declarations: [NgtSobaText3d], + imports: [NgtSobaText3d], exports: [NgtSobaText3d], - imports: [NgtGroupModule], }) export class NgtSobaText3dModule {} diff --git a/libs/soba/cameras/src/lib/orthographic-camera/orthographic-camera.ts b/libs/soba/cameras/src/lib/orthographic-camera/orthographic-camera.ts index 27a17a93c..2f1560a9d 100644 --- a/libs/soba/cameras/src/lib/orthographic-camera/orthographic-camera.ts +++ b/libs/soba/cameras/src/lib/orthographic-camera/orthographic-camera.ts @@ -12,6 +12,7 @@ import * as THREE from 'three/src/Three'; @Component({ selector: 'ngt-soba-orthographic-camera', + standalone: true, template: ``, changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideCommonCameraRef(NgtSobaOrthographicCamera)], @@ -89,7 +90,7 @@ export class NgtSobaOrthographicCamera extends NgtOrthographicCamera { } @NgModule({ - declarations: [NgtSobaOrthographicCamera], + imports: [NgtSobaOrthographicCamera], exports: [NgtSobaOrthographicCamera], }) export class NgtSobaOrthographicCameraModule {} diff --git a/libs/soba/cameras/src/lib/perspective-camera/perspective-camera.ts b/libs/soba/cameras/src/lib/perspective-camera/perspective-camera.ts index ec88d6ad2..083a6a9b0 100644 --- a/libs/soba/cameras/src/lib/perspective-camera/perspective-camera.ts +++ b/libs/soba/cameras/src/lib/perspective-camera/perspective-camera.ts @@ -11,6 +11,7 @@ import * as THREE from 'three/src/Three'; @Component({ selector: 'ngt-soba-perspective-camera', + standalone: true, template: ``, changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideCommonCameraRef(NgtSobaPerspectiveCamera)], @@ -77,7 +78,7 @@ export class NgtSobaPerspectiveCamera extends NgtPerspectiveCamera { } @NgModule({ - declarations: [NgtSobaPerspectiveCamera], + imports: [NgtSobaPerspectiveCamera], exports: [NgtSobaPerspectiveCamera], }) export class NgtSobaPerspectiveCameraModule {} diff --git a/libs/soba/controls/src/lib/first-person-controls/first-person-controls.ts b/libs/soba/controls/src/lib/first-person-controls/first-person-controls.ts index 93e1f05ea..16c31d9b3 100644 --- a/libs/soba/controls/src/lib/first-person-controls/first-person-controls.ts +++ b/libs/soba/controls/src/lib/first-person-controls/first-person-controls.ts @@ -18,6 +18,7 @@ export interface NgtSobaFirstPersonControlsState extends NgtInstanceState`, changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideInstanceRef(NgtSobaFirstPersonControls)], @@ -147,96 +148,7 @@ export class NgtSobaFirstPersonControls extends NgtInstance -// implements OnInit -// { -// @Output() ready = this.select((s) => s.controls); -// -// constructor( -// private zone: NgZone, -// private canvasStore: NgtCanvasStore, -// private animationFrameStore: NgtAnimationFrameStore -// ) { -// super(); -// } -// -// ngOnInit() { -// this.zone.runOutsideAngular(() => { -// this.onCanvasReady(this.canvasStore.ready$, () => { -// this.init( -// this.select( -// this.canvasStore.camera$, -// this.canvasStore.renderer$, -// (camera, renderer) => ({ camera, renderer }) -// ) -// ); -// -// this.registerAnimation(this.select((s) => s.controls)); -// }); -// }); -// } -// -// private readonly init = this.effect< -// Pick -// >( -// tap(({ camera, renderer }) => { -// if (camera && renderer) { -// this.set({ -// controls: new FirstPersonControls( -// camera, -// renderer.domElement -// ), -// }); -// } -// }) -// ); -// -// private readonly registerAnimation = this.effect( -// tapEffect((controls) => { -// const animationUuid = this.animationFrameStore.register({ -// callback: ({ delta }) => { -// controls.update(delta); -// }, -// }); -// -// return () => { -// this.animationFrameStore.unregister(animationUuid); -// }; -// }) -// ); -// -// get controls() { -// return this.get((s) => s.controls) as FirstPersonControls; -// } -// } -// -// @NgModule({ -// declarations: [NgtSobaFirstPersonControls], -// exports: [NgtSobaFirstPersonControls], -// }) -// export class NgtSobaFirstPersonControlsModule {} diff --git a/libs/soba/controls/src/lib/fly-controls/fly-controls.ts b/libs/soba/controls/src/lib/fly-controls/fly-controls.ts index 69e18c905..14dd5179c 100644 --- a/libs/soba/controls/src/lib/fly-controls/fly-controls.ts +++ b/libs/soba/controls/src/lib/fly-controls/fly-controls.ts @@ -18,6 +18,7 @@ export interface NgtSobaFlyControlsState extends NgtInstanceState { @Component({ selector: 'ngt-soba-fly-controls', + standalone: true, template: ``, changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideInstanceRef(NgtSobaFlyControls)], @@ -108,7 +109,7 @@ export class NgtSobaFlyControls extends NgtInstance { camera?: THREE.Camera; @@ -25,6 +25,7 @@ export interface NgtSobaOrbitControlsState extends NgtInstanceState`, changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideInstanceRef(NgtSobaOrbitControls)], @@ -319,7 +320,7 @@ export class NgtSobaOrbitControls extends NgtInstance }>) {} @@ -66,6 +67,7 @@ export interface NgtSobaTransformControlsState extends NgtObjectInputsState `, + imports: [NgtGroup, NgtObjectPassThrough, NgIf, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideObjectHostRef(NgtSobaTransformControls, (controls) => controls.groupRef)], }) @@ -300,8 +303,7 @@ export class NgtSobaTransformControls extends NgtObjectInputs
@@ -41,6 +42,7 @@ interface NgtSobaLoaderState {
`, + imports: [NgIf, AsyncPipe], styles: [ // language=SCSS ` @@ -192,8 +194,7 @@ export class NgtSobaLoader extends NgtComponentStore impleme } @NgModule({ - declarations: [NgtSobaLoader], + imports: [NgtSobaLoader], exports: [NgtSobaLoader], - imports: [CommonModule], }) export class NgtSobaLoaderModule {} diff --git a/libs/soba/materials/src/lib/blur-pass.ts b/libs/soba/materials/src/lib/blur-pass.ts index b296170d2..450ec1f26 100644 --- a/libs/soba/materials/src/lib/blur-pass.ts +++ b/libs/soba/materials/src/lib/blur-pass.ts @@ -19,7 +19,7 @@ export class BlurPass { readonly scene: THREE.Scene; readonly camera: THREE.Camera; readonly screen: THREE.Mesh; - renderToScreen: boolean = false; + renderToScreen = false; constructor({ gl, @@ -64,8 +64,8 @@ export class BlurPass { const camera = this.camera; const renderTargetA = this.renderTargetA; const renderTargetB = this.renderTargetB; - let material = this.convolutionMaterial; - let uniforms = material.uniforms; + const material = this.convolutionMaterial; + const uniforms = material.uniforms; uniforms['depthBuffer'].value = inputBuffer.depthTexture; const kernel = material.kernel; let lastRT = inputBuffer; diff --git a/libs/soba/misc/src/lib/html/html.ts b/libs/soba/misc/src/lib/html/html.ts index 5ef57d8dc..6ea94de6c 100644 --- a/libs/soba/misc/src/lib/html/html.ts +++ b/libs/soba/misc/src/lib/html/html.ts @@ -5,15 +5,15 @@ import { is, NgtObjectInputs, NgtObjectInputsState, - NgtObjectPassThroughModule, + NgtObjectPassThrough, NumberInput, provideObjectHostRef, Ref, startWithUndefined, tapEffect, } from '@angular-three/core'; -import { NgtGroupModule } from '@angular-three/core/group'; -import { CommonModule } from '@angular/common'; +import { NgtGroup } from '@angular-three/core/group'; +import { AsyncPipe, NgIf, NgTemplateOutlet } from '@angular/common'; import { ChangeDetectionStrategy, Component, @@ -153,6 +153,7 @@ export interface NgtSobaHtmlState extends NgtObjectInputsState { @Directive({ selector: '[ngtSobaHtmlElement]', + standalone: true, }) export class NgtSobaHtmlElement { constructor(public elementRef: ElementRef, public viewContainerRef: ViewContainerRef) {} @@ -160,6 +161,7 @@ export class NgtSobaHtmlElement { @Directive({ selector: 'ng-template[ngt-soba-html-content]', + standalone: true, }) export class NgtSobaHtmlContent { constructor(public templateRef: TemplateRef) {} @@ -167,6 +169,7 @@ export class NgtSobaHtmlContent { @Component({ selector: 'ngt-soba-html', + standalone: true, template: ` @@ -188,6 +191,7 @@ export class NgtSobaHtmlContent { `, + imports: [NgtGroup, NgtObjectPassThrough, NgtSobaHtmlElement, NgIf, AsyncPipe, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideObjectHostRef(NgtSobaHtml)], }) @@ -542,8 +546,7 @@ export class NgtSobaHtml extends NgtObjectInputs } @NgModule({ - declarations: [NgtSobaHtml, NgtSobaHtmlElement, NgtSobaHtmlContent], + imports: [NgtSobaHtml, NgtSobaHtmlElement, NgtSobaHtmlContent], exports: [NgtSobaHtml, NgtSobaHtmlElement, NgtSobaHtmlContent], - imports: [CommonModule, NgtGroupModule, NgtObjectPassThroughModule], }) export class NgtSobaHtmlModule {} diff --git a/libs/soba/performances/src/lib/adaptive-dpr/adaptve-dpr.ts b/libs/soba/performances/src/lib/adaptive-dpr/adaptve-dpr.ts index e2e90e645..b3aae9246 100644 --- a/libs/soba/performances/src/lib/adaptive-dpr/adaptve-dpr.ts +++ b/libs/soba/performances/src/lib/adaptive-dpr/adaptve-dpr.ts @@ -11,6 +11,7 @@ import { tap } from 'rxjs'; @Directive({ selector: 'ngt-soba-adaptive-dpr', + standalone: true, }) export class NgtSobaAdaptiveDpr extends NgtComponentStore<{ pixelated: boolean }> implements OnInit { @Input() set pixelated(pixelated: BooleanInput) { @@ -68,7 +69,7 @@ export class NgtSobaAdaptiveDpr extends NgtComponentStore<{ pixelated: boolean } } @NgModule({ - declarations: [NgtSobaAdaptiveDpr], + imports: [NgtSobaAdaptiveDpr], exports: [NgtSobaAdaptiveDpr], }) export class NgtSobaAdapativeDprModule {} diff --git a/libs/soba/performances/src/lib/adaptive-events/adaptive-events.ts b/libs/soba/performances/src/lib/adaptive-events/adaptive-events.ts index b142a437d..52a15f736 100644 --- a/libs/soba/performances/src/lib/adaptive-events/adaptive-events.ts +++ b/libs/soba/performances/src/lib/adaptive-events/adaptive-events.ts @@ -4,6 +4,7 @@ import { tap } from 'rxjs'; @Directive({ selector: 'ngt-soba-adaptive-events', + standalone: true, }) export class NgtSobaAdaptiveEvents extends NgtComponentStore implements OnInit { constructor(private zone: NgZone, private store: NgtStore) { @@ -37,7 +38,7 @@ export class NgtSobaAdaptiveEvents extends NgtComponentStore implements OnInit { } @NgModule({ - declarations: [NgtSobaAdaptiveEvents], + imports: [NgtSobaAdaptiveEvents], exports: [NgtSobaAdaptiveEvents], }) export class NgtSobaAdaptiveEventsModule {} diff --git a/libs/soba/performances/src/lib/detailed/detailed.ts b/libs/soba/performances/src/lib/detailed/detailed.ts index 0dae6033d..91ba05e48 100644 --- a/libs/soba/performances/src/lib/detailed/detailed.ts +++ b/libs/soba/performances/src/lib/detailed/detailed.ts @@ -2,13 +2,13 @@ import { AnyFunction, NGT_OBJECT_REF, NgtObjectInputs, - NgtObjectPassThroughModule, + NgtObjectPassThrough, NgtRenderState, provideObjectHostRef, Ref, } from '@angular-three/core'; -import { NgtLodModule } from '@angular-three/core/lod'; -import { CommonModule } from '@angular/common'; +import { NgtLod } from '@angular-three/core/lod'; +import { NgIf, NgTemplateOutlet } from '@angular/common'; import { AfterContentInit, ChangeDetectionStrategy, @@ -26,6 +26,7 @@ import * as THREE from 'three/src/Three'; @Directive({ selector: 'ng-template[ngt-soba-detailed-content]', + standalone: true, }) export class NgtSobaDetailedContent { constructor(public templateRef: TemplateRef<{ lod: Ref }>) {} @@ -37,6 +38,7 @@ export class NgtSobaDetailedContent { @Component({ selector: 'ngt-soba-detailed', + standalone: true, template: ` `, + imports: [NgtLod, NgtObjectPassThrough, NgIf, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideObjectHostRef(NgtSobaDetailed)], }) @@ -100,8 +103,7 @@ export class NgtSobaDetailed extends NgtObjectInputs implements After } @NgModule({ - declarations: [NgtSobaDetailed, NgtSobaDetailedContent], + imports: [NgtSobaDetailed, NgtSobaDetailedContent], exports: [NgtSobaDetailed, NgtSobaDetailedContent], - imports: [NgtLodModule, NgtObjectPassThroughModule, CommonModule], }) export class NgtSobaDetailedModule {} diff --git a/libs/soba/performances/src/lib/preload/preload.ts b/libs/soba/performances/src/lib/preload/preload.ts index d89843bf7..ebd43d854 100644 --- a/libs/soba/performances/src/lib/preload/preload.ts +++ b/libs/soba/performances/src/lib/preload/preload.ts @@ -10,6 +10,7 @@ interface NgtSobaPreloadState { @Directive({ selector: 'ngt-soba-preload', + standalone: true, exportAs: 'ngtSobaPreload', }) export class NgtSobaPreload extends NgtComponentStore implements OnInit { @@ -75,7 +76,7 @@ export class NgtSobaPreload extends NgtComponentStore imple } @NgModule({ - declarations: [NgtSobaPreload], + imports: [NgtSobaPreload], exports: [NgtSobaPreload], }) export class NgtSobaPreloadModule {} diff --git a/libs/soba/shaders/src/lib/image-shader-material/image-shader-material.ts b/libs/soba/shaders/src/lib/image-shader-material/image-shader-material.ts index 73627097b..5a19e66f1 100644 --- a/libs/soba/shaders/src/lib/image-shader-material/image-shader-material.ts +++ b/libs/soba/shaders/src/lib/image-shader-material/image-shader-material.ts @@ -8,6 +8,7 @@ import { import { NgtShaderMaterial } from '@angular-three/core/materials'; import { ImageShaderMaterial } from '@angular-three/soba/materials'; import { ChangeDetectionStrategy, Component, Input, NgModule } from '@angular/core'; +import * as THREE from 'three/src/Three'; export type NgtSobaImageShaderMaterialParameters = THREE.ShaderMaterialParameters & { map: THREE.Texture; @@ -20,6 +21,7 @@ export type NgtSobaImageShaderMaterialParameters = THREE.ShaderMaterialParameter @Component({ selector: 'ngt-soba-image-shader-material', + standalone: true, template: ``, changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideCommonMaterialRef(NgtSobaImageShaderMaterial)], @@ -69,7 +71,7 @@ export class NgtSobaImageShaderMaterial extends NgtShaderMaterial { } @NgModule({ - declarations: [NgtSobaImageShaderMaterial], + imports: [NgtSobaImageShaderMaterial], exports: [NgtSobaImageShaderMaterial], }) export class NgtSobaImageShaderMaterialModule {} diff --git a/libs/soba/shaders/src/lib/mesh-reflector-material/mesh-reflector-material.ts b/libs/soba/shaders/src/lib/mesh-reflector-material/mesh-reflector-material.ts index faad80cb6..252a77385 100644 --- a/libs/soba/shaders/src/lib/mesh-reflector-material/mesh-reflector-material.ts +++ b/libs/soba/shaders/src/lib/mesh-reflector-material/mesh-reflector-material.ts @@ -17,6 +17,7 @@ import * as THREE from 'three/src/Three'; @Component({ selector: 'ngt-soba-mesh-reflector-material', + standalone: true, template: ``, changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideCommonMaterialRef(NgtSobaMeshReflectorMaterial)], @@ -353,7 +354,7 @@ export class NgtSobaMeshReflectorMaterial extends NgtMeshStandardMaterial { } @NgModule({ - declarations: [NgtSobaMeshReflectorMaterial], + imports: [NgtSobaMeshReflectorMaterial], exports: [NgtSobaMeshReflectorMaterial], }) export class NgtSobaMeshReflectorMaterialModule {} diff --git a/libs/soba/shaders/src/lib/spot-light-material/spot-light-material.ts b/libs/soba/shaders/src/lib/spot-light-material/spot-light-material.ts index 067635f3b..53557adb4 100644 --- a/libs/soba/shaders/src/lib/spot-light-material/spot-light-material.ts +++ b/libs/soba/shaders/src/lib/spot-light-material/spot-light-material.ts @@ -5,6 +5,7 @@ import { Component, NgModule } from '@angular/core'; @Component({ selector: 'ngt-soba-spot-light-material', + standalone: true, template: ``, providers: [provideCommonMaterialRef(NgtSobaSpotLightMaterial)], }) @@ -15,7 +16,7 @@ export class NgtSobaSpotLightMaterial extends NgtShaderMaterial { } @NgModule({ - declarations: [NgtSobaSpotLightMaterial], + imports: [NgtSobaSpotLightMaterial], exports: [NgtSobaSpotLightMaterial], }) export class NgtSobaSpotLightMaterialModule {} diff --git a/libs/soba/shaders/src/lib/star-field-material/star-field-material.ts b/libs/soba/shaders/src/lib/star-field-material/star-field-material.ts index 20349fe9d..19d925d3e 100644 --- a/libs/soba/shaders/src/lib/star-field-material/star-field-material.ts +++ b/libs/soba/shaders/src/lib/star-field-material/star-field-material.ts @@ -5,6 +5,7 @@ import { Component, NgModule } from '@angular/core'; @Component({ selector: 'ngt-soba-star-field-material', + standalone: true, template: ``, providers: [provideCommonMaterialRef(NgtSobaStarFieldMaterial)], }) @@ -15,7 +16,7 @@ export class NgtSobaStarFieldMaterial extends NgtShaderMaterial { } @NgModule({ - declarations: [NgtSobaStarFieldMaterial], + imports: [NgtSobaStarFieldMaterial], exports: [NgtSobaStarFieldMaterial], }) export class NgtSobaStarFieldMaterialModule {} diff --git a/libs/soba/staging/src/lib/backdrop/backdrop.ts b/libs/soba/staging/src/lib/backdrop/backdrop.ts index 8823695e5..07d8d614c 100644 --- a/libs/soba/staging/src/lib/backdrop/backdrop.ts +++ b/libs/soba/staging/src/lib/backdrop/backdrop.ts @@ -3,16 +3,16 @@ import { coerceNumberProperty, NgtObjectInputs, NgtObjectInputsState, - NgtObjectPassThroughModule, - NgtRadianPipeModule, + NgtObjectPassThrough, + NgtRadianPipe, NumberInput, provideObjectHostRef, Ref, } from '@angular-three/core'; -import { NgtPlaneGeometryModule } from '@angular-three/core/geometries'; -import { NgtGroupModule } from '@angular-three/core/group'; -import { NgtMeshModule } from '@angular-three/core/meshes'; -import { CommonModule } from '@angular/common'; +import { NgtPlaneGeometry } from '@angular-three/core/geometries'; +import { NgtGroup } from '@angular-three/core/group'; +import { NgtMesh } from '@angular-three/core/meshes'; +import { NgIf, NgTemplateOutlet } from '@angular/common'; import { ChangeDetectionStrategy, Component, @@ -36,6 +36,7 @@ export interface NgtSobaBackdropState extends NgtObjectInputsState @Directive({ selector: 'ng-template[ngt-soba-backdrop-content]', + standalone: true, }) export class NgtSobaBackdropContent { constructor(public templateRef: TemplateRef<{ backdrop: Ref }>) {} @@ -47,6 +48,7 @@ export class NgtSobaBackdropContent { @Component({ selector: 'ngt-soba-backdrop', + standalone: true, template: ` @@ -59,6 +61,7 @@ export class NgtSobaBackdropContent { `, + imports: [NgtGroup, NgtObjectPassThrough, NgtMesh, NgtPlaneGeometry, NgtRadianPipe, NgIf, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideObjectHostRef(NgtSobaBackdrop, (backdrop) => backdrop.backdropMesh)], }) @@ -132,15 +135,7 @@ export class NgtSobaBackdrop extends NgtObjectInputs `, + imports: [NgtGroup, NgtObjectPassThrough, NgIf, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideObjectHostRef(NgtSobaBounds)], }) @@ -377,8 +380,7 @@ export class NgtSobaBounds extends NgtObjectInputs { @Component({ selector: 'ngt-soba-camera-shake', + standalone: true, template: ``, changeDetection: ChangeDetectionStrategy.OnPush, }) @@ -183,7 +184,7 @@ export class NgtSobaCameraShake extends NgtInstance<{}, NgtSobaCameraShakeState> } @NgModule({ - declarations: [NgtSobaCameraShake], + imports: [NgtSobaCameraShake], exports: [NgtSobaCameraShake], }) export class NgtSobaCameraShakeModule {} diff --git a/libs/soba/staging/src/lib/center/center.ts b/libs/soba/staging/src/lib/center/center.ts index 2ee82e86b..80ae2a135 100644 --- a/libs/soba/staging/src/lib/center/center.ts +++ b/libs/soba/staging/src/lib/center/center.ts @@ -5,12 +5,12 @@ import { NGT_OBJECT_REF, NgtObjectInputs, NgtObjectInputsState, - NgtObjectPassThroughModule, + NgtObjectPassThrough, provideObjectHostRef, Ref, } from '@angular-three/core'; -import { NgtGroupModule } from '@angular-three/core/group'; -import { CommonModule } from '@angular/common'; +import { NgtGroup } from '@angular-three/core/group'; +import { NgIf, NgTemplateOutlet } from '@angular/common'; import { AfterContentInit, ChangeDetectionStrategy, @@ -28,6 +28,7 @@ import * as THREE from 'three/src/Three'; @Directive({ selector: 'ng-template[ngt-soba-center-content]', + standalone: true, }) export class NgtSobaCenterContent { constructor(public templateRef: TemplateRef<{ group: Ref }>) {} @@ -46,6 +47,7 @@ export interface NgtSobaCenterState extends NgtObjectInputsState { @Component({ selector: 'ngt-soba-center', + standalone: true, template: ` @@ -60,6 +62,7 @@ export interface NgtSobaCenterState extends NgtObjectInputsState { `, + imports: [NgtGroup, NgtObjectPassThrough, NgIf, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideObjectHostRef(NgtSobaCenter, (center) => center.innerGroup)], }) @@ -123,8 +126,7 @@ export class NgtSobaCenter extends NgtObjectInputs { opacity: number; @@ -37,6 +37,7 @@ export interface NgtSobaContactShadowsState extends NgtObjectInputsState `, + imports: [ + NgtGroup, + NgtObjectPassThrough, + NgtRadianPipe, + NgIf, + AsyncPipe, + NgtMesh, + NgtMeshBasicMaterial, + NgtOrthographicCamera, + ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideObjectHostRef(NgtSobaContactShadows)], }) @@ -76,15 +87,24 @@ export class NgtSobaContactShadows extends NgtObjectInputs s.opacity); + } @Input() set width(width: NumberInput) { this.set({ width: coerceNumberProperty(width) }); } + get width() { + return this.get((s) => s['scaledWidth']); + } @Input() set height(height: NumberInput) { this.set({ height: coerceNumberProperty(height) }); } + get height() { + return this.get((s) => s['scaledHeight']); + } @Input() set blur(blur: NumberInput) { this.set({ blur: coerceNumberProperty(blur) }); } @@ -93,6 +113,10 @@ export class NgtSobaContactShadows extends NgtObjectInputs s.far); + } + @Input() set smooth(smooth: BooleanInput) { this.set({ smooth: coerceBooleanProperty(smooth) }); } @@ -108,9 +132,11 @@ export class NgtSobaContactShadows extends NgtObjectInputs s.depthWrite); + } private count = 1; - readonly shadowViewModel$ = this.select( this.select((s) => s.priority), this.select((s) => s['planeGeometry']), @@ -131,28 +157,12 @@ export class NgtSobaContactShadows extends NgtObjectInputs s['planeGeometry']); } get renderTarget() { return this.get((s) => s['renderTarget']); } - get opacity() { - return this.get((s) => s.opacity); - } - get depthWrite() { - return this.get((s) => s.depthWrite); - } - get width() { - return this.get((s) => s['scaledWidth']); - } - get height() { - return this.get((s) => s['scaledHeight']); - } - get far() { - return this.get((s) => s.far); - } get shadowCameraRef() { return this.get((s) => s['shadowCameraRef']); @@ -312,16 +322,7 @@ export class NgtSobaContactShadows extends NgtObjectInputs extends N @Directive({ selector: '[ngtSobaEnvironmentPassThrough]', + standalone: true, }) export class NgtSobaEnvironmentPassThrough { @Input() set ngtSobaEnvironmentPassThrough(wrapper: unknown) { @@ -424,6 +425,7 @@ export class NgtSobaEnvironmentResolver extends NgtComponentStore`, changeDetection: ChangeDetectionStrategy.OnPush, providers: [ @@ -492,6 +494,7 @@ export class NgtSobaEnvironmentMap extends NgtSobaEnvironmentGeneric { @Component({ selector: 'ngt-soba-environment-cube', + standalone: true, template: ``, changeDetection: ChangeDetectionStrategy.OnPush, providers: [ @@ -591,6 +594,7 @@ export class NgtSobaEnvironmentCube extends NgtSobaEnvironmentGeneric { @Directive({ selector: 'ng-template[ngt-soba-environment-content]', + standalone: true, }) export class NgtSobaEnvironmentContent { constructor(public templateRef: TemplateRef) {} @@ -598,6 +602,7 @@ export class NgtSobaEnvironmentContent { @Component({ selector: 'ngt-soba-environment-portal', + standalone: true, template: ` @@ -619,6 +624,15 @@ export class NgtSobaEnvironmentContent { `, + imports: [ + NgtPortal, + NgtCubeCamera, + NgtSobaEnvironmentPassThrough, + NgtSobaEnvironmentCube, + NgtSobaEnvironmentMap, + NgIf, + AsyncPipe, + ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [ { @@ -712,6 +726,7 @@ export class NgtSobaEnvironmentPortal extends NgtSobaEnvironmentGeneric { @Component({ selector: 'ngt-soba-environment-ground', + standalone: true, template: ` `, + imports: [ + NgtSobaEnvironmentMap, + NgtMesh, + NgtIcosahedronGeometry, + NgtShaderMaterial, + NgtSidePipe, + NgtSobaEnvironmentPassThrough, + NgIf, + AsyncPipe, + ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [ { @@ -924,6 +949,7 @@ export class NgtSobaEnvironmentGround extends NgtSobaEnvironmentGeneric { @Component({ selector: 'ngt-soba-environment', + standalone: true, template: ` `, + imports: [ + NgtSobaEnvironmentGround, + NgtSobaEnvironmentMap, + NgtSobaEnvironmentPortal, + NgtSobaEnvironmentCube, + NgtSobaEnvironmentPassThrough, + NgtSobaEnvironmentContent, + NgIf, + NgTemplateOutlet, + ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: NgtSobaEnvironmentGeneric, useExisting: NgtSobaEnvironment }], }) @@ -960,24 +996,7 @@ export class NgtSobaEnvironment extends NgtSobaEnvironmentGeneric { } @NgModule({ - declarations: [ - NgtSobaEnvironment, - NgtSobaEnvironmentPassThrough, - NgtSobaEnvironmentMap, - NgtSobaEnvironmentCube, - NgtSobaEnvironmentPortal, - NgtSobaEnvironmentGround, - NgtSobaEnvironmentContent, - ], + imports: [NgtSobaEnvironment, NgtSobaEnvironmentContent], exports: [NgtSobaEnvironment, NgtSobaEnvironmentContent], - imports: [ - NgtPortalModule, - CommonModule, - NgtCubeCameraModule, - NgtMeshModule, - NgtIcosahedronGeometryModule, - NgtShaderMaterialModule, - NgtSidePipeModule, - ], }) export class NgtSobaEnvironmentModule {} diff --git a/libs/soba/staging/src/lib/float/float.ts b/libs/soba/staging/src/lib/float/float.ts index 3d070cfad..44bd1aeae 100644 --- a/libs/soba/staging/src/lib/float/float.ts +++ b/libs/soba/staging/src/lib/float/float.ts @@ -4,13 +4,13 @@ import { NGT_OBJECT_REF, NgtObjectInputs, NgtObjectInputsState, - NgtObjectPassThroughModule, + NgtObjectPassThrough, NumberInput, provideObjectHostRef, Ref, } from '@angular-three/core'; -import { NgtGroupModule } from '@angular-three/core/group'; -import { CommonModule } from '@angular/common'; +import { NgtGroup } from '@angular-three/core/group'; +import { NgIf, NgTemplateOutlet } from '@angular/common'; import { ChangeDetectionStrategy, Component, @@ -26,6 +26,7 @@ import * as THREE from 'three/src/Three'; @Directive({ selector: 'ng-template[ngt-soba-float-content]', + standalone: true, }) export class NgtSobaFloatContent { constructor(public templateRef: TemplateRef<{ group: Ref }>) {} @@ -45,6 +46,7 @@ export interface NgtSobaFloatState extends NgtObjectInputsState { @Component({ selector: 'ngt-soba-float', + standalone: true, template: ` @@ -57,6 +59,7 @@ export interface NgtSobaFloatState extends NgtObjectInputsState { `, + imports: [NgtGroup, NgtObjectPassThrough, NgIf, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideObjectHostRef(NgtSobaFloat, (float) => float.innerGroup)], }) @@ -120,8 +123,7 @@ export class NgtSobaFloat extends NgtObjectInputs }>) {} @@ -45,6 +46,7 @@ export class NgtSobaSkyContent { @Component({ selector: 'ngt-soba-sky', + standalone: true, template: ` `, + imports: [NgIf, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, }) export class NgtSobaSky extends NgtCommonMesh { @@ -150,8 +153,7 @@ export class NgtSobaSky extends NgtCommonMesh { } @NgModule({ - declarations: [NgtSobaSky, NgtSobaSkyContent], + imports: [NgtSobaSky, NgtSobaSkyContent], exports: [NgtSobaSky, NgtSobaSkyContent], - imports: [CommonModule], }) export class NgtSobaSkyModule {} diff --git a/libs/soba/staging/src/lib/spot-light/spot-light.ts b/libs/soba/staging/src/lib/spot-light/spot-light.ts index d3c1e31a3..4267dafdd 100644 --- a/libs/soba/staging/src/lib/spot-light/spot-light.ts +++ b/libs/soba/staging/src/lib/spot-light/spot-light.ts @@ -1,17 +1,17 @@ import { coerceNumberProperty, makeColor, - NgtObjectPassThroughModule, + NgtObjectPassThrough, NumberInput, provideObjectHostRef, Ref, tapEffect, } from '@angular-three/core'; -import { NgtSpotLight, NgtSpotLightModule, NgtSpotLightPassThroughModule } from '@angular-three/core/lights'; -import { NgtMeshModule } from '@angular-three/core/meshes'; +import { NgtSpotLight, NgtSpotLightPassThrough } from '@angular-three/core/lights'; +import { NgtMesh } from '@angular-three/core/meshes'; import { SpotLightMaterial } from '@angular-three/soba/materials'; -import { NgtSobaSpotLightMaterialModule } from '@angular-three/soba/shaders'; -import { CommonModule } from '@angular/common'; +import { NgtSobaSpotLightMaterial } from '@angular-three/soba/shaders'; +import { AsyncPipe } from '@angular/common'; import { ChangeDetectionStrategy, Component, Input, NgModule } from '@angular/core'; import * as THREE from 'three/src/Three'; @@ -19,6 +19,7 @@ const vec = new THREE.Vector3(); @Component({ selector: 'ngt-soba-spot-light', + standalone: true, template: ` `, + imports: [NgtSpotLight, NgtObjectPassThrough, NgtSpotLightPassThrough, NgtMesh, NgtSobaSpotLightMaterial, AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideObjectHostRef(NgtSobaSpotLight)], }) @@ -193,15 +195,7 @@ export class NgtSobaSpotLight extends NgtSpotLight { } @NgModule({ - declarations: [NgtSobaSpotLight], + imports: [NgtSobaSpotLight], exports: [NgtSobaSpotLight], - imports: [ - NgtSpotLightModule, - NgtObjectPassThroughModule, - NgtMeshModule, - NgtSobaSpotLightMaterialModule, - CommonModule, - NgtSpotLightPassThroughModule, - ], }) export class NgtSobaSpotLightModule {} diff --git a/libs/soba/staging/src/lib/stage/stage.ts b/libs/soba/staging/src/lib/stage/stage.ts index 0d7de93f2..9d8152799 100644 --- a/libs/soba/staging/src/lib/stage/stage.ts +++ b/libs/soba/staging/src/lib/stage/stage.ts @@ -6,15 +6,15 @@ import { NGT_OBJECT_REF, NgtObjectInputs, NgtObjectInputsState, - NgtObjectPassThroughModule, + NgtObjectPassThrough, NumberInput, provideObjectHostRef, Ref, } from '@angular-three/core'; -import { NgtValueAttributeModule } from '@angular-three/core/attributes'; -import { NgtGroupModule } from '@angular-three/core/group'; -import { NgtAmbientLightModule, NgtPointLightModule, NgtSpotLightModule } from '@angular-three/core/lights'; -import { CommonModule } from '@angular/common'; +import { NgtValueAttribute } from '@angular-three/core/attributes'; +import { NgtGroup } from '@angular-three/core/group'; +import { NgtAmbientLight, NgtPointLight, NgtSpotLight } from '@angular-three/core/lights'; +import { NgIf, NgTemplateOutlet } from '@angular/common'; import { ChangeDetectionStrategy, Component, @@ -29,8 +29,8 @@ import { } from '@angular/core'; import { asyncScheduler, combineLatest, filter, observeOn, pipe, skip, switchMap, tap } from 'rxjs'; import * as THREE from 'three/src/Three'; -import { NgtSobaContactShadowsModule } from '../contact-shadows/contact-shadows'; -import { NgtSobaEnvironmentModule } from '../environment/environment'; +import { NgtSobaContactShadows } from '../contact-shadows/contact-shadows'; +import { NgtSobaEnvironment } from '../environment/environment'; import { PresetsType } from '../environment/presets'; const presets = { @@ -79,6 +79,7 @@ export interface NgtSobaStageState extends NgtObjectInputsState { @Directive({ selector: 'ng-template[ngt-soba-stage-content]', + standalone: true, }) export class NgtSobaStageContent { constructor(public templateRef: TemplateRef<{ group: Ref }>) {} @@ -90,6 +91,7 @@ export class NgtSobaStageContent { @Component({ selector: 'ngt-soba-stage', + standalone: true, template: ` @@ -128,6 +130,18 @@ export class NgtSobaStageContent { > `, + imports: [ + NgtGroup, + NgtObjectPassThrough, + NgtSobaContactShadows, + NgtSobaEnvironment, + NgtAmbientLight, + NgtSpotLight, + NgtPointLight, + NgtValueAttribute, + NgIf, + NgTemplateOutlet, + ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideObjectHostRef(NgtSobaStage, (stage) => stage.innerGroup)], }) @@ -315,18 +329,7 @@ export class NgtSobaStage extends NgtObjectInputs { @Component({ selector: 'ngt-soba-stars', + standalone: true, template: ` @@ -64,6 +65,15 @@ export interface NgtSobaStarsState extends NgtObjectInputsState { > `, + imports: [ + NgtPoints, + NgtObjectPassThrough, + NgtBufferGeometry, + NgtBufferAttribute, + NgtSobaStarFieldMaterial, + NgIf, + AsyncPipe, + ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideObjectHostRef(NgtSobaStars)], }) @@ -151,15 +161,7 @@ export class NgtSobaStars extends NgtObjectInputs