@tsparticles/plugin-emitters-shape-canvas 3.0.0-beta.4

package/cjs/Options/Classes/TextOptions.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextOptions = void 0;
+const TextFontOptions_js_1 = require("./TextFontOptions.js");
+const TextLinesOptions_js_1 = require("./TextLinesOptions.js");
+class TextOptions {
+    constructor() {
+        this.color = "#000000";
+        this.font = new TextFontOptions_js_1.TextFontOptions();
+        this.lines = new TextLinesOptions_js_1.TextLinesOptions();
+        this.text = "";
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        if (data.color !== undefined) {
+            this.color = data.color;
+        }
+        this.font.load(data.font);
+        this.lines.load(data.lines);
+        if (data.text !== undefined) {
+            this.text = data.text;
+        }
+    }
+}
+exports.TextOptions = TextOptions;

package/cjs/Options/Interfaces/IEmittersCanvasShapeOptions.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/Options/Interfaces/IPixelsOptions.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/Options/Interfaces/ITextFontOptions.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/Options/Interfaces/ITextLinesOptions.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/Options/Interfaces/ITextOptions.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadEmittersShapeCanvas = void 0;
+const EmittersCanvasShapeGenerator_js_1 = require("./EmittersCanvasShapeGenerator.js");
+async function loadEmittersShapeCanvas(engine, refresh = true) {
+    const emittersEngine = engine;
+    emittersEngine.addEmitterShapeGenerator &&
+        emittersEngine.addEmitterShapeGenerator("canvas", new EmittersCanvasShapeGenerator_js_1.EmittersCanvasShapeGenerator());
+    await emittersEngine.refresh(refresh);
+}
+exports.loadEmittersShapeCanvas = loadEmittersShapeCanvas;

package/cjs/package.json

@@ -0,0 +1 @@
+{ "type": "commonjs" }

package/cjs/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/utils.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTextData = exports.getImageData = exports.getCanvasImageData = void 0;
+const engine_1 = require("@tsparticles/engine");
+function getCanvasImageData(ctx, size, offset, clear = true) {
+    const imageData = ctx.getImageData(0, 0, size.width, size.height).data;
+    if (clear) {
+        ctx.clearRect(0, 0, size.width, size.height);
+    }
+    const pixels = [];
+    for (let i = 0; i < imageData.length; i += offset) {
+        const idx = i / offset, pos = {
+            x: idx % size.width,
+            y: Math.floor(idx / size.width),
+        };
+        if (!pixels[pos.y]) {
+            pixels[pos.y] = [];
+        }
+        pixels[pos.y][pos.x] = {
+            r: imageData[i],
+            g: imageData[i + 1],
+            b: imageData[i + 2],
+            a: imageData[i + 3] / 255,
+        };
+    }
+    return {
+        pixels,
+        width: Math.min(...pixels.map((row) => row.length)),
+        height: pixels.length,
+    };
+}
+exports.getCanvasImageData = getCanvasImageData;
+function getImageData(src, offset) {
+    const image = new Image();
+    image.crossOrigin = "Anonymous";
+    const p = new Promise((resolve, reject) => {
+        image.onerror = reject;
+        image.onload = () => {
+            const canvas = document.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`));
+            }
+            context.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height);
+            resolve(getCanvasImageData(context, canvas, offset));
+        };
+    });
+    image.src = src;
+    return p;
+}
+exports.getImageData = getImageData;
+function getTextData(textOptions, offset, fill) {
+    const canvas = document.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 = [];
+    let maxWidth = 0, totalHeight = 0;
+    for (const line of lines) {
+        context.font = `${font.style || ""} ${font.variant || ""} ${font.weight || ""} ${fontSize} ${font.family}`;
+        const measure = context.measureText(line), lineData = {
+            measure,
+            text: line,
+            height: measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent,
+            width: measure.width,
+        };
+        maxWidth = Math.max(maxWidth || 0, lineData.width);
+        totalHeight += lineData.height + linesOptions.spacing;
+        linesData.push(lineData);
+    }
+    canvas.width = maxWidth;
+    canvas.height = totalHeight;
+    let currentHeight = 0;
+    for (const line of linesData) {
+        context.font = `${font.style || ""} ${font.variant || ""} ${font.weight || ""} ${fontSize} ${font.family}`;
+        if (fill) {
+            context.fillStyle = color;
+            context.fillText(line.text, 0, currentHeight + line.measure.actualBoundingBoxAscent);
+        }
+        else {
+            context.strokeStyle = color;
+            context.strokeText(line.text, 0, currentHeight + line.measure.actualBoundingBoxAscent);
+        }
+        currentHeight += line.height + linesOptions.spacing;
+    }
+    return getCanvasImageData(context, canvas, offset);
+}
+exports.getTextData = getTextData;

package/esm/EmittersCanvasShape.js

@@ -0,0 +1,91 @@
+import { EmitterShapeBase } from "@tsparticles/plugin-emitters";
+import { getRandom, isFunction, isString } from "@tsparticles/engine";
+import { getCanvasImageData, getImageData, getTextData } from "./utils.js";
+export class EmittersCanvasShape extends EmitterShapeBase {
+    constructor(position, size, fill, options) {
+        super(position, size, fill, options);
+        const filter = options.filter;
+        let filterFunc = (pixel) => pixel.a > 0;
+        if (filter !== undefined) {
+            if (isString(filter)) {
+                if (Object.hasOwn(window, filter)) {
+                    const wndFilter = window[filter];
+                    if (isFunction(wndFilter)) {
+                        filterFunc = wndFilter;
+                    }
+                }
+            }
+            else {
+                filterFunc = filter;
+            }
+        }
+        this.filter = filterFunc;
+        this.scale = options.scale;
+        this.pixelData = {
+            pixels: [],
+            height: 0,
+            width: 0,
+        };
+    }
+    async init() {
+        let pixelData;
+        const options = this.options, selector = options.selector, pixels = options.pixels, image = options.image, element = options.element, text = options.text, offset = pixels.offset;
+        if (image) {
+            const url = image.src;
+            if (!url) {
+                return;
+            }
+            pixelData = await getImageData(url, offset);
+        }
+        else if (text) {
+            const data = getTextData(text, offset, this.fill);
+            if (!data) {
+                return;
+            }
+            pixelData = data;
+        }
+        else if (element || selector) {
+            const canvas = element || (selector && document.querySelector(selector));
+            if (!canvas) {
+                return;
+            }
+            const context = canvas.getContext("2d");
+            if (!context) {
+                return;
+            }
+            pixelData = getCanvasImageData(context, canvas, offset);
+        }
+        if (!pixelData) {
+            return;
+        }
+        this.pixelData = pixelData;
+    }
+    async randomPosition() {
+        const { height, width } = this.pixelData, data = this.pixelData, position = this.position, scale = this.scale;
+        const positionOffset = {
+            x: position.x - (width * scale) / 2,
+            y: position.y - (height * scale) / 2,
+        };
+        for (let i = 0; i < 100; i++) {
+            const nextIndex = Math.floor(getRandom() * width * height), pixelPos = {
+                x: nextIndex % width,
+                y: Math.floor(nextIndex / width),
+            }, pixel = data.pixels[pixelPos.y][pixelPos.x], shouldCreateParticle = this.filter(pixel);
+            if (!shouldCreateParticle) {
+                continue;
+            }
+            return {
+                position: {
+                    x: pixelPos.x * scale + positionOffset.x,
+                    y: pixelPos.y * scale + positionOffset.y,
+                },
+                color: { ...pixel },
+                opacity: pixel.a,
+            };
+        }
+        return null;
+    }
+    resize(position, size) {
+        super.resize(position, size);
+    }
+}

package/esm/EmittersCanvasShapeGenerator.js

@@ -0,0 +1,9 @@
+import { EmittersCanvasShape } from "./EmittersCanvasShape.js";
+import { EmittersCanvasShapeOptions } from "./Options/Classes/EmittersCanvasShapeOptions.js";
+export class EmittersCanvasShapeGenerator {
+    generate(position, size, fill, options) {
+        const shapeOptions = new EmittersCanvasShapeOptions();
+        shapeOptions.load(options);
+        return new EmittersCanvasShape(position, size, fill, shapeOptions);
+    }
+}

package/esm/Options/Classes/EmittersCanvasShapeOptions.js

@@ -0,0 +1,33 @@
+import { PixelsOptions } from "./PixelsOptions.js";
+import { TextOptions } from "./TextOptions.js";
+export class EmittersCanvasShapeOptions {
+    constructor() {
+        this.filter = (pixel) => pixel.a > 0;
+        this.pixels = new PixelsOptions();
+        this.scale = 1;
+        this.selector = "";
+        this.text = new TextOptions();
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        if (data.element !== undefined) {
+            this.element = data.element;
+        }
+        if (data.filter !== undefined) {
+            this.filter = data.filter;
+        }
+        this.pixels.load(data.pixels);
+        if (data.scale !== undefined) {
+            this.scale = data.scale;
+        }
+        if (data.selector !== undefined) {
+            this.selector = data.selector;
+        }
+        if (data.image !== undefined) {
+            this.image = data.image;
+        }
+        this.text.load(data.text);
+    }
+}

package/esm/Options/Classes/PixelsOptions.js

@@ -0,0 +1,13 @@
+export class PixelsOptions {
+    constructor() {
+        this.offset = 4;
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        if (data.offset !== undefined) {
+            this.offset = data.offset;
+        }
+    }
+}

package/esm/Options/Classes/TextFontOptions.js

@@ -0,0 +1,29 @@
+export class TextFontOptions {
+    constructor() {
+        this.family = "Verdana";
+        this.size = 32;
+        this.style = "";
+        this.variant = "";
+        this.weight = "";
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        if (data.family !== undefined) {
+            this.family = data.family;
+        }
+        if (data.size !== undefined) {
+            this.size = data.size;
+        }
+        if (data.style !== undefined) {
+            this.style = data.style;
+        }
+        if (data.variant !== undefined) {
+            this.variant = data.variant;
+        }
+        if (data.weight !== undefined) {
+            this.weight = data.weight;
+        }
+    }
+}

package/esm/Options/Classes/TextLinesOptions.js

@@ -0,0 +1,17 @@
+export class TextLinesOptions {
+    constructor() {
+        this.separator = "\n";
+        this.spacing = 0;
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        if (data.separator !== undefined) {
+            this.separator = data.separator;
+        }
+        if (data.spacing !== undefined) {
+            this.spacing = data.spacing;
+        }
+    }
+}

package/esm/Options/Classes/TextOptions.js

@@ -0,0 +1,23 @@
+import { TextFontOptions } from "./TextFontOptions.js";
+import { TextLinesOptions } from "./TextLinesOptions.js";
+export class TextOptions {
+    constructor() {
+        this.color = "#000000";
+        this.font = new TextFontOptions();
+        this.lines = new TextLinesOptions();
+        this.text = "";
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        if (data.color !== undefined) {
+            this.color = data.color;
+        }
+        this.font.load(data.font);
+        this.lines.load(data.lines);
+        if (data.text !== undefined) {
+            this.text = data.text;
+        }
+    }
+}

package/esm/Options/Interfaces/IEmittersCanvasShapeOptions.js

@@ -0,0 +1 @@
+export {};

package/esm/Options/Interfaces/IPixelsOptions.js

@@ -0,0 +1 @@
+export {};

package/esm/Options/Interfaces/ITextFontOptions.js

@@ -0,0 +1 @@
+export {};

package/esm/Options/Interfaces/ITextLinesOptions.js

@@ -0,0 +1 @@
+export {};

package/esm/Options/Interfaces/ITextOptions.js

@@ -0,0 +1 @@
+export {};

package/esm/index.js

@@ -0,0 +1,7 @@
+import { EmittersCanvasShapeGenerator } from "./EmittersCanvasShapeGenerator.js";
+export async function loadEmittersShapeCanvas(engine, refresh = true) {
+    const emittersEngine = engine;
+    emittersEngine.addEmitterShapeGenerator &&
+        emittersEngine.addEmitterShapeGenerator("canvas", new EmittersCanvasShapeGenerator());
+    await emittersEngine.refresh(refresh);
+}

package/esm/package.json

@@ -0,0 +1 @@
+{ "type": "module" }

package/esm/types.js

@@ -0,0 +1 @@
+export {};

package/esm/utils.js

@@ -0,0 +1,84 @@
+import { errorPrefix, isNumber } from "@tsparticles/engine";
+export function getCanvasImageData(ctx, size, offset, clear = true) {
+    const imageData = ctx.getImageData(0, 0, size.width, size.height).data;
+    if (clear) {
+        ctx.clearRect(0, 0, size.width, size.height);
+    }
+    const pixels = [];
+    for (let i = 0; i < imageData.length; i += offset) {
+        const idx = i / offset, pos = {
+            x: idx % size.width,
+            y: Math.floor(idx / size.width),
+        };
+        if (!pixels[pos.y]) {
+            pixels[pos.y] = [];
+        }
+        pixels[pos.y][pos.x] = {
+            r: imageData[i],
+            g: imageData[i + 1],
+            b: imageData[i + 2],
+            a: imageData[i + 3] / 255,
+        };
+    }
+    return {
+        pixels,
+        width: Math.min(...pixels.map((row) => row.length)),
+        height: pixels.length,
+    };
+}
+export function getImageData(src, offset) {
+    const image = new Image();
+    image.crossOrigin = "Anonymous";
+    const p = new Promise((resolve, reject) => {
+        image.onerror = reject;
+        image.onload = () => {
+            const canvas = document.createElement("canvas");
+            canvas.width = image.width;
+            canvas.height = image.height;
+            const context = canvas.getContext("2d");
+            if (!context) {
+                return reject(new Error(`${errorPrefix} Could not get canvas context`));
+            }
+            context.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height);
+            resolve(getCanvasImageData(context, canvas, offset));
+        };
+    });
+    image.src = src;
+    return p;
+}
+export function getTextData(textOptions, offset, fill) {
+    const canvas = document.createElement("canvas"), context = canvas.getContext("2d"), { font, text, lines: linesOptions, color } = textOptions;
+    if (!text || !context) {
+        return;
+    }
+    const lines = text.split(linesOptions.separator), fontSize = isNumber(font.size) ? `${font.size}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}`;
+        const measure = context.measureText(line), lineData = {
+            measure,
+            text: line,
+            height: measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent,
+            width: measure.width,
+        };
+        maxWidth = Math.max(maxWidth || 0, lineData.width);
+        totalHeight += lineData.height + linesOptions.spacing;
+        linesData.push(lineData);
+    }
+    canvas.width = maxWidth;
+    canvas.height = totalHeight;
+    let currentHeight = 0;
+    for (const line of linesData) {
+        context.font = `${font.style || ""} ${font.variant || ""} ${font.weight || ""} ${fontSize} ${font.family}`;
+        if (fill) {
+            context.fillStyle = color;
+            context.fillText(line.text, 0, currentHeight + line.measure.actualBoundingBoxAscent);
+        }
+        else {
+            context.strokeStyle = color;
+            context.strokeText(line.text, 0, currentHeight + line.measure.actualBoundingBoxAscent);
+        }
+        currentHeight += line.height + linesOptions.spacing;
+    }
+    return getCanvasImageData(context, canvas, offset);
+}

package/package.json

@@ -0,0 +1,109 @@
+{
+  "name": "@tsparticles/plugin-emitters-shape-canvas",
+  "version": "3.0.0-beta.4",
+  "description": "tsParticles emitters shape canvas plugin",
+  "homepage": "https://particles.js.org",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tsparticles/tsparticles.git",
+    "directory": "plugins/emitterShapes/canvas"
+  },
+  "keywords": [
+    "front-end",
+    "frontend",
+    "tsparticles",
+    "particles.js",
+    "particlesjs",
+    "particles",
+    "particle",
+    "canvas",
+    "jsparticles",
+    "xparticles",
+    "particles-js",
+    "particles-bg",
+    "particles-bg-vue",
+    "particles-ts",
+    "particles.ts",
+    "react-particles-js",
+    "react-particles.js",
+    "react-particles",
+    "react",
+    "reactjs",
+    "vue-particles",
+    "ngx-particles",
+    "angular-particles",
+    "particleground",
+    "vue",
+    "vuejs",
+    "preact",
+    "preactjs",
+    "jquery",
+    "angularjs",
+    "angular",
+    "typescript",
+    "javascript",
+    "animation",
+    "web",
+    "html5",
+    "web-design",
+    "webdesign",
+    "css",
+    "html",
+    "css3",
+    "animated",
+    "background",
+    "confetti",
+    "canvas",
+    "fireworks",
+    "fireworks-js",
+    "confetti-js",
+    "confettijs",
+    "fireworksjs",
+    "canvas-confetti",
+    "tsparticles-plugin"
+  ],
+  "author": "Matteo Bruni <matteo.bruni@me.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/tsparticles/tsparticles/issues"
+  },
+  "funding": [
+    {
+      "type": "github",
+      "url": "https://github.com/sponsors/matteobruni"
+    },
+    {
+      "type": "github",
+      "url": "https://github.com/sponsors/tsparticles"
+    },
+    {
+      "type": "buymeacoffee",
+      "url": "https://www.buymeacoffee.com/matteobruni"
+    }
+  ],
+  "sideEffects": false,
+  "jsdelivr": "tsparticles.plugin.emitters.shape.canvas.min.js",
+  "unpkg": "tsparticles.plugin.emitters.shape.canvas.min.js",
+  "browser": "browser/index.js",
+  "main": "cjs/index.js",
+  "module": "esm/index.js",
+  "types": "types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "browser": "./browser/index.js",
+      "import": "./esm/index.js",
+      "require": "./cjs/index.js",
+      "umd": "./umd/index.js",
+      "default": "./cjs/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@tsparticles/engine": "^3.0.0-beta.4",
+    "@tsparticles/plugin-emitters": "^3.0.0-beta.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}