@tsparticles/shape-emoji 4.0.0-beta.0 → 4.0.0-beta.10

package/20.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_shape_emoji=this.webpackChunk_tsparticles_shape_emoji||[]).push([[20],{20(e,t,a){a.d(t,{EmojiDrawer:()=>l});var i=a(303),n=a(206),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,d=(0,i.getRangeMax)(t.size.value),u=d+f,h=u*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.render.settings),a=t}else n=(a=new OffscreenCanvas(h,h)).getContext("2d",e.canvas.render.settings);if(!n)return;n.font=`400 ${(d*i.double).toString()}px ${p}`,n.textBaseline="middle",n.textAlign="center",n.fillText(c,u,u);let g=a instanceof HTMLCanvasElement?a:a.transferToImageBitmap();this._emojiShapeDict.set(m,g),t.emojiDataKey=m}}}}]);

package/README.md

@@ -8,6 +8,12 @@
 
 [tsParticles](https://github.com/tsparticles/tsparticles) additional emoji shape.
 
+## Quick checklist
+
+1. Install `@tsparticles/engine` (or use the CDN bundle below)
+2. Call the package loader function(s) before `tsParticles.load(...)`
+3. Apply the package options in your `tsParticles.load(...)` config
+
 ## How to use it
 
 ### CDN / Vanilla JS / jQuery
@@ -73,3 +79,32 @@ import { loadEmojiShape } from "@tsparticles/shape-emoji";
   await loadEmojiShape(tsParticles);
 })();
 ```
+
+## Option mapping
+
+- Primary options key: `particles.shape.type: "emoji"`
+- Shape-specific options key: `particles.shape.options.emoji`
+
+```json
+{
+  "particles": {
+    "shape": {
+      "type": "emoji",
+      "options": {
+        "emoji": {}
+      }
+    }
+  }
+}
+```
+
+## Common pitfalls
+
+- Calling `tsParticles.load(...)` before `loadEmojiShape(...)`
+- Verify required peer packages before enabling advanced options
+- Change one option group at a time to isolate regressions quickly
+
+## Related docs
+
+- All packages catalog: <https://github.com/tsparticles/tsparticles>
+- Main docs: <https://particles.js.org/docs/>

package/browser/EmojiDrawer.js

@@ -70,12 +70,12 @@ export class EmojiDrawer {
             const canvas = safeDocument().createElement("canvas");
             canvas.width = canvasSize;
             canvas.height = canvasSize;
-            context = canvas.getContext("2d", container.canvas.settings);
+            context = canvas.getContext("2d", container.canvas.render.settings);
             cacheCanvas = canvas;
         }
         else {
             cacheCanvas = new OffscreenCanvas(canvasSize, canvasSize);
-            context = cacheCanvas.getContext("2d", container.canvas.settings);
+            context = cacheCanvas.getContext("2d", container.canvas.render.settings);
         }
         if (!context) {
             return;

package/browser/index.js

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

package/cjs/EmojiDrawer.js

@@ -70,12 +70,12 @@ export class EmojiDrawer {
             const canvas = safeDocument().createElement("canvas");
             canvas.width = canvasSize;
             canvas.height = canvasSize;
-            context = canvas.getContext("2d", container.canvas.settings);
+            context = canvas.getContext("2d", container.canvas.render.settings);
             cacheCanvas = canvas;
         }
         else {
             cacheCanvas = new OffscreenCanvas(canvasSize, canvasSize);
-            context = cacheCanvas.getContext("2d", container.canvas.settings);
+            context = cacheCanvas.getContext("2d", container.canvas.render.settings);
         }
         if (!context) {
             return;

package/cjs/index.js

@@ -1,8 +1,8 @@
 import { validTypes } from "./Utils.js";
 export async function loadEmojiShape(engine) {
-    engine.checkVersion("4.0.0-beta.0");
-    await engine.register(e => {
-        e.addShape(validTypes, async () => {
+    engine.checkVersion("4.0.0-beta.10");
+    await engine.pluginManager.register(e => {
+        e.pluginManager.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-beta.0
+ * v4.0.0-beta.10
  */
 "use strict";
 /*
@@ -23,7 +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/* 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}");
+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.render.settings);\n            cacheCanvas = canvas;\n        } else {\n            cacheCanvas = new OffscreenCanvas(canvasSize, canvasSize);\n            context = cacheCanvas.getContext(\"2d\", container.canvas.render.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

@@ -70,12 +70,12 @@ export class EmojiDrawer {
             const canvas = safeDocument().createElement("canvas");
             canvas.width = canvasSize;
             canvas.height = canvasSize;
-            context = canvas.getContext("2d", container.canvas.settings);
+            context = canvas.getContext("2d", container.canvas.render.settings);
             cacheCanvas = canvas;
         }
         else {
             cacheCanvas = new OffscreenCanvas(canvasSize, canvasSize);
-            context = cacheCanvas.getContext("2d", container.canvas.settings);
+            context = cacheCanvas.getContext("2d", container.canvas.render.settings);
         }
         if (!context) {
             return;

package/esm/index.js

@@ -1,8 +1,8 @@
 import { validTypes } from "./Utils.js";
 export async function loadEmojiShape(engine) {
-    engine.checkVersion("4.0.0-beta.0");
-    await engine.register(e => {
-        e.addShape(validTypes, async () => {
+    engine.checkVersion("4.0.0-beta.10");
+    await engine.pluginManager.register(e => {
+        e.pluginManager.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-beta.0",
+  "version": "4.0.0-beta.10",
   "description": "tsParticles emoji shape",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -53,14 +53,13 @@
       "browser": "./browser/index.js",
       "import": "./esm/index.js",
       "require": "./cjs/index.js",
-      "umd": "./umd/index.js",
-      "default": "./cjs/index.js"
+      "default": "./esm/index.js"
     },
     "./package.json": "./package.json"
   },
-  "dependencies": {
-    "@tsparticles/canvas-utils": "4.0.0-beta.0",
-    "@tsparticles/engine": "4.0.0-beta.0"
+  "peerDependencies": {
+    "@tsparticles/canvas-utils": "4.0.0-beta.10",
+    "@tsparticles/engine": "4.0.0-beta.10"
   },
   "publishConfig": {
     "access": "public"