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

package/umd/PolygonMaskInstance.js

@@ -17,310 +17,16 @@
     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._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;
-                }
-            };
-            this._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();
-                }
-            };
-            this._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);
-            };
-            this._drawPoints = () => {
-                if (!this.raw) {
-                    return;
-                }
-                for (const item of this.raw) {
-                    void this._container.particles.addParticle({
-                        x: item.x,
-                        y: item.y,
-                    });
-                }
-            };
-            this._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),
-                };
-            };
-            this._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,
-                };
-            };
-            this._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,
-                };
-            };
-            this._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),
-                };
-            };
-            this._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);
-                        const 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,
-                });
-            };
-            this._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);
-            };
-            this._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;
-            };
-            this._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();
-                }
-            };
             this._container = container;
             this._engine = engine;
             this.dimension = {
@@ -412,6 +118,308 @@
             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

@@ -47,8 +47,9 @@ var __importStar = (this && this.__importStar) || (function () {
     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.id = "polygonMask";
             this._engine = engine;
         }
         async getPlugin(container) {

package/umd/index.js

@@ -48,7 +48,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.loadPolygonMaskPlugin = loadPolygonMaskPlugin;
     async function loadPolygonMaskPlugin(engine) {
-        engine.checkVersion("4.0.0-alpha.5");
+        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));