@tsparticles/interaction-light 3.0.3 → 3.1.0

package/browser/ExternalLighter.js

@@ -21,6 +21,7 @@ export class ExternalLighter extends ExternalInteractorBase {
         container.canvas.draw((ctx) => {
             drawLight(container, ctx, mousePos);
         });
+        await Promise.resolve();
     }
     isEnabled(particle) {
         const container = this.container, mouse = container.interactivity.mouse, interactivity = particle?.interactivity ?? container.actualOptions.interactivity, events = interactivity.events;

package/browser/ParticlesLighter.js

@@ -20,6 +20,7 @@ export class ParticlesLighter extends ParticlesInteractorBase {
         container.canvas.draw((ctx) => {
             drawParticleShadow(container, ctx, particle, mousePos);
         });
+        await Promise.resolve();
     }
     isEnabled(particle) {
         const container = this.container, interactivity = particle.interactivity ?? container.actualOptions.interactivity, mouse = container.interactivity.mouse, events = interactivity.events;

package/browser/Utils.js

@@ -1,4 +1,8 @@
 import { getStyleFromRgb } from "@tsparticles/engine";
+const gradientPos = {
+    max: 1,
+    min: 0,
+}, half = 0.5, double = 2, halfPI = Math.PI * half, doublePI = Math.PI * double, quarter = 0.25, quarterPI = Math.PI * quarter, arcStart = 0;
 export const lightMode = "light";
 export function drawLight(container, context, mousePos) {
     const lightOptions = container.actualOptions.interactivity.modes.light?.area;
@@ -6,14 +10,14 @@ export function drawLight(container, context, mousePos) {
         return;
     }
     context.beginPath();
-    context.arc(mousePos.x, mousePos.y, lightOptions.radius, 0, 2 * Math.PI);
-    const gradientAmbientLight = context.createRadialGradient(mousePos.x, mousePos.y, 0, mousePos.x, mousePos.y, lightOptions.radius);
+    context.arc(mousePos.x, mousePos.y, lightOptions.radius, arcStart, doublePI);
+    const gradientAmbientLight = context.createRadialGradient(mousePos.x, mousePos.y, arcStart, mousePos.x, mousePos.y, lightOptions.radius);
     const gradientRgb = container.canvas.mouseLight;
-    if (!gradientRgb || !gradientRgb.start || !gradientRgb.stop) {
+    if (!gradientRgb?.start || !gradientRgb.stop) {
         return;
     }
-    gradientAmbientLight.addColorStop(0, getStyleFromRgb(gradientRgb.start));
-    gradientAmbientLight.addColorStop(1, getStyleFromRgb(gradientRgb.stop));
+    gradientAmbientLight.addColorStop(gradientPos.min, getStyleFromRgb(gradientRgb.start));
+    gradientAmbientLight.addColorStop(gradientPos.max, getStyleFromRgb(gradientRgb.stop));
     context.fillStyle = gradientAmbientLight;
     context.fill();
 }
@@ -26,7 +30,7 @@ export function drawParticleShadow(container, context, particle, mousePos) {
     if (!shadowRgb) {
         return;
     }
-    const radius = particle.getRadius(), sides = particle.sides, full = (Math.PI * 2) / sides, angle = -particle.rotation + Math.PI / 4, factor = 1, dots = [];
+    const radius = particle.getRadius(), sides = particle.sides, full = doublePI / sides, angle = -particle.rotation + quarterPI, factor = 1, dots = [];
     for (let i = 0; i < sides; i++) {
         dots.push({
             x: pos.x + radius * Math.sin(angle + full * i) * factor,
@@ -36,16 +40,16 @@ export function drawParticleShadow(container, context, particle, mousePos) {
     const points = [], shadowLength = shadowOptions.length;
     for (const dot of dots) {
         const dotAngle = Math.atan2(mousePos.y - dot.y, mousePos.x - dot.x), end = {
-            x: dot.x + shadowLength * Math.sin(-dotAngle - Math.PI / 2),
-            y: dot.y + shadowLength * Math.cos(-dotAngle - Math.PI / 2),
+            x: dot.x + shadowLength * Math.sin(-dotAngle - halfPI),
+            y: dot.y + shadowLength * Math.cos(-dotAngle - halfPI),
         };
         points.push({
             end: end,
             start: dot,
         });
     }
-    const shadowColor = getStyleFromRgb(shadowRgb), last = points.length - 1;
-    for (let i = last, n = 0; i >= 0; n = i--) {
+    const shadowColor = getStyleFromRgb(shadowRgb), lastOffset = 1, firstPos = 0, last = points.length - lastOffset;
+    for (let i = last, n = 0; i >= firstPos; n = i--) {
         context.beginPath();
         context.moveTo(points[i].start.x, points[i].start.y);
         context.lineTo(points[n].start.x, points[n].start.y);

package/cjs/ExternalLighter.js

@@ -24,6 +24,7 @@ class ExternalLighter extends engine_1.ExternalInteractorBase {
         container.canvas.draw((ctx) => {
             (0, Utils_js_1.drawLight)(container, ctx, mousePos);
         });
+        await Promise.resolve();
     }
     isEnabled(particle) {
         const container = this.container, mouse = container.interactivity.mouse, interactivity = particle?.interactivity ?? container.actualOptions.interactivity, events = interactivity.events;

package/cjs/ParticlesLighter.js

@@ -23,6 +23,7 @@ class ParticlesLighter extends engine_1.ParticlesInteractorBase {
         container.canvas.draw((ctx) => {
             (0, Utils_js_1.drawParticleShadow)(container, ctx, particle, mousePos);
         });
+        await Promise.resolve();
     }
     isEnabled(particle) {
         const container = this.container, interactivity = particle.interactivity ?? container.actualOptions.interactivity, mouse = container.interactivity.mouse, events = interactivity.events;

package/cjs/Utils.js

@@ -2,6 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.drawParticleShadow = exports.drawLight = exports.lightMode = void 0;
 const engine_1 = require("@tsparticles/engine");
+const gradientPos = {
+    max: 1,
+    min: 0,
+}, half = 0.5, double = 2, halfPI = Math.PI * half, doublePI = Math.PI * double, quarter = 0.25, quarterPI = Math.PI * quarter, arcStart = 0;
 exports.lightMode = "light";
 function drawLight(container, context, mousePos) {
     const lightOptions = container.actualOptions.interactivity.modes.light?.area;
@@ -9,14 +13,14 @@ function drawLight(container, context, mousePos) {
         return;
     }
     context.beginPath();
-    context.arc(mousePos.x, mousePos.y, lightOptions.radius, 0, 2 * Math.PI);
-    const gradientAmbientLight = context.createRadialGradient(mousePos.x, mousePos.y, 0, mousePos.x, mousePos.y, lightOptions.radius);
+    context.arc(mousePos.x, mousePos.y, lightOptions.radius, arcStart, doublePI);
+    const gradientAmbientLight = context.createRadialGradient(mousePos.x, mousePos.y, arcStart, mousePos.x, mousePos.y, lightOptions.radius);
     const gradientRgb = container.canvas.mouseLight;
-    if (!gradientRgb || !gradientRgb.start || !gradientRgb.stop) {
+    if (!gradientRgb?.start || !gradientRgb.stop) {
         return;
     }
-    gradientAmbientLight.addColorStop(0, (0, engine_1.getStyleFromRgb)(gradientRgb.start));
-    gradientAmbientLight.addColorStop(1, (0, engine_1.getStyleFromRgb)(gradientRgb.stop));
+    gradientAmbientLight.addColorStop(gradientPos.min, (0, engine_1.getStyleFromRgb)(gradientRgb.start));
+    gradientAmbientLight.addColorStop(gradientPos.max, (0, engine_1.getStyleFromRgb)(gradientRgb.stop));
     context.fillStyle = gradientAmbientLight;
     context.fill();
 }
@@ -30,7 +34,7 @@ function drawParticleShadow(container, context, particle, mousePos) {
     if (!shadowRgb) {
         return;
     }
-    const radius = particle.getRadius(), sides = particle.sides, full = (Math.PI * 2) / sides, angle = -particle.rotation + Math.PI / 4, factor = 1, dots = [];
+    const radius = particle.getRadius(), sides = particle.sides, full = doublePI / sides, angle = -particle.rotation + quarterPI, factor = 1, dots = [];
     for (let i = 0; i < sides; i++) {
         dots.push({
             x: pos.x + radius * Math.sin(angle + full * i) * factor,
@@ -40,16 +44,16 @@ function drawParticleShadow(container, context, particle, mousePos) {
     const points = [], shadowLength = shadowOptions.length;
     for (const dot of dots) {
         const dotAngle = Math.atan2(mousePos.y - dot.y, mousePos.x - dot.x), end = {
-            x: dot.x + shadowLength * Math.sin(-dotAngle - Math.PI / 2),
-            y: dot.y + shadowLength * Math.cos(-dotAngle - Math.PI / 2),
+            x: dot.x + shadowLength * Math.sin(-dotAngle - halfPI),
+            y: dot.y + shadowLength * Math.cos(-dotAngle - halfPI),
         };
         points.push({
             end: end,
             start: dot,
         });
     }
-    const shadowColor = (0, engine_1.getStyleFromRgb)(shadowRgb), last = points.length - 1;
-    for (let i = last, n = 0; i >= 0; n = i--) {
+    const shadowColor = (0, engine_1.getStyleFromRgb)(shadowRgb), lastOffset = 1, firstPos = 0, last = points.length - lastOffset;
+    for (let i = last, n = 0; i >= firstPos; n = i--) {
         context.beginPath();
         context.moveTo(points[i].start.x, points[i].start.y);
         context.lineTo(points[n].start.x, points[n].start.y);

package/esm/ExternalLighter.js

@@ -21,6 +21,7 @@ export class ExternalLighter extends ExternalInteractorBase {
         container.canvas.draw((ctx) => {
             drawLight(container, ctx, mousePos);
         });
+        await Promise.resolve();
     }
     isEnabled(particle) {
         const container = this.container, mouse = container.interactivity.mouse, interactivity = particle?.interactivity ?? container.actualOptions.interactivity, events = interactivity.events;

package/esm/ParticlesLighter.js

@@ -20,6 +20,7 @@ export class ParticlesLighter extends ParticlesInteractorBase {
         container.canvas.draw((ctx) => {
             drawParticleShadow(container, ctx, particle, mousePos);
         });
+        await Promise.resolve();
     }
     isEnabled(particle) {
         const container = this.container, interactivity = particle.interactivity ?? container.actualOptions.interactivity, mouse = container.interactivity.mouse, events = interactivity.events;

package/esm/Utils.js

@@ -1,4 +1,8 @@
 import { getStyleFromRgb } from "@tsparticles/engine";
+const gradientPos = {
+    max: 1,
+    min: 0,
+}, half = 0.5, double = 2, halfPI = Math.PI * half, doublePI = Math.PI * double, quarter = 0.25, quarterPI = Math.PI * quarter, arcStart = 0;
 export const lightMode = "light";
 export function drawLight(container, context, mousePos) {
     const lightOptions = container.actualOptions.interactivity.modes.light?.area;
@@ -6,14 +10,14 @@ export function drawLight(container, context, mousePos) {
         return;
     }
     context.beginPath();
-    context.arc(mousePos.x, mousePos.y, lightOptions.radius, 0, 2 * Math.PI);
-    const gradientAmbientLight = context.createRadialGradient(mousePos.x, mousePos.y, 0, mousePos.x, mousePos.y, lightOptions.radius);
+    context.arc(mousePos.x, mousePos.y, lightOptions.radius, arcStart, doublePI);
+    const gradientAmbientLight = context.createRadialGradient(mousePos.x, mousePos.y, arcStart, mousePos.x, mousePos.y, lightOptions.radius);
     const gradientRgb = container.canvas.mouseLight;
-    if (!gradientRgb || !gradientRgb.start || !gradientRgb.stop) {
+    if (!gradientRgb?.start || !gradientRgb.stop) {
         return;
     }
-    gradientAmbientLight.addColorStop(0, getStyleFromRgb(gradientRgb.start));
-    gradientAmbientLight.addColorStop(1, getStyleFromRgb(gradientRgb.stop));
+    gradientAmbientLight.addColorStop(gradientPos.min, getStyleFromRgb(gradientRgb.start));
+    gradientAmbientLight.addColorStop(gradientPos.max, getStyleFromRgb(gradientRgb.stop));
     context.fillStyle = gradientAmbientLight;
     context.fill();
 }
@@ -26,7 +30,7 @@ export function drawParticleShadow(container, context, particle, mousePos) {
     if (!shadowRgb) {
         return;
     }
-    const radius = particle.getRadius(), sides = particle.sides, full = (Math.PI * 2) / sides, angle = -particle.rotation + Math.PI / 4, factor = 1, dots = [];
+    const radius = particle.getRadius(), sides = particle.sides, full = doublePI / sides, angle = -particle.rotation + quarterPI, factor = 1, dots = [];
     for (let i = 0; i < sides; i++) {
         dots.push({
             x: pos.x + radius * Math.sin(angle + full * i) * factor,
@@ -36,16 +40,16 @@ export function drawParticleShadow(container, context, particle, mousePos) {
     const points = [], shadowLength = shadowOptions.length;
     for (const dot of dots) {
         const dotAngle = Math.atan2(mousePos.y - dot.y, mousePos.x - dot.x), end = {
-            x: dot.x + shadowLength * Math.sin(-dotAngle - Math.PI / 2),
-            y: dot.y + shadowLength * Math.cos(-dotAngle - Math.PI / 2),
+            x: dot.x + shadowLength * Math.sin(-dotAngle - halfPI),
+            y: dot.y + shadowLength * Math.cos(-dotAngle - halfPI),
         };
         points.push({
             end: end,
             start: dot,
         });
     }
-    const shadowColor = getStyleFromRgb(shadowRgb), last = points.length - 1;
-    for (let i = last, n = 0; i >= 0; n = i--) {
+    const shadowColor = getStyleFromRgb(shadowRgb), lastOffset = 1, firstPos = 0, last = points.length - lastOffset;
+    for (let i = last, n = 0; i >= firstPos; n = i--) {
         context.beginPath();
         context.moveTo(points[i].start.x, points[i].start.y);
         context.lineTo(points[n].start.x, points[n].start.y);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/interaction-light",
-  "version": "3.0.3",
+  "version": "3.1.0",
   "description": "tsParticles Light interaction",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -101,7 +101,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@tsparticles/engine": "^3.0.3"
+    "@tsparticles/engine": "^3.1.0"
   },
   "publishConfig": {
     "access": "public"

package/report.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
-    <title>@tsparticles/interaction-light [26 Dec 2023 at 19:26]</title>
+    <title>@tsparticles/interaction-light [13 Jan 2024 at 23:00]</title>
     <link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABrVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+O1foceMD///+J0/qK1Pr7/v8Xdr/9///W8P4UdL7L7P0Scr2r4Pyj3vwad8D5/f/2/f+55f3E6f34+/2H0/ojfMKpzOd0rNgQcb3F3O/j9f7c8v6g3Pz0/P/w+v/q+P7n9v6T1/uQ1vuE0vqLut/y+v+Z2fvt+f+15Pzv9fuc2/vR7v2V2Pvd6/bg9P7I6/285/2y4/yp3/zp8vk8i8kqgMT7/P31+fyv4vxGkcz6/P6/6P3j7vfS5PNnpNUxhcbO7f7F6v3O4vHK3/DA2u631Ouy0eqXweKJud5wqthfoNMMbLvY8f73+v2dxeR8sNtTmdDx9/zX6PSjyeaCtd1YnNGX2PuQveCGt95Nls42h8dLlM3F4vBtAAAAM3RSTlMAAyOx0/sKBvik8opWGBMOAe3l1snDm2E9LSb06eHcu5JpHbarfHZCN9CBb08zzkdNS0kYaptYAAAFV0lEQVRYw92X51/aYBDHHS2O2qqttVbrqNq9m+TJIAYIShBkWwqIiCgoWvfeq7Z2/s29hyQNyUcR7LveGwVyXy6XH8/9rqxglLfUPLxVduUor3h0rfp2TYvpivk37929TkG037hffoX0+peVtZQc1589rigVUdXS/ABSAyEmGIO/1XfvldSK8vs3OqB6u3m0nxmIrvgB0dj7rr7Y9IbuF68hnfFaiHA/sxqm0wciIG43P60qKv9WXWc1RXGh/mFESFABTSBi0sNAKzqet17eCtOb3kZIDwxEEU0oAIJGYxNBDhBND29e0rtXXbcpuPmED9IhEAAQ/AXEaF8EPmnrrKsv0LvWR3fg5sWDNAFZOgAgaKvZDogHNU9MFwnnYROkc56RD5CjAbQX9Ow4g7upCsvYu55aSI/Nj0H1akgKQEUM94dwK65hYRmFU9MIcH/fqJYOZYcnuJSU/waKDgTOEVaVKhwrTRP5XzgSpAITYzom7UvkhFX5VutmxeNnWDjjswTKTyfgluNDGbUpWissXhF3s7mlSml+czWkg3D0l1nNjGNjz3myOQOa1KM/jOS6ebdbAVTCi4gljHSFrviza7tOgRWcS0MOUX9zdNgag5w7rRqA44Lzw0hr1WqES36dFliSJFlh2rXIae3FFcDDgKdxrUIDePr8jGcSClV1u7A9xeN0ModY/pHMxmR1EzRh8TJiwqsHmKW0l4FCEZI+jHio+JdPPE9qwQtTRxku2D8sIeRL2LnxWSllANCQGOIiqVHAz2ye2JR0DcH+HoxDkaADLjgxjKQ+AwCX/g0+DNgdG0ukYCONAe+dbc2IAc6fwt1ARoDSezNHxV2Cmzwv3O6lDMV55edBGwGK9n1+x2F8EDfAGCxug8MhpsMEcTEAWf3rx2vZhe/LAmtIn/6apE6PN0ULKgywD9mmdxbmFl3OvD5AS5fW5zLbv/YHmcsBTjf/afDz3MaZTVCfAP9z6/Bw6ycv8EUBWJIn9zYcoAWWlW9+OzO3vkTy8H+RANLmdrpOuYWdZYEXpo+TlCJrW5EARb7fF+bWdqf3hhyZI1nWJQHgznErZhbjoEsWqi8dQNoE294aldzFurwSABL2XXMf9+H1VQGke9exw5P/AnA5Pv5ngMul7LOvO922iwACu8WkCwLCafvM4CeWPxfA8lNHcWZSoi8EwMAIciKX2Z4SWCMAa3snCZ/G4EA8D6CMLNFsGQhkkz/gQNEBbPCbWsxGUpYVu3z8IyNAknwJkfPMEhLyrdi5RTyUVACkw4GSFRNWJNEW+fgPGwHD8/JxnRuLabN4CGNRkAE23na2+VmEAUmrYymSGjMAYqH84YUIyzgzs3XC7gNgH36Vcc4zKY9o9fgPBXUAiHHwVboBHGLiX6Zcjp1f2wu4tvzZKo0ecPnDtQYDQvJXaBeNzce45Fp28ZQLrEZVuFqgBwOalArKXnW1UzlnSusQKJqKYNuz4tOnI6sZG4zanpemv+7ySU2jbA9h6uhcgpfy6G2PahirDZ6zvq6zDduMVFTKvzw8wgyEdelwY9in3XkEPs3osJuwRQ4qTkfzifndg9Gfc4pdsu82+tTnHZTBa2EAMrqr2t43pguc8tNm7JQVQ2S0ukj2d22dhXYP0/veWtwKrCkNoNimAN5+Xr/oLrxswKbVJjteWrX7eR63o4j9q0GxnaBdWgGA5VStpanIjQmEhV0/nVt5VOFUvix6awJhPcAaTEShgrG+iGyvb5a0Ndb1YGHFPEwoqAinoaykaID1o1pdPNu7XsnCKQ3R+hwWIIhGvORcJUBYXe3Xa3vq/mF/N9V13ugufMkfXn+KHsRD0B8AAAAASUVORK5CYII=" type="image/x-icon" />
 
     <script>
@@ -31,7 +31,7 @@
   <body>
     <div id="app"></div>
     <script>
-      window.chartData = [{"label":"tsparticles.interaction.light.js","isAsset":true,"statSize":7655,"parsedSize":11279,"gzipSize":2858,"groups":[{"label":"dist/browser","path":"./dist/browser","statSize":7613,"groups":[{"id":123,"label":"index.js + 7 modules (concatenated)","path":"./dist/browser/index.js + 7 modules (concatenated)","statSize":7613,"parsedSize":11279,"gzipSize":2858,"concatenated":true,"groups":[{"label":"dist/browser","path":"./dist/browser/index.js + 7 modules (concatenated)/dist/browser","statSize":7613,"groups":[{"id":null,"label":"index.js","path":"./dist/browser/index.js + 7 modules (concatenated)/dist/browser/index.js","statSize":792,"parsedSize":1173,"gzipSize":297,"inaccurateSizes":true},{"id":null,"label":"ExternalLighter.js","path":"./dist/browser/index.js + 7 modules (concatenated)/dist/browser/ExternalLighter.js","statSize":1649,"parsedSize":2443,"gzipSize":619,"inaccurateSizes":true},{"label":"Options/Classes","path":"./dist/browser/index.js + 7 modules (concatenated)/dist/browser/Options/Classes","statSize":1476,"groups":[{"id":null,"label":"Light.js","path":"./dist/browser/index.js + 7 modules (concatenated)/dist/browser/Options/Classes/Light.js","statSize":328,"parsedSize":485,"gzipSize":123,"inaccurateSizes":true},{"id":null,"label":"LightArea.js","path":"./dist/browser/index.js + 7 modules (concatenated)/dist/browser/Options/Classes/LightArea.js","statSize":336,"parsedSize":497,"gzipSize":126,"inaccurateSizes":true},{"id":null,"label":"LightGradient.js","path":"./dist/browser/index.js + 7 modules (concatenated)/dist/browser/Options/Classes/LightGradient.js","statSize":421,"parsedSize":623,"gzipSize":158,"inaccurateSizes":true},{"id":null,"label":"LightShadow.js","path":"./dist/browser/index.js + 7 modules (concatenated)/dist/browser/Options/Classes/LightShadow.js","statSize":391,"parsedSize":579,"gzipSize":146,"inaccurateSizes":true}],"parsedSize":2186,"gzipSize":554,"inaccurateSizes":true},{"id":null,"label":"ParticlesLighter.js","path":"./dist/browser/index.js + 7 modules (concatenated)/dist/browser/ParticlesLighter.js","statSize":1350,"parsedSize":2000,"gzipSize":506,"inaccurateSizes":true},{"id":null,"label":"Utils.js","path":"./dist/browser/index.js + 7 modules (concatenated)/dist/browser/Utils.js","statSize":2346,"parsedSize":3475,"gzipSize":880,"inaccurateSizes":true}],"parsedSize":11279,"gzipSize":2858,"inaccurateSizes":true}]}],"parsedSize":11279,"gzipSize":2858},{"label":"engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles","path":"./engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles","statSize":42,"groups":[{"id":533,"label":"engine\",\"root\":\"window\"}","path":"./engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles/engine\",\"root\":\"window\"}","statSize":42}],"parsedSize":0,"gzipSize":0}],"isInitialByEntrypoint":{"tsparticles.interaction.light":true}}];
+      window.chartData = [{"label":"tsparticles.interaction.light.js","isAsset":true,"statSize":7979,"parsedSize":11615,"gzipSize":2975,"groups":[{"label":"dist/browser","path":"./dist/browser","statSize":7937,"groups":[{"id":238,"label":"index.js + 7 modules (concatenated)","path":"./dist/browser/index.js + 7 modules (concatenated)","statSize":7937,"parsedSize":11615,"gzipSize":2975,"concatenated":true,"groups":[{"label":"dist/browser","path":"./dist/browser/index.js + 7 modules (concatenated)/dist/browser","statSize":7937,"groups":[{"id":null,"label":"index.js","path":"./dist/browser/index.js + 7 modules (concatenated)/dist/browser/index.js","statSize":792,"parsedSize":1159,"gzipSize":296,"inaccurateSizes":true},{"id":null,"label":"ExternalLighter.js","path":"./dist/browser/index.js + 7 modules (concatenated)/dist/browser/ExternalLighter.js","statSize":1678,"parsedSize":2455,"gzipSize":628,"inaccurateSizes":true},{"label":"Options/Classes","path":"./dist/browser/index.js + 7 modules (concatenated)/dist/browser/Options/Classes","statSize":1476,"groups":[{"id":null,"label":"Light.js","path":"./dist/browser/index.js + 7 modules (concatenated)/dist/browser/Options/Classes/Light.js","statSize":328,"parsedSize":479,"gzipSize":122,"inaccurateSizes":true},{"id":null,"label":"LightArea.js","path":"./dist/browser/index.js + 7 modules (concatenated)/dist/browser/Options/Classes/LightArea.js","statSize":336,"parsedSize":491,"gzipSize":125,"inaccurateSizes":true},{"id":null,"label":"LightGradient.js","path":"./dist/browser/index.js + 7 modules (concatenated)/dist/browser/Options/Classes/LightGradient.js","statSize":421,"parsedSize":616,"gzipSize":157,"inaccurateSizes":true},{"id":null,"label":"LightShadow.js","path":"./dist/browser/index.js + 7 modules (concatenated)/dist/browser/Options/Classes/LightShadow.js","statSize":391,"parsedSize":572,"gzipSize":146,"inaccurateSizes":true}],"parsedSize":2159,"gzipSize":553,"inaccurateSizes":true},{"id":null,"label":"ParticlesLighter.js","path":"./dist/browser/index.js + 7 modules (concatenated)/dist/browser/ParticlesLighter.js","statSize":1379,"parsedSize":2018,"gzipSize":516,"inaccurateSizes":true},{"id":null,"label":"Utils.js","path":"./dist/browser/index.js + 7 modules (concatenated)/dist/browser/Utils.js","statSize":2612,"parsedSize":3822,"gzipSize":979,"inaccurateSizes":true}],"parsedSize":11615,"gzipSize":2975,"inaccurateSizes":true}]}],"parsedSize":11615,"gzipSize":2975},{"label":"engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles","path":"./engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles","statSize":42,"groups":[{"id":533,"label":"engine\",\"root\":\"window\"}","path":"./engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles/engine\",\"root\":\"window\"}","statSize":42}],"parsedSize":0,"gzipSize":0}],"isInitialByEntrypoint":{"tsparticles.interaction.light":true}}];
       window.entrypoints = ["tsparticles.interaction.light","tsparticles.interaction.light.min"];
       window.defaultSizes = "parsed";
     </script>

package/tsparticles.interaction.light.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
- * v3.0.3
+ * v3.1.0
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
@@ -102,6 +102,17 @@ __webpack_require__.d(__webpack_exports__, {
 var engine_root_window_ = __webpack_require__(533);
 ;// CONCATENATED MODULE: ./dist/browser/Utils.js
 
+const gradientPos = {
+    max: 1,
+    min: 0
+  },
+  half = 0.5,
+  Utils_double = 2,
+  halfPI = Math.PI * half,
+  doublePI = Math.PI * Utils_double,
+  quarter = 0.25,
+  quarterPI = Math.PI * quarter,
+  arcStart = 0;
 const lightMode = "light";
 function drawLight(container, context, mousePos) {
   const lightOptions = container.actualOptions.interactivity.modes.light?.area;
@@ -109,14 +120,14 @@ function drawLight(container, context, mousePos) {
     return;
   }
   context.beginPath();
-  context.arc(mousePos.x, mousePos.y, lightOptions.radius, 0, 2 * Math.PI);
-  const gradientAmbientLight = context.createRadialGradient(mousePos.x, mousePos.y, 0, mousePos.x, mousePos.y, lightOptions.radius);
+  context.arc(mousePos.x, mousePos.y, lightOptions.radius, arcStart, doublePI);
+  const gradientAmbientLight = context.createRadialGradient(mousePos.x, mousePos.y, arcStart, mousePos.x, mousePos.y, lightOptions.radius);
   const gradientRgb = container.canvas.mouseLight;
-  if (!gradientRgb || !gradientRgb.start || !gradientRgb.stop) {
+  if (!gradientRgb?.start || !gradientRgb.stop) {
     return;
   }
-  gradientAmbientLight.addColorStop(0, (0,engine_root_window_.getStyleFromRgb)(gradientRgb.start));
-  gradientAmbientLight.addColorStop(1, (0,engine_root_window_.getStyleFromRgb)(gradientRgb.stop));
+  gradientAmbientLight.addColorStop(gradientPos.min, (0,engine_root_window_.getStyleFromRgb)(gradientRgb.start));
+  gradientAmbientLight.addColorStop(gradientPos.max, (0,engine_root_window_.getStyleFromRgb)(gradientRgb.stop));
   context.fillStyle = gradientAmbientLight;
   context.fill();
 }
@@ -132,8 +143,8 @@ function drawParticleShadow(container, context, particle, mousePos) {
   }
   const radius = particle.getRadius(),
     sides = particle.sides,
-    full = Math.PI * 2 / sides,
-    angle = -particle.rotation + Math.PI / 4,
+    full = doublePI / sides,
+    angle = -particle.rotation + quarterPI,
     factor = 1,
     dots = [];
   for (let i = 0; i < sides; i++) {
@@ -147,8 +158,8 @@ function drawParticleShadow(container, context, particle, mousePos) {
   for (const dot of dots) {
     const dotAngle = Math.atan2(mousePos.y - dot.y, mousePos.x - dot.x),
       end = {
-        x: dot.x + shadowLength * Math.sin(-dotAngle - Math.PI / 2),
-        y: dot.y + shadowLength * Math.cos(-dotAngle - Math.PI / 2)
+        x: dot.x + shadowLength * Math.sin(-dotAngle - halfPI),
+        y: dot.y + shadowLength * Math.cos(-dotAngle - halfPI)
       };
     points.push({
       end: end,
@@ -156,8 +167,10 @@ function drawParticleShadow(container, context, particle, mousePos) {
     });
   }
   const shadowColor = (0,engine_root_window_.getStyleFromRgb)(shadowRgb),
-    last = points.length - 1;
-  for (let i = last, n = 0; i >= 0; n = i--) {
+    lastOffset = 1,
+    firstPos = 0,
+    last = points.length - lastOffset;
+  for (let i = last, n = 0; i >= firstPos; n = i--) {
     context.beginPath();
     context.moveTo(points[i].start.x, points[i].start.y);
     context.lineTo(points[n].start.x, points[n].start.y);
@@ -259,6 +272,7 @@ class ExternalLighter extends engine_root_window_.ExternalInteractorBase {
     container.canvas.draw(ctx => {
       drawLight(container, ctx, mousePos);
     });
+    await Promise.resolve();
   }
   isEnabled(particle) {
     const container = this.container,
@@ -311,6 +325,7 @@ class ParticlesLighter extends engine_root_window_.ParticlesInteractorBase {
     container.canvas.draw(ctx => {
       drawParticleShadow(container, ctx, particle, mousePos);
     });
+    await Promise.resolve();
   }
   isEnabled(particle) {
     const container = this.container,

package/tsparticles.interaction.light.min.js

@@ -1,2 +1,2 @@
 /*! For license information please see tsparticles.interaction.light.min.js.LICENSE.txt */
-!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],e);else{var o="object"==typeof exports?e(require("@tsparticles/engine")):e(t.window);for(var i in o)("object"==typeof exports?exports:t)[i]=o[i]}}(this,(t=>(()=>{"use strict";var e={533:e=>{e.exports=t}},o={};function i(t){var r=o[t];if(void 0!==r)return r.exports;var s=o[t]={exports:{}};return e[t](s,s.exports,i),s.exports}i.d=(t,e)=>{for(var o in e)i.o(e,o)&&!i.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:e[o]})},i.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),i.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var r={};return(()=>{i.r(r),i.d(r,{Light:()=>a,LightArea:()=>s,LightGradient:()=>o,LightShadow:()=>n,loadLightInteraction:()=>d});var t=i(533);const e="light";class o{constructor(){this.start=new t.OptionsColor,this.stop=new t.OptionsColor,this.start.value="#ffffff",this.stop.value="#000000"}load(e){e&&(this.start=t.OptionsColor.create(this.start,e.start),this.stop=t.OptionsColor.create(this.stop,e.stop))}}class s{constructor(){this.gradient=new o,this.radius=1e3}load(t){t&&(this.gradient.load(t.gradient),void 0!==t.radius&&(this.radius=t.radius))}}class n{constructor(){this.color=new t.OptionsColor,this.color.value="#000000",this.length=2e3}load(e){e&&(this.color=t.OptionsColor.create(this.color,e.color),void 0!==e.length&&(this.length=e.length))}}class a{constructor(){this.area=new s,this.shadow=new n}load(t){t&&(this.area.load(t.area),this.shadow.load(t.shadow))}}class c extends t.ExternalInteractorBase{constructor(t){super(t)}clear(){}init(){}async interact(){const e=this.container,o=e.actualOptions,i=e.interactivity;if(!o.interactivity.events.onHover.enable||"pointermove"!==i.status)return;const r=i.mouse.position;r&&e.canvas.draw((o=>{!function(e,o,i){const r=e.actualOptions.interactivity.modes.light?.area;if(!r)return;o.beginPath(),o.arc(i.x,i.y,r.radius,0,2*Math.PI);const s=o.createRadialGradient(i.x,i.y,0,i.x,i.y,r.radius),n=e.canvas.mouseLight;n&&n.start&&n.stop&&(s.addColorStop(0,(0,t.getStyleFromRgb)(n.start)),s.addColorStop(1,(0,t.getStyleFromRgb)(n.stop)),o.fillStyle=s,o.fill())}(e,o,r)}))}isEnabled(o){const i=this.container,r=i.interactivity.mouse,s=o?.interactivity??i.actualOptions.interactivity,n=s.events;if(!n.onHover.enable||!r.position)return!1;const a=(0,t.isInArray)(e,n.onHover.mode);if(a&&s.modes.light){const e=s.modes.light.area.gradient;i.canvas.mouseLight={start:(0,t.rangeColorToRgb)(e.start),stop:(0,t.rangeColorToRgb)(e.stop)}}return a}loadModeOptions(t,...e){t.light||(t.light=new a);for(const o of e)t.light.load(o?.light)}reset(){}}class l extends t.ParticlesInteractorBase{constructor(t){super(t)}clear(){}init(){}async interact(e){const o=this.container,i=o.actualOptions,r=o.interactivity;if(!i.interactivity.events.onHover.enable||"pointermove"!==r.status)return;const s=r.mouse.position;s&&o.canvas.draw((i=>{!function(e,o,i,r){const s=i.getPosition(),n=e.actualOptions.interactivity.modes.light?.shadow;if(!n)return;const a=i.lightShadow;if(!a)return;const c=i.getRadius(),l=i.sides,d=2*Math.PI/l,h=-i.rotation+Math.PI/4,u=[];for(let t=0;t<l;t++)u.push({x:s.x+c*Math.sin(h+d*t)*1,y:s.y+c*Math.cos(h+d*t)*1});const p=[],g=n.length;for(const t of u){const e=Math.atan2(r.y-t.y,r.x-t.x),o={x:t.x+g*Math.sin(-e-Math.PI/2),y:t.y+g*Math.cos(-e-Math.PI/2)};p.push({end:o,start:t})}const f=(0,t.getStyleFromRgb)(a);for(let t=p.length-1,e=0;t>=0;e=t--)o.beginPath(),o.moveTo(p[t].start.x,p[t].start.y),o.lineTo(p[e].start.x,p[e].start.y),o.lineTo(p[e].end.x,p[e].end.y),o.lineTo(p[t].end.x,p[t].end.y),o.fillStyle=f,o.fill()}(o,i,e,s)}))}isEnabled(o){const i=this.container,r=o.interactivity??i.actualOptions.interactivity,s=i.interactivity.mouse,n=r.events;if(!n.onHover.enable||!s.position)return!1;const a=(0,t.isInArray)(e,n.onHover.mode);if(a&&r.modes.light){const e=r.modes.light.shadow;o.lightShadow=(0,t.rangeColorToRgb)(e.color)}return a}reset(){}}async function d(t,e=!0){await t.addInteractor("externalLight",(t=>new c(t)),e),await t.addInteractor("particlesLight",(t=>new l(t)),e)}})(),r})()));
+!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],e);else{var o="object"==typeof exports?e(require("@tsparticles/engine")):e(t.window);for(var i in o)("object"==typeof exports?exports:t)[i]=o[i]}}(this,(t=>(()=>{"use strict";var e={533:e=>{e.exports=t}},o={};function i(t){var r=o[t];if(void 0!==r)return r.exports;var s=o[t]={exports:{}};return e[t](s,s.exports,i),s.exports}i.d=(t,e)=>{for(var o in e)i.o(e,o)&&!i.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:e[o]})},i.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),i.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var r={};return(()=>{i.r(r),i.d(r,{Light:()=>u,LightArea:()=>d,LightGradient:()=>l,LightShadow:()=>h,loadLightInteraction:()=>f});var t=i(533);const e=1,o=0,s=.5*Math.PI,n=2*Math.PI,a=.25*Math.PI,c="light";class l{constructor(){this.start=new t.OptionsColor,this.stop=new t.OptionsColor,this.start.value="#ffffff",this.stop.value="#000000"}load(e){e&&(this.start=t.OptionsColor.create(this.start,e.start),this.stop=t.OptionsColor.create(this.stop,e.stop))}}class d{constructor(){this.gradient=new l,this.radius=1e3}load(t){t&&(this.gradient.load(t.gradient),void 0!==t.radius&&(this.radius=t.radius))}}class h{constructor(){this.color=new t.OptionsColor,this.color.value="#000000",this.length=2e3}load(e){e&&(this.color=t.OptionsColor.create(this.color,e.color),void 0!==e.length&&(this.length=e.length))}}class u{constructor(){this.area=new d,this.shadow=new h}load(t){t&&(this.area.load(t.area),this.shadow.load(t.shadow))}}class p extends t.ExternalInteractorBase{constructor(t){super(t)}clear(){}init(){}async interact(){const i=this.container,r=i.actualOptions,s=i.interactivity;if(!r.interactivity.events.onHover.enable||"pointermove"!==s.status)return;const a=s.mouse.position;a&&(i.canvas.draw((r=>{!function(i,r,s){const a=i.actualOptions.interactivity.modes.light?.area;if(!a)return;r.beginPath(),r.arc(s.x,s.y,a.radius,0,n);const c=r.createRadialGradient(s.x,s.y,0,s.x,s.y,a.radius),l=i.canvas.mouseLight;l?.start&&l.stop&&(c.addColorStop(o,(0,t.getStyleFromRgb)(l.start)),c.addColorStop(e,(0,t.getStyleFromRgb)(l.stop)),r.fillStyle=c,r.fill())}(i,r,a)})),await Promise.resolve())}isEnabled(e){const o=this.container,i=o.interactivity.mouse,r=e?.interactivity??o.actualOptions.interactivity,s=r.events;if(!s.onHover.enable||!i.position)return!1;const n=(0,t.isInArray)(c,s.onHover.mode);if(n&&r.modes.light){const e=r.modes.light.area.gradient;o.canvas.mouseLight={start:(0,t.rangeColorToRgb)(e.start),stop:(0,t.rangeColorToRgb)(e.stop)}}return n}loadModeOptions(t,...e){t.light||(t.light=new u);for(const o of e)t.light.load(o?.light)}reset(){}}class g extends t.ParticlesInteractorBase{constructor(t){super(t)}clear(){}init(){}async interact(e){const o=this.container,i=o.actualOptions,r=o.interactivity;if(!i.interactivity.events.onHover.enable||"pointermove"!==r.status)return;const c=r.mouse.position;c&&(o.canvas.draw((i=>{!function(e,o,i,r){const c=i.getPosition(),l=e.actualOptions.interactivity.modes.light?.shadow;if(!l)return;const d=i.lightShadow;if(!d)return;const h=i.getRadius(),u=i.sides,p=n/u,g=-i.rotation+a,f=[];for(let t=0;t<u;t++)f.push({x:c.x+h*Math.sin(g+p*t)*1,y:c.y+h*Math.cos(g+p*t)*1});const y=[],v=l.length;for(const t of f){const e=Math.atan2(r.y-t.y,r.x-t.x),o={x:t.x+v*Math.sin(-e-s),y:t.y+v*Math.cos(-e-s)};y.push({end:o,start:t})}const m=(0,t.getStyleFromRgb)(d);for(let t=y.length-1,e=0;t>=0;e=t--)o.beginPath(),o.moveTo(y[t].start.x,y[t].start.y),o.lineTo(y[e].start.x,y[e].start.y),o.lineTo(y[e].end.x,y[e].end.y),o.lineTo(y[t].end.x,y[t].end.y),o.fillStyle=m,o.fill()}(o,i,e,c)})),await Promise.resolve())}isEnabled(e){const o=this.container,i=e.interactivity??o.actualOptions.interactivity,r=o.interactivity.mouse,s=i.events;if(!s.onHover.enable||!r.position)return!1;const n=(0,t.isInArray)(c,s.onHover.mode);if(n&&i.modes.light){const o=i.modes.light.shadow;e.lightShadow=(0,t.rangeColorToRgb)(o.color)}return n}reset(){}}async function f(t,e=!0){await t.addInteractor("externalLight",(t=>new p(t)),e),await t.addInteractor("particlesLight",(t=>new g(t)),e)}})(),r})()));

package/tsparticles.interaction.light.min.js.LICENSE.txt

@@ -1 +1 @@
-/*! tsParticles Light Interaction v3.0.3 by Matteo Bruni */
+/*! tsParticles Light Interaction v3.1.0 by Matteo Bruni */

package/types/ExternalLighter.d.ts

@@ -1,6 +1,5 @@
 import { ExternalInteractorBase, type IModes, type Modes, type RecursivePartial } from "@tsparticles/engine";
-import type { ILightMode, LightMode } from "./Types.js";
-import type { LightContainer, LightParticle } from "./Types.js";
+import type { ILightMode, LightContainer, LightMode, LightParticle } from "./Types.js";
 export declare class ExternalLighter extends ExternalInteractorBase<LightContainer> {
     constructor(container: LightContainer);
     clear(): void;

package/types/Options/Classes/LightGradient.d.ts

@@ -1,6 +1,5 @@
-import type { IOptionLoader, RecursivePartial } from "@tsparticles/engine";
+import { type IOptionLoader, OptionsColor, type RecursivePartial } from "@tsparticles/engine";
 import type { ILightGradient } from "../Interfaces/ILightGradient.js";
-import { OptionsColor } from "@tsparticles/engine";
 export declare class LightGradient implements ILightGradient, IOptionLoader<ILightGradient> {
     start: OptionsColor;
     stop: OptionsColor;

package/types/Types.d.ts

@@ -2,12 +2,12 @@ import type { Container, IRgb, Particle } from "@tsparticles/engine";
 import type { LightOptions, LightParticlesOptions } from "./Options/Classes/LightOptions.js";
 import type { ILight } from "./Options/Interfaces/ILight.js";
 import type { Light } from "./Options/Classes/Light.js";
-export type ILightMode = {
+export interface ILightMode {
     light?: ILight;
-};
-export type LightMode = {
+}
+export interface LightMode {
     light?: Light;
-};
+}
 export type LightContainer = Container & {
     actualOptions: LightOptions;
     canvas: {

package/umd/ExternalLighter.js

@@ -33,6 +33,7 @@
             container.canvas.draw((ctx) => {
                 (0, Utils_js_1.drawLight)(container, ctx, mousePos);
             });
+            await Promise.resolve();
         }
         isEnabled(particle) {
             const container = this.container, mouse = container.interactivity.mouse, interactivity = particle?.interactivity ?? container.actualOptions.interactivity, events = interactivity.events;

package/umd/ParticlesLighter.js

@@ -32,6 +32,7 @@
             container.canvas.draw((ctx) => {
                 (0, Utils_js_1.drawParticleShadow)(container, ctx, particle, mousePos);
             });
+            await Promise.resolve();
         }
         isEnabled(particle) {
             const container = this.container, interactivity = particle.interactivity ?? container.actualOptions.interactivity, mouse = container.interactivity.mouse, events = interactivity.events;

package/umd/Utils.js

@@ -11,6 +11,10 @@
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.drawParticleShadow = exports.drawLight = exports.lightMode = void 0;
     const engine_1 = require("@tsparticles/engine");
+    const gradientPos = {
+        max: 1,
+        min: 0,
+    }, half = 0.5, double = 2, halfPI = Math.PI * half, doublePI = Math.PI * double, quarter = 0.25, quarterPI = Math.PI * quarter, arcStart = 0;
     exports.lightMode = "light";
     function drawLight(container, context, mousePos) {
         const lightOptions = container.actualOptions.interactivity.modes.light?.area;
@@ -18,14 +22,14 @@
             return;
         }
         context.beginPath();
-        context.arc(mousePos.x, mousePos.y, lightOptions.radius, 0, 2 * Math.PI);
-        const gradientAmbientLight = context.createRadialGradient(mousePos.x, mousePos.y, 0, mousePos.x, mousePos.y, lightOptions.radius);
+        context.arc(mousePos.x, mousePos.y, lightOptions.radius, arcStart, doublePI);
+        const gradientAmbientLight = context.createRadialGradient(mousePos.x, mousePos.y, arcStart, mousePos.x, mousePos.y, lightOptions.radius);
         const gradientRgb = container.canvas.mouseLight;
-        if (!gradientRgb || !gradientRgb.start || !gradientRgb.stop) {
+        if (!gradientRgb?.start || !gradientRgb.stop) {
             return;
         }
-        gradientAmbientLight.addColorStop(0, (0, engine_1.getStyleFromRgb)(gradientRgb.start));
-        gradientAmbientLight.addColorStop(1, (0, engine_1.getStyleFromRgb)(gradientRgb.stop));
+        gradientAmbientLight.addColorStop(gradientPos.min, (0, engine_1.getStyleFromRgb)(gradientRgb.start));
+        gradientAmbientLight.addColorStop(gradientPos.max, (0, engine_1.getStyleFromRgb)(gradientRgb.stop));
         context.fillStyle = gradientAmbientLight;
         context.fill();
     }
@@ -39,7 +43,7 @@
         if (!shadowRgb) {
             return;
         }
-        const radius = particle.getRadius(), sides = particle.sides, full = (Math.PI * 2) / sides, angle = -particle.rotation + Math.PI / 4, factor = 1, dots = [];
+        const radius = particle.getRadius(), sides = particle.sides, full = doublePI / sides, angle = -particle.rotation + quarterPI, factor = 1, dots = [];
         for (let i = 0; i < sides; i++) {
             dots.push({
                 x: pos.x + radius * Math.sin(angle + full * i) * factor,
@@ -49,16 +53,16 @@
         const points = [], shadowLength = shadowOptions.length;
         for (const dot of dots) {
             const dotAngle = Math.atan2(mousePos.y - dot.y, mousePos.x - dot.x), end = {
-                x: dot.x + shadowLength * Math.sin(-dotAngle - Math.PI / 2),
-                y: dot.y + shadowLength * Math.cos(-dotAngle - Math.PI / 2),
+                x: dot.x + shadowLength * Math.sin(-dotAngle - halfPI),
+                y: dot.y + shadowLength * Math.cos(-dotAngle - halfPI),
             };
             points.push({
                 end: end,
                 start: dot,
             });
         }
-        const shadowColor = (0, engine_1.getStyleFromRgb)(shadowRgb), last = points.length - 1;
-        for (let i = last, n = 0; i >= 0; n = i--) {
+        const shadowColor = (0, engine_1.getStyleFromRgb)(shadowRgb), lastOffset = 1, firstPos = 0, last = points.length - lastOffset;
+        for (let i = last, n = 0; i >= firstPos; n = i--) {
             context.beginPath();
             context.moveTo(points[i].start.x, points[i].start.y);
             context.lineTo(points[n].start.x, points[n].start.y);