@wolsok/thanos 16.0.0 → 17.0.15

package/{index.d.ts → src/index.ts}

@@ -1,6 +1,10 @@
+/*
+ * Public API Surface of ws-thanos
+ */
 export * from './lib/ws-thanos.service';
 export * from './lib/ws-thanos.directive';
 export * from './lib/ws-thanos-options.token';
 export * from './lib/ws-thanos.options';
 export * from './lib/create-ws-thanos-options';
 export * from './lib/simplex-noise';
+export type { AnimationState } from './lib/animation.state';

package/src/lib/animation.state.ts

@@ -0,0 +1,6 @@
+export interface AnimationState {
+  deltaTSec: number;
+  animationT: number;
+  maxWidth: number;
+  maxHeight: number;
+}

package/src/lib/create-ws-thanos-options.ts

@@ -0,0 +1,12 @@
+import { WsThanosOptions } from './ws-thanos.options';
+
+export function createWsThanosOptions(
+  options?: Partial<WsThanosOptions>
+): WsThanosOptions {
+  return {
+    animationLength: 5000,
+    maxParticleCount: 400000,
+    particleAcceleration: 30,
+    ...options,
+  };
+}

package/src/lib/random-util.ts

@@ -0,0 +1,24 @@
+const epsilon = 0.0000000001;
+const two_pi = 2.0 * Math.PI;
+let generate = true;
+let z1: number;
+
+export function gaussian(mu: number, sigma: number): number {
+  if (!generate) {
+    generate = true;
+    return z1 * sigma + mu;
+  }
+
+  let u1 = 0;
+  let u2 = 0;
+  while (u1 <= epsilon) {
+    u1 = Math.random();
+    u2 = Math.random();
+    generate = false;
+  }
+
+  const sqrtLog = Math.sqrt(-2.0 * Math.log(u1));
+  const z0 = sqrtLog * Math.cos(two_pi * u2);
+  z1 = sqrtLog * Math.sin(two_pi * u2);
+  return z0 * sigma + mu;
+}

package/src/lib/simplex-noise-options.ts

@@ -0,0 +1,9 @@
+export interface SimplexNoiseOptions {
+  amplitude: number; // The base amplitude (default: 1.0)
+  frequency: number; // The base frequency (default: 1.0)
+  max: number; // The maximum scaled value to return (effective default: 1.0)
+  min: number; // The minimum scaled value to return (effective default: -1.0)
+  octaves: number; // Integer; the number of octaves to sum for noise generation (default: 1)
+  persistence: number; // The persistence of amplitude per octave (default: 0.5)
+  random: () => number; // A function that generates random values between 0 and 1 (default: Math.random)
+}

package/src/lib/simplex-noise.ts

@@ -0,0 +1,240 @@
+import type { SimplexNoiseOptions } from './simplex-noise-options';
+
+export class SimplexNoise {
+  constructor(options?: Partial<SimplexNoiseOptions>) {
+    const { min, max, random, amplitude, frequency, octaves, persistence } =
+      createOptionsWithDefaults(options);
+
+    this.random = random;
+    this.amplitude = amplitude;
+    this.frequency = frequency;
+    this.octaves = octaves;
+    this.persistence = persistence;
+
+    this.scale =
+      min === -1 && max === 1
+        ? (value) => value
+        : (value) => min + ((value + 1) / 2) * (max - min);
+
+    const p = new Uint8Array(256);
+    for (let i = 0; i < 256; i++) {
+      p[i] = i;
+    }
+
+    let n: number;
+    let q: number;
+    for (let i = 255; i > 0; i--) {
+      n = Math.floor((i + 1) * this.random());
+      q = p[i];
+      p[i] = p[n];
+      p[n] = q;
+    }
+
+    this.perm = new Uint8Array(512);
+    this.permMod12 = new Uint8Array(512);
+    for (let i = 0; i < 512; i++) {
+      this.perm[i] = p[i & 255];
+      this.permMod12[i] = this.perm[i] % 12;
+    }
+  }
+
+  static G3 = 1.0 / 6.0;
+
+  static GRAD3D = [
+    [1, 1, 0],
+    [-1, 1, 0],
+    [1, -1, 0],
+    [-1, -1, 0],
+    [1, 0, 1],
+    [-1, 0, 1],
+    [1, 0, -1],
+    [-1, 0, -1],
+    [0, 1, 1],
+    [0, -1, -1],
+    [0, 1, -1],
+    [0, -1, -1],
+  ];
+
+  readonly amplitude: number;
+  readonly frequency: number;
+  readonly octaves: number;
+  readonly perm: Uint8Array;
+  readonly permMod12: Uint8Array;
+  readonly persistence: number;
+  readonly random: () => number;
+  readonly scale: (value: number) => number;
+  private memScale3D: { [key: string]: number } = {};
+
+  dot(gs: number[], coords: number[]): number {
+    return gs
+      .slice(0, Math.min(gs.length, coords.length))
+      .reduce((total, g, i) => total + g * coords[i], 0);
+  }
+
+  raw3D(x: number, y: number, z: number): number {
+    // Skew the input space to determine which simplex cell we're in
+    const s = (x + y + z) / 3.0; // Very nice and simple skew factor for 3D
+    const i = Math.floor(x + s);
+    const j = Math.floor(y + s);
+    const k = Math.floor(z + s);
+    const t = (i + j + k) * SimplexNoise.G3;
+    const X0 = i - t; // Unskew the cell origin back to (x,y,z) space
+    const Y0 = j - t;
+    const Z0 = k - t;
+    const x0 = x - X0; // The x,y,z distances from the cell origin
+    const y0 = y - Y0;
+    const z0 = z - Z0;
+
+    // Determine which simplex we are in
+    let i1: number, j1: number, k1: number; // Offsets for second corner of simplex in (i,j,k) coords
+    let i2: number, j2: number, k2: number; // Offsets for third corner of simplex in (i,j,k) coords
+    if (x0 >= y0) {
+      if (y0 >= z0) {
+        i1 = i2 = j2 = 1;
+        j1 = k1 = k2 = 0;
+      } else if (x0 >= z0) {
+        i1 = i2 = k2 = 1;
+        j1 = k1 = j2 = 0;
+      } else {
+        k1 = i2 = k2 = 1;
+        i1 = j1 = j2 = 0;
+      }
+    } else {
+      if (y0 < z0) {
+        k1 = j2 = k2 = 1;
+        i1 = j1 = i2 = 0;
+      } else if (x0 < z0) {
+        j1 = j2 = k2 = 1;
+        i1 = k1 = i2 = 0;
+      } else {
+        j1 = i2 = j2 = 1;
+        i1 = k1 = k2 = 0;
+      }
+    }
+
+    const x1 = x0 - i1 + SimplexNoise.G3; // Offsets for second corner in (x,y,z) coords
+    const y1 = y0 - j1 + SimplexNoise.G3;
+    const z1 = z0 - k1 + SimplexNoise.G3;
+    const x2 = x0 - i2 + 2.0 * SimplexNoise.G3; // Offsets for third corner in (x,y,z) coords
+    const y2 = y0 - j2 + 2.0 * SimplexNoise.G3;
+    const z2 = z0 - k2 + 2.0 * SimplexNoise.G3;
+    const x3 = x0 - 1.0 + 3.0 * SimplexNoise.G3; // Offsets for last corner in (x,y,z) coords
+    const y3 = y0 - 1.0 + 3.0 * SimplexNoise.G3;
+    const z3 = z0 - 1.0 + 3.0 * SimplexNoise.G3;
+
+    // Work out the hashed gradient indices of the four simplex corners
+    const ii = i & 255;
+    const jj = j & 255;
+    const kk = k & 255;
+    const gi0 = this.permMod12[ii + this.perm[jj + this.perm[kk]]];
+    const gi1 =
+      this.permMod12[ii + i1 + this.perm[jj + j1 + this.perm[kk + k1]]];
+    const gi2 =
+      this.permMod12[ii + i2 + this.perm[jj + j2 + this.perm[kk + k2]]];
+    const gi3 = this.permMod12[ii + 1 + this.perm[jj + 1 + this.perm[kk + 1]]];
+
+    // Calculate the contribution from the four corners
+    const t0 = 0.5 - x0 * x0 - y0 * y0 - z0 * z0;
+    const n0 =
+      t0 < 0
+        ? 0.0
+        : Math.pow(t0, 4) * this.dot(SimplexNoise.GRAD3D[gi0], [x0, y0, z0]);
+    const t1 = 0.5 - x1 * x1 - y1 * y1 - z1 * z1;
+    const n1 =
+      t1 < 0
+        ? 0.0
+        : Math.pow(t1, 4) * this.dot(SimplexNoise.GRAD3D[gi1], [x1, y1, z1]);
+    const t2 = 0.5 - x2 * x2 - y2 * y2 - z2 * z2;
+    const n2 =
+      t2 < 0
+        ? 0.0
+        : Math.pow(t2, 4) * this.dot(SimplexNoise.GRAD3D[gi2], [x2, y2, z2]);
+    const t3 = 0.5 - x3 * x3 - y3 * y3 - z3 * z3;
+    const n3 =
+      t3 < 0
+        ? 0.0
+        : Math.pow(t3, 4) * this.dot(SimplexNoise.GRAD3D[gi3], [x3, y3, z3]);
+
+    // Add contributions from each corner to get the final noise value.
+    // The result is scaled to stay just inside [-1,1]
+    return 94.68493150681972 * (n0 + n1 + n2 + n3);
+  }
+
+  scaled3D(x: number, y: number, z: number, resolution: number): number {
+    const memIndex = `${Math.round(x * resolution)}${Math.round(
+      y * resolution
+    )}${Math.round(z * resolution)}`;
+    const memElem = this.memScale3D[memIndex];
+    if (memElem != null) {
+      return memElem;
+    }
+
+    let amplitude = this.amplitude;
+    let frequency = this.frequency;
+    let maxAmplitude = 0;
+    let noise = 0;
+
+    for (let i = 0; i < this.octaves; i++) {
+      noise +=
+        this.raw3D(x * frequency, y * frequency, z * frequency) * amplitude;
+      maxAmplitude += amplitude;
+      amplitude *= this.persistence;
+      frequency *= 2;
+    }
+    const result = this.scale(noise / maxAmplitude);
+    this.memScale3D[memIndex] = result;
+    return result;
+  }
+}
+
+function createOptionsWithDefaults(options?: Partial<SimplexNoiseOptions>) {
+  if (options != null) {
+    if (options['amplitude'] && typeof options.amplitude !== 'number') {
+      throw new Error('options.amplitude must be a number');
+    }
+
+    if (options['frequency'] && typeof options.frequency !== 'number') {
+      throw new Error('options.frequency must be a number');
+    }
+
+    if (
+      options['octaves'] &&
+      (typeof options.octaves !== 'number' ||
+        !isFinite(options.octaves) ||
+        Math.floor(options.octaves) !== options.octaves)
+    ) {
+      throw new Error('options.octaves must be an integer');
+    }
+
+    if (options['persistence'] && typeof options.persistence !== 'number') {
+      throw new Error('options.persistence must be a number');
+    }
+
+    if (options['random'] && typeof options.random !== 'function') {
+      throw new Error('options.random must be a function');
+    }
+
+    if (options['min'] && typeof options.min !== 'number') {
+      throw new Error('options.min must be a number');
+    }
+
+    if (options['max'] && typeof options.max !== 'number') {
+      throw new Error('options.max must be a number');
+    }
+  }
+
+  const optionsResult = {
+    amplitude: 1.0,
+    frequency: 1.0,
+    max: 1.0,
+    min: -1.0,
+    octaves: 1,
+    persistence: 0.5,
+    random: Math.random,
+    ...options,
+  };
+  if (optionsResult.min > optionsResult.max) {
+    throw new Error('min must be smaller max');
+  }
+  return optionsResult;
+}

package/src/lib/ws-thanos-options.token.spec.ts

@@ -0,0 +1,19 @@
+import { TestBed } from '@angular/core/testing';
+import {
+  provideWsThanosOptions,
+  WS_THANOS_OPTIONS_TOKEN,
+} from './ws-thanos-options.token';
+
+describe('WsThanosOptions', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      providers: [provideWsThanosOptions({ maxParticleCount: 12345 })],
+    });
+  });
+
+  it('should override default options', () => {
+    expect(TestBed.inject(WS_THANOS_OPTIONS_TOKEN).maxParticleCount).toEqual(
+      12345
+    );
+  });
+});

package/src/lib/ws-thanos-options.token.ts

@@ -0,0 +1,20 @@
+import { InjectionToken, Provider } from '@angular/core';
+import { createWsThanosOptions } from './create-ws-thanos-options';
+import type { WsThanosOptions } from './ws-thanos.options';
+
+export const WS_THANOS_OPTIONS_TOKEN = new InjectionToken<WsThanosOptions>(
+  'thanosOptions',
+  {
+    providedIn: 'root',
+    factory: () => createWsThanosOptions(),
+  }
+);
+
+export function provideWsThanosOptions(
+  options?: Partial<WsThanosOptions>
+): Provider {
+  return {
+    provide: WS_THANOS_OPTIONS_TOKEN,
+    useValue: createWsThanosOptions(options),
+  };
+}

package/src/lib/ws-thanos.directive.spec.ts

@@ -0,0 +1,175 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  QueryList,
+  ViewChildren,
+} from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { combineLatest, firstValueFrom, of } from 'rxjs';
+import image from '../assets/how-to-be-funny.png';
+import { AnimationState } from './animation.state';
+import { provideWsThanosOptions } from './ws-thanos-options.token';
+import { WsThanosDirective } from './ws-thanos.directive';
+import { WsThanosService } from './ws-thanos.service';
+
+describe('Integration Test: WsThanosDirective', () => {
+  @Component({
+    template: `
+      <div
+        class="thanos-test-container"
+        wsThanos
+        (wsThanosComplete)="completed()"
+      >
+        <h1>My content for the div</h1>
+        <img alt="funny-face" style="height: 400px" src="${image}" />
+      </div>
+      <div class="grid-test">
+        <ws-thanos class="div-without-remove" #myThanos="thanos">
+          This div should be vaporized when clicked on button and then become
+          visible again!
+          <div class="inner">Inner container</div>
+        </ws-thanos>
+        <button (click)="myThanos.vaporize(false)">Vaporize div above</button>
+      </div>
+    `,
+    styles: [
+      `
+        * {
+          box-sizing: border-box;
+        }
+
+        .div-without-remove {
+          display: grid;
+          grid-template-rows: 1fr 1fr 1fr;
+          grid-template-columns: 1fr 1fr 1fr;
+          place-content: center;
+          padding: 50px;
+          border: 10px solid darkorange;
+          border-radius: 30px;
+          height: 300px;
+          background-image: linear-gradient(to right, #cbe7e1, #00ae85);
+        }
+
+        .inner {
+          border-radius: 50%;
+          grid-column: 2;
+          grid-row: 1;
+          background-image: linear-gradient(to right, azure, darkorchid);
+          text-align: center;
+          padding-top: 1rem;
+        }
+
+        .grid-test {
+          display: grid;
+          grid-template-columns: 1fr;
+          grid-template-rows: 1fr auto;
+        }
+
+        .thanos-test-container {
+          padding: 14px;
+        }
+      `,
+    ],
+    imports: [WsThanosDirective],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+  })
+  class HostComponent {
+    wsThanosDirective!: WsThanosDirective;
+
+    @ViewChildren(WsThanosDirective)
+    set thanos(thanos: QueryList<WsThanosDirective>) {
+      this.wsThanosDirective = thanos.first;
+    }
+
+    startThanos() {
+      return this.wsThanosDirective.vaporize().subscribe();
+    }
+
+    completed() {
+      console.log('Completed');
+    }
+  }
+
+  let directive: WsThanosDirective;
+  let hostFixture: ComponentFixture<HostComponent>;
+  let hostComp: HostComponent;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [WsThanosDirective, HostComponent],
+      providers: [
+        provideWsThanosOptions({
+          maxParticleCount: 500,
+          animationLength: 1000,
+        }),
+      ],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    hostFixture = TestBed.createComponent(HostComponent);
+    hostComp = hostFixture.componentInstance;
+    hostFixture.detectChanges();
+    directive = hostComp.wsThanosDirective;
+  });
+
+  it('should create', () => {
+    expect(directive).toBeTruthy();
+  });
+
+  describe('vaporize()', () => {
+    it('should call thanosService.vaporize', () => {
+      givenStubbedThanosService_VaporizeReturns();
+      whenVaporizeIsCalled();
+      thenThanosServiceVaporizeWasCalled();
+    });
+
+    it('should emit animationState', (done) => {
+      const animationState: AnimationState = {
+        animationT: 0,
+        deltaTSec: 0,
+        maxHeight: 0,
+        maxWidth: 0,
+      };
+      givenStubbedThanosService_VaporizeReturns(of(animationState));
+      directive.vaporize$(false).subscribe({
+        next: (result) => {
+          expect(result).toEqual(animationState);
+          done();
+        },
+      });
+    });
+
+    // SKIPPED: This test requires real browser features (html2canvas, canvas rendering, getComputedStyle)
+    // that are not properly simulated in jsdom. See E2E tests in apps/ws-thanos-test-app instead.
+    it.skip('should emit complete when vaporize is complete', (done) => {
+      combineLatest([
+        firstValueFrom(directive.wsThanosComplete),
+        directive.vaporize$(),
+      ]).subscribe({
+        complete: done,
+      });
+    }, 10000);
+  });
+
+  function givenStubbedThanosService_VaporizeReturns(
+    vaporizeReturns: ReturnType<WsThanosService['vaporize']> = of(
+      {} as AnimationState
+    )
+  ): void {
+    const thanosService = getWsThanosService();
+    jest.spyOn(thanosService, 'vaporize').mockReturnValue(vaporizeReturns);
+  }
+
+  function getWsThanosService(): WsThanosService {
+    return TestBed.inject(WsThanosService);
+  }
+
+  function thenThanosServiceVaporizeWasCalled() {
+    expect(getWsThanosService().vaporize).toHaveBeenCalled();
+  }
+
+  function whenVaporizeIsCalled(): void {
+    directive.vaporize$(false).subscribe();
+  }
+});

package/src/lib/ws-thanos.directive.ts

@@ -0,0 +1,70 @@
+import { Directive, ElementRef, Output, inject } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { finalize, Observable, Subject, Subscription, take, tap } from 'rxjs';
+import { AnimationState } from './animation.state';
+import { WS_THANOS_OPTIONS_TOKEN } from './ws-thanos-options.token';
+import type { WsThanosOptions } from './ws-thanos.options';
+import { WsThanosService } from './ws-thanos.service';
+
+@Directive({
+  selector: '[wsThanos], ws-thanos',
+  exportAs: 'thanos',
+})
+export class WsThanosDirective {
+  private wsThanosCompleteSubject = new Subject<void>();
+  private untilDestroyed = takeUntilDestroyed();
+
+  @Output()
+  public wsThanosComplete: Observable<void> =
+    this.wsThanosCompleteSubject.asObservable();
+  private subscriptions: Subscription = new Subscription();
+
+  private readonly vaporizeDomElem: ElementRef<HTMLElement> =
+    inject(ElementRef);
+  private readonly thanosService: WsThanosService = inject(WsThanosService);
+  private readonly thanosOptions: WsThanosOptions = inject(
+    WS_THANOS_OPTIONS_TOKEN
+  );
+
+  /**
+   *
+   * Vaporize the dom element of this directive
+   * @param removeElem remove the vaporized dom element or blend back in after a while
+   *
+   * Subscribe to the returned observable to start vaporization
+   *
+   */
+  public vaporize$(removeElem = true): Observable<AnimationState> {
+    const elem = this.vaporizeDomElem.nativeElement;
+    return this.thanosService.vaporize(elem).pipe(
+      tap({
+        error: (error) => {
+          console.error('Error vaporizing', error, {
+            elemTovaporize: elem,
+            removeElem,
+          });
+        },
+      }),
+      finalize(() => {
+        if (removeElem) {
+          elem.remove();
+        } else {
+          // make visible again
+          elem.style.transition = 'opacity 700ms';
+          elem.style.opacity = '1';
+        }
+        this.wsThanosCompleteSubject.next();
+      })
+    );
+  }
+
+  /**
+   * Vaporize the dom element of this directive
+   * @param removeElem remove the vaporized dom element or blend back in after a while
+   *
+   */
+  public vaporize(removeElem = true): Observable<void> {
+    this.vaporize$(removeElem).pipe(this.untilDestroyed).subscribe();
+    return this.wsThanosComplete.pipe(take(1));
+  }
+}

package/src/lib/ws-thanos.options.ts

@@ -0,0 +1,5 @@
+export interface WsThanosOptions {
+  animationLength: number;
+  maxParticleCount: number;
+  particleAcceleration: number;
+}

package/src/lib/ws-thanos.service.spec.ts

@@ -0,0 +1,9 @@
+import { TestBed } from '@angular/core/testing';
+import { WsThanosService } from './ws-thanos.service';
+
+describe('WsThanosService', () => {
+  it('should be created', () => {
+    const service: WsThanosService = TestBed.inject(WsThanosService);
+    expect(service).toBeTruthy();
+  });
+});