Skip to content

Commit f821f97

Browse files
nartcnartc
committed
feat(postprocessing): expose effect instances publicly
- Pattern A effects (ngt-primitive): make computed effect property public - Pattern B effects (extend): add #effect template var and effectRef viewChild - Rename injected NgtpEffect to hostEffect to avoid naming conflicts
1 parent 168ee7c commit f821f97

27 files changed

+253
-64
lines changed

‎libs/postprocessing/src/lib/effects/ascii.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -220,7 +220,7 @@ export class NgtpASCII {
220220
options = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
221221

222222
/** The underlying ASCIIEffect instance */
223-
protected effect = computed(() => new ASCIIEffect(this.options()));
223+
effect = computed(() => new ASCIIEffect(this.options()));
224224

225225
constructor() {
226226
effect((onCleanup) => {

‎libs/postprocessing/src/lib/effects/bloom.ts‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
1-
import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
1+
import {
2+
CUSTOM_ELEMENTS_SCHEMA,
3+
ChangeDetectionStrategy,
4+
Component,
5+
ElementRef,
6+
inject,
7+
input,
8+
viewChild,
9+
} from '@angular/core';
210
import { NgtArgs, extend } from 'angular-three';
311
import { BlendFunction, BloomEffect, BloomEffectOptions } from 'postprocessing';
412
import { NgtpEffect, NgtpEffectBlendMode, provideDefaultEffectOptions } from '../effect';
@@ -30,7 +38,7 @@ import { NgtpEffect, NgtpEffectBlendMode, provideDefaultEffectOptions } from '..
3038
@Component({
3139
selector: 'ngtp-bloom',
3240
template: `
33-
<ngt-bloom-effect *args="[options()]" [camera]="effect.camera()">
41+
<ngt-bloom-effect #effect *args="[options()]" [camera]="hostEffect.camera()">
3442
<ngtp-effect-blend-mode />
3543
<ng-content />
3644
</ngt-bloom-effect>
@@ -50,7 +58,9 @@ export class NgtpBloom {
5058
options = input({} as Omit<BloomEffectOptions, 'blendFunction'>);
5159

5260
/** Reference to the host NgtpEffect directive */
53-
protected effect = inject(NgtpEffect, { host: true });
61+
protected hostEffect = inject(NgtpEffect, { host: true });
62+
63+
effectRef = viewChild<ElementRef<BloomEffect>>('effect');
5464

5565
constructor() {
5666
extend({ BloomEffect });

‎libs/postprocessing/src/lib/effects/brightness-contrast.ts‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
1-
import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
1+
import {
2+
CUSTOM_ELEMENTS_SCHEMA,
3+
ChangeDetectionStrategy,
4+
Component,
5+
ElementRef,
6+
inject,
7+
input,
8+
viewChild,
9+
} from '@angular/core';
210
import { NgtArgs, extend } from 'angular-three';
311
import { BrightnessContrastEffect } from 'postprocessing';
412
import { NgtpEffect, NgtpEffectBlendMode } from '../effect';
@@ -25,7 +33,7 @@ export type BrightnessEffectOptions = NonNullable<ConstructorParameters<typeof B
2533
@Component({
2634
selector: 'ngtp-brightness-contrast',
2735
template: `
28-
<ngt-brightness-contrast-effect *args="[options()]" [camera]="effect.camera()">
36+
<ngt-brightness-contrast-effect #effect *args="[options()]" [camera]="hostEffect.camera()">
2937
<ngtp-effect-blend-mode />
3038
<ng-content />
3139
</ngt-brightness-contrast-effect>
@@ -43,7 +51,9 @@ export class NgtpBrightnessContrast {
4351
options = input({} as Omit<BrightnessEffectOptions, 'blendFunction'>);
4452

4553
/** Reference to the host NgtpEffect directive */
46-
protected effect = inject(NgtpEffect, { host: true });
54+
protected hostEffect = inject(NgtpEffect, { host: true });
55+
56+
effectRef = viewChild<ElementRef<BrightnessContrastEffect>>('effect');
4757

4858
constructor() {
4959
extend({ BrightnessContrastEffect });

‎libs/postprocessing/src/lib/effects/chromatic-abberation.ts‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
1-
import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
1+
import {
2+
CUSTOM_ELEMENTS_SCHEMA,
3+
ChangeDetectionStrategy,
4+
Component,
5+
ElementRef,
6+
inject,
7+
input,
8+
viewChild,
9+
} from '@angular/core';
210
import { NgtArgs, extend } from 'angular-three';
311
import { ChromaticAberrationEffect } from 'postprocessing';
412
import { NgtpEffect, NgtpEffectBlendMode } from '../effect';
@@ -27,7 +35,7 @@ export type ChromaticAberrationEffectOptions = Partial<
2735
@Component({
2836
selector: 'ngtp-chromatic-aberration',
2937
template: `
30-
<ngt-chromatic-aberration-effect *args="[options()]" [camera]="effect.camera()">
38+
<ngt-chromatic-aberration-effect #effect *args="[options()]" [camera]="hostEffect.camera()">
3139
<ngtp-effect-blend-mode />
3240
<ng-content />
3341
</ngt-chromatic-aberration-effect>
@@ -45,7 +53,9 @@ export class NgtpChromaticAberration {
4553
options = input({} as Omit<ChromaticAberrationEffectOptions, 'blendFunction'>);
4654

4755
/** Reference to the host NgtpEffect directive */
48-
protected effect = inject(NgtpEffect, { host: true });
56+
protected hostEffect = inject(NgtpEffect, { host: true });
57+
58+
effectRef = viewChild<ElementRef<ChromaticAberrationEffect>>('effect');
4959

5060
constructor() {
5161
extend({ ChromaticAberrationEffect });

‎libs/postprocessing/src/lib/effects/color-average.ts‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
1-
import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, input } from '@angular/core';
1+
import {
2+
CUSTOM_ELEMENTS_SCHEMA,
3+
ChangeDetectionStrategy,
4+
Component,
5+
ElementRef,
6+
input,
7+
viewChild,
8+
} from '@angular/core';
29
import { NgtArgs, extend } from 'angular-three';
310
import { mergeInputs } from 'ngxtension/inject-inputs';
411
import { BlendFunction, ColorAverageEffect } from 'postprocessing';
@@ -27,7 +34,7 @@ import { BlendFunction, ColorAverageEffect } from 'postprocessing';
2734
@Component({
2835
selector: 'ngtp-color-average',
2936
template: `
30-
<ngt-color-average-effect *args="[options().blendFunction]">
37+
<ngt-color-average-effect #effect *args="[options().blendFunction]">
3138
<ng-content />
3239
</ngt-color-average-effect>
3340
`,
@@ -45,6 +52,8 @@ export class NgtpColorAverage {
4552
{ transform: mergeInputs({ blendFunction: BlendFunction.NORMAL }) },
4653
);
4754

55+
effectRef = viewChild<ElementRef<ColorAverageEffect>>('effect');
56+
4857
constructor() {
4958
extend({ ColorAverageEffect });
5059
}

‎libs/postprocessing/src/lib/effects/color-depth.ts‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
1-
import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
1+
import {
2+
CUSTOM_ELEMENTS_SCHEMA,
3+
ChangeDetectionStrategy,
4+
Component,
5+
ElementRef,
6+
inject,
7+
input,
8+
viewChild,
9+
} from '@angular/core';
210
import { NgtArgs, extend } from 'angular-three';
311
import { ColorDepthEffect } from 'postprocessing';
412
import { NgtpEffect, NgtpEffectBlendMode } from '../effect';
@@ -25,7 +33,7 @@ export type ColorDepthEffectOptions = Partial<NonNullable<ConstructorParameters<
2533
@Component({
2634
selector: 'ngtp-color-depth',
2735
template: `
28-
<ngt-color-depth-effect *args="[options()]" [camera]="effect.camera()">
36+
<ngt-color-depth-effect #effect *args="[options()]" [camera]="hostEffect.camera()">
2937
<ngtp-effect-blend-mode />
3038
<ng-content />
3139
</ngt-color-depth-effect>
@@ -43,7 +51,9 @@ export class NgtpColorDepth {
4351
options = input({} as Omit<ColorDepthEffectOptions, 'blendFunction'>);
4452

4553
/** Reference to the host NgtpEffect directive */
46-
protected effect = inject(NgtpEffect, { host: true });
54+
protected hostEffect = inject(NgtpEffect, { host: true });
55+
56+
effectRef = viewChild<ElementRef<ColorDepthEffect>>('effect');
4757

4858
constructor() {
4959
extend({ ColorDepthEffect });

‎libs/postprocessing/src/lib/effects/depth-of-field.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ export class NgtpDepthOfField {
6363
* Creates the DepthOfFieldEffect instance with the configured options.
6464
* Enables autofocus if a target is provided and applies depth texture settings.
6565
*/
66-
protected effect = computed(() => {
66+
effect = computed(() => {
6767
const [camera, options] = [this.effectComposer.camera(), this.options()];
6868

6969
const autoFocus = options.target != null;

‎libs/postprocessing/src/lib/effects/depth.ts‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
1-
import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
1+
import {
2+
CUSTOM_ELEMENTS_SCHEMA,
3+
ChangeDetectionStrategy,
4+
Component,
5+
ElementRef,
6+
inject,
7+
input,
8+
viewChild,
9+
} from '@angular/core';
210
import { NgtArgs, extend } from 'angular-three';
311
import { DepthEffect } from 'postprocessing';
412
import { NgtpEffect, NgtpEffectBlendMode } from '../effect';
@@ -25,7 +33,7 @@ export type DepthEffectOptions = Partial<NonNullable<ConstructorParameters<typeo
2533
@Component({
2634
selector: 'ngtp-depth',
2735
template: `
28-
<ngt-depth-effect *args="[options()]" [camera]="effect.camera()">
36+
<ngt-depth-effect #effect *args="[options()]" [camera]="hostEffect.camera()">
2937
<ngtp-effect-blend-mode />
3038
<ng-content />
3139
</ngt-depth-effect>
@@ -43,7 +51,9 @@ export class NgtpDepth {
4351
options = input({} as Omit<DepthEffectOptions, 'blendFunction'>);
4452

4553
/** Reference to the host NgtpEffect directive */
46-
protected effect = inject(NgtpEffect, { host: true });
54+
protected hostEffect = inject(NgtpEffect, { host: true });
55+
56+
effectRef = viewChild<ElementRef<DepthEffect>>('effect');
4757

4858
constructor() {
4959
extend({ DepthEffect });

‎libs/postprocessing/src/lib/effects/dot-screen.ts‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
1-
import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
1+
import {
2+
CUSTOM_ELEMENTS_SCHEMA,
3+
ChangeDetectionStrategy,
4+
Component,
5+
ElementRef,
6+
inject,
7+
input,
8+
viewChild,
9+
} from '@angular/core';
210
import { NgtArgs, extend } from 'angular-three';
311
import { DotScreenEffect } from 'postprocessing';
412
import { NgtpEffect, NgtpEffectBlendMode } from '../effect';
@@ -25,7 +33,7 @@ export type DotScreenEffectOptions = Partial<NonNullable<ConstructorParameters<t
2533
@Component({
2634
selector: 'ngtp-dot-screen',
2735
template: `
28-
<ngt-dot-screen-effect *args="[options()]" [camera]="effect.camera()">
36+
<ngt-dot-screen-effect #effect *args="[options()]" [camera]="hostEffect.camera()">
2937
<ngtp-effect-blend-mode />
3038
<ng-content />
3139
</ngt-dot-screen-effect>
@@ -43,7 +51,9 @@ export class NgtpDotScreen {
4351
options = input({} as Omit<DotScreenEffectOptions, 'blendFunction'>);
4452

4553
/** Reference to the host NgtpEffect directive */
46-
protected effect = inject(NgtpEffect, { host: true });
54+
protected hostEffect = inject(NgtpEffect, { host: true });
55+
56+
effectRef = viewChild<ElementRef<DotScreenEffect>>('effect');
4757

4858
constructor() {
4959
extend({ DotScreenEffect });

‎libs/postprocessing/src/lib/effects/fxaa.ts‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
1-
import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
1+
import {
2+
CUSTOM_ELEMENTS_SCHEMA,
3+
ChangeDetectionStrategy,
4+
Component,
5+
ElementRef,
6+
inject,
7+
input,
8+
viewChild,
9+
} from '@angular/core';
210
import { NgtArgs, extend } from 'angular-three';
311
import { FXAAEffect } from 'postprocessing';
412
import { NgtpEffect, NgtpEffectBlendMode } from '../effect';
@@ -26,7 +34,7 @@ export type FXAAEffectOptions = Partial<NonNullable<ConstructorParameters<typeof
2634
@Component({
2735
selector: 'ngtp-fxaa',
2836
template: `
29-
<ngt-fXAA-effect *args="[options()]" [camera]="effect.camera()">
37+
<ngt-fXAA-effect #effect *args="[options()]" [camera]="hostEffect.camera()">
3038
<ngtp-effect-blend-mode />
3139
<ng-content />
3240
</ngt-fXAA-effect>
@@ -44,7 +52,9 @@ export class NgtpFXAA {
4452
options = input({} as Omit<FXAAEffectOptions, 'blendFunction'>);
4553

4654
/** Reference to the host NgtpEffect directive */
47-
protected effect = inject(NgtpEffect, { host: true });
55+
protected hostEffect = inject(NgtpEffect, { host: true });
56+
57+
effectRef = viewChild<ElementRef<FXAAEffect>>('effect');
4858

4959
constructor() {
5060
extend({ FXAAEffect });

0 commit comments

Comments
 (0)