@tsparticles/shape-text 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.
@@ -1,12 +1,13 @@
1
1
  import { executeOnSingleOrMultiple, isInArray, itemFromSingleOrMultiple, loadFont, } from "@tsparticles/engine";
2
2
  export const validTypes = ["text", "character", "char", "multiline-text"];
3
+ const double = 2, half = 0.5;
3
4
  export class TextDrawer {
4
5
  constructor() {
5
6
  this._drawLine = (context, line, radius, opacity, index, fill) => {
6
- const offsetX = (line.length * radius) / 2, pos = {
7
+ const offsetX = line.length * radius * half, pos = {
7
8
  x: -offsetX,
8
- y: radius / 2,
9
- }, diameter = radius * 2;
9
+ y: radius * half,
10
+ }, diameter = radius * double;
10
11
  if (fill) {
11
12
  context.fillText(line, pos.x, pos.y + diameter * index);
12
13
  }
@@ -27,7 +28,7 @@ export class TextDrawer {
27
28
  if (particle.text === undefined) {
28
29
  particle.text = itemFromSingleOrMultiple(textData, particle.randomIndexData);
29
30
  }
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 text = particle.text, style = character.style ?? "", weight = character.weight ?? "400", size = Math.round(radius) * double, font = character.font ?? "Verdana", fill = particle.shapeFill;
31
32
  const lines = text?.split("\n");
32
33
  if (!lines) {
33
34
  return;
package/cjs/TextDrawer.js CHANGED
@@ -3,13 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.TextDrawer = exports.validTypes = void 0;
4
4
  const engine_1 = require("@tsparticles/engine");
5
5
  exports.validTypes = ["text", "character", "char", "multiline-text"];
6
+ const double = 2, half = 0.5;
6
7
  class TextDrawer {
7
8
  constructor() {
8
9
  this._drawLine = (context, line, radius, opacity, index, fill) => {
9
- const offsetX = (line.length * radius) / 2, pos = {
10
+ const offsetX = line.length * radius * half, pos = {
10
11
  x: -offsetX,
11
- y: radius / 2,
12
- }, diameter = radius * 2;
12
+ y: radius * half,
13
+ }, diameter = radius * double;
13
14
  if (fill) {
14
15
  context.fillText(line, pos.x, pos.y + diameter * index);
15
16
  }
@@ -30,7 +31,7 @@ class TextDrawer {
30
31
  if (particle.text === undefined) {
31
32
  particle.text = (0, engine_1.itemFromSingleOrMultiple)(textData, particle.randomIndexData);
32
33
  }
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 text = particle.text, style = character.style ?? "", weight = character.weight ?? "400", size = Math.round(radius) * double, font = character.font ?? "Verdana", fill = particle.shapeFill;
34
35
  const lines = text?.split("\n");
35
36
  if (!lines) {
36
37
  return;
package/esm/TextDrawer.js CHANGED
@@ -1,12 +1,13 @@
1
1
  import { executeOnSingleOrMultiple, isInArray, itemFromSingleOrMultiple, loadFont, } from "@tsparticles/engine";
2
2
  export const validTypes = ["text", "character", "char", "multiline-text"];
3
+ const double = 2, half = 0.5;
3
4
  export class TextDrawer {
4
5
  constructor() {
5
6
  this._drawLine = (context, line, radius, opacity, index, fill) => {
6
- const offsetX = (line.length * radius) / 2, pos = {
7
+ const offsetX = line.length * radius * half, pos = {
7
8
  x: -offsetX,
8
- y: radius / 2,
9
- }, diameter = radius * 2;
9
+ y: radius * half,
10
+ }, diameter = radius * double;
10
11
  if (fill) {
11
12
  context.fillText(line, pos.x, pos.y + diameter * index);
12
13
  }
@@ -27,7 +28,7 @@ export class TextDrawer {
27
28
  if (particle.text === undefined) {
28
29
  particle.text = itemFromSingleOrMultiple(textData, particle.randomIndexData);
29
30
  }
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 text = particle.text, style = character.style ?? "", weight = character.weight ?? "400", size = Math.round(radius) * double, font = character.font ?? "Verdana", fill = particle.shapeFill;
31
32
  const lines = text?.split("\n");
32
33
  if (!lines) {
33
34
  return;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tsparticles/shape-text",
3
- "version": "3.0.2",
3
+ "version": "3.1.0",
4
4
  "description": "tsParticles text 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-text [6 Dec 2023 at 17:45]</title>
6
+ <title>@tsparticles/shape-text [13 Jan 2024 at 23:07]</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.text.js","isAsset":true,"statSize":2664,"parsedSize":6477,"gzipSize":2125,"groups":[{"label":"dist/browser","path":"./dist/browser","statSize":2622,"groups":[{"id":460,"label":"index.js + 1 modules (concatenated)","path":"./dist/browser/index.js + 1 modules (concatenated)","statSize":2622,"parsedSize":6477,"gzipSize":2125,"concatenated":true,"groups":[{"label":"dist/browser","path":"./dist/browser/index.js + 1 modules (concatenated)/dist/browser","statSize":2622,"groups":[{"id":null,"label":"index.js","path":"./dist/browser/index.js + 1 modules (concatenated)/dist/browser/index.js","statSize":185,"parsedSize":456,"gzipSize":149,"inaccurateSizes":true},{"id":null,"label":"TextDrawer.js","path":"./dist/browser/index.js + 1 modules (concatenated)/dist/browser/TextDrawer.js","statSize":2437,"parsedSize":6020,"gzipSize":1975,"inaccurateSizes":true}],"parsedSize":6477,"gzipSize":2125,"inaccurateSizes":true}]}],"parsedSize":6477,"gzipSize":2125},{"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.text":true}}];
34
+ window.chartData = [{"label":"tsparticles.shape.text.js","isAsset":true,"statSize":2712,"parsedSize":6558,"gzipSize":2145,"groups":[{"label":"dist/browser","path":"./dist/browser","statSize":2670,"groups":[{"id":786,"label":"index.js + 1 modules (concatenated)","path":"./dist/browser/index.js + 1 modules (concatenated)","statSize":2670,"parsedSize":6558,"gzipSize":2145,"concatenated":true,"groups":[{"label":"dist/browser","path":"./dist/browser/index.js + 1 modules (concatenated)/dist/browser","statSize":2670,"groups":[{"id":null,"label":"index.js","path":"./dist/browser/index.js + 1 modules (concatenated)/dist/browser/index.js","statSize":185,"parsedSize":454,"gzipSize":148,"inaccurateSizes":true},{"id":null,"label":"TextDrawer.js","path":"./dist/browser/index.js + 1 modules (concatenated)/dist/browser/TextDrawer.js","statSize":2485,"parsedSize":6103,"gzipSize":1996,"inaccurateSizes":true}],"parsedSize":6558,"gzipSize":2145,"inaccurateSizes":true}]}],"parsedSize":6558,"gzipSize":2145},{"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.text":true}}];
35
35
  window.entrypoints = ["tsparticles.shape.text","tsparticles.shape.text.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.2
7
+ * v3.1.0
8
8
  */
9
9
  (function webpackUniversalModuleDefinition(root, factory) {
10
10
  if(typeof exports === 'object' && typeof module === 'object')
@@ -99,15 +99,17 @@ var engine_root_window_ = __webpack_require__(533);
99
99
  ;// CONCATENATED MODULE: ./dist/browser/TextDrawer.js
100
100
 
101
101
  const validTypes = ["text", "character", "char", "multiline-text"];
102
+ const TextDrawer_double = 2,
103
+ half = 0.5;
102
104
  class TextDrawer {
103
105
  constructor() {
104
106
  this._drawLine = (context, line, radius, opacity, index, fill) => {
105
- const offsetX = line.length * radius / 2,
107
+ const offsetX = line.length * radius * half,
106
108
  pos = {
107
109
  x: -offsetX,
108
- y: radius / 2
110
+ y: radius * half
109
111
  },
110
- diameter = radius * 2;
112
+ diameter = radius * TextDrawer_double;
111
113
  if (fill) {
112
114
  context.fillText(line, pos.x, pos.y + diameter * index);
113
115
  } else {
@@ -136,7 +138,7 @@ class TextDrawer {
136
138
  const text = particle.text,
137
139
  style = character.style ?? "",
138
140
  weight = character.weight ?? "400",
139
- size = Math.round(radius) * 2,
141
+ size = Math.round(radius) * TextDrawer_double,
140
142
  font = character.font ?? "Verdana",
141
143
  fill = particle.shapeFill;
142
144
  const lines = text?.split("\n");
@@ -1,2 +1,2 @@
1
1
  /*! For license information please see tsparticles.shape.text.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 r="object"==typeof exports?t(require("@tsparticles/engine")):t(e.window);for(var o in r)("object"==typeof exports?exports:e)[o]=r[o]}}(this,(e=>(()=>{"use strict";var t={533:t=>{t.exports=e}},r={};function o(e){var n=r[e];if(void 0!==n)return n.exports;var i=r[e]={exports:{}};return t[e](i,i.exports,o),i.exports}o.d=(e,t)=>{for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{o.r(n),o.d(n,{loadTextShape:()=>i});var e=o(533);const t=["text","character","char","multiline-text"];class r{constructor(){this._drawLine=(e,t,r,o,n,i)=>{const a={x:-(t.length*r/2),y:r/2},s=2*r;i?e.fillText(t,a.x,a.y+s*n):e.strokeText(t,a.x,a.y+s*n)}}draw(t){const{context:r,particle:o,radius:n,opacity:i}=t,a=o.shapeData;if(!a)return;const s=a.value;if(void 0===s)return;void 0===o.text&&(o.text=(0,e.itemFromSingleOrMultiple)(s,o.randomIndexData));const l=o.text,p=a.style??"",c=a.weight??"400",d=2*Math.round(n),f=a.font??"Verdana",u=o.shapeFill,x=l?.split("\n");if(x){r.font=`${p} ${c} ${d}px "${f}"`,r.globalAlpha=i;for(let e=0;e<x.length;e++)this._drawLine(r,x[e],n,i,e,u);r.globalAlpha=1}}async init(r){const o=r.actualOptions;if(t.find((t=>(0,e.isInArray)(t,o.particles.shape.type)))){const r=t.map((e=>o.particles.shape.options[e])).find((e=>!!e)),n=[];(0,e.executeOnSingleOrMultiple)(r,(t=>{n.push((0,e.loadFont)(t.font,t.weight))})),await Promise.all(n)}}particleInit(r,o){if(!o.shape||!t.includes(o.shape))return;const n=o.shapeData;if(void 0===n)return;const i=n.value;void 0!==i&&(o.text=(0,e.itemFromSingleOrMultiple)(i,o.randomIndexData))}}async function i(e,o=!0){await e.addShape(t,new r,o)}})(),n})()));
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 r="object"==typeof exports?t(require("@tsparticles/engine")):t(e.window);for(var o in r)("object"==typeof exports?exports:e)[o]=r[o]}}(this,(e=>(()=>{"use strict";var t={533:t=>{t.exports=e}},r={};function o(e){var n=r[e];if(void 0!==n)return n.exports;var i=r[e]={exports:{}};return t[e](i,i.exports,o),i.exports}o.d=(e,t)=>{for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{o.r(n),o.d(n,{loadTextShape:()=>i});var e=o(533);const t=["text","character","char","multiline-text"];class r{constructor(){this._drawLine=(e,t,r,o,n,i)=>{const a={x:-(t.length*r*.5),y:.5*r},s=2*r;i?e.fillText(t,a.x,a.y+s*n):e.strokeText(t,a.x,a.y+s*n)}}draw(t){const{context:r,particle:o,radius:n,opacity:i}=t,a=o.shapeData;if(!a)return;const s=a.value;if(void 0===s)return;void 0===o.text&&(o.text=(0,e.itemFromSingleOrMultiple)(s,o.randomIndexData));const l=o.text,p=a.style??"",c=a.weight??"400",d=2*Math.round(n),f=a.font??"Verdana",u=o.shapeFill,x=l?.split("\n");if(x){r.font=`${p} ${c} ${d}px "${f}"`,r.globalAlpha=i;for(let e=0;e<x.length;e++)this._drawLine(r,x[e],n,i,e,u);r.globalAlpha=1}}async init(r){const o=r.actualOptions;if(t.find((t=>(0,e.isInArray)(t,o.particles.shape.type)))){const r=t.map((e=>o.particles.shape.options[e])).find((e=>!!e)),n=[];(0,e.executeOnSingleOrMultiple)(r,(t=>{n.push((0,e.loadFont)(t.font,t.weight))})),await Promise.all(n)}}particleInit(r,o){if(!o.shape||!t.includes(o.shape))return;const n=o.shapeData;if(void 0===n)return;const i=n.value;void 0!==i&&(o.text=(0,e.itemFromSingleOrMultiple)(i,o.randomIndexData))}}async function i(e,o=!0){await e.addShape(t,new r,o)}})(),n})()));
@@ -1 +1 @@
1
- /*! tsParticles Text Shape v3.0.2 by Matteo Bruni */
1
+ /*! tsParticles Text Shape v3.1.0 by Matteo Bruni */
package/umd/TextDrawer.js CHANGED
@@ -12,13 +12,14 @@
12
12
  exports.TextDrawer = exports.validTypes = void 0;
13
13
  const engine_1 = require("@tsparticles/engine");
14
14
  exports.validTypes = ["text", "character", "char", "multiline-text"];
15
+ const double = 2, half = 0.5;
15
16
  class TextDrawer {
16
17
  constructor() {
17
18
  this._drawLine = (context, line, radius, opacity, index, fill) => {
18
- const offsetX = (line.length * radius) / 2, pos = {
19
+ const offsetX = line.length * radius * half, pos = {
19
20
  x: -offsetX,
20
- y: radius / 2,
21
- }, diameter = radius * 2;
21
+ y: radius * half,
22
+ }, diameter = radius * double;
22
23
  if (fill) {
23
24
  context.fillText(line, pos.x, pos.y + diameter * index);
24
25
  }
@@ -39,7 +40,7 @@
39
40
  if (particle.text === undefined) {
40
41
  particle.text = (0, engine_1.itemFromSingleOrMultiple)(textData, particle.randomIndexData);
41
42
  }
42
- const text = particle.text, style = character.style ?? "", weight = character.weight ?? "400", size = Math.round(radius) * 2, font = character.font ?? "Verdana", fill = particle.shapeFill;
43
+ const text = particle.text, style = character.style ?? "", weight = character.weight ?? "400", size = Math.round(radius) * double, font = character.font ?? "Verdana", fill = particle.shapeFill;
43
44
  const lines = text?.split("\n");
44
45
  if (!lines) {
45
46
  return;