@tsparticles/shape-emoji 3.0.3 → 3.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/103.min.js ADDED
@@ -0,0 +1,2 @@
1
+ /*! For license information please see 103.min.js.LICENSE.txt */
2
+ (this.webpackChunk_tsparticles_shape_emoji=this.webpackChunk_tsparticles_shape_emoji||[]).push([[103],{103:(a,t,e)=>{function i(a){const{context:t,particle:e,radius:i,opacity:l}=a,p=e.emojiData,o=2*i,s=t.globalAlpha;p&&(t.globalAlpha=l,t.drawImage(p,-i,-i,o,o),t.globalAlpha=s)}e.d(t,{drawEmoji:()=>i})}}]);
@@ -0,0 +1 @@
1
+ /*! tsParticles Emoji Shape v3.2.0 by Matteo Bruni */
package/216.min.js ADDED
@@ -0,0 +1,2 @@
1
+ /*! For license information please see 216.min.js.LICENSE.txt */
2
+ (this.webpackChunk_tsparticles_shape_emoji=this.webpackChunk_tsparticles_shape_emoji||[]).push([[216],{216:(e,t,i)=>{i.d(t,{EmojiDrawer:()=>s});var a=i(533),n=i(305);const o='"Twemoji Mozilla", Apple Color Emoji, "Segoe UI Emoji", "Noto Color Emoji", "EmojiOne Color"';class s{constructor(){this._emojiShapeDict=new Map}destroy(){for(const[e,t]of this._emojiShapeDict)t instanceof ImageBitmap&&(t?.close(),this._emojiShapeDict.delete(e))}async draw(e){const{drawEmoji:t}=await i.e(103).then(i.bind(i,103));t(e)}async init(e){const t=e.actualOptions;if(!n.h.find((e=>(0,a.isInArray)(e,t.particles.shape.type))))return;const i=[(0,a.loadFont)(o)],s=n.h.map((e=>t.particles.shape.options[e])).find((e=>!!e));s&&(0,a.executeOnSingleOrMultiple)(s,(e=>{e.font&&i.push((0,a.loadFont)(e.font))})),await Promise.all(i)}particleDestroy(e){delete e.emojiData}async particleInit(e,t){const i=t.shapeData;if(!i?.value)return;const n=(0,a.itemFromSingleOrMultiple)(i.value,t.randomIndexData),s=i.font??o;if(!n)return;const r=`${n}_${s}`,l=this._emojiShapeDict.get(r);if(l)return void(t.emojiData=l);const c=2*(0,a.getRangeMax)(t.size.value);let p;const m=(0,a.getRangeMax)(t.size.value);if("undefined"!=typeof OffscreenCanvas){const e=new OffscreenCanvas(c,c),t=e.getContext("2d");if(!t)return;t.font=`400 ${2*m}px ${s}`,t.textBaseline="middle",t.textAlign="center",t.fillText(n,m,m),p=e.transferToImageBitmap()}else{const e=document.createElement("canvas");e.width=c,e.height=c;const t=e.getContext("2d");if(!t)return;t.font=`400 ${2*m}px ${s}`,t.textBaseline="middle",t.textAlign="center",t.fillText(n,m,m),p=e}this._emojiShapeDict.set(r,p),t.emojiData=p,await Promise.resolve()}}}}]);
@@ -0,0 +1 @@
1
+ /*! tsParticles Emoji Shape v3.2.0 by Matteo Bruni */
@@ -0,0 +1 @@
1
+ export const validTypes = ["emoji"];
@@ -1,5 +1,5 @@
1
1
  import { executeOnSingleOrMultiple, getRangeMax, isInArray, itemFromSingleOrMultiple, loadFont, } from "@tsparticles/engine";
2
- export const validTypes = ["emoji"];
2
+ import { validTypes } from "./Constants.js";
3
3
  const defaultFont = '"Twemoji Mozilla", Apple Color Emoji, "Segoe UI Emoji", "Noto Color Emoji", "EmojiOne Color"';
4
4
  export class EmojiDrawer {
5
5
  constructor() {
@@ -7,38 +7,38 @@ export class EmojiDrawer {
7
7
  }
8
8
  destroy() {
9
9
  for (const [key, emojiData] of this._emojiShapeDict) {
10
- emojiData instanceof ImageBitmap && emojiData?.close();
11
- this._emojiShapeDict.delete(key);
10
+ if (emojiData instanceof ImageBitmap) {
11
+ emojiData?.close();
12
+ this._emojiShapeDict.delete(key);
13
+ }
12
14
  }
13
15
  }
14
- draw(data) {
15
- const { context, particle, radius, opacity } = data, emojiData = particle.emojiData;
16
- if (!emojiData) {
17
- return;
18
- }
19
- context.globalAlpha = opacity;
20
- context.drawImage(emojiData, -radius, -radius, radius * 2, radius * 2);
21
- context.globalAlpha = 1;
16
+ async draw(data) {
17
+ const { drawEmoji } = await import("./Utils.js");
18
+ drawEmoji(data);
22
19
  }
23
20
  async init(container) {
24
21
  const options = container.actualOptions;
25
- if (validTypes.find((t) => isInArray(t, options.particles.shape.type))) {
26
- const promises = [loadFont(defaultFont)], shapeOptions = validTypes
27
- .map((t) => options.particles.shape.options[t])
28
- .find((t) => !!t);
29
- if (shapeOptions) {
30
- executeOnSingleOrMultiple(shapeOptions, (shape) => {
31
- shape.font && promises.push(loadFont(shape.font));
32
- });
33
- }
34
- await Promise.all(promises);
22
+ if (!validTypes.find((t) => isInArray(t, options.particles.shape.type))) {
23
+ return;
24
+ }
25
+ const promises = [loadFont(defaultFont)], shapeOptions = validTypes
26
+ .map((t) => options.particles.shape.options[t])
27
+ .find((t) => !!t);
28
+ if (shapeOptions) {
29
+ executeOnSingleOrMultiple(shapeOptions, (shape) => {
30
+ if (shape.font) {
31
+ promises.push(loadFont(shape.font));
32
+ }
33
+ });
35
34
  }
35
+ await Promise.all(promises);
36
36
  }
37
37
  particleDestroy(particle) {
38
38
  delete particle.emojiData;
39
39
  }
40
- particleInit(container, particle) {
41
- const shapeData = particle.shapeData;
40
+ async particleInit(container, particle) {
41
+ const double = 2, shapeData = particle.shapeData;
42
42
  if (!shapeData?.value) {
43
43
  return;
44
44
  }
@@ -51,17 +51,18 @@ export class EmojiDrawer {
51
51
  particle.emojiData = existingData;
52
52
  return;
53
53
  }
54
- const canvasSize = getRangeMax(particle.size.value) * 2;
54
+ const canvasSize = getRangeMax(particle.size.value) * double;
55
55
  let emojiData;
56
+ const maxSize = getRangeMax(particle.size.value);
56
57
  if (typeof OffscreenCanvas !== "undefined") {
57
58
  const canvas = new OffscreenCanvas(canvasSize, canvasSize), context = canvas.getContext("2d");
58
59
  if (!context) {
59
60
  return;
60
61
  }
61
- context.font = `400 ${getRangeMax(particle.size.value) * 2}px ${font}`;
62
+ context.font = `400 ${maxSize * double}px ${font}`;
62
63
  context.textBaseline = "middle";
63
64
  context.textAlign = "center";
64
- context.fillText(emoji, getRangeMax(particle.size.value), getRangeMax(particle.size.value));
65
+ context.fillText(emoji, maxSize, maxSize);
65
66
  emojiData = canvas.transferToImageBitmap();
66
67
  }
67
68
  else {
@@ -72,13 +73,14 @@ export class EmojiDrawer {
72
73
  if (!context) {
73
74
  return;
74
75
  }
75
- context.font = `400 ${getRangeMax(particle.size.value) * 2}px ${font}`;
76
+ context.font = `400 ${maxSize * double}px ${font}`;
76
77
  context.textBaseline = "middle";
77
78
  context.textAlign = "center";
78
- context.fillText(emoji, getRangeMax(particle.size.value), getRangeMax(particle.size.value));
79
+ context.fillText(emoji, maxSize, maxSize);
79
80
  emojiData = canvas;
80
81
  }
81
82
  this._emojiShapeDict.set(key, emojiData);
82
83
  particle.emojiData = emojiData;
84
+ await Promise.resolve();
83
85
  }
84
86
  }
@@ -0,0 +1,9 @@
1
+ export function drawEmoji(data) {
2
+ const { context, particle, radius, opacity } = data, emojiData = particle.emojiData, double = 2, diameter = radius * double, previousAlpha = context.globalAlpha;
3
+ if (!emojiData) {
4
+ return;
5
+ }
6
+ context.globalAlpha = opacity;
7
+ context.drawImage(emojiData, -radius, -radius, diameter, diameter);
8
+ context.globalAlpha = previousAlpha;
9
+ }
package/browser/index.js CHANGED
@@ -1,4 +1,5 @@
1
- import { EmojiDrawer, validTypes } from "./EmojiDrawer.js";
1
+ import { validTypes } from "./Constants.js";
2
2
  export async function loadEmojiShape(engine, refresh = true) {
3
+ const { EmojiDrawer } = await import("./EmojiDrawer.js");
3
4
  await engine.addShape(validTypes, new EmojiDrawer(), refresh);
4
5
  }
@@ -0,0 +1,4 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.validTypes = void 0;
4
+ exports.validTypes = ["emoji"];
@@ -1,8 +1,31 @@
1
1
  "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
24
+ };
2
25
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.EmojiDrawer = exports.validTypes = void 0;
26
+ exports.EmojiDrawer = void 0;
4
27
  const engine_1 = require("@tsparticles/engine");
5
- exports.validTypes = ["emoji"];
28
+ const Constants_js_1 = require("./Constants.js");
6
29
  const defaultFont = '"Twemoji Mozilla", Apple Color Emoji, "Segoe UI Emoji", "Noto Color Emoji", "EmojiOne Color"';
7
30
  class EmojiDrawer {
8
31
  constructor() {
@@ -10,38 +33,38 @@ class EmojiDrawer {
10
33
  }
11
34
  destroy() {
12
35
  for (const [key, emojiData] of this._emojiShapeDict) {
13
- emojiData instanceof ImageBitmap && emojiData?.close();
14
- this._emojiShapeDict.delete(key);
36
+ if (emojiData instanceof ImageBitmap) {
37
+ emojiData?.close();
38
+ this._emojiShapeDict.delete(key);
39
+ }
15
40
  }
16
41
  }
17
- draw(data) {
18
- const { context, particle, radius, opacity } = data, emojiData = particle.emojiData;
19
- if (!emojiData) {
20
- return;
21
- }
22
- context.globalAlpha = opacity;
23
- context.drawImage(emojiData, -radius, -radius, radius * 2, radius * 2);
24
- context.globalAlpha = 1;
42
+ async draw(data) {
43
+ const { drawEmoji } = await Promise.resolve().then(() => __importStar(require("./Utils.js")));
44
+ drawEmoji(data);
25
45
  }
26
46
  async init(container) {
27
47
  const options = container.actualOptions;
28
- if (exports.validTypes.find((t) => (0, engine_1.isInArray)(t, options.particles.shape.type))) {
29
- const promises = [(0, engine_1.loadFont)(defaultFont)], shapeOptions = exports.validTypes
30
- .map((t) => options.particles.shape.options[t])
31
- .find((t) => !!t);
32
- if (shapeOptions) {
33
- (0, engine_1.executeOnSingleOrMultiple)(shapeOptions, (shape) => {
34
- shape.font && promises.push((0, engine_1.loadFont)(shape.font));
35
- });
36
- }
37
- await Promise.all(promises);
48
+ if (!Constants_js_1.validTypes.find((t) => (0, engine_1.isInArray)(t, options.particles.shape.type))) {
49
+ return;
50
+ }
51
+ const promises = [(0, engine_1.loadFont)(defaultFont)], shapeOptions = Constants_js_1.validTypes
52
+ .map((t) => options.particles.shape.options[t])
53
+ .find((t) => !!t);
54
+ if (shapeOptions) {
55
+ (0, engine_1.executeOnSingleOrMultiple)(shapeOptions, (shape) => {
56
+ if (shape.font) {
57
+ promises.push((0, engine_1.loadFont)(shape.font));
58
+ }
59
+ });
38
60
  }
61
+ await Promise.all(promises);
39
62
  }
40
63
  particleDestroy(particle) {
41
64
  delete particle.emojiData;
42
65
  }
43
- particleInit(container, particle) {
44
- const shapeData = particle.shapeData;
66
+ async particleInit(container, particle) {
67
+ const double = 2, shapeData = particle.shapeData;
45
68
  if (!shapeData?.value) {
46
69
  return;
47
70
  }
@@ -54,17 +77,18 @@ class EmojiDrawer {
54
77
  particle.emojiData = existingData;
55
78
  return;
56
79
  }
57
- const canvasSize = (0, engine_1.getRangeMax)(particle.size.value) * 2;
80
+ const canvasSize = (0, engine_1.getRangeMax)(particle.size.value) * double;
58
81
  let emojiData;
82
+ const maxSize = (0, engine_1.getRangeMax)(particle.size.value);
59
83
  if (typeof OffscreenCanvas !== "undefined") {
60
84
  const canvas = new OffscreenCanvas(canvasSize, canvasSize), context = canvas.getContext("2d");
61
85
  if (!context) {
62
86
  return;
63
87
  }
64
- context.font = `400 ${(0, engine_1.getRangeMax)(particle.size.value) * 2}px ${font}`;
88
+ context.font = `400 ${maxSize * double}px ${font}`;
65
89
  context.textBaseline = "middle";
66
90
  context.textAlign = "center";
67
- context.fillText(emoji, (0, engine_1.getRangeMax)(particle.size.value), (0, engine_1.getRangeMax)(particle.size.value));
91
+ context.fillText(emoji, maxSize, maxSize);
68
92
  emojiData = canvas.transferToImageBitmap();
69
93
  }
70
94
  else {
@@ -75,14 +99,15 @@ class EmojiDrawer {
75
99
  if (!context) {
76
100
  return;
77
101
  }
78
- context.font = `400 ${(0, engine_1.getRangeMax)(particle.size.value) * 2}px ${font}`;
102
+ context.font = `400 ${maxSize * double}px ${font}`;
79
103
  context.textBaseline = "middle";
80
104
  context.textAlign = "center";
81
- context.fillText(emoji, (0, engine_1.getRangeMax)(particle.size.value), (0, engine_1.getRangeMax)(particle.size.value));
105
+ context.fillText(emoji, maxSize, maxSize);
82
106
  emojiData = canvas;
83
107
  }
84
108
  this._emojiShapeDict.set(key, emojiData);
85
109
  particle.emojiData = emojiData;
110
+ await Promise.resolve();
86
111
  }
87
112
  }
88
113
  exports.EmojiDrawer = EmojiDrawer;
package/cjs/Utils.js ADDED
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.drawEmoji = void 0;
4
+ function drawEmoji(data) {
5
+ const { context, particle, radius, opacity } = data, emojiData = particle.emojiData, double = 2, diameter = radius * double, previousAlpha = context.globalAlpha;
6
+ if (!emojiData) {
7
+ return;
8
+ }
9
+ context.globalAlpha = opacity;
10
+ context.drawImage(emojiData, -radius, -radius, diameter, diameter);
11
+ context.globalAlpha = previousAlpha;
12
+ }
13
+ exports.drawEmoji = drawEmoji;
package/cjs/index.js CHANGED
@@ -1,8 +1,32 @@
1
1
  "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
24
+ };
2
25
  Object.defineProperty(exports, "__esModule", { value: true });
3
26
  exports.loadEmojiShape = void 0;
4
- const EmojiDrawer_js_1 = require("./EmojiDrawer.js");
27
+ const Constants_js_1 = require("./Constants.js");
5
28
  async function loadEmojiShape(engine, refresh = true) {
6
- await engine.addShape(EmojiDrawer_js_1.validTypes, new EmojiDrawer_js_1.EmojiDrawer(), refresh);
29
+ const { EmojiDrawer } = await Promise.resolve().then(() => __importStar(require("./EmojiDrawer.js")));
30
+ await engine.addShape(Constants_js_1.validTypes, new EmojiDrawer(), refresh);
7
31
  }
8
32
  exports.loadEmojiShape = loadEmojiShape;
@@ -0,0 +1,30 @@
1
+ /*!
2
+ * Author : Matteo Bruni
3
+ * MIT license: https://opensource.org/licenses/MIT
4
+ * Demo / Generator : https://particles.js.org/
5
+ * GitHub : https://www.github.com/matteobruni/tsparticles
6
+ * How to use? : Check the GitHub README
7
+ * v3.2.0
8
+ */
9
+ "use strict";
10
+ /*
11
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
12
+ * This devtool is neither made for production nor for readable output files.
13
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
14
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
15
+ * or disable the default devtool with "devtool: false".
16
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
17
+ */
18
+ (this["webpackChunk_tsparticles_shape_emoji"] = this["webpackChunk_tsparticles_shape_emoji"] || []).push([["dist_browser_EmojiDrawer_js"],{
19
+
20
+ /***/ "./dist/browser/EmojiDrawer.js":
21
+ /*!*************************************!*\
22
+ !*** ./dist/browser/EmojiDrawer.js ***!
23
+ \*************************************/
24
+ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
25
+
26
+ 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 _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _Constants_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Constants.js */ \"./dist/browser/Constants.js\");\n\n\nconst defaultFont = '\"Twemoji Mozilla\", Apple Color Emoji, \"Segoe UI Emoji\", \"Noto Color Emoji\", \"EmojiOne Color\"';\nclass EmojiDrawer {\n constructor() {\n this._emojiShapeDict = new Map();\n }\n destroy() {\n for (const [key, emojiData] of this._emojiShapeDict) {\n if (emojiData instanceof ImageBitmap) {\n emojiData?.close();\n this._emojiShapeDict.delete(key);\n }\n }\n }\n async draw(data) {\n const {\n drawEmoji\n } = await __webpack_require__.e(/*! import() */ \"dist_browser_Utils_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./Utils.js */ \"./dist/browser/Utils.js\"));\n drawEmoji(data);\n }\n async init(container) {\n const options = container.actualOptions;\n if (!_Constants_js__WEBPACK_IMPORTED_MODULE_1__.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 = _Constants_js__WEBPACK_IMPORTED_MODULE_1__.validTypes.map(t => options.particles.shape.options[t]).find(t => !!t);\n if (shapeOptions) {\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 }\n await Promise.all(promises);\n }\n particleDestroy(particle) {\n delete particle.emojiData;\n }\n async particleInit(container, particle) {\n const double = 2,\n 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 font = shapeData.font ?? defaultFont;\n if (!emoji) {\n return;\n }\n const key = `${emoji}_${font}`,\n existingData = this._emojiShapeDict.get(key);\n if (existingData) {\n particle.emojiData = existingData;\n return;\n }\n const canvasSize = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeMax)(particle.size.value) * double;\n let emojiData;\n const maxSize = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeMax)(particle.size.value);\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 * double}px ${font}`;\n context.textBaseline = \"middle\";\n context.textAlign = \"center\";\n context.fillText(emoji, maxSize, maxSize);\n emojiData = canvas.transferToImageBitmap();\n } else {\n const canvas = document.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 * double}px ${font}`;\n context.textBaseline = \"middle\";\n context.textAlign = \"center\";\n context.fillText(emoji, maxSize, maxSize);\n emojiData = canvas;\n }\n this._emojiShapeDict.set(key, emojiData);\n particle.emojiData = emojiData;\n await Promise.resolve();\n }\n}\n\n//# sourceURL=webpack://@tsparticles/shape-emoji/./dist/browser/EmojiDrawer.js?");
27
+
28
+ /***/ })
29
+
30
+ }]);
@@ -0,0 +1,30 @@
1
+ /*!
2
+ * Author : Matteo Bruni
3
+ * MIT license: https://opensource.org/licenses/MIT
4
+ * Demo / Generator : https://particles.js.org/
5
+ * GitHub : https://www.github.com/matteobruni/tsparticles
6
+ * How to use? : Check the GitHub README
7
+ * v3.2.0
8
+ */
9
+ "use strict";
10
+ /*
11
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
12
+ * This devtool is neither made for production nor for readable output files.
13
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
14
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
15
+ * or disable the default devtool with "devtool: false".
16
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
17
+ */
18
+ (this["webpackChunk_tsparticles_shape_emoji"] = this["webpackChunk_tsparticles_shape_emoji"] || []).push([["dist_browser_Utils_js"],{
19
+
20
+ /***/ "./dist/browser/Utils.js":
21
+ /*!*******************************!*\
22
+ !*** ./dist/browser/Utils.js ***!
23
+ \*******************************/
24
+ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
25
+
26
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ drawEmoji: () => (/* binding */ drawEmoji)\n/* harmony export */ });\nfunction drawEmoji(data) {\n const {\n context,\n particle,\n radius,\n opacity\n } = data,\n emojiData = particle.emojiData,\n double = 2,\n diameter = radius * double,\n previousAlpha = context.globalAlpha;\n if (!emojiData) {\n return;\n }\n context.globalAlpha = opacity;\n context.drawImage(emojiData, -radius, -radius, diameter, diameter);\n context.globalAlpha = previousAlpha;\n}\n\n//# sourceURL=webpack://@tsparticles/shape-emoji/./dist/browser/Utils.js?");
27
+
28
+ /***/ })
29
+
30
+ }]);
@@ -0,0 +1 @@
1
+ export const validTypes = ["emoji"];
@@ -1,5 +1,5 @@
1
1
  import { executeOnSingleOrMultiple, getRangeMax, isInArray, itemFromSingleOrMultiple, loadFont, } from "@tsparticles/engine";
2
- export const validTypes = ["emoji"];
2
+ import { validTypes } from "./Constants.js";
3
3
  const defaultFont = '"Twemoji Mozilla", Apple Color Emoji, "Segoe UI Emoji", "Noto Color Emoji", "EmojiOne Color"';
4
4
  export class EmojiDrawer {
5
5
  constructor() {
@@ -7,38 +7,38 @@ export class EmojiDrawer {
7
7
  }
8
8
  destroy() {
9
9
  for (const [key, emojiData] of this._emojiShapeDict) {
10
- emojiData instanceof ImageBitmap && emojiData?.close();
11
- this._emojiShapeDict.delete(key);
10
+ if (emojiData instanceof ImageBitmap) {
11
+ emojiData?.close();
12
+ this._emojiShapeDict.delete(key);
13
+ }
12
14
  }
13
15
  }
14
- draw(data) {
15
- const { context, particle, radius, opacity } = data, emojiData = particle.emojiData;
16
- if (!emojiData) {
17
- return;
18
- }
19
- context.globalAlpha = opacity;
20
- context.drawImage(emojiData, -radius, -radius, radius * 2, radius * 2);
21
- context.globalAlpha = 1;
16
+ async draw(data) {
17
+ const { drawEmoji } = await import("./Utils.js");
18
+ drawEmoji(data);
22
19
  }
23
20
  async init(container) {
24
21
  const options = container.actualOptions;
25
- if (validTypes.find((t) => isInArray(t, options.particles.shape.type))) {
26
- const promises = [loadFont(defaultFont)], shapeOptions = validTypes
27
- .map((t) => options.particles.shape.options[t])
28
- .find((t) => !!t);
29
- if (shapeOptions) {
30
- executeOnSingleOrMultiple(shapeOptions, (shape) => {
31
- shape.font && promises.push(loadFont(shape.font));
32
- });
33
- }
34
- await Promise.all(promises);
22
+ if (!validTypes.find((t) => isInArray(t, options.particles.shape.type))) {
23
+ return;
24
+ }
25
+ const promises = [loadFont(defaultFont)], shapeOptions = validTypes
26
+ .map((t) => options.particles.shape.options[t])
27
+ .find((t) => !!t);
28
+ if (shapeOptions) {
29
+ executeOnSingleOrMultiple(shapeOptions, (shape) => {
30
+ if (shape.font) {
31
+ promises.push(loadFont(shape.font));
32
+ }
33
+ });
35
34
  }
35
+ await Promise.all(promises);
36
36
  }
37
37
  particleDestroy(particle) {
38
38
  delete particle.emojiData;
39
39
  }
40
- particleInit(container, particle) {
41
- const shapeData = particle.shapeData;
40
+ async particleInit(container, particle) {
41
+ const double = 2, shapeData = particle.shapeData;
42
42
  if (!shapeData?.value) {
43
43
  return;
44
44
  }
@@ -51,17 +51,18 @@ export class EmojiDrawer {
51
51
  particle.emojiData = existingData;
52
52
  return;
53
53
  }
54
- const canvasSize = getRangeMax(particle.size.value) * 2;
54
+ const canvasSize = getRangeMax(particle.size.value) * double;
55
55
  let emojiData;
56
+ const maxSize = getRangeMax(particle.size.value);
56
57
  if (typeof OffscreenCanvas !== "undefined") {
57
58
  const canvas = new OffscreenCanvas(canvasSize, canvasSize), context = canvas.getContext("2d");
58
59
  if (!context) {
59
60
  return;
60
61
  }
61
- context.font = `400 ${getRangeMax(particle.size.value) * 2}px ${font}`;
62
+ context.font = `400 ${maxSize * double}px ${font}`;
62
63
  context.textBaseline = "middle";
63
64
  context.textAlign = "center";
64
- context.fillText(emoji, getRangeMax(particle.size.value), getRangeMax(particle.size.value));
65
+ context.fillText(emoji, maxSize, maxSize);
65
66
  emojiData = canvas.transferToImageBitmap();
66
67
  }
67
68
  else {
@@ -72,13 +73,14 @@ export class EmojiDrawer {
72
73
  if (!context) {
73
74
  return;
74
75
  }
75
- context.font = `400 ${getRangeMax(particle.size.value) * 2}px ${font}`;
76
+ context.font = `400 ${maxSize * double}px ${font}`;
76
77
  context.textBaseline = "middle";
77
78
  context.textAlign = "center";
78
- context.fillText(emoji, getRangeMax(particle.size.value), getRangeMax(particle.size.value));
79
+ context.fillText(emoji, maxSize, maxSize);
79
80
  emojiData = canvas;
80
81
  }
81
82
  this._emojiShapeDict.set(key, emojiData);
82
83
  particle.emojiData = emojiData;
84
+ await Promise.resolve();
83
85
  }
84
86
  }
package/esm/Utils.js ADDED
@@ -0,0 +1,9 @@
1
+ export function drawEmoji(data) {
2
+ const { context, particle, radius, opacity } = data, emojiData = particle.emojiData, double = 2, diameter = radius * double, previousAlpha = context.globalAlpha;
3
+ if (!emojiData) {
4
+ return;
5
+ }
6
+ context.globalAlpha = opacity;
7
+ context.drawImage(emojiData, -radius, -radius, diameter, diameter);
8
+ context.globalAlpha = previousAlpha;
9
+ }
package/esm/index.js CHANGED
@@ -1,4 +1,5 @@
1
- import { EmojiDrawer, validTypes } from "./EmojiDrawer.js";
1
+ import { validTypes } from "./Constants.js";
2
2
  export async function loadEmojiShape(engine, refresh = true) {
3
+ const { EmojiDrawer } = await import("./EmojiDrawer.js");
3
4
  await engine.addShape(validTypes, new EmojiDrawer(), refresh);
4
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tsparticles/shape-emoji",
3
- "version": "3.0.3",
3
+ "version": "3.2.0",
4
4
  "description": "tsParticles emoji shape",
5
5
  "homepage": "https://particles.js.org",
6
6
  "repository": {
@@ -59,7 +59,7 @@
59
59
  "./package.json": "./package.json"
60
60
  },
61
61
  "dependencies": {
62
- "@tsparticles/engine": "^3.0.3"
62
+ "@tsparticles/engine": "^3.2.0"
63
63
  },
64
64
  "publishConfig": {
65
65
  "access": "public"
package/report.html CHANGED
@@ -3,7 +3,7 @@
3
3
  <head>
4
4
  <meta charset="UTF-8"/>
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
6
- <title>@tsparticles/shape-emoji [26 Dec 2023 at 19:30]</title>
6
+ <title>@tsparticles/shape-emoji [31 Jan 2024 at 02:09]</title>
7
7
  <link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABrVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+O1foceMD///+J0/qK1Pr7/v8Xdr/9///W8P4UdL7L7P0Scr2r4Pyj3vwad8D5/f/2/f+55f3E6f34+/2H0/ojfMKpzOd0rNgQcb3F3O/j9f7c8v6g3Pz0/P/w+v/q+P7n9v6T1/uQ1vuE0vqLut/y+v+Z2fvt+f+15Pzv9fuc2/vR7v2V2Pvd6/bg9P7I6/285/2y4/yp3/zp8vk8i8kqgMT7/P31+fyv4vxGkcz6/P6/6P3j7vfS5PNnpNUxhcbO7f7F6v3O4vHK3/DA2u631Ouy0eqXweKJud5wqthfoNMMbLvY8f73+v2dxeR8sNtTmdDx9/zX6PSjyeaCtd1YnNGX2PuQveCGt95Nls42h8dLlM3F4vBtAAAAM3RSTlMAAyOx0/sKBvik8opWGBMOAe3l1snDm2E9LSb06eHcu5JpHbarfHZCN9CBb08zzkdNS0kYaptYAAAFV0lEQVRYw92X51/aYBDHHS2O2qqttVbrqNq9m+TJIAYIShBkWwqIiCgoWvfeq7Z2/s29hyQNyUcR7LveGwVyXy6XH8/9rqxglLfUPLxVduUor3h0rfp2TYvpivk37929TkG037hffoX0+peVtZQc1589rigVUdXS/ABSAyEmGIO/1XfvldSK8vs3OqB6u3m0nxmIrvgB0dj7rr7Y9IbuF68hnfFaiHA/sxqm0wciIG43P60qKv9WXWc1RXGh/mFESFABTSBi0sNAKzqet17eCtOb3kZIDwxEEU0oAIJGYxNBDhBND29e0rtXXbcpuPmED9IhEAAQ/AXEaF8EPmnrrKsv0LvWR3fg5sWDNAFZOgAgaKvZDogHNU9MFwnnYROkc56RD5CjAbQX9Ow4g7upCsvYu55aSI/Nj0H1akgKQEUM94dwK65hYRmFU9MIcH/fqJYOZYcnuJSU/waKDgTOEVaVKhwrTRP5XzgSpAITYzom7UvkhFX5VutmxeNnWDjjswTKTyfgluNDGbUpWissXhF3s7mlSml+czWkg3D0l1nNjGNjz3myOQOa1KM/jOS6ebdbAVTCi4gljHSFrviza7tOgRWcS0MOUX9zdNgag5w7rRqA44Lzw0hr1WqES36dFliSJFlh2rXIae3FFcDDgKdxrUIDePr8jGcSClV1u7A9xeN0ModY/pHMxmR1EzRh8TJiwqsHmKW0l4FCEZI+jHio+JdPPE9qwQtTRxku2D8sIeRL2LnxWSllANCQGOIiqVHAz2ye2JR0DcH+HoxDkaADLjgxjKQ+AwCX/g0+DNgdG0ukYCONAe+dbc2IAc6fwt1ARoDSezNHxV2Cmzwv3O6lDMV55edBGwGK9n1+x2F8EDfAGCxug8MhpsMEcTEAWf3rx2vZhe/LAmtIn/6apE6PN0ULKgywD9mmdxbmFl3OvD5AS5fW5zLbv/YHmcsBTjf/afDz3MaZTVCfAP9z6/Bw6ycv8EUBWJIn9zYcoAWWlW9+OzO3vkTy8H+RANLmdrpOuYWdZYEXpo+TlCJrW5EARb7fF+bWdqf3hhyZI1nWJQHgznErZhbjoEsWqi8dQNoE294aldzFurwSABL2XXMf9+H1VQGke9exw5P/AnA5Pv5ngMul7LOvO922iwACu8WkCwLCafvM4CeWPxfA8lNHcWZSoi8EwMAIciKX2Z4SWCMAa3snCZ/G4EA8D6CMLNFsGQhkkz/gQNEBbPCbWsxGUpYVu3z8IyNAknwJkfPMEhLyrdi5RTyUVACkw4GSFRNWJNEW+fgPGwHD8/JxnRuLabN4CGNRkAE23na2+VmEAUmrYymSGjMAYqH84YUIyzgzs3XC7gNgH36Vcc4zKY9o9fgPBXUAiHHwVboBHGLiX6Zcjp1f2wu4tvzZKo0ecPnDtQYDQvJXaBeNzce45Fp28ZQLrEZVuFqgBwOalArKXnW1UzlnSusQKJqKYNuz4tOnI6sZG4zanpemv+7ySU2jbA9h6uhcgpfy6G2PahirDZ6zvq6zDduMVFTKvzw8wgyEdelwY9in3XkEPs3osJuwRQ4qTkfzifndg9Gfc4pdsu82+tTnHZTBa2EAMrqr2t43pguc8tNm7JQVQ2S0ukj2d22dhXYP0/veWtwKrCkNoNimAN5+Xr/oLrxswKbVJjteWrX7eR63o4j9q0GxnaBdWgGA5VStpanIjQmEhV0/nVt5VOFUvix6awJhPcAaTEShgrG+iGyvb5a0Ndb1YGHFPEwoqAinoaykaID1o1pdPNu7XsnCKQ3R+hwWIIhGvORcJUBYXe3Xa3vq/mF/N9V13ugufMkfXn+KHsRD0B8AAAAASUVORK5CYII=" type="image/x-icon" />
8
8
 
9
9
  <script>
@@ -31,8 +31,8 @@
31
31
  <body>
32
32
  <div id="app"></div>
33
33
  <script>
34
- window.chartData = [{"label":"tsparticles.shape.emoji.js","isAsset":true,"statSize":3338,"parsedSize":7307,"gzipSize":2271,"groups":[{"label":"dist/browser","path":"./dist/browser","statSize":3296,"groups":[{"id":335,"label":"index.js + 1 modules (concatenated)","path":"./dist/browser/index.js + 1 modules (concatenated)","statSize":3296,"parsedSize":7307,"gzipSize":2271,"concatenated":true,"groups":[{"label":"dist/browser","path":"./dist/browser/index.js + 1 modules (concatenated)/dist/browser","statSize":3296,"groups":[{"id":null,"label":"index.js","path":"./dist/browser/index.js + 1 modules (concatenated)/dist/browser/index.js","statSize":189,"parsedSize":418,"gzipSize":130,"inaccurateSizes":true},{"id":null,"label":"EmojiDrawer.js","path":"./dist/browser/index.js + 1 modules (concatenated)/dist/browser/EmojiDrawer.js","statSize":3107,"parsedSize":6888,"gzipSize":2140,"inaccurateSizes":true}],"parsedSize":7307,"gzipSize":2271,"inaccurateSizes":true}]}],"parsedSize":7307,"gzipSize":2271},{"label":"engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles","path":"./engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles","statSize":42,"groups":[{"id":533,"label":"engine\",\"root\":\"window\"}","path":"./engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles/engine\",\"root\":\"window\"}","statSize":42}],"parsedSize":0,"gzipSize":0}],"isInitialByEntrypoint":{"tsparticles.shape.emoji":true}}];
35
- window.entrypoints = ["tsparticles.shape.emoji","tsparticles.shape.emoji.min"];
34
+ window.chartData = [];
35
+ window.entrypoints = ["tsparticles.shape.emoji.min"];
36
36
  window.defaultSizes = "parsed";
37
37
  </script>
38
38
  </body>