@tsparticles/engine 3.9.0 → 4.0.0-alpha.0

package/cjs/Options/Classes/Theme/ThemeDefault.js

@@ -1,16 +1,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ThemeDefault = void 0;
-const ThemeMode_js_1 = require("../../../Enums/Modes/ThemeMode.js");
-const TypeUtils_js_1 = require("../../../Utils/TypeUtils.js");
-class ThemeDefault {
+import { ThemeMode } from "../../../Enums/Modes/ThemeMode.js";
+import { isNull } from "../../../Utils/TypeUtils.js";
+export class ThemeDefault {
     constructor() {
         this.auto = false;
-        this.mode = ThemeMode_js_1.ThemeMode.any;
+        this.mode = ThemeMode.any;
         this.value = false;
     }
     load(data) {
-        if ((0, TypeUtils_js_1.isNull)(data)) {
+        if (isNull(data)) {
             return;
         }
         if (data.auto !== undefined) {
@@ -24,4 +21,3 @@ class ThemeDefault {
         }
     }
 }
-exports.ThemeDefault = ThemeDefault;

package/cjs/Options/Classes/ValueWithRandom.js

@@ -1,31 +1,27 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RangedAnimationValueWithRandom = exports.AnimationValueWithRandom = exports.ValueWithRandom = void 0;
-const AnimationOptions_js_1 = require("./AnimationOptions.js");
-const TypeUtils_js_1 = require("../../Utils/TypeUtils.js");
-const NumberUtils_js_1 = require("../../Utils/NumberUtils.js");
-class ValueWithRandom {
+import { AnimationOptions, RangedAnimationOptions } from "./AnimationOptions.js";
+import { isNull } from "../../Utils/TypeUtils.js";
+import { setRangeValue } from "../../Utils/MathUtils.js";
+export class ValueWithRandom {
     constructor() {
         this.value = 0;
     }
     load(data) {
-        if ((0, TypeUtils_js_1.isNull)(data)) {
+        if (isNull(data)) {
             return;
         }
-        if (!(0, TypeUtils_js_1.isNull)(data.value)) {
-            this.value = (0, NumberUtils_js_1.setRangeValue)(data.value);
+        if (!isNull(data.value)) {
+            this.value = setRangeValue(data.value);
         }
     }
 }
-exports.ValueWithRandom = ValueWithRandom;
-class AnimationValueWithRandom extends ValueWithRandom {
+export class AnimationValueWithRandom extends ValueWithRandom {
     constructor() {
         super();
-        this.animation = new AnimationOptions_js_1.AnimationOptions();
+        this.animation = new AnimationOptions();
     }
     load(data) {
         super.load(data);
-        if ((0, TypeUtils_js_1.isNull)(data)) {
+        if (isNull(data)) {
             return;
         }
         const animation = data.animation;
@@ -34,14 +30,12 @@ class AnimationValueWithRandom extends ValueWithRandom {
         }
     }
 }
-exports.AnimationValueWithRandom = AnimationValueWithRandom;
-class RangedAnimationValueWithRandom extends AnimationValueWithRandom {
+export class RangedAnimationValueWithRandom extends AnimationValueWithRandom {
     constructor() {
         super();
-        this.animation = new AnimationOptions_js_1.RangedAnimationOptions();
+        this.animation = new RangedAnimationOptions();
     }
     load(data) {
         super.load(data);
     }
 }
-exports.RangedAnimationValueWithRandom = RangedAnimationValueWithRandom;

package/cjs/Options/Interfaces/Background/IBackground.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/FullScreen/IFullScreen.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/IAnimatable.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/IAnimatableColor.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/IAnimation.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/IColorAnimation.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/IHslAnimation.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/IManualParticle.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/IOptionLoader.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/IOptions.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/IOptionsColor.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/IResponsive.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/IValueWithRandom.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/Interactivity/Events/IClickEvent.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/Interactivity/Events/IDivEvent.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/Interactivity/Events/IEvents.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/Interactivity/Events/IHoverEvent.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/Interactivity/Events/IParallax.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/Interactivity/Events/IResizeEvent.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/Interactivity/IInteractivity.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/Interactivity/Modes/IModeDiv.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/Interactivity/Modes/IModes.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/Particles/Bounce/IParticlesBounce.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/Particles/Effect/IEffect.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/Particles/IParticlesOptions.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/Particles/IStroke.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/Particles/Move/IMove.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/Particles/Move/IMoveAngle.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/Particles/Move/IMoveAttract.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/Particles/Move/IMoveCenter.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/Particles/Move/IMoveGravity.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/Particles/Move/IOutModes.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/Particles/Move/ISpin.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/Particles/Move/Path/IMovePath.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/Particles/Number/IParticlesDensity.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/Particles/Number/IParticlesNumber.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/Particles/Number/IParticlesNumberLimit.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/Particles/Opacity/IOpacity.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/Particles/Opacity/IOpacityAnimation.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/Particles/Shape/IShape.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/Particles/Size/ISize.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/Particles/Size/ISizeAnimation.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/Particles/ZIndex/IZIndex.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/Theme/ITheme.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/Theme/IThemeDefault.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Types/CustomEventArgs.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Types/CustomEventListener.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Types/EasingFunction.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Types/ExportResult.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Types/ISourceOptions.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Types/ParticlesGroups.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Types/PathOptions.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Types/RangeValue.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Types/RecursivePartial.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Types/ShapeData.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Types/SingleOrMultiple.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Utils/CanvasUtils.js

@@ -1,65 +1,47 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.drawLine = drawLine;
-exports.paintBase = paintBase;
-exports.paintImage = paintImage;
-exports.clear = clear;
-exports.drawParticle = drawParticle;
-exports.drawEffect = drawEffect;
-exports.drawShape = drawShape;
-exports.drawShapeAfterDraw = drawShapeAfterDraw;
-exports.drawPlugin = drawPlugin;
-exports.drawParticlePlugin = drawParticlePlugin;
-exports.alterHsl = alterHsl;
-const Constants_js_1 = require("../Core/Utils/Constants.js");
-const AlterType_js_1 = require("../Enums/Types/AlterType.js");
-const ColorUtils_js_1 = require("./ColorUtils.js");
-function drawLine(context, begin, end) {
+import { defaultTransform, identity, lFactor, minStrokeWidth, originPoint } from "../Core/Utils/Constants.js";
+import { AlterType } from "../Enums/Types/AlterType.js";
+export function clearDrawPlugin(context, plugin, delta) {
+    if (!plugin.clearDraw) {
+        return;
+    }
+    plugin.clearDraw(context, delta);
+}
+export function drawLine(context, begin, end) {
     context.beginPath();
     context.moveTo(begin.x, begin.y);
     context.lineTo(end.x, end.y);
     context.closePath();
 }
-function paintBase(context, dimension, baseColor) {
+export function paintBase(context, dimension, baseColor) {
     context.fillStyle = baseColor ?? "rgba(0,0,0,0)";
-    context.fillRect(Constants_js_1.originPoint.x, Constants_js_1.originPoint.y, dimension.width, dimension.height);
+    context.fillRect(originPoint.x, originPoint.y, dimension.width, dimension.height);
 }
-function paintImage(context, dimension, image, opacity) {
+export function paintImage(context, dimension, image, opacity) {
     if (!image) {
         return;
     }
     context.globalAlpha = opacity;
-    context.drawImage(image, Constants_js_1.originPoint.x, Constants_js_1.originPoint.y, dimension.width, dimension.height);
+    context.drawImage(image, originPoint.x, originPoint.y, dimension.width, dimension.height);
     context.globalAlpha = 1;
 }
-function clear(context, dimension) {
-    context.clearRect(Constants_js_1.originPoint.x, Constants_js_1.originPoint.y, dimension.width, dimension.height);
+export function clear(context, dimension) {
+    context.clearRect(originPoint.x, originPoint.y, dimension.width, dimension.height);
 }
-function drawParticle(data) {
-    const { container, context, particle, delta, colorStyles, backgroundMask, composite, radius, opacity, shadow, transform, } = data, pos = particle.getPosition(), angle = particle.rotation + (particle.pathRotation ? particle.velocity.angle : Constants_js_1.defaultAngle), rotateData = {
+export function drawParticle(data) {
+    const { container, context, particle, delta, colorStyles, radius, opacity, transform } = data, pos = particle.getPosition(), angle = particle.getAngle(), rotateData = {
         sin: Math.sin(angle),
         cos: Math.cos(angle),
-    }, rotating = !!angle, transformData = {
-        a: rotateData.cos * (transform.a ?? Constants_js_1.defaultTransform.a),
-        b: rotating ? rotateData.sin * (transform.b ?? Constants_js_1.identity) : (transform.b ?? Constants_js_1.defaultTransform.b),
-        c: rotating ? -rotateData.sin * (transform.c ?? Constants_js_1.identity) : (transform.c ?? Constants_js_1.defaultTransform.c),
-        d: rotateData.cos * (transform.d ?? Constants_js_1.defaultTransform.d),
+    }, rotating = particle.isRotating, transformData = {
+        a: rotateData.cos * (transform.a ?? defaultTransform.a),
+        b: rotating ? rotateData.sin * (transform.b ?? identity) : (transform.b ?? defaultTransform.b),
+        c: rotating ? -rotateData.sin * (transform.c ?? identity) : (transform.c ?? defaultTransform.c),
+        d: rotateData.cos * (transform.d ?? defaultTransform.d),
     };
     context.setTransform(transformData.a, transformData.b, transformData.c, transformData.d, pos.x, pos.y);
-    if (backgroundMask) {
-        context.globalCompositeOperation = composite;
-    }
-    const shadowColor = particle.shadowColor;
-    if (shadow.enable && shadowColor) {
-        context.shadowBlur = shadow.blur;
-        context.shadowColor = (0, ColorUtils_js_1.getStyleFromRgb)(shadowColor);
-        context.shadowOffsetX = shadow.offset.x;
-        context.shadowOffsetY = shadow.offset.y;
-    }
     if (colorStyles.fill) {
         context.fillStyle = colorStyles.fill;
     }
-    const strokeWidth = particle.strokeWidth ?? Constants_js_1.minStrokeWidth;
+    const strokeWidth = particle.strokeWidth ?? minStrokeWidth;
     context.lineWidth = strokeWidth;
     if (colorStyles.stroke) {
         context.strokeStyle = colorStyles.stroke;
@@ -74,32 +56,56 @@ function drawParticle(data) {
         transformData,
         strokeWidth,
     };
+    drawBeforeEffect(drawData);
+    drawShapeBeforeDraw(drawData);
     drawShape(drawData);
     drawShapeAfterDraw(drawData);
-    drawEffect(drawData);
-    context.globalCompositeOperation = "source-over";
+    drawAfterEffect(drawData);
     context.resetTransform();
 }
-function drawEffect(data) {
-    const { container, context, particle, radius, opacity, delta, transformData } = data;
+export function drawAfterEffect(data) {
+    const { container, context, particle, radius, opacity, strokeWidth, delta, transformData } = data;
+    if (!particle.effect) {
+        return;
+    }
+    const drawer = container.effectDrawers.get(particle.effect), drawFunc = drawer?.drawAfter;
+    if (!drawFunc) {
+        return;
+    }
+    drawFunc({
+        context,
+        particle,
+        radius,
+        opacity,
+        delta,
+        pixelRatio: container.retina.pixelRatio,
+        fill: particle.shapeFill,
+        stroke: strokeWidth > minStrokeWidth || !particle.shapeFill,
+        transformData: { ...transformData },
+    });
+}
+export function drawBeforeEffect(data) {
+    const { container, context, particle, radius, opacity, strokeWidth, delta, transformData } = data;
     if (!particle.effect) {
         return;
     }
     const drawer = container.effectDrawers.get(particle.effect);
-    if (!drawer) {
+    if (!drawer?.drawBefore) {
         return;
     }
-    drawer.draw({
+    drawer.drawBefore({
         context,
         particle,
         radius,
         opacity,
         delta,
         pixelRatio: container.retina.pixelRatio,
+        fill: particle.shapeFill,
+        stroke: strokeWidth > minStrokeWidth || !particle.shapeFill,
         transformData: { ...transformData },
     });
 }
-function drawShape(data) {
+export function drawShape(data) {
     const { container, context, particle, radius, opacity, delta, strokeWidth, transformData } = data;
     if (!particle.shape) {
         return;
@@ -116,20 +122,22 @@ function drawShape(data) {
         opacity,
         delta,
         pixelRatio: container.retina.pixelRatio,
+        fill: particle.shapeFill,
+        stroke: strokeWidth > minStrokeWidth || !particle.shapeFill,
         transformData: { ...transformData },
     });
     if (particle.shapeClose) {
         context.closePath();
     }
-    if (strokeWidth > Constants_js_1.minStrokeWidth) {
+    if (strokeWidth > minStrokeWidth) {
         context.stroke();
     }
     if (particle.shapeFill) {
         context.fill();
     }
 }
-function drawShapeAfterDraw(data) {
-    const { container, context, particle, radius, opacity, delta, transformData } = data;
+export function drawShapeAfterDraw(data) {
+    const { container, context, particle, radius, opacity, strokeWidth, delta, transformData } = data;
     if (!particle.shape) {
         return;
     }
@@ -144,25 +152,48 @@ function drawShapeAfterDraw(data) {
         opacity,
         delta,
         pixelRatio: container.retina.pixelRatio,
+        fill: particle.shapeFill,
+        stroke: strokeWidth > minStrokeWidth || !particle.shapeFill,
+        transformData: { ...transformData },
+    });
+}
+export function drawShapeBeforeDraw(data) {
+    const { container, context, particle, radius, opacity, strokeWidth, delta, transformData } = data;
+    if (!particle.shape) {
+        return;
+    }
+    const drawer = container.shapeDrawers.get(particle.shape);
+    if (!drawer?.beforeDraw) {
+        return;
+    }
+    drawer.beforeDraw({
+        context,
+        particle,
+        radius,
+        opacity,
+        delta,
+        pixelRatio: container.retina.pixelRatio,
+        fill: particle.shapeFill,
+        stroke: strokeWidth > minStrokeWidth || !particle.shapeFill,
         transformData: { ...transformData },
     });
 }
-function drawPlugin(context, plugin, delta) {
+export function drawPlugin(context, plugin, delta) {
     if (!plugin.draw) {
         return;
     }
     plugin.draw(context, delta);
 }
-function drawParticlePlugin(context, plugin, particle, delta) {
+export function drawParticlePlugin(context, plugin, particle, delta) {
     if (!plugin.drawParticle) {
         return;
     }
     plugin.drawParticle(context, particle, delta);
 }
-function alterHsl(color, type, value) {
+export function alterHsl(color, type, value) {
     return {
         h: color.h,
         s: color.s,
-        l: color.l + (type === AlterType_js_1.AlterType.darken ? -Constants_js_1.lFactor : Constants_js_1.lFactor) * value,
+        l: color.l + (type === AlterType.darken ? -lFactor : lFactor) * value,
     };
 }