@tsparticles/shape-text 3.0.0-beta.2 → 3.0.0-beta.4
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/TextDrawer.js +25 -17
- package/cjs/TextDrawer.js +25 -17
- package/esm/TextDrawer.js +25 -17
- package/package.json +3 -3
- package/report.html +4 -22
- package/tsparticles.shape.text.js +32 -18
- package/tsparticles.shape.text.min.js +1 -1
- package/tsparticles.shape.text.min.js.LICENSE.txt +1 -1
- package/types/{ICharacterShape.d.ts → ITextShape.d.ts} +1 -1
- package/types/TextDrawer.d.ts +4 -4
- package/types/TextParticle.d.ts +2 -2
- package/umd/TextDrawer.js +25 -17
- /package/browser/{ICharacterShape.js → ITextShape.js} +0 -0
- /package/cjs/{ICharacterShape.js → ITextShape.js} +0 -0
- /package/esm/{ICharacterShape.js → ITextShape.js} +0 -0
- /package/umd/{ICharacterShape.js → ITextShape.js} +0 -0
package/browser/TextDrawer.js
CHANGED
|
@@ -1,9 +1,23 @@
|
|
|
1
1
|
import { executeOnSingleOrMultiple, isInArray, itemFromSingleOrMultiple, loadFont, } from "@tsparticles/engine";
|
|
2
|
-
export const validTypes = ["text", "character", "char"];
|
|
2
|
+
export const validTypes = ["text", "character", "char", "multiline-text"];
|
|
3
3
|
export class TextDrawer {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
constructor() {
|
|
5
|
+
this._drawLine = (context, line, radius, opacity, index, fill) => {
|
|
6
|
+
const offsetX = (line.length * radius) / 2, pos = {
|
|
7
|
+
x: -offsetX,
|
|
8
|
+
y: radius / 2,
|
|
9
|
+
};
|
|
10
|
+
if (fill) {
|
|
11
|
+
context.fillText(line, pos.x, pos.y + radius * 2 * index);
|
|
12
|
+
}
|
|
13
|
+
else {
|
|
14
|
+
context.strokeText(line, pos.x, pos.y + radius * 2 * index);
|
|
15
|
+
}
|
|
16
|
+
};
|
|
17
|
+
}
|
|
18
|
+
draw(data) {
|
|
19
|
+
const { context, particle, radius, opacity } = data, character = particle.shapeData;
|
|
20
|
+
if (!character) {
|
|
7
21
|
return;
|
|
8
22
|
}
|
|
9
23
|
const textData = character.value;
|
|
@@ -13,24 +27,18 @@ export class TextDrawer {
|
|
|
13
27
|
if (particle.text === undefined) {
|
|
14
28
|
particle.text = itemFromSingleOrMultiple(textData, particle.randomIndexData);
|
|
15
29
|
}
|
|
16
|
-
const text = particle.text, style = character.style ?? "", weight = character.weight ?? "400", size = Math.round(radius) * 2, font = character.font ?? "Verdana", fill = particle.
|
|
30
|
+
const text = particle.text, style = character.style ?? "", weight = character.weight ?? "400", size = Math.round(radius) * 2, font = character.font ?? "Verdana", fill = particle.shapeFill;
|
|
31
|
+
const lines = text?.split("\n");
|
|
32
|
+
if (!lines) {
|
|
33
|
+
return;
|
|
34
|
+
}
|
|
17
35
|
context.font = `${style} ${weight} ${size}px "${font}"`;
|
|
18
|
-
const pos = {
|
|
19
|
-
x: -offsetX,
|
|
20
|
-
y: radius / 2,
|
|
21
|
-
};
|
|
22
36
|
context.globalAlpha = opacity;
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
}
|
|
26
|
-
else {
|
|
27
|
-
context.strokeText(text, pos.x, pos.y);
|
|
37
|
+
for (let i = 0; i < lines.length; i++) {
|
|
38
|
+
this._drawLine(context, lines[i], radius, opacity, i, fill);
|
|
28
39
|
}
|
|
29
40
|
context.globalAlpha = 1;
|
|
30
41
|
}
|
|
31
|
-
getSidesCount() {
|
|
32
|
-
return 12;
|
|
33
|
-
}
|
|
34
42
|
async init(container) {
|
|
35
43
|
const options = container.actualOptions;
|
|
36
44
|
if (validTypes.find((t) => isInArray(t, options.particles.shape.type))) {
|
package/cjs/TextDrawer.js
CHANGED
|
@@ -2,11 +2,25 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.TextDrawer = exports.validTypes = void 0;
|
|
4
4
|
const engine_1 = require("@tsparticles/engine");
|
|
5
|
-
exports.validTypes = ["text", "character", "char"];
|
|
5
|
+
exports.validTypes = ["text", "character", "char", "multiline-text"];
|
|
6
6
|
class TextDrawer {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
constructor() {
|
|
8
|
+
this._drawLine = (context, line, radius, opacity, index, fill) => {
|
|
9
|
+
const offsetX = (line.length * radius) / 2, pos = {
|
|
10
|
+
x: -offsetX,
|
|
11
|
+
y: radius / 2,
|
|
12
|
+
};
|
|
13
|
+
if (fill) {
|
|
14
|
+
context.fillText(line, pos.x, pos.y + radius * 2 * index);
|
|
15
|
+
}
|
|
16
|
+
else {
|
|
17
|
+
context.strokeText(line, pos.x, pos.y + radius * 2 * index);
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
}
|
|
21
|
+
draw(data) {
|
|
22
|
+
const { context, particle, radius, opacity } = data, character = particle.shapeData;
|
|
23
|
+
if (!character) {
|
|
10
24
|
return;
|
|
11
25
|
}
|
|
12
26
|
const textData = character.value;
|
|
@@ -16,24 +30,18 @@ class TextDrawer {
|
|
|
16
30
|
if (particle.text === undefined) {
|
|
17
31
|
particle.text = (0, engine_1.itemFromSingleOrMultiple)(textData, particle.randomIndexData);
|
|
18
32
|
}
|
|
19
|
-
const text = particle.text, style = character.style ?? "", weight = character.weight ?? "400", size = Math.round(radius) * 2, font = character.font ?? "Verdana", fill = particle.
|
|
33
|
+
const text = particle.text, style = character.style ?? "", weight = character.weight ?? "400", size = Math.round(radius) * 2, font = character.font ?? "Verdana", fill = particle.shapeFill;
|
|
34
|
+
const lines = text?.split("\n");
|
|
35
|
+
if (!lines) {
|
|
36
|
+
return;
|
|
37
|
+
}
|
|
20
38
|
context.font = `${style} ${weight} ${size}px "${font}"`;
|
|
21
|
-
const pos = {
|
|
22
|
-
x: -offsetX,
|
|
23
|
-
y: radius / 2,
|
|
24
|
-
};
|
|
25
39
|
context.globalAlpha = opacity;
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
}
|
|
29
|
-
else {
|
|
30
|
-
context.strokeText(text, pos.x, pos.y);
|
|
40
|
+
for (let i = 0; i < lines.length; i++) {
|
|
41
|
+
this._drawLine(context, lines[i], radius, opacity, i, fill);
|
|
31
42
|
}
|
|
32
43
|
context.globalAlpha = 1;
|
|
33
44
|
}
|
|
34
|
-
getSidesCount() {
|
|
35
|
-
return 12;
|
|
36
|
-
}
|
|
37
45
|
async init(container) {
|
|
38
46
|
const options = container.actualOptions;
|
|
39
47
|
if (exports.validTypes.find((t) => (0, engine_1.isInArray)(t, options.particles.shape.type))) {
|
package/esm/TextDrawer.js
CHANGED
|
@@ -1,9 +1,23 @@
|
|
|
1
1
|
import { executeOnSingleOrMultiple, isInArray, itemFromSingleOrMultiple, loadFont, } from "@tsparticles/engine";
|
|
2
|
-
export const validTypes = ["text", "character", "char"];
|
|
2
|
+
export const validTypes = ["text", "character", "char", "multiline-text"];
|
|
3
3
|
export class TextDrawer {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
constructor() {
|
|
5
|
+
this._drawLine = (context, line, radius, opacity, index, fill) => {
|
|
6
|
+
const offsetX = (line.length * radius) / 2, pos = {
|
|
7
|
+
x: -offsetX,
|
|
8
|
+
y: radius / 2,
|
|
9
|
+
};
|
|
10
|
+
if (fill) {
|
|
11
|
+
context.fillText(line, pos.x, pos.y + radius * 2 * index);
|
|
12
|
+
}
|
|
13
|
+
else {
|
|
14
|
+
context.strokeText(line, pos.x, pos.y + radius * 2 * index);
|
|
15
|
+
}
|
|
16
|
+
};
|
|
17
|
+
}
|
|
18
|
+
draw(data) {
|
|
19
|
+
const { context, particle, radius, opacity } = data, character = particle.shapeData;
|
|
20
|
+
if (!character) {
|
|
7
21
|
return;
|
|
8
22
|
}
|
|
9
23
|
const textData = character.value;
|
|
@@ -13,24 +27,18 @@ export class TextDrawer {
|
|
|
13
27
|
if (particle.text === undefined) {
|
|
14
28
|
particle.text = itemFromSingleOrMultiple(textData, particle.randomIndexData);
|
|
15
29
|
}
|
|
16
|
-
const text = particle.text, style = character.style ?? "", weight = character.weight ?? "400", size = Math.round(radius) * 2, font = character.font ?? "Verdana", fill = particle.
|
|
30
|
+
const text = particle.text, style = character.style ?? "", weight = character.weight ?? "400", size = Math.round(radius) * 2, font = character.font ?? "Verdana", fill = particle.shapeFill;
|
|
31
|
+
const lines = text?.split("\n");
|
|
32
|
+
if (!lines) {
|
|
33
|
+
return;
|
|
34
|
+
}
|
|
17
35
|
context.font = `${style} ${weight} ${size}px "${font}"`;
|
|
18
|
-
const pos = {
|
|
19
|
-
x: -offsetX,
|
|
20
|
-
y: radius / 2,
|
|
21
|
-
};
|
|
22
36
|
context.globalAlpha = opacity;
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
}
|
|
26
|
-
else {
|
|
27
|
-
context.strokeText(text, pos.x, pos.y);
|
|
37
|
+
for (let i = 0; i < lines.length; i++) {
|
|
38
|
+
this._drawLine(context, lines[i], radius, opacity, i, fill);
|
|
28
39
|
}
|
|
29
40
|
context.globalAlpha = 1;
|
|
30
41
|
}
|
|
31
|
-
getSidesCount() {
|
|
32
|
-
return 12;
|
|
33
|
-
}
|
|
34
42
|
async init(container) {
|
|
35
43
|
const options = container.actualOptions;
|
|
36
44
|
if (validTypes.find((t) => isInArray(t, options.particles.shape.type))) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tsparticles/shape-text",
|
|
3
|
-
"version": "3.0.0-beta.
|
|
3
|
+
"version": "3.0.0-beta.4",
|
|
4
4
|
"description": "tsParticles text shape",
|
|
5
5
|
"homepage": "https://particles.js.org",
|
|
6
6
|
"repository": {
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"css3",
|
|
34
34
|
"animated",
|
|
35
35
|
"background",
|
|
36
|
-
"
|
|
36
|
+
"tsparticles-shape"
|
|
37
37
|
],
|
|
38
38
|
"author": "Matteo Bruni <matteo.bruni@me.com>",
|
|
39
39
|
"license": "MIT",
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
"./package.json": "./package.json"
|
|
60
60
|
},
|
|
61
61
|
"dependencies": {
|
|
62
|
-
"@tsparticles/engine": "^3.0.0-beta.
|
|
62
|
+
"@tsparticles/engine": "^3.0.0-beta.4"
|
|
63
63
|
},
|
|
64
64
|
"publishConfig": {
|
|
65
65
|
"access": "public"
|