@tsparticles/shape-emoji 4.0.0-alpha.5 → 4.0.0-beta.0

package/477.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_shape_emoji=this.webpackChunk_tsparticles_shape_emoji||[]).push([[477],{477(e,t,a){a.d(t,{EmojiDrawer:()=>l});var i=a(303),n=a(183),o=a(425);let s='"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif';class l{_emojiShapeDict=new Map;destroy(){for(let[e,t]of this._emojiShapeDict)t instanceof ImageBitmap&&t.close(),this._emojiShapeDict.delete(e)}draw(e){let t=e.particle.emojiDataKey;if(!t)return;let a=this._emojiShapeDict.get(t);a&&(0,n.j)(e,a)}async init(e){let t=e.actualOptions.particles.shape;if(!n.u.some(e=>(0,i.isInArray)(e,t.type)))return;let a=[(0,o.loadFont)(s)],l=n.u.map(e=>t.options[e])[0];(0,i.executeOnSingleOrMultiple)(l,e=>{e.font&&a.push((0,o.loadFont)(e.font))}),await Promise.all(a)}particleDestroy(e){e.emojiDataKey=void 0}particleInit(e,t){let a,n,o=t.shapeData;if(!o.value)return;let l=(0,i.itemFromSingleOrMultiple)(o.value,t.randomIndexData);if(!l)return;let r="string"==typeof l?{font:o.font??s,padding:o.padding??0,value:l}:{font:s,padding:0,...o,...l},p=r.font,c=r.value,m=`${c}_${p}`;if(this._emojiShapeDict.has(m)){t.emojiDataKey=m;return}let f=r.padding*i.double,u=(0,i.getRangeMax)(t.size.value),d=u+f,h=d*i.double;if("u"<typeof OffscreenCanvas){let t=(0,i.safeDocument)().createElement("canvas");t.width=h,t.height=h,n=t.getContext("2d",e.canvas.settings),a=t}else n=(a=new OffscreenCanvas(h,h)).getContext("2d",e.canvas.settings);if(!n)return;n.font=`400 ${(u*i.double).toString()}px ${p}`,n.textBaseline="middle",n.textAlign="center",n.fillText(c,d,d);let g=a instanceof HTMLCanvasElement?a:a.transferToImageBitmap();this._emojiShapeDict.set(m,g),t.emojiDataKey=m}}}}]);

package/browser/EmojiDrawer.js

@@ -1,11 +1,9 @@
-import { double, executeOnSingleOrMultiple, getRangeMax, isInArray, itemFromSingleOrMultiple, loadFont, safeDocument, } from "@tsparticles/engine";
-import { drawEmoji } from "./Utils.js";
-const defaultFont = '"Twemoji Mozilla", Apple Color Emoji, "Segoe UI Emoji", "Noto Color Emoji", "EmojiOne Color"', noPadding = 0, firstItem = 0;
+import { double, executeOnSingleOrMultiple, getRangeMax, isInArray, itemFromSingleOrMultiple, safeDocument, } from "@tsparticles/engine";
+import { drawEmoji, validTypes } from "./Utils.js";
+import { loadFont } from "@tsparticles/canvas-utils";
+const defaultFont = '"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif', noPadding = 0, firstItem = 0;
 export class EmojiDrawer {
-    constructor() {
-        this.validTypes = ["emoji"];
-        this._emojiShapeDict = new Map();
-    }
+    _emojiShapeDict = new Map();
     destroy() {
         for (const [key, data] of this._emojiShapeDict) {
             if (data instanceof ImageBitmap) {
@@ -26,11 +24,11 @@ export class EmojiDrawer {
         drawEmoji(data, image);
     }
     async init(container) {
-        const options = container.actualOptions, { validTypes } = this;
-        if (!validTypes.find(t => isInArray(t, options.particles.shape.type))) {
+        const options = container.actualOptions, shapeData = options.particles.shape;
+        if (!validTypes.some(t => isInArray(t, shapeData.type))) {
             return;
         }
-        const promises = [loadFont(defaultFont)], shapeOptions = validTypes.map(t => options.particles.shape.options[t])[firstItem];
+        const promises = [loadFont(defaultFont)], shapeOptions = validTypes.map(t => shapeData.options[t])[firstItem];
         executeOnSingleOrMultiple(shapeOptions, shape => {
             if (shape.font) {
                 promises.push(loadFont(shape.font));
@@ -41,7 +39,7 @@ export class EmojiDrawer {
     particleDestroy(particle) {
         particle.emojiDataKey = undefined;
     }
-    particleInit(_container, particle) {
+    particleInit(container, particle) {
         const shapeData = particle.shapeData;
         if (!shapeData.value) {
             return;
@@ -61,40 +59,33 @@ export class EmojiDrawer {
                 padding: noPadding,
                 ...shapeData,
                 ...emoji,
-            }, font = emojiOptions.font, value = emojiOptions.value;
-        const key = `${value}_${font}`;
-        if (this._emojiShapeDict.has(key)) {
-            particle.emojiDataKey = key;
+            }, font = emojiOptions.font, value = emojiOptions.value, cacheKey = `${value}_${font}`;
+        if (this._emojiShapeDict.has(cacheKey)) {
+            particle.emojiDataKey = cacheKey;
             return;
         }
         const padding = emojiOptions.padding * double, maxSize = getRangeMax(particle.size.value), fullSize = maxSize + padding, canvasSize = fullSize * double;
-        let image;
-        if (typeof OffscreenCanvas !== "undefined") {
-            const canvas = new OffscreenCanvas(canvasSize, canvasSize), context = canvas.getContext("2d");
-            if (!context) {
-                return;
-            }
-            context.font = `400 ${(maxSize * double).toString()}px ${font}`;
-            context.textBaseline = "middle";
-            context.textAlign = "center";
-            context.fillText(value, fullSize, fullSize);
-            image = canvas.transferToImageBitmap();
-        }
-        else {
+        let cacheCanvas, context;
+        if (typeof OffscreenCanvas === "undefined") {
             const canvas = safeDocument().createElement("canvas");
             canvas.width = canvasSize;
             canvas.height = canvasSize;
-            const context = canvas.getContext("2d");
-            if (!context) {
-                return;
-            }
-            context.font = `400 ${(maxSize * double).toString()}px ${font}`;
-            context.textBaseline = "middle";
-            context.textAlign = "center";
-            context.fillText(value, fullSize, fullSize);
-            image = canvas;
+            context = canvas.getContext("2d", container.canvas.settings);
+            cacheCanvas = canvas;
+        }
+        else {
+            cacheCanvas = new OffscreenCanvas(canvasSize, canvasSize);
+            context = cacheCanvas.getContext("2d", container.canvas.settings);
+        }
+        if (!context) {
+            return;
         }
-        this._emojiShapeDict.set(key, image);
-        particle.emojiDataKey = key;
+        context.font = `400 ${(maxSize * double).toString()}px ${font}`;
+        context.textBaseline = "middle";
+        context.textAlign = "center";
+        context.fillText(value, fullSize, fullSize);
+        const image = cacheCanvas instanceof HTMLCanvasElement ? cacheCanvas : cacheCanvas.transferToImageBitmap();
+        this._emojiShapeDict.set(cacheKey, image);
+        particle.emojiDataKey = cacheKey;
     }
 }

package/browser/Utils.js

@@ -1,4 +1,5 @@
 import { half } from "@tsparticles/engine";
+export const validTypes = ["emoji"];
 export function drawEmoji(data, image) {
     const { context, opacity } = data, previousAlpha = context.globalAlpha, diameter = image.width, radius = diameter * half;
     context.globalAlpha = opacity;

package/browser/index.js

@@ -1,7 +1,10 @@
+import { validTypes } from "./Utils.js";
 export async function loadEmojiShape(engine) {
-    engine.checkVersion("4.0.0-alpha.5");
-    await engine.register(async (e) => {
-        const { EmojiDrawer } = await import("./EmojiDrawer.js");
-        e.addShape(new EmojiDrawer());
+    engine.checkVersion("4.0.0-beta.0");
+    await engine.register(e => {
+        e.addShape(validTypes, async () => {
+            const { EmojiDrawer } = await import("./EmojiDrawer.js");
+            return new EmojiDrawer();
+        });
     });
 }

package/cjs/EmojiDrawer.js

@@ -1,11 +1,9 @@
-import { double, executeOnSingleOrMultiple, getRangeMax, isInArray, itemFromSingleOrMultiple, loadFont, safeDocument, } from "@tsparticles/engine";
-import { drawEmoji } from "./Utils.js";
-const defaultFont = '"Twemoji Mozilla", Apple Color Emoji, "Segoe UI Emoji", "Noto Color Emoji", "EmojiOne Color"', noPadding = 0, firstItem = 0;
+import { double, executeOnSingleOrMultiple, getRangeMax, isInArray, itemFromSingleOrMultiple, safeDocument, } from "@tsparticles/engine";
+import { drawEmoji, validTypes } from "./Utils.js";
+import { loadFont } from "@tsparticles/canvas-utils";
+const defaultFont = '"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif', noPadding = 0, firstItem = 0;
 export class EmojiDrawer {
-    constructor() {
-        this.validTypes = ["emoji"];
-        this._emojiShapeDict = new Map();
-    }
+    _emojiShapeDict = new Map();
     destroy() {
         for (const [key, data] of this._emojiShapeDict) {
             if (data instanceof ImageBitmap) {
@@ -26,11 +24,11 @@ export class EmojiDrawer {
         drawEmoji(data, image);
     }
     async init(container) {
-        const options = container.actualOptions, { validTypes } = this;
-        if (!validTypes.find(t => isInArray(t, options.particles.shape.type))) {
+        const options = container.actualOptions, shapeData = options.particles.shape;
+        if (!validTypes.some(t => isInArray(t, shapeData.type))) {
             return;
         }
-        const promises = [loadFont(defaultFont)], shapeOptions = validTypes.map(t => options.particles.shape.options[t])[firstItem];
+        const promises = [loadFont(defaultFont)], shapeOptions = validTypes.map(t => shapeData.options[t])[firstItem];
         executeOnSingleOrMultiple(shapeOptions, shape => {
             if (shape.font) {
                 promises.push(loadFont(shape.font));
@@ -41,7 +39,7 @@ export class EmojiDrawer {
     particleDestroy(particle) {
         particle.emojiDataKey = undefined;
     }
-    particleInit(_container, particle) {
+    particleInit(container, particle) {
         const shapeData = particle.shapeData;
         if (!shapeData.value) {
             return;
@@ -61,40 +59,33 @@ export class EmojiDrawer {
                 padding: noPadding,
                 ...shapeData,
                 ...emoji,
-            }, font = emojiOptions.font, value = emojiOptions.value;
-        const key = `${value}_${font}`;
-        if (this._emojiShapeDict.has(key)) {
-            particle.emojiDataKey = key;
+            }, font = emojiOptions.font, value = emojiOptions.value, cacheKey = `${value}_${font}`;
+        if (this._emojiShapeDict.has(cacheKey)) {
+            particle.emojiDataKey = cacheKey;
             return;
         }
         const padding = emojiOptions.padding * double, maxSize = getRangeMax(particle.size.value), fullSize = maxSize + padding, canvasSize = fullSize * double;
-        let image;
-        if (typeof OffscreenCanvas !== "undefined") {
-            const canvas = new OffscreenCanvas(canvasSize, canvasSize), context = canvas.getContext("2d");
-            if (!context) {
-                return;
-            }
-            context.font = `400 ${(maxSize * double).toString()}px ${font}`;
-            context.textBaseline = "middle";
-            context.textAlign = "center";
-            context.fillText(value, fullSize, fullSize);
-            image = canvas.transferToImageBitmap();
-        }
-        else {
+        let cacheCanvas, context;
+        if (typeof OffscreenCanvas === "undefined") {
             const canvas = safeDocument().createElement("canvas");
             canvas.width = canvasSize;
             canvas.height = canvasSize;
-            const context = canvas.getContext("2d");
-            if (!context) {
-                return;
-            }
-            context.font = `400 ${(maxSize * double).toString()}px ${font}`;
-            context.textBaseline = "middle";
-            context.textAlign = "center";
-            context.fillText(value, fullSize, fullSize);
-            image = canvas;
+            context = canvas.getContext("2d", container.canvas.settings);
+            cacheCanvas = canvas;
+        }
+        else {
+            cacheCanvas = new OffscreenCanvas(canvasSize, canvasSize);
+            context = cacheCanvas.getContext("2d", container.canvas.settings);
+        }
+        if (!context) {
+            return;
         }
-        this._emojiShapeDict.set(key, image);
-        particle.emojiDataKey = key;
+        context.font = `400 ${(maxSize * double).toString()}px ${font}`;
+        context.textBaseline = "middle";
+        context.textAlign = "center";
+        context.fillText(value, fullSize, fullSize);
+        const image = cacheCanvas instanceof HTMLCanvasElement ? cacheCanvas : cacheCanvas.transferToImageBitmap();
+        this._emojiShapeDict.set(cacheKey, image);
+        particle.emojiDataKey = cacheKey;
     }
 }

package/cjs/Utils.js

@@ -1,4 +1,5 @@
 import { half } from "@tsparticles/engine";
+export const validTypes = ["emoji"];
 export function drawEmoji(data, image) {
     const { context, opacity } = data, previousAlpha = context.globalAlpha, diameter = image.width, radius = diameter * half;
     context.globalAlpha = opacity;

package/cjs/index.js

@@ -1,7 +1,10 @@
+import { validTypes } from "./Utils.js";
 export async function loadEmojiShape(engine) {
-    engine.checkVersion("4.0.0-alpha.5");
-    await engine.register(async (e) => {
-        const { EmojiDrawer } = await import("./EmojiDrawer.js");
-        e.addShape(new EmojiDrawer());
+    engine.checkVersion("4.0.0-beta.0");
+    await engine.register(e => {
+        e.addShape(validTypes, async () => {
+            const { EmojiDrawer } = await import("./EmojiDrawer.js");
+            return new EmojiDrawer();
+        });
     });
 }

package/dist_browser_EmojiDrawer_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,17 +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 */   EmojiDrawer: () => (/* binding */ EmojiDrawer)\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 defaultFont = '\"Twemoji Mozilla\", Apple Color Emoji, \"Segoe UI Emoji\", \"Noto Color Emoji\", \"EmojiOne Color\"',\n  noPadding = 0,\n  firstItem = 0;\nclass EmojiDrawer {\n  constructor() {\n    this.validTypes = [\"emoji\"];\n    this._emojiShapeDict = new Map();\n  }\n  destroy() {\n    for (const [key, data] of this._emojiShapeDict) {\n      if (data instanceof ImageBitmap) {\n        data.close();\n      }\n      this._emojiShapeDict.delete(key);\n    }\n  }\n  draw(data) {\n    const key = data.particle.emojiDataKey;\n    if (!key) {\n      return;\n    }\n    const image = this._emojiShapeDict.get(key);\n    if (!image) {\n      return;\n    }\n    (0,_Utils_js__WEBPACK_IMPORTED_MODULE_1__.drawEmoji)(data, image);\n  }\n  async init(container) {\n    const options = container.actualOptions,\n      {\n        validTypes\n      } = this;\n    if (!validTypes.find(t => (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(t, options.particles.shape.type))) {\n      return;\n    }\n    const promises = [(0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.loadFont)(defaultFont)],\n      shapeOptions = validTypes.map(t => options.particles.shape.options[t])[firstItem];\n    (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.executeOnSingleOrMultiple)(shapeOptions, shape => {\n      if (shape.font) {\n        promises.push((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.loadFont)(shape.font));\n      }\n    });\n    await Promise.all(promises);\n  }\n  particleDestroy(particle) {\n    particle.emojiDataKey = undefined;\n  }\n  particleInit(_container, particle) {\n    const shapeData = particle.shapeData;\n    if (!shapeData.value) {\n      return;\n    }\n    const emoji = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.itemFromSingleOrMultiple)(shapeData.value, particle.randomIndexData);\n    if (!emoji) {\n      return;\n    }\n    const emojiOptions = typeof emoji === \"string\" ? {\n        font: shapeData.font ?? defaultFont,\n        padding: shapeData.padding ?? noPadding,\n        value: emoji\n      } : {\n        font: defaultFont,\n        padding: noPadding,\n        ...shapeData,\n        ...emoji\n      },\n      font = emojiOptions.font,\n      value = emojiOptions.value;\n    const key = `${value}_${font}`;\n    if (this._emojiShapeDict.has(key)) {\n      particle.emojiDataKey = key;\n      return;\n    }\n    const padding = emojiOptions.padding * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.double,\n      maxSize = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeMax)(particle.size.value),\n      fullSize = maxSize + padding,\n      canvasSize = fullSize * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.double;\n    let image;\n    if (typeof OffscreenCanvas !== \"undefined\") {\n      const canvas = new OffscreenCanvas(canvasSize, canvasSize),\n        context = canvas.getContext(\"2d\");\n      if (!context) {\n        return;\n      }\n      context.font = `400 ${(maxSize * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.double).toString()}px ${font}`;\n      context.textBaseline = \"middle\";\n      context.textAlign = \"center\";\n      context.fillText(value, fullSize, fullSize);\n      image = canvas.transferToImageBitmap();\n    } else {\n      const canvas = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.safeDocument)().createElement(\"canvas\");\n      canvas.width = canvasSize;\n      canvas.height = canvasSize;\n      const context = canvas.getContext(\"2d\");\n      if (!context) {\n        return;\n      }\n      context.font = `400 ${(maxSize * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.double).toString()}px ${font}`;\n      context.textBaseline = \"middle\";\n      context.textAlign = \"center\";\n      context.fillText(value, fullSize, fullSize);\n      image = canvas;\n    }\n    this._emojiShapeDict.set(key, image);\n    particle.emojiDataKey = key;\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/shape-emoji/./dist/browser/EmojiDrawer.js?\n}");
-
-/***/ },
-
-/***/ "./dist/browser/Utils.js"
-/*!*******************************!*\
-  !*** ./dist/browser/Utils.js ***!
-  \*******************************/
-(__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 */   drawEmoji: () => (/* binding */ drawEmoji)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nfunction drawEmoji(data, image) {\n  const {\n      context,\n      opacity\n    } = data,\n    previousAlpha = context.globalAlpha,\n    diameter = image.width,\n    radius = diameter * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half;\n  context.globalAlpha = opacity;\n  context.drawImage(image, -radius, -radius, diameter, diameter);\n  context.globalAlpha = previousAlpha;\n}\n\n//# sourceURL=webpack://@tsparticles/shape-emoji/./dist/browser/Utils.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   EmojiDrawer: () => (/* binding */ EmojiDrawer)\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/* harmony import */ var _tsparticles_canvas_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @tsparticles/canvas-utils */ \"@tsparticles/canvas-utils\");\n\n\n\nconst defaultFont = '\"Apple Color Emoji\", \"Segoe UI Emoji\", \"Noto Color Emoji\", sans-serif', noPadding = 0, firstItem = 0;\nclass EmojiDrawer {\n    _emojiShapeDict = new Map();\n    destroy() {\n        for (const [key, data] of this._emojiShapeDict){\n            if (data instanceof ImageBitmap) {\n                data.close();\n            }\n            this._emojiShapeDict.delete(key);\n        }\n    }\n    draw(data) {\n        const key = data.particle.emojiDataKey;\n        if (!key) {\n            return;\n        }\n        const image = this._emojiShapeDict.get(key);\n        if (!image) {\n            return;\n        }\n        (0,_Utils_js__WEBPACK_IMPORTED_MODULE_1__.drawEmoji)(data, image);\n    }\n    async init(container) {\n        const options = container.actualOptions, shapeData = options.particles.shape;\n        if (!_Utils_js__WEBPACK_IMPORTED_MODULE_1__.validTypes.some((t)=>(0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(t, shapeData.type))) {\n            return;\n        }\n        const promises = [\n            (0,_tsparticles_canvas_utils__WEBPACK_IMPORTED_MODULE_2__.loadFont)(defaultFont)\n        ], shapeOptions = _Utils_js__WEBPACK_IMPORTED_MODULE_1__.validTypes.map((t)=>shapeData.options[t])[firstItem];\n        (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.executeOnSingleOrMultiple)(shapeOptions, (shape)=>{\n            if (shape.font) {\n                promises.push((0,_tsparticles_canvas_utils__WEBPACK_IMPORTED_MODULE_2__.loadFont)(shape.font));\n            }\n        });\n        await Promise.all(promises);\n    }\n    particleDestroy(particle) {\n        particle.emojiDataKey = undefined;\n    }\n    particleInit(container, particle) {\n        const shapeData = particle.shapeData;\n        if (!shapeData.value) {\n            return;\n        }\n        const emoji = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.itemFromSingleOrMultiple)(shapeData.value, particle.randomIndexData);\n        if (!emoji) {\n            return;\n        }\n        const emojiOptions = typeof emoji === \"string\" ? {\n            font: shapeData.font ?? defaultFont,\n            padding: shapeData.padding ?? noPadding,\n            value: emoji\n        } : {\n            font: defaultFont,\n            padding: noPadding,\n            ...shapeData,\n            ...emoji\n        }, font = emojiOptions.font, value = emojiOptions.value, cacheKey = `${value}_${font}`;\n        if (this._emojiShapeDict.has(cacheKey)) {\n            particle.emojiDataKey = cacheKey;\n            return;\n        }\n        const padding = emojiOptions.padding * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.double, maxSize = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeMax)(particle.size.value), fullSize = maxSize + padding, canvasSize = fullSize * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.double;\n        let cacheCanvas, context;\n        if (typeof OffscreenCanvas === \"undefined\") {\n            const canvas = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.safeDocument)().createElement(\"canvas\");\n            canvas.width = canvasSize;\n            canvas.height = canvasSize;\n            context = canvas.getContext(\"2d\", container.canvas.settings);\n            cacheCanvas = canvas;\n        } else {\n            cacheCanvas = new OffscreenCanvas(canvasSize, canvasSize);\n            context = cacheCanvas.getContext(\"2d\", container.canvas.settings);\n        }\n        if (!context) {\n            return;\n        }\n        context.font = `400 ${(maxSize * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.double).toString()}px ${font}`;\n        context.textBaseline = \"middle\";\n        context.textAlign = \"center\";\n        context.fillText(value, fullSize, fullSize);\n        const image = cacheCanvas instanceof HTMLCanvasElement ? cacheCanvas : cacheCanvas.transferToImageBitmap();\n        this._emojiShapeDict.set(cacheKey, image);\n        particle.emojiDataKey = cacheKey;\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/shape-emoji/./dist/browser/EmojiDrawer.js?\n}");
 
 /***/ }
 

package/esm/EmojiDrawer.js

@@ -1,11 +1,9 @@
-import { double, executeOnSingleOrMultiple, getRangeMax, isInArray, itemFromSingleOrMultiple, loadFont, safeDocument, } from "@tsparticles/engine";
-import { drawEmoji } from "./Utils.js";
-const defaultFont = '"Twemoji Mozilla", Apple Color Emoji, "Segoe UI Emoji", "Noto Color Emoji", "EmojiOne Color"', noPadding = 0, firstItem = 0;
+import { double, executeOnSingleOrMultiple, getRangeMax, isInArray, itemFromSingleOrMultiple, safeDocument, } from "@tsparticles/engine";
+import { drawEmoji, validTypes } from "./Utils.js";
+import { loadFont } from "@tsparticles/canvas-utils";
+const defaultFont = '"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif', noPadding = 0, firstItem = 0;
 export class EmojiDrawer {
-    constructor() {
-        this.validTypes = ["emoji"];
-        this._emojiShapeDict = new Map();
-    }
+    _emojiShapeDict = new Map();
     destroy() {
         for (const [key, data] of this._emojiShapeDict) {
             if (data instanceof ImageBitmap) {
@@ -26,11 +24,11 @@ export class EmojiDrawer {
         drawEmoji(data, image);
     }
     async init(container) {
-        const options = container.actualOptions, { validTypes } = this;
-        if (!validTypes.find(t => isInArray(t, options.particles.shape.type))) {
+        const options = container.actualOptions, shapeData = options.particles.shape;
+        if (!validTypes.some(t => isInArray(t, shapeData.type))) {
             return;
         }
-        const promises = [loadFont(defaultFont)], shapeOptions = validTypes.map(t => options.particles.shape.options[t])[firstItem];
+        const promises = [loadFont(defaultFont)], shapeOptions = validTypes.map(t => shapeData.options[t])[firstItem];
         executeOnSingleOrMultiple(shapeOptions, shape => {
             if (shape.font) {
                 promises.push(loadFont(shape.font));
@@ -41,7 +39,7 @@ export class EmojiDrawer {
     particleDestroy(particle) {
         particle.emojiDataKey = undefined;
     }
-    particleInit(_container, particle) {
+    particleInit(container, particle) {
         const shapeData = particle.shapeData;
         if (!shapeData.value) {
             return;
@@ -61,40 +59,33 @@ export class EmojiDrawer {
                 padding: noPadding,
                 ...shapeData,
                 ...emoji,
-            }, font = emojiOptions.font, value = emojiOptions.value;
-        const key = `${value}_${font}`;
-        if (this._emojiShapeDict.has(key)) {
-            particle.emojiDataKey = key;
+            }, font = emojiOptions.font, value = emojiOptions.value, cacheKey = `${value}_${font}`;
+        if (this._emojiShapeDict.has(cacheKey)) {
+            particle.emojiDataKey = cacheKey;
             return;
         }
         const padding = emojiOptions.padding * double, maxSize = getRangeMax(particle.size.value), fullSize = maxSize + padding, canvasSize = fullSize * double;
-        let image;
-        if (typeof OffscreenCanvas !== "undefined") {
-            const canvas = new OffscreenCanvas(canvasSize, canvasSize), context = canvas.getContext("2d");
-            if (!context) {
-                return;
-            }
-            context.font = `400 ${(maxSize * double).toString()}px ${font}`;
-            context.textBaseline = "middle";
-            context.textAlign = "center";
-            context.fillText(value, fullSize, fullSize);
-            image = canvas.transferToImageBitmap();
-        }
-        else {
+        let cacheCanvas, context;
+        if (typeof OffscreenCanvas === "undefined") {
             const canvas = safeDocument().createElement("canvas");
             canvas.width = canvasSize;
             canvas.height = canvasSize;
-            const context = canvas.getContext("2d");
-            if (!context) {
-                return;
-            }
-            context.font = `400 ${(maxSize * double).toString()}px ${font}`;
-            context.textBaseline = "middle";
-            context.textAlign = "center";
-            context.fillText(value, fullSize, fullSize);
-            image = canvas;
+            context = canvas.getContext("2d", container.canvas.settings);
+            cacheCanvas = canvas;
+        }
+        else {
+            cacheCanvas = new OffscreenCanvas(canvasSize, canvasSize);
+            context = cacheCanvas.getContext("2d", container.canvas.settings);
+        }
+        if (!context) {
+            return;
         }
-        this._emojiShapeDict.set(key, image);
-        particle.emojiDataKey = key;
+        context.font = `400 ${(maxSize * double).toString()}px ${font}`;
+        context.textBaseline = "middle";
+        context.textAlign = "center";
+        context.fillText(value, fullSize, fullSize);
+        const image = cacheCanvas instanceof HTMLCanvasElement ? cacheCanvas : cacheCanvas.transferToImageBitmap();
+        this._emojiShapeDict.set(cacheKey, image);
+        particle.emojiDataKey = cacheKey;
     }
 }

package/esm/Utils.js

@@ -1,4 +1,5 @@
 import { half } from "@tsparticles/engine";
+export const validTypes = ["emoji"];
 export function drawEmoji(data, image) {
     const { context, opacity } = data, previousAlpha = context.globalAlpha, diameter = image.width, radius = diameter * half;
     context.globalAlpha = opacity;

package/esm/index.js

@@ -1,7 +1,10 @@
+import { validTypes } from "./Utils.js";
 export async function loadEmojiShape(engine) {
-    engine.checkVersion("4.0.0-alpha.5");
-    await engine.register(async (e) => {
-        const { EmojiDrawer } = await import("./EmojiDrawer.js");
-        e.addShape(new EmojiDrawer());
+    engine.checkVersion("4.0.0-beta.0");
+    await engine.register(e => {
+        e.addShape(validTypes, async () => {
+            const { EmojiDrawer } = await import("./EmojiDrawer.js");
+            return new EmojiDrawer();
+        });
     });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/shape-emoji",
-  "version": "4.0.0-alpha.5",
+  "version": "4.0.0-beta.0",
   "description": "tsParticles emoji shape",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -59,7 +59,8 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@tsparticles/engine": "4.0.0-alpha.5"
+    "@tsparticles/canvas-utils": "4.0.0-beta.0",
+    "@tsparticles/engine": "4.0.0-beta.0"
   },
   "publishConfig": {
     "access": "public"