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

package/umd/EmittersCanvasShape.js

@@ -0,0 +1,105 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports", "@tsparticles/plugin-emitters", "@tsparticles/engine", "./utils.js"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.EmittersCanvasShape = void 0;
+    const plugin_emitters_1 = require("@tsparticles/plugin-emitters");
+    const engine_1 = require("@tsparticles/engine");
+    const utils_js_1 = require("./utils.js");
+    class EmittersCanvasShape extends plugin_emitters_1.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 ((0, engine_1.isString)(filter)) {
+                    if (Object.hasOwn(window, filter)) {
+                        const wndFilter = window[filter];
+                        if ((0, engine_1.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 (0, utils_js_1.getImageData)(url, offset);
+            }
+            else if (text) {
+                const data = (0, utils_js_1.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 = (0, utils_js_1.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((0, engine_1.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);
+        }
+    }
+    exports.EmittersCanvasShape = EmittersCanvasShape;
+});

package/umd/EmittersCanvasShapeGenerator.js

@@ -0,0 +1,23 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports", "./EmittersCanvasShape.js", "./Options/Classes/EmittersCanvasShapeOptions.js"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.EmittersCanvasShapeGenerator = void 0;
+    const EmittersCanvasShape_js_1 = require("./EmittersCanvasShape.js");
+    const EmittersCanvasShapeOptions_js_1 = require("./Options/Classes/EmittersCanvasShapeOptions.js");
+    class EmittersCanvasShapeGenerator {
+        generate(position, size, fill, options) {
+            const shapeOptions = new EmittersCanvasShapeOptions_js_1.EmittersCanvasShapeOptions();
+            shapeOptions.load(options);
+            return new EmittersCanvasShape_js_1.EmittersCanvasShape(position, size, fill, shapeOptions);
+        }
+    }
+    exports.EmittersCanvasShapeGenerator = EmittersCanvasShapeGenerator;
+});

package/umd/Options/Classes/EmittersCanvasShapeOptions.js

@@ -0,0 +1,47 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports", "./PixelsOptions.js", "./TextOptions.js"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.EmittersCanvasShapeOptions = void 0;
+    const PixelsOptions_js_1 = require("./PixelsOptions.js");
+    const TextOptions_js_1 = require("./TextOptions.js");
+    class EmittersCanvasShapeOptions {
+        constructor() {
+            this.filter = (pixel) => pixel.a > 0;
+            this.pixels = new PixelsOptions_js_1.PixelsOptions();
+            this.scale = 1;
+            this.selector = "";
+            this.text = new TextOptions_js_1.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);
+        }
+    }
+    exports.EmittersCanvasShapeOptions = EmittersCanvasShapeOptions;
+});

package/umd/Options/Classes/PixelsOptions.js

@@ -0,0 +1,27 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.PixelsOptions = void 0;
+    class PixelsOptions {
+        constructor() {
+            this.offset = 4;
+        }
+        load(data) {
+            if (!data) {
+                return;
+            }
+            if (data.offset !== undefined) {
+                this.offset = data.offset;
+            }
+        }
+    }
+    exports.PixelsOptions = PixelsOptions;
+});

package/umd/Options/Classes/TextFontOptions.js

@@ -0,0 +1,43 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.TextFontOptions = void 0;
+    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;
+            }
+        }
+    }
+    exports.TextFontOptions = TextFontOptions;
+});

package/umd/Options/Classes/TextLinesOptions.js

@@ -0,0 +1,31 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.TextLinesOptions = void 0;
+    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;
+            }
+        }
+    }
+    exports.TextLinesOptions = TextLinesOptions;
+});

package/umd/Options/Classes/TextOptions.js

@@ -0,0 +1,37 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports", "./TextFontOptions.js", "./TextLinesOptions.js"], factory);
+    }
+})(function (require, exports) {
+    "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/umd/Options/Interfaces/IEmittersCanvasShapeOptions.js

@@ -0,0 +1,12 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});

package/umd/Options/Interfaces/IPixelsOptions.js

@@ -0,0 +1,12 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});

package/umd/Options/Interfaces/ITextFontOptions.js

@@ -0,0 +1,12 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});

package/umd/Options/Interfaces/ITextLinesOptions.js

@@ -0,0 +1,12 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});

package/umd/Options/Interfaces/ITextOptions.js

@@ -0,0 +1,12 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});

package/umd/index.js

@@ -0,0 +1,21 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports", "./EmittersCanvasShapeGenerator.js"], factory);
+    }
+})(function (require, exports) {
+    "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/umd/types.js

@@ -0,0 +1,12 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});

package/umd/utils.js

@@ -0,0 +1,100 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports", "@tsparticles/engine"], factory);
+    }
+})(function (require, exports) {
+    "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;
+});