@tsparticles/engine 4.0.0-alpha.1 → 4.0.0-alpha.14

package/esm/Utils/CanvasUtils.js

@@ -1,17 +1,5 @@
-import { defaultTransform, identity, lFactor, minStrokeWidth, originPoint } from "../Core/Utils/Constants.js";
+import { 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();
-}
 export function paintBase(context, dimension, baseColor) {
     context.fillStyle = baseColor ?? "rgba(0,0,0,0)";
     context.fillRect(originPoint.x, originPoint.y, dimension.width, dimension.height);
@@ -28,15 +16,7 @@ export function clear(context, dimension) {
     context.clearRect(originPoint.x, originPoint.y, dimension.width, dimension.height);
 }
 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 = 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),
-    };
+    const { container, context, particle, delta, colorStyles, radius, opacity, transform } = data, pos = particle.getPosition(), transformData = particle.getTransformData(transform);
     context.setTransform(transformData.a, transformData.b, transformData.c, transformData.d, pos.x, pos.y);
     if (colorStyles.fill) {
         context.fillStyle = colorStyles.fill;
@@ -47,142 +27,87 @@ export function drawParticle(data) {
         context.strokeStyle = colorStyles.stroke;
     }
     const drawData = {
-        container,
         context,
         particle,
         radius,
         opacity,
         delta,
+        pixelRatio: container.retina.pixelRatio,
+        fill: particle.shapeFill,
+        stroke: strokeWidth > minStrokeWidth || !particle.shapeFill,
         transformData,
-        strokeWidth,
     };
-    drawBeforeEffect(drawData);
-    drawShapeBeforeDraw(drawData);
-    drawShape(drawData);
-    drawShapeAfterDraw(drawData);
-    drawAfterEffect(drawData);
+    drawBeforeEffect(container, drawData);
+    drawShapeBeforeDraw(container, drawData);
+    drawShape(container, drawData);
+    drawShapeAfterDraw(container, drawData);
+    drawAfterEffect(container, drawData);
     context.resetTransform();
 }
-export function drawAfterEffect(data) {
-    const { container, context, particle, radius, opacity, strokeWidth, delta, transformData } = data;
+export function drawAfterEffect(container, data) {
+    const { particle } = data;
     if (!particle.effect) {
         return;
     }
-    const drawer = container.effectDrawers.get(particle.effect), drawFunc = drawer?.drawAfter;
+    const drawer = container.particles.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 },
-    });
+    drawFunc(data);
 }
-export function drawBeforeEffect(data) {
-    const { container, context, particle, radius, opacity, strokeWidth, delta, transformData } = data;
+export function drawBeforeEffect(container, data) {
+    const { particle } = data;
     if (!particle.effect) {
         return;
     }
-    const drawer = container.effectDrawers.get(particle.effect);
+    const drawer = container.particles.effectDrawers.get(particle.effect);
     if (!drawer?.drawBefore) {
         return;
     }
-    drawer.drawBefore({
-        context,
-        particle,
-        radius,
-        opacity,
-        delta,
-        pixelRatio: container.retina.pixelRatio,
-        fill: particle.shapeFill,
-        stroke: strokeWidth > minStrokeWidth || !particle.shapeFill,
-        transformData: { ...transformData },
-    });
+    drawer.drawBefore(data);
 }
-export function drawShape(data) {
-    const { container, context, particle, radius, opacity, delta, strokeWidth, transformData } = data;
+export function drawShape(container, data) {
+    const { context, particle, stroke } = data;
     if (!particle.shape) {
         return;
     }
-    const drawer = container.shapeDrawers.get(particle.shape);
+    const drawer = container.particles.shapeDrawers.get(particle.shape);
     if (!drawer) {
         return;
     }
     context.beginPath();
-    drawer.draw({
-        context,
-        particle,
-        radius,
-        opacity,
-        delta,
-        pixelRatio: container.retina.pixelRatio,
-        fill: particle.shapeFill,
-        stroke: strokeWidth > minStrokeWidth || !particle.shapeFill,
-        transformData: { ...transformData },
-    });
+    drawer.draw(data);
     if (particle.shapeClose) {
         context.closePath();
     }
-    if (strokeWidth > minStrokeWidth) {
+    if (stroke) {
         context.stroke();
     }
     if (particle.shapeFill) {
         context.fill();
     }
 }
-export function drawShapeAfterDraw(data) {
-    const { container, context, particle, radius, opacity, strokeWidth, delta, transformData } = data;
+export function drawShapeAfterDraw(container, data) {
+    const { particle } = data;
     if (!particle.shape) {
         return;
     }
-    const drawer = container.shapeDrawers.get(particle.shape);
+    const drawer = container.particles.shapeDrawers.get(particle.shape);
     if (!drawer?.afterDraw) {
         return;
     }
-    drawer.afterDraw({
-        context,
-        particle,
-        radius,
-        opacity,
-        delta,
-        pixelRatio: container.retina.pixelRatio,
-        fill: particle.shapeFill,
-        stroke: strokeWidth > minStrokeWidth || !particle.shapeFill,
-        transformData: { ...transformData },
-    });
+    drawer.afterDraw(data);
 }
-export function drawShapeBeforeDraw(data) {
-    const { container, context, particle, radius, opacity, strokeWidth, delta, transformData } = data;
+export function drawShapeBeforeDraw(container, data) {
+    const { particle } = data;
     if (!particle.shape) {
         return;
     }
-    const drawer = container.shapeDrawers.get(particle.shape);
+    const drawer = container.particles.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 },
-    });
-}
-export function drawPlugin(context, plugin, delta) {
-    if (!plugin.draw) {
-        return;
-    }
-    plugin.draw(context, delta);
+    drawer.beforeDraw(data);
 }
 export function drawParticlePlugin(context, plugin, particle, delta) {
     if (!plugin.drawParticle) {

package/esm/Utils/ColorUtils.js

@@ -3,6 +3,19 @@ import { decayOffset, defaultLoops, defaultOpacity, defaultRgbMin, defaultTime,
 import { isArray, isString } from "./TypeUtils.js";
 import { AnimationStatus } from "../Enums/AnimationStatus.js";
 import { itemFromArray } from "./Utils.js";
+const styleCache = new Map(), maxCacheSize = 1000, firstIndex = 0, rgbFixedPrecision = 2, hslFixedPrecision = 2;
+function getCachedStyle(key, generator) {
+    let cached = styleCache.get(key);
+    if (!cached) {
+        cached = generator();
+        if (styleCache.size >= maxCacheSize) {
+            const keysToDelete = [...styleCache.keys()].slice(firstIndex, maxCacheSize * half);
+            keysToDelete.forEach(k => styleCache.delete(k));
+        }
+        styleCache.set(key, cached);
+    }
+    return cached;
+}
 function stringToRgba(engine, input) {
     if (!input) {
         return;
@@ -155,7 +168,8 @@ export function getRandomRgbColor(min) {
     };
 }
 export function getStyleFromRgb(color, hdr, opacity) {
-    return hdr ? getHdrStyleFromRgb(color, opacity) : getSdrStyleFromRgb(color, opacity);
+    const op = opacity ?? defaultOpacity, key = `rgb-${color.r.toFixed(rgbFixedPrecision)}-${color.g.toFixed(rgbFixedPrecision)}-${color.b.toFixed(rgbFixedPrecision)}-${hdr ? "hdr" : "sdr"}-${op.toString()}`;
+    return getCachedStyle(key, () => (hdr ? getHdrStyleFromRgb(color, opacity) : getSdrStyleFromRgb(color, opacity)));
 }
 function getHdrStyleFromRgb(color, opacity) {
     return `color(display-p3 ${(color.r / rgbMax).toString()} ${(color.g / rgbMax).toString()} ${(color.b / rgbMax).toString()} / ${(opacity ?? defaultOpacity).toString()})`;
@@ -164,7 +178,8 @@ function getSdrStyleFromRgb(color, opacity) {
     return `rgba(${color.r.toString()}, ${color.g.toString()}, ${color.b.toString()}, ${(opacity ?? defaultOpacity).toString()})`;
 }
 export function getStyleFromHsl(color, hdr, opacity) {
-    return hdr ? getHdrStyleFromHsl(color, opacity) : getSdrStyleFromHsl(color, opacity);
+    const op = opacity ?? defaultOpacity, key = `hsl-${color.h.toFixed(hslFixedPrecision)}-${color.s.toFixed(hslFixedPrecision)}-${color.l.toFixed(hslFixedPrecision)}-${hdr ? "hdr" : "sdr"}-${op.toString()}`;
+    return getCachedStyle(key, () => (hdr ? getHdrStyleFromHsl(color, opacity) : getSdrStyleFromHsl(color, opacity)));
 }
 function getHdrStyleFromHsl(color, opacity) {
     return getHdrStyleFromRgb(hslToRgb(color), opacity);

package/esm/Utils/EventDispatcher.js

@@ -1,5 +1,6 @@
 import { deleteCount, minIndex } from "../Core/Utils/Constants.js";
 export class EventDispatcher {
+    _listeners;
     constructor() {
         this._listeners = new Map();
     }

package/esm/Utils/MathUtils.js

@@ -137,9 +137,10 @@ export function calcPositionOrRandomFromSizeRanged(data) {
     return calcPositionOrRandomFromSize({ size: data.size, position });
 }
 export function calcExactPositionOrRandomFromSize(data) {
+    const { position, size } = data;
     return {
-        x: data.position?.x ?? getRandom() * data.size.width,
-        y: data.position?.y ?? getRandom() * data.size.height,
+        x: position?.x ?? getRandom() * size.width,
+        y: position?.y ?? getRandom() * size.height,
     };
 }
 export function calcExactPositionOrRandomFromSizeRanged(data) {

package/esm/Utils/Utils.js

@@ -1,6 +1,6 @@
 import { clamp, collisionVelocity, getDistances, getRandom, getRangeMax, getRangeMin, getRangeValue, randomInRangeValue, } from "./MathUtils.js";
 import { half, millisecondsToSeconds, percentDenominator } from "../Core/Utils/Constants.js";
-import { isArray, isNull, isObject } from "./TypeUtils.js";
+import { isArray, isBoolean, isNull, isObject } from "./TypeUtils.js";
 import { AnimationMode } from "../Enums/Modes/AnimationMode.js";
 import { AnimationStatus } from "../Enums/AnimationStatus.js";
 import { DestroyType } from "../Enums/Types/DestroyType.js";
@@ -21,12 +21,6 @@ function memoize(fn) {
         return result;
     };
 }
-function checkSelector(element, selectors) {
-    const res = executeOnSingleOrMultiple(selectors, selector => {
-        return element.matches(selector);
-    });
-    return isArray(res) ? res.some(t => t) : res;
-}
 export function hasMatchMedia() {
     return typeof matchMedia !== "undefined";
 }
@@ -54,13 +48,6 @@ export function safeMutationObserver(callback) {
 export function isInArray(value, array) {
     return value === array || (isArray(array) && array.includes(value));
 }
-export async function loadFont(font, weight) {
-    try {
-        await safeDocument().fonts.load(`${weight ?? "400"} 36px '${font ?? "Verdana"}'`);
-    }
-    catch {
-    }
-}
 export function arrayRandomIndex(array) {
     return Math.floor(getRandom() * array.length);
 }
@@ -104,11 +91,15 @@ export function deepExtend(destination, ...sources) {
             continue;
         }
         const sourceIsArray = Array.isArray(source);
-        if (sourceIsArray && (isObject(destination) || !destination || !Array.isArray(destination))) {
-            destination = [];
+        if (sourceIsArray) {
+            if (!Array.isArray(destination)) {
+                destination = [];
+            }
         }
-        else if (!sourceIsArray && (isObject(destination) || !destination || Array.isArray(destination))) {
-            destination = {};
+        else {
+            if (!isObject(destination) || Array.isArray(destination)) {
+                destination = {};
+            }
         }
         for (const key in source) {
             if (key === "__proto__") {
@@ -123,31 +114,6 @@ export function deepExtend(destination, ...sources) {
     }
     return destination;
 }
-export function isDivModeEnabled(mode, divs) {
-    return !!findItemFromSingleOrMultiple(divs, t => t.enable && isInArray(mode, t.mode));
-}
-export function divModeExecute(mode, divs, callback) {
-    executeOnSingleOrMultiple(divs, div => {
-        const divMode = div.mode, divEnabled = div.enable;
-        if (divEnabled && isInArray(mode, divMode)) {
-            singleDivModeExecute(div, callback);
-        }
-    });
-}
-export function singleDivModeExecute(div, callback) {
-    const selectors = div.selectors;
-    executeOnSingleOrMultiple(selectors, selector => {
-        callback(selector, div);
-    });
-}
-export function divMode(divs, element) {
-    if (!element || !divs) {
-        return;
-    }
-    return findItemFromSingleOrMultiple(divs, div => {
-        return checkSelector(element, div.selectors);
-    });
-}
 export function circleBounceDataFromParticle(p) {
     return {
         position: p.getPosition(),
@@ -205,6 +171,8 @@ export function initParticleNumericAnimationValue(options, pxRatio) {
             case AnimationMode.random:
                 res.status = getRandom() >= half ? AnimationStatus.increasing : AnimationStatus.decreasing;
                 break;
+            default:
+                break;
         }
         const autoStatus = animationOptions.mode === AnimationMode.auto;
         switch (animationOptions.startValue) {
@@ -270,6 +238,8 @@ function checkDestroy(particle, destroyType, value, minValue, maxValue) {
                 particle.destroy();
             }
             break;
+        default:
+            break;
     }
 }
 export function updateAnimation(particle, data, changeDirection, destroyType, delta) {
@@ -317,6 +287,9 @@ export function updateAnimation(particle, data, changeDirection, destroyType, de
             else {
                 data.value -= velocity;
             }
+            break;
+        default:
+            break;
     }
     if (data.velocity && decay !== identity) {
         data.velocity *= decay;
@@ -328,7 +301,7 @@ export function cloneStyle(style) {
     const clonedStyle = safeDocument().createElement("div").style;
     for (const key in style) {
         const styleKey = style[key];
-        if (!Object.prototype.hasOwnProperty.call(style, key) || isNull(styleKey)) {
+        if (!Object.hasOwn(style, key) || isNull(styleKey)) {
             continue;
         }
         const styleValue = style.getPropertyValue?.(styleKey);
@@ -368,3 +341,39 @@ function computeFullScreenStyle(zIndex) {
     return fullScreenStyle;
 }
 export const getFullScreenStyle = memoize(computeFullScreenStyle);
+export function manageListener(element, event, handler, add, options) {
+    if (add) {
+        let addOptions = { passive: true };
+        if (isBoolean(options)) {
+            addOptions.capture = options;
+        }
+        else if (options !== undefined) {
+            addOptions = options;
+        }
+        element.addEventListener(event, handler, addOptions);
+    }
+    else {
+        const removeOptions = options;
+        element.removeEventListener(event, handler, removeOptions);
+    }
+}
+export async function getItemsFromInitializer(container, map, initializers, force = false) {
+    let res = map.get(container);
+    if (!res || force) {
+        res = await Promise.all([...initializers.values()].map(t => t(container)));
+        map.set(container, res);
+    }
+    return res;
+}
+export async function getItemMapFromInitializer(container, map, initializers, force = false) {
+    let res = map.get(container);
+    if (!res || force) {
+        res = new Map();
+        const entries = await Promise.all([...initializers.entries()].map(async ([key, initializer]) => [key, await initializer(container)]));
+        for (const [key, item] of entries) {
+            res.set(key, item);
+        }
+        map.set(container, res);
+    }
+    return res;
+}

package/esm/exports.js

@@ -1,6 +1,4 @@
 export * from "./Core/Utils/Constants.js";
-export * from "./Core/Utils/ExternalInteractorBase.js";
-export * from "./Core/Utils/ParticlesInteractorBase.js";
 export * from "./Core/Utils/Point.js";
 export * from "./Core/Utils/Ranges.js";
 export * from "./Core/Utils/Vectors.js";
@@ -11,36 +9,20 @@ export * from "./Enums/Modes/AnimationMode.js";
 export * from "./Enums/Modes/LimitMode.js";
 export * from "./Enums/Modes/OutMode.js";
 export * from "./Enums/Modes/PixelMode.js";
-export * from "./Enums/Modes/ThemeMode.js";
-export * from "./Enums/Modes/ResponsiveMode.js";
 export * from "./Enums/Types/AlterType.js";
 export * from "./Enums/Types/DestroyType.js";
 export * from "./Enums/Types/GradientType.js";
-export * from "./Enums/Types/InteractorType.js";
 export * from "./Enums/Types/ParticleOutType.js";
 export * from "./Enums/Types/StartValueType.js";
-export * from "./Enums/Types/DivType.js";
 export * from "./Enums/Types/EasingType.js";
 export * from "./Enums/Types/EventType.js";
 export * from "./Enums/AnimationStatus.js";
-export * from "./Enums/InteractivityDetect.js";
 export * from "./Options/Classes/AnimatableColor.js";
 export * from "./Options/Classes/AnimationOptions.js";
 export * from "./Options/Classes/Background/Background.js";
 export * from "./Options/Classes/ColorAnimation.js";
 export * from "./Options/Classes/FullScreen/FullScreen.js";
 export * from "./Options/Classes/HslAnimation.js";
-export * from "./Options/Classes/Interactivity/Events/ClickEvent.js";
-export * from "./Options/Classes/Interactivity/Events/DivEvent.js";
-export * from "./Options/Classes/Interactivity/Events/ClickEvent.js";
-export * from "./Options/Classes/Interactivity/Events/DivEvent.js";
-export * from "./Options/Classes/Interactivity/Events/Events.js";
-export * from "./Options/Classes/Interactivity/Events/HoverEvent.js";
-export * from "./Options/Classes/Interactivity/Events/Parallax.js";
-export * from "./Options/Classes/Interactivity/Events/ResizeEvent.js";
-export * from "./Options/Classes/Interactivity/Interactivity.js";
-export * from "./Options/Classes/Interactivity/Modes/Modes.js";
-export * from "./Options/Classes/ManualParticle.js";
 export * from "./Options/Classes/Options.js";
 export * from "./Options/Classes/OptionsColor.js";
 export * from "./Options/Classes/Particles/Bounce/ParticlesBounce.js";
@@ -64,9 +46,7 @@ export * from "./Options/Classes/Particles/Shape/Shape.js";
 export * from "./Options/Classes/Particles/Size/Size.js";
 export * from "./Options/Classes/Particles/Size/SizeAnimation.js";
 export * from "./Options/Classes/Particles/ZIndex/ZIndex.js";
-export * from "./Options/Classes/Responsive.js";
-export * from "./Options/Classes/Theme/Theme.js";
-export * from "./Options/Classes/Theme/ThemeDefault.js";
+export * from "./Options/Classes/ResizeEvent.js";
 export * from "./Options/Classes/ValueWithRandom.js";
 export * from "./Utils/CanvasUtils.js";
 export * from "./Utils/ColorUtils.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/engine",
-  "version": "4.0.0-alpha.1",
+  "version": "4.0.0-alpha.14",
   "description": "Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.",
   "homepage": "https://particles.js.org",
   "scripts": {