angular-three-postprocessing 2.0.0-beta.285 → 2.0.0-beta.287

package/fesm2022/angular-three-postprocessing.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { inject, Component, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, input, Directive, Injector, computed, viewChild, afterNextRender } from '@angular/core';
-import { injectStore, extend, pick, injectBeforeRender, getLocalState, NgtArgs, vector2, is } from 'angular-three';
+import { inject, Component, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, input, Directive, Injector, computed, viewChild, afterNextRender, untracked } from '@angular/core';
+import { injectStore, pick, extend, injectBeforeRender, getLocalState, NgtArgs, vector2, is, NgtSelection, omit, resolveRef } from 'angular-three';
 import { createNoopInjectionToken } from 'ngxtension/create-injection-token';
 import { injectAutoEffect } from 'ngxtension/auto-effect';
 import { mergeInputs } from 'ngxtension/inject-inputs';
-import { EffectAttribute, EffectComposer, RenderPass, NormalPass, DepthDownsamplingPass, Effect, EffectPass, Pass, BloomEffect, BlendFunction, BrightnessContrastEffect, ChromaticAberrationEffect, ColorAverageEffect, ColorDepthEffect, DepthEffect, DepthOfFieldEffect, MaskFunction, DotScreenEffect, FXAAEffect, GlitchEffect, GlitchMode, GodRaysEffect, GridEffect, HueSaturationEffect, LUT3DEffect, NoiseEffect, PixelationEffect, ScanlineEffect, SepiaEffect, ShockWaveEffect, SMAAEffect, TiltShiftEffect, VignetteEffect } from 'postprocessing';
-import { Group, HalfFloatType, NoToneMapping, Uniform, Texture, Color, CanvasTexture, RepeatWrapping, NearestFilter, Vector3, Vector2, Mesh } from 'three';
+import { EffectAttribute, EffectComposer, RenderPass, NormalPass, DepthDownsamplingPass, Effect, EffectPass, Pass, BloomEffect, BlendFunction, BrightnessContrastEffect, ChromaticAberrationEffect, ColorAverageEffect, ColorDepthEffect, DepthEffect, DepthOfFieldEffect, MaskFunction, DotScreenEffect, FXAAEffect, GlitchEffect, GlitchMode, GodRaysEffect, GridEffect, HueSaturationEffect, LUT3DEffect, NoiseEffect, OutlineEffect, PixelationEffect, ScanlineEffect, SepiaEffect, ShockWaveEffect, SMAAEffect, TiltShiftEffect, VignetteEffect } from 'postprocessing';
+import { HalfFloatType, Group, NoToneMapping, Uniform, Texture, Color, CanvasTexture, RepeatWrapping, NearestFilter, Vector3, Vector2, Mesh } from 'three';
 import { isWebGL2Available } from 'three-stdlib';
 import { easing } from 'maath';
 
@@ -55,8 +55,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImpor
         }] });
 const NgtpEffectHostDirective = { directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] };
 
-extend({ Group });
-const defaultOptions$3 = {
+const defaultOptions$4 = {
     enabled: true,
     renderPriority: 1,
     autoClear: true,
@@ -68,7 +67,7 @@ function isConvolution(effect) {
 }
 class NgtpEffectComposer {
     constructor() {
-        this.options = input(defaultOptions$3, { transform: mergeInputs(defaultOptions$3) });
+        this.options = input(defaultOptions$4, { transform: mergeInputs(defaultOptions$4) });
         this.injector = inject(Injector);
         this.autoEffect = injectAutoEffect();
         this.store = injectStore();
@@ -122,6 +121,7 @@ class NgtpEffectComposer {
             }
             return { composer, normalPass, downSamplingPass };
         });
+        extend({ Group });
         afterNextRender(() => {
             this.disableToneMapping();
             this.setComposerSize();
@@ -317,7 +317,7 @@ class ASCIIEffect extends Effect {
         return texture;
     }
 }
-const defaultOptions$2 = {
+const defaultOptions$3 = {
     font: 'arial',
     characters: ` .:,'-^=*+?!|0#X%WM@`,
     fontSize: 54,
@@ -327,7 +327,7 @@ const defaultOptions$2 = {
 };
 class NgtpASCII {
     constructor() {
-        this.options = input(defaultOptions$2, { transform: mergeInputs(defaultOptions$2) });
+        this.options = input(defaultOptions$3, { transform: mergeInputs(defaultOptions$3) });
         this.effect = computed(() => new ASCIIEffect(this.options()));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: NgtpASCII, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -555,7 +555,7 @@ class NgtpDepthOfField {
                 effect.setDepthTexture(options.depthTexture.texture, options.depthTexture.packing);
             }
             // Temporary fix that restores DOF 6.21.3 behavior, everything since then lets shapes leak through the blur
-            const maskPass = effect.maskPass;
+            const maskPass = effect['maskPass'];
             maskPass.maskFunction = MaskFunction.MULTIPLY_RGB_SET_ALPHA;
             return effect;
         });
@@ -746,8 +746,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImpor
 class NgtpGrid {
     constructor() {
         this.autoEffect = injectAutoEffect();
-        this.store = injectStore();
-        this.invalidate = this.store.select('invalidate');
         this.options = input({});
         this.size = pick(this.options, 'size');
         this.effect = computed(() => {
@@ -897,7 +895,7 @@ class LensFlareEffect extends Effect {
         }
     }
 }
-const defaultOptions$1 = {
+const defaultOptions$2 = {
     position: new Vector3(-25, 6, -60),
     followMouse: false,
     smoothTime: 0.7,
@@ -910,7 +908,7 @@ class NgtpLensFlare {
         this.raycaster = this.store.select('raycaster');
         this.pointer = this.store.select('pointer');
         this.effectComposer = inject(NgtpEffectComposer);
-        this.options = input(defaultOptions$1, { transform: mergeInputs(defaultOptions$1) });
+        this.options = input(defaultOptions$2, { transform: mergeInputs(defaultOptions$2) });
         this.projectedPosition = new Vector3();
         this.mouse2d = new Vector2();
         this.effect = computed(() => {
@@ -983,7 +981,7 @@ class NgtpLensFlare {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: NgtpLensFlare, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.1.3", type: NgtpLensFlare, isStandalone: true, selector: "ngtp-lens-flare", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-		<ngt-primitive *args="[effect()]" [dispose]="null" />
+		<ngt-primitive *args="[effect()]" [parameters]="{ dispose: null }" />
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: NgtpLensFlare, decorators: [{
@@ -992,7 +990,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImpor
                     selector: 'ngtp-lens-flare',
                     standalone: true,
                     template: `
-		<ngt-primitive *args="[effect()]" [dispose]="null" />
+		<ngt-primitive *args="[effect()]" [parameters]="{ dispose: null }" />
 	`,
                     imports: [NgtArgs],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -1078,6 +1076,142 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImpor
                 }]
         }] });
 
+const defaultOptions$1 = {
+    selectionLayer: 10,
+};
+class NgtpOutline {
+    constructor() {
+        this.options = input(defaultOptions$1, { transform: mergeInputs(defaultOptions$1) });
+        this.ngtSelection = inject(NgtSelection, { optional: true });
+        this.effectComposer = inject(NgtpEffectComposer);
+        this.store = injectStore();
+        this.invalidate = this.store.select('invalidate');
+        this.selection = pick(this.options, 'selection');
+        this.selectionLayer = pick(this.options, 'selectionLayer');
+        this.blendFunction = pick(this.options, 'blendFunction');
+        this.patternTexture = pick(this.options, 'patternTexture');
+        this.edgeStrength = pick(this.options, 'edgeStrength');
+        this.pulseSpeed = pick(this.options, 'pulseSpeed');
+        this.visibleEdgeColor = pick(this.options, 'visibleEdgeColor');
+        this.hiddenEdgeColor = pick(this.options, 'hiddenEdgeColor');
+        this.width = pick(this.options, 'width');
+        this.height = pick(this.options, 'height');
+        this.kernelSize = pick(this.options, 'kernelSize');
+        this.blur = pick(this.options, 'blur');
+        this.xRay = pick(this.options, 'xRay');
+        this.restOptions = omit(this.options, [
+            'blendFunction',
+            'patternTexture',
+            'edgeStrength',
+            'pulseSpeed',
+            'visibleEdgeColor',
+            'hiddenEdgeColor',
+            'width',
+            'height',
+            'kernelSize',
+            'blur',
+            'xRay',
+        ]);
+        this.effect = computed(() => {
+            const [scene, camera, blendFunction, patternTexture, edgeStrength, pulseSpeed, visibleEdgeColor, hiddenEdgeColor, width, height, kernelSize, blur, xRay, restOptions,] = [
+                this.effectComposer.scene(),
+                this.effectComposer.camera(),
+                this.blendFunction(),
+                this.patternTexture(),
+                this.edgeStrength(),
+                this.pulseSpeed(),
+                this.visibleEdgeColor(),
+                this.hiddenEdgeColor(),
+                this.width(),
+                this.height(),
+                this.kernelSize(),
+                this.blur(),
+                this.xRay(),
+                untracked(this.restOptions),
+            ];
+            return new OutlineEffect(scene, camera, {
+                blendFunction,
+                patternTexture,
+                edgeStrength,
+                pulseSpeed,
+                visibleEdgeColor,
+                hiddenEdgeColor,
+                width,
+                height,
+                kernelSize,
+                blur,
+                xRay,
+                ...restOptions,
+            });
+        });
+        const autoEffect = injectAutoEffect();
+        afterNextRender(() => {
+            autoEffect(() => {
+                const effect = this.effect();
+                return () => effect.dispose();
+            });
+            autoEffect(() => {
+                const [effect, invalidate, selectionLayer] = [this.effect(), this.invalidate(), this.selectionLayer()];
+                effect.selectionLayer = selectionLayer;
+                invalidate();
+            });
+            autoEffect(() => {
+                // NOTE: we run this effect if declarative NgtSelection is not enabled
+                if (!this.ngtSelection) {
+                    // NOTE: if NgtSelection is not used and selection is not provided, we throw
+                    if (this.selection() === undefined) {
+                        throw new Error('[NGT PostProcessing]: ngtp-outline requires selection input or use NgtSelection');
+                    }
+                    return this.handleSelectionChangeEffect(this.selection, this.effect, this.invalidate);
+                }
+                // NOTE: we run this effect if declarative NgtSelection is enabled
+                const selectionEnabled = this.ngtSelection.enabled();
+                if (!selectionEnabled)
+                    return;
+                return this.handleSelectionChangeEffect(this.ngtSelection.collection, this.effect, this.invalidate);
+            });
+        });
+    }
+    handleSelectionChangeEffect(collection, _effect, _invalidate) {
+        const selection = collection();
+        if (!selection || selection.length === 0)
+            return;
+        const [effect, invalidate] = [_effect(), _invalidate()];
+        const objects = [];
+        for (const el of selection) {
+            const obj = resolveRef(el);
+            if (!obj)
+                continue;
+            objects.push(obj);
+        }
+        if (objects.length === 0)
+            return;
+        effect.selection.set(objects);
+        invalidate();
+        return () => {
+            effect.selection.clear();
+            invalidate();
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: NgtpOutline, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.1.3", type: NgtpOutline, isStandalone: true, selector: "ngtp-outline", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+		<ngt-primitive *args="[effect()]" />
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: NgtpOutline, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngtp-outline',
+                    standalone: true,
+                    template: `
+		<ngt-primitive *args="[effect()]" />
+	`,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgtArgs],
+                }]
+        }], ctorParameters: () => [] });
+
 class NgtpPixelation {
     constructor() {
         this.options = input({ granularity: 5 }, { transform: mergeInputs({ granularity: 5 }) });
@@ -1475,5 +1609,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ASCIIEffect, LensFlareEffect, NgtpASCII, NgtpBloom, NgtpBrightnessContrast, NgtpChromaticAberration, NgtpColorAverage, NgtpColorDepth, NgtpDepth, NgtpDepthOfField, NgtpDotScreen, NgtpEffect, NgtpEffectBlendMode, NgtpEffectComposer, NgtpEffectHostDirective, NgtpFXAA, NgtpGlitch, NgtpGodRays, NgtpGrid, NgtpHueSaturation, NgtpLUT, NgtpLensFlare, NgtpNoise, NgtpPixelation, NgtpSMAA, NgtpScanline, NgtpSepia, NgtpShockWave, NgtpTiltShift, NgtpTiltShift2, NgtpVignette, NgtpWater, TiltShift2Effect, WaterEffect, injectDefaultEffectOptions, provideDefaultEffectOptions };
+export { ASCIIEffect, LensFlareEffect, NgtpASCII, NgtpBloom, NgtpBrightnessContrast, NgtpChromaticAberration, NgtpColorAverage, NgtpColorDepth, NgtpDepth, NgtpDepthOfField, NgtpDotScreen, NgtpEffect, NgtpEffectBlendMode, NgtpEffectComposer, NgtpEffectHostDirective, NgtpFXAA, NgtpGlitch, NgtpGodRays, NgtpGrid, NgtpHueSaturation, NgtpLUT, NgtpLensFlare, NgtpNoise, NgtpOutline, NgtpPixelation, NgtpSMAA, NgtpScanline, NgtpSepia, NgtpShockWave, NgtpTiltShift, NgtpTiltShift2, NgtpVignette, NgtpWater, TiltShift2Effect, WaterEffect, injectDefaultEffectOptions, provideDefaultEffectOptions };
 //# sourceMappingURL=angular-three-postprocessing.mjs.map