@tsparticles/shape-text 4.0.0-alpha.5 → 4.0.0-beta.0

package/942.min.js

@@ -0,0 +1,2 @@
+"use strict";(this.webpackChunk_tsparticles_shape_text=this.webpackChunk_tsparticles_shape_text||[]).push([[942],{942(t,e,a){a.d(e,{TextDrawer:()=>l});var i=a(303),s=a(183),n=a(425);class l{draw(t){(0,s.m)(t)}async init(t){let e=t.actualOptions;if(s.u.find(t=>(0,i.isInArray)(t,e.particles.shape.type))){let t=s.u.map(t=>e.particles.shape.options[t]).find(t=>!!t),a=[];(0,i.executeOnSingleOrMultiple)(t,t=>{a.push((0,n.loadFont)(t.font,t.weight))}),await Promise.all(a)}}particleInit(t,e){if(!e.shape||!s.u.includes(e.shape))return;let a=e.shapeData;if(void 0===a)return;let n=a.value;n&&(e.textLines=(0,i.itemFromSingleOrMultiple)(n,e.randomIndexData)?.split(`
+`)??[],e.maxTextLength=e.textLines.length?Math.max(...e.textLines.map(t=>t.length)):e.textLines[0]?.length??0)}}}}]);

package/browser/TextDrawer.js

@@ -1,17 +1,17 @@
-import { executeOnSingleOrMultiple, isInArray, itemFromSingleOrMultiple, loadFont, } from "@tsparticles/engine";
-import { drawText } from "./Utils.js";
-const firstItem = 0;
+import { executeOnSingleOrMultiple, isInArray, itemFromSingleOrMultiple, } from "@tsparticles/engine";
+import { drawText, validTypes } from "./Utils.js";
+import { loadFont } from "@tsparticles/canvas-utils";
+const firstIndex = 0, minLength = 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 = [];
+            const shapeOptions = validTypes
+                .map(t => options.particles.shape.options[t])
+                .find(t => !!t), promises = [];
             executeOnSingleOrMultiple(shapeOptions, shape => {
                 promises.push(loadFont(shape.font, shape.weight));
             });
@@ -19,7 +19,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;
@@ -27,6 +27,12 @@ export class TextDrawer {
             return;
         }
         const textData = character.value;
-        particle.text = itemFromSingleOrMultiple(textData, particle.randomIndexData);
+        if (!textData) {
+            return;
+        }
+        particle.textLines = itemFromSingleOrMultiple(textData, particle.randomIndexData)?.split("\n") ?? [];
+        particle.maxTextLength = particle.textLines.length
+            ? Math.max(...particle.textLines.map(t => t.length))
+            : (particle.textLines[firstIndex]?.length ?? minLength);
     }
 }

package/browser/Utils.js

@@ -1,33 +1,41 @@
 import { double, half, itemFromSingleOrMultiple } from "@tsparticles/engine";
+export const validTypes = ["text", "character", "char", "multiline-text"];
+const firstIndex = 0, minLength = 0;
 export function drawText(data) {
     const { context, particle, fill, stroke, radius, opacity } = data, character = particle.shapeData;
     if (!character) {
         return;
     }
     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") ?? [];
+    particle.textLines ??= itemFromSingleOrMultiple(textData, particle.randomIndexData)?.split("\n") ?? [];
+    particle.maxTextLength ??= particle.textLines.length
+        ? Math.max(...particle.textLines.map(t => t.length))
+        : (particle.textLines[firstIndex]?.length ?? minLength);
+    if (!particle.textLines.length || !particle.maxTextLength) {
+        return;
+    }
+    const lines = particle.textLines, style = character.style ?? "", weight = character.weight ?? "400", font = character.font ?? "Verdana", size = (Math.round(radius) * double) / (lines.length * particle.maxTextLength);
     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, size, i, fill, stroke);
     }
-    context.globalAlpha = 1;
+    context.globalAlpha = originalGlobalAlpha;
 }
-function drawLine(context, line, radius, _opacity, index, fill, stroke) {
-    const offsetX = line.length * radius * half, pos = {
-        x: -offsetX,
-        y: radius * half,
-    }, diameter = radius * double;
+function drawTextLine(context, line, size, index, fill, stroke) {
+    const pos = {
+        x: -(line.length * size * half),
+        y: size * half + index * size,
+    };
     if (fill) {
-        context.fillText(line, pos.x, pos.y + diameter * index);
+        context.fillText(line, pos.x, pos.y);
     }
     if (stroke) {
-        context.strokeText(line, pos.x, pos.y + diameter * index);
+        context.strokeText(line, pos.x, pos.y);
     }
 }

package/browser/index.js

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

package/cjs/TextDrawer.js

@@ -1,17 +1,17 @@
-import { executeOnSingleOrMultiple, isInArray, itemFromSingleOrMultiple, loadFont, } from "@tsparticles/engine";
-import { drawText } from "./Utils.js";
-const firstItem = 0;
+import { executeOnSingleOrMultiple, isInArray, itemFromSingleOrMultiple, } from "@tsparticles/engine";
+import { drawText, validTypes } from "./Utils.js";
+import { loadFont } from "@tsparticles/canvas-utils";
+const firstIndex = 0, minLength = 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 = [];
+            const shapeOptions = validTypes
+                .map(t => options.particles.shape.options[t])
+                .find(t => !!t), promises = [];
             executeOnSingleOrMultiple(shapeOptions, shape => {
                 promises.push(loadFont(shape.font, shape.weight));
             });
@@ -19,7 +19,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;
@@ -27,6 +27,12 @@ export class TextDrawer {
             return;
         }
         const textData = character.value;
-        particle.text = itemFromSingleOrMultiple(textData, particle.randomIndexData);
+        if (!textData) {
+            return;
+        }
+        particle.textLines = itemFromSingleOrMultiple(textData, particle.randomIndexData)?.split("\n") ?? [];
+        particle.maxTextLength = particle.textLines.length
+            ? Math.max(...particle.textLines.map(t => t.length))
+            : (particle.textLines[firstIndex]?.length ?? minLength);
     }
 }

package/cjs/Utils.js

@@ -1,33 +1,41 @@
 import { double, half, itemFromSingleOrMultiple } from "@tsparticles/engine";
+export const validTypes = ["text", "character", "char", "multiline-text"];
+const firstIndex = 0, minLength = 0;
 export function drawText(data) {
     const { context, particle, fill, stroke, radius, opacity } = data, character = particle.shapeData;
     if (!character) {
         return;
     }
     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") ?? [];
+    particle.textLines ??= itemFromSingleOrMultiple(textData, particle.randomIndexData)?.split("\n") ?? [];
+    particle.maxTextLength ??= particle.textLines.length
+        ? Math.max(...particle.textLines.map(t => t.length))
+        : (particle.textLines[firstIndex]?.length ?? minLength);
+    if (!particle.textLines.length || !particle.maxTextLength) {
+        return;
+    }
+    const lines = particle.textLines, style = character.style ?? "", weight = character.weight ?? "400", font = character.font ?? "Verdana", size = (Math.round(radius) * double) / (lines.length * particle.maxTextLength);
     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, size, i, fill, stroke);
     }
-    context.globalAlpha = 1;
+    context.globalAlpha = originalGlobalAlpha;
 }
-function drawLine(context, line, radius, _opacity, index, fill, stroke) {
-    const offsetX = line.length * radius * half, pos = {
-        x: -offsetX,
-        y: radius * half,
-    }, diameter = radius * double;
+function drawTextLine(context, line, size, index, fill, stroke) {
+    const pos = {
+        x: -(line.length * size * half),
+        y: size * half + index * size,
+    };
     if (fill) {
-        context.fillText(line, pos.x, pos.y + diameter * index);
+        context.fillText(line, pos.x, pos.y);
     }
     if (stroke) {
-        context.strokeText(line, pos.x, pos.y + diameter * index);
+        context.strokeText(line, pos.x, pos.y);
     }
 }

package/cjs/index.js

@@ -1,7 +1,10 @@
+import { validTypes } from "./Utils.js";
 export async function loadTextShape(engine) {
-    engine.checkVersion("4.0.0-alpha.5");
-    await engine.register(async (e) => {
-        const { TextDrawer } = await import("./TextDrawer.js");
-        e.addShape(new TextDrawer());
+    engine.checkVersion("4.0.0-beta.0");
+    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.5
+ * v4.0.0-beta.0
  */
 "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\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) * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.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 * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half,\n    pos = {\n      x: -offsetX,\n      y: radius * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half\n    },\n    diameter = radius * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.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 firstIndex = 0, minLength = 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]).find((t)=>!!t), 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        if (!textData) {\n            return;\n        }\n        particle.textLines = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.itemFromSingleOrMultiple)(textData, particle.randomIndexData)?.split(\"\\n\") ?? [];\n        particle.maxTextLength = particle.textLines.length ? Math.max(...particle.textLines.map((t)=>t.length)) : particle.textLines[firstIndex]?.length ?? minLength;\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/shape-text/./dist/browser/TextDrawer.js?\n}");
 
 /***/ }
 

package/esm/TextDrawer.js

@@ -1,17 +1,17 @@
-import { executeOnSingleOrMultiple, isInArray, itemFromSingleOrMultiple, loadFont, } from "@tsparticles/engine";
-import { drawText } from "./Utils.js";
-const firstItem = 0;
+import { executeOnSingleOrMultiple, isInArray, itemFromSingleOrMultiple, } from "@tsparticles/engine";
+import { drawText, validTypes } from "./Utils.js";
+import { loadFont } from "@tsparticles/canvas-utils";
+const firstIndex = 0, minLength = 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 = [];
+            const shapeOptions = validTypes
+                .map(t => options.particles.shape.options[t])
+                .find(t => !!t), promises = [];
             executeOnSingleOrMultiple(shapeOptions, shape => {
                 promises.push(loadFont(shape.font, shape.weight));
             });
@@ -19,7 +19,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;
@@ -27,6 +27,12 @@ export class TextDrawer {
             return;
         }
         const textData = character.value;
-        particle.text = itemFromSingleOrMultiple(textData, particle.randomIndexData);
+        if (!textData) {
+            return;
+        }
+        particle.textLines = itemFromSingleOrMultiple(textData, particle.randomIndexData)?.split("\n") ?? [];
+        particle.maxTextLength = particle.textLines.length
+            ? Math.max(...particle.textLines.map(t => t.length))
+            : (particle.textLines[firstIndex]?.length ?? minLength);
     }
 }

package/esm/Utils.js

@@ -1,33 +1,41 @@
 import { double, half, itemFromSingleOrMultiple } from "@tsparticles/engine";
+export const validTypes = ["text", "character", "char", "multiline-text"];
+const firstIndex = 0, minLength = 0;
 export function drawText(data) {
     const { context, particle, fill, stroke, radius, opacity } = data, character = particle.shapeData;
     if (!character) {
         return;
     }
     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") ?? [];
+    particle.textLines ??= itemFromSingleOrMultiple(textData, particle.randomIndexData)?.split("\n") ?? [];
+    particle.maxTextLength ??= particle.textLines.length
+        ? Math.max(...particle.textLines.map(t => t.length))
+        : (particle.textLines[firstIndex]?.length ?? minLength);
+    if (!particle.textLines.length || !particle.maxTextLength) {
+        return;
+    }
+    const lines = particle.textLines, style = character.style ?? "", weight = character.weight ?? "400", font = character.font ?? "Verdana", size = (Math.round(radius) * double) / (lines.length * particle.maxTextLength);
     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, size, i, fill, stroke);
     }
-    context.globalAlpha = 1;
+    context.globalAlpha = originalGlobalAlpha;
 }
-function drawLine(context, line, radius, _opacity, index, fill, stroke) {
-    const offsetX = line.length * radius * half, pos = {
-        x: -offsetX,
-        y: radius * half,
-    }, diameter = radius * double;
+function drawTextLine(context, line, size, index, fill, stroke) {
+    const pos = {
+        x: -(line.length * size * half),
+        y: size * half + index * size,
+    };
     if (fill) {
-        context.fillText(line, pos.x, pos.y + diameter * index);
+        context.fillText(line, pos.x, pos.y);
     }
     if (stroke) {
-        context.strokeText(line, pos.x, pos.y + diameter * index);
+        context.strokeText(line, pos.x, pos.y);
     }
 }

package/esm/index.js

@@ -1,7 +1,10 @@
+import { validTypes } from "./Utils.js";
 export async function loadTextShape(engine) {
-    engine.checkVersion("4.0.0-alpha.5");
-    await engine.register(async (e) => {
-        const { TextDrawer } = await import("./TextDrawer.js");
-        e.addShape(new TextDrawer());
+    engine.checkVersion("4.0.0-beta.0");
+    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.5",
+  "version": "4.0.0-beta.0",
   "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.5"
+    "@tsparticles/canvas-utils": "4.0.0-beta.0",
+    "@tsparticles/engine": "4.0.0-beta.0"
   },
   "publishConfig": {
     "access": "public"