@tsparticles/engine 3.0.0-alpha.0

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

package/browser/Types/CustomEventArgs.js

@@ -0,0 +1 @@
+export {};

package/browser/Types/CustomEventListener.js

@@ -0,0 +1 @@
+export {};

package/browser/Types/ISourceOptions.js

@@ -0,0 +1 @@
+export {};

package/browser/Types/ParticlesGroups.js

@@ -0,0 +1 @@
+export {};

package/browser/Types/PathOptions.js

@@ -0,0 +1 @@
+export {};

package/browser/Types/RangeValue.js

@@ -0,0 +1 @@
+export {};

package/browser/Types/RecursivePartial.js

@@ -0,0 +1 @@
+export {};

package/browser/Types/ShapeData.js

@@ -0,0 +1 @@
+export {};

package/browser/Types/ShapeDrawerFunctions.js

@@ -0,0 +1 @@
+export {};

package/browser/Types/SingleOrMultiple.js

@@ -0,0 +1 @@
+export {};

package/browser/Utils/CanvasUtils.js

@@ -0,0 +1,149 @@
+import { getStyleFromRgb } from "./ColorUtils";
+function paintBase(context, dimension, baseColor) {
+    context.fillStyle = baseColor !== null && baseColor !== void 0 ? baseColor : "rgba(0,0,0,0)";
+    context.fillRect(0, 0, dimension.width, dimension.height);
+}
+function paintImage(context, dimension, image, opacity) {
+    if (!image) {
+        return;
+    }
+    context.globalAlpha = opacity;
+    context.drawImage(image, 0, 0, dimension.width, dimension.height);
+    context.globalAlpha = 1;
+}
+export function getContext(canvas) {
+    const context = canvas.getContext("2d");
+    if (!context) {
+        throw new Error("Error tsParticles - No canvas context found");
+    }
+    return context;
+}
+export function clearCanvas(context, size, options, trailFill, coverColorStyle) {
+    if (options.backgroundMask.enable) {
+        paintCanvas(context, size, options, coverColorStyle);
+    }
+    else {
+        const trail = options.particles.move.trail;
+        if (trail.enable && trail.length > 0 && trailFill) {
+            if (trailFill.color) {
+                paintBase(context, size, getStyleFromRgb(trailFill.color, trailFill.opacity));
+            }
+            else if (trailFill.image) {
+                paintImage(context, size, trailFill.image, trailFill.opacity);
+            }
+        }
+        else {
+            clear(context, size);
+        }
+    }
+}
+export function paintCanvas(context, size, options, coverColorStyle) {
+    if (options.backgroundMask.enable && coverColorStyle) {
+        clear(context, size);
+        paintBase(context, size, coverColorStyle);
+    }
+    else {
+        paintBase(context, size);
+    }
+}
+export function drawLine(context, begin, end) {
+    context.beginPath();
+    context.moveTo(begin.x, begin.y);
+    context.lineTo(end.x, end.y);
+    context.closePath();
+}
+export function drawTriangle(context, p1, p2, p3) {
+    context.beginPath();
+    context.moveTo(p1.x, p1.y);
+    context.lineTo(p2.x, p2.y);
+    context.lineTo(p3.x, p3.y);
+    context.closePath();
+}
+export function clear(context, dimension) {
+    context.clearRect(0, 0, dimension.width, dimension.height);
+}
+export function drawParticle(data) {
+    var _a, _b, _c, _d, _e;
+    const { container, context, particle, delta, colorStyles, backgroundMask, composite, radius, opacity, shadow, transform, } = data;
+    const pos = particle.getPosition(), angle = particle.rotation + (particle.pathRotation ? particle.velocity.angle : 0), rotateData = {
+        sin: Math.sin(angle),
+        cos: Math.cos(angle),
+    }, transformData = {
+        a: rotateData.cos * ((_a = transform.a) !== null && _a !== void 0 ? _a : 1),
+        b: rotateData.sin * ((_b = transform.b) !== null && _b !== void 0 ? _b : 1),
+        c: -rotateData.sin * ((_c = transform.c) !== null && _c !== void 0 ? _c : 1),
+        d: rotateData.cos * ((_d = transform.d) !== null && _d !== void 0 ? _d : 1),
+    };
+    context.setTransform(transformData.a, transformData.b, transformData.c, transformData.d, pos.x, pos.y);
+    context.beginPath();
+    if (backgroundMask) {
+        context.globalCompositeOperation = composite;
+    }
+    const shadowColor = particle.shadowColor;
+    if (shadow.enable && shadowColor) {
+        context.shadowBlur = shadow.blur;
+        context.shadowColor = getStyleFromRgb(shadowColor);
+        context.shadowOffsetX = shadow.offset.x;
+        context.shadowOffsetY = shadow.offset.y;
+    }
+    if (colorStyles.fill) {
+        context.fillStyle = colorStyles.fill;
+    }
+    const strokeWidth = (_e = particle.strokeWidth) !== null && _e !== void 0 ? _e : 0;
+    context.lineWidth = strokeWidth;
+    if (colorStyles.stroke) {
+        context.strokeStyle = colorStyles.stroke;
+    }
+    drawShape(container, context, particle, radius, opacity, delta);
+    if (strokeWidth > 0) {
+        context.stroke();
+    }
+    if (particle.close) {
+        context.closePath();
+    }
+    if (particle.fill) {
+        context.fill();
+    }
+    drawShapeAfterEffect(container, context, particle, radius, opacity, delta);
+    context.globalCompositeOperation = "source-over";
+    context.setTransform(1, 0, 0, 1, 0, 0);
+}
+export function drawShape(container, context, particle, radius, opacity, delta) {
+    if (!particle.shape) {
+        return;
+    }
+    const drawer = container.drawers.get(particle.shape);
+    if (!drawer) {
+        return;
+    }
+    drawer.draw(context, particle, radius, opacity, delta, container.retina.pixelRatio);
+}
+export function drawShapeAfterEffect(container, context, particle, radius, opacity, delta) {
+    if (!particle.shape) {
+        return;
+    }
+    const drawer = container.drawers.get(particle.shape);
+    if (!(drawer === null || drawer === void 0 ? void 0 : drawer.afterEffect)) {
+        return;
+    }
+    drawer.afterEffect(context, particle, radius, opacity, delta, container.retina.pixelRatio);
+}
+export function drawPlugin(context, plugin, delta) {
+    if (!plugin.draw) {
+        return;
+    }
+    plugin.draw(context, delta);
+}
+export function drawParticlePlugin(context, plugin, particle, delta) {
+    if (!plugin.drawParticle) {
+        return;
+    }
+    plugin.drawParticle(context, particle, delta);
+}
+export function alterHsl(color, type, value) {
+    return {
+        h: color.h,
+        s: color.s,
+        l: color.l + (type === "darken" ? -1 : 1) * value,
+    };
+}

package/browser/Utils/ColorUtils.js

@@ -0,0 +1,274 @@
+import { getRandom, getRangeValue, mix, randomInRange, setRangeValue } from "./NumberUtils";
+import { itemFromArray } from "./Utils";
+const randomColorValue = "random", midColorValue = "mid", colorManagers = new Map();
+export function addColorManager(manager) {
+    colorManagers.set(manager.key, manager);
+}
+function hue2rgb(p, q, t) {
+    if (t < 0) {
+        t += 1;
+    }
+    if (t > 1) {
+        t -= 1;
+    }
+    if (t < 1 / 6) {
+        return p + (q - p) * 6 * t;
+    }
+    if (t < 1 / 2) {
+        return q;
+    }
+    if (t < 2 / 3) {
+        return p + (q - p) * (2 / 3 - t) * 6;
+    }
+    return p;
+}
+function stringToRgba(input) {
+    for (const [, manager] of colorManagers) {
+        if (input.startsWith(manager.stringPrefix)) {
+            return manager.parseString(input);
+        }
+    }
+    const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])([a-f\d])?$/i, hexFixed = input.replace(shorthandRegex, (_, r, g, b, a) => {
+        return r + r + g + g + b + b + (a !== undefined ? a + a : "");
+    }), regex = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i, result = regex.exec(hexFixed);
+    return result
+        ? {
+            a: result[4] !== undefined ? parseInt(result[4], 16) / 0xff : 1,
+            b: parseInt(result[3], 16),
+            g: parseInt(result[2], 16),
+            r: parseInt(result[1], 16),
+        }
+        : undefined;
+}
+export function rangeColorToRgb(input, index, useIndex = true) {
+    if (!input) {
+        return;
+    }
+    const color = typeof input === "string" ? { value: input } : input;
+    if (typeof color.value === "string") {
+        return colorToRgb(color.value, index, useIndex);
+    }
+    if (color.value instanceof Array) {
+        return rangeColorToRgb({
+            value: itemFromArray(color.value, index, useIndex),
+        });
+    }
+    for (const [, manager] of colorManagers) {
+        const res = manager.handleRangeColor(color);
+        if (res) {
+            return res;
+        }
+    }
+}
+export function colorToRgb(input, index, useIndex = true) {
+    if (!input) {
+        return;
+    }
+    const color = typeof input === "string" ? { value: input } : input;
+    if (typeof color.value === "string") {
+        return color.value === randomColorValue ? getRandomRgbColor() : stringToRgb(color.value);
+    }
+    if (color.value instanceof Array) {
+        return colorToRgb({
+            value: itemFromArray(color.value, index, useIndex),
+        });
+    }
+    for (const [, manager] of colorManagers) {
+        const res = manager.handleColor(color);
+        if (res) {
+            return res;
+        }
+    }
+}
+export function colorToHsl(color, index, useIndex = true) {
+    const rgb = colorToRgb(color, index, useIndex);
+    return rgb ? rgbToHsl(rgb) : undefined;
+}
+export function rangeColorToHsl(color, index, useIndex = true) {
+    const rgb = rangeColorToRgb(color, index, useIndex);
+    return rgb ? rgbToHsl(rgb) : undefined;
+}
+export function rgbToHsl(color) {
+    const r1 = color.r / 255, g1 = color.g / 255, b1 = color.b / 255, max = Math.max(r1, g1, b1), min = Math.min(r1, g1, b1), res = {
+        h: 0,
+        l: (max + min) / 2,
+        s: 0,
+    };
+    if (max !== min) {
+        res.s = res.l < 0.5 ? (max - min) / (max + min) : (max - min) / (2.0 - max - min);
+        res.h =
+            r1 === max
+                ? (g1 - b1) / (max - min)
+                : (res.h = g1 === max ? 2.0 + (b1 - r1) / (max - min) : 4.0 + (r1 - g1) / (max - min));
+    }
+    res.l *= 100;
+    res.s *= 100;
+    res.h *= 60;
+    if (res.h < 0) {
+        res.h += 360;
+    }
+    if (res.h >= 360) {
+        res.h -= 360;
+    }
+    return res;
+}
+export function stringToAlpha(input) {
+    var _a;
+    return (_a = stringToRgba(input)) === null || _a === void 0 ? void 0 : _a.a;
+}
+export function stringToRgb(input) {
+    return stringToRgba(input);
+}
+export function hslToRgb(hsl) {
+    const result = { b: 0, g: 0, r: 0 }, hslPercent = {
+        h: hsl.h / 360,
+        l: hsl.l / 100,
+        s: hsl.s / 100,
+    };
+    if (!hslPercent.s) {
+        result.b = hslPercent.l;
+        result.g = hslPercent.l;
+        result.r = hslPercent.l;
+    }
+    else {
+        const q = hslPercent.l < 0.5
+            ? hslPercent.l * (1 + hslPercent.s)
+            : hslPercent.l + hslPercent.s - hslPercent.l * hslPercent.s, p = 2 * hslPercent.l - q;
+        result.r = hue2rgb(p, q, hslPercent.h + 1 / 3);
+        result.g = hue2rgb(p, q, hslPercent.h);
+        result.b = hue2rgb(p, q, hslPercent.h - 1 / 3);
+    }
+    result.r = Math.floor(result.r * 255);
+    result.g = Math.floor(result.g * 255);
+    result.b = Math.floor(result.b * 255);
+    return result;
+}
+export function hslaToRgba(hsla) {
+    const rgbResult = hslToRgb(hsla);
+    return {
+        a: hsla.a,
+        b: rgbResult.b,
+        g: rgbResult.g,
+        r: rgbResult.r,
+    };
+}
+export function getRandomRgbColor(min) {
+    const fixedMin = min !== null && min !== void 0 ? min : 0;
+    return {
+        b: Math.floor(randomInRange(setRangeValue(fixedMin, 256))),
+        g: Math.floor(randomInRange(setRangeValue(fixedMin, 256))),
+        r: Math.floor(randomInRange(setRangeValue(fixedMin, 256))),
+    };
+}
+export function getStyleFromRgb(color, opacity) {
+    return `rgba(${color.r}, ${color.g}, ${color.b}, ${opacity !== null && opacity !== void 0 ? opacity : 1})`;
+}
+export function getStyleFromHsl(color, opacity) {
+    return `hsla(${color.h}, ${color.s}%, ${color.l}%, ${opacity !== null && opacity !== void 0 ? opacity : 1})`;
+}
+export function colorMix(color1, color2, size1, size2) {
+    let rgb1 = color1, rgb2 = color2;
+    if (rgb1.r === undefined) {
+        rgb1 = hslToRgb(color1);
+    }
+    if (rgb2.r === undefined) {
+        rgb2 = hslToRgb(color2);
+    }
+    return {
+        b: mix(rgb1.b, rgb2.b, size1, size2),
+        g: mix(rgb1.g, rgb2.g, size1, size2),
+        r: mix(rgb1.r, rgb2.r, size1, size2),
+    };
+}
+export function getLinkColor(p1, p2, linkColor) {
+    var _a, _b;
+    if (linkColor === randomColorValue) {
+        return getRandomRgbColor();
+    }
+    else if (linkColor === midColorValue) {
+        const sourceColor = (_a = p1.getFillColor()) !== null && _a !== void 0 ? _a : p1.getStrokeColor(), destColor = (_b = p2 === null || p2 === void 0 ? void 0 : p2.getFillColor()) !== null && _b !== void 0 ? _b : p2 === null || p2 === void 0 ? void 0 : p2.getStrokeColor();
+        if (sourceColor && destColor && p2) {
+            return colorMix(sourceColor, destColor, p1.getRadius(), p2.getRadius());
+        }
+        else {
+            const hslColor = sourceColor !== null && sourceColor !== void 0 ? sourceColor : destColor;
+            if (hslColor) {
+                return hslToRgb(hslColor);
+            }
+        }
+    }
+    else {
+        return linkColor;
+    }
+}
+export function getLinkRandomColor(optColor, blink, consent) {
+    const color = typeof optColor === "string" ? optColor : optColor.value;
+    if (color === randomColorValue) {
+        if (consent) {
+            return rangeColorToRgb({
+                value: color,
+            });
+        }
+        if (blink) {
+            return randomColorValue;
+        }
+        return midColorValue;
+    }
+    else if (color === midColorValue) {
+        return midColorValue;
+    }
+    else {
+        return rangeColorToRgb({
+            value: color,
+        });
+    }
+}
+export function getHslFromAnimation(animation) {
+    return animation !== undefined
+        ? {
+            h: animation.h.value,
+            s: animation.s.value,
+            l: animation.l.value,
+        }
+        : undefined;
+}
+export function getHslAnimationFromHsl(hsl, animationOptions, reduceFactor) {
+    const resColor = {
+        h: {
+            enable: false,
+            value: hsl.h,
+        },
+        s: {
+            enable: false,
+            value: hsl.s,
+        },
+        l: {
+            enable: false,
+            value: hsl.l,
+        },
+    };
+    if (animationOptions) {
+        setColorAnimation(resColor.h, animationOptions.h, reduceFactor);
+        setColorAnimation(resColor.s, animationOptions.s, reduceFactor);
+        setColorAnimation(resColor.l, animationOptions.l, reduceFactor);
+    }
+    return resColor;
+}
+function setColorAnimation(colorValue, colorAnimation, reduceFactor) {
+    colorValue.enable = colorAnimation.enable;
+    if (colorValue.enable) {
+        colorValue.velocity = (getRangeValue(colorAnimation.speed) / 100) * reduceFactor;
+        colorValue.decay = 1 - getRangeValue(colorAnimation.decay);
+        colorValue.status = "increasing";
+        colorValue.loops = 0;
+        colorValue.maxLoops = getRangeValue(colorAnimation.count);
+        if (!colorAnimation.sync) {
+            colorValue.velocity *= getRandom();
+            colorValue.value *= getRandom();
+        }
+        colorValue.initialValue = colorValue.value;
+    }
+    else {
+        colorValue.velocity = 0;
+    }
+}

package/browser/Utils/EventDispatcher.js

@@ -0,0 +1,44 @@
+export class EventDispatcher {
+    constructor() {
+        this._listeners = new Map();
+    }
+    addEventListener(type, listener) {
+        var _a;
+        this.removeEventListener(type, listener);
+        if (!this._listeners.get(type)) {
+            this._listeners.set(type, []);
+        }
+        (_a = this._listeners.get(type)) === null || _a === void 0 ? void 0 : _a.push(listener);
+    }
+    dispatchEvent(type, args) {
+        var _a;
+        (_a = this._listeners.get(type)) === null || _a === void 0 ? void 0 : _a.forEach((handler) => handler(args));
+    }
+    hasEventListener(type) {
+        return !!this._listeners.get(type);
+    }
+    removeAllEventListeners(type) {
+        if (!type) {
+            this._listeners = new Map();
+        }
+        else {
+            this._listeners.delete(type);
+        }
+    }
+    removeEventListener(type, listener) {
+        const arr = this._listeners.get(type);
+        if (!arr) {
+            return;
+        }
+        const length = arr.length, idx = arr.indexOf(listener);
+        if (idx < 0) {
+            return;
+        }
+        if (length === 1) {
+            this._listeners.delete(type);
+        }
+        else {
+            arr.splice(idx, 1);
+        }
+    }
+}

package/browser/Utils/HslColorManager.js

@@ -0,0 +1,40 @@
+import { getRangeValue, parseAlpha } from "./NumberUtils";
+import { hslToRgb, hslaToRgba } from "./ColorUtils";
+export class HslColorManager {
+    constructor() {
+        this.key = "hsl";
+        this.stringPrefix = "hsl";
+    }
+    handleColor(color) {
+        var _a;
+        const colorValue = color.value, hslColor = (_a = colorValue.hsl) !== null && _a !== void 0 ? _a : color.value;
+        if (hslColor.h !== undefined && hslColor.s !== undefined && hslColor.l !== undefined) {
+            return hslToRgb(hslColor);
+        }
+    }
+    handleRangeColor(color) {
+        var _a;
+        const colorValue = color.value, hslColor = (_a = colorValue.hsl) !== null && _a !== void 0 ? _a : color.value;
+        if (hslColor.h !== undefined && hslColor.l !== undefined) {
+            return hslToRgb({
+                h: getRangeValue(hslColor.h),
+                l: getRangeValue(hslColor.l),
+                s: getRangeValue(hslColor.s),
+            });
+        }
+    }
+    parseString(input) {
+        if (!input.startsWith("hsl")) {
+            return;
+        }
+        const regex = /hsla?\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(,\s*([\d.%]+)\s*)?\)/i, result = regex.exec(input);
+        return result
+            ? hslaToRgba({
+                a: result.length > 4 ? parseAlpha(result[5]) : 1,
+                h: parseInt(result[1], 10),
+                l: parseInt(result[3], 10),
+                s: parseInt(result[2], 10),
+            })
+            : undefined;
+    }
+}