tsparticles 1.42.2 → 1.43.0

package/cjs/Plugins/Emitters/index.js

@@ -0,0 +1,117 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _EmittersPlugin_engine;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadEmittersPlugin = void 0;
+const CircleShape_1 = require("./Shapes/Circle/CircleShape");
+const Emitter_1 = require("./Options/Classes/Emitter");
+const Emitters_1 = require("./Emitters");
+const ShapeManager_1 = require("./ShapeManager");
+const SquareShape_1 = require("./Shapes/Square/SquareShape");
+const Utils_1 = require("../../Utils/Utils");
+class EmittersPlugin {
+    constructor(engine) {
+        _EmittersPlugin_engine.set(this, void 0);
+        __classPrivateFieldSet(this, _EmittersPlugin_engine, engine, "f");
+        this.id = "emitters";
+    }
+    getPlugin(container) {
+        return new Emitters_1.Emitters(__classPrivateFieldGet(this, _EmittersPlugin_engine, "f"), container);
+    }
+    needsPlugin(options) {
+        var _a, _b, _c;
+        if (options === undefined) {
+            return false;
+        }
+        const emitters = options.emitters;
+        return ((emitters instanceof Array && !!emitters.length) ||
+            emitters !== undefined ||
+            (!!((_c = (_b = (_a = options.interactivity) === null || _a === void 0 ? void 0 : _a.events) === null || _b === void 0 ? void 0 : _b.onClick) === null || _c === void 0 ? void 0 : _c.mode) &&
+                (0, Utils_1.isInArray)("emitter", options.interactivity.events.onClick.mode)));
+    }
+    loadOptions(options, source) {
+        var _a, _b;
+        if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
+            return;
+        }
+        const optionsCast = options;
+        if (source === null || source === void 0 ? void 0 : source.emitters) {
+            if ((source === null || source === void 0 ? void 0 : source.emitters) instanceof Array) {
+                optionsCast.emitters = source === null || source === void 0 ? void 0 : source.emitters.map((s) => {
+                    const tmp = new Emitter_1.Emitter();
+                    tmp.load(s);
+                    return tmp;
+                });
+            }
+            else {
+                let emitterOptions = optionsCast.emitters;
+                if ((emitterOptions === null || emitterOptions === void 0 ? void 0 : emitterOptions.load) === undefined) {
+                    optionsCast.emitters = emitterOptions = new Emitter_1.Emitter();
+                }
+                emitterOptions.load(source === null || source === void 0 ? void 0 : source.emitters);
+            }
+        }
+        const interactivityEmitters = (_b = (_a = source === null || source === void 0 ? void 0 : source.interactivity) === null || _a === void 0 ? void 0 : _a.modes) === null || _b === void 0 ? void 0 : _b.emitters;
+        if (interactivityEmitters) {
+            if (interactivityEmitters instanceof Array) {
+                optionsCast.interactivity.modes.emitters = interactivityEmitters.map((s) => {
+                    const tmp = new Emitter_1.Emitter();
+                    tmp.load(s);
+                    return tmp;
+                });
+            }
+            else {
+                let emitterOptions = optionsCast.interactivity.modes.emitters;
+                if ((emitterOptions === null || emitterOptions === void 0 ? void 0 : emitterOptions.load) === undefined) {
+                    optionsCast.interactivity.modes.emitters = emitterOptions = new Emitter_1.Emitter();
+                }
+                emitterOptions.load(interactivityEmitters);
+            }
+        }
+    }
+}
+_EmittersPlugin_engine = new WeakMap();
+async function loadEmittersPlugin(engine) {
+    if (!engine.emitterShapeManager) {
+        engine.emitterShapeManager = new ShapeManager_1.ShapeManager(engine);
+    }
+    if (!engine.addEmitterShape) {
+        engine.addEmitterShape = (name, shape) => {
+            var _a;
+            (_a = engine.emitterShapeManager) === null || _a === void 0 ? void 0 : _a.addShape(name, shape);
+        };
+    }
+    const plugin = new EmittersPlugin(engine);
+    await engine.addPlugin(plugin);
+    engine.addEmitterShape("circle", new CircleShape_1.CircleShape());
+    engine.addEmitterShape("square", new SquareShape_1.SquareShape());
+}
+exports.loadEmittersPlugin = loadEmittersPlugin;
+__exportStar(require("./EmittersEngine"), exports);
+__exportStar(require("./Enums/EmitterClickMode"), exports);
+__exportStar(require("./Enums/EmitterShapeType"), exports);
+__exportStar(require("./Options/Interfaces/IEmitterOptions"), exports);

package/cjs/Plugins/PolygonMask/Options/Classes/PolygonMask.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PolygonMask = void 0;
+const PolygonMaskDraw_1 = require("./PolygonMaskDraw");
+const PolygonMaskInline_1 = require("./PolygonMaskInline");
+const PolygonMaskLocalSvg_1 = require("./PolygonMaskLocalSvg");
+const PolygonMaskMove_1 = require("./PolygonMaskMove");
+const Utils_1 = require("../../../../Utils/Utils");
+class PolygonMask {
+    constructor() {
+        this.draw = new PolygonMaskDraw_1.PolygonMaskDraw();
+        this.enable = false;
+        this.inline = new PolygonMaskInline_1.PolygonMaskInline();
+        this.move = new PolygonMaskMove_1.PolygonMaskMove();
+        this.scale = 1;
+        this.type = "none";
+    }
+    get inlineArrangement() {
+        return this.inline.arrangement;
+    }
+    set inlineArrangement(value) {
+        this.inline.arrangement = value;
+    }
+    load(data) {
+        var _a;
+        if (!data) {
+            return;
+        }
+        this.draw.load(data.draw);
+        const inline = (_a = data.inline) !== null && _a !== void 0 ? _a : {
+            arrangement: data.inlineArrangement,
+        };
+        if (inline !== undefined) {
+            this.inline.load(inline);
+        }
+        this.move.load(data.move);
+        if (data.scale !== undefined) {
+            this.scale = data.scale;
+        }
+        if (data.type !== undefined) {
+            this.type = data.type;
+        }
+        if (data.enable !== undefined) {
+            this.enable = data.enable;
+        }
+        else {
+            this.enable = this.type !== "none";
+        }
+        if (data.url !== undefined) {
+            this.url = data.url;
+        }
+        if (data.data !== undefined) {
+            if (typeof data.data === "string") {
+                this.data = data.data;
+            }
+            else {
+                this.data = new PolygonMaskLocalSvg_1.PolygonMaskLocalSvg();
+                this.data.load(data.data);
+            }
+        }
+        if (data.position !== undefined) {
+            this.position = (0, Utils_1.deepExtend)({}, data.position);
+        }
+    }
+}
+exports.PolygonMask = PolygonMask;

package/cjs/Plugins/PolygonMask/Options/Classes/PolygonMaskDrawStroke.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PolygonMaskDrawStroke = void 0;
+const OptionsColor_1 = require("../../../../Options/Classes/OptionsColor");
+const ColorUtils_1 = require("../../../../Utils/ColorUtils");
+class PolygonMaskDrawStroke {
+    constructor() {
+        this.color = new OptionsColor_1.OptionsColor();
+        this.width = 0.5;
+        this.opacity = 1;
+    }
+    load(data) {
+        var _a;
+        if (!data) {
+            return;
+        }
+        this.color = OptionsColor_1.OptionsColor.create(this.color, data.color);
+        if (typeof this.color.value === "string") {
+            this.opacity = (_a = (0, ColorUtils_1.stringToAlpha)(this.color.value)) !== null && _a !== void 0 ? _a : this.opacity;
+        }
+        if (data.opacity !== undefined) {
+            this.opacity = data.opacity;
+        }
+        if (data.width !== undefined) {
+            this.width = data.width;
+        }
+    }
+}
+exports.PolygonMaskDrawStroke = PolygonMaskDrawStroke;

package/cjs/Plugins/PolygonMask/PolygonMaskInstance.js

@@ -0,0 +1,363 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PolygonMaskInstance = void 0;
+const Utils_1 = require("./Utils");
+const Utils_2 = require("../../Utils/Utils");
+const NumberUtils_1 = require("../../Utils/NumberUtils");
+const Constants_1 = require("../../Core/Utils/Constants");
+const PolygonMask_1 = require("./Options/Classes/PolygonMask");
+class PolygonMaskInstance {
+    constructor(container) {
+        this.container = container;
+        this.dimension = {
+            height: 0,
+            width: 0,
+        };
+        this.path2DSupported = !!window.Path2D;
+        this.options = new PolygonMask_1.PolygonMask();
+        this.polygonMaskMoveRadius = this.options.move.radius * container.retina.pixelRatio;
+    }
+    async initAsync(options) {
+        this.options.load(options === null || options === void 0 ? void 0 : options.polygon);
+        const polygonMaskOptions = this.options;
+        this.polygonMaskMoveRadius = polygonMaskOptions.move.radius * this.container.retina.pixelRatio;
+        if (polygonMaskOptions.enable) {
+            await this.initRawData();
+        }
+    }
+    resize() {
+        const container = this.container, options = this.options;
+        if (!(options.enable && options.type !== "none")) {
+            return;
+        }
+        if (this.redrawTimeout) {
+            clearTimeout(this.redrawTimeout);
+        }
+        this.redrawTimeout = window.setTimeout(async () => {
+            await this.initRawData(true);
+            await container.particles.redraw();
+        }, 250);
+    }
+    stop() {
+        delete this.raw;
+        delete this.paths;
+    }
+    particlesInitialization() {
+        const options = this.options;
+        if (options.enable &&
+            options.type === "inline" &&
+            (options.inline.arrangement === "one-per-point" ||
+                options.inline.arrangement === "per-point")) {
+            this.drawPoints();
+            return true;
+        }
+        return false;
+    }
+    particlePosition(position) {
+        var _a, _b;
+        const options = this.options;
+        if (!(options.enable && ((_b = (_a = this.raw) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0)) {
+            return;
+        }
+        return (0, Utils_2.deepExtend)({}, position ? position : this.randomPoint());
+    }
+    particleBounce(particle, delta, direction) {
+        return this.polygonBounce(particle, delta, direction);
+    }
+    clickPositionValid(position) {
+        const options = this.options;
+        return (options.enable &&
+            options.type !== "none" &&
+            options.type !== "inline" &&
+            this.checkInsidePolygon(position));
+    }
+    draw(context) {
+        var _a;
+        if (!((_a = this.paths) === null || _a === void 0 ? void 0 : _a.length)) {
+            return;
+        }
+        const options = this.options, polygonDraw = options.draw;
+        if (!options.enable || !polygonDraw.enable) {
+            return;
+        }
+        const rawData = this.raw;
+        for (const path of this.paths) {
+            const path2d = path.path2d, path2dSupported = this.path2DSupported;
+            if (!context) {
+                continue;
+            }
+            if (path2dSupported && path2d && this.offset) {
+                (0, Utils_1.drawPolygonMaskPath)(context, path2d, polygonDraw.stroke, this.offset);
+            }
+            else if (rawData) {
+                (0, Utils_1.drawPolygonMask)(context, rawData, polygonDraw.stroke);
+            }
+        }
+    }
+    polygonBounce(particle, _delta, direction) {
+        const options = this.options;
+        if (!this.raw || !options.enable || direction !== "top") {
+            return false;
+        }
+        if (options.type === "inside" || options.type === "outside") {
+            let closest, dx, dy;
+            const pos = particle.getPosition(), radius = particle.getRadius();
+            for (let i = 0, j = this.raw.length - 1; i < this.raw.length; j = i++) {
+                const pi = this.raw[i], pj = this.raw[j];
+                closest = (0, Utils_1.calcClosestPtOnSegment)(pi, pj, pos);
+                const dist = (0, NumberUtils_1.getDistances)(pos, closest);
+                [dx, dy] = [dist.dx, dist.dy];
+                if (dist.distance < radius) {
+                    (0, Utils_1.segmentBounce)(pi, pj, particle.velocity);
+                    return true;
+                }
+            }
+            if (closest && dx !== undefined && dy !== undefined && !this.checkInsidePolygon(pos)) {
+                const factor = { x: 1, y: 1 };
+                if (particle.position.x >= closest.x) {
+                    factor.x = -1;
+                }
+                if (particle.position.y >= closest.y) {
+                    factor.y = -1;
+                }
+                particle.position.x = closest.x + radius * 2 * factor.x;
+                particle.position.y = closest.y + radius * 2 * factor.y;
+                particle.velocity.mult(-1);
+                return true;
+            }
+        }
+        else if (options.type === "inline" && particle.initialPosition) {
+            const dist = (0, NumberUtils_1.getDistance)(particle.initialPosition, particle.getPosition());
+            if (dist > this.polygonMaskMoveRadius) {
+                particle.velocity.x = particle.velocity.y / 2 - particle.velocity.x;
+                particle.velocity.y = particle.velocity.x / 2 - particle.velocity.y;
+                return true;
+            }
+        }
+        return false;
+    }
+    checkInsidePolygon(position) {
+        var _a, _b;
+        const container = this.container, options = this.options;
+        if (!options.enable || options.type === "none" || options.type === "inline") {
+            return true;
+        }
+        if (!this.raw) {
+            throw new Error(Constants_1.Constants.noPolygonFound);
+        }
+        const canvasSize = container.canvas.size, x = (_a = position === null || position === void 0 ? void 0 : position.x) !== null && _a !== void 0 ? _a : Math.random() * canvasSize.width, y = (_b = position === null || position === void 0 ? void 0 : position.y) !== null && _b !== void 0 ? _b : Math.random() * canvasSize.height;
+        let inside = false;
+        for (let i = 0, j = this.raw.length - 1; i < this.raw.length; j = i++) {
+            const pi = this.raw[i], pj = this.raw[j], intersect = pi.y > y !== pj.y > y && x < ((pj.x - pi.x) * (y - pi.y)) / (pj.y - pi.y) + pi.x;
+            if (intersect) {
+                inside = !inside;
+            }
+        }
+        return options.type === "inside"
+            ? inside
+            : options.type === "outside"
+                ? !inside
+                : false;
+    }
+    parseSvgPath(xml, force) {
+        var _a, _b, _c;
+        const forceDownload = force !== null && force !== void 0 ? force : false;
+        if (this.paths !== undefined && !forceDownload) {
+            return this.raw;
+        }
+        const container = this.container, options = this.options, parser = new DOMParser(), doc = parser.parseFromString(xml, "image/svg+xml"), svg = doc.getElementsByTagName("svg")[0];
+        let svgPaths = svg.getElementsByTagName("path");
+        if (!svgPaths.length) {
+            svgPaths = doc.getElementsByTagName("path");
+        }
+        this.paths = [];
+        for (let i = 0; i < svgPaths.length; i++) {
+            const path = svgPaths.item(i);
+            if (path) {
+                this.paths.push({
+                    element: path,
+                    length: path.getTotalLength(),
+                });
+            }
+        }
+        const pxRatio = container.retina.pixelRatio, scale = options.scale / pxRatio;
+        this.dimension.width = parseFloat((_a = svg.getAttribute("width")) !== null && _a !== void 0 ? _a : "0") * scale;
+        this.dimension.height = parseFloat((_b = svg.getAttribute("height")) !== null && _b !== void 0 ? _b : "0") * scale;
+        const position = (_c = options.position) !== null && _c !== void 0 ? _c : {
+            x: 50,
+            y: 50,
+        };
+        this.offset = {
+            x: (container.canvas.size.width * position.x) / (100 * pxRatio) - this.dimension.width / 2,
+            y: (container.canvas.size.height * position.y) / (100 * pxRatio) - this.dimension.height / 2,
+        };
+        return (0, Utils_1.parsePaths)(this.paths, scale, this.offset);
+    }
+    async downloadSvgPath(svgUrl, force) {
+        const options = this.options, url = svgUrl || options.url, forceDownload = force !== null && force !== void 0 ? force : false;
+        if (!url || (this.paths !== undefined && !forceDownload)) {
+            return this.raw;
+        }
+        const req = await fetch(url);
+        if (!req.ok) {
+            throw new Error("tsParticles Error - Error occurred during polygon mask download");
+        }
+        return this.parseSvgPath(await req.text(), force);
+    }
+    drawPoints() {
+        if (!this.raw) {
+            return;
+        }
+        for (const item of this.raw) {
+            this.container.particles.addParticle({
+                x: item.x,
+                y: item.y,
+            });
+        }
+    }
+    randomPoint() {
+        const container = this.container, options = this.options;
+        let position;
+        if (options.type === "inline") {
+            switch (options.inline.arrangement) {
+                case "random-point":
+                    position = this.getRandomPoint();
+                    break;
+                case "random-length":
+                    position = this.getRandomPointByLength();
+                    break;
+                case "equidistant":
+                    position = this.getEquidistantPointByIndex(container.particles.count);
+                    break;
+                case "one-per-point":
+                case "per-point":
+                default:
+                    position = this.getPointByIndex(container.particles.count);
+            }
+        }
+        else {
+            position = {
+                x: Math.random() * container.canvas.size.width,
+                y: Math.random() * container.canvas.size.height,
+            };
+        }
+        if (this.checkInsidePolygon(position)) {
+            return position;
+        }
+        else {
+            return this.randomPoint();
+        }
+    }
+    getRandomPoint() {
+        if (!this.raw || !this.raw.length) {
+            throw new Error(Constants_1.Constants.noPolygonDataLoaded);
+        }
+        const coords = (0, Utils_2.itemFromArray)(this.raw);
+        return {
+            x: coords.x,
+            y: coords.y,
+        };
+    }
+    getRandomPointByLength() {
+        var _a, _b, _c;
+        const options = this.options;
+        if (!this.raw || !this.raw.length || !((_a = this.paths) === null || _a === void 0 ? void 0 : _a.length)) {
+            throw new Error(Constants_1.Constants.noPolygonDataLoaded);
+        }
+        const path = (0, Utils_2.itemFromArray)(this.paths), distance = Math.floor(Math.random() * path.length) + 1, point = path.element.getPointAtLength(distance);
+        return {
+            x: point.x * options.scale + (((_b = this.offset) === null || _b === void 0 ? void 0 : _b.x) || 0),
+            y: point.y * options.scale + (((_c = this.offset) === null || _c === void 0 ? void 0 : _c.y) || 0),
+        };
+    }
+    getEquidistantPointByIndex(index) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const options = this.container.actualOptions, polygonMaskOptions = this.options;
+        if (!this.raw || !this.raw.length || !((_a = this.paths) === null || _a === void 0 ? void 0 : _a.length))
+            throw new Error(Constants_1.Constants.noPolygonDataLoaded);
+        let offset = 0, point;
+        const totalLength = this.paths.reduce((tot, path) => tot + path.length, 0), distance = totalLength / options.particles.number.value;
+        for (const path of this.paths) {
+            const pathDistance = distance * index - offset;
+            if (pathDistance <= path.length) {
+                point = path.element.getPointAtLength(pathDistance);
+                break;
+            }
+            else {
+                offset += path.length;
+            }
+        }
+        return {
+            x: ((_b = point === null || point === void 0 ? void 0 : point.x) !== null && _b !== void 0 ? _b : 0) * polygonMaskOptions.scale + ((_d = (_c = this.offset) === null || _c === void 0 ? void 0 : _c.x) !== null && _d !== void 0 ? _d : 0),
+            y: ((_e = point === null || point === void 0 ? void 0 : point.y) !== null && _e !== void 0 ? _e : 0) * polygonMaskOptions.scale + ((_g = (_f = this.offset) === null || _f === void 0 ? void 0 : _f.y) !== null && _g !== void 0 ? _g : 0),
+        };
+    }
+    getPointByIndex(index) {
+        if (!this.raw || !this.raw.length) {
+            throw new Error(Constants_1.Constants.noPolygonDataLoaded);
+        }
+        const coords = this.raw[index % this.raw.length];
+        return {
+            x: coords.x,
+            y: coords.y,
+        };
+    }
+    createPath2D() {
+        var _a, _b;
+        const options = this.options;
+        if (!this.path2DSupported || !((_a = this.paths) === null || _a === void 0 ? void 0 : _a.length)) {
+            return;
+        }
+        for (const path of this.paths) {
+            const pathData = (_b = path.element) === null || _b === void 0 ? void 0 : _b.getAttribute("d");
+            if (pathData) {
+                const path2d = new Path2D(pathData), matrix = document.createElementNS("http://www.w3.org/2000/svg", "svg").createSVGMatrix(), finalPath = new Path2D(), transform = matrix.scale(options.scale);
+                if (finalPath.addPath) {
+                    finalPath.addPath(path2d, transform);
+                    path.path2d = finalPath;
+                }
+                else {
+                    delete path.path2d;
+                }
+            }
+            else {
+                delete path.path2d;
+            }
+            if (path.path2d || !this.raw) {
+                continue;
+            }
+            path.path2d = new Path2D();
+            path.path2d.moveTo(this.raw[0].x, this.raw[0].y);
+            this.raw.forEach((pos, i) => {
+                var _a;
+                if (i > 0) {
+                    (_a = path.path2d) === null || _a === void 0 ? void 0 : _a.lineTo(pos.x, pos.y);
+                }
+            });
+            path.path2d.closePath();
+        }
+    }
+    async initRawData(force) {
+        const options = this.options;
+        if (options.url) {
+            this.raw = await this.downloadSvgPath(options.url, force);
+        }
+        else if (options.data) {
+            const data = options.data;
+            let svg;
+            if (typeof data !== "string") {
+                const path = data.path instanceof Array
+                    ? data.path.map((t) => `<path d="${t}" />`).join("")
+                    : `<path d="${data.path}" />`;
+                const namespaces = 'xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"';
+                svg = `<svg ${namespaces} width="${data.size.width}" height="${data.size.height}">${path}</svg>`;
+            }
+            else {
+                svg = data;
+            }
+            this.raw = this.parseSvgPath(svg, force);
+        }
+        this.createPath2D();
+    }
+}
+exports.PolygonMaskInstance = PolygonMaskInstance;