@tsparticles/interaction-particles-links 4.0.0-alpha.5 → 4.0.0-beta.0

package/cjs/Utils.js

@@ -1,87 +1,6 @@
-import { drawLine, getDistance, getDistances, getRandom, getStyleFromRgb, rangeColorToRgb, } from "@tsparticles/engine";
-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;
-        let pi2;
-        const endNE = {
-            x: end.x - canvasSize.width,
-            y: end.y,
-        };
-        const 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,
-            };
-            const d2 = getDistances(begin, endSW);
-            if (d2.distance <= maxDistance) {
-                const yi = begin.y - (d2.dy / d2.dx) * begin.x;
-                const 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,
-                };
-                const d3 = getDistances(begin, endSE);
-                if (d3.distance <= maxDistance) {
-                    const yi = begin.y - (d3.dy / d3.dx) * begin.x;
-                    const 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("_");
+    return [...ids].sort((a, b) => a - b).join("_");
 }
 export function setLinkFrequency(particles, dictionary) {
     const key = getLinkKey(particles.map(t => t.id));

package/cjs/index.js

@@ -1,12 +1,15 @@
 export async function loadParticlesLinksInteraction(engine) {
-    engine.checkVersion("4.0.0-alpha.5");
+    engine.checkVersion("4.0.0-beta.0");
     await engine.register(async (e) => {
-        const { loadInteractivityPlugin } = await import("@tsparticles/plugin-interactivity"), { LinksPlugin } = await import("./LinksPlugin.js");
-        await loadInteractivityPlugin(e);
+        const [{ ensureInteractivityPluginLoaded }, { LinksPlugin },] = await Promise.all([
+            import("@tsparticles/plugin-interactivity"),
+            import("./LinksPlugin.js"),
+        ]);
+        ensureInteractivityPluginLoaded(e);
         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);
         });
     });
 }

package/dist_browser_LinkInstance_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v4.0.0-alpha.5
+ * v4.0.0-beta.0
  */
 "use strict";
 /*
@@ -23,7 +23,7 @@
   \**************************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   LinkInstance: () => (/* binding */ LinkInstance)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Utils.js */ \"./dist/browser/Utils.js\");\n\n\nconst minOpacity = 0,\n  minWidth = 0,\n  minDistance = 0,\n  maxFrequency = 1;\nclass LinkInstance {\n  constructor(container, engine) {\n    this._drawLinkLine = (p1, link) => {\n      const p1LinksOptions = p1.options.links;\n      if (!p1LinksOptions?.enable) {\n        return;\n      }\n      const container = this._container,\n        p2 = link.destination,\n        pos1 = p1.getPosition(),\n        pos2 = p2.getPosition();\n      let opacity = link.opacity;\n      container.canvas.draw(ctx => {\n        let colorLine;\n        const twinkle = p1.options[\"twinkle\"]?.lines;\n        if (twinkle?.enable) {\n          const twinkleFreq = twinkle.frequency,\n            twinkleRgb = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rangeColorToRgb)(this._engine, twinkle.color),\n            twinkling = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRandom)() < twinkleFreq;\n          if (twinkling && twinkleRgb) {\n            colorLine = twinkleRgb;\n            opacity = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(twinkle.opacity);\n          }\n        }\n        if (!colorLine) {\n          const linkColor = p1LinksOptions.id !== undefined ? container.particles.linksColors.get(p1LinksOptions.id) : container.particles.linksColor;\n          colorLine = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getLinkColor)(p1, p2, linkColor);\n        }\n        if (!colorLine) {\n          return;\n        }\n        const width = p1.retina.linksWidth ?? minWidth,\n          maxDistance = p1.retina.linksDistance ?? minDistance;\n        (0,_Utils_js__WEBPACK_IMPORTED_MODULE_1__.drawLinkLine)({\n          context: ctx,\n          width,\n          begin: pos1,\n          end: pos2,\n          engine: this._engine,\n          maxDistance,\n          canvasSize: container.canvas.size,\n          links: p1LinksOptions,\n          colorLine,\n          opacity,\n          hdr: container.hdr\n        });\n      });\n    };\n    this._drawLinkTriangle = (p1, link1, link2) => {\n      const linksOptions = p1.options.links;\n      if (!linksOptions?.enable) {\n        return;\n      }\n      const triangleOptions = linksOptions.triangles;\n      if (!triangleOptions.enable) {\n        return;\n      }\n      const container = this._container,\n        p2 = link1.destination,\n        p3 = link2.destination,\n        opacityTriangle = triangleOptions.opacity ?? (link1.opacity + link2.opacity) * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half;\n      if (opacityTriangle <= minOpacity) {\n        return;\n      }\n      container.canvas.draw(ctx => {\n        const pos1 = p1.getPosition(),\n          pos2 = p2.getPosition(),\n          pos3 = p3.getPosition(),\n          linksDistance = p1.retina.linksDistance ?? minDistance;\n        if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistance)(pos1, pos2) > linksDistance || (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistance)(pos3, pos2) > linksDistance || (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistance)(pos3, pos1) > linksDistance) {\n          return;\n        }\n        let colorTriangle = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rangeColorToRgb)(this._engine, triangleOptions.color);\n        if (!colorTriangle) {\n          const linkColor = linksOptions.id !== undefined ? container.particles.linksColors.get(linksOptions.id) : container.particles.linksColor;\n          colorTriangle = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getLinkColor)(p1, p2, linkColor);\n        }\n        if (!colorTriangle) {\n          return;\n        }\n        (0,_Utils_js__WEBPACK_IMPORTED_MODULE_1__.drawLinkTriangle)({\n          context: ctx,\n          pos1,\n          pos2,\n          pos3,\n          colorTriangle,\n          opacityTriangle,\n          hdr: container.hdr\n        });\n      });\n    };\n    this._drawTriangles = (options, p1, link, p1Links) => {\n      const p2 = link.destination;\n      if (!(options.links?.triangles.enable && p2.options.links?.triangles.enable)) {\n        return;\n      }\n      const vertices = p2.links?.filter(t => {\n        const linkFreq = this._getLinkFrequency(p2, t.destination),\n          minCount = 0;\n        return p2.options.links && linkFreq <= p2.options.links.frequency && p1Links.findIndex(l => l.destination === t.destination) >= minCount;\n      });\n      if (!vertices?.length) {\n        return;\n      }\n      for (const vertex of vertices) {\n        const p3 = vertex.destination,\n          triangleFreq = this._getTriangleFrequency(p1, p2, p3);\n        if (triangleFreq > options.links.triangles.frequency) {\n          continue;\n        }\n        this._drawLinkTriangle(p1, link, vertex);\n      }\n    };\n    this._getLinkFrequency = (p1, p2) => {\n      return (0,_Utils_js__WEBPACK_IMPORTED_MODULE_1__.setLinkFrequency)([p1, p2], this._freqs.links);\n    };\n    this._getTriangleFrequency = (p1, p2, p3) => {\n      return (0,_Utils_js__WEBPACK_IMPORTED_MODULE_1__.setLinkFrequency)([p1, p2, p3], this._freqs.triangles);\n    };\n    this._container = container;\n    this._engine = engine;\n    this._freqs = {\n      links: new Map(),\n      triangles: new Map()\n    };\n  }\n  drawParticle(_context, particle) {\n    const {\n      links,\n      options\n    } = particle;\n    if (!links?.length) {\n      return;\n    }\n    const p1Links = links.filter(l => options.links && (options.links.frequency >= maxFrequency || this._getLinkFrequency(particle, l.destination) <= options.links.frequency));\n    for (const link of p1Links) {\n      this._drawTriangles(options, particle, link, p1Links);\n      if (link.opacity > minOpacity && (particle.retina.linksWidth ?? minWidth) > minWidth) {\n        this._drawLinkLine(particle, link);\n      }\n    }\n  }\n  async init() {\n    this._freqs.links = new Map();\n    this._freqs.triangles = new Map();\n    await Promise.resolve();\n  }\n  particleCreated(particle) {\n    particle.links = [];\n    if (!particle.options.links) {\n      return;\n    }\n    const ratio = this._container.retina.pixelRatio,\n      {\n        retina\n      } = particle,\n      {\n        distance,\n        width\n      } = particle.options.links;\n    retina.linksDistance = distance * ratio;\n    retina.linksWidth = width * ratio;\n  }\n  particleDestroyed(particle) {\n    particle.links = [];\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/interaction-particles-links/./dist/browser/LinkInstance.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   LinkInstance: () => (/* binding */ LinkInstance)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Utils.js */ \"./dist/browser/Utils.js\");\n\n\nconst minOpacity = 0, minWidth = 0, minDistance = 0, maxFrequency = 1, defaultFrequency = 0;\nclass LinkInstance {\n    _colorCache = new Map();\n    _container;\n    _engine;\n    _freqs;\n    constructor(container, engine){\n        this._container = container;\n        this._engine = engine;\n        this._freqs = {\n            links: new Map(),\n            triangles: new Map()\n        };\n    }\n    drawParticle(context, particle) {\n        const { links, options } = particle;\n        if (!links?.length || !options.links) {\n            return;\n        }\n        const linkOpts = options.links, width = particle.retina.linksWidth ?? minWidth, pos1 = particle.getPosition(), twinkle = particle.options[\"twinkle\"]?.links, trianglesEnabled = linkOpts.triangles.enable, p1Destinations = trianglesEnabled ? new Set(links.map((l)=>l.destination.id)) : null, originalAlpha = context.globalAlpha;\n        let currentColorStyle = \"\", currentWidth = -1, currentAlpha = -1, pathOpen = false;\n        const flushLines = ()=>{\n            if (pathOpen) {\n                context.stroke();\n                pathOpen = false;\n            }\n        };\n        for (const link of links){\n            if (linkOpts.frequency < maxFrequency && this._getLinkFrequency(particle, link.destination) > linkOpts.frequency) {\n                continue;\n            }\n            const pos2 = link.destination.getPosition();\n            if (trianglesEnabled && !link.isWarped && p1Destinations) {\n                flushLines();\n                this._drawTriangles(options, particle, link, p1Destinations, pos1, pos2, context);\n            }\n            if (link.opacity <= minOpacity || width <= minWidth) {\n                continue;\n            }\n            if (!linkOpts.enable) {\n                continue;\n            }\n            let opacity = link.opacity, colorLine = link.color;\n            const twinkleRgb = twinkle?.enable && (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRandom)() < twinkle.frequency ? (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rangeColorToRgb)(this._engine, twinkle.color) : undefined;\n            if (twinkle && twinkleRgb) {\n                colorLine = twinkleRgb;\n                opacity = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(twinkle.opacity);\n            }\n            if (!colorLine) {\n                const linkColor = linkOpts.id !== undefined ? this._container.particles.linksColors.get(linkOpts.id) : this._container.particles.linksColor;\n                colorLine = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getLinkColor)(particle, link.destination, linkColor);\n            }\n            if (!colorLine) {\n                continue;\n            }\n            const colorStyle = this._getCachedStyle(colorLine);\n            if (colorStyle !== currentColorStyle || width !== currentWidth || opacity !== currentAlpha) {\n                flushLines();\n                context.strokeStyle = colorStyle;\n                context.lineWidth = width;\n                context.globalAlpha = opacity;\n                currentColorStyle = colorStyle;\n                currentWidth = width;\n                currentAlpha = opacity;\n                context.beginPath();\n                pathOpen = true;\n            }\n            if (link.isWarped) {\n                const canvasSize = this._container.canvas.size, dx = pos2.x - pos1.x, dy = pos2.y - pos1.y;\n                let sx = _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.x, sy = _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.y;\n                if (Math.abs(dx) > canvasSize.width * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half) {\n                    sx = dx > minDistance ? -canvasSize.width : canvasSize.width;\n                }\n                if (Math.abs(dy) > canvasSize.height * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half) {\n                    sy = dy > minDistance ? -canvasSize.height : canvasSize.height;\n                }\n                context.moveTo(pos1.x, pos1.y);\n                context.lineTo(pos2.x + sx, pos2.y + sy);\n                context.moveTo(pos1.x - sx, pos1.y - sy);\n                context.lineTo(pos2.x, pos2.y);\n            } else {\n                context.moveTo(pos1.x, pos1.y);\n                context.lineTo(pos2.x, pos2.y);\n            }\n        }\n        flushLines();\n        context.globalAlpha = originalAlpha;\n    }\n    init() {\n        this._freqs.links.clear();\n        this._freqs.triangles.clear();\n        this._colorCache.clear();\n        return Promise.resolve();\n    }\n    particleCreated(particle) {\n        particle.links = [];\n        if (!particle.options.links) {\n            return;\n        }\n        particle.linksDistance = particle.options.links.distance;\n        particle.linksWidth = particle.options.links.width;\n        const ratio = this._container.retina.pixelRatio;\n        particle.retina.linksDistance = particle.linksDistance * ratio;\n        particle.retina.linksWidth = particle.linksWidth * ratio;\n    }\n    particleDestroyed(particle) {\n        particle.links = [];\n    }\n    _drawTriangles(options, p1, link, p1Destinations, pos1, pos2, context) {\n        const p2 = link.destination, triangleOptions = options.links?.triangles;\n        if (!triangleOptions?.enable || !p2.options.links?.triangles.enable) {\n            return;\n        }\n        const p2Links = p2.links;\n        if (!p2Links?.length) {\n            return;\n        }\n        for (const vertex of p2Links){\n            if (vertex.isWarped || this._getLinkFrequency(p2, vertex.destination) > p2.options.links.frequency || !p1Destinations.has(vertex.destination.id)) {\n                continue;\n            }\n            const p3 = vertex.destination;\n            if (this._getTriangleFrequency(p1, p2, p3) > (options.links?.triangles.frequency ?? defaultFrequency)) {\n                continue;\n            }\n            const opacityTriangle = triangleOptions.opacity ?? (link.opacity + vertex.opacity) * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half, colorTriangle = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rangeColorToRgb)(this._engine, triangleOptions.color) ?? link.color;\n            if (!colorTriangle || opacityTriangle <= minOpacity) {\n                continue;\n            }\n            const pos3 = p3.getPosition();\n            context.save();\n            context.fillStyle = this._getCachedStyle(colorTriangle);\n            context.globalAlpha = opacityTriangle;\n            context.beginPath();\n            context.moveTo(pos1.x, pos1.y);\n            context.lineTo(pos2.x, pos2.y);\n            context.lineTo(pos3.x, pos3.y);\n            context.closePath();\n            context.fill();\n            context.restore();\n        }\n    }\n    _getCachedStyle(rgb) {\n        const key = `${rgb.r},${rgb.g},${rgb.b}`;\n        let style = this._colorCache.get(key);\n        if (!style) {\n            style = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(rgb, this._container.hdr);\n            this._colorCache.set(key, style);\n        }\n        return style;\n    }\n    _getLinkFrequency(p1, p2) {\n        return (0,_Utils_js__WEBPACK_IMPORTED_MODULE_1__.setLinkFrequency)([\n            p1,\n            p2\n        ], this._freqs.links);\n    }\n    _getTriangleFrequency(p1, p2, p3) {\n        return (0,_Utils_js__WEBPACK_IMPORTED_MODULE_1__.setLinkFrequency)([\n            p1,\n            p2,\n            p3\n        ], this._freqs.triangles);\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/interaction-particles-links/./dist/browser/LinkInstance.js?\n}");
 
 /***/ },
 
@@ -33,7 +33,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
   \*******************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   drawLinkLine: () => (/* binding */ drawLinkLine),\n/* harmony export */   drawLinkTriangle: () => (/* binding */ drawLinkTriangle),\n/* harmony export */   drawTriangle: () => (/* binding */ drawTriangle),\n/* harmony export */   getLinkKey: () => (/* binding */ getLinkKey),\n/* harmony export */   setLinkFrequency: () => (/* binding */ setLinkFrequency)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nfunction drawTriangle(context, p1, p2, p3) {\n  context.beginPath();\n  context.moveTo(p1.x, p1.y);\n  context.lineTo(p2.x, p2.y);\n  context.lineTo(p3.x, p3.y);\n  context.closePath();\n}\nfunction drawLinkLine(params) {\n  let drawn = false;\n  const {\n    begin,\n    end,\n    engine,\n    maxDistance,\n    context,\n    canvasSize,\n    width,\n    colorLine,\n    opacity,\n    links,\n    hdr\n  } = params;\n  if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistance)(begin, end) <= maxDistance) {\n    (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.drawLine)(context, begin, end);\n    drawn = true;\n  } else if (links.warp) {\n    let pi1;\n    let pi2;\n    const endNE = {\n      x: end.x - canvasSize.width,\n      y: end.y\n    };\n    const d1 = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistances)(begin, endNE);\n    if (d1.distance <= maxDistance) {\n      const yi = begin.y - d1.dy / d1.dx * begin.x;\n      pi1 = {\n        x: 0,\n        y: yi\n      };\n      pi2 = {\n        x: canvasSize.width,\n        y: yi\n      };\n    } else {\n      const endSW = {\n        x: end.x,\n        y: end.y - canvasSize.height\n      };\n      const d2 = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistances)(begin, endSW);\n      if (d2.distance <= maxDistance) {\n        const yi = begin.y - d2.dy / d2.dx * begin.x;\n        const xi = -yi / (d2.dy / d2.dx);\n        pi1 = {\n          x: xi,\n          y: 0\n        };\n        pi2 = {\n          x: xi,\n          y: canvasSize.height\n        };\n      } else {\n        const endSE = {\n          x: end.x - canvasSize.width,\n          y: end.y - canvasSize.height\n        };\n        const d3 = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistances)(begin, endSE);\n        if (d3.distance <= maxDistance) {\n          const yi = begin.y - d3.dy / d3.dx * begin.x;\n          const xi = -yi / (d3.dy / d3.dx);\n          pi1 = {\n            x: xi,\n            y: yi\n          };\n          pi2 = {\n            x: pi1.x + canvasSize.width,\n            y: pi1.y + canvasSize.height\n          };\n        }\n      }\n    }\n    if (pi1 && pi2) {\n      (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.drawLine)(context, begin, pi1);\n      (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.drawLine)(context, end, pi2);\n      drawn = true;\n    }\n  }\n  if (!drawn) {\n    return;\n  }\n  context.lineWidth = width;\n  context.strokeStyle = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(colorLine, hdr, opacity);\n  const {\n    shadow\n  } = links;\n  if (shadow.enable) {\n    const shadowColor = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rangeColorToRgb)(engine, shadow.color);\n    if (shadowColor) {\n      context.shadowBlur = shadow.blur;\n      context.shadowColor = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(shadowColor, hdr);\n    }\n  }\n  context.stroke();\n}\nfunction drawLinkTriangle(params) {\n  const {\n    context,\n    hdr,\n    pos1,\n    pos2,\n    pos3,\n    colorTriangle,\n    opacityTriangle\n  } = params;\n  drawTriangle(context, pos1, pos2, pos3);\n  context.fillStyle = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(colorTriangle, hdr, opacityTriangle);\n  context.fill();\n}\nfunction getLinkKey(ids) {\n  ids.sort((a, b) => a - b);\n  return ids.join(\"_\");\n}\nfunction setLinkFrequency(particles, dictionary) {\n  const key = getLinkKey(particles.map(t => t.id));\n  let res = dictionary.get(key);\n  if (res === undefined) {\n    res = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRandom)();\n    dictionary.set(key, res);\n  }\n  return res;\n}\n\n//# sourceURL=webpack://@tsparticles/interaction-particles-links/./dist/browser/Utils.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   getLinkKey: () => (/* binding */ getLinkKey),\n/* harmony export */   setLinkFrequency: () => (/* binding */ setLinkFrequency)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nfunction getLinkKey(ids) {\n    return [\n        ...ids\n    ].sort((a, b)=>a - b).join(\"_\");\n}\nfunction setLinkFrequency(particles, dictionary) {\n    const key = getLinkKey(particles.map((t)=>t.id));\n    let res = dictionary.get(key);\n    if (res === undefined) {\n        res = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRandom)();\n        dictionary.set(key, res);\n    }\n    return res;\n}\n\n\n//# sourceURL=webpack://@tsparticles/interaction-particles-links/./dist/browser/Utils.js?\n}");
 
 /***/ }
 

package/dist_browser_Linker_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v4.0.0-alpha.5
+ * v4.0.0-beta.0
  */
 "use strict";
 /*
@@ -23,7 +23,7 @@
   \************************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   CircleWarp: () => (/* binding */ CircleWarp)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nclass CircleWarp extends _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Circle {\n  constructor(x, y, radius, canvasSize) {\n    super(x, y, radius);\n    this.canvasSize = canvasSize;\n    this.canvasSize = {\n      ...canvasSize\n    };\n  }\n  contains(point) {\n    const {\n        width,\n        height\n      } = this.canvasSize,\n      {\n        x,\n        y\n      } = point;\n    return super.contains(point) || super.contains({\n      x: x - width,\n      y\n    }) || super.contains({\n      x: x - width,\n      y: y - height\n    }) || super.contains({\n      x,\n      y: y - height\n    });\n  }\n  intersects(range) {\n    if (super.intersects(range)) {\n      return true;\n    }\n    const rect = range,\n      circle = range,\n      newPos = {\n        x: range.position.x - this.canvasSize.width,\n        y: range.position.y - this.canvasSize.height\n      };\n    if (Object.hasOwn(circle, \"radius\")) {\n      const biggerCircle = new _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Circle(newPos.x, newPos.y, circle.radius * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.double);\n      return super.intersects(biggerCircle);\n    } else if (Object.hasOwn(rect, \"size\")) {\n      const rectSW = new _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Rectangle(newPos.x, newPos.y, rect.size.width * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.double, rect.size.height * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.double);\n      return super.intersects(rectSW);\n    }\n    return false;\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/interaction-particles-links/./dist/browser/CircleWarp.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   CircleWarp: () => (/* binding */ CircleWarp)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nclass CircleWarp extends _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Circle {\n    canvasSize;\n    constructor(x, y, radius, canvasSize){\n        super(x, y, radius);\n        this.canvasSize = canvasSize;\n    }\n    contains(point) {\n        if (super.contains(point)) return true;\n        const { width, height } = this.canvasSize, { x, y } = point;\n        return super.contains({\n            x: x - width,\n            y\n        }) || super.contains({\n            x: x + width,\n            y\n        }) || super.contains({\n            x,\n            y: y - height\n        }) || super.contains({\n            x,\n            y: y + height\n        }) || super.contains({\n            x: x - width,\n            y: y - height\n        }) || super.contains({\n            x: x + width,\n            y: y + height\n        }) || super.contains({\n            x: x - width,\n            y: y + height\n        }) || super.contains({\n            x: x + width,\n            y: y - height\n        });\n    }\n    intersects(range) {\n        if (super.intersects(range)) return true;\n        const { width, height } = this.canvasSize, pos = range.position, shifts = [\n            {\n                x: -width,\n                y: 0\n            },\n            {\n                x: width,\n                y: 0\n            },\n            {\n                x: 0,\n                y: -height\n            },\n            {\n                x: 0,\n                y: height\n            },\n            {\n                x: -width,\n                y: -height\n            },\n            {\n                x: width,\n                y: height\n            },\n            {\n                x: -width,\n                y: height\n            },\n            {\n                x: width,\n                y: -height\n            }\n        ];\n        for (const shift of shifts){\n            const shiftedPos = {\n                x: pos.x + shift.x,\n                y: pos.y + shift.y\n            };\n            let shiftedRange;\n            if (range instanceof _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Circle) {\n                shiftedRange = new _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Circle(shiftedPos.x, shiftedPos.y, range.radius);\n            } else {\n                const rect = range;\n                shiftedRange = new _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Rectangle(shiftedPos.x, shiftedPos.y, rect.size.width, rect.size.height);\n            }\n            if (super.intersects(shiftedRange)) return true;\n        }\n        return false;\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/interaction-particles-links/./dist/browser/CircleWarp.js?\n}");
 
 /***/ },
 
@@ -33,7 +33,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
   \********************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Linker: () => (/* binding */ Linker)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _CircleWarp_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./CircleWarp.js */ \"./dist/browser/CircleWarp.js\");\n/* harmony import */ var _Options_Classes_Links_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Options/Classes/Links.js */ \"./dist/browser/Options/Classes/Links.js\");\n/* harmony import */ var _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @tsparticles/plugin-interactivity */ \"@tsparticles/plugin-interactivity\");\n\n\n\n\nconst squarePower = 2,\n  opacityOffset = 1,\n  minDistance = 0;\nfunction getLinkDistance(pos1, pos2, optDistance, canvasSize, warp) {\n  const {\n    dx,\n    dy,\n    distance\n  } = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistances)(pos1, pos2);\n  if (!warp || distance <= optDistance) {\n    return distance;\n  }\n  const absDiffs = {\n      x: Math.abs(dx),\n      y: Math.abs(dy)\n    },\n    warpDistances = {\n      x: Math.min(absDiffs.x, canvasSize.width - absDiffs.x),\n      y: Math.min(absDiffs.y, canvasSize.height - absDiffs.y)\n    };\n  return Math.sqrt(warpDistances.x ** squarePower + warpDistances.y ** squarePower);\n}\nclass Linker extends _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_3__.ParticlesInteractorBase {\n  constructor(container, engine) {\n    super(container);\n    this._setColor = p1 => {\n      if (!p1.options.links) {\n        return;\n      }\n      const container = this.container,\n        linksOptions = p1.options.links;\n      let linkColor = linksOptions.id === undefined ? container.particles.linksColor : container.particles.linksColors.get(linksOptions.id);\n      if (linkColor) {\n        return;\n      }\n      const optColor = linksOptions.color;\n      linkColor = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getLinkRandomColor)(this._engine, optColor, linksOptions.blink, linksOptions.consent);\n      if (linksOptions.id === undefined) {\n        container.particles.linksColor = linkColor;\n      } else {\n        container.particles.linksColors.set(linksOptions.id, linkColor);\n      }\n    };\n    this._engine = engine;\n  }\n  clear() {}\n  init() {\n    this.container.particles.linksColor = undefined;\n    this.container.particles.linksColors = new Map();\n  }\n  interact(p1) {\n    if (!p1.options.links) {\n      return;\n    }\n    p1.links = [];\n    const pos1 = p1.getPosition(),\n      container = this.container,\n      canvasSize = container.canvas.size;\n    if (pos1.x < _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.x || pos1.y < _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.y || pos1.x > canvasSize.width || pos1.y > canvasSize.height) {\n      return;\n    }\n    const linkOpt1 = p1.options.links,\n      optOpacity = linkOpt1.opacity,\n      optDistance = p1.retina.linksDistance ?? minDistance,\n      warp = linkOpt1.warp;\n    let range;\n    if (warp) {\n      range = new _CircleWarp_js__WEBPACK_IMPORTED_MODULE_1__.CircleWarp(pos1.x, pos1.y, optDistance, canvasSize);\n    } else {\n      range = new _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Circle(pos1.x, pos1.y, optDistance);\n    }\n    const query = container.particles.quadTree.query(range);\n    for (const p2 of query) {\n      const linkOpt2 = p2.options.links;\n      if (p1 === p2 || !linkOpt2?.enable || linkOpt1.id !== linkOpt2.id || p2.spawning || p2.destroyed || !p2.links || p1.links.some(t => t.destination === p2) || p2.links.some(t => t.destination === p1)) {\n        continue;\n      }\n      const pos2 = p2.getPosition();\n      if (pos2.x < _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.x || pos2.y < _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.y || pos2.x > canvasSize.width || pos2.y > canvasSize.height) {\n        continue;\n      }\n      const distance = getLinkDistance(pos1, pos2, optDistance, canvasSize, warp && linkOpt2.warp);\n      if (distance > optDistance) {\n        continue;\n      }\n      const opacityLine = (opacityOffset - distance / optDistance) * optOpacity;\n      this._setColor(p1);\n      p1.links.push({\n        destination: p2,\n        opacity: opacityLine\n      });\n    }\n  }\n  isEnabled(particle) {\n    return !!particle.options.links?.enable;\n  }\n  loadParticlesOptions(options, ...sources) {\n    options.links ??= new _Options_Classes_Links_js__WEBPACK_IMPORTED_MODULE_2__.Links();\n    for (const source of sources) {\n      options.links.load(source?.links);\n    }\n  }\n  reset() {}\n}\n\n//# sourceURL=webpack://@tsparticles/interaction-particles-links/./dist/browser/Linker.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Linker: () => (/* binding */ Linker)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _CircleWarp_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./CircleWarp.js */ \"./dist/browser/CircleWarp.js\");\n/* harmony import */ var _Options_Classes_Links_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Options/Classes/Links.js */ \"./dist/browser/Options/Classes/Links.js\");\n/* harmony import */ var _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @tsparticles/plugin-interactivity */ \"@tsparticles/plugin-interactivity\");\n\n\n\n\nconst opacityOffset = 1, minDistance = 0;\nfunction getWarpDistance(pos1, pos2, canvasSize) {\n    const { dx, dy } = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistances)(pos1, pos2), absDiffs = {\n        x: Math.abs(dx),\n        y: Math.abs(dy)\n    }, warpDistances = {\n        x: Math.min(absDiffs.x, canvasSize.width - absDiffs.x),\n        y: Math.min(absDiffs.y, canvasSize.height - absDiffs.y)\n    };\n    return Math.hypot(warpDistances.x, warpDistances.y);\n}\nclass Linker extends _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_3__.ParticlesInteractorBase {\n    _engine;\n    _maxDistance;\n    constructor(container, engine){\n        super(container);\n        this._engine = engine;\n        this._maxDistance = 0;\n    }\n    get maxDistance() {\n        return this._maxDistance;\n    }\n    clear() {}\n    init() {\n        this.container.particles.linksColor = undefined;\n        this.container.particles.linksColors = new Map();\n    }\n    interact(p1) {\n        if (!p1.options.links) {\n            return;\n        }\n        p1.links = [];\n        if (p1.linksDistance && p1.linksDistance > this._maxDistance) {\n            this._maxDistance = p1.linksDistance;\n        }\n        const pos1 = p1.getPosition(), container = this.container, canvasSize = container.canvas.size;\n        if (pos1.x < _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.x || pos1.y < _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.y || pos1.x > canvasSize.width || pos1.y > canvasSize.height) {\n            return;\n        }\n        const linkOpt1 = p1.options.links, optOpacity = linkOpt1.opacity, optDistance = p1.retina.linksDistance ?? minDistance, warp = linkOpt1.warp, range = warp ? new _CircleWarp_js__WEBPACK_IMPORTED_MODULE_1__.CircleWarp(pos1.x, pos1.y, optDistance, canvasSize) : new _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Circle(pos1.x, pos1.y, optDistance), query = container.particles.grid.query(range);\n        for (const p2 of query){\n            const linkOpt2 = p2.options.links;\n            if (p1 === p2 || !linkOpt2?.enable || linkOpt1.id !== linkOpt2.id || p2.spawning || p2.destroyed || !p2.links || p1.links.some((t)=>t.destination === p2) || p2.links.some((t)=>t.destination === p1)) {\n                continue;\n            }\n            const pos2 = p2.getPosition();\n            if (pos2.x < _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.x || pos2.y < _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.y || pos2.x > canvasSize.width || pos2.y > canvasSize.height) {\n                continue;\n            }\n            const distDirect = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistances)(pos1, pos2).distance, distWarp = warp && linkOpt2.warp ? getWarpDistance(pos1, pos2, canvasSize) : distDirect, distance = Math.min(distDirect, distWarp);\n            if (distance > optDistance) {\n                continue;\n            }\n            const opacityLine = (opacityOffset - distance / optDistance) * optOpacity;\n            this._setColor(p1);\n            p1.links.push({\n                destination: p2,\n                opacity: opacityLine,\n                color: this._getLinkColor(p1, p2),\n                isWarped: distWarp < distDirect\n            });\n        }\n    }\n    isEnabled(particle) {\n        return !!particle.options.links?.enable;\n    }\n    loadParticlesOptions(options, ...sources) {\n        options.links ??= new _Options_Classes_Links_js__WEBPACK_IMPORTED_MODULE_2__.Links();\n        for (const source of sources){\n            options.links.load(source?.links);\n        }\n    }\n    reset() {}\n    _getLinkColor(p1, p2) {\n        const container = this.container, linksOptions = p1.options.links;\n        if (!linksOptions) {\n            return;\n        }\n        const linkColor = linksOptions.id !== undefined ? container.particles.linksColors.get(linksOptions.id) : container.particles.linksColor;\n        return (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getLinkColor)(p1, p2, linkColor);\n    }\n    _setColor(p1) {\n        if (!p1.options.links) {\n            return;\n        }\n        const container = this.container, linksOptions = p1.options.links;\n        let linkColor = linksOptions.id === undefined ? container.particles.linksColor : container.particles.linksColors.get(linksOptions.id);\n        if (linkColor) {\n            return;\n        }\n        linkColor = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getLinkRandomColor)(this._engine, linksOptions.color, linksOptions.blink, linksOptions.consent);\n        if (linksOptions.id === undefined) {\n            container.particles.linksColor = linkColor;\n        } else {\n            container.particles.linksColors.set(linksOptions.id, linkColor);\n        }\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/interaction-particles-links/./dist/browser/Linker.js?\n}");
 
 /***/ }
 

package/dist_browser_LinksPlugin_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v4.0.0-alpha.5
+ * v4.0.0-beta.0
  */
 "use strict";
 /*
@@ -23,7 +23,7 @@
   \*************************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   LinksPlugin: () => (/* binding */ LinksPlugin)\n/* harmony export */ });\nclass LinksPlugin {\n  constructor(engine) {\n    this.id = \"links\";\n    this._engine = engine;\n  }\n  async getPlugin(container) {\n    const {\n      LinkInstance\n    } = await __webpack_require__.e(/*! import() */ \"dist_browser_LinkInstance_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./LinkInstance.js */ \"./dist/browser/LinkInstance.js\"));\n    return new LinkInstance(container, this._engine);\n  }\n  loadOptions() {}\n  needsPlugin() {\n    return true;\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/interaction-particles-links/./dist/browser/LinksPlugin.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   LinksPlugin: () => (/* binding */ LinksPlugin)\n/* harmony export */ });\nclass LinksPlugin {\n    id = \"links\";\n    _engine;\n    constructor(engine){\n        this._engine = engine;\n    }\n    async getPlugin(container) {\n        const { LinkInstance } = await __webpack_require__.e(/*! import() */ \"dist_browser_LinkInstance_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./LinkInstance.js */ \"./dist/browser/LinkInstance.js\"));\n        return new LinkInstance(container, this._engine);\n    }\n    loadOptions() {}\n    needsPlugin() {\n        return true;\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/interaction-particles-links/./dist/browser/LinksPlugin.js?\n}");
 
 /***/ }
 

package/esm/CircleWarp.js

@@ -1,32 +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;
     }