@tsparticles/plugin-canvas-mask 3.9.1 → 4.0.0-alpha.1

package/umd/utils.js

@@ -17,7 +17,7 @@
     const half = 0.5, origin = {
         x: 0,
         y: 0,
-    }, defaultWidth = 0;
+    }, defaultWidth = 0, defaultRgb = 0, defaultAlpha = 1;
     function addParticlesFromCanvasPixels(container, data, position, scale, override, filter) {
         const { height, width } = data, numPixels = height * width, indexArray = shuffle(range(numPixels)), maxParticles = Math.min(numPixels, container.actualOptions.particles.number.value), canvasSize = container.canvas.size;
         let selectedPixels = 0;
@@ -29,7 +29,15 @@
             const defaultIndex = 0, nextIndex = indexArray.pop() ?? defaultIndex, pixelPos = {
                 x: nextIndex % width,
                 y: Math.floor(nextIndex / width),
-            }, pixel = data.pixels[pixelPos.y][pixelPos.x], shouldCreateParticle = filter(pixel);
+            }, row = data.pixels[pixelPos.y];
+            if (!row) {
+                continue;
+            }
+            const pixel = row[pixelPos.x];
+            if (!pixel) {
+                continue;
+            }
+            const shouldCreateParticle = filter(pixel);
             if (!shouldCreateParticle) {
                 continue;
             }
@@ -62,20 +70,21 @@
                 x: idx % size.width,
                 y: Math.floor(idx / size.width),
             };
-            if (!pixels[pos.y]) {
-                pixels[pos.y] = [];
-            }
+            pixels[pos.y] ??= [];
             const indexesOffset = {
                 r: 0,
                 g: 1,
                 b: 2,
                 a: 3,
-            }, alphaFactor = 255;
-            pixels[pos.y][pos.x] = {
-                r: imageData[i + indexesOffset.r],
-                g: imageData[i + indexesOffset.g],
-                b: imageData[i + indexesOffset.b],
-                a: imageData[i + indexesOffset.a] / alphaFactor,
+            }, alphaFactor = 255, row = pixels[pos.y];
+            if (!row) {
+                continue;
+            }
+            row[pos.x] = {
+                r: imageData[i + indexesOffset.r] ?? defaultRgb,
+                g: imageData[i + indexesOffset.g] ?? defaultRgb,
+                b: imageData[i + indexesOffset.b] ?? defaultRgb,
+                a: (imageData[i + indexesOffset.a] ?? defaultAlpha) / alphaFactor,
             };
         }
         return {
@@ -90,12 +99,13 @@
         const p = new Promise((resolve, reject) => {
             image.onerror = reject;
             image.onload = () => {
-                const canvas = document.createElement("canvas");
+                const canvas = (0, engine_1.safeDocument)().createElement("canvas");
                 canvas.width = image.width;
                 canvas.height = image.height;
                 const context = canvas.getContext("2d");
                 if (!context) {
-                    return reject(new Error(`${engine_1.errorPrefix} Could not get canvas context`));
+                    reject(new Error("Could not get canvas context"));
+                    return;
                 }
                 context.drawImage(image, origin.x, origin.y, image.width, image.height, origin.x, origin.y, canvas.width, canvas.height);
                 resolve(getCanvasImageData(context, canvas, offset));
@@ -105,14 +115,14 @@
         return p;
     }
     function getTextData(textOptions, offset) {
-        const canvas = document.createElement("canvas"), context = canvas.getContext("2d"), { font, text, lines: linesOptions, color } = textOptions;
+        const canvas = (0, engine_1.safeDocument)().createElement("canvas"), context = canvas.getContext("2d"), { font, text, lines: linesOptions, color } = textOptions;
         if (!text || !context) {
             return;
         }
-        const lines = text.split(linesOptions.separator), fontSize = (0, engine_1.isNumber)(font.size) ? `${font.size}px` : font.size, linesData = [];
+        const lines = text.split(linesOptions.separator), fontSize = (0, engine_1.isNumber)(font.size) ? `${font.size.toString()}px` : font.size, linesData = [];
         let maxWidth = 0, totalHeight = 0;
         for (const line of lines) {
-            context.font = `${font.style ?? ""} ${font.variant ?? ""} ${font.weight ?? ""} ${fontSize} ${font.family}`;
+            context.font = `${font.style ?? ""} ${font.variant ?? ""} ${font.weight?.toString() ?? ""} ${fontSize} ${font.family}`;
             const measure = context.measureText(line), lineData = {
                 measure,
                 text: line,
@@ -127,7 +137,7 @@
         canvas.height = totalHeight;
         let currentHeight = 0;
         for (const line of linesData) {
-            context.font = `${font.style ?? ""} ${font.variant ?? ""} ${font.weight ?? ""} ${fontSize} ${font.family}`;
+            context.font = `${font.style ?? ""} ${font.variant ?? ""} ${font.weight?.toString() ?? ""} ${fontSize} ${font.family}`;
             context.fillStyle = color;
             context.fillText(line.text, origin.x, currentHeight + line.measure.actualBoundingBoxAscent);
             currentHeight += line.height + linesOptions.spacing;
@@ -137,8 +147,15 @@
     function shuffle(array) {
         const lengthOffset = 1, minIndex = 0;
         for (let currentIndex = array.length - lengthOffset; currentIndex >= minIndex; currentIndex--) {
-            const randomIndex = Math.floor((0, engine_1.getRandom)() * currentIndex);
-            [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
+            const randomIndex = Math.floor((0, engine_1.getRandom)() * currentIndex), currentItem = array[currentIndex], randomItem = array[randomIndex];
+            if (randomItem === currentItem) {
+                continue;
+            }
+            if (randomItem === undefined || currentItem === undefined) {
+                continue;
+            }
+            array[currentIndex] = randomItem;
+            array[randomIndex] = currentItem;
         }
         return array;
     }