@tsparticles/interaction-particles-links 3.0.0-beta.3 → 3.0.0-beta.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/browser/Linker.js +1 -1
- package/browser/Utils.js +8 -1
- package/cjs/Linker.js +1 -1
- package/cjs/Utils.js +10 -2
- package/esm/Linker.js +1 -1
- package/esm/Utils.js +8 -1
- package/package.json +3 -3
- package/report.html +4 -22
- package/tsparticles.interaction.particles.links.js +10 -3
- package/tsparticles.interaction.particles.links.min.js +1 -1
- package/tsparticles.interaction.particles.links.min.js.LICENSE.txt +1 -1
- package/types/Types.d.ts +0 -2
- package/types/Utils.d.ts +2 -0
- package/umd/Linker.js +1 -1
- package/umd/Utils.js +10 -2
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Demo / Generator : https://particles.js.org/
|
|
5
5
|
* GitHub : https://www.github.com/matteobruni/tsparticles
|
|
6
6
|
* How to use? : Check the GitHub README
|
|
7
|
-
* v3.0.0-beta.
|
|
7
|
+
* v3.0.0-beta.5
|
|
8
8
|
*/
|
|
9
9
|
(function webpackUniversalModuleDefinition(root, factory) {
|
|
10
10
|
if(typeof exports === 'object' && typeof module === 'object')
|
|
@@ -348,7 +348,7 @@ class Linker extends engine_root_window_.ParticlesInteractorBase {
|
|
|
348
348
|
options.links = new Links();
|
|
349
349
|
}
|
|
350
350
|
for (const source of sources) {
|
|
351
|
-
options.links.load(source?.links
|
|
351
|
+
options.links.load(source?.links);
|
|
352
352
|
}
|
|
353
353
|
}
|
|
354
354
|
reset() {}
|
|
@@ -360,6 +360,13 @@ async function loadLinksInteraction(engine, refresh = true) {
|
|
|
360
360
|
}
|
|
361
361
|
;// CONCATENATED MODULE: ./dist/browser/Utils.js
|
|
362
362
|
|
|
363
|
+
function drawTriangle(context, p1, p2, p3) {
|
|
364
|
+
context.beginPath();
|
|
365
|
+
context.moveTo(p1.x, p1.y);
|
|
366
|
+
context.lineTo(p2.x, p2.y);
|
|
367
|
+
context.lineTo(p3.x, p3.y);
|
|
368
|
+
context.closePath();
|
|
369
|
+
}
|
|
363
370
|
function drawLinkLine(params) {
|
|
364
371
|
let drawn = false;
|
|
365
372
|
const {
|
|
@@ -468,7 +475,7 @@ function drawLinkTriangle(params) {
|
|
|
468
475
|
colorTriangle,
|
|
469
476
|
opacityTriangle
|
|
470
477
|
} = params;
|
|
471
|
-
|
|
478
|
+
drawTriangle(context, pos1, pos2, pos3);
|
|
472
479
|
if (backgroundMask.enable) {
|
|
473
480
|
context.globalCompositeOperation = backgroundMask.composite;
|
|
474
481
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! For license information please see tsparticles.interaction.particles.links.min.js.LICENSE.txt */
|
|
2
|
-
!function(i,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],t);else{var n="object"==typeof exports?t(require("@tsparticles/engine")):t(i.window);for(var e in n)("object"==typeof exports?exports:i)[e]=n[e]}}(this,(i=>(()=>{"use strict";var t={533:t=>{t.exports=i}},n={};function e(i){var s=n[i];if(void 0!==s)return s.exports;var o=n[i]={exports:{}};return t[i](o,o.exports,e),o.exports}e.d=(i,t)=>{for(var n in t)e.o(t,n)&&!e.o(i,n)&&Object.defineProperty(i,n,{enumerable:!0,get:t[n]})},e.o=(i,t)=>Object.prototype.hasOwnProperty.call(i,t),e.r=i=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(i,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(i,"__esModule",{value:!0})};var s={};return(()=>{e.r(s),e.d(s,{Links:()=>r,LinksShadow:()=>n,LinksTriangle:()=>o,loadParticlesLinksInteraction:()=>p});var i=e(533);class t extends i.Circle{constructor(i,t,n,e){super(i,t,n),this.canvasSize=e,this.canvasSize={...e}}contains(i){const{width:t,height:n}=this.canvasSize,{x:e,y:s}=i;return super.contains(i)||super.contains({x:e-t,y:s})||super.contains({x:e-t,y:s-n})||super.contains({x:e,y:s-n})}intersects(t){if(super.intersects(t))return!0;const n=t,e=t,s={x:t.position.x-this.canvasSize.width,y:t.position.y-this.canvasSize.height};if(void 0!==e.radius){const t=new i.Circle(s.x,s.y,2*e.radius);return super.intersects(t)}if(void 0!==n.size){const t=new i.Rectangle(s.x,s.y,2*n.size.width,2*n.size.height);return super.intersects(t)}return!1}}class n{constructor(){this.blur=5,this.color=new i.OptionsColor,this.color.value="#000",this.enable=!1}load(t){t&&(void 0!==t.blur&&(this.blur=t.blur),this.color=i.OptionsColor.create(this.color,t.color),void 0!==t.enable&&(this.enable=t.enable))}}class o{constructor(){this.enable=!1,this.frequency=1}load(t){t&&(void 0!==t.color&&(this.color=i.OptionsColor.create(this.color,t.color)),void 0!==t.enable&&(this.enable=t.enable),void 0!==t.frequency&&(this.frequency=t.frequency),void 0!==t.opacity&&(this.opacity=t.opacity))}}class r{constructor(){this.blink=!1,this.color=new i.OptionsColor,this.color.value="#fff",this.consent=!1,this.distance=100,this.enable=!1,this.frequency=1,this.opacity=1,this.shadow=new n,this.triangles=new o,this.width=1,this.warp=!1}load(t){t&&(void 0!==t.id&&(this.id=t.id),void 0!==t.blink&&(this.blink=t.blink),this.color=i.OptionsColor.create(this.color,t.color),void 0!==t.consent&&(this.consent=t.consent),void 0!==t.distance&&(this.distance=t.distance),void 0!==t.enable&&(this.enable=t.enable),void 0!==t.frequency&&(this.frequency=t.frequency),void 0!==t.opacity&&(this.opacity=t.opacity),this.shadow.load(t.shadow),this.triangles.load(t.triangles),void 0!==t.width&&(this.width=t.width),void 0!==t.warp&&(this.warp=t.warp))}}function a(t,n,e,s,o){const{dx:r,dy:a,distance:
|
|
2
|
+
!function(i,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],t);else{var n="object"==typeof exports?t(require("@tsparticles/engine")):t(i.window);for(var e in n)("object"==typeof exports?exports:i)[e]=n[e]}}(this,(i=>(()=>{"use strict";var t={533:t=>{t.exports=i}},n={};function e(i){var s=n[i];if(void 0!==s)return s.exports;var o=n[i]={exports:{}};return t[i](o,o.exports,e),o.exports}e.d=(i,t)=>{for(var n in t)e.o(t,n)&&!e.o(i,n)&&Object.defineProperty(i,n,{enumerable:!0,get:t[n]})},e.o=(i,t)=>Object.prototype.hasOwnProperty.call(i,t),e.r=i=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(i,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(i,"__esModule",{value:!0})};var s={};return(()=>{e.r(s),e.d(s,{Links:()=>r,LinksShadow:()=>n,LinksTriangle:()=>o,loadParticlesLinksInteraction:()=>p});var i=e(533);class t extends i.Circle{constructor(i,t,n,e){super(i,t,n),this.canvasSize=e,this.canvasSize={...e}}contains(i){const{width:t,height:n}=this.canvasSize,{x:e,y:s}=i;return super.contains(i)||super.contains({x:e-t,y:s})||super.contains({x:e-t,y:s-n})||super.contains({x:e,y:s-n})}intersects(t){if(super.intersects(t))return!0;const n=t,e=t,s={x:t.position.x-this.canvasSize.width,y:t.position.y-this.canvasSize.height};if(void 0!==e.radius){const t=new i.Circle(s.x,s.y,2*e.radius);return super.intersects(t)}if(void 0!==n.size){const t=new i.Rectangle(s.x,s.y,2*n.size.width,2*n.size.height);return super.intersects(t)}return!1}}class n{constructor(){this.blur=5,this.color=new i.OptionsColor,this.color.value="#000",this.enable=!1}load(t){t&&(void 0!==t.blur&&(this.blur=t.blur),this.color=i.OptionsColor.create(this.color,t.color),void 0!==t.enable&&(this.enable=t.enable))}}class o{constructor(){this.enable=!1,this.frequency=1}load(t){t&&(void 0!==t.color&&(this.color=i.OptionsColor.create(this.color,t.color)),void 0!==t.enable&&(this.enable=t.enable),void 0!==t.frequency&&(this.frequency=t.frequency),void 0!==t.opacity&&(this.opacity=t.opacity))}}class r{constructor(){this.blink=!1,this.color=new i.OptionsColor,this.color.value="#fff",this.consent=!1,this.distance=100,this.enable=!1,this.frequency=1,this.opacity=1,this.shadow=new n,this.triangles=new o,this.width=1,this.warp=!1}load(t){t&&(void 0!==t.id&&(this.id=t.id),void 0!==t.blink&&(this.blink=t.blink),this.color=i.OptionsColor.create(this.color,t.color),void 0!==t.consent&&(this.consent=t.consent),void 0!==t.distance&&(this.distance=t.distance),void 0!==t.enable&&(this.enable=t.enable),void 0!==t.frequency&&(this.frequency=t.frequency),void 0!==t.opacity&&(this.opacity=t.opacity),this.shadow.load(t.shadow),this.triangles.load(t.triangles),void 0!==t.width&&(this.width=t.width),void 0!==t.warp&&(this.warp=t.warp))}}function a(t,n,e,s,o){const{dx:r,dy:a,distance:c}=(0,i.getDistances)(t,n);if(!o||c<=e)return c;const l={x:Math.abs(r),y:Math.abs(a)},d=Math.min(l.x,s.width-l.x),h=Math.min(l.y,s.height-l.y);return Math.sqrt(d**2+h**2)}class c extends i.ParticlesInteractorBase{constructor(t){super(t),this._setColor=t=>{if(!t.options.links)return;const n=this.linkContainer,e=t.options.links;let s=void 0===e.id?n.particles.linksColor:n.particles.linksColors.get(e.id);if(s)return;const o=e.color;s=(0,i.getLinkRandomColor)(o,e.blink,e.consent),void 0===e.id?n.particles.linksColor=s:n.particles.linksColors.set(e.id,s)},this.linkContainer=t}clear(){}init(){this.linkContainer.particles.linksColor=void 0,this.linkContainer.particles.linksColors=new Map}async interact(n){if(!n.options.links)return;n.links=[];const e=n.getPosition(),s=this.container,o=s.canvas.size;if(e.x<0||e.y<0||e.x>o.width||e.y>o.height)return;const r=n.options.links,c=r.opacity,l=n.retina.linksDistance??0,d=r.warp,h=d?new t(e.x,e.y,l,o):new i.Circle(e.x,e.y,l),p=s.particles.quadTree.query(h);for(const i of p){const t=i.options.links;if(n===i||!t?.enable||r.id!==t.id||i.spawning||i.destroyed||!i.links||n.links.some((t=>t.destination===i))||i.links.some((i=>i.destination===n)))continue;const s=i.getPosition();if(s.x<0||s.y<0||s.x>o.width||s.y>o.height)continue;const h=a(e,s,l,o,d&&t.warp);if(h>l)continue;const p=(1-h/l)*c;this._setColor(n),n.links.push({destination:i,opacity:p})}}isEnabled(i){return!!i.options.links?.enable}loadParticlesOptions(i,...t){i.links||(i.links=new r);for(const n of t)i.links.load(n?.links)}reset(){}}function l(t,n){const e=((s=t.map((i=>i.id))).sort(((i,t)=>i-t)),s.join("_"));var s;let o=n.get(e);return void 0===o&&(o=(0,i.getRandom)(),n.set(e,o)),o}class d{constructor(t){this.container=t,this._drawLinkLine=(t,n)=>{const e=t.options.links;if(!e?.enable)return;const s=this.container,o=s.actualOptions,r=n.destination,a=t.getPosition(),c=r.getPosition();let l=n.opacity;s.canvas.draw((n=>{let d;const h=t.options.twinkle?.lines;if(h?.enable){const t=h.frequency,n=(0,i.rangeColorToRgb)(h.color);(0,i.getRandom)()<t&&n&&(d=n,l=(0,i.getRangeValue)(h.opacity))}if(!d){const n=void 0!==e.id?s.particles.linksColors.get(e.id):s.particles.linksColor;d=(0,i.getLinkColor)(t,r,n)}if(!d)return;const p=t.retina.linksWidth??0,u=t.retina.linksDistance??0,{backgroundMask:y}=o;!function(t){let n=!1;const{begin:e,end:s,maxDistance:o,context:r,canvasSize:a,width:c,backgroundMask:l,colorLine:d,opacity:h,links:p}=t;if((0,i.getDistance)(e,s)<=o)(0,i.drawLine)(r,e,s),n=!0;else if(p.warp){let t,c;const l={x:s.x-a.width,y:s.y},d=(0,i.getDistances)(e,l);if(d.distance<=o){const i=e.y-d.dy/d.dx*e.x;t={x:0,y:i},c={x:a.width,y:i}}else{const n={x:s.x,y:s.y-a.height},r=(0,i.getDistances)(e,n);if(r.distance<=o){const i=-(e.y-r.dy/r.dx*e.x)/(r.dy/r.dx);t={x:i,y:0},c={x:i,y:a.height}}else{const n={x:s.x-a.width,y:s.y-a.height},r=(0,i.getDistances)(e,n);if(r.distance<=o){const i=e.y-r.dy/r.dx*e.x;t={x:-i/(r.dy/r.dx),y:i},c={x:t.x+a.width,y:t.y+a.height}}}}t&&c&&((0,i.drawLine)(r,e,t),(0,i.drawLine)(r,s,c),n=!0)}if(!n)return;r.lineWidth=c,l.enable&&(r.globalCompositeOperation=l.composite),r.strokeStyle=(0,i.getStyleFromRgb)(d,h);const{shadow:u}=p;if(u.enable){const t=(0,i.rangeColorToRgb)(u.color);t&&(r.shadowBlur=u.blur,r.shadowColor=(0,i.getStyleFromRgb)(t))}r.stroke()}({context:n,width:p,begin:a,end:c,maxDistance:u,canvasSize:s.canvas.size,links:e,backgroundMask:y,colorLine:d,opacity:l})}))},this._drawLinkTriangle=(t,n,e)=>{const s=t.options.links;if(!s?.enable)return;const o=s.triangles;if(!o.enable)return;const r=this.container,a=r.actualOptions,c=n.destination,l=e.destination,d=o.opacity??(n.opacity+e.opacity)/2;d<=0||r.canvas.draw((n=>{const e=t.getPosition(),h=c.getPosition(),p=l.getPosition(),u=t.retina.linksDistance??0;if((0,i.getDistance)(e,h)>u||(0,i.getDistance)(p,h)>u||(0,i.getDistance)(p,e)>u)return;let y=(0,i.rangeColorToRgb)(o.color);if(!y){const n=void 0!==s.id?r.particles.linksColors.get(s.id):r.particles.linksColor;y=(0,i.getLinkColor)(t,c,n)}y&&function(t){const{context:n,pos1:e,pos2:s,pos3:o,backgroundMask:r,colorTriangle:a,opacityTriangle:c}=t;!function(i,t,n,e){i.beginPath(),i.moveTo(t.x,t.y),i.lineTo(n.x,n.y),i.lineTo(e.x,e.y),i.closePath()}(n,e,s,o),r.enable&&(n.globalCompositeOperation=r.composite),n.fillStyle=(0,i.getStyleFromRgb)(a,c),n.fill()}({context:n,pos1:e,pos2:h,pos3:p,backgroundMask:a.backgroundMask,colorTriangle:y,opacityTriangle:d})}))},this._drawTriangles=(i,t,n,e)=>{const s=n.destination;if(!i.links?.triangles.enable||!s.options.links?.triangles.enable)return;const o=s.links?.filter((i=>{const t=this._getLinkFrequency(s,i.destination);return s.options.links&&t<=s.options.links.frequency&&e.findIndex((t=>t.destination===i.destination))>=0}));if(o?.length)for(const e of o){const o=e.destination;this._getTriangleFrequency(t,s,o)>i.links.triangles.frequency||this._drawLinkTriangle(t,n,e)}},this._getLinkFrequency=(i,t)=>l([i,t],this._freqs.links),this._getTriangleFrequency=(i,t,n)=>l([i,t,n],this._freqs.triangles),this._freqs={links:new Map,triangles:new Map}}drawParticle(i,t){const{links:n,options:e}=t;if(!n||n.length<=0)return;const s=n.filter((i=>e.links&&this._getLinkFrequency(t,i.destination)<=e.links.frequency));for(const i of s)this._drawTriangles(e,t,i,s),i.opacity>0&&(t.retina.linksWidth??0)>0&&this._drawLinkLine(t,i)}async init(){this._freqs.links=new Map,this._freqs.triangles=new Map}particleCreated(i){if(i.links=[],!i.options.links)return;const t=this.container.retina.pixelRatio,{retina:n}=i,{distance:e,width:s}=i.options.links;n.linksDistance=e*t,n.linksWidth=s*t}particleDestroyed(i){i.links=[]}}class h{constructor(){this.id="links"}getPlugin(i){return new d(i)}loadOptions(){}needsPlugin(){return!0}}async function p(i,t=!0){await async function(i,t=!0){await i.addInteractor("particlesLinks",(i=>new c(i)),t)}(i,t),await async function(i,t=!0){const n=new h;await i.addPlugin(n,t)}(i,t)}})(),s})()));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
/*! tsParticles Links Particles Interaction v3.0.0-beta.
|
|
1
|
+
/*! tsParticles Links Particles Interaction v3.0.0-beta.5 by Matteo Bruni */
|
package/types/Types.d.ts
CHANGED
|
@@ -38,8 +38,6 @@ export type LinkTriangleDrawParams = {
|
|
|
38
38
|
pos3: ICoordinates;
|
|
39
39
|
};
|
|
40
40
|
export type IParticlesLinkOptions = IParticlesOptions & {
|
|
41
|
-
lineLinked?: ILinks;
|
|
42
|
-
line_linked?: ILinks;
|
|
43
41
|
links?: ILinks;
|
|
44
42
|
};
|
|
45
43
|
export type ParticlesLinkOptions = ParticlesOptions & {
|
package/types/Utils.d.ts
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
|
+
import { type ICoordinates } from "@tsparticles/engine";
|
|
1
2
|
import type { LinkLineDrawParams, LinkParticle, LinkTriangleDrawParams } from "./Types.js";
|
|
3
|
+
export declare function drawTriangle(context: CanvasRenderingContext2D, p1: ICoordinates, p2: ICoordinates, p3: ICoordinates): void;
|
|
2
4
|
export declare function drawLinkLine(params: LinkLineDrawParams): void;
|
|
3
5
|
export declare function drawLinkTriangle(params: LinkTriangleDrawParams): void;
|
|
4
6
|
export declare function getLinkKey(ids: number[]): string;
|
package/umd/Linker.js
CHANGED
package/umd/Utils.js
CHANGED
|
@@ -9,8 +9,16 @@
|
|
|
9
9
|
})(function (require, exports) {
|
|
10
10
|
"use strict";
|
|
11
11
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
|
-
exports.setLinkFrequency = exports.getLinkKey = exports.drawLinkTriangle = exports.drawLinkLine = void 0;
|
|
12
|
+
exports.setLinkFrequency = exports.getLinkKey = exports.drawLinkTriangle = exports.drawLinkLine = exports.drawTriangle = void 0;
|
|
13
13
|
const engine_1 = require("@tsparticles/engine");
|
|
14
|
+
function drawTriangle(context, p1, p2, p3) {
|
|
15
|
+
context.beginPath();
|
|
16
|
+
context.moveTo(p1.x, p1.y);
|
|
17
|
+
context.lineTo(p2.x, p2.y);
|
|
18
|
+
context.lineTo(p3.x, p3.y);
|
|
19
|
+
context.closePath();
|
|
20
|
+
}
|
|
21
|
+
exports.drawTriangle = drawTriangle;
|
|
14
22
|
function drawLinkLine(params) {
|
|
15
23
|
let drawn = false;
|
|
16
24
|
const { begin, end, maxDistance, context, canvasSize, width, backgroundMask, colorLine, opacity, links } = params;
|
|
@@ -84,7 +92,7 @@
|
|
|
84
92
|
exports.drawLinkLine = drawLinkLine;
|
|
85
93
|
function drawLinkTriangle(params) {
|
|
86
94
|
const { context, pos1, pos2, pos3, backgroundMask, colorTriangle, opacityTriangle } = params;
|
|
87
|
-
|
|
95
|
+
drawTriangle(context, pos1, pos2, pos3);
|
|
88
96
|
if (backgroundMask.enable) {
|
|
89
97
|
context.globalCompositeOperation = backgroundMask.composite;
|
|
90
98
|
}
|