@tsparticles/plugin-polygon-mask 4.0.0-beta.0 → 4.0.0-beta.10

package/umd/PolygonMaskInstance.js

@@ -1,425 +0,0 @@
-(function (factory) {
-    if (typeof module === "object" && typeof module.exports === "object") {
-        var v = factory(require, exports);
-        if (v !== undefined) module.exports = v;
-    }
-    else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./pathseg.js", "@tsparticles/engine", "./utils.js", "./Enums/PolygonMaskInlineArrangement.js", "./Enums/PolygonMaskType.js"], factory);
-    }
-})(function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.PolygonMaskInstance = void 0;
-    require("./pathseg.js");
-    const engine_1 = require("@tsparticles/engine");
-    const utils_js_1 = require("./utils.js");
-    const PolygonMaskInlineArrangement_js_1 = require("./Enums/PolygonMaskInlineArrangement.js");
-    const PolygonMaskType_js_1 = require("./Enums/PolygonMaskType.js");
-    const noPolygonDataLoaded = `No polygon data loaded.`, noPolygonFound = `No polygon found, you need to specify SVG url in config.`;
-    class PolygonMaskInstance {
-        dimension;
-        offset;
-        paths;
-        raw;
-        redrawTimeout;
-        _container;
-        _engine;
-        _moveRadius;
-        _scale;
-        constructor(container, engine) {
-            this._container = container;
-            this._engine = engine;
-            this.dimension = {
-                height: 0,
-                width: 0,
-            };
-            this._moveRadius = 0;
-            this._scale = 1;
-        }
-        clickPositionValid(position) {
-            const options = this._container.actualOptions.polygon;
-            return (!!options?.enable &&
-                options.type !== PolygonMaskType_js_1.PolygonMaskType.none &&
-                options.type !== PolygonMaskType_js_1.PolygonMaskType.inline &&
-                this._checkInsidePolygon(position));
-        }
-        draw(context) {
-            if (!this.paths?.length) {
-                return;
-            }
-            const options = this._container.actualOptions.polygon;
-            if (!options?.enable) {
-                return;
-            }
-            const polygonDraw = options.draw;
-            if (!polygonDraw.enable) {
-                return;
-            }
-            const rawData = this.raw;
-            for (const path of this.paths) {
-                const path2d = path.path2d;
-                if (path2d && this.offset) {
-                    (0, utils_js_1.drawPolygonMaskPath)(this._engine, context, path2d, polygonDraw.stroke, this.offset, this._container.hdr);
-                }
-                else if (rawData) {
-                    (0, utils_js_1.drawPolygonMask)(this._engine, context, rawData, polygonDraw.stroke, this._container.hdr);
-                }
-            }
-        }
-        async init() {
-            const container = this._container, polygonMaskOptions = container.actualOptions.polygon, pxRatio = container.retina.pixelRatio;
-            if (!polygonMaskOptions) {
-                return;
-            }
-            this._moveRadius = polygonMaskOptions.move.radius * pxRatio;
-            this._scale = polygonMaskOptions.scale * pxRatio;
-            if (polygonMaskOptions.enable) {
-                await this._initRawData();
-            }
-        }
-        particleBounce(particle, delta, direction) {
-            return this._polygonBounce(particle, delta, direction);
-        }
-        particlePosition(position) {
-            const options = this._container.actualOptions.polygon, defaultLength = 0;
-            if (!(options?.enable && (this.raw?.length ?? defaultLength) > defaultLength)) {
-                return;
-            }
-            return (0, engine_1.deepExtend)({}, position ?? this._randomPoint());
-        }
-        particlesInitialization() {
-            const options = this._container.actualOptions.polygon;
-            if (options?.enable &&
-                options.type === PolygonMaskType_js_1.PolygonMaskType.inline &&
-                (options.inline.arrangement === PolygonMaskInlineArrangement_js_1.PolygonMaskInlineArrangement.onePerPoint ||
-                    options.inline.arrangement === PolygonMaskInlineArrangement_js_1.PolygonMaskInlineArrangement.perPoint)) {
-                this._drawPoints();
-                return true;
-            }
-            return false;
-        }
-        resize() {
-            const container = this._container, options = container.actualOptions.polygon;
-            if (!(options?.enable && options.type !== PolygonMaskType_js_1.PolygonMaskType.none)) {
-                return;
-            }
-            if (this.redrawTimeout) {
-                clearTimeout(this.redrawTimeout);
-            }
-            const timeout = 250;
-            this.redrawTimeout = setTimeout(() => {
-                void (async () => {
-                    await this._initRawData(true);
-                    await container.particles.redraw();
-                })();
-            }, timeout);
-        }
-        stop() {
-            delete this.raw;
-            delete this.paths;
-        }
-        _checkInsidePolygon = position => {
-            const container = this._container, options = container.actualOptions.polygon;
-            if (!options?.enable || options.type === PolygonMaskType_js_1.PolygonMaskType.none || options.type === PolygonMaskType_js_1.PolygonMaskType.inline) {
-                return true;
-            }
-            if (!this.raw) {
-                throw new Error(noPolygonFound);
-            }
-            const canvasSize = container.canvas.size, x = position?.x ?? (0, engine_1.getRandom)() * canvasSize.width, y = position?.y ?? (0, engine_1.getRandom)() * canvasSize.height, indexOffset = 1;
-            let inside = false;
-            for (let i = 0, j = this.raw.length - indexOffset; i < this.raw.length; j = i++) {
-                const pi = this.raw[i], pj = this.raw[j];
-                if (!pi || !pj) {
-                    continue;
-                }
-                const 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;
-                }
-            }
-            if (options.type === PolygonMaskType_js_1.PolygonMaskType.inside) {
-                return inside;
-            }
-            else {
-                return !inside;
-            }
-        };
-        _createPath2D = () => {
-            const container = this._container, options = container.actualOptions.polygon;
-            if (!options || !this.paths?.length) {
-                return;
-            }
-            for (const path of this.paths) {
-                const pathData = path.element.getAttribute("d");
-                if (pathData) {
-                    const path2d = new Path2D(pathData), matrix = (0, engine_1.safeDocument)().createElementNS("http://www.w3.org/2000/svg", "svg").createSVGMatrix(), finalPath = new Path2D(), transform = matrix.scale(this._scale);
-                    finalPath.addPath(path2d, transform);
-                    path.path2d = finalPath;
-                }
-                else {
-                    delete path.path2d;
-                }
-                if (path.path2d ?? !this.raw) {
-                    continue;
-                }
-                path.path2d = new Path2D();
-                const firstIndex = 0, firstPoint = this.raw[firstIndex];
-                if (!firstPoint) {
-                    continue;
-                }
-                path.path2d.moveTo(firstPoint.x, firstPoint.y);
-                this.raw.forEach((pos, i) => {
-                    if (i > firstIndex) {
-                        path.path2d?.lineTo(pos.x, pos.y);
-                    }
-                });
-                path.path2d.closePath();
-            }
-        };
-        _downloadSvgPath = async (svgUrl, force) => {
-            const options = this._container.actualOptions.polygon;
-            if (!options) {
-                return;
-            }
-            const url = svgUrl ?? options.url, forceDownload = force ?? false;
-            if (!url || (this.paths !== undefined && !forceDownload)) {
-                return this.raw;
-            }
-            const req = await fetch(url);
-            if (!req.ok) {
-                throw new 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,
-                });
-            }
-        };
-        _getEquidistantPointByIndex = index => {
-            const container = this._container, options = container.actualOptions, polygonMaskOptions = options.polygon;
-            if (!polygonMaskOptions) {
-                return;
-            }
-            if (!this.raw?.length || !this.paths?.length) {
-                throw new Error(noPolygonDataLoaded);
-            }
-            let offset = 0, point;
-            const baseAccumulator = 0, totalLength = this.paths.reduce((tot, path) => tot + path.length, baseAccumulator), 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;
-                }
-            }
-            const scale = this._scale;
-            return {
-                x: (point?.x ?? engine_1.originPoint.x) * scale + (this.offset?.x ?? engine_1.originPoint.x),
-                y: (point?.y ?? engine_1.originPoint.y) * scale + (this.offset?.y ?? engine_1.originPoint.y),
-            };
-        };
-        _getPointByIndex = index => {
-            if (!this.raw?.length) {
-                throw new Error(noPolygonDataLoaded);
-            }
-            const coords = this.raw[index % this.raw.length];
-            if (!coords) {
-                return;
-            }
-            return {
-                x: coords.x,
-                y: coords.y,
-            };
-        };
-        _getRandomPoint = () => {
-            if (!this.raw?.length) {
-                throw new Error(noPolygonDataLoaded);
-            }
-            const coords = (0, engine_1.itemFromArray)(this.raw);
-            if (!coords) {
-                return;
-            }
-            return {
-                x: coords.x,
-                y: coords.y,
-            };
-        };
-        _getRandomPointByLength = () => {
-            const container = this._container, options = container.actualOptions.polygon;
-            if (!options) {
-                return;
-            }
-            if (!this.raw?.length || !this.paths?.length) {
-                throw new Error(noPolygonDataLoaded);
-            }
-            const path = (0, engine_1.itemFromArray)(this.paths);
-            if (!path) {
-                return;
-            }
-            const offset = 1, distance = Math.floor((0, engine_1.getRandom)() * path.length) + offset, point = path.element.getPointAtLength(distance), scale = this._scale;
-            return {
-                x: point.x * scale + (this.offset?.x ?? engine_1.originPoint.x),
-                y: point.y * scale + (this.offset?.y ?? engine_1.originPoint.y),
-            };
-        };
-        _initRawData = async (force) => {
-            const options = this._container.actualOptions.polygon;
-            if (!options) {
-                return;
-            }
-            if (options.url) {
-                this.raw = await this._downloadSvgPath(options.url, force);
-            }
-            else if (options.data) {
-                const data = options.data;
-                let svg;
-                if ((0, engine_1.isString)(data)) {
-                    svg = data;
-                }
-                else {
-                    const getPath = (p) => `<path d="${p}" />`, path = (0, engine_1.isArray)(data.path) ? data.path.map(getPath).join("") : getPath(data.path), namespaces = 'xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"';
-                    svg = `<svg ${namespaces} width="${data.size.width.toString()}" height="${data.size.height.toString()}">${path}</svg>`;
-                }
-                this.raw = this._parseSvgPath(svg, force);
-            }
-            this._createPath2D();
-            this._engine.dispatchEvent("polygonMaskLoaded", {
-                container: this._container,
-            });
-        };
-        _parseSvgPath = (xml, force) => {
-            const forceDownload = force ?? false;
-            if (this.paths !== undefined && !forceDownload) {
-                return this.raw;
-            }
-            const container = this._container, options = container.actualOptions.polygon;
-            if (!options) {
-                return;
-            }
-            const parser = new DOMParser(), doc = parser.parseFromString(xml, "image/svg+xml"), firstIndex = 0, svg = doc.getElementsByTagName("svg")[firstIndex];
-            if (!svg) {
-                return;
-            }
-            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 scale = this._scale;
-            this.dimension.width = parseFloat(svg.getAttribute("width") ?? "0") * scale;
-            this.dimension.height = parseFloat(svg.getAttribute("height") ?? "0") * scale;
-            const position = options.position ?? {
-                x: 50,
-                y: 50,
-            }, canvasSize = container.canvas.size;
-            this.offset = {
-                x: (canvasSize.width * position.x) / engine_1.percentDenominator - this.dimension.width * engine_1.half,
-                y: (canvasSize.height * position.y) / engine_1.percentDenominator - this.dimension.height * engine_1.half,
-            };
-            return (0, utils_js_1.parsePaths)(this.paths, scale, this.offset);
-        };
-        _polygonBounce = (particle, _delta, direction) => {
-            const options = this._container.actualOptions.polygon;
-            if (!this.raw || !options?.enable || direction !== engine_1.OutModeDirection.top) {
-                return false;
-            }
-            if (options.type === PolygonMaskType_js_1.PolygonMaskType.inside || options.type === PolygonMaskType_js_1.PolygonMaskType.outside) {
-                let closest, dx, dy;
-                const pos = particle.getPosition(), radius = particle.getRadius(), offset = 1;
-                for (let i = 0, j = this.raw.length - offset; i < this.raw.length; j = i++) {
-                    const pi = this.raw[i], pj = this.raw[j];
-                    if (!pi || !pj) {
-                        continue;
-                    }
-                    closest = (0, utils_js_1.calcClosestPointOnSegment)(pi, pj, pos);
-                    const dist = (0, engine_1.getDistances)(pos, closest);
-                    [dx, dy] = [dist.dx, dist.dy];
-                    if (dist.distance < radius) {
-                        (0, utils_js_1.segmentBounce)(pi, pj, particle.velocity);
-                        return true;
-                    }
-                }
-                if (closest && dx !== undefined && dy !== undefined && !this._checkInsidePolygon(pos)) {
-                    const factor = { x: 1, y: 1 }, diameter = radius * engine_1.double, inverse = -1;
-                    if (pos.x >= closest.x) {
-                        factor.x = -1;
-                    }
-                    if (pos.y >= closest.y) {
-                        factor.y = -1;
-                    }
-                    particle.position.x = closest.x + diameter * factor.x;
-                    particle.position.y = closest.y + diameter * factor.y;
-                    particle.velocity.mult(inverse);
-                    return true;
-                }
-            }
-            else if (options.type === PolygonMaskType_js_1.PolygonMaskType.inline) {
-                const dist = (0, engine_1.getDistance)(particle.initialPosition, particle.getPosition()), { velocity } = particle;
-                if (dist > this._moveRadius) {
-                    velocity.x = velocity.y * engine_1.half - velocity.x;
-                    velocity.y = velocity.x * engine_1.half - velocity.y;
-                    return true;
-                }
-            }
-            return false;
-        };
-        _randomPoint = () => {
-            const container = this._container, options = container.actualOptions.polygon;
-            if (!options) {
-                return;
-            }
-            let position;
-            if (options.type === PolygonMaskType_js_1.PolygonMaskType.inline) {
-                switch (options.inline.arrangement) {
-                    case PolygonMaskInlineArrangement_js_1.PolygonMaskInlineArrangement.randomPoint:
-                        position = this._getRandomPoint();
-                        break;
-                    case PolygonMaskInlineArrangement_js_1.PolygonMaskInlineArrangement.randomLength:
-                        position = this._getRandomPointByLength();
-                        break;
-                    case PolygonMaskInlineArrangement_js_1.PolygonMaskInlineArrangement.equidistant:
-                        position = this._getEquidistantPointByIndex(container.particles.count);
-                        break;
-                    case PolygonMaskInlineArrangement_js_1.PolygonMaskInlineArrangement.onePerPoint:
-                    case PolygonMaskInlineArrangement_js_1.PolygonMaskInlineArrangement.perPoint:
-                    default:
-                        position = this._getPointByIndex(container.particles.count);
-                }
-            }
-            else {
-                const canvasSize = container.canvas.size;
-                position = {
-                    x: (0, engine_1.getRandom)() * canvasSize.width,
-                    y: (0, engine_1.getRandom)() * canvasSize.height,
-                };
-            }
-            if (this._checkInsidePolygon(position)) {
-                return position;
-            }
-            else {
-                return this._randomPoint();
-            }
-        };
-    }
-    exports.PolygonMaskInstance = PolygonMaskInstance;
-});

package/umd/PolygonMaskPlugin.js

@@ -1,75 +0,0 @@
-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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-(function (factory) {
-    if (typeof module === "object" && typeof module.exports === "object") {
-        var v = factory(require, exports);
-        if (v !== undefined) module.exports = v;
-    }
-    else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./Options/Classes/PolygonMask.js", "./Enums/PolygonMaskType.js"], factory);
-    }
-})(function (require, exports) {
-    "use strict";
-    var __syncRequire = typeof module === "object" && typeof module.exports === "object";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.PolygonMaskPlugin = void 0;
-    const PolygonMask_js_1 = require("./Options/Classes/PolygonMask.js");
-    const PolygonMaskType_js_1 = require("./Enums/PolygonMaskType.js");
-    class PolygonMaskPlugin {
-        id = "polygon-mask";
-        _engine;
-        constructor(engine) {
-            this._engine = engine;
-        }
-        async getPlugin(container) {
-            const { PolygonMaskInstance } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("./PolygonMaskInstance.js"))) : new Promise((resolve_1, reject_1) => { require(["./PolygonMaskInstance.js"], resolve_1, reject_1); }).then(__importStar));
-            return new PolygonMaskInstance(container, this._engine);
-        }
-        loadOptions(_container, options, source) {
-            if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
-                return;
-            }
-            let polygonOptions = options.polygon;
-            if (polygonOptions?.load === undefined) {
-                options.polygon = polygonOptions = new PolygonMask_js_1.PolygonMask(this._engine);
-            }
-            polygonOptions.load(source?.polygon);
-        }
-        needsPlugin(options) {
-            return (options?.polygon?.enable ??
-                (options?.polygon?.type !== undefined && options.polygon.type !== PolygonMaskType_js_1.PolygonMaskType.none));
-        }
-    }
-    exports.PolygonMaskPlugin = PolygonMaskPlugin;
-});

package/umd/index.js

@@ -1,60 +0,0 @@
-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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-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);
-};
-(function (factory) {
-    if (typeof module === "object" && typeof module.exports === "object") {
-        var v = factory(require, exports);
-        if (v !== undefined) module.exports = v;
-    }
-    else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./Enums/PolygonMaskInlineArrangement.js", "./Enums/PolygonMaskMoveType.js", "./Enums/PolygonMaskType.js"], factory);
-    }
-})(function (require, exports) {
-    "use strict";
-    var __syncRequire = typeof module === "object" && typeof module.exports === "object";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.loadPolygonMaskPlugin = loadPolygonMaskPlugin;
-    async function loadPolygonMaskPlugin(engine) {
-        engine.checkVersion("4.0.0-beta.0");
-        await engine.register(async (e) => {
-            const { PolygonMaskPlugin } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("./PolygonMaskPlugin.js"))) : new Promise((resolve_1, reject_1) => { require(["./PolygonMaskPlugin.js"], resolve_1, reject_1); }).then(__importStar));
-            e.addPlugin(new PolygonMaskPlugin(engine));
-        });
-    }
-    __exportStar(require("./Enums/PolygonMaskInlineArrangement.js"), exports);
-    __exportStar(require("./Enums/PolygonMaskMoveType.js"), exports);
-    __exportStar(require("./Enums/PolygonMaskType.js"), exports);
-});