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

package/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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";