@wolsok/thanos 17.0.16 → 17.0.18

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

@@ -1,387 +0,0 @@
-import { Injectable, inject } from '@angular/core';
-
-import { default as html2canvas } from 'html2canvas';
-import {
-  animationFrameScheduler,
-  finalize,
-  from,
-  interval,
-  map,
-  Observable,
-  switchMap,
-  takeWhile,
-  tap,
-  timeInterval,
-} from 'rxjs';
-import { AnimationState } from './animation.state';
-import { SimplexNoise } from './simplex-noise';
-import { WS_THANOS_OPTIONS_TOKEN } from './ws-thanos-options.token';
-import type { WsThanosOptions } from './ws-thanos.options';
-
-const PARTICLE_BYTE_LENGTH = 10;
-const MIN_PARTICLE_ALPHA = ~~(255 * 0.01);
-const HEIGHT_SCALE = 5;
-const WIDTH_SCALE = 2;
-const FLOW_FIELD_RES = 0.05;
-
-interface ParticlesData {
-  particles: Float32Array;
-  maxParticleX: number;
-  minParticleY: number;
-}
-
-interface UpdateParticleParams {
-  particlesData: ParticlesData;
-  animationState: AnimationState;
-  thanosOptions: WsThanosOptions;
-  noise: SimplexNoise;
-  seed: number;
-}
-
-interface ParticleIndices {
-  x: number;
-  y: number;
-  dx: number;
-  dy: number;
-  ax: number;
-  ay: number;
-  r: number;
-  g: number;
-  b: number;
-  a: number;
-}
-
-@Injectable({ providedIn: 'root' })
-export class WsThanosService {
-  private readonly thanosOptions: WsThanosOptions = inject(
-    WS_THANOS_OPTIONS_TOKEN
-  );
-
-  private static getParticleIndicesForBase(base: number): ParticleIndices {
-    return {
-      x: base,
-      y: base + 1,
-      dx: base + 2,
-      dy: base + 3,
-      ax: base + 4,
-      ay: base + 5,
-      r: base + 6,
-      g: base + 7,
-      b: base + 8,
-      a: base + 9,
-    };
-  }
-
-  private static getColorIndicesForCoord(
-    x: number,
-    y: number,
-    width: number
-  ): { a: number; r: number; b: number; g: number } {
-    const red = y * (width * 4) + x * 4;
-    return { r: red, g: red + 1, b: red + 2, a: red + 3 };
-  }
-
-  private static updateParticles({
-    seed,
-    noise,
-    particlesData,
-    thanosOptions,
-    animationState,
-  }: UpdateParticleParams): void {
-    const { deltaTSec, animationT, maxWidth, maxHeight } = animationState;
-    const { particleAcceleration } = thanosOptions;
-    const { particles, maxParticleX, minParticleY } = particlesData;
-
-    // the time is used to calculate the vaporization front.
-    const time = Math.sin(animationT * (Math.PI / 2)) * 1.1;
-
-    const startAccelerateX = maxParticleX - time * maxParticleX;
-    const startAccelerateY = time * (maxHeight - minParticleY) + minParticleY;
-
-    const lengthY = maxHeight - startAccelerateY;
-    const accelerateRadiusPow =
-      startAccelerateX * startAccelerateX + lengthY * lengthY;
-
-    for (let i = 0; i < particles.length; i += PARTICLE_BYTE_LENGTH) {
-      const { x, y, dx, dy, ax, ay, a } =
-        WsThanosService.getParticleIndicesForBase(i);
-      const particleX = particles[x];
-      const particleY = particles[y];
-
-      // only update particles that are inside view and visible
-      if (
-        particleX > maxWidth ||
-        particleX < 0 ||
-        particleY > maxHeight ||
-        particleY < 0 ||
-        particles[a] < MIN_PARTICLE_ALPHA
-      ) {
-        continue;
-      }
-
-      if (!(Math.abs(particles[ax]) > 0 || Math.abs(particles[ay]) > 0)) {
-        let pYLength = maxHeight - particleY;
-        let pXLength = particleX;
-
-        // we calculate some random looking numbers and functions to have nice looking vaporizing front of particles
-        // todo consider to use noise;
-        pXLength += Math.tan((pXLength / 20.12) * time + seed) * 0.5;
-        pXLength += (particleX % deltaTSec) * 0.5;
-        pXLength +=
-          Math.sin((pXLength / 30 + 723.394) * time + seed * 12.5) * 11;
-        pYLength += Math.tan((pYLength / 0.45) * time + seed * 1.5) * 0.5;
-        pYLength +=
-          Math.cos((pYLength / 100 + 2323.234) * time + seed * 456.1) * 23;
-
-        const pLength = pXLength * pXLength + pYLength * pYLength;
-        if (pLength > accelerateRadiusPow) {
-          particles[ax] = Math.random();
-          particles[ay] = Math.random() * -1;
-        }
-      } else {
-        // use noise to flow along velocity field
-        const flowFieldAcc = WsThanosService.getXYFromFlowField(
-          noise,
-          seed,
-          particleX,
-          particleY
-        );
-        const accelerationX = flowFieldAcc[0];
-        const accelerationY = flowFieldAcc[1];
-        particles[ax] += accelerationX;
-        particles[ay] += accelerationY;
-      }
-
-      // * Math.pow(1 + animationT, 4)
-      particles[dx] += particles[ax] * particleAcceleration * deltaTSec;
-      particles[dy] += particles[ay] * particleAcceleration * deltaTSec;
-      particles[x] += particles[dx] * deltaTSec;
-      particles[y] += particles[dy] * deltaTSec;
-      // fade particle out ( very late);
-      particles[a] *= 1 - Math.pow(animationT, 15); // 255 - Math.sqrt(particles[dx] * particles[dx] + particles[dy] * particles[dy]) / 1.2;
-    }
-  }
-
-  private static drawParticles(
-    drawCtx: CanvasRenderingContext2D,
-    particles: Float32Array
-  ): void {
-    const { width, height } = drawCtx.canvas;
-    drawCtx.clearRect(0, 0, width, height);
-    const image = drawCtx.getImageData(0, 0, width, height);
-    const imageData = image.data;
-    for (let i = 0; i < particles.length; i += PARTICLE_BYTE_LENGTH) {
-      const particleX = particles[i];
-      const particleY = particles[i + 1];
-      const pI = WsThanosService.getParticleIndicesForBase(i);
-      if (
-        particleX > width ||
-        particleX < 0 ||
-        particleY > height ||
-        particleY < 0 ||
-        particles[pI.a] < MIN_PARTICLE_ALPHA
-      ) {
-        continue;
-      }
-      const { r, g, b, a } = WsThanosService.getColorIndicesForCoord(
-        ~~particles[pI.x],
-        ~~particles[pI.y],
-        width
-      );
-      imageData[r] = ~~particles[pI.r];
-      imageData[g] = ~~particles[pI.g];
-      imageData[b] = ~~particles[pI.b];
-      imageData[a] = ~~particles[pI.a];
-    }
-    drawCtx.putImageData(image, 0, 0);
-  }
-
-  private static prepareCanvasForVaporize(
-    divCanvas: HTMLCanvasElement,
-    maxParticleCount: number
-  ): {
-    particlesData: ParticlesData;
-    resultCanvas: HTMLCanvasElement;
-  } {
-    const { width, height } = divCanvas;
-
-    // scale result canvas to have more room to draw particles while vaporizing;
-    const resultHeight = height * HEIGHT_SCALE;
-    const resultWidth = width * WIDTH_SCALE;
-    const resultCanvas: HTMLCanvasElement = document.createElement('canvas');
-    resultCanvas.height = resultHeight;
-    resultCanvas.width = resultWidth;
-
-    const imageData = divCanvas
-      .getContext('2d', { willReadFrequently: true })
-      ?.getImageData(0, 0, width, height);
-    if (imageData == null) {
-      throw new Error('Could not get image data from canvas');
-    }
-    const particlesData = WsThanosService.createParticlesForImageData(
-      imageData,
-      maxParticleCount,
-      resultHeight
-    );
-    return { resultCanvas, particlesData };
-  }
-
-  private static createParticlesForImageData(
-    imageData: ImageData,
-    maxParticleCount: number,
-    resultHeight: number
-  ): { minParticleY: number; maxParticleX: number; particles: Float32Array } {
-    const { width, height } = imageData;
-    let particleCandidates = 0;
-    let particleCount = 0;
-
-    const particleCandiatesList: { x: number; y: number }[] = [];
-    for (let y = 0; y < height; y++) {
-      for (let x = 0; x < width; x++) {
-        const { a } = WsThanosService.getColorIndicesForCoord(x, y, width);
-        if (imageData.data[a] >= MIN_PARTICLE_ALPHA) {
-          particleCandidates++;
-          particleCandiatesList.push({ x, y });
-        }
-      }
-    }
-
-    const maxNumParticles = Math.min(particleCandidates, maxParticleCount);
-    const particles = new Float32Array(
-      Float32Array.BYTES_PER_ELEMENT * maxNumParticles * PARTICLE_BYTE_LENGTH
-    );
-
-    let maxParticleX = 0;
-    let minParticleY = resultHeight;
-    while (particleCount < maxNumParticles) {
-      // select random index from candiates
-      const index = ~~(Math.random() * particleCandiatesList.length);
-      const { x, y } = particleCandiatesList[index];
-
-      // overwrite index with last element to prevent double selection of particles
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      particleCandiatesList[index] = particleCandiatesList.pop()!;
-
-      maxParticleX = Math.max(maxParticleX, x);
-      minParticleY = Math.min(minParticleY, y);
-      const { dx, dy, ax, ay, r, g, b, a, ...xy } =
-        WsThanosService.getParticleIndicesForBase(
-          particleCount * PARTICLE_BYTE_LENGTH
-        );
-      particles[xy.x] = x;
-      particles[xy.y] = y + resultHeight - height;
-      particles[dx] = 0;
-      particles[dy] = 0;
-      particles[ax] = 0;
-      particles[ay] = 0;
-
-      const indicesImage = WsThanosService.getColorIndicesForCoord(x, y, width);
-
-      particles[r] = imageData.data[indicesImage.r];
-      particles[g] = imageData.data[indicesImage.g];
-      particles[b] = imageData.data[indicesImage.b];
-      particles[a] = imageData.data[indicesImage.a];
-      particleCount++;
-    }
-    return { particles, maxParticleX, minParticleY };
-  }
-
-  private static getXYFromFlowField(
-    noise: SimplexNoise,
-    seed: number,
-    x: number,
-    y: number
-  ) {
-    const sampleX = noise.scaled3D(x, y, seed + 33.23, FLOW_FIELD_RES);
-    const sampleY = noise.scaled3D(x, seed / 13.23, y, FLOW_FIELD_RES) * -1;
-    return [sampleX, sampleY];
-  }
-
-  /**
-   * start the vaporize-effect.
-   */
-  vaporize(elem: HTMLElement): Observable<AnimationState> {
-    return this.vaporizeIntern(elem);
-  }
-
-  private vaporizeIntern(elem: HTMLElement): Observable<AnimationState> {
-    elem.style.opacity = elem.style.opacity || '1';
-    elem.style.transition = `opacity ${Math.floor(
-      this.thanosOptions.animationLength * 0.8
-    )}ms ease-out`;
-    const noise = new SimplexNoise({ frequency: 0.01, min: 0 });
-    const seed = new Date().getTime() * Math.random();
-    const html2CanvasPromise: Promise<HTMLCanvasElement> = html2canvas(elem, {
-      backgroundColor: null,
-      scale: 1,
-      allowTaint: true,
-      windowHeight: window.innerHeight,
-      windowWidth: window.innerWidth,
-      scrollY: -window.scrollY,
-    });
-
-    return from(html2CanvasPromise).pipe(
-      map((canvasFromHtmlElem) => {
-        const canvasAndParticles = WsThanosService.prepareCanvasForVaporize(
-          canvasFromHtmlElem,
-          this.thanosOptions.maxParticleCount
-        );
-        const { resultCanvas } = canvasAndParticles;
-        if (elem.parentElement) {
-          elem.parentElement.style.position =
-            elem.parentElement.style.position || 'relative';
-        }
-        resultCanvas.style.position = 'absolute';
-        resultCanvas.style.left = 0 + 'px';
-        resultCanvas.style.top =
-          '-' + elem.getBoundingClientRect().height * (HEIGHT_SCALE - 1) + 'px';
-        resultCanvas.style.zIndex = '2000';
-        resultCanvas.style.pointerEvents = 'none';
-
-        elem.insertAdjacentElement('beforebegin', resultCanvas);
-        // this should start the transition above defined
-        elem.style.opacity = '0';
-        return canvasAndParticles;
-      }),
-      switchMap(({ resultCanvas, particlesData }) => {
-        let time = 0;
-        const { animationLength, maxParticleCount, particleAcceleration } =
-          this.thanosOptions;
-        return interval(1000 / 60, animationFrameScheduler).pipe(
-          timeInterval(),
-          tap((deltaT) => (time += deltaT.interval)),
-          map(
-            (deltaT) =>
-              ({
-                deltaTSec: deltaT.interval / 1000,
-                animationT: time / animationLength,
-                maxWidth: resultCanvas.width,
-                maxHeight: resultCanvas.height,
-              }) as AnimationState
-          ),
-          tap((animationState) => {
-            WsThanosService.updateParticles({
-              particlesData,
-              animationState,
-              thanosOptions: {
-                animationLength,
-                maxParticleCount,
-                particleAcceleration,
-              },
-              noise,
-              seed,
-            });
-            const context = resultCanvas.getContext('2d', {
-              willReadFrequently: true,
-            });
-            if (context) {
-              WsThanosService.drawParticles(context, particlesData.particles);
-            }
-          }),
-          takeWhile((animationState) => animationState.animationT <= 1),
-          finalize(() => resultCanvas.remove())
-        );
-      })
-    );
-  }
-}

package/src/test-setup.ts

@@ -1,9 +0,0 @@
-import { setupZonelessTestEnv } from 'jest-preset-angular/setup-env/zoneless';
-
-setupZonelessTestEnv();
-
-import { ReadableStream } from 'web-streams-polyfill/polyfill';
-
-if (typeof globalThis.ReadableStream === 'undefined') {
-  globalThis.ReadableStream = ReadableStream as never;
-}

package/tsconfig.json

@@ -1,32 +0,0 @@
-{
-  "extends": "../../../tsconfig.base.json",
-  "files": [],
-  "include": [],
-  "references": [
-    {
-      "path": "./tsconfig.lib.json"
-    },
-    {
-      "path": "./tsconfig.lib.prod.json"
-    },
-    {
-      "path": "./tsconfig.spec.json"
-    },
-    {
-      "path": "./tsconfig.spec.json"
-    }
-  ],
-  "compilerOptions": {
-    "forceConsistentCasingInFileNames": true,
-    "strict": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    "target": "ES2022"
-  },
-  "angularCompilerOptions": {
-    "enableIvy": true,
-    "strictInjectionParameters": true,
-    "strictInputAccessModifiers": true,
-    "strictTemplates": true
-  }
-}

package/tsconfig.lib.json

@@ -1,15 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../../dist/out-tsc",
-    "target": "ES2022",
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSources": true,
-    "types": [],
-    "lib": ["dom", "es2018"],
-    "moduleResolution": "bundler"
-  },
-  "exclude": ["src/test-setup.ts", "**/*.spec.ts", "**/*.test.ts"],
-  "include": ["**/*.ts"]
-}

package/tsconfig.lib.prod.json

@@ -1,10 +0,0 @@
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "declarationMap": false,
-    "moduleResolution": "bundler"
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial"
-  }
-}

package/tsconfig.spec.json

@@ -1,10 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../../dist/out-tsc",
-    "types": ["jest", "node"],
-    "module": "commonjs"
-  },
-  "files": ["src/test-setup.ts"],
-  "include": ["**/*.spec.ts", "**/*.test.ts", "**/*.d.ts"]
-}