@tsparticles/interaction-particles-links 4.0.0-alpha.21 → 4.0.0-alpha.23

package/919.min.js

@@ -1 +1 @@
-"use strict";(this.webpackChunk_tsparticles_interaction_particles_links=this.webpackChunk_tsparticles_interaction_particles_links||[]).push([[919],{919(e,i,t){t.d(i,{LinkInstance:()=>r});var n=t(303),s=t(425);function l(e,i){var t;let s=((t=e.map(e=>e.id)).sort((e,i)=>e-i),t.join("_")),l=i.get(s);return void 0===l&&(l=(0,n.getRandom)(),i.set(s,l)),l}class r{_container;_engine;_freqs;constructor(e,i){this._container=e,this._engine=i,this._freqs={links:new Map,triangles:new Map}}drawParticle(e,i){let{links:t,options:n}=i;if(!t?.length)return;let s=t.filter(e=>n.links&&(n.links.frequency>=1||this._getLinkFrequency(i,e.destination)<=n.links.frequency));for(let e of s)this._drawTriangles(n,i,e,s),e.opacity>0&&(i.retina.linksWidth??0)>0&&this._drawLinkLine(i,e)}async init(){this._freqs.links=new Map,this._freqs.triangles=new Map,await Promise.resolve()}particleCreated(e){if(e.links=[],!e.options.links)return;let i=this._container.retina.pixelRatio,{retina:t}=e,{distance:n,width:s}=e.options.links;t.linksDistance=n*i,t.linksWidth=s*i}particleDestroyed(e){e.links=[]}_drawLinkLine=(e,i)=>{let t=e.options.links;if(!t?.enable)return;let l=this._container,r=i.destination,a=e.getPosition(),o=r.getPosition(),c=i.opacity;l.canvas.draw(i=>{let g,d=e.options.twinkle?.lines;if(d?.enable){let e=d.frequency,i=(0,n.rangeColorToRgb)(this._engine,d.color);(0,n.getRandom)()<e&&i&&(g=i,c=(0,n.getRangeValue)(d.opacity))}if(!g){let i=void 0!==t.id?l.particles.linksColors.get(t.id):l.particles.linksColor;g=(0,n.getLinkColor)(e,r,i)}if(!g)return;let h=e.retina.linksWidth??0,k=e.retina.linksDistance??0;!function(e){let i=!1,{begin:t,end:l,engine:r,maxDistance:a,context:o,canvasSize:c,width:g,colorLine:d,opacity:h,links:k,hdr:y}=e;if((0,n.getDistance)(t,l)<=a)(0,s.drawLine)(o,t,l),i=!0;else if(k.warp){let e,r,g={x:l.x-c.width,y:l.y},d=(0,n.getDistances)(t,g);if(d.distance<=a){let i=t.y-d.dy/d.dx*t.x;e={x:0,y:i},r={x:c.width,y:i}}else{let i={x:l.x,y:l.y-c.height},s=(0,n.getDistances)(t,i);if(s.distance<=a){let i=-(t.y-s.dy/s.dx*t.x)/(s.dy/s.dx);e={x:i,y:0},r={x:i,y:c.height}}else{let i={x:l.x-c.width,y:l.y-c.height},s=(0,n.getDistances)(t,i);if(s.distance<=a){let i=t.y-s.dy/s.dx*t.x;r={x:(e={x:-i/(s.dy/s.dx),y:i}).x+c.width,y:e.y+c.height}}}}e&&r&&((0,s.drawLine)(o,t,e),(0,s.drawLine)(o,l,r),i=!0)}if(!i)return;o.lineWidth=g,o.strokeStyle=(0,n.getStyleFromRgb)(d,y,h);let{shadow:f}=k;if(f.enable){let e=(0,n.rangeColorToRgb)(r,f.color);e&&(o.shadowBlur=f.blur,o.shadowColor=(0,n.getStyleFromRgb)(e,y))}o.stroke()}({context:i,width:h,begin:a,end:o,engine:this._engine,maxDistance:k,canvasSize:l.canvas.size,links:t,colorLine:g,opacity:c,hdr:l.hdr})})};_drawLinkTriangle=(e,i,t)=>{let s=e.options.links;if(!s?.enable)return;let l=s.triangles;if(!l.enable)return;let r=this._container,a=i.destination,o=t.destination,c=l.opacity??(i.opacity+t.opacity)*n.half;c<=0||r.canvas.draw(i=>{let t=e.getPosition(),g=a.getPosition(),d=o.getPosition(),h=e.retina.linksDistance??0;if((0,n.getDistance)(t,g)>h||(0,n.getDistance)(d,g)>h||(0,n.getDistance)(d,t)>h)return;let k=(0,n.rangeColorToRgb)(this._engine,l.color);if(!k){let i=void 0!==s.id?r.particles.linksColors.get(s.id):r.particles.linksColor;k=(0,n.getLinkColor)(e,a,i)}k&&function(e){let{context:i,hdr:t,pos1:s,pos2:l,pos3:r,colorTriangle:a,opacityTriangle:o}=e;i.beginPath(),i.moveTo(s.x,s.y),i.lineTo(l.x,l.y),i.lineTo(r.x,r.y),i.closePath(),i.fillStyle=(0,n.getStyleFromRgb)(a,t,o),i.fill()}({context:i,pos1:t,pos2:g,pos3:d,colorTriangle:k,opacityTriangle:c,hdr:r.hdr})})};_drawTriangles=(e,i,t,n)=>{let s=t.destination;if(!(e.links?.triangles.enable&&s.options.links?.triangles.enable))return;let l=s.links?.filter(e=>{let i=this._getLinkFrequency(s,e.destination);return s.options.links&&i<=s.options.links.frequency&&n.findIndex(i=>i.destination===e.destination)>=0});if(l?.length)for(let n of l){let l=n.destination;this._getTriangleFrequency(i,s,l)>e.links.triangles.frequency||this._drawLinkTriangle(i,t,n)}};_getLinkFrequency=(e,i)=>l([e,i],this._freqs.links);_getTriangleFrequency=(e,i,t)=>l([e,i,t],this._freqs.triangles)}}}]);
+"use strict";(this.webpackChunk_tsparticles_interaction_particles_links=this.webpackChunk_tsparticles_interaction_particles_links||[]).push([[919],{919(i,t,e){e.d(t,{LinkInstance:()=>s});var n=e(303);function o(i,t){var e;let o=((e=i.map(i=>i.id)).sort((i,t)=>i-t),e.join("_")),s=t.get(o);return void 0===s&&(s=(0,n.getRandom)(),t.set(o,s)),s}class s{_colorCache=new Map;_container;_engine;_freqs;_lineBatches=new Map;_triangleBatches=new Map;constructor(i,t){this._container=i,this._engine=t,this._freqs={links:new Map,triangles:new Map}}draw(i){for(let[,t]of this._triangleBatches){i.save(),i.fillStyle=t.colorStyle,i.globalAlpha=t.opacity,i.beginPath();for(let e=0;e<t.coords.length;e+=6){let o=t.coords[e+0]??n.originPoint.x,s=t.coords[e+1]??n.originPoint.y,r=t.coords[e+2]??n.originPoint.x,l=t.coords[e+3]??n.originPoint.y,a=t.coords[e+4]??n.originPoint.x,c=t.coords[e+5]??n.originPoint.y;i.moveTo(o,s),i.lineTo(r,l),i.lineTo(a,c)}i.fill(),i.restore()}for(let[,t]of this._lineBatches){i.save(),i.strokeStyle=t.colorStyle,i.lineWidth=t.width,i.globalAlpha=t.opacity,i.beginPath();for(let e=0;e<t.coords.length;e+=4){let o=t.coords[e+0]??n.originPoint.x,s=t.coords[e+1]??n.originPoint.y,r=t.coords[e+2]??n.originPoint.x,l=t.coords[e+3]??n.originPoint.y;i.moveTo(o,s),i.lineTo(r,l)}i.stroke(),i.restore()}this._lineBatches.clear(),this._triangleBatches.clear()}drawParticle(i,t){let{links:e,options:o}=t;if(!e?.length||!o.links)return;let s=this._container.canvas.size,r=e.filter(i=>o.links&&(o.links.frequency>=1||this._getLinkFrequency(t,i.destination)<=o.links.frequency)),l=t.getPosition();for(let i of r)if(i.isWarped||this._collectTriangles(o,t,i,r),i.opacity>0&&(t.retina.linksWidth??0)>0){let e=i.opacity,r=i.color,a=t.options.twinkle?.lines;if(a?.enable&&(0,n.getRandom)()<a.frequency){let i=(0,n.rangeColorToRgb)(this._engine,a.color);i&&(r=i,e=(0,n.getRangeValue)(a.opacity))}if(!r){let e=void 0!==o.links.id?this._container.particles.linksColors.get(o.links.id):this._container.particles.linksColor;r=(0,n.getLinkColor)(t,i.destination,e)}if(r){let o=Math.ceil(10*e)/10,a=this._getCachedStyle(r),c=t.retina.linksWidth??0,h=`${a}_${o}_${c}`,g=this._lineBatches.get(h);g||(g={colorStyle:a,opacity:o,width:c,coords:[]},this._lineBatches.set(h,g));let d=i.destination.getPosition();if(i.isWarped){let i=d.x-l.x,t=d.y-l.y,e=n.originPoint.x,o=n.originPoint.y;Math.abs(i)>s.width*n.half&&(e=i>0?-s.width:s.width),Math.abs(t)>s.height*n.half&&(o=t>0?-s.height:s.height);let r={x:d.x+e,y:d.y+o},a={x:l.x-e,y:l.y-o};g.coords.push(l.x,l.y,r.x,r.y),g.coords.push(a.x,a.y,d.x,d.y)}else g.coords.push(l.x,l.y,d.x,d.y)}}}async init(){this._freqs.links.clear(),this._freqs.triangles.clear(),this._colorCache.clear(),await Promise.resolve()}particleCreated(i){if(i.links=[],!i.options.links)return;let t=this._container.retina.pixelRatio;i.retina.linksDistance=i.options.links.distance*t,i.retina.linksWidth=i.options.links.width*t}particleDestroyed(i){i.links=[]}_collectTriangles(i,t,e,o){let s=e.destination,r=i.links?.triangles;if(!r?.enable||!s.options.links?.triangles.enable)return;let l=s.links?.filter(i=>!i.isWarped&&s.options.links&&this._getLinkFrequency(s,i.destination)<=s.options.links.frequency&&o.some(t=>t.destination===i.destination));if(l?.length)for(let o of l){let l=o.destination;if(this._getTriangleFrequency(t,s,l)>(i.links?.triangles.frequency??0))continue;let a=Math.ceil((e.opacity+o.opacity)*n.half*10)/10,c=(0,n.rangeColorToRgb)(this._engine,r.color)??e.color;if(!c)continue;let h=this._getCachedStyle(c),g=`${h}_${a}`,d=this._triangleBatches.get(g);d||(d={colorStyle:h,opacity:a,coords:[]},this._triangleBatches.set(g,d));let _=t.getPosition(),y=s.getPosition(),p=l.getPosition();d.coords.push(_.x,_.y,y.x,y.y,p.x,p.y)}}_getCachedStyle(i){let t=`${i.r},${i.g},${i.b}`,e=this._colorCache.get(t);return e||(e=(0,n.getStyleFromRgb)(i,this._container.hdr),this._colorCache.set(t,e)),e}_getLinkFrequency(i,t){return o([i,t],this._freqs.links)}_getTriangleFrequency(i,t,e){return o([i,t,e],this._freqs.triangles)}}}}]);

package/973.min.js

@@ -1 +1 @@
-"use strict";(this.webpackChunk_tsparticles_interaction_particles_links=this.webpackChunk_tsparticles_interaction_particles_links||[]).push([[973],{973(i,t,e){e.d(t,{Linker:()=>a});var n=e(303);class s extends n.Circle{canvasSize;constructor(i,t,e,n){super(i,t,e),this.canvasSize=n,this.canvasSize={...n}}contains(i){let{width:t,height:e}=this.canvasSize,{x:n,y:s}=i;return super.contains(i)||super.contains({x:n-t,y:s})||super.contains({x:n-t,y:s-e})||super.contains({x:n,y:s-e})}intersects(i){if(super.intersects(i))return!0;let t={x:i.position.x-this.canvasSize.width,y:i.position.y-this.canvasSize.height};if(Object.hasOwn(i,"radius")){let e=new n.Circle(t.x,t.y,i.radius*n.double);return super.intersects(e)}if(Object.hasOwn(i,"size")){let e=new n.Rectangle(t.x,t.y,i.size.width*n.double,i.size.height*n.double);return super.intersects(e)}return!1}}var r=e(153),o=e(702);class a extends o.ParticlesInteractorBase{_engine;constructor(i,t){super(i),this._engine=t}clear(){}init(){this.container.particles.linksColor=void 0,this.container.particles.linksColors=new Map}interact(i){let t;if(!i.options.links)return;i.links=[];let e=i.getPosition(),r=this.container,o=r.canvas.size;if(e.x<n.originPoint.x||e.y<n.originPoint.y||e.x>o.width||e.y>o.height)return;let a=i.options.links,l=a.opacity,c=i.retina.linksDistance??0,h=a.warp;for(let p of(t=h?new s(e.x,e.y,c,o):new n.Circle(e.x,e.y,c),r.particles.quadTree.query(t))){let t=p.options.links;if(i===p||!t?.enable||a.id!==t.id||p.spawning||p.destroyed||!p.links||i.links.some(i=>i.destination===p)||p.links.some(t=>t.destination===i))continue;let s=p.getPosition();if(s.x<n.originPoint.x||s.y<n.originPoint.y||s.x>o.width||s.y>o.height)continue;let r=function(i,t,e,s,r){let{dx:o,dy:a,distance:l}=(0,n.getDistances)(i,t);if(!r||l<=e)return l;let c={x:Math.abs(o),y:Math.abs(a)},h={x:Math.min(c.x,s.width-c.x),y:Math.min(c.y,s.height-c.y)};return Math.sqrt(h.x**2+h.y**2)}(e,s,c,o,h&&t.warp);if(r>c)continue;let u=(1-r/c)*l;this._setColor(i),i.links.push({destination:p,opacity:u})}}isEnabled(i){return!!i.options.links?.enable}loadParticlesOptions(i,...t){for(let e of(i.links??=new r.q,t))i.links.load(e?.links)}reset(){}_setColor=i=>{if(!i.options.links)return;let t=this.container,e=i.options.links,s=void 0===e.id?t.particles.linksColor:t.particles.linksColors.get(e.id);if(s)return;let r=e.color;s=(0,n.getLinkRandomColor)(this._engine,r,e.blink,e.consent),void 0===e.id?t.particles.linksColor=s:t.particles.linksColors.set(e.id,s)}}}}]);
+"use strict";(this.webpackChunk_tsparticles_interaction_particles_links=this.webpackChunk_tsparticles_interaction_particles_links||[]).push([[973],{973(i,t,n){n.d(t,{Linker:()=>l});var e=n(303);class s extends e.Circle{canvasSize;constructor(i,t,n,e){super(i,t,n),this.canvasSize=e}contains(i){if(super.contains(i))return!0;let{width:t,height:n}=this.canvasSize,{x:e,y:s}=i;return super.contains({x:e-t,y:s})||super.contains({x:e+t,y:s})||super.contains({x:e,y:s-n})||super.contains({x:e,y:s+n})||super.contains({x:e-t,y:s-n})||super.contains({x:e+t,y:s+n})||super.contains({x:e-t,y:s+n})||super.contains({x:e+t,y:s-n})}intersects(i){if(super.intersects(i))return!0;let{width:t,height:n}=this.canvasSize,s=i.position;for(let r of[{x:-t,y:0},{x:t,y:0},{x:0,y:-n},{x:0,y:n},{x:-t,y:-n},{x:t,y:n},{x:-t,y:n},{x:t,y:-n}]){let t,n={x:s.x+r.x,y:s.y+r.y};if(t=i instanceof e.Circle?new e.Circle(n.x,n.y,i.radius):new e.Rectangle(n.x,n.y,i.size.width,i.size.height),super.intersects(t))return!0}return!1}}var r=n(153),o=n(702);class l extends o.ParticlesInteractorBase{_engine;constructor(i,t){super(i),this._engine=t}clear(){}init(){this.container.particles.linksColor=void 0,this.container.particles.linksColors=new Map}interact(i){if(!i.options.links)return;i.links=[];let t=i.getPosition(),n=this.container,r=n.canvas.size;if(t.x<e.originPoint.x||t.y<e.originPoint.y||t.x>r.width||t.y>r.height)return;let o=i.options.links,l=o.opacity,a=i.retina.linksDistance??0,c=o.warp,p=c?new s(t.x,t.y,a,r):new e.Circle(t.x,t.y,a);for(let s of n.particles.quadTree.query(p)){let n=s.options.links;if(i===s||!n?.enable||o.id!==n.id||s.spawning||s.destroyed||!s.links||i.links.some(i=>i.destination===s)||s.links.some(t=>t.destination===i))continue;let p=s.getPosition();if(p.x<e.originPoint.x||p.y<e.originPoint.y||p.x>r.width||p.y>r.height)continue;let u=(0,e.getDistances)(t,p).distance,h=c&&n.warp?function(i,t,n){let{dx:s,dy:r}=(0,e.getDistances)(i,t),o={x:Math.abs(s),y:Math.abs(r)},l={x:Math.min(o.x,n.width-o.x),y:Math.min(o.y,n.height-o.y)};return Math.sqrt(l.x**2+l.y**2)}(t,p,r):u,k=Math.min(u,h);if(k>a)continue;let y=(1-k/a)*l;this._setColor(i),i.links.push({destination:s,opacity:y,color:this._getLinkColor(i,s),isWarped:h<u})}}isEnabled(i){return!!i.options.links?.enable}loadParticlesOptions(i,...t){for(let n of(i.links??=new r.q,t))i.links.load(n?.links)}reset(){}_getLinkColor(i,t){let n=this.container,s=i.options.links;if(!s)return;let r=void 0!==s.id?n.particles.linksColors.get(s.id):n.particles.linksColor;return(0,e.getLinkColor)(i,t,r)}_setColor(i){if(!i.options.links)return;let t=this.container,n=i.options.links,s=void 0===n.id?t.particles.linksColor:t.particles.linksColors.get(n.id);s||(s=(0,e.getLinkRandomColor)(this._engine,n.color,n.blink,n.consent),void 0===n.id?t.particles.linksColor=s:t.particles.linksColors.set(n.id,s))}}}}]);

package/browser/CircleWarp.js

@@ -1,33 +1,48 @@
-import { Circle, Rectangle, double } from "@tsparticles/engine";
+import { Circle, Rectangle } from "@tsparticles/engine";
 export class CircleWarp extends Circle {
     canvasSize;
     constructor(x, y, radius, canvasSize) {
         super(x, y, radius);
         this.canvasSize = canvasSize;
-        this.canvasSize = { ...canvasSize };
     }
     contains(point) {
+        if (super.contains(point))
+            return true;
         const { width, height } = this.canvasSize, { x, y } = point;
-        return (super.contains(point) ||
-            super.contains({ x: x - width, y }) ||
+        return (super.contains({ x: x - width, y }) ||
+            super.contains({ x: x + width, y }) ||
+            super.contains({ x, y: y - height }) ||
+            super.contains({ x, y: y + height }) ||
             super.contains({ x: x - width, y: y - height }) ||
-            super.contains({ x, y: y - height }));
+            super.contains({ x: x + width, y: y + height }) ||
+            super.contains({ x: x - width, y: y + height }) ||
+            super.contains({ x: x + width, y: y - height }));
     }
     intersects(range) {
-        if (super.intersects(range)) {
+        if (super.intersects(range))
             return true;
-        }
-        const rect = range, circle = range, newPos = {
-            x: range.position.x - this.canvasSize.width,
-            y: range.position.y - this.canvasSize.height,
-        };
-        if (Object.hasOwn(circle, "radius")) {
-            const biggerCircle = new Circle(newPos.x, newPos.y, circle.radius * double);
-            return super.intersects(biggerCircle);
-        }
-        else if (Object.hasOwn(rect, "size")) {
-            const rectSW = new Rectangle(newPos.x, newPos.y, rect.size.width * double, rect.size.height * double);
-            return super.intersects(rectSW);
+        const { width, height } = this.canvasSize, pos = range.position, shifts = [
+            { x: -width, y: 0 },
+            { x: width, y: 0 },
+            { x: 0, y: -height },
+            { x: 0, y: height },
+            { x: -width, y: -height },
+            { x: width, y: height },
+            { x: -width, y: height },
+            { x: width, y: -height },
+        ];
+        for (const shift of shifts) {
+            const shiftedPos = { x: pos.x + shift.x, y: pos.y + shift.y };
+            let shiftedRange;
+            if (range instanceof Circle) {
+                shiftedRange = new Circle(shiftedPos.x, shiftedPos.y, range.radius);
+            }
+            else {
+                const rect = range;
+                shiftedRange = new Rectangle(shiftedPos.x, shiftedPos.y, rect.size.width, rect.size.height);
+            }
+            if (super.intersects(shiftedRange))
+                return true;
         }
         return false;
     }

package/browser/LinkInstance.js

@@ -1,36 +1,110 @@
-import { getDistance, getLinkColor, getRandom, getRangeValue, half, rangeColorToRgb, } from "@tsparticles/engine";
-import { drawLinkLine, drawLinkTriangle, setLinkFrequency } from "./Utils.js";
-const minOpacity = 0, minWidth = 0, minDistance = 0, maxFrequency = 1;
+import { getLinkColor as engineGetLinkColor, getRandom, getRangeValue, getStyleFromRgb, half, originPoint, rangeColorToRgb, } from "@tsparticles/engine";
+import { setLinkFrequency } from "./Utils.js";
+const minOpacity = 0, minDistance = 0, minWidth = 0, maxFrequency = 1, defaultFrequency = 0, opacitySteps = 10, defaultWidth = 0, triangleCoordsCount = 6, lineCoordsCount = 4, x1Offset = 0, y1Offset = 1, x2Offset = 2, y2Offset = 3, x3Offset = 4, y3Offset = 5;
 export class LinkInstance {
+    _colorCache = new Map();
     _container;
     _engine;
     _freqs;
+    _lineBatches = new Map();
+    _triangleBatches = new Map();
     constructor(container, engine) {
         this._container = container;
         this._engine = engine;
-        this._freqs = {
-            links: new Map(),
-            triangles: new Map(),
-        };
+        this._freqs = { links: new Map(), triangles: new Map() };
+    }
+    draw(context) {
+        for (const [, batch] of this._triangleBatches) {
+            context.save();
+            context.fillStyle = batch.colorStyle;
+            context.globalAlpha = batch.opacity;
+            context.beginPath();
+            for (let i = 0; i < batch.coords.length; i += triangleCoordsCount) {
+                const x1 = batch.coords[i + x1Offset] ?? originPoint.x, y1 = batch.coords[i + y1Offset] ?? originPoint.y, x2 = batch.coords[i + x2Offset] ?? originPoint.x, y2 = batch.coords[i + y2Offset] ?? originPoint.y, x3 = batch.coords[i + x3Offset] ?? originPoint.x, y3 = batch.coords[i + y3Offset] ?? originPoint.y;
+                context.moveTo(x1, y1);
+                context.lineTo(x2, y2);
+                context.lineTo(x3, y3);
+            }
+            context.fill();
+            context.restore();
+        }
+        for (const [, batch] of this._lineBatches) {
+            context.save();
+            context.strokeStyle = batch.colorStyle;
+            context.lineWidth = batch.width;
+            context.globalAlpha = batch.opacity;
+            context.beginPath();
+            for (let i = 0; i < batch.coords.length; i += lineCoordsCount) {
+                const x1 = batch.coords[i + x1Offset] ?? originPoint.x, y1 = batch.coords[i + y1Offset] ?? originPoint.y, x2 = batch.coords[i + x2Offset] ?? originPoint.x, y2 = batch.coords[i + y2Offset] ?? originPoint.y;
+                context.moveTo(x1, y1);
+                context.lineTo(x2, y2);
+            }
+            context.stroke();
+            context.restore();
+        }
+        this._lineBatches.clear();
+        this._triangleBatches.clear();
     }
     drawParticle(_context, particle) {
         const { links, options } = particle;
-        if (!links?.length) {
+        if (!links?.length || !options.links) {
             return;
         }
-        const p1Links = links.filter(l => options.links &&
+        const canvasSize = this._container.canvas.size, p1Links = links.filter(l => options.links &&
             (options.links.frequency >= maxFrequency ||
-                this._getLinkFrequency(particle, l.destination) <= options.links.frequency));
+                this._getLinkFrequency(particle, l.destination) <= options.links.frequency)), pos1 = particle.getPosition();
         for (const link of p1Links) {
-            this._drawTriangles(options, particle, link, p1Links);
+            if (!link.isWarped) {
+                this._collectTriangles(options, particle, link, p1Links);
+            }
             if (link.opacity > minOpacity && (particle.retina.linksWidth ?? minWidth) > minWidth) {
-                this._drawLinkLine(particle, link);
+                let opacity = link.opacity, colorLine = link.color;
+                const twinkle = particle.options["twinkle"]?.lines;
+                if (twinkle?.enable && getRandom() < twinkle.frequency) {
+                    const twinkleRgb = rangeColorToRgb(this._engine, twinkle.color);
+                    if (twinkleRgb) {
+                        colorLine = twinkleRgb;
+                        opacity = getRangeValue(twinkle.opacity);
+                    }
+                }
+                if (!colorLine) {
+                    const linkColor = options.links.id !== undefined
+                        ? this._container.particles.linksColors.get(options.links.id)
+                        : this._container.particles.linksColor;
+                    colorLine = engineGetLinkColor(particle, link.destination, linkColor);
+                }
+                if (colorLine) {
+                    const qOpacity = Math.ceil(opacity * opacitySteps) / opacitySteps, colorStyle = this._getCachedStyle(colorLine), width = particle.retina.linksWidth ?? defaultWidth, key = `${colorStyle}_${qOpacity}_${width}`;
+                    let batch = this._lineBatches.get(key);
+                    if (!batch) {
+                        batch = { colorStyle, opacity: qOpacity, width, coords: [] };
+                        this._lineBatches.set(key, batch);
+                    }
+                    const pos2 = link.destination.getPosition();
+                    if (link.isWarped) {
+                        const dx = pos2.x - pos1.x, dy = pos2.y - pos1.y;
+                        let sx = originPoint.x, sy = originPoint.y;
+                        if (Math.abs(dx) > canvasSize.width * half) {
+                            sx = dx > minDistance ? -canvasSize.width : canvasSize.width;
+                        }
+                        if (Math.abs(dy) > canvasSize.height * half) {
+                            sy = dy > minDistance ? -canvasSize.height : canvasSize.height;
+                        }
+                        const v2 = { x: pos2.x + sx, y: pos2.y + sy }, v1 = { x: pos1.x - sx, y: pos1.y - sy };
+                        batch.coords.push(pos1.x, pos1.y, v2.x, v2.y);
+                        batch.coords.push(v1.x, v1.y, pos2.x, pos2.y);
+                    }
+                    else {
+                        batch.coords.push(pos1.x, pos1.y, pos2.x, pos2.y);
+                    }
+                }
             }
         }
     }
     async init() {
-        this._freqs.links = new Map();
-        this._freqs.triangles = new Map();
+        this._freqs.links.clear();
+        this._freqs.triangles.clear();
+        this._colorCache.clear();
         await Promise.resolve();
     }
     particleCreated(particle) {
@@ -38,122 +112,59 @@ export class LinkInstance {
         if (!particle.options.links) {
             return;
         }
-        const ratio = this._container.retina.pixelRatio, { retina } = particle, { distance, width } = particle.options.links;
-        retina.linksDistance = distance * ratio;
-        retina.linksWidth = width * ratio;
+        const ratio = this._container.retina.pixelRatio;
+        particle.retina.linksDistance = particle.options.links.distance * ratio;
+        particle.retina.linksWidth = particle.options.links.width * ratio;
     }
     particleDestroyed(particle) {
         particle.links = [];
     }
-    _drawLinkLine = (p1, link) => {
-        const p1LinksOptions = p1.options.links;
-        if (!p1LinksOptions?.enable) {
-            return;
-        }
-        const container = this._container, p2 = link.destination, pos1 = p1.getPosition(), pos2 = p2.getPosition();
-        let opacity = link.opacity;
-        container.canvas.draw(ctx => {
-            let colorLine;
-            const twinkle = p1.options["twinkle"]?.lines;
-            if (twinkle?.enable) {
-                const twinkleFreq = twinkle.frequency, twinkleRgb = rangeColorToRgb(this._engine, twinkle.color), twinkling = getRandom() < twinkleFreq;
-                if (twinkling && twinkleRgb) {
-                    colorLine = twinkleRgb;
-                    opacity = getRangeValue(twinkle.opacity);
-                }
-            }
-            if (!colorLine) {
-                const linkColor = p1LinksOptions.id !== undefined
-                    ? container.particles.linksColors.get(p1LinksOptions.id)
-                    : container.particles.linksColor;
-                colorLine = getLinkColor(p1, p2, linkColor);
-            }
-            if (!colorLine) {
-                return;
-            }
-            const width = p1.retina.linksWidth ?? minWidth, maxDistance = p1.retina.linksDistance ?? minDistance;
-            drawLinkLine({
-                context: ctx,
-                width,
-                begin: pos1,
-                end: pos2,
-                engine: this._engine,
-                maxDistance,
-                canvasSize: container.canvas.size,
-                links: p1LinksOptions,
-                colorLine,
-                opacity,
-                hdr: container.hdr,
-            });
-        });
-    };
-    _drawLinkTriangle = (p1, link1, link2) => {
-        const linksOptions = p1.options.links;
-        if (!linksOptions?.enable) {
-            return;
-        }
-        const triangleOptions = linksOptions.triangles;
-        if (!triangleOptions.enable) {
-            return;
-        }
-        const container = this._container, p2 = link1.destination, p3 = link2.destination, opacityTriangle = triangleOptions.opacity ?? (link1.opacity + link2.opacity) * half;
-        if (opacityTriangle <= minOpacity) {
-            return;
-        }
-        container.canvas.draw(ctx => {
-            const pos1 = p1.getPosition(), pos2 = p2.getPosition(), pos3 = p3.getPosition(), linksDistance = p1.retina.linksDistance ?? minDistance;
-            if (getDistance(pos1, pos2) > linksDistance ||
-                getDistance(pos3, pos2) > linksDistance ||
-                getDistance(pos3, pos1) > linksDistance) {
-                return;
-            }
-            let colorTriangle = rangeColorToRgb(this._engine, triangleOptions.color);
-            if (!colorTriangle) {
-                const linkColor = linksOptions.id !== undefined
-                    ? container.particles.linksColors.get(linksOptions.id)
-                    : container.particles.linksColor;
-                colorTriangle = getLinkColor(p1, p2, linkColor);
-            }
-            if (!colorTriangle) {
-                return;
-            }
-            drawLinkTriangle({
-                context: ctx,
-                pos1,
-                pos2,
-                pos3,
-                colorTriangle,
-                opacityTriangle,
-                hdr: container.hdr,
-            });
-        });
-    };
-    _drawTriangles = (options, p1, link, p1Links) => {
-        const p2 = link.destination;
-        if (!(options.links?.triangles.enable && p2.options.links?.triangles.enable)) {
+    _collectTriangles(options, p1, link, p1Links) {
+        const p2 = link.destination, triangleOptions = options.links?.triangles;
+        if (!triangleOptions?.enable || !p2.options.links?.triangles.enable) {
             return;
         }
         const vertices = p2.links?.filter(t => {
-            const linkFreq = this._getLinkFrequency(p2, t.destination), minCount = 0;
-            return (p2.options.links &&
-                linkFreq <= p2.options.links.frequency &&
-                p1Links.findIndex(l => l.destination === t.destination) >= minCount);
+            return (!t.isWarped &&
+                p2.options.links &&
+                this._getLinkFrequency(p2, t.destination) <= p2.options.links.frequency &&
+                p1Links.some(l => l.destination === t.destination));
         });
         if (!vertices?.length) {
             return;
         }
         for (const vertex of vertices) {
-            const p3 = vertex.destination, triangleFreq = this._getTriangleFrequency(p1, p2, p3);
-            if (triangleFreq > options.links.triangles.frequency) {
+            const p3 = vertex.destination;
+            if (this._getTriangleFrequency(p1, p2, p3) > (options.links?.triangles.frequency ?? defaultFrequency)) {
                 continue;
             }
-            this._drawLinkTriangle(p1, link, vertex);
+            const opacityTriangle = Math.ceil((link.opacity + vertex.opacity) * half * opacitySteps) / opacitySteps, colorTriangle = rangeColorToRgb(this._engine, triangleOptions.color) ?? link.color;
+            if (!colorTriangle) {
+                continue;
+            }
+            const colorStyle = this._getCachedStyle(colorTriangle), key = `${colorStyle}_${opacityTriangle}`;
+            let batch = this._triangleBatches.get(key);
+            if (!batch) {
+                batch = { colorStyle, opacity: opacityTriangle, coords: [] };
+                this._triangleBatches.set(key, batch);
+            }
+            const pos1 = p1.getPosition(), pos2 = p2.getPosition(), pos3 = p3.getPosition();
+            batch.coords.push(pos1.x, pos1.y, pos2.x, pos2.y, pos3.x, pos3.y);
         }
-    };
-    _getLinkFrequency = (p1, p2) => {
+    }
+    _getCachedStyle(rgb) {
+        const key = `${rgb.r},${rgb.g},${rgb.b}`;
+        let style = this._colorCache.get(key);
+        if (!style) {
+            style = getStyleFromRgb(rgb, this._container.hdr);
+            this._colorCache.set(key, style);
+        }
+        return style;
+    }
+    _getLinkFrequency(p1, p2) {
         return setLinkFrequency([p1, p2], this._freqs.links);
-    };
-    _getTriangleFrequency = (p1, p2, p3) => {
+    }
+    _getTriangleFrequency(p1, p2, p3) {
         return setLinkFrequency([p1, p2, p3], this._freqs.triangles);
-    };
+    }
 }

package/browser/Linker.js

@@ -1,17 +1,10 @@
-import { Circle, getDistances, getLinkRandomColor, originPoint, } from "@tsparticles/engine";
+import { Circle, getDistances, getLinkColor, getLinkRandomColor, originPoint, } from "@tsparticles/engine";
 import { CircleWarp } from "./CircleWarp.js";
 import { Links } from "./Options/Classes/Links.js";
 import { ParticlesInteractorBase } from "@tsparticles/plugin-interactivity";
 const squarePower = 2, opacityOffset = 1, minDistance = 0;
-function getLinkDistance(pos1, pos2, optDistance, canvasSize, warp) {
-    const { dx, dy, distance } = getDistances(pos1, pos2);
-    if (!warp || distance <= optDistance) {
-        return distance;
-    }
-    const absDiffs = {
-        x: Math.abs(dx),
-        y: Math.abs(dy),
-    }, warpDistances = {
+function getWarpDistance(pos1, pos2, canvasSize) {
+    const { dx, dy } = getDistances(pos1, pos2), absDiffs = { x: Math.abs(dx), y: Math.abs(dy) }, warpDistances = {
         x: Math.min(absDiffs.x, canvasSize.width - absDiffs.x),
         y: Math.min(absDiffs.y, canvasSize.height - absDiffs.y),
     };
@@ -38,15 +31,7 @@ export class Linker extends ParticlesInteractorBase {
         if (pos1.x < originPoint.x || pos1.y < originPoint.y || pos1.x > canvasSize.width || pos1.y > canvasSize.height) {
             return;
         }
-        const linkOpt1 = p1.options.links, optOpacity = linkOpt1.opacity, optDistance = p1.retina.linksDistance ?? minDistance, warp = linkOpt1.warp;
-        let range;
-        if (warp) {
-            range = new CircleWarp(pos1.x, pos1.y, optDistance, canvasSize);
-        }
-        else {
-            range = new Circle(pos1.x, pos1.y, optDistance);
-        }
-        const query = container.particles.quadTree.query(range);
+        const linkOpt1 = p1.options.links, optOpacity = linkOpt1.opacity, optDistance = p1.retina.linksDistance ?? minDistance, warp = linkOpt1.warp, range = warp ? new CircleWarp(pos1.x, pos1.y, optDistance, canvasSize) : new Circle(pos1.x, pos1.y, optDistance), query = container.particles.quadTree.query(range);
         for (const p2 of query) {
             const linkOpt2 = p2.options.links;
             if (p1 === p2 ||
@@ -63,7 +48,7 @@ export class Linker extends ParticlesInteractorBase {
             if (pos2.x < originPoint.x || pos2.y < originPoint.y || pos2.x > canvasSize.width || pos2.y > canvasSize.height) {
                 continue;
             }
-            const distance = getLinkDistance(pos1, pos2, optDistance, canvasSize, warp && linkOpt2.warp);
+            const distDirect = getDistances(pos1, pos2).distance, distWarp = warp && linkOpt2.warp ? getWarpDistance(pos1, pos2, canvasSize) : distDirect, distance = Math.min(distDirect, distWarp);
             if (distance > optDistance) {
                 continue;
             }
@@ -72,6 +57,8 @@ export class Linker extends ParticlesInteractorBase {
             p1.links.push({
                 destination: p2,
                 opacity: opacityLine,
+                color: this._getLinkColor(p1, p2),
+                isWarped: distWarp < distDirect,
             });
         }
     }
@@ -86,7 +73,17 @@ export class Linker extends ParticlesInteractorBase {
     }
     reset() {
     }
-    _setColor = p1 => {
+    _getLinkColor(p1, p2) {
+        const container = this.container, linksOptions = p1.options.links;
+        if (!linksOptions) {
+            return;
+        }
+        const linkColor = linksOptions.id !== undefined
+            ? container.particles.linksColors.get(linksOptions.id)
+            : container.particles.linksColor;
+        return getLinkColor(p1, p2, linkColor);
+    }
+    _setColor(p1) {
         if (!p1.options.links) {
             return;
         }
@@ -97,13 +94,12 @@ export class Linker extends ParticlesInteractorBase {
         if (linkColor) {
             return;
         }
-        const optColor = linksOptions.color;
-        linkColor = getLinkRandomColor(this._engine, optColor, linksOptions.blink, linksOptions.consent);
+        linkColor = getLinkRandomColor(this._engine, linksOptions.color, linksOptions.blink, linksOptions.consent);
         if (linksOptions.id === undefined) {
             container.particles.linksColor = linkColor;
         }
         else {
             container.particles.linksColors.set(linksOptions.id, linkColor);
         }
-    };
+    }
 }

package/browser/Utils.js

@@ -1,79 +1,4 @@
-import { getDistance, getDistances, getRandom, getStyleFromRgb, rangeColorToRgb, } from "@tsparticles/engine";
-import { drawLine } from "@tsparticles/canvas-utils";
-export function drawTriangle(context, p1, p2, p3) {
-    context.beginPath();
-    context.moveTo(p1.x, p1.y);
-    context.lineTo(p2.x, p2.y);
-    context.lineTo(p3.x, p3.y);
-    context.closePath();
-}
-export function drawLinkLine(params) {
-    let drawn = false;
-    const { begin, end, engine, maxDistance, context, canvasSize, width, colorLine, opacity, links, hdr } = params;
-    if (getDistance(begin, end) <= maxDistance) {
-        drawLine(context, begin, end);
-        drawn = true;
-    }
-    else if (links.warp) {
-        let pi1, pi2;
-        const endNE = {
-            x: end.x - canvasSize.width,
-            y: end.y,
-        }, d1 = getDistances(begin, endNE);
-        if (d1.distance <= maxDistance) {
-            const yi = begin.y - (d1.dy / d1.dx) * begin.x;
-            pi1 = { x: 0, y: yi };
-            pi2 = { x: canvasSize.width, y: yi };
-        }
-        else {
-            const endSW = {
-                x: end.x,
-                y: end.y - canvasSize.height,
-            }, d2 = getDistances(begin, endSW);
-            if (d2.distance <= maxDistance) {
-                const yi = begin.y - (d2.dy / d2.dx) * begin.x, xi = -yi / (d2.dy / d2.dx);
-                pi1 = { x: xi, y: 0 };
-                pi2 = { x: xi, y: canvasSize.height };
-            }
-            else {
-                const endSE = {
-                    x: end.x - canvasSize.width,
-                    y: end.y - canvasSize.height,
-                }, d3 = getDistances(begin, endSE);
-                if (d3.distance <= maxDistance) {
-                    const yi = begin.y - (d3.dy / d3.dx) * begin.x, xi = -yi / (d3.dy / d3.dx);
-                    pi1 = { x: xi, y: yi };
-                    pi2 = { x: pi1.x + canvasSize.width, y: pi1.y + canvasSize.height };
-                }
-            }
-        }
-        if (pi1 && pi2) {
-            drawLine(context, begin, pi1);
-            drawLine(context, end, pi2);
-            drawn = true;
-        }
-    }
-    if (!drawn) {
-        return;
-    }
-    context.lineWidth = width;
-    context.strokeStyle = getStyleFromRgb(colorLine, hdr, opacity);
-    const { shadow } = links;
-    if (shadow.enable) {
-        const shadowColor = rangeColorToRgb(engine, shadow.color);
-        if (shadowColor) {
-            context.shadowBlur = shadow.blur;
-            context.shadowColor = getStyleFromRgb(shadowColor, hdr);
-        }
-    }
-    context.stroke();
-}
-export function drawLinkTriangle(params) {
-    const { context, hdr, pos1, pos2, pos3, colorTriangle, opacityTriangle } = params;
-    drawTriangle(context, pos1, pos2, pos3);
-    context.fillStyle = getStyleFromRgb(colorTriangle, hdr, opacityTriangle);
-    context.fill();
-}
+import { getRandom } from "@tsparticles/engine";
 export function getLinkKey(ids) {
     ids.sort((a, b) => a - b);
     return ids.join("_");

package/browser/index.js

@@ -1,5 +1,5 @@
 export async function loadParticlesLinksInteraction(engine) {
-    engine.checkVersion("4.0.0-alpha.21");
+    engine.checkVersion("4.0.0-alpha.23");
     await engine.register(async (e) => {
         const [{ ensureInteractivityPluginLoaded }, { LinksPlugin },] = await Promise.all([
             import("@tsparticles/plugin-interactivity"),
@@ -9,7 +9,7 @@ export async function loadParticlesLinksInteraction(engine) {
         e.addPlugin(new LinksPlugin(e));
         e.addInteractor?.("particlesLinks", async (container) => {
             const { Linker } = await import("./Linker.js");
-            return new Linker(container, engine);
+            return new Linker(container, e);
         });
     });
 }