@tsparticles/shape-text 4.0.0-alpha.2 → 4.0.0-alpha.20

package/13.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_shape_text=this.webpackChunk_tsparticles_shape_text||[]).push([[13],{13(e,t,a){a.d(t,{TextDrawer:()=>p});var i=a(303),s=a(962),l=a(425);class p{draw(e){(0,s.m)(e)}async init(e){let t=e.actualOptions;if(s.u.find(e=>(0,i.isInArray)(e,t.particles.shape.type))){let e=s.u.map(e=>t.particles.shape.options[e])[0],a=[];(0,i.executeOnSingleOrMultiple)(e,e=>{a.push((0,l.loadFont)(e.font,e.weight))}),await Promise.all(a)}}particleInit(e,t){if(!t.shape||!s.u.includes(t.shape))return;let a=t.shapeData;if(void 0===a)return;let l=a.value;t.text=(0,i.itemFromSingleOrMultiple)(l,t.randomIndexData)}}}}]);

package/browser/TextDrawer.js

@@ -1,15 +1,13 @@
-import { executeOnSingleOrMultiple, isInArray, itemFromSingleOrMultiple, loadFont, } from "@tsparticles/engine";
-import { drawText } from "./Utils.js";
+import { executeOnSingleOrMultiple, isInArray, itemFromSingleOrMultiple, } from "@tsparticles/engine";
+import { drawText, validTypes } from "./Utils.js";
+import { loadFont } from "@tsparticles/canvas-utils";
 const firstItem = 0;
 export class TextDrawer {
-    constructor() {
-        this.validTypes = ["text", "character", "char", "multiline-text"];
-    }
     draw(data) {
         drawText(data);
     }
     async init(container) {
-        const options = container.actualOptions, { validTypes } = this;
+        const options = container.actualOptions;
         if (validTypes.find(t => isInArray(t, options.particles.shape.type))) {
             const shapeOptions = validTypes.map(t => options.particles.shape.options[t])[firstItem], promises = [];
             executeOnSingleOrMultiple(shapeOptions, shape => {
@@ -19,7 +17,7 @@ export class TextDrawer {
         }
     }
     particleInit(_container, particle) {
-        if (!particle.shape || !this.validTypes.includes(particle.shape)) {
+        if (!particle.shape || !validTypes.includes(particle.shape)) {
             return;
         }
         const character = particle.shapeData;

package/browser/Utils.js

@@ -1,5 +1,5 @@
-import { itemFromSingleOrMultiple } from "@tsparticles/engine";
-const double = 2, half = 0.5;
+import { double, half, itemFromSingleOrMultiple } from "@tsparticles/engine";
+export const validTypes = ["text", "character", "char", "multiline-text"];
 export function drawText(data) {
     const { context, particle, fill, stroke, radius, opacity } = data, character = particle.shapeData;
     if (!character) {
@@ -7,20 +7,20 @@ export function drawText(data) {
     }
     const textData = character.value;
     particle.text ??= itemFromSingleOrMultiple(textData, particle.randomIndexData);
-    const text = particle.text, style = character.style, weight = character.weight, size = Math.round(radius) * double, font = character.font;
-    const lines = text?.split("\n") ?? [];
+    const text = particle.text, style = character.style, weight = character.weight, size = Math.round(radius) * double, font = character.font, lines = text?.split("\n") ?? [];
     context.font = `${style} ${weight} ${size.toString()}px "${font}"`;
+    const originalGlobalAlpha = context.globalAlpha;
     context.globalAlpha = opacity;
     for (let i = 0; i < lines.length; i++) {
         const currentLine = lines[i];
         if (!currentLine) {
             continue;
         }
-        drawLine(context, currentLine, radius, opacity, i, fill, stroke);
+        drawTextLine(context, currentLine, radius, i, fill, stroke);
     }
-    context.globalAlpha = 1;
+    context.globalAlpha = originalGlobalAlpha;
 }
-function drawLine(context, line, radius, _opacity, index, fill, stroke) {
+function drawTextLine(context, line, radius, index, fill, stroke) {
     const offsetX = line.length * radius * half, pos = {
         x: -offsetX,
         y: radius * half,

package/browser/index.js

@@ -1,7 +1,10 @@
-export function loadTextShape(engine) {
-    engine.checkVersion("4.0.0-alpha.2");
-    engine.register(async (e) => {
-        const { TextDrawer } = await import("./TextDrawer.js");
-        e.addShape(new TextDrawer());
+import { validTypes } from "./Utils.js";
+export async function loadTextShape(engine) {
+    engine.checkVersion("4.0.0-alpha.20");
+    await engine.register(e => {
+        e.addShape(validTypes, async () => {
+            const { TextDrawer } = await import("./TextDrawer.js");
+            return new TextDrawer();
+        });
     });
 }

package/cjs/TextDrawer.js

@@ -1,15 +1,13 @@
-import { executeOnSingleOrMultiple, isInArray, itemFromSingleOrMultiple, loadFont, } from "@tsparticles/engine";
-import { drawText } from "./Utils.js";
+import { executeOnSingleOrMultiple, isInArray, itemFromSingleOrMultiple, } from "@tsparticles/engine";
+import { drawText, validTypes } from "./Utils.js";
+import { loadFont } from "@tsparticles/canvas-utils";
 const firstItem = 0;
 export class TextDrawer {
-    constructor() {
-        this.validTypes = ["text", "character", "char", "multiline-text"];
-    }
     draw(data) {
         drawText(data);
     }
     async init(container) {
-        const options = container.actualOptions, { validTypes } = this;
+        const options = container.actualOptions;
         if (validTypes.find(t => isInArray(t, options.particles.shape.type))) {
             const shapeOptions = validTypes.map(t => options.particles.shape.options[t])[firstItem], promises = [];
             executeOnSingleOrMultiple(shapeOptions, shape => {
@@ -19,7 +17,7 @@ export class TextDrawer {
         }
     }
     particleInit(_container, particle) {
-        if (!particle.shape || !this.validTypes.includes(particle.shape)) {
+        if (!particle.shape || !validTypes.includes(particle.shape)) {
             return;
         }
         const character = particle.shapeData;

package/cjs/Utils.js

@@ -1,5 +1,5 @@
-import { itemFromSingleOrMultiple } from "@tsparticles/engine";
-const double = 2, half = 0.5;
+import { double, half, itemFromSingleOrMultiple } from "@tsparticles/engine";
+export const validTypes = ["text", "character", "char", "multiline-text"];
 export function drawText(data) {
     const { context, particle, fill, stroke, radius, opacity } = data, character = particle.shapeData;
     if (!character) {
@@ -7,20 +7,20 @@ export function drawText(data) {
     }
     const textData = character.value;
     particle.text ??= itemFromSingleOrMultiple(textData, particle.randomIndexData);
-    const text = particle.text, style = character.style, weight = character.weight, size = Math.round(radius) * double, font = character.font;
-    const lines = text?.split("\n") ?? [];
+    const text = particle.text, style = character.style, weight = character.weight, size = Math.round(radius) * double, font = character.font, lines = text?.split("\n") ?? [];
     context.font = `${style} ${weight} ${size.toString()}px "${font}"`;
+    const originalGlobalAlpha = context.globalAlpha;
     context.globalAlpha = opacity;
     for (let i = 0; i < lines.length; i++) {
         const currentLine = lines[i];
         if (!currentLine) {
             continue;
         }
-        drawLine(context, currentLine, radius, opacity, i, fill, stroke);
+        drawTextLine(context, currentLine, radius, i, fill, stroke);
     }
-    context.globalAlpha = 1;
+    context.globalAlpha = originalGlobalAlpha;
 }
-function drawLine(context, line, radius, _opacity, index, fill, stroke) {
+function drawTextLine(context, line, radius, index, fill, stroke) {
     const offsetX = line.length * radius * half, pos = {
         x: -offsetX,
         y: radius * half,

package/cjs/index.js

@@ -1,7 +1,10 @@
-export function loadTextShape(engine) {
-    engine.checkVersion("4.0.0-alpha.2");
-    engine.register(async (e) => {
-        const { TextDrawer } = await import("./TextDrawer.js");
-        e.addShape(new TextDrawer());
+import { validTypes } from "./Utils.js";
+export async function loadTextShape(engine) {
+    engine.checkVersion("4.0.0-alpha.20");
+    await engine.register(e => {
+        e.addShape(validTypes, async () => {
+            const { TextDrawer } = await import("./TextDrawer.js");
+            return new TextDrawer();
+        });
     });
 }

package/dist_browser_TextDrawer_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v4.0.0-alpha.2
+ * v4.0.0-alpha.20
  */
 "use strict";
 /*
@@ -23,17 +23,7 @@
   \************************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   TextDrawer: () => (/* binding */ TextDrawer)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Utils.js */ \"./dist/browser/Utils.js\");\n\n\nconst firstItem = 0;\nclass TextDrawer {\n  constructor() {\n    this.validTypes = [\"text\", \"character\", \"char\", \"multiline-text\"];\n  }\n  draw(data) {\n    (0,_Utils_js__WEBPACK_IMPORTED_MODULE_1__.drawText)(data);\n  }\n  async init(container) {\n    const options = container.actualOptions,\n      {\n        validTypes\n      } = this;\n    if (validTypes.find(t => (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(t, options.particles.shape.type))) {\n      const shapeOptions = validTypes.map(t => options.particles.shape.options[t])[firstItem],\n        promises = [];\n      (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.executeOnSingleOrMultiple)(shapeOptions, shape => {\n        promises.push((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.loadFont)(shape.font, shape.weight));\n      });\n      await Promise.all(promises);\n    }\n  }\n  particleInit(_container, particle) {\n    if (!particle.shape || !this.validTypes.includes(particle.shape)) {\n      return;\n    }\n    const character = particle.shapeData;\n    if (character === undefined) {\n      return;\n    }\n    const textData = character.value;\n    particle.text = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.itemFromSingleOrMultiple)(textData, particle.randomIndexData);\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/shape-text/./dist/browser/TextDrawer.js?\n}");
-
-/***/ },
-
-/***/ "./dist/browser/Utils.js"
-/*!*******************************!*\
-  !*** ./dist/browser/Utils.js ***!
-  \*******************************/
-(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
-
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   drawText: () => (/* binding */ drawText)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nconst double = 2,\n  half = 0.5;\nfunction drawText(data) {\n  const {\n      context,\n      particle,\n      fill,\n      stroke,\n      radius,\n      opacity\n    } = data,\n    character = particle.shapeData;\n  if (!character) {\n    return;\n  }\n  const textData = character.value;\n  particle.text ??= (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.itemFromSingleOrMultiple)(textData, particle.randomIndexData);\n  const text = particle.text,\n    style = character.style,\n    weight = character.weight,\n    size = Math.round(radius) * double,\n    font = character.font;\n  const lines = text?.split(\"\\n\") ?? [];\n  context.font = `${style} ${weight} ${size.toString()}px \"${font}\"`;\n  context.globalAlpha = opacity;\n  for (let i = 0; i < lines.length; i++) {\n    const currentLine = lines[i];\n    if (!currentLine) {\n      continue;\n    }\n    drawLine(context, currentLine, radius, opacity, i, fill, stroke);\n  }\n  context.globalAlpha = 1;\n}\nfunction drawLine(context, line, radius, _opacity, index, fill, stroke) {\n  const offsetX = line.length * radius * half,\n    pos = {\n      x: -offsetX,\n      y: radius * half\n    },\n    diameter = radius * double;\n  if (fill) {\n    context.fillText(line, pos.x, pos.y + diameter * index);\n  }\n  if (stroke) {\n    context.strokeText(line, pos.x, pos.y + diameter * index);\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/shape-text/./dist/browser/Utils.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   TextDrawer: () => (/* binding */ TextDrawer)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Utils.js */ \"./dist/browser/Utils.js\");\n/* harmony import */ var _tsparticles_canvas_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @tsparticles/canvas-utils */ \"@tsparticles/canvas-utils\");\n\n\n\nconst firstItem = 0;\nclass TextDrawer {\n    draw(data) {\n        (0,_Utils_js__WEBPACK_IMPORTED_MODULE_1__.drawText)(data);\n    }\n    async init(container) {\n        const options = container.actualOptions;\n        if (_Utils_js__WEBPACK_IMPORTED_MODULE_1__.validTypes.find((t)=>(0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(t, options.particles.shape.type))) {\n            const shapeOptions = _Utils_js__WEBPACK_IMPORTED_MODULE_1__.validTypes.map((t)=>options.particles.shape.options[t])[firstItem], promises = [];\n            (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.executeOnSingleOrMultiple)(shapeOptions, (shape)=>{\n                promises.push((0,_tsparticles_canvas_utils__WEBPACK_IMPORTED_MODULE_2__.loadFont)(shape.font, shape.weight));\n            });\n            await Promise.all(promises);\n        }\n    }\n    particleInit(_container, particle) {\n        if (!particle.shape || !_Utils_js__WEBPACK_IMPORTED_MODULE_1__.validTypes.includes(particle.shape)) {\n            return;\n        }\n        const character = particle.shapeData;\n        if (character === undefined) {\n            return;\n        }\n        const textData = character.value;\n        particle.text = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.itemFromSingleOrMultiple)(textData, particle.randomIndexData);\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/shape-text/./dist/browser/TextDrawer.js?\n}");
 
 /***/ }
 

package/esm/TextDrawer.js

@@ -1,15 +1,13 @@
-import { executeOnSingleOrMultiple, isInArray, itemFromSingleOrMultiple, loadFont, } from "@tsparticles/engine";
-import { drawText } from "./Utils.js";
+import { executeOnSingleOrMultiple, isInArray, itemFromSingleOrMultiple, } from "@tsparticles/engine";
+import { drawText, validTypes } from "./Utils.js";
+import { loadFont } from "@tsparticles/canvas-utils";
 const firstItem = 0;
 export class TextDrawer {
-    constructor() {
-        this.validTypes = ["text", "character", "char", "multiline-text"];
-    }
     draw(data) {
         drawText(data);
     }
     async init(container) {
-        const options = container.actualOptions, { validTypes } = this;
+        const options = container.actualOptions;
         if (validTypes.find(t => isInArray(t, options.particles.shape.type))) {
             const shapeOptions = validTypes.map(t => options.particles.shape.options[t])[firstItem], promises = [];
             executeOnSingleOrMultiple(shapeOptions, shape => {
@@ -19,7 +17,7 @@ export class TextDrawer {
         }
     }
     particleInit(_container, particle) {
-        if (!particle.shape || !this.validTypes.includes(particle.shape)) {
+        if (!particle.shape || !validTypes.includes(particle.shape)) {
             return;
         }
         const character = particle.shapeData;

package/esm/Utils.js

@@ -1,5 +1,5 @@
-import { itemFromSingleOrMultiple } from "@tsparticles/engine";
-const double = 2, half = 0.5;
+import { double, half, itemFromSingleOrMultiple } from "@tsparticles/engine";
+export const validTypes = ["text", "character", "char", "multiline-text"];
 export function drawText(data) {
     const { context, particle, fill, stroke, radius, opacity } = data, character = particle.shapeData;
     if (!character) {
@@ -7,20 +7,20 @@ export function drawText(data) {
     }
     const textData = character.value;
     particle.text ??= itemFromSingleOrMultiple(textData, particle.randomIndexData);
-    const text = particle.text, style = character.style, weight = character.weight, size = Math.round(radius) * double, font = character.font;
-    const lines = text?.split("\n") ?? [];
+    const text = particle.text, style = character.style, weight = character.weight, size = Math.round(radius) * double, font = character.font, lines = text?.split("\n") ?? [];
     context.font = `${style} ${weight} ${size.toString()}px "${font}"`;
+    const originalGlobalAlpha = context.globalAlpha;
     context.globalAlpha = opacity;
     for (let i = 0; i < lines.length; i++) {
         const currentLine = lines[i];
         if (!currentLine) {
             continue;
         }
-        drawLine(context, currentLine, radius, opacity, i, fill, stroke);
+        drawTextLine(context, currentLine, radius, i, fill, stroke);
     }
-    context.globalAlpha = 1;
+    context.globalAlpha = originalGlobalAlpha;
 }
-function drawLine(context, line, radius, _opacity, index, fill, stroke) {
+function drawTextLine(context, line, radius, index, fill, stroke) {
     const offsetX = line.length * radius * half, pos = {
         x: -offsetX,
         y: radius * half,

package/esm/index.js

@@ -1,7 +1,10 @@
-export function loadTextShape(engine) {
-    engine.checkVersion("4.0.0-alpha.2");
-    engine.register(async (e) => {
-        const { TextDrawer } = await import("./TextDrawer.js");
-        e.addShape(new TextDrawer());
+import { validTypes } from "./Utils.js";
+export async function loadTextShape(engine) {
+    engine.checkVersion("4.0.0-alpha.20");
+    await engine.register(e => {
+        e.addShape(validTypes, async () => {
+            const { TextDrawer } = await import("./TextDrawer.js");
+            return new TextDrawer();
+        });
     });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/shape-text",
-  "version": "4.0.0-alpha.2",
+  "version": "4.0.0-alpha.20",
   "description": "tsParticles text shape",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -59,7 +59,8 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@tsparticles/engine": "4.0.0-alpha.2"
+    "@tsparticles/canvas-utils": "4.0.0-alpha.20",
+    "@tsparticles/engine": "4.0.0-alpha.20"
   },
   "publishConfig": {
     "access": "public"