@tsparticles/shape-emoji 3.0.2 → 3.1.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.
Files changed (9) hide show
  1. package/browser/EmojiDrawer.js +49 -45
  2. package/cjs/EmojiDrawer.js +49 -45
  3. package/esm/EmojiDrawer.js +49 -45
  4. package/package.json +2 -2
  5. package/report.html +2 -2
  6. package/tsparticles.shape.emoji.js +56 -48
  7. package/tsparticles.shape.emoji.min.js +1 -1
  8. package/tsparticles.shape.emoji.min.js.LICENSE.txt +1 -1
  9. package/umd/EmojiDrawer.js +49 -45
package/browser/EmojiDrawer.js CHANGED
@@ -6,18 +6,21 @@ export class EmojiDrawer {
6
6
  this._emojiShapeDict = new Map();
7
7
  }
8
8
  destroy() {
9
- for (const [, emojiData] of this._emojiShapeDict) {
10
- emojiData instanceof ImageBitmap && emojiData?.close();
9
+ for (const [key, emojiData] of this._emojiShapeDict) {
10
+ if (emojiData instanceof ImageBitmap) {
11
+ emojiData?.close();
12
+ this._emojiShapeDict.delete(key);
13
+ }
11
14
  }
12
15
  }
13
16
  draw(data) {
14
- const { context, particle, radius, opacity } = data, emojiData = particle.emojiData;
17
+ const { context, particle, radius, opacity } = data, emojiData = particle.emojiData, double = 2, diameter = radius * double, previousAlpha = context.globalAlpha;
15
18
  if (!emojiData) {
16
19
  return;
17
20
  }
18
21
  context.globalAlpha = opacity;
19
- context.drawImage(emojiData, -radius, -radius, radius * 2, radius * 2);
20
- context.globalAlpha = 1;
22
+ context.drawImage(emojiData, -radius, -radius, diameter, diameter);
23
+ context.globalAlpha = previousAlpha;
21
24
  }
22
25
  async init(container) {
23
26
  const options = container.actualOptions;
@@ -27,7 +30,9 @@ export class EmojiDrawer {
27
30
  .find((t) => !!t);
28
31
  if (shapeOptions) {
29
32
  executeOnSingleOrMultiple(shapeOptions, (shape) => {
30
- shape.font && promises.push(loadFont(shape.font));
33
+ if (shape.font) {
34
+ promises.push(loadFont(shape.font));
35
+ }
31
36
  });
32
37
  }
33
38
  await Promise.all(promises);
@@ -37,49 +42,48 @@ export class EmojiDrawer {
37
42
  delete particle.emojiData;
38
43
  }
39
44
  particleInit(container, particle) {
40
- if (!particle.emojiData) {
41
- const shapeData = particle.shapeData;
42
- if (!shapeData?.value) {
43
- return;
44
- }
45
- const emoji = itemFromSingleOrMultiple(shapeData.value, particle.randomIndexData), font = shapeData.font ?? defaultFont;
46
- if (!emoji) {
45
+ const double = 2, shapeData = particle.shapeData;
46
+ if (!shapeData?.value) {
47
+ return;
48
+ }
49
+ const emoji = itemFromSingleOrMultiple(shapeData.value, particle.randomIndexData), font = shapeData.font ?? defaultFont;
50
+ if (!emoji) {
51
+ return;
52
+ }
53
+ const key = `${emoji}_${font}`, existingData = this._emojiShapeDict.get(key);
54
+ if (existingData) {
55
+ particle.emojiData = existingData;
56
+ return;
57
+ }
58
+ const canvasSize = getRangeMax(particle.size.value) * double;
59
+ let emojiData;
60
+ const maxSize = getRangeMax(particle.size.value);
61
+ if (typeof OffscreenCanvas !== "undefined") {
62
+ const canvas = new OffscreenCanvas(canvasSize, canvasSize), context = canvas.getContext("2d");
63
+ if (!context) {
47
64
  return;
48
65
  }
49
- const key = `${emoji}_${font}`, existingData = this._emojiShapeDict.get(key);
50
- if (existingData) {
51
- particle.emojiData = existingData;
66
+ context.font = `400 ${maxSize * double}px ${font}`;
67
+ context.textBaseline = "middle";
68
+ context.textAlign = "center";
69
+ context.fillText(emoji, maxSize, maxSize);
70
+ emojiData = canvas.transferToImageBitmap();
71
+ }
72
+ else {
73
+ const canvas = document.createElement("canvas");
74
+ canvas.width = canvasSize;
75
+ canvas.height = canvasSize;
76
+ const context = canvas.getContext("2d");
77
+ if (!context) {
52
78
  return;
53
79
  }
54
- const canvasSize = getRangeMax(particle.size.value) * 2;
55
- let emojiData;
56
- if (typeof OffscreenCanvas !== "undefined") {
57
- const canvas = new OffscreenCanvas(canvasSize, canvasSize), context = canvas.getContext("2d");
58
- if (!context) {
59
- return;
60
- }
61
- context.font = `400 ${getRangeMax(particle.size.value) * 2}px ${font}`;
62
- context.textBaseline = "middle";
63
- context.textAlign = "center";
64
- context.fillText(emoji, getRangeMax(particle.size.value), getRangeMax(particle.size.value));
65
- emojiData = canvas.transferToImageBitmap();
66
- }
67
- else {
68
- const canvas = document.createElement("canvas");
69
- canvas.width = canvasSize;
70
- canvas.height = canvasSize;
71
- const context = canvas.getContext("2d");
72
- if (!context) {
73
- return;
74
- }
75
- context.font = `400 ${getRangeMax(particle.size.value) * 2}px ${font}`;
76
- context.textBaseline = "middle";
77
- context.textAlign = "center";
78
- context.fillText(emoji, getRangeMax(particle.size.value), getRangeMax(particle.size.value));
79
- emojiData = canvas;
80
- }
81
- this._emojiShapeDict.set(key, emojiData);
82
- particle.emojiData = emojiData;
80
+ context.font = `400 ${maxSize * double}px ${font}`;
81
+ context.textBaseline = "middle";
82
+ context.textAlign = "center";
83
+ context.fillText(emoji, maxSize, maxSize);
84
+ emojiData = canvas;
83
85
  }
86
+ this._emojiShapeDict.set(key, emojiData);
87
+ particle.emojiData = emojiData;
84
88
  }
85
89
  }
package/cjs/EmojiDrawer.js CHANGED
@@ -9,18 +9,21 @@ class EmojiDrawer {
9
9
  this._emojiShapeDict = new Map();
10
10
  }
11
11
  destroy() {
12
- for (const [, emojiData] of this._emojiShapeDict) {
13
- emojiData instanceof ImageBitmap && emojiData?.close();
12
+ for (const [key, emojiData] of this._emojiShapeDict) {
13
+ if (emojiData instanceof ImageBitmap) {
14
+ emojiData?.close();
15
+ this._emojiShapeDict.delete(key);
16
+ }
14
17
  }
15
18
  }
16
19
  draw(data) {
17
- const { context, particle, radius, opacity } = data, emojiData = particle.emojiData;
20
+ const { context, particle, radius, opacity } = data, emojiData = particle.emojiData, double = 2, diameter = radius * double, previousAlpha = context.globalAlpha;
18
21
  if (!emojiData) {
19
22
  return;
20
23
  }
21
24
  context.globalAlpha = opacity;
22
- context.drawImage(emojiData, -radius, -radius, radius * 2, radius * 2);
23
- context.globalAlpha = 1;
25
+ context.drawImage(emojiData, -radius, -radius, diameter, diameter);
26
+ context.globalAlpha = previousAlpha;
24
27
  }
25
28
  async init(container) {
26
29
  const options = container.actualOptions;
@@ -30,7 +33,9 @@ class EmojiDrawer {
30
33
  .find((t) => !!t);
31
34
  if (shapeOptions) {
32
35
  (0, engine_1.executeOnSingleOrMultiple)(shapeOptions, (shape) => {
33
- shape.font && promises.push((0, engine_1.loadFont)(shape.font));
36
+ if (shape.font) {
37
+ promises.push((0, engine_1.loadFont)(shape.font));
38
+ }
34
39
  });
35
40
  }
36
41
  await Promise.all(promises);
@@ -40,50 +45,49 @@ class EmojiDrawer {
40
45
  delete particle.emojiData;
41
46
  }
42
47
  particleInit(container, particle) {
43
- if (!particle.emojiData) {
44
- const shapeData = particle.shapeData;
45
- if (!shapeData?.value) {
46
- return;
47
- }
48
- const emoji = (0, engine_1.itemFromSingleOrMultiple)(shapeData.value, particle.randomIndexData), font = shapeData.font ?? defaultFont;
49
- if (!emoji) {
48
+ const double = 2, shapeData = particle.shapeData;
49
+ if (!shapeData?.value) {
50
+ return;
51
+ }
52
+ const emoji = (0, engine_1.itemFromSingleOrMultiple)(shapeData.value, particle.randomIndexData), font = shapeData.font ?? defaultFont;
53
+ if (!emoji) {
54
+ return;
55
+ }
56
+ const key = `${emoji}_${font}`, existingData = this._emojiShapeDict.get(key);
57
+ if (existingData) {
58
+ particle.emojiData = existingData;
59
+ return;
60
+ }
61
+ const canvasSize = (0, engine_1.getRangeMax)(particle.size.value) * double;
62
+ let emojiData;
63
+ const maxSize = (0, engine_1.getRangeMax)(particle.size.value);
64
+ if (typeof OffscreenCanvas !== "undefined") {
65
+ const canvas = new OffscreenCanvas(canvasSize, canvasSize), context = canvas.getContext("2d");
66
+ if (!context) {
50
67
  return;
51
68
  }
52
- const key = `${emoji}_${font}`, existingData = this._emojiShapeDict.get(key);
53
- if (existingData) {
54
- particle.emojiData = existingData;
69
+ context.font = `400 ${maxSize * double}px ${font}`;
70
+ context.textBaseline = "middle";
71
+ context.textAlign = "center";
72
+ context.fillText(emoji, maxSize, maxSize);
73
+ emojiData = canvas.transferToImageBitmap();
74
+ }
75
+ else {
76
+ const canvas = document.createElement("canvas");
77
+ canvas.width = canvasSize;
78
+ canvas.height = canvasSize;
79
+ const context = canvas.getContext("2d");
80
+ if (!context) {
55
81
  return;
56
82
  }
57
- const canvasSize = (0, engine_1.getRangeMax)(particle.size.value) * 2;
58
- let emojiData;
59
- if (typeof OffscreenCanvas !== "undefined") {
60
- const canvas = new OffscreenCanvas(canvasSize, canvasSize), context = canvas.getContext("2d");
61
- if (!context) {
62
- return;
63
- }
64
- context.font = `400 ${(0, engine_1.getRangeMax)(particle.size.value) * 2}px ${font}`;
65
- context.textBaseline = "middle";
66
- context.textAlign = "center";
67
- context.fillText(emoji, (0, engine_1.getRangeMax)(particle.size.value), (0, engine_1.getRangeMax)(particle.size.value));
68
- emojiData = canvas.transferToImageBitmap();
69
- }
70
- else {
71
- const canvas = document.createElement("canvas");
72
- canvas.width = canvasSize;
73
- canvas.height = canvasSize;
74
- const context = canvas.getContext("2d");
75
- if (!context) {
76
- return;
77
- }
78
- context.font = `400 ${(0, engine_1.getRangeMax)(particle.size.value) * 2}px ${font}`;
79
- context.textBaseline = "middle";
80
- context.textAlign = "center";
81
- context.fillText(emoji, (0, engine_1.getRangeMax)(particle.size.value), (0, engine_1.getRangeMax)(particle.size.value));
82
- emojiData = canvas;
83
- }
84
- this._emojiShapeDict.set(key, emojiData);
85
- particle.emojiData = emojiData;
83
+ context.font = `400 ${maxSize * double}px ${font}`;
84
+ context.textBaseline = "middle";
85
+ context.textAlign = "center";
86
+ context.fillText(emoji, maxSize, maxSize);
87
+ emojiData = canvas;
86
88
  }
89
+ this._emojiShapeDict.set(key, emojiData);
90
+ particle.emojiData = emojiData;
87
91
  }
88
92
  }
89
93
  exports.EmojiDrawer = EmojiDrawer;
package/esm/EmojiDrawer.js CHANGED
@@ -6,18 +6,21 @@ export class EmojiDrawer {
6
6
  this._emojiShapeDict = new Map();
7
7
  }
8
8
  destroy() {
9
- for (const [, emojiData] of this._emojiShapeDict) {
10
- emojiData instanceof ImageBitmap && emojiData?.close();
9
+ for (const [key, emojiData] of this._emojiShapeDict) {
10
+ if (emojiData instanceof ImageBitmap) {
11
+ emojiData?.close();
12
+ this._emojiShapeDict.delete(key);
13
+ }
11
14
  }
12
15
  }
13
16
  draw(data) {
14
- const { context, particle, radius, opacity } = data, emojiData = particle.emojiData;
17
+ const { context, particle, radius, opacity } = data, emojiData = particle.emojiData, double = 2, diameter = radius * double, previousAlpha = context.globalAlpha;
15
18
  if (!emojiData) {
16
19
  return;
17
20
  }
18
21
  context.globalAlpha = opacity;
19
- context.drawImage(emojiData, -radius, -radius, radius * 2, radius * 2);
20
- context.globalAlpha = 1;
22
+ context.drawImage(emojiData, -radius, -radius, diameter, diameter);
23
+ context.globalAlpha = previousAlpha;
21
24
  }
22
25
  async init(container) {
23
26
  const options = container.actualOptions;
@@ -27,7 +30,9 @@ export class EmojiDrawer {
27
30
  .find((t) => !!t);
28
31
  if (shapeOptions) {
29
32
  executeOnSingleOrMultiple(shapeOptions, (shape) => {
30
- shape.font && promises.push(loadFont(shape.font));
33
+ if (shape.font) {
34
+ promises.push(loadFont(shape.font));
35
+ }
31
36
  });
32
37
  }
33
38
  await Promise.all(promises);
@@ -37,49 +42,48 @@ export class EmojiDrawer {
37
42
  delete particle.emojiData;
38
43
  }
39
44
  particleInit(container, particle) {
40
- if (!particle.emojiData) {
41
- const shapeData = particle.shapeData;
42
- if (!shapeData?.value) {
43
- return;
44
- }
45
- const emoji = itemFromSingleOrMultiple(shapeData.value, particle.randomIndexData), font = shapeData.font ?? defaultFont;
46
- if (!emoji) {
45
+ const double = 2, shapeData = particle.shapeData;
46
+ if (!shapeData?.value) {
47
+ return;
48
+ }
49
+ const emoji = itemFromSingleOrMultiple(shapeData.value, particle.randomIndexData), font = shapeData.font ?? defaultFont;
50
+ if (!emoji) {
51
+ return;
52
+ }
53
+ const key = `${emoji}_${font}`, existingData = this._emojiShapeDict.get(key);
54
+ if (existingData) {
55
+ particle.emojiData = existingData;
56
+ return;
57
+ }
58
+ const canvasSize = getRangeMax(particle.size.value) * double;
59
+ let emojiData;
60
+ const maxSize = getRangeMax(particle.size.value);
61
+ if (typeof OffscreenCanvas !== "undefined") {
62
+ const canvas = new OffscreenCanvas(canvasSize, canvasSize), context = canvas.getContext("2d");
63
+ if (!context) {
47
64
  return;
48
65
  }
49
- const key = `${emoji}_${font}`, existingData = this._emojiShapeDict.get(key);
50
- if (existingData) {
51
- particle.emojiData = existingData;
66
+ context.font = `400 ${maxSize * double}px ${font}`;
67
+ context.textBaseline = "middle";
68
+ context.textAlign = "center";
69
+ context.fillText(emoji, maxSize, maxSize);
70
+ emojiData = canvas.transferToImageBitmap();
71
+ }
72
+ else {
73
+ const canvas = document.createElement("canvas");
74
+ canvas.width = canvasSize;
75
+ canvas.height = canvasSize;
76
+ const context = canvas.getContext("2d");
77
+ if (!context) {
52
78
  return;
53
79
  }
54
- const canvasSize = getRangeMax(particle.size.value) * 2;
55
- let emojiData;
56
- if (typeof OffscreenCanvas !== "undefined") {
57
- const canvas = new OffscreenCanvas(canvasSize, canvasSize), context = canvas.getContext("2d");
58
- if (!context) {
59
- return;
60
- }
61
- context.font = `400 ${getRangeMax(particle.size.value) * 2}px ${font}`;
62
- context.textBaseline = "middle";
63
- context.textAlign = "center";
64
- context.fillText(emoji, getRangeMax(particle.size.value), getRangeMax(particle.size.value));
65
- emojiData = canvas.transferToImageBitmap();
66
- }
67
- else {
68
- const canvas = document.createElement("canvas");
69
- canvas.width = canvasSize;
70
- canvas.height = canvasSize;
71
- const context = canvas.getContext("2d");
72
- if (!context) {
73
- return;
74
- }
75
- context.font = `400 ${getRangeMax(particle.size.value) * 2}px ${font}`;
76
- context.textBaseline = "middle";
77
- context.textAlign = "center";
78
- context.fillText(emoji, getRangeMax(particle.size.value), getRangeMax(particle.size.value));
79
- emojiData = canvas;
80
- }
81
- this._emojiShapeDict.set(key, emojiData);
82
- particle.emojiData = emojiData;
80
+ context.font = `400 ${maxSize * double}px ${font}`;
81
+ context.textBaseline = "middle";
82
+ context.textAlign = "center";
83
+ context.fillText(emoji, maxSize, maxSize);
84
+ emojiData = canvas;
83
85
  }
86
+ this._emojiShapeDict.set(key, emojiData);
87
+ particle.emojiData = emojiData;
84
88
  }
85
89
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tsparticles/shape-emoji",
3
- "version": "3.0.2",
3
+ "version": "3.1.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.2"
62
+ "@tsparticles/engine": "^3.1.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 [6 Dec 2023 at 17:44]</title>
6
+ <title>@tsparticles/shape-emoji [13 Jan 2024 at 23:06]</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,7 +31,7 @@
31
31
  <body>
32
32
  <div id="app"></div>
33
33
  <script>
34
- window.chartData = [{"label":"tsparticles.shape.emoji.js","isAsset":true,"statSize":3420,"parsedSize":7389,"gzipSize":2282,"groups":[{"label":"dist/browser","path":"./dist/browser","statSize":3378,"groups":[{"id":335,"label":"index.js + 1 modules (concatenated)","path":"./dist/browser/index.js + 1 modules (concatenated)","statSize":3378,"parsedSize":7389,"gzipSize":2282,"concatenated":true,"groups":[{"label":"dist/browser","path":"./dist/browser/index.js + 1 modules (concatenated)/dist/browser","statSize":3378,"groups":[{"id":null,"label":"index.js","path":"./dist/browser/index.js + 1 modules (concatenated)/dist/browser/index.js","statSize":189,"parsedSize":413,"gzipSize":127,"inaccurateSizes":true},{"id":null,"label":"EmojiDrawer.js","path":"./dist/browser/index.js + 1 modules (concatenated)/dist/browser/EmojiDrawer.js","statSize":3189,"parsedSize":6975,"gzipSize":2154,"inaccurateSizes":true}],"parsedSize":7389,"gzipSize":2282,"inaccurateSizes":true}]}],"parsedSize":7389,"gzipSize":2282},{"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}}];
34
+ window.chartData = [{"label":"tsparticles.shape.emoji.js","isAsset":true,"statSize":3428,"parsedSize":7277,"gzipSize":2327,"groups":[{"label":"dist/browser","path":"./dist/browser","statSize":3386,"groups":[{"id":816,"label":"index.js + 1 modules (concatenated)","path":"./dist/browser/index.js + 1 modules (concatenated)","statSize":3386,"parsedSize":7277,"gzipSize":2327,"concatenated":true,"groups":[{"label":"dist/browser","path":"./dist/browser/index.js + 1 modules (concatenated)/dist/browser","statSize":3386,"groups":[{"id":null,"label":"index.js","path":"./dist/browser/index.js + 1 modules (concatenated)/dist/browser/index.js","statSize":189,"parsedSize":406,"gzipSize":129,"inaccurateSizes":true},{"id":null,"label":"EmojiDrawer.js","path":"./dist/browser/index.js + 1 modules (concatenated)/dist/browser/EmojiDrawer.js","statSize":3197,"parsedSize":6870,"gzipSize":2197,"inaccurateSizes":true}],"parsedSize":7277,"gzipSize":2327,"inaccurateSizes":true}]}],"parsedSize":7277,"gzipSize":2327},{"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
35
  window.entrypoints = ["tsparticles.shape.emoji","tsparticles.shape.emoji.min"];
36
36
  window.defaultSizes = "parsed";
37
37
  </script>
package/tsparticles.shape.emoji.js CHANGED
@@ -4,7 +4,7 @@
4
4
  * Demo / Generator : https://particles.js.org/
5
5
  * GitHub : https://www.github.com/matteobruni/tsparticles
6
6
  * How to use? : Check the GitHub README
7
- * v3.0.2
7
+ * v3.1.0
8
8
  */
9
9
  (function webpackUniversalModuleDefinition(root, factory) {
10
10
  if(typeof exports === 'object' && typeof module === 'object')
@@ -105,8 +105,11 @@ class EmojiDrawer {
105
105
  this._emojiShapeDict = new Map();
106
106
  }
107
107
  destroy() {
108
- for (const [, emojiData] of this._emojiShapeDict) {
109
- emojiData instanceof ImageBitmap && emojiData?.close();
108
+ for (const [key, emojiData] of this._emojiShapeDict) {
109
+ if (emojiData instanceof ImageBitmap) {
110
+ emojiData?.close();
111
+ this._emojiShapeDict.delete(key);
112
+ }
110
113
  }
111
114
  }
112
115
  draw(data) {
@@ -116,13 +119,16 @@ class EmojiDrawer {
116
119
  radius,
117
120
  opacity
118
121
  } = data,
119
- emojiData = particle.emojiData;
122
+ emojiData = particle.emojiData,
123
+ double = 2,
124
+ diameter = radius * double,
125
+ previousAlpha = context.globalAlpha;
120
126
  if (!emojiData) {
121
127
  return;
122
128
  }
123
129
  context.globalAlpha = opacity;
124
- context.drawImage(emojiData, -radius, -radius, radius * 2, radius * 2);
125
- context.globalAlpha = 1;
130
+ context.drawImage(emojiData, -radius, -radius, diameter, diameter);
131
+ context.globalAlpha = previousAlpha;
126
132
  }
127
133
  async init(container) {
128
134
  const options = container.actualOptions;
@@ -131,7 +137,9 @@ class EmojiDrawer {
131
137
  shapeOptions = validTypes.map(t => options.particles.shape.options[t]).find(t => !!t);
132
138
  if (shapeOptions) {
133
139
  (0,engine_root_window_.executeOnSingleOrMultiple)(shapeOptions, shape => {
134
- shape.font && promises.push((0,engine_root_window_.loadFont)(shape.font));
140
+ if (shape.font) {
141
+ promises.push((0,engine_root_window_.loadFont)(shape.font));
142
+ }
135
143
  });
136
144
  }
137
145
  await Promise.all(promises);
@@ -141,52 +149,52 @@ class EmojiDrawer {
141
149
  delete particle.emojiData;
142
150
  }
143
151
  particleInit(container, particle) {
144
- if (!particle.emojiData) {
145
- const shapeData = particle.shapeData;
146
- if (!shapeData?.value) {
147
- return;
148
- }
149
- const emoji = (0,engine_root_window_.itemFromSingleOrMultiple)(shapeData.value, particle.randomIndexData),
150
- font = shapeData.font ?? defaultFont;
151
- if (!emoji) {
152
+ const double = 2,
153
+ shapeData = particle.shapeData;
154
+ if (!shapeData?.value) {
155
+ return;
156
+ }
157
+ const emoji = (0,engine_root_window_.itemFromSingleOrMultiple)(shapeData.value, particle.randomIndexData),
158
+ font = shapeData.font ?? defaultFont;
159
+ if (!emoji) {
160
+ return;
161
+ }
162
+ const key = `${emoji}_${font}`,
163
+ existingData = this._emojiShapeDict.get(key);
164
+ if (existingData) {
165
+ particle.emojiData = existingData;
166
+ return;
167
+ }
168
+ const canvasSize = (0,engine_root_window_.getRangeMax)(particle.size.value) * double;
169
+ let emojiData;
170
+ const maxSize = (0,engine_root_window_.getRangeMax)(particle.size.value);
171
+ if (typeof OffscreenCanvas !== "undefined") {
172
+ const canvas = new OffscreenCanvas(canvasSize, canvasSize),
173
+ context = canvas.getContext("2d");
174
+ if (!context) {
152
175
  return;
153
176
  }
154
- const key = `${emoji}_${font}`,
155
- existingData = this._emojiShapeDict.get(key);
156
- if (existingData) {
157
- particle.emojiData = existingData;
177
+ context.font = `400 ${maxSize * double}px ${font}`;
178
+ context.textBaseline = "middle";
179
+ context.textAlign = "center";
180
+ context.fillText(emoji, maxSize, maxSize);
181
+ emojiData = canvas.transferToImageBitmap();
182
+ } else {
183
+ const canvas = document.createElement("canvas");
184
+ canvas.width = canvasSize;
185
+ canvas.height = canvasSize;
186
+ const context = canvas.getContext("2d");
187
+ if (!context) {
158
188
  return;
159
189
  }
160
- const canvasSize = (0,engine_root_window_.getRangeMax)(particle.size.value) * 2;
161
- let emojiData;
162
- if (typeof OffscreenCanvas !== "undefined") {
163
- const canvas = new OffscreenCanvas(canvasSize, canvasSize),
164
- context = canvas.getContext("2d");
165
- if (!context) {
166
- return;
167
- }
168
- context.font = `400 ${(0,engine_root_window_.getRangeMax)(particle.size.value) * 2}px ${font}`;
169
- context.textBaseline = "middle";
170
- context.textAlign = "center";
171
- context.fillText(emoji, (0,engine_root_window_.getRangeMax)(particle.size.value), (0,engine_root_window_.getRangeMax)(particle.size.value));
172
- emojiData = canvas.transferToImageBitmap();
173
- } else {
174
- const canvas = document.createElement("canvas");
175
- canvas.width = canvasSize;
176
- canvas.height = canvasSize;
177
- const context = canvas.getContext("2d");
178
- if (!context) {
179
- return;
180
- }
181
- context.font = `400 ${(0,engine_root_window_.getRangeMax)(particle.size.value) * 2}px ${font}`;
182
- context.textBaseline = "middle";
183
- context.textAlign = "center";
184
- context.fillText(emoji, (0,engine_root_window_.getRangeMax)(particle.size.value), (0,engine_root_window_.getRangeMax)(particle.size.value));
185
- emojiData = canvas;
186
- }
187
- this._emojiShapeDict.set(key, emojiData);
188
- particle.emojiData = emojiData;
190
+ context.font = `400 ${maxSize * double}px ${font}`;
191
+ context.textBaseline = "middle";
192
+ context.textAlign = "center";
193
+ context.fillText(emoji, maxSize, maxSize);
194
+ emojiData = canvas;
189
195
  }
196
+ this._emojiShapeDict.set(key, emojiData);
197
+ particle.emojiData = emojiData;
190
198
  }
191
199
  }
192
200
  ;// CONCATENATED MODULE: ./dist/browser/index.js
package/tsparticles.shape.emoji.min.js CHANGED
@@ -1,2 +1,2 @@
1
1
  /*! For license information please see tsparticles.shape.emoji.min.js.LICENSE.txt */
2
- !function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],t);else{var o="object"==typeof exports?t(require("@tsparticles/engine")):t(e.window);for(var a in o)("object"==typeof exports?exports:e)[a]=o[a]}}(this,(e=>(()=>{"use strict";var t={533:t=>{t.exports=e}},o={};function a(e){var i=o[e];if(void 0!==i)return i.exports;var n=o[e]={exports:{}};return t[e](n,n.exports,a),n.exports}a.d=(e,t)=>{for(var o in t)a.o(t,o)&&!a.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},a.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),a.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var i={};return(()=>{a.r(i),a.d(i,{loadEmojiShape:()=>r});var e=a(533);const t=["emoji"],o='"Twemoji Mozilla", Apple Color Emoji, "Segoe UI Emoji", "Noto Color Emoji", "EmojiOne Color"';class n{constructor(){this._emojiShapeDict=new Map}destroy(){for(const[,e]of this._emojiShapeDict)e instanceof ImageBitmap&&e?.close()}draw(e){const{context:t,particle:o,radius:a,opacity:i}=e,n=o.emojiData;n&&(t.globalAlpha=i,t.drawImage(n,-a,-a,2*a,2*a),t.globalAlpha=1)}async init(a){const i=a.actualOptions;if(t.find((t=>(0,e.isInArray)(t,i.particles.shape.type)))){const a=[(0,e.loadFont)(o)],n=t.map((e=>i.particles.shape.options[e])).find((e=>!!e));n&&(0,e.executeOnSingleOrMultiple)(n,(t=>{t.font&&a.push((0,e.loadFont)(t.font))})),await Promise.all(a)}}particleDestroy(e){delete e.emojiData}particleInit(t,a){if(!a.emojiData){const t=a.shapeData;if(!t?.value)return;const i=(0,e.itemFromSingleOrMultiple)(t.value,a.randomIndexData),n=t.font??o;if(!i)return;const r=`${i}_${n}`,s=this._emojiShapeDict.get(r);if(s)return void(a.emojiData=s);const l=2*(0,e.getRangeMax)(a.size.value);let p;if("undefined"!=typeof OffscreenCanvas){const t=new OffscreenCanvas(l,l),o=t.getContext("2d");if(!o)return;o.font=`400 ${2*(0,e.getRangeMax)(a.size.value)}px ${n}`,o.textBaseline="middle",o.textAlign="center",o.fillText(i,(0,e.getRangeMax)(a.size.value),(0,e.getRangeMax)(a.size.value)),p=t.transferToImageBitmap()}else{const t=document.createElement("canvas");t.width=l,t.height=l;const o=t.getContext("2d");if(!o)return;o.font=`400 ${2*(0,e.getRangeMax)(a.size.value)}px ${n}`,o.textBaseline="middle",o.textAlign="center",o.fillText(i,(0,e.getRangeMax)(a.size.value),(0,e.getRangeMax)(a.size.value)),p=t}this._emojiShapeDict.set(r,p),a.emojiData=p}}}async function r(e,o=!0){await e.addShape(t,new n,o)}})(),i})()));
2
+ !function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],t);else{var o="object"==typeof exports?t(require("@tsparticles/engine")):t(e.window);for(var i in o)("object"==typeof exports?exports:e)[i]=o[i]}}(this,(e=>(()=>{"use strict";var t={533:t=>{t.exports=e}},o={};function i(e){var a=o[e];if(void 0!==a)return a.exports;var n=o[e]={exports:{}};return t[e](n,n.exports,i),n.exports}i.d=(e,t)=>{for(var o in t)i.o(t,o)&&!i.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a={};return(()=>{i.r(a),i.d(a,{loadEmojiShape:()=>r});var e=i(533);const t=["emoji"],o='"Twemoji Mozilla", Apple Color Emoji, "Segoe UI Emoji", "Noto Color Emoji", "EmojiOne Color"';class n{constructor(){this._emojiShapeDict=new Map}destroy(){for(const[e,t]of this._emojiShapeDict)t instanceof ImageBitmap&&(t?.close(),this._emojiShapeDict.delete(e))}draw(e){const{context:t,particle:o,radius:i,opacity:a}=e,n=o.emojiData,r=2*i,s=t.globalAlpha;n&&(t.globalAlpha=a,t.drawImage(n,-i,-i,r,r),t.globalAlpha=s)}async init(i){const a=i.actualOptions;if(t.find((t=>(0,e.isInArray)(t,a.particles.shape.type)))){const i=[(0,e.loadFont)(o)],n=t.map((e=>a.particles.shape.options[e])).find((e=>!!e));n&&(0,e.executeOnSingleOrMultiple)(n,(t=>{t.font&&i.push((0,e.loadFont)(t.font))})),await Promise.all(i)}}particleDestroy(e){delete e.emojiData}particleInit(t,i){const a=i.shapeData;if(!a?.value)return;const n=(0,e.itemFromSingleOrMultiple)(a.value,i.randomIndexData),r=a.font??o;if(!n)return;const s=`${n}_${r}`,l=this._emojiShapeDict.get(s);if(l)return void(i.emojiData=l);const p=2*(0,e.getRangeMax)(i.size.value);let c;const f=(0,e.getRangeMax)(i.size.value);if("undefined"!=typeof OffscreenCanvas){const e=new OffscreenCanvas(p,p),t=e.getContext("2d");if(!t)return;t.font=`400 ${2*f}px ${r}`,t.textBaseline="middle",t.textAlign="center",t.fillText(n,f,f),c=e.transferToImageBitmap()}else{const e=document.createElement("canvas");e.width=p,e.height=p;const t=e.getContext("2d");if(!t)return;t.font=`400 ${2*f}px ${r}`,t.textBaseline="middle",t.textAlign="center",t.fillText(n,f,f),c=e}this._emojiShapeDict.set(s,c),i.emojiData=c}}async function r(e,o=!0){await e.addShape(t,new n,o)}})(),a})()));
package/tsparticles.shape.emoji.min.js.LICENSE.txt CHANGED
@@ -1 +1 @@
1
- /*! tsParticles Emoji Shape v3.0.2 by Matteo Bruni */
1
+ /*! tsParticles Emoji Shape v3.1.0 by Matteo Bruni */
package/umd/EmojiDrawer.js CHANGED
@@ -18,18 +18,21 @@
18
18
  this._emojiShapeDict = new Map();
19
19
  }
20
20
  destroy() {
21
- for (const [, emojiData] of this._emojiShapeDict) {
22
- emojiData instanceof ImageBitmap && emojiData?.close();
21
+ for (const [key, emojiData] of this._emojiShapeDict) {
22
+ if (emojiData instanceof ImageBitmap) {
23
+ emojiData?.close();
24
+ this._emojiShapeDict.delete(key);
25
+ }
23
26
  }
24
27
  }
25
28
  draw(data) {
26
- const { context, particle, radius, opacity } = data, emojiData = particle.emojiData;
29
+ const { context, particle, radius, opacity } = data, emojiData = particle.emojiData, double = 2, diameter = radius * double, previousAlpha = context.globalAlpha;
27
30
  if (!emojiData) {
28
31
  return;
29
32
  }
30
33
  context.globalAlpha = opacity;
31
- context.drawImage(emojiData, -radius, -radius, radius * 2, radius * 2);
32
- context.globalAlpha = 1;
34
+ context.drawImage(emojiData, -radius, -radius, diameter, diameter);
35
+ context.globalAlpha = previousAlpha;
33
36
  }
34
37
  async init(container) {
35
38
  const options = container.actualOptions;
@@ -39,7 +42,9 @@
39
42
  .find((t) => !!t);
40
43
  if (shapeOptions) {
41
44
  (0, engine_1.executeOnSingleOrMultiple)(shapeOptions, (shape) => {
42
- shape.font && promises.push((0, engine_1.loadFont)(shape.font));
45
+ if (shape.font) {
46
+ promises.push((0, engine_1.loadFont)(shape.font));
47
+ }
43
48
  });
44
49
  }
45
50
  await Promise.all(promises);
@@ -49,50 +54,49 @@
49
54
  delete particle.emojiData;
50
55
  }
51
56
  particleInit(container, particle) {
52
- if (!particle.emojiData) {
53
- const shapeData = particle.shapeData;
54
- if (!shapeData?.value) {
55
- return;
56
- }
57
- const emoji = (0, engine_1.itemFromSingleOrMultiple)(shapeData.value, particle.randomIndexData), font = shapeData.font ?? defaultFont;
58
- if (!emoji) {
57
+ const double = 2, shapeData = particle.shapeData;
58
+ if (!shapeData?.value) {
59
+ return;
60
+ }
61
+ const emoji = (0, engine_1.itemFromSingleOrMultiple)(shapeData.value, particle.randomIndexData), font = shapeData.font ?? defaultFont;
62
+ if (!emoji) {
63
+ return;
64
+ }
65
+ const key = `${emoji}_${font}`, existingData = this._emojiShapeDict.get(key);
66
+ if (existingData) {
67
+ particle.emojiData = existingData;
68
+ return;
69
+ }
70
+ const canvasSize = (0, engine_1.getRangeMax)(particle.size.value) * double;
71
+ let emojiData;
72
+ const maxSize = (0, engine_1.getRangeMax)(particle.size.value);
73
+ if (typeof OffscreenCanvas !== "undefined") {
74
+ const canvas = new OffscreenCanvas(canvasSize, canvasSize), context = canvas.getContext("2d");
75
+ if (!context) {
59
76
  return;
60
77
  }
61
- const key = `${emoji}_${font}`, existingData = this._emojiShapeDict.get(key);
62
- if (existingData) {
63
- particle.emojiData = existingData;
78
+ context.font = `400 ${maxSize * double}px ${font}`;
79
+ context.textBaseline = "middle";
80
+ context.textAlign = "center";
81
+ context.fillText(emoji, maxSize, maxSize);
82
+ emojiData = canvas.transferToImageBitmap();
83
+ }
84
+ else {
85
+ const canvas = document.createElement("canvas");
86
+ canvas.width = canvasSize;
87
+ canvas.height = canvasSize;
88
+ const context = canvas.getContext("2d");
89
+ if (!context) {
64
90
  return;
65
91
  }
66
- const canvasSize = (0, engine_1.getRangeMax)(particle.size.value) * 2;
67
- let emojiData;
68
- if (typeof OffscreenCanvas !== "undefined") {
69
- const canvas = new OffscreenCanvas(canvasSize, canvasSize), context = canvas.getContext("2d");
70
- if (!context) {
71
- return;
72
- }
73
- context.font = `400 ${(0, engine_1.getRangeMax)(particle.size.value) * 2}px ${font}`;
74
- context.textBaseline = "middle";
75
- context.textAlign = "center";
76
- context.fillText(emoji, (0, engine_1.getRangeMax)(particle.size.value), (0, engine_1.getRangeMax)(particle.size.value));
77
- emojiData = canvas.transferToImageBitmap();
78
- }
79
- else {
80
- const canvas = document.createElement("canvas");
81
- canvas.width = canvasSize;
82
- canvas.height = canvasSize;
83
- const context = canvas.getContext("2d");
84
- if (!context) {
85
- return;
86
- }
87
- context.font = `400 ${(0, engine_1.getRangeMax)(particle.size.value) * 2}px ${font}`;
88
- context.textBaseline = "middle";
89
- context.textAlign = "center";
90
- context.fillText(emoji, (0, engine_1.getRangeMax)(particle.size.value), (0, engine_1.getRangeMax)(particle.size.value));
91
- emojiData = canvas;
92
- }
93
- this._emojiShapeDict.set(key, emojiData);
94
- particle.emojiData = emojiData;
92
+ context.font = `400 ${maxSize * double}px ${font}`;
93
+ context.textBaseline = "middle";
94
+ context.textAlign = "center";
95
+ context.fillText(emoji, maxSize, maxSize);
96
+ emojiData = canvas;
95
97
  }
98
+ this._emojiShapeDict.set(key, emojiData);
99
+ particle.emojiData = emojiData;
96
100
  }
97
101
  }
98
102
  exports.EmojiDrawer = EmojiDrawer;