@tsparticles/engine 4.0.0-alpha.8 → 4.0.0-beta.0

package/cjs/Core/Utils/SpatialHashGrid.js

@@ -0,0 +1,102 @@
+import { Circle, Rectangle } from "./Ranges.js";
+export class SpatialHashGrid {
+    _cellSize;
+    _cells = new Map();
+    _circlePool = [];
+    _circlePoolIdx;
+    _pendingCellSize;
+    _rectanglePool = [];
+    _rectanglePoolIdx;
+    constructor(cellSize) {
+        this._cellSize = cellSize;
+        this._circlePoolIdx = 0;
+        this._rectanglePoolIdx = 0;
+    }
+    clear() {
+        this._cells.clear();
+        const pendingCellSize = this._pendingCellSize;
+        if (pendingCellSize) {
+            this._cellSize = pendingCellSize;
+        }
+        this._pendingCellSize = undefined;
+    }
+    insert(particle) {
+        const { x, y } = particle.getPosition(), key = this._cellKeyFromCoords(x, y);
+        if (!this._cells.has(key)) {
+            this._cells.set(key, []);
+        }
+        this._cells.get(key)?.push(particle);
+    }
+    query(range, check, out = []) {
+        const bounds = this._getRangeBounds(range);
+        if (!bounds) {
+            return out;
+        }
+        const minCellX = Math.floor(bounds.minX / this._cellSize), maxCellX = Math.floor(bounds.maxX / this._cellSize), minCellY = Math.floor(bounds.minY / this._cellSize), maxCellY = Math.floor(bounds.maxY / this._cellSize);
+        for (let cx = minCellX; cx <= maxCellX; cx++) {
+            for (let cy = minCellY; cy <= maxCellY; cy++) {
+                const key = `${cx}_${cy}`, cellParticles = this._cells.get(key);
+                if (!cellParticles) {
+                    continue;
+                }
+                for (const p of cellParticles) {
+                    if (check && !check(p)) {
+                        continue;
+                    }
+                    if (range.contains(p.getPosition())) {
+                        out.push(p);
+                    }
+                }
+            }
+        }
+        return out;
+    }
+    queryCircle(position, radius, check, out = []) {
+        const circle = this._acquireCircle(position.x, position.y, radius), result = this.query(circle, check, out);
+        this._releaseShapes();
+        return result;
+    }
+    queryRectangle(position, size, check, out = []) {
+        const rect = this._acquireRectangle(position.x, position.y, size.width, size.height), result = this.query(rect, check, out);
+        this._releaseShapes();
+        return result;
+    }
+    setCellSize(cellSize) {
+        this._pendingCellSize = cellSize;
+    }
+    _acquireCircle(x, y, r) {
+        return (this._circlePool[this._circlePoolIdx++] ??= new Circle(x, y, r)).reset(x, y, r);
+    }
+    _acquireRectangle(x, y, w, h) {
+        return (this._rectanglePool[this._rectanglePoolIdx++] ??= new Rectangle(x, y, w, h)).reset(x, y, w, h);
+    }
+    _cellKeyFromCoords(x, y) {
+        const cellX = Math.floor(x / this._cellSize), cellY = Math.floor(y / this._cellSize);
+        return `${cellX}_${cellY}`;
+    }
+    _getRangeBounds(range) {
+        if (range instanceof Circle) {
+            const r = range.radius, { x, y } = range.position;
+            return {
+                minX: x - r,
+                maxX: x + r,
+                minY: y - r,
+                maxY: y + r,
+            };
+        }
+        if (range instanceof Rectangle) {
+            const { x, y } = range.position, { width, height } = range.size;
+            return {
+                minX: x,
+                maxX: x + width,
+                minY: y,
+                maxY: y + height,
+            };
+        }
+        return null;
+    }
+    _releaseShapes() {
+        this._circlePoolIdx = 0;
+        this._rectanglePoolIdx = 0;
+    }
+}

package/cjs/Core/Utils/Vectors.js

@@ -1,10 +1,12 @@
 import { inverseFactorNumerator, none, originPoint, squareExp } from "./Constants.js";
+function getZ(source) {
+    return "z" in source ? source.z : originPoint.z;
+}
 export class Vector3d {
+    x;
+    y;
+    z;
     constructor(x = originPoint.x, y = originPoint.y, z = originPoint.z) {
-        this._updateFromAngle = (angle, length) => {
-            this.x = Math.cos(angle) * length;
-            this.y = Math.sin(angle) * length;
-        };
         this.x = x;
         this.y = y;
         this.z = z;
@@ -25,31 +27,25 @@ export class Vector3d {
         this._updateFromAngle(this.angle, length);
     }
     static clone(source) {
-        return Vector3d.create(source.x, source.y, source.z);
+        return Vector3d.create(source.x, source.y, getZ(source));
     }
     static create(x, y, z) {
         if (typeof x === "number") {
             return new Vector3d(x, y ?? originPoint.y, z ?? originPoint.z);
         }
-        return new Vector3d(x.x, x.y, Object.hasOwn(x, "z") ? x.z : originPoint.z);
+        return new Vector3d(x.x, x.y, getZ(x));
     }
     add(v) {
-        return Vector3d.create(this.x + v.x, this.y + v.y, this.z + v.z);
+        return Vector3d.create(this.x + v.x, this.y + v.y, this.z + getZ(v));
     }
     addTo(v) {
         this.x += v.x;
         this.y += v.y;
-        this.z += v.z;
+        this.z += getZ(v);
     }
     copy() {
         return Vector3d.clone(this);
     }
-    distanceTo(v) {
-        return this.sub(v).length;
-    }
-    distanceToSq(v) {
-        return this.sub(v).getLengthSq();
-    }
     div(n) {
         return Vector3d.create(this.x / n, this.y / n, this.z / n);
     }
@@ -81,16 +77,19 @@ export class Vector3d {
     setTo(c) {
         this.x = c.x;
         this.y = c.y;
-        const v3d = c;
-        this.z = v3d.z ? v3d.z : originPoint.z;
+        this.z = getZ(c);
     }
     sub(v) {
-        return Vector3d.create(this.x - v.x, this.y - v.y, this.z - v.z);
+        return Vector3d.create(this.x - v.x, this.y - v.y, this.z - getZ(v));
     }
     subFrom(v) {
         this.x -= v.x;
         this.y -= v.y;
-        this.z -= v.z;
+        this.z -= getZ(v);
+    }
+    _updateFromAngle(angle, length) {
+        this.x = Math.cos(angle) * length;
+        this.y = Math.sin(angle) * length;
     }
 }
 export class Vector extends Vector3d {

package/cjs/Options/Classes/AnimatableColor.js

@@ -2,6 +2,7 @@ import { isArray, isNull, isString } from "../../Utils/TypeUtils.js";
 import { HslAnimation } from "./HslAnimation.js";
 import { OptionsColor } from "./OptionsColor.js";
 export class AnimatableColor extends OptionsColor {
+    animation;
     constructor() {
         super();
         this.animation = new HslAnimation();

package/cjs/Options/Classes/AnimationOptions.js

@@ -3,6 +3,12 @@ import { StartValueType } from "../../Enums/Types/StartValueType.js";
 import { isNull } from "../../Utils/TypeUtils.js";
 import { setRangeValue } from "../../Utils/MathUtils.js";
 export class AnimationOptions {
+    count;
+    decay;
+    delay;
+    enable;
+    speed;
+    sync;
     constructor() {
         this.count = 0;
         this.enable = false;
@@ -36,6 +42,8 @@ export class AnimationOptions {
     }
 }
 export class RangedAnimationOptions extends AnimationOptions {
+    mode;
+    startValue;
     constructor() {
         super();
         this.mode = AnimationMode.auto;

package/cjs/Options/Classes/Background/Background.js

@@ -1,6 +1,12 @@
 import { OptionsColor } from "../OptionsColor.js";
 import { isNull } from "../../../Utils/TypeUtils.js";
 export class Background {
+    color;
+    image;
+    opacity;
+    position;
+    repeat;
+    size;
     constructor() {
         this.color = new OptionsColor();
         this.color.value = "";

package/cjs/Options/Classes/ColorAnimation.js

@@ -2,8 +2,13 @@ import { AnimationOptions } from "./AnimationOptions.js";
 import { isNull } from "../../Utils/TypeUtils.js";
 import { setRangeValue } from "../../Utils/MathUtils.js";
 export class ColorAnimation extends AnimationOptions {
-    constructor() {
+    max;
+    min;
+    offset;
+    constructor(min, max) {
         super();
+        this.min = min;
+        this.max = max;
         this.offset = 0;
         this.sync = true;
     }
@@ -12,6 +17,12 @@ export class ColorAnimation extends AnimationOptions {
         if (isNull(data)) {
             return;
         }
+        if (data.max !== undefined) {
+            this.max = data.max;
+        }
+        if (data.min !== undefined) {
+            this.min = data.min;
+        }
         if (data.offset !== undefined) {
             this.offset = setRangeValue(data.offset);
         }

package/cjs/Options/Classes/FullScreen/FullScreen.js

@@ -1,5 +1,7 @@
 import { isNull } from "../../../Utils/TypeUtils.js";
 export class FullScreen {
+    enable;
+    zIndex;
     constructor() {
         this.enable = true;
         this.zIndex = 0;

package/cjs/Options/Classes/HslAnimation.js

@@ -1,11 +1,10 @@
+import { hMax, hMin, lMax, lMin, sMax, sMin } from "../../Core/Utils/Constants.js";
 import { ColorAnimation } from "./ColorAnimation.js";
 import { isNull } from "../../Utils/TypeUtils.js";
 export class HslAnimation {
-    constructor() {
-        this.h = new ColorAnimation();
-        this.s = new ColorAnimation();
-        this.l = new ColorAnimation();
-    }
+    h = new ColorAnimation(hMin, hMax);
+    l = new ColorAnimation(lMin, lMax);
+    s = new ColorAnimation(sMin, sMax);
     load(data) {
         if (isNull(data)) {
             return;

package/cjs/Options/Classes/Options.js

@@ -6,10 +6,30 @@ import { ResizeEvent } from "./ResizeEvent.js";
 import { loadParticlesOptions } from "../../Utils/OptionsUtils.js";
 import { setRangeValue } from "../../Utils/MathUtils.js";
 export class Options {
+    autoPlay;
+    background;
+    clear;
+    defaultThemes;
+    delay;
+    detectRetina;
+    duration;
+    fpsLimit;
+    fullScreen;
+    hdr;
+    key;
+    name;
+    palette;
+    particles;
+    pauseOnBlur;
+    pauseOnOutsideViewport;
+    preset;
+    resize;
+    smooth;
+    style;
+    zLayers;
+    _container;
+    _engine;
     constructor(engine, container) {
-        this._importPreset = preset => {
-            this.load(this._engine.getPreset(preset));
-        };
         this._engine = engine;
         this._container = container;
         this.autoPlay = true;
@@ -35,10 +55,15 @@ export class Options {
             return;
         }
         if (data.preset !== undefined) {
-            executeOnSingleOrMultiple(data.preset, preset => {
+            this.preset = data.preset;
+            executeOnSingleOrMultiple(this.preset, preset => {
                 this._importPreset(preset);
             });
         }
+        if (data.palette !== undefined) {
+            this.palette = data.palette;
+            this._importPalette(this.palette);
+        }
         if (data.autoPlay !== undefined) {
             this.autoPlay = data.autoPlay;
         }
@@ -95,4 +120,38 @@ export class Options {
             plugin.loadOptions(this._container, this, data);
         });
     }
+    _importPalette = palette => {
+        const paletteData = this._engine.getPalette(palette);
+        if (!paletteData) {
+            return;
+        }
+        this.load({
+            background: {
+                color: paletteData.background,
+            },
+            blend: {
+                enable: true,
+                mode: paletteData.blendMode,
+            },
+            particles: {
+                fill: {
+                    color: paletteData.fill
+                        ? {
+                            value: paletteData.colors,
+                        }
+                        : undefined,
+                    enable: paletteData.fill,
+                },
+                stroke: !paletteData.fill
+                    ? paletteData.colors.map(color => ({
+                        color: { value: color },
+                        width: 1,
+                    }))
+                    : undefined,
+            },
+        });
+    };
+    _importPreset = preset => {
+        this.load(this._engine.getPreset(preset));
+    };
 }

package/cjs/Options/Classes/OptionsColor.js

@@ -1,5 +1,6 @@
 import { isArray, isNull, isString } from "../../Utils/TypeUtils.js";
 export class OptionsColor {
+    value;
     constructor() {
         this.value = "";
     }

package/cjs/Options/Classes/Particles/Bounce/ParticlesBounce.js

@@ -1,6 +1,8 @@
 import { ParticlesBounceFactor } from "./ParticlesBounceFactor.js";
 import { isNull } from "../../../../Utils/TypeUtils.js";
 export class ParticlesBounce {
+    horizontal;
+    vertical;
     constructor() {
         this.horizontal = new ParticlesBounceFactor();
         this.vertical = new ParticlesBounceFactor();

package/cjs/Options/Classes/Particles/Effect/Effect.js

@@ -1,9 +1,11 @@
 import { deepExtend } from "../../../../Utils/Utils.js";
 import { isNull } from "../../../../Utils/TypeUtils.js";
 export class Effect {
+    close;
+    options;
+    type;
     constructor() {
         this.close = true;
-        this.fill = true;
         this.options = {};
         this.type = [];
     }
@@ -23,9 +25,6 @@ export class Effect {
         if (data.close !== undefined) {
             this.close = data.close;
         }
-        if (data.fill !== undefined) {
-            this.fill = data.fill;
-        }
         if (data.type !== undefined) {
             this.type = data.type;
         }

package/cjs/Options/Classes/Particles/Fill.js

@@ -0,0 +1,28 @@
+import { AnimatableColor } from "../AnimatableColor.js";
+import { isNull } from "../../../Utils/TypeUtils.js";
+import { setRangeValue } from "../../../Utils/MathUtils.js";
+export class Fill {
+    color;
+    enable;
+    opacity;
+    constructor() {
+        this.enable = true;
+        this.color = new AnimatableColor();
+        this.color.value = "#fff";
+        this.opacity = 1;
+    }
+    load(data) {
+        if (isNull(data)) {
+            return;
+        }
+        if (data.color !== undefined) {
+            this.color = AnimatableColor.create(this.color, data.color);
+        }
+        if (data.enable !== undefined) {
+            this.enable = data.enable;
+        }
+        if (data.opacity !== undefined) {
+            this.opacity = setRangeValue(data.opacity);
+        }
+    }
+}

package/cjs/Options/Classes/Particles/Move/Move.js

@@ -1,7 +1,6 @@
 import { MoveDirection } from "../../../../Enums/Directions/MoveDirection.js";
 import { isNull, isNumber, isObject } from "../../../../Utils/TypeUtils.js";
 import { MoveAngle } from "./MoveAngle.js";
-import { MoveAttract } from "./MoveAttract.js";
 import { MoveCenter } from "./MoveCenter.js";
 import { MoveGravity } from "./MoveGravity.js";
 import { MovePath } from "./Path/MovePath.js";
@@ -9,9 +8,25 @@ import { OutModes } from "./OutModes.js";
 import { Spin } from "./Spin.js";
 import { setRangeValue } from "../../../../Utils/MathUtils.js";
 export class Move {
+    angle;
+    center;
+    decay;
+    direction;
+    distance;
+    drift;
+    enable;
+    gravity;
+    outModes;
+    path;
+    random;
+    size;
+    speed;
+    spin;
+    straight;
+    vibrate;
+    warp;
     constructor() {
         this.angle = new MoveAngle();
-        this.attract = new MoveAttract();
         this.center = new MoveCenter();
         this.decay = 0;
         this.distance = {};
@@ -34,7 +49,6 @@ export class Move {
             return;
         }
         this.angle.load(isNumber(data.angle) ? { value: data.angle } : data.angle);
-        this.attract.load(data.attract);
         this.center.load(data.center);
         if (data.decay !== undefined) {
             this.decay = setRangeValue(data.decay);

package/cjs/Options/Classes/Particles/Move/MoveAngle.js

@@ -1,6 +1,8 @@
 import { isNull } from "../../../../Utils/TypeUtils.js";
 import { setRangeValue } from "../../../../Utils/MathUtils.js";
 export class MoveAngle {
+    offset;
+    value;
     constructor() {
         this.offset = 0;
         this.value = 90;

package/cjs/Options/Classes/Particles/Move/MoveCenter.js

@@ -1,6 +1,10 @@
 import { PixelMode } from "../../../../Enums/Modes/PixelMode.js";
 import { isNull } from "../../../../Utils/TypeUtils.js";
 export class MoveCenter {
+    mode;
+    radius;
+    x;
+    y;
     constructor() {
         this.x = 50;
         this.y = 50;

package/cjs/Options/Classes/Particles/Move/MoveGravity.js

@@ -1,6 +1,10 @@
 import { isNull } from "../../../../Utils/TypeUtils.js";
 import { setRangeValue } from "../../../../Utils/MathUtils.js";
 export class MoveGravity {
+    acceleration;
+    enable;
+    inverse;
+    maxSpeed;
     constructor() {
         this.acceleration = 9.81;
         this.enable = false;

package/cjs/Options/Classes/Particles/Move/OutModes.js

@@ -1,6 +1,11 @@
 import { OutMode } from "../../../../Enums/Modes/OutMode.js";
 import { isNull } from "../../../../Utils/TypeUtils.js";
 export class OutModes {
+    bottom;
+    default;
+    left;
+    right;
+    top;
     constructor() {
         this.default = OutMode.out;
     }

package/cjs/Options/Classes/Particles/Move/Path/MovePath.js

@@ -2,6 +2,11 @@ import { ValueWithRandom } from "../../../ValueWithRandom.js";
 import { deepExtend } from "../../../../../Utils/Utils.js";
 import { isNull } from "../../../../../Utils/TypeUtils.js";
 export class MovePath {
+    clamp;
+    delay;
+    enable;
+    generator;
+    options;
     constructor() {
         this.clamp = true;
         this.delay = new ValueWithRandom();

package/cjs/Options/Classes/Particles/Move/Spin.js

@@ -2,6 +2,9 @@ import { deepExtend } from "../../../../Utils/Utils.js";
 import { isNull } from "../../../../Utils/TypeUtils.js";
 import { setRangeValue } from "../../../../Utils/MathUtils.js";
 export class Spin {
+    acceleration;
+    enable;
+    position;
     constructor() {
         this.acceleration = 0;
         this.enable = false;

package/cjs/Options/Classes/Particles/Number/ParticlesDensity.js

@@ -1,5 +1,8 @@
 import { isNull } from "../../../../Utils/TypeUtils.js";
 export class ParticlesDensity {
+    enable;
+    height;
+    width;
     constructor() {
         this.enable = false;
         this.width = 1920;

package/cjs/Options/Classes/Particles/Number/ParticlesNumber.js

@@ -2,6 +2,9 @@ import { ParticlesDensity } from "./ParticlesDensity.js";
 import { ParticlesNumberLimit } from "./ParticlesNumberLimit.js";
 import { isNull } from "../../../../Utils/TypeUtils.js";
 export class ParticlesNumber {
+    density;
+    limit;
+    value;
     constructor() {
         this.density = new ParticlesDensity();
         this.limit = new ParticlesNumberLimit();

package/cjs/Options/Classes/Particles/Number/ParticlesNumberLimit.js

@@ -1,6 +1,8 @@
 import { LimitMode } from "../../../../Enums/Modes/LimitMode.js";
 import { isNull } from "../../../../Utils/TypeUtils.js";
 export class ParticlesNumberLimit {
+    mode;
+    value;
     constructor() {
         this.mode = LimitMode.delete;
         this.value = 0;

package/cjs/Options/Classes/Particles/Opacity/Opacity.js

@@ -2,6 +2,7 @@ import { OpacityAnimation } from "./OpacityAnimation.js";
 import { RangedAnimationValueWithRandom } from "../../ValueWithRandom.js";
 import { isNull } from "../../../../Utils/TypeUtils.js";
 export class Opacity extends RangedAnimationValueWithRandom {
+    animation;
     constructor() {
         super();
         this.animation = new OpacityAnimation();

package/cjs/Options/Classes/Particles/Opacity/OpacityAnimation.js

@@ -2,6 +2,7 @@ import { DestroyType } from "../../../../Enums/Types/DestroyType.js";
 import { RangedAnimationOptions } from "../../AnimationOptions.js";
 import { isNull } from "../../../../Utils/TypeUtils.js";
 export class OpacityAnimation extends RangedAnimationOptions {
+    destroy;
     constructor() {
         super();
         this.destroy = DestroyType.none;

package/cjs/Options/Classes/Particles/ParticlesOptions.js

@@ -1,6 +1,6 @@
 import { deepExtend, executeOnSingleOrMultiple } from "../../../Utils/Utils.js";
-import { AnimatableColor } from "../AnimatableColor.js";
 import { Effect } from "./Effect/Effect.js";
+import { Fill } from "./Fill.js";
 import { Move } from "./Move/Move.js";
 import { Opacity } from "./Opacity/Opacity.js";
 import { ParticlesBounce } from "./Bounce/ParticlesBounce.js";
@@ -11,13 +11,26 @@ import { Stroke } from "./Stroke.js";
 import { ZIndex } from "./ZIndex/ZIndex.js";
 import { isNull } from "../../../Utils/TypeUtils.js";
 export class ParticlesOptions {
+    bounce;
+    effect;
+    fill;
+    groups;
+    move;
+    number;
+    opacity;
+    reduceDuplicates;
+    shape;
+    size;
+    stroke;
+    zIndex;
+    _container;
+    _engine;
     constructor(engine, container) {
         this._engine = engine;
         this._container = container;
         this.bounce = new ParticlesBounce();
-        this.color = new AnimatableColor();
-        this.color.value = "#fff";
         this.effect = new Effect();
+        this.fill = new Fill();
         this.groups = {};
         this.move = new Move();
         this.number = new ParticlesNumber();
@@ -34,7 +47,7 @@ export class ParticlesOptions {
         }
         if (data.groups !== undefined) {
             for (const group of Object.keys(data.groups)) {
-                if (!Object.hasOwn(data.groups, group)) {
+                if (!(group in data.groups)) {
                     continue;
                 }
                 const item = data.groups[group];
@@ -47,7 +60,6 @@ export class ParticlesOptions {
             this.reduceDuplicates = data.reduceDuplicates;
         }
         this.bounce.load(data.bounce);
-        this.color.load(AnimatableColor.create(this.color, data.color));
         this.effect.load(data.effect);
         this.move.load(data.move);
         this.number.load(data.number);
@@ -55,6 +67,14 @@ export class ParticlesOptions {
         this.shape.load(data.shape);
         this.size.load(data.size);
         this.zIndex.load(data.zIndex);
+        const fillToLoad = data.fill;
+        if (fillToLoad) {
+            this.fill = executeOnSingleOrMultiple(fillToLoad, t => {
+                const tmp = new Fill();
+                tmp.load(t);
+                return tmp;
+            });
+        }
         const strokeToLoad = data.stroke;
         if (strokeToLoad) {
             this.stroke = executeOnSingleOrMultiple(strokeToLoad, t => {