@tsparticles/plugin-polygon-mask 3.0.3 → 3.2.0

package/719.min.js

@@ -0,0 +1,2 @@
+/*! For license information please see 719.min.js.LICENSE.txt */
+(this.webpackChunk_tsparticles_plugin_polygon_mask=this.webpackChunk_tsparticles_plugin_polygon_mask||[]).push([[719],{719:(t,i,e)=>{e.d(i,{PolygonMaskInstance:()=>c});var n=e(533);const s=`${n.errorPrefix} No polygon data loaded.`,a=`${n.errorPrefix} No polygon found, you need to specify SVG url in config.`,o=0,h=0,r=.5;class c{constructor(t,i){this._checkInsidePolygon=t=>{const i=this._container,e=i.actualOptions.polygon;if(!e?.enable||"none"===e.type||"inline"===e.type)return!0;if(!this.raw)throw new Error(a);const s=i.canvas.size,o=t?.x??(0,n.getRandom)()*s.width,h=t?.y??(0,n.getRandom)()*s.height;let r=!1;for(let t=0,i=this.raw.length-1;t<this.raw.length;i=t++){const e=this.raw[t],n=this.raw[i];e.y>h!=n.y>h&&o<(n.x-e.x)*(h-e.y)/(n.y-e.y)+e.x&&(r=!r)}return"inside"===e.type?r:"outside"===e.type&&!r},this._createPath2D=()=>{if(this._container.actualOptions.polygon&&this.paths?.length)for(const t of this.paths){const i=t.element?.getAttribute("d");if(i){const e=new Path2D(i),n=document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGMatrix(),s=new Path2D,a=n.scale(this._scale);s.addPath?(s.addPath(e,a),t.path2d=s):delete t.path2d}else delete t.path2d;if(t.path2d??!this.raw)continue;t.path2d=new Path2D;const e=0,n=this.raw[e];t.path2d.moveTo(n.x,n.y),this.raw.forEach(((i,n)=>{n>e&&t.path2d?.lineTo(i.x,i.y)})),t.path2d.closePath()}},this._downloadSvgPath=async(t,i)=>{const e=this._container.actualOptions.polygon;if(!e)return;const s=t??e.url,a=i??!1;if(!s||void 0!==this.paths&&!a)return this.raw;const o=await fetch(s);if(!o.ok)throw new Error(`${n.errorPrefix} occurred during polygon mask download`);return await this._parseSvgPath(await o.text(),i)},this._drawPoints=()=>{if(this.raw)for(const t of this.raw)this._container.particles.addParticle({x:t.x,y:t.y})},this._getEquidistantPointByIndex=t=>{const i=this._container.actualOptions;if(!i.polygon)return;if(!this.raw?.length||!this.paths?.length)throw new Error(s);let e,n=0;const a=this.paths.reduce(((t,i)=>t+i.length),0)/i.particles.number.value;for(const i of this.paths){const s=a*t-n;if(s<=i.length){e=i.element.getPointAtLength(s);break}n+=i.length}const r=this._scale;return{x:(e?.x??o)*r+(this.offset?.x??o),y:(e?.y??h)*r+(this.offset?.y??h)}},this._getPointByIndex=t=>{if(!this.raw?.length)throw new Error(s);const i=this.raw[t%this.raw.length];return{x:i.x,y:i.y}},this._getRandomPoint=()=>{if(!this.raw?.length)throw new Error(s);const t=(0,n.itemFromArray)(this.raw);return{x:t.x,y:t.y}},this._getRandomPointByLength=()=>{if(!this._container.actualOptions.polygon)return;if(!this.raw?.length||!this.paths?.length)throw new Error(s);const t=(0,n.itemFromArray)(this.paths),i=Math.floor((0,n.getRandom)()*t.length)+1,e=t.element.getPointAtLength(i),a=this._scale;return{x:e.x*a+(this.offset?.x??o),y:e.y*a+(this.offset?.y??h)}},this._initRawData=async t=>{const i=this._container.actualOptions.polygon;if(i){if(i.url)this.raw=await this._downloadSvgPath(i.url,t);else if(i.data){const e=i.data;let s;if((0,n.isString)(e))s=e;else{const t=t=>`<path d="${t}" />`,i=(0,n.isArray)(e.path)?e.path.map(t).join(""):t(e.path);s=`<svg ${'xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"'} width="${e.size.width}" height="${e.size.height}">${i}</svg>`}this.raw=await this._parseSvgPath(s,t)}this._createPath2D(),this._engine.dispatchEvent("polygonMaskLoaded",{container:this._container})}},this._parseSvgPath=async(t,i)=>{const s=i??!1;if(void 0!==this.paths&&!s)return this.raw;const a=this._container,o=a.actualOptions.polygon;if(!o)return;const h=(new DOMParser).parseFromString(t,"image/svg+xml"),c=h.getElementsByTagName("svg")[0];let l=c.getElementsByTagName("path");l.length||(l=h.getElementsByTagName("path")),this.paths=[];for(let t=0;t<l.length;t++){const i=l.item(t);i&&this.paths.push({element:i,length:i.getTotalLength()})}const g=this._scale;this.dimension.width=parseFloat(c.getAttribute("width")??"0")*g,this.dimension.height=parseFloat(c.getAttribute("height")??"0")*g;const p=o.position??{x:50,y:50},d=a.canvas.size;this.offset={x:d.width*p.x/n.percentDenominator-this.dimension.width*r,y:d.height*p.y/n.percentDenominator-this.dimension.height*r};const{parsePaths:y}=await e.e(856).then(e.bind(e,856));return y(this.paths,g,this.offset)},this._polygonBounce=async(t,i,s)=>{const a=this._container.actualOptions.polygon;if(!this.raw||!a?.enable||"top"!==s)return!1;if("inside"===a.type||"outside"===a.type){let i,s,a;const o=t.getPosition(),h=t.getRadius(),r=1;for(let c=0,l=this.raw.length-r;c<this.raw.length;l=c++){const r=this.raw[c],g=this.raw[l],{calcClosestPointOnSegment:p}=await e.e(856).then(e.bind(e,856));i=p(r,g,o);const d=(0,n.getDistances)(o,i);if([s,a]=[d.dx,d.dy],d.distance<h){const{segmentBounce:i}=await e.e(856).then(e.bind(e,856));return i(r,g,t.velocity),!0}}if(i&&void 0!==s&&void 0!==a&&!this._checkInsidePolygon(o)){const e={x:1,y:1},n=2*h,s=-1;return o.x>=i.x&&(e.x=-1),o.y>=i.y&&(e.y=-1),t.position.x=i.x+n*e.x,t.position.y=i.y+n*e.y,t.velocity.mult(s),!0}}else if("inline"===a.type&&t.initialPosition){const i=(0,n.getDistance)(t.initialPosition,t.getPosition()),{velocity:e}=t;if(i>this._moveRadius)return e.x=e.y*r-e.x,e.y=e.x*r-e.y,!0}return!1},this._randomPoint=()=>{const t=this._container,i=t.actualOptions.polygon;if(!i)return;let e;if("inline"===i.type)switch(i.inline.arrangement){case"random-point":e=this._getRandomPoint();break;case"random-length":e=this._getRandomPointByLength();break;case"equidistant":e=this._getEquidistantPointByIndex(t.particles.count);break;default:e=this._getPointByIndex(t.particles.count)}else{const i=t.canvas.size;e={x:(0,n.getRandom)()*i.width,y:(0,n.getRandom)()*i.height}}return this._checkInsidePolygon(e)?e:this._randomPoint()},this._container=t,this._engine=i,this.dimension={height:0,width:0},this._moveRadius=0,this._scale=1}clickPositionValid(t){const i=this._container.actualOptions.polygon;return!!i?.enable&&"none"!==i.type&&"inline"!==i.type&&this._checkInsidePolygon(t)}async draw(t){if(!this.paths?.length)return;const i=this._container.actualOptions.polygon;if(!i?.enable)return;const n=i.draw;if(!n.enable)return;const s=this.raw;for(const i of this.paths){const a=i.path2d;if(t)if(a&&this.offset){const{drawPolygonMaskPath:i}=await e.e(856).then(e.bind(e,856));i(t,a,n.stroke,this.offset)}else if(s){const{drawPolygonMask:i}=await e.e(856).then(e.bind(e,856));i(t,s,n.stroke)}}}async init(){const t=this._container,i=t.actualOptions.polygon,e=t.retina.pixelRatio;i&&(this._moveRadius=i.move.radius*e,this._scale=i.scale*e,i.enable&&await this._initRawData())}async particleBounce(t,i,e){return await this._polygonBounce(t,i,e)}particlePosition(t){const i=this._container.actualOptions.polygon;if(i?.enable&&(this.raw?.length??0)>0)return(0,n.deepExtend)({},t||this._randomPoint())}particlesInitialization(){const t=this._container.actualOptions.polygon;return!(!t?.enable||"inline"!==t.type||"one-per-point"!==t.inline.arrangement&&"per-point"!==t.inline.arrangement)&&(this._drawPoints(),!0)}resize(){const t=this._container,i=t.actualOptions.polygon;if(!i?.enable||"none"===i.type)return;this.redrawTimeout&&clearTimeout(this.redrawTimeout);this.redrawTimeout=window.setTimeout((()=>{(async()=>{await this._initRawData(!0),await t.particles.redraw()})()}),250)}stop(){delete this.raw,delete this.paths}}}}]);

package/719.min.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! tsParticles Polygon Mask Plugin v3.2.0 by Matteo Bruni */

package/787.min.js

@@ -0,0 +1,2 @@
+/*! For license information please see 787.min.js.LICENSE.txt */
+(this.webpackChunk_tsparticles_plugin_polygon_mask=this.webpackChunk_tsparticles_plugin_polygon_mask||[]).push([[787],{787:(t,i,s)=>{s.d(i,{PolygonMaskPlugin:()=>r});var o=s(533);class e{constructor(){this.color=new o.OptionsColor,this.width=.5,this.opacity=1}load(t){t&&(this.color=o.OptionsColor.create(this.color,t.color),(0,o.isString)(this.color.value)&&(this.opacity=(0,o.stringToAlpha)(this.color.value)??this.opacity),void 0!==t.opacity&&(this.opacity=t.opacity),void 0!==t.width&&(this.width=t.width))}}class n{constructor(){this.enable=!1,this.stroke=new e}load(t){if(!t)return;void 0!==t.enable&&(this.enable=t.enable);const i=t.stroke;this.stroke.load(i)}}class a{constructor(){this.arrangement="one-per-point"}load(t){t&&void 0!==t.arrangement&&(this.arrangement=t.arrangement)}}class h{constructor(){this.path=[],this.size={height:0,width:0}}load(t){t&&(void 0!==t.path&&(this.path=t.path),void 0!==t.size&&(void 0!==t.size.width&&(this.size.width=t.size.width),void 0!==t.size.height&&(this.size.height=t.size.height)))}}class l{constructor(){this.radius=10,this.type="path"}load(t){t&&(void 0!==t.radius&&(this.radius=t.radius),void 0!==t.type&&(this.type=t.type))}}class d{constructor(){this.draw=new n,this.enable=!1,this.inline=new a,this.move=new l,this.scale=1,this.type="none"}load(t){t&&(this.draw.load(t.draw),this.inline.load(t.inline),this.move.load(t.move),void 0!==t.scale&&(this.scale=t.scale),void 0!==t.type&&(this.type=t.type),void 0!==t.enable?this.enable=t.enable:this.enable="none"!==this.type,void 0!==t.url&&(this.url=t.url),void 0!==t.data&&((0,o.isString)(t.data)?this.data=t.data:(this.data=new h,this.data.load(t.data))),void 0!==t.position&&(this.position=(0,o.deepExtend)({},t.position)))}}class r{constructor(t){this.id="polygonMask",this._engine=t}async getPlugin(t){const{PolygonMaskInstance:i}=await s.e(719).then(s.bind(s,719));return new i(t,this._engine)}loadOptions(t,i){if(!this.needsPlugin(t)&&!this.needsPlugin(i))return;let s=t.polygon;void 0===s?.load&&(t.polygon=s=new d),s.load(i?.polygon)}needsPlugin(t){return t?.polygon?.enable??(void 0!==t?.polygon?.type&&"none"!==t.polygon.type)}}}}]);

package/787.min.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! tsParticles Polygon Mask Plugin v3.2.0 by Matteo Bruni */

package/856.min.js

@@ -0,0 +1,2 @@
+/*! For license information please see 856.min.js.LICENSE.txt */
+(this.webpackChunk_tsparticles_plugin_polygon_mask=this.webpackChunk_tsparticles_plugin_polygon_mask||[]).push([[856],{856:(e,t,s)=>{s.d(t,{calcClosestPointOnSegment:()=>A,drawPolygonMask:()=>c,drawPolygonMaskPath:()=>T,parsePaths:()=>E,segmentBounce:()=>S});var o=s(533);const a=2,n={min:0,max:1},_=2;function c(e,t,s){const a=(0,o.rangeColorToRgb)(s.color);if(!a)return;const n=t[0];e.beginPath(),e.moveTo(n.x,n.y);for(const s of t)e.lineTo(s.x,s.y);e.closePath(),e.strokeStyle=(0,o.getStyleFromRgb)(a),e.lineWidth=s.width,e.stroke()}function T(e,t,s,a){const n=1,_=0,c=0,T=1;e.setTransform(n,_,c,T,a.x,a.y);const E=(0,o.rangeColorToRgb)(s.color);E&&(e.strokeStyle=(0,o.getStyleFromRgb)(E,s.opacity),e.lineWidth=s.width,e.stroke(t),e.resetTransform())}function E(e,t,s){const o=[];for(const a of e){const e=a.element.pathSegList,n=e?.numberOfItems??0,_={x:0,y:0};for(let a=0;a<n;a++){const n=e?.getItem(a),c=window.SVGPathSeg;switch(n?.pathSegType){case c.PATHSEG_MOVETO_ABS:case c.PATHSEG_LINETO_ABS:case c.PATHSEG_CURVETO_CUBIC_ABS:case c.PATHSEG_CURVETO_QUADRATIC_ABS:case c.PATHSEG_ARC_ABS:case c.PATHSEG_CURVETO_CUBIC_SMOOTH_ABS:case c.PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS:{const e=n;_.x=e.x,_.y=e.y;break}case c.PATHSEG_LINETO_HORIZONTAL_ABS:_.x=n.x;break;case c.PATHSEG_LINETO_VERTICAL_ABS:_.y=n.y;break;case c.PATHSEG_LINETO_REL:case c.PATHSEG_MOVETO_REL:case c.PATHSEG_CURVETO_CUBIC_REL:case c.PATHSEG_CURVETO_QUADRATIC_REL:case c.PATHSEG_ARC_REL:case c.PATHSEG_CURVETO_CUBIC_SMOOTH_REL:case c.PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL:{const e=n;_.x+=e.x,_.y+=e.y;break}case c.PATHSEG_LINETO_HORIZONTAL_REL:_.x+=n.x;break;case c.PATHSEG_LINETO_VERTICAL_REL:_.y+=n.y;break;case c.PATHSEG_UNKNOWN:case c.PATHSEG_CLOSEPATH:continue}o.push({x:_.x*t+s.x,y:_.y*t+s.y})}}return o}function A(e,t,s){const{dx:_,dy:c}=(0,o.getDistances)(s,e),{dx:T,dy:E}=(0,o.getDistances)(t,e),A=(_*T+c*E)/(T**a+E**a),S={x:e.x+T*A,y:e.y+E*A,isOnSegment:A>=n.min&&A<=n.max};return A<n.min?(S.x=e.x,S.y=e.y):A>n.max&&(S.x=t.x,S.y=t.y),S}function S(e,t,s){const{dx:a,dy:n}=(0,o.getDistances)(e,t),c=Math.atan2(n,a),T=o.Vector.create(Math.sin(c),-Math.cos(c)),E=_*(s.x*T.x+s.y*T.y);T.multTo(E),s.subFrom(T)}}}]);

package/856.min.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! tsParticles Polygon Mask Plugin v3.2.0 by Matteo Bruni */

package/browser/PolygonMaskInstance.js

@@ -1,6 +1,8 @@
-import { deepExtend, errorPrefix, getDistance, getDistances, getRandom, isArray, isString, itemFromArray, } from "@tsparticles/engine";
-import { calcClosestPtOnSegment, drawPolygonMask, drawPolygonMaskPath, parsePaths, segmentBounce } from "./utils.js";
-const noPolygonDataLoaded = `${errorPrefix} No polygon data loaded.`, noPolygonFound = `${errorPrefix} No polygon found, you need to specify SVG url in config.`;
+import { deepExtend, errorPrefix, getDistance, getDistances, getRandom, isArray, isString, itemFromArray, percentDenominator, } from "@tsparticles/engine";
+const noPolygonDataLoaded = `${errorPrefix} No polygon data loaded.`, noPolygonFound = `${errorPrefix} No polygon found, you need to specify SVG url in config.`, origin = {
+    x: 0,
+    y: 0,
+}, half = 0.5, double = 2;
 export class PolygonMaskInstance {
     constructor(container, engine) {
         this._checkInsidePolygon = (position) => {
@@ -11,19 +13,20 @@ export class PolygonMaskInstance {
             if (!this.raw) {
                 throw new Error(noPolygonFound);
             }
-            const canvasSize = container.canvas.size, x = position?.x ?? getRandom() * canvasSize.width, y = position?.y ?? getRandom() * canvasSize.height;
+            const canvasSize = container.canvas.size, x = position?.x ?? getRandom() * canvasSize.width, y = position?.y ?? getRandom() * canvasSize.height, indexOffset = 1;
             let inside = false;
-            for (let i = 0, j = this.raw.length - 1; i < this.raw.length; j = i++) {
+            for (let i = 0, j = this.raw.length - indexOffset; 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;
+            if (options.type === "inside") {
+                return inside;
+            }
+            else {
+                return options.type === "outside" ? !inside : false;
+            }
         };
         this._createPath2D = () => {
             const container = this._container, options = container.actualOptions.polygon;
@@ -45,13 +48,14 @@ export class PolygonMaskInstance {
                 else {
                     delete path.path2d;
                 }
-                if (path.path2d || !this.raw) {
+                if (path.path2d ?? !this.raw) {
                     continue;
                 }
                 path.path2d = new Path2D();
-                path.path2d.moveTo(this.raw[0].x, this.raw[0].y);
+                const firstIndex = 0, firstPoint = this.raw[firstIndex];
+                path.path2d.moveTo(firstPoint.x, firstPoint.y);
                 this.raw.forEach((pos, i) => {
-                    if (i > 0) {
+                    if (i > firstIndex) {
                         path.path2d?.lineTo(pos.x, pos.y);
                     }
                 });
@@ -63,7 +67,7 @@ export class PolygonMaskInstance {
             if (!options) {
                 return;
             }
-            const url = svgUrl || options.url, forceDownload = force ?? false;
+            const url = svgUrl ?? options.url, forceDownload = force ?? false;
             if (!url || (this.paths !== undefined && !forceDownload)) {
                 return this.raw;
             }
@@ -71,14 +75,14 @@ export class PolygonMaskInstance {
             if (!req.ok) {
                 throw new Error(`${errorPrefix} occurred during polygon mask download`);
             }
-            return this._parseSvgPath(await req.text(), force);
+            return await this._parseSvgPath(await req.text(), force);
         };
         this._drawPoints = () => {
             if (!this.raw) {
                 return;
             }
             for (const item of this.raw) {
-                this._container.particles.addParticle({
+                void this._container.particles.addParticle({
                     x: item.x,
                     y: item.y,
                 });
@@ -89,11 +93,11 @@ export class PolygonMaskInstance {
             if (!polygonMaskOptions) {
                 return;
             }
-            if (!this.raw || !this.raw.length || !this.paths?.length) {
+            if (!this.raw?.length || !this.paths?.length) {
                 throw new Error(noPolygonDataLoaded);
             }
             let offset = 0, point;
-            const totalLength = this.paths.reduce((tot, path) => tot + path.length, 0), distance = totalLength / options.particles.number.value;
+            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) {
@@ -106,12 +110,12 @@ export class PolygonMaskInstance {
             }
             const scale = this._scale;
             return {
-                x: (point?.x ?? 0) * scale + (this.offset?.x ?? 0),
-                y: (point?.y ?? 0) * scale + (this.offset?.y ?? 0),
+                x: (point?.x ?? origin.x) * scale + (this.offset?.x ?? origin.x),
+                y: (point?.y ?? origin.y) * scale + (this.offset?.y ?? origin.y),
             };
         };
         this._getPointByIndex = (index) => {
-            if (!this.raw || !this.raw.length) {
+            if (!this.raw?.length) {
                 throw new Error(noPolygonDataLoaded);
             }
             const coords = this.raw[index % this.raw.length];
@@ -121,7 +125,7 @@ export class PolygonMaskInstance {
             };
         };
         this._getRandomPoint = () => {
-            if (!this.raw || !this.raw.length) {
+            if (!this.raw?.length) {
                 throw new Error(noPolygonDataLoaded);
             }
             const coords = itemFromArray(this.raw);
@@ -135,13 +139,13 @@ export class PolygonMaskInstance {
             if (!options) {
                 return;
             }
-            if (!this.raw || !this.raw.length || !this.paths?.length) {
+            if (!this.raw?.length || !this.paths?.length) {
                 throw new Error(noPolygonDataLoaded);
             }
-            const path = itemFromArray(this.paths), distance = Math.floor(getRandom() * path.length) + 1, point = path.element.getPointAtLength(distance), scale = this._scale;
+            const path = itemFromArray(this.paths), offset = 1, distance = Math.floor(getRandom() * path.length) + offset, point = path.element.getPointAtLength(distance), scale = this._scale;
             return {
-                x: point.x * scale + (this.offset?.x || 0),
-                y: point.y * scale + (this.offset?.y || 0),
+                x: point.x * scale + (this.offset?.x ?? origin.x),
+                y: point.y * scale + (this.offset?.y ?? origin.y),
             };
         };
         this._initRawData = async (force) => {
@@ -163,14 +167,14 @@ export class PolygonMaskInstance {
                     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>`;
                 }
-                this.raw = this._parseSvgPath(svg, force);
+                this.raw = await this._parseSvgPath(svg, force);
             }
             this._createPath2D();
             this._engine.dispatchEvent("polygonMaskLoaded", {
                 container: this._container,
             });
         };
-        this._parseSvgPath = (xml, force) => {
+        this._parseSvgPath = async (xml, force) => {
             const forceDownload = force ?? false;
             if (this.paths !== undefined && !forceDownload) {
                 return this.raw;
@@ -179,7 +183,7 @@ export class PolygonMaskInstance {
             if (!options) {
                 return;
             }
-            const parser = new DOMParser(), doc = parser.parseFromString(xml, "image/svg+xml"), svg = doc.getElementsByTagName("svg")[0];
+            const parser = new DOMParser(), doc = parser.parseFromString(xml, "image/svg+xml"), firstIndex = 0, svg = doc.getElementsByTagName("svg")[firstIndex];
             let svgPaths = svg.getElementsByTagName("path");
             if (!svgPaths.length) {
                 svgPaths = doc.getElementsByTagName("path");
@@ -202,31 +206,33 @@ export class PolygonMaskInstance {
                 y: 50,
             }, canvasSize = container.canvas.size;
             this.offset = {
-                x: (canvasSize.width * position.x) / 100 - this.dimension.width / 2,
-                y: (canvasSize.height * position.y) / 100 - this.dimension.height / 2,
+                x: (canvasSize.width * position.x) / percentDenominator - this.dimension.width * half,
+                y: (canvasSize.height * position.y) / percentDenominator - this.dimension.height * half,
             };
+            const { parsePaths } = await import("./utils.js");
             return parsePaths(this.paths, scale, this.offset);
         };
-        this._polygonBounce = (particle, _delta, direction) => {
+        this._polygonBounce = async (particle, delta, direction) => {
             const options = this._container.actualOptions.polygon;
             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 = calcClosestPtOnSegment(pi, pj, pos);
+                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], { calcClosestPointOnSegment } = await import("./utils.js");
+                    closest = calcClosestPointOnSegment(pi, pj, pos);
                     const dist = getDistances(pos, closest);
                     [dx, dy] = [dist.dx, dist.dy];
                     if (dist.distance < radius) {
+                        const { segmentBounce } = await import("./utils.js");
                         segmentBounce(pi, pj, particle.velocity);
                         return true;
                     }
                 }
                 if (closest && dx !== undefined && dy !== undefined && !this._checkInsidePolygon(pos)) {
-                    const factor = { x: 1, y: 1 }, diameter = radius * 2;
+                    const factor = { x: 1, y: 1 }, diameter = radius * double, inverse = -1;
                     if (pos.x >= closest.x) {
                         factor.x = -1;
                     }
@@ -235,15 +241,15 @@ export class PolygonMaskInstance {
                     }
                     particle.position.x = closest.x + diameter * factor.x;
                     particle.position.y = closest.y + diameter * factor.y;
-                    particle.velocity.mult(-1);
+                    particle.velocity.mult(inverse);
                     return true;
                 }
             }
             else if (options.type === "inline" && particle.initialPosition) {
                 const dist = getDistance(particle.initialPosition, particle.getPosition()), { velocity } = particle;
                 if (dist > this._moveRadius) {
-                    velocity.x = velocity.y / 2 - velocity.x;
-                    velocity.y = velocity.x / 2 - velocity.y;
+                    velocity.x = velocity.y * half - velocity.x;
+                    velocity.y = velocity.x * half - velocity.y;
                     return true;
                 }
             }
@@ -302,7 +308,7 @@ export class PolygonMaskInstance {
             options.type !== "inline" &&
             this._checkInsidePolygon(position));
     }
-    draw(context) {
+    async draw(context) {
         if (!this.paths?.length) {
             return;
         }
@@ -321,9 +327,11 @@ export class PolygonMaskInstance {
                 continue;
             }
             if (path2d && this.offset) {
+                const { drawPolygonMaskPath } = await import("./utils.js");
                 drawPolygonMaskPath(context, path2d, polygonDraw.stroke, this.offset);
             }
             else if (rawData) {
+                const { drawPolygonMask } = await import("./utils.js");
                 drawPolygonMask(context, rawData, polygonDraw.stroke);
             }
         }
@@ -339,12 +347,12 @@ export class PolygonMaskInstance {
             await this._initRawData();
         }
     }
-    particleBounce(particle, delta, direction) {
-        return this._polygonBounce(particle, delta, direction);
+    async particleBounce(particle, delta, direction) {
+        return await this._polygonBounce(particle, delta, direction);
     }
     particlePosition(position) {
-        const options = this._container.actualOptions.polygon;
-        if (!(options?.enable && (this.raw?.length ?? 0) > 0)) {
+        const options = this._container.actualOptions.polygon, defaultLength = 0;
+        if (!(options?.enable && (this.raw?.length ?? defaultLength) > defaultLength)) {
             return;
         }
         return deepExtend({}, position ? position : this._randomPoint());
@@ -368,10 +376,13 @@ export class PolygonMaskInstance {
         if (this.redrawTimeout) {
             clearTimeout(this.redrawTimeout);
         }
-        this.redrawTimeout = window.setTimeout(async () => {
-            await this._initRawData(true);
-            await container.particles.redraw();
-        }, 250);
+        const timeout = 250;
+        this.redrawTimeout = window.setTimeout(() => {
+            void (async () => {
+                await this._initRawData(true);
+                await container.particles.redraw();
+            })();
+        }, timeout);
     }
     stop() {
         delete this.raw;

package/browser/PolygonMaskPlugin.js

@@ -0,0 +1,25 @@
+import { PolygonMask } from "./Options/Classes/PolygonMask.js";
+export class PolygonMaskPlugin {
+    constructor(engine) {
+        this.id = "polygonMask";
+        this._engine = engine;
+    }
+    async getPlugin(container) {
+        const { PolygonMaskInstance } = await import("./PolygonMaskInstance.js");
+        return new PolygonMaskInstance(container, this._engine);
+    }
+    loadOptions(options, source) {
+        if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
+            return;
+        }
+        let polygonOptions = options.polygon;
+        if (polygonOptions?.load === undefined) {
+            options.polygon = polygonOptions = new PolygonMask();
+        }
+        polygonOptions.load(source?.polygon);
+    }
+    needsPlugin(options) {
+        return (options?.polygon?.enable ??
+            (options?.polygon?.type !== undefined && options.polygon.type !== "none"));
+    }
+}

package/browser/index.js

@@ -1,30 +1,6 @@
 import "./pathseg.js";
-import { PolygonMask } from "./Options/Classes/PolygonMask.js";
-import { PolygonMaskInstance } from "./PolygonMaskInstance.js";
-class PolygonMaskPlugin {
-    constructor(engine) {
-        this.id = "polygonMask";
-        this._engine = engine;
-    }
-    getPlugin(container) {
-        return new PolygonMaskInstance(container, this._engine);
-    }
-    loadOptions(options, source) {
-        if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
-            return;
-        }
-        let polygonOptions = options.polygon;
-        if (polygonOptions?.load === undefined) {
-            options.polygon = polygonOptions = new PolygonMask();
-        }
-        polygonOptions.load(source?.polygon);
-    }
-    needsPlugin(options) {
-        return (options?.polygon?.enable ??
-            (options?.polygon?.type !== undefined && options.polygon.type !== "none"));
-    }
-}
 export async function loadPolygonMaskPlugin(engine, refresh = true) {
+    const { PolygonMaskPlugin } = await import("./PolygonMaskPlugin.js");
     await engine.addPlugin(new PolygonMaskPlugin(engine), refresh);
 }
 export * from "./Enums/PolygonMaskInlineArrangement.js";

package/browser/utils.js

@@ -1,11 +1,16 @@
 import { Vector, getDistances, getStyleFromRgb, rangeColorToRgb } from "@tsparticles/engine";
+const squareExp = 2, inSegmentRange = {
+    min: 0,
+    max: 1,
+}, double = 2;
 export function drawPolygonMask(context, rawData, stroke) {
     const color = rangeColorToRgb(stroke.color);
     if (!color) {
         return;
     }
+    const firstIndex = 0, firstItem = rawData[firstIndex];
     context.beginPath();
-    context.moveTo(rawData[0].x, rawData[0].y);
+    context.moveTo(firstItem.x, firstItem.y);
     for (const item of rawData) {
         context.lineTo(item.x, item.y);
     }
@@ -15,7 +20,13 @@ export function drawPolygonMask(context, rawData, stroke) {
     context.stroke();
 }
 export function drawPolygonMaskPath(context, path, stroke, position) {
-    context.setTransform(1, 0, 0, 1, position.x, position.y);
+    const defaultTransform = {
+        a: 1,
+        b: 0,
+        c: 0,
+        d: 1,
+    };
+    context.setTransform(defaultTransform.a, defaultTransform.b, defaultTransform.c, defaultTransform.d, position.x, position.y);
     const color = rangeColorToRgb(stroke.color);
     if (!color) {
         return;
@@ -23,12 +34,12 @@ export function drawPolygonMaskPath(context, path, stroke, position) {
     context.strokeStyle = getStyleFromRgb(color, stroke.opacity);
     context.lineWidth = stroke.width;
     context.stroke(path);
-    context.setTransform(1, 0, 0, 1, 0, 0);
+    context.resetTransform();
 }
 export function parsePaths(paths, scale, offset) {
-    const res = [];
+    const res = [], defaultCount = 0;
     for (const path of paths) {
-        const segments = path.element.pathSegList, len = segments?.numberOfItems ?? 0, p = {
+        const segments = path.element.pathSegList, len = segments?.numberOfItems ?? defaultCount, p = {
             x: 0,
             y: 0,
         };
@@ -83,24 +94,24 @@ export function parsePaths(paths, scale, offset) {
     }
     return res;
 }
-export function calcClosestPtOnSegment(s1, s2, pos) {
-    const { dx: dx1, dy: dy1 } = getDistances(pos, s1), { dx: dx2, dy: dy2 } = getDistances(s2, s1), t = (dx1 * dx2 + dy1 * dy2) / (dx2 ** 2 + dy2 ** 2), res = {
+export function calcClosestPointOnSegment(s1, s2, pos) {
+    const { dx: dx1, dy: dy1 } = getDistances(pos, s1), { dx: dx2, dy: dy2 } = getDistances(s2, s1), t = (dx1 * dx2 + dy1 * dy2) / (dx2 ** squareExp + dy2 ** squareExp), res = {
         x: s1.x + dx2 * t,
         y: s1.y + dy2 * t,
-        isOnSegment: t >= 0 && t <= 1,
+        isOnSegment: t >= inSegmentRange.min && t <= inSegmentRange.max,
     };
-    if (t < 0) {
+    if (t < inSegmentRange.min) {
         res.x = s1.x;
         res.y = s1.y;
     }
-    else if (t > 1) {
+    else if (t > inSegmentRange.max) {
         res.x = s2.x;
         res.y = s2.y;
     }
     return res;
 }
 export function segmentBounce(start, stop, velocity) {
-    const { dx, dy } = getDistances(start, stop), wallAngle = Math.atan2(dy, dx), wallNormal = Vector.create(Math.sin(wallAngle), -Math.cos(wallAngle)), d = 2 * (velocity.x * wallNormal.x + velocity.y * wallNormal.y);
+    const { dx, dy } = getDistances(start, stop), wallAngle = Math.atan2(dy, dx), wallNormal = Vector.create(Math.sin(wallAngle), -Math.cos(wallAngle)), d = double * (velocity.x * wallNormal.x + velocity.y * wallNormal.y);
     wallNormal.multTo(d);
     velocity.subFrom(wallNormal);
 }