@tsparticles/shape-text 3.0.0-alpha.1 → 3.0.0-beta.1

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 (19) hide show
  1. package/README.md +16 -12
  2. package/browser/TextDrawer.js +18 -6
  3. package/browser/index.js +3 -3
  4. package/browser/package.json +1 -0
  5. package/cjs/TextDrawer.js +28 -27
  6. package/cjs/index.js +3 -14
  7. package/cjs/package.json +1 -0
  8. package/esm/TextDrawer.js +18 -6
  9. package/esm/index.js +3 -3
  10. package/esm/package.json +1 -0
  11. package/package.json +19 -6
  12. package/report.html +4 -4
  13. package/tsparticles.shape.text.js +24 -12
  14. package/tsparticles.shape.text.min.js +1 -1
  15. package/tsparticles.shape.text.min.js.LICENSE.txt +1 -8
  16. package/types/TextDrawer.d.ts +4 -2
  17. package/types/index.d.ts +1 -1
  18. package/umd/TextDrawer.js +17 -5
  19. package/umd/index.js +4 -4
package/README.md CHANGED
@@ -2,9 +2,9 @@
2
2
 
3
3
  # tsParticles Text Shape
4
4
 
5
- [![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-shape-text/badge)](https://www.jsdelivr.com/package/npm/tsparticles-shape-text)
6
- [![npmjs](https://badge.fury.io/js/tsparticles-shape-text.svg)](https://www.npmjs.com/package/tsparticles-shape-text)
7
- [![npmjs](https://img.shields.io/npm/dt/tsparticles-shape-text)](https://www.npmjs.com/package/tsparticles-shape-text) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
5
+ [![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@tsparticles/shape-text/badge)](https://www.jsdelivr.com/package/npm/@tsparticles/shape-text)
6
+ [![npmjs](https://badge.fury.io/js/@tsparticles/shape-text.svg)](https://www.npmjs.com/package/@tsparticles/shape-text)
7
+ [![npmjs](https://img.shields.io/npm/dt/@tsparticles/shape-text)](https://www.npmjs.com/package/@tsparticles/shape-text) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
8
8
 
9
9
  [tsParticles](https://github.com/matteobruni/tsparticles) additional text shape.
10
10
 
@@ -26,7 +26,7 @@ Once the scripts are loaded you can set up `tsParticles` and the shape like this
26
26
 
27
27
  ```javascript
28
28
  (async () => {
29
- await loadTextShape();
29
+ await loadTextShape(tsParticles);
30
30
 
31
31
  await tsParticles.load({
32
32
  id: "tsparticles",
@@ -43,29 +43,33 @@ Once the scripts are loaded you can set up `tsParticles` and the shape like this
43
43
  This package is compatible also with ES or CommonJS modules, firstly this needs to be installed, like this:
44
44
 
45
45
  ```shell
46
- $ npm install tsparticles-shape-text
46
+ $ npm install @tsparticles/shape-text
47
47
  ```
48
48
 
49
49
  or
50
50
 
51
51
  ```shell
52
- $ yarn add tsparticles-shape-text
52
+ $ yarn add @tsparticles/shape-text
53
53
  ```
54
54
 
55
55
  Then you need to import it in the app, like this:
56
56
 
57
57
  ```javascript
58
- const { tsParticles } = require("tsparticles-engine");
59
- const { loadTextShape } = require("tsparticles-shape-text");
58
+ const { tsParticles } = require("@tsparticles/engine");
59
+ const { loadTextShape } = require("@tsparticles/shape-text");
60
60
 
61
- loadTextShape(tsParticles);
61
+ (async () => {
62
+ await loadTextShape(tsParticles);
63
+ })();
62
64
  ```
63
65
 
64
66
  or
65
67
 
66
68
  ```javascript
67
- import { tsParticles } from "tsparticles-engine";
68
- import { loadTextShape } from "tsparticles-shape-text";
69
+ import { tsParticles } from "@tsparticles/engine";
70
+ import { loadTextShape } from "@tsparticles/shape-text";
69
71
 
70
- loadTextShape(tsParticles);
72
+ (async () => {
73
+ await loadTextShape(tsParticles);
74
+ })();
71
75
  ```
package/browser/TextDrawer.js CHANGED
@@ -1,8 +1,7 @@
1
- import { executeOnSingleOrMultiple, isInArray, itemFromSingleOrMultiple, loadFont } from "@tsparticles/engine";
1
+ import { executeOnSingleOrMultiple, isInArray, itemFromSingleOrMultiple, loadFont, } from "@tsparticles/engine";
2
2
  export const validTypes = ["text", "character", "char"];
3
3
  export class TextDrawer {
4
4
  draw(context, particle, radius, opacity) {
5
- var _a, _b, _c;
6
5
  const character = particle.shapeData;
7
6
  if (character === undefined) {
8
7
  return;
@@ -11,11 +10,10 @@ export class TextDrawer {
11
10
  if (textData === undefined) {
12
11
  return;
13
12
  }
14
- const textParticle = particle;
15
- if (textParticle.text === undefined) {
16
- textParticle.text = itemFromSingleOrMultiple(textData, particle.randomIndexData);
13
+ if (particle.text === undefined) {
14
+ particle.text = itemFromSingleOrMultiple(textData, particle.randomIndexData);
17
15
  }
18
- const text = textParticle.text, style = (_a = character.style) !== null && _a !== void 0 ? _a : "", weight = (_b = character.weight) !== null && _b !== void 0 ? _b : "400", size = Math.round(radius) * 2, font = (_c = character.font) !== null && _c !== void 0 ? _c : "Verdana", fill = particle.fill, offsetX = (text.length * radius) / 2;
16
+ const text = particle.text, style = character.style ?? "", weight = character.weight ?? "400", size = Math.round(radius) * 2, font = character.font ?? "Verdana", fill = particle.fill, offsetX = (text.length * radius) / 2;
19
17
  context.font = `${style} ${weight} ${size}px "${font}"`;
20
18
  const pos = {
21
19
  x: -offsetX,
@@ -45,4 +43,18 @@ export class TextDrawer {
45
43
  await Promise.all(promises);
46
44
  }
47
45
  }
46
+ particleInit(container, particle) {
47
+ if (!particle.shape || !validTypes.includes(particle.shape)) {
48
+ return;
49
+ }
50
+ const character = particle.shapeData;
51
+ if (character === undefined) {
52
+ return;
53
+ }
54
+ const textData = character.value;
55
+ if (textData === undefined) {
56
+ return;
57
+ }
58
+ particle.text = itemFromSingleOrMultiple(textData, particle.randomIndexData);
59
+ }
48
60
  }
package/browser/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { TextDrawer, validTypes } from "./TextDrawer";
2
- export async function loadTextShape(engine) {
3
- await engine.addShape(validTypes, new TextDrawer());
1
+ import { TextDrawer, validTypes } from "./TextDrawer.js";
2
+ export async function loadTextShape(engine, refresh = true) {
3
+ await engine.addShape(validTypes, new TextDrawer(), refresh);
4
4
  }
package/browser/package.json ADDED
@@ -0,0 +1 @@
1
+ { "type": "module" }
package/cjs/TextDrawer.js CHANGED
@@ -1,20 +1,10 @@
1
1
  "use strict";
2
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
3
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
4
- return new (P || (P = Promise))(function (resolve, reject) {
5
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
6
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
7
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
8
- step((generator = generator.apply(thisArg, _arguments || [])).next());
9
- });
10
- };
11
2
  Object.defineProperty(exports, "__esModule", { value: true });
12
3
  exports.TextDrawer = exports.validTypes = void 0;
13
4
  const engine_1 = require("@tsparticles/engine");
14
5
  exports.validTypes = ["text", "character", "char"];
15
6
  class TextDrawer {
16
7
  draw(context, particle, radius, opacity) {
17
- var _a, _b, _c;
18
8
  const character = particle.shapeData;
19
9
  if (character === undefined) {
20
10
  return;
@@ -23,11 +13,10 @@ class TextDrawer {
23
13
  if (textData === undefined) {
24
14
  return;
25
15
  }
26
- const textParticle = particle;
27
- if (textParticle.text === undefined) {
28
- textParticle.text = (0, engine_1.itemFromSingleOrMultiple)(textData, particle.randomIndexData);
16
+ if (particle.text === undefined) {
17
+ particle.text = (0, engine_1.itemFromSingleOrMultiple)(textData, particle.randomIndexData);
29
18
  }
30
- const text = textParticle.text, style = (_a = character.style) !== null && _a !== void 0 ? _a : "", weight = (_b = character.weight) !== null && _b !== void 0 ? _b : "400", size = Math.round(radius) * 2, font = (_c = character.font) !== null && _c !== void 0 ? _c : "Verdana", fill = particle.fill, offsetX = (text.length * radius) / 2;
19
+ const text = particle.text, style = character.style ?? "", weight = character.weight ?? "400", size = Math.round(radius) * 2, font = character.font ?? "Verdana", fill = particle.fill, offsetX = (text.length * radius) / 2;
31
20
  context.font = `${style} ${weight} ${size}px "${font}"`;
32
21
  const pos = {
33
22
  x: -offsetX,
@@ -45,19 +34,31 @@ class TextDrawer {
45
34
  getSidesCount() {
46
35
  return 12;
47
36
  }
48
- init(container) {
49
- return __awaiter(this, void 0, void 0, function* () {
50
- const options = container.actualOptions;
51
- if (exports.validTypes.find((t) => (0, engine_1.isInArray)(t, options.particles.shape.type))) {
52
- const shapeOptions = exports.validTypes
53
- .map((t) => options.particles.shape.options[t])
54
- .find((t) => !!t), promises = [];
55
- (0, engine_1.executeOnSingleOrMultiple)(shapeOptions, (shape) => {
56
- promises.push((0, engine_1.loadFont)(shape.font, shape.weight));
57
- });
58
- yield Promise.all(promises);
59
- }
60
- });
37
+ async init(container) {
38
+ const options = container.actualOptions;
39
+ if (exports.validTypes.find((t) => (0, engine_1.isInArray)(t, options.particles.shape.type))) {
40
+ const shapeOptions = exports.validTypes
41
+ .map((t) => options.particles.shape.options[t])
42
+ .find((t) => !!t), promises = [];
43
+ (0, engine_1.executeOnSingleOrMultiple)(shapeOptions, (shape) => {
44
+ promises.push((0, engine_1.loadFont)(shape.font, shape.weight));
45
+ });
46
+ await Promise.all(promises);
47
+ }
48
+ }
49
+ particleInit(container, particle) {
50
+ if (!particle.shape || !exports.validTypes.includes(particle.shape)) {
51
+ return;
52
+ }
53
+ const character = particle.shapeData;
54
+ if (character === undefined) {
55
+ return;
56
+ }
57
+ const textData = character.value;
58
+ if (textData === undefined) {
59
+ return;
60
+ }
61
+ particle.text = (0, engine_1.itemFromSingleOrMultiple)(textData, particle.randomIndexData);
61
62
  }
62
63
  }
63
64
  exports.TextDrawer = TextDrawer;
package/cjs/index.js CHANGED
@@ -1,19 +1,8 @@
1
1
  "use strict";
2
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
3
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
4
- return new (P || (P = Promise))(function (resolve, reject) {
5
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
6
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
7
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
8
- step((generator = generator.apply(thisArg, _arguments || [])).next());
9
- });
10
- };
11
2
  Object.defineProperty(exports, "__esModule", { value: true });
12
3
  exports.loadTextShape = void 0;
13
- const TextDrawer_1 = require("./TextDrawer");
14
- function loadTextShape(engine) {
15
- return __awaiter(this, void 0, void 0, function* () {
16
- yield engine.addShape(TextDrawer_1.validTypes, new TextDrawer_1.TextDrawer());
17
- });
4
+ const TextDrawer_js_1 = require("./TextDrawer.js");
5
+ async function loadTextShape(engine, refresh = true) {
6
+ await engine.addShape(TextDrawer_js_1.validTypes, new TextDrawer_js_1.TextDrawer(), refresh);
18
7
  }
19
8
  exports.loadTextShape = loadTextShape;
package/cjs/package.json ADDED
@@ -0,0 +1 @@
1
+ { "type": "commonjs" }
package/esm/TextDrawer.js CHANGED
@@ -1,8 +1,7 @@
1
- import { executeOnSingleOrMultiple, isInArray, itemFromSingleOrMultiple, loadFont } from "@tsparticles/engine";
1
+ import { executeOnSingleOrMultiple, isInArray, itemFromSingleOrMultiple, loadFont, } from "@tsparticles/engine";
2
2
  export const validTypes = ["text", "character", "char"];
3
3
  export class TextDrawer {
4
4
  draw(context, particle, radius, opacity) {
5
- var _a, _b, _c;
6
5
  const character = particle.shapeData;
7
6
  if (character === undefined) {
8
7
  return;
@@ -11,11 +10,10 @@ export class TextDrawer {
11
10
  if (textData === undefined) {
12
11
  return;
13
12
  }
14
- const textParticle = particle;
15
- if (textParticle.text === undefined) {
16
- textParticle.text = itemFromSingleOrMultiple(textData, particle.randomIndexData);
13
+ if (particle.text === undefined) {
14
+ particle.text = itemFromSingleOrMultiple(textData, particle.randomIndexData);
17
15
  }
18
- const text = textParticle.text, style = (_a = character.style) !== null && _a !== void 0 ? _a : "", weight = (_b = character.weight) !== null && _b !== void 0 ? _b : "400", size = Math.round(radius) * 2, font = (_c = character.font) !== null && _c !== void 0 ? _c : "Verdana", fill = particle.fill, offsetX = (text.length * radius) / 2;
16
+ const text = particle.text, style = character.style ?? "", weight = character.weight ?? "400", size = Math.round(radius) * 2, font = character.font ?? "Verdana", fill = particle.fill, offsetX = (text.length * radius) / 2;
19
17
  context.font = `${style} ${weight} ${size}px "${font}"`;
20
18
  const pos = {
21
19
  x: -offsetX,
@@ -45,4 +43,18 @@ export class TextDrawer {
45
43
  await Promise.all(promises);
46
44
  }
47
45
  }
46
+ particleInit(container, particle) {
47
+ if (!particle.shape || !validTypes.includes(particle.shape)) {
48
+ return;
49
+ }
50
+ const character = particle.shapeData;
51
+ if (character === undefined) {
52
+ return;
53
+ }
54
+ const textData = character.value;
55
+ if (textData === undefined) {
56
+ return;
57
+ }
58
+ particle.text = itemFromSingleOrMultiple(textData, particle.randomIndexData);
59
+ }
48
60
  }
package/esm/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { TextDrawer, validTypes } from "./TextDrawer";
2
- export async function loadTextShape(engine) {
3
- await engine.addShape(validTypes, new TextDrawer());
1
+ import { TextDrawer, validTypes } from "./TextDrawer.js";
2
+ export async function loadTextShape(engine, refresh = true) {
3
+ await engine.addShape(validTypes, new TextDrawer(), refresh);
4
4
  }
package/esm/package.json ADDED
@@ -0,0 +1 @@
1
+ { "type": "module" }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tsparticles/shape-text",
3
- "version": "3.0.0-alpha.1",
3
+ "version": "3.0.0-beta.1",
4
4
  "description": "tsParticles text shape",
5
5
  "homepage": "https://particles.js.org",
6
6
  "repository": {
@@ -40,15 +40,28 @@
40
40
  "bugs": {
41
41
  "url": "https://github.com/matteobruni/tsparticles/issues"
42
42
  },
43
- "main": "cjs/index.js",
43
+ "sideEffects": false,
44
44
  "jsdelivr": "tsparticles.shape.text.min.js",
45
45
  "unpkg": "tsparticles.shape.text.min.js",
46
+ "browser": "browser/index.js",
47
+ "main": "cjs/index.js",
46
48
  "module": "esm/index.js",
47
49
  "types": "types/index.d.ts",
48
- "publishConfig": {
49
- "access": "public"
50
+ "exports": {
51
+ ".": {
52
+ "types": "./types/index.d.ts",
53
+ "browser": "./browser/index.js",
54
+ "import": "./esm/index.js",
55
+ "require": "./cjs/index.js",
56
+ "umd": "./umd/index.js",
57
+ "default": "./cjs/index.js"
58
+ },
59
+ "./package.json": "./package.json"
50
60
  },
51
61
  "dependencies": {
52
- "@tsparticles/engine": "^3.0.0-alpha.1"
62
+ "@tsparticles/engine": "^3.0.0-beta.1"
63
+ },
64
+ "publishConfig": {
65
+ "access": "public"
53
66
  }
54
- }
67
+ }