@tsparticles/shape-emoji 3.0.3 → 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.
- package/browser/EmojiDrawer.js +17 -12
- package/cjs/EmojiDrawer.js +17 -12
- package/esm/EmojiDrawer.js +17 -12
- package/package.json +2 -2
- package/report.html +2 -2
- package/tsparticles.shape.emoji.js +22 -13
- package/tsparticles.shape.emoji.min.js +1 -1
- package/tsparticles.shape.emoji.min.js.LICENSE.txt +1 -1
- package/umd/EmojiDrawer.js +17 -12
package/browser/EmojiDrawer.js
CHANGED
|
@@ -7,18 +7,20 @@ export class EmojiDrawer {
|
|
|
7
7
|
}
|
|
8
8
|
destroy() {
|
|
9
9
|
for (const [key, emojiData] of this._emojiShapeDict) {
|
|
10
|
-
emojiData instanceof ImageBitmap
|
|
11
|
-
|
|
10
|
+
if (emojiData instanceof ImageBitmap) {
|
|
11
|
+
emojiData?.close();
|
|
12
|
+
this._emojiShapeDict.delete(key);
|
|
13
|
+
}
|
|
12
14
|
}
|
|
13
15
|
}
|
|
14
16
|
draw(data) {
|
|
15
|
-
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;
|
|
16
18
|
if (!emojiData) {
|
|
17
19
|
return;
|
|
18
20
|
}
|
|
19
21
|
context.globalAlpha = opacity;
|
|
20
|
-
context.drawImage(emojiData, -radius, -radius,
|
|
21
|
-
context.globalAlpha =
|
|
22
|
+
context.drawImage(emojiData, -radius, -radius, diameter, diameter);
|
|
23
|
+
context.globalAlpha = previousAlpha;
|
|
22
24
|
}
|
|
23
25
|
async init(container) {
|
|
24
26
|
const options = container.actualOptions;
|
|
@@ -28,7 +30,9 @@ export class EmojiDrawer {
|
|
|
28
30
|
.find((t) => !!t);
|
|
29
31
|
if (shapeOptions) {
|
|
30
32
|
executeOnSingleOrMultiple(shapeOptions, (shape) => {
|
|
31
|
-
|
|
33
|
+
if (shape.font) {
|
|
34
|
+
promises.push(loadFont(shape.font));
|
|
35
|
+
}
|
|
32
36
|
});
|
|
33
37
|
}
|
|
34
38
|
await Promise.all(promises);
|
|
@@ -38,7 +42,7 @@ export class EmojiDrawer {
|
|
|
38
42
|
delete particle.emojiData;
|
|
39
43
|
}
|
|
40
44
|
particleInit(container, particle) {
|
|
41
|
-
const shapeData = particle.shapeData;
|
|
45
|
+
const double = 2, shapeData = particle.shapeData;
|
|
42
46
|
if (!shapeData?.value) {
|
|
43
47
|
return;
|
|
44
48
|
}
|
|
@@ -51,17 +55,18 @@ export class EmojiDrawer {
|
|
|
51
55
|
particle.emojiData = existingData;
|
|
52
56
|
return;
|
|
53
57
|
}
|
|
54
|
-
const canvasSize = getRangeMax(particle.size.value) *
|
|
58
|
+
const canvasSize = getRangeMax(particle.size.value) * double;
|
|
55
59
|
let emojiData;
|
|
60
|
+
const maxSize = getRangeMax(particle.size.value);
|
|
56
61
|
if (typeof OffscreenCanvas !== "undefined") {
|
|
57
62
|
const canvas = new OffscreenCanvas(canvasSize, canvasSize), context = canvas.getContext("2d");
|
|
58
63
|
if (!context) {
|
|
59
64
|
return;
|
|
60
65
|
}
|
|
61
|
-
context.font = `400 ${
|
|
66
|
+
context.font = `400 ${maxSize * double}px ${font}`;
|
|
62
67
|
context.textBaseline = "middle";
|
|
63
68
|
context.textAlign = "center";
|
|
64
|
-
context.fillText(emoji,
|
|
69
|
+
context.fillText(emoji, maxSize, maxSize);
|
|
65
70
|
emojiData = canvas.transferToImageBitmap();
|
|
66
71
|
}
|
|
67
72
|
else {
|
|
@@ -72,10 +77,10 @@ export class EmojiDrawer {
|
|
|
72
77
|
if (!context) {
|
|
73
78
|
return;
|
|
74
79
|
}
|
|
75
|
-
context.font = `400 ${
|
|
80
|
+
context.font = `400 ${maxSize * double}px ${font}`;
|
|
76
81
|
context.textBaseline = "middle";
|
|
77
82
|
context.textAlign = "center";
|
|
78
|
-
context.fillText(emoji,
|
|
83
|
+
context.fillText(emoji, maxSize, maxSize);
|
|
79
84
|
emojiData = canvas;
|
|
80
85
|
}
|
|
81
86
|
this._emojiShapeDict.set(key, emojiData);
|
package/cjs/EmojiDrawer.js
CHANGED
|
@@ -10,18 +10,20 @@ class EmojiDrawer {
|
|
|
10
10
|
}
|
|
11
11
|
destroy() {
|
|
12
12
|
for (const [key, emojiData] of this._emojiShapeDict) {
|
|
13
|
-
emojiData instanceof ImageBitmap
|
|
14
|
-
|
|
13
|
+
if (emojiData instanceof ImageBitmap) {
|
|
14
|
+
emojiData?.close();
|
|
15
|
+
this._emojiShapeDict.delete(key);
|
|
16
|
+
}
|
|
15
17
|
}
|
|
16
18
|
}
|
|
17
19
|
draw(data) {
|
|
18
|
-
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;
|
|
19
21
|
if (!emojiData) {
|
|
20
22
|
return;
|
|
21
23
|
}
|
|
22
24
|
context.globalAlpha = opacity;
|
|
23
|
-
context.drawImage(emojiData, -radius, -radius,
|
|
24
|
-
context.globalAlpha =
|
|
25
|
+
context.drawImage(emojiData, -radius, -radius, diameter, diameter);
|
|
26
|
+
context.globalAlpha = previousAlpha;
|
|
25
27
|
}
|
|
26
28
|
async init(container) {
|
|
27
29
|
const options = container.actualOptions;
|
|
@@ -31,7 +33,9 @@ class EmojiDrawer {
|
|
|
31
33
|
.find((t) => !!t);
|
|
32
34
|
if (shapeOptions) {
|
|
33
35
|
(0, engine_1.executeOnSingleOrMultiple)(shapeOptions, (shape) => {
|
|
34
|
-
|
|
36
|
+
if (shape.font) {
|
|
37
|
+
promises.push((0, engine_1.loadFont)(shape.font));
|
|
38
|
+
}
|
|
35
39
|
});
|
|
36
40
|
}
|
|
37
41
|
await Promise.all(promises);
|
|
@@ -41,7 +45,7 @@ class EmojiDrawer {
|
|
|
41
45
|
delete particle.emojiData;
|
|
42
46
|
}
|
|
43
47
|
particleInit(container, particle) {
|
|
44
|
-
const shapeData = particle.shapeData;
|
|
48
|
+
const double = 2, shapeData = particle.shapeData;
|
|
45
49
|
if (!shapeData?.value) {
|
|
46
50
|
return;
|
|
47
51
|
}
|
|
@@ -54,17 +58,18 @@ class EmojiDrawer {
|
|
|
54
58
|
particle.emojiData = existingData;
|
|
55
59
|
return;
|
|
56
60
|
}
|
|
57
|
-
const canvasSize = (0, engine_1.getRangeMax)(particle.size.value) *
|
|
61
|
+
const canvasSize = (0, engine_1.getRangeMax)(particle.size.value) * double;
|
|
58
62
|
let emojiData;
|
|
63
|
+
const maxSize = (0, engine_1.getRangeMax)(particle.size.value);
|
|
59
64
|
if (typeof OffscreenCanvas !== "undefined") {
|
|
60
65
|
const canvas = new OffscreenCanvas(canvasSize, canvasSize), context = canvas.getContext("2d");
|
|
61
66
|
if (!context) {
|
|
62
67
|
return;
|
|
63
68
|
}
|
|
64
|
-
context.font = `400 ${
|
|
69
|
+
context.font = `400 ${maxSize * double}px ${font}`;
|
|
65
70
|
context.textBaseline = "middle";
|
|
66
71
|
context.textAlign = "center";
|
|
67
|
-
context.fillText(emoji,
|
|
72
|
+
context.fillText(emoji, maxSize, maxSize);
|
|
68
73
|
emojiData = canvas.transferToImageBitmap();
|
|
69
74
|
}
|
|
70
75
|
else {
|
|
@@ -75,10 +80,10 @@ class EmojiDrawer {
|
|
|
75
80
|
if (!context) {
|
|
76
81
|
return;
|
|
77
82
|
}
|
|
78
|
-
context.font = `400 ${
|
|
83
|
+
context.font = `400 ${maxSize * double}px ${font}`;
|
|
79
84
|
context.textBaseline = "middle";
|
|
80
85
|
context.textAlign = "center";
|
|
81
|
-
context.fillText(emoji,
|
|
86
|
+
context.fillText(emoji, maxSize, maxSize);
|
|
82
87
|
emojiData = canvas;
|
|
83
88
|
}
|
|
84
89
|
this._emojiShapeDict.set(key, emojiData);
|
package/esm/EmojiDrawer.js
CHANGED
|
@@ -7,18 +7,20 @@ export class EmojiDrawer {
|
|
|
7
7
|
}
|
|
8
8
|
destroy() {
|
|
9
9
|
for (const [key, emojiData] of this._emojiShapeDict) {
|
|
10
|
-
emojiData instanceof ImageBitmap
|
|
11
|
-
|
|
10
|
+
if (emojiData instanceof ImageBitmap) {
|
|
11
|
+
emojiData?.close();
|
|
12
|
+
this._emojiShapeDict.delete(key);
|
|
13
|
+
}
|
|
12
14
|
}
|
|
13
15
|
}
|
|
14
16
|
draw(data) {
|
|
15
|
-
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;
|
|
16
18
|
if (!emojiData) {
|
|
17
19
|
return;
|
|
18
20
|
}
|
|
19
21
|
context.globalAlpha = opacity;
|
|
20
|
-
context.drawImage(emojiData, -radius, -radius,
|
|
21
|
-
context.globalAlpha =
|
|
22
|
+
context.drawImage(emojiData, -radius, -radius, diameter, diameter);
|
|
23
|
+
context.globalAlpha = previousAlpha;
|
|
22
24
|
}
|
|
23
25
|
async init(container) {
|
|
24
26
|
const options = container.actualOptions;
|
|
@@ -28,7 +30,9 @@ export class EmojiDrawer {
|
|
|
28
30
|
.find((t) => !!t);
|
|
29
31
|
if (shapeOptions) {
|
|
30
32
|
executeOnSingleOrMultiple(shapeOptions, (shape) => {
|
|
31
|
-
|
|
33
|
+
if (shape.font) {
|
|
34
|
+
promises.push(loadFont(shape.font));
|
|
35
|
+
}
|
|
32
36
|
});
|
|
33
37
|
}
|
|
34
38
|
await Promise.all(promises);
|
|
@@ -38,7 +42,7 @@ export class EmojiDrawer {
|
|
|
38
42
|
delete particle.emojiData;
|
|
39
43
|
}
|
|
40
44
|
particleInit(container, particle) {
|
|
41
|
-
const shapeData = particle.shapeData;
|
|
45
|
+
const double = 2, shapeData = particle.shapeData;
|
|
42
46
|
if (!shapeData?.value) {
|
|
43
47
|
return;
|
|
44
48
|
}
|
|
@@ -51,17 +55,18 @@ export class EmojiDrawer {
|
|
|
51
55
|
particle.emojiData = existingData;
|
|
52
56
|
return;
|
|
53
57
|
}
|
|
54
|
-
const canvasSize = getRangeMax(particle.size.value) *
|
|
58
|
+
const canvasSize = getRangeMax(particle.size.value) * double;
|
|
55
59
|
let emojiData;
|
|
60
|
+
const maxSize = getRangeMax(particle.size.value);
|
|
56
61
|
if (typeof OffscreenCanvas !== "undefined") {
|
|
57
62
|
const canvas = new OffscreenCanvas(canvasSize, canvasSize), context = canvas.getContext("2d");
|
|
58
63
|
if (!context) {
|
|
59
64
|
return;
|
|
60
65
|
}
|
|
61
|
-
context.font = `400 ${
|
|
66
|
+
context.font = `400 ${maxSize * double}px ${font}`;
|
|
62
67
|
context.textBaseline = "middle";
|
|
63
68
|
context.textAlign = "center";
|
|
64
|
-
context.fillText(emoji,
|
|
69
|
+
context.fillText(emoji, maxSize, maxSize);
|
|
65
70
|
emojiData = canvas.transferToImageBitmap();
|
|
66
71
|
}
|
|
67
72
|
else {
|
|
@@ -72,10 +77,10 @@ export class EmojiDrawer {
|
|
|
72
77
|
if (!context) {
|
|
73
78
|
return;
|
|
74
79
|
}
|
|
75
|
-
context.font = `400 ${
|
|
80
|
+
context.font = `400 ${maxSize * double}px ${font}`;
|
|
76
81
|
context.textBaseline = "middle";
|
|
77
82
|
context.textAlign = "center";
|
|
78
|
-
context.fillText(emoji,
|
|
83
|
+
context.fillText(emoji, maxSize, maxSize);
|
|
79
84
|
emojiData = canvas;
|
|
80
85
|
}
|
|
81
86
|
this._emojiShapeDict.set(key, emojiData);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tsparticles/shape-emoji",
|
|
3
|
-
"version": "3.0
|
|
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
|
|
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
|
+
<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":
|
|
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>
|
|
@@ -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
|
|
7
|
+
* v3.1.0
|
|
8
8
|
*/
|
|
9
9
|
(function webpackUniversalModuleDefinition(root, factory) {
|
|
10
10
|
if(typeof exports === 'object' && typeof module === 'object')
|
|
@@ -106,8 +106,10 @@ class EmojiDrawer {
|
|
|
106
106
|
}
|
|
107
107
|
destroy() {
|
|
108
108
|
for (const [key, emojiData] of this._emojiShapeDict) {
|
|
109
|
-
emojiData instanceof ImageBitmap
|
|
110
|
-
|
|
109
|
+
if (emojiData instanceof ImageBitmap) {
|
|
110
|
+
emojiData?.close();
|
|
111
|
+
this._emojiShapeDict.delete(key);
|
|
112
|
+
}
|
|
111
113
|
}
|
|
112
114
|
}
|
|
113
115
|
draw(data) {
|
|
@@ -117,13 +119,16 @@ class EmojiDrawer {
|
|
|
117
119
|
radius,
|
|
118
120
|
opacity
|
|
119
121
|
} = data,
|
|
120
|
-
emojiData = particle.emojiData
|
|
122
|
+
emojiData = particle.emojiData,
|
|
123
|
+
double = 2,
|
|
124
|
+
diameter = radius * double,
|
|
125
|
+
previousAlpha = context.globalAlpha;
|
|
121
126
|
if (!emojiData) {
|
|
122
127
|
return;
|
|
123
128
|
}
|
|
124
129
|
context.globalAlpha = opacity;
|
|
125
|
-
context.drawImage(emojiData, -radius, -radius,
|
|
126
|
-
context.globalAlpha =
|
|
130
|
+
context.drawImage(emojiData, -radius, -radius, diameter, diameter);
|
|
131
|
+
context.globalAlpha = previousAlpha;
|
|
127
132
|
}
|
|
128
133
|
async init(container) {
|
|
129
134
|
const options = container.actualOptions;
|
|
@@ -132,7 +137,9 @@ class EmojiDrawer {
|
|
|
132
137
|
shapeOptions = validTypes.map(t => options.particles.shape.options[t]).find(t => !!t);
|
|
133
138
|
if (shapeOptions) {
|
|
134
139
|
(0,engine_root_window_.executeOnSingleOrMultiple)(shapeOptions, shape => {
|
|
135
|
-
|
|
140
|
+
if (shape.font) {
|
|
141
|
+
promises.push((0,engine_root_window_.loadFont)(shape.font));
|
|
142
|
+
}
|
|
136
143
|
});
|
|
137
144
|
}
|
|
138
145
|
await Promise.all(promises);
|
|
@@ -142,7 +149,8 @@ class EmojiDrawer {
|
|
|
142
149
|
delete particle.emojiData;
|
|
143
150
|
}
|
|
144
151
|
particleInit(container, particle) {
|
|
145
|
-
const
|
|
152
|
+
const double = 2,
|
|
153
|
+
shapeData = particle.shapeData;
|
|
146
154
|
if (!shapeData?.value) {
|
|
147
155
|
return;
|
|
148
156
|
}
|
|
@@ -157,18 +165,19 @@ class EmojiDrawer {
|
|
|
157
165
|
particle.emojiData = existingData;
|
|
158
166
|
return;
|
|
159
167
|
}
|
|
160
|
-
const canvasSize = (0,engine_root_window_.getRangeMax)(particle.size.value) *
|
|
168
|
+
const canvasSize = (0,engine_root_window_.getRangeMax)(particle.size.value) * double;
|
|
161
169
|
let emojiData;
|
|
170
|
+
const maxSize = (0,engine_root_window_.getRangeMax)(particle.size.value);
|
|
162
171
|
if (typeof OffscreenCanvas !== "undefined") {
|
|
163
172
|
const canvas = new OffscreenCanvas(canvasSize, canvasSize),
|
|
164
173
|
context = canvas.getContext("2d");
|
|
165
174
|
if (!context) {
|
|
166
175
|
return;
|
|
167
176
|
}
|
|
168
|
-
context.font = `400 ${
|
|
177
|
+
context.font = `400 ${maxSize * double}px ${font}`;
|
|
169
178
|
context.textBaseline = "middle";
|
|
170
179
|
context.textAlign = "center";
|
|
171
|
-
context.fillText(emoji,
|
|
180
|
+
context.fillText(emoji, maxSize, maxSize);
|
|
172
181
|
emojiData = canvas.transferToImageBitmap();
|
|
173
182
|
} else {
|
|
174
183
|
const canvas = document.createElement("canvas");
|
|
@@ -178,10 +187,10 @@ class EmojiDrawer {
|
|
|
178
187
|
if (!context) {
|
|
179
188
|
return;
|
|
180
189
|
}
|
|
181
|
-
context.font = `400 ${
|
|
190
|
+
context.font = `400 ${maxSize * double}px ${font}`;
|
|
182
191
|
context.textBaseline = "middle";
|
|
183
192
|
context.textAlign = "center";
|
|
184
|
-
context.fillText(emoji,
|
|
193
|
+
context.fillText(emoji, maxSize, maxSize);
|
|
185
194
|
emojiData = canvas;
|
|
186
195
|
}
|
|
187
196
|
this._emojiShapeDict.set(key, emojiData);
|
|
@@ -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
|
|
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})()));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
/*! tsParticles Emoji Shape v3.0
|
|
1
|
+
/*! tsParticles Emoji Shape v3.1.0 by Matteo Bruni */
|
package/umd/EmojiDrawer.js
CHANGED
|
@@ -19,18 +19,20 @@
|
|
|
19
19
|
}
|
|
20
20
|
destroy() {
|
|
21
21
|
for (const [key, emojiData] of this._emojiShapeDict) {
|
|
22
|
-
emojiData instanceof ImageBitmap
|
|
23
|
-
|
|
22
|
+
if (emojiData instanceof ImageBitmap) {
|
|
23
|
+
emojiData?.close();
|
|
24
|
+
this._emojiShapeDict.delete(key);
|
|
25
|
+
}
|
|
24
26
|
}
|
|
25
27
|
}
|
|
26
28
|
draw(data) {
|
|
27
|
-
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;
|
|
28
30
|
if (!emojiData) {
|
|
29
31
|
return;
|
|
30
32
|
}
|
|
31
33
|
context.globalAlpha = opacity;
|
|
32
|
-
context.drawImage(emojiData, -radius, -radius,
|
|
33
|
-
context.globalAlpha =
|
|
34
|
+
context.drawImage(emojiData, -radius, -radius, diameter, diameter);
|
|
35
|
+
context.globalAlpha = previousAlpha;
|
|
34
36
|
}
|
|
35
37
|
async init(container) {
|
|
36
38
|
const options = container.actualOptions;
|
|
@@ -40,7 +42,9 @@
|
|
|
40
42
|
.find((t) => !!t);
|
|
41
43
|
if (shapeOptions) {
|
|
42
44
|
(0, engine_1.executeOnSingleOrMultiple)(shapeOptions, (shape) => {
|
|
43
|
-
|
|
45
|
+
if (shape.font) {
|
|
46
|
+
promises.push((0, engine_1.loadFont)(shape.font));
|
|
47
|
+
}
|
|
44
48
|
});
|
|
45
49
|
}
|
|
46
50
|
await Promise.all(promises);
|
|
@@ -50,7 +54,7 @@
|
|
|
50
54
|
delete particle.emojiData;
|
|
51
55
|
}
|
|
52
56
|
particleInit(container, particle) {
|
|
53
|
-
const shapeData = particle.shapeData;
|
|
57
|
+
const double = 2, shapeData = particle.shapeData;
|
|
54
58
|
if (!shapeData?.value) {
|
|
55
59
|
return;
|
|
56
60
|
}
|
|
@@ -63,17 +67,18 @@
|
|
|
63
67
|
particle.emojiData = existingData;
|
|
64
68
|
return;
|
|
65
69
|
}
|
|
66
|
-
const canvasSize = (0, engine_1.getRangeMax)(particle.size.value) *
|
|
70
|
+
const canvasSize = (0, engine_1.getRangeMax)(particle.size.value) * double;
|
|
67
71
|
let emojiData;
|
|
72
|
+
const maxSize = (0, engine_1.getRangeMax)(particle.size.value);
|
|
68
73
|
if (typeof OffscreenCanvas !== "undefined") {
|
|
69
74
|
const canvas = new OffscreenCanvas(canvasSize, canvasSize), context = canvas.getContext("2d");
|
|
70
75
|
if (!context) {
|
|
71
76
|
return;
|
|
72
77
|
}
|
|
73
|
-
context.font = `400 ${
|
|
78
|
+
context.font = `400 ${maxSize * double}px ${font}`;
|
|
74
79
|
context.textBaseline = "middle";
|
|
75
80
|
context.textAlign = "center";
|
|
76
|
-
context.fillText(emoji,
|
|
81
|
+
context.fillText(emoji, maxSize, maxSize);
|
|
77
82
|
emojiData = canvas.transferToImageBitmap();
|
|
78
83
|
}
|
|
79
84
|
else {
|
|
@@ -84,10 +89,10 @@
|
|
|
84
89
|
if (!context) {
|
|
85
90
|
return;
|
|
86
91
|
}
|
|
87
|
-
context.font = `400 ${
|
|
92
|
+
context.font = `400 ${maxSize * double}px ${font}`;
|
|
88
93
|
context.textBaseline = "middle";
|
|
89
94
|
context.textAlign = "center";
|
|
90
|
-
context.fillText(emoji,
|
|
95
|
+
context.fillText(emoji, maxSize, maxSize);
|
|
91
96
|
emojiData = canvas;
|
|
92
97
|
}
|
|
93
98
|
this._emojiShapeDict.set(key, emojiData);
|