@tsparticles/shape-text 3.0.0-beta.3 → 3.0.0-beta.5

package/tsparticles.shape.text.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
- * v3.0.0-beta.3
+ * v3.0.0-beta.5
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
@@ -98,8 +98,23 @@ __webpack_require__.d(__webpack_exports__, {
 var engine_root_window_ = __webpack_require__(533);
 ;// CONCATENATED MODULE: ./dist/browser/TextDrawer.js
 
-const validTypes = ["text", "character", "char"];
+const validTypes = ["text", "character", "char", "multiline-text"];
 class TextDrawer {
+  constructor() {
+    this._drawLine = (context, line, radius, opacity, index, fill) => {
+      const offsetX = line.length * radius / 2,
+        pos = {
+          x: -offsetX,
+          y: radius / 2
+        },
+        diameter = radius * 2;
+      if (fill) {
+        context.fillText(line, pos.x, pos.y + diameter * index);
+      } else {
+        context.strokeText(line, pos.x, pos.y + diameter * index);
+      }
+    };
+  }
   draw(data) {
     const {
         context,
@@ -108,7 +123,7 @@ class TextDrawer {
         opacity
       } = data,
       character = particle.shapeData;
-    if (character === undefined) {
+    if (!character) {
       return;
     }
     const textData = character.value;
@@ -123,24 +138,18 @@ class TextDrawer {
       weight = character.weight ?? "400",
       size = Math.round(radius) * 2,
       font = character.font ?? "Verdana",
-      fill = particle.fill,
-      offsetX = text.length * radius / 2;
+      fill = particle.shapeFill;
+    const lines = text?.split("\n");
+    if (!lines) {
+      return;
+    }
     context.font = `${style} ${weight} ${size}px "${font}"`;
-    const pos = {
-      x: -offsetX,
-      y: radius / 2
-    };
     context.globalAlpha = opacity;
-    if (fill) {
-      context.fillText(text, pos.x, pos.y);
-    } else {
-      context.strokeText(text, pos.x, pos.y);
+    for (let i = 0; i < lines.length; i++) {
+      this._drawLine(context, lines[i], radius, opacity, i, fill);
     }
     context.globalAlpha = 1;
   }
-  getSidesCount() {
-    return 12;
-  }
   async init(container) {
     const options = container.actualOptions;
     if (validTypes.find(t => (0,engine_root_window_.isInArray)(t, options.particles.shape.type))) {

package/tsparticles.shape.text.min.js

@@ -1,2 +1,2 @@
 /*! For license information please see tsparticles.shape.text.min.js.LICENSE.txt */
-!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 o="object"==typeof exports?t(require("@tsparticles/engine")):t(e.window);for(var r in o)("object"==typeof exports?exports:e)[r]=o[r]}}(this,(e=>(()=>{"use strict";var t={533:t=>{t.exports=e}},o={};function r(e){var n=o[e];if(void 0!==n)return n.exports;var a=o[e]={exports:{}};return t[e](a,a.exports,r),a.exports}r.d=(e,t)=>{for(var o in t)r.o(t,o)&&!r.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{r.r(n),r.d(n,{loadTextShape:()=>a});var e=r(533);const t=["text","character","char"];class o{draw(t){const{context:o,particle:r,radius:n,opacity:a}=t,i=r.shapeData;if(void 0===i)return;const s=i.value;if(void 0===s)return;void 0===r.text&&(r.text=(0,e.itemFromSingleOrMultiple)(s,r.randomIndexData));const l=r.text,p=i.style??"",c=i.weight??"400",d=2*Math.round(n),u=i.font??"Verdana",f=r.fill,x=l.length*n/2;o.font=`${p} ${c} ${d}px "${u}"`;const y={x:-x,y:n/2};o.globalAlpha=a,f?o.fillText(l,y.x,y.y):o.strokeText(l,y.x,y.y),o.globalAlpha=1}getSidesCount(){return 12}async init(o){const r=o.actualOptions;if(t.find((t=>(0,e.isInArray)(t,r.particles.shape.type)))){const o=t.map((e=>r.particles.shape.options[e])).find((e=>!!e)),n=[];(0,e.executeOnSingleOrMultiple)(o,(t=>{n.push((0,e.loadFont)(t.font,t.weight))})),await Promise.all(n)}}particleInit(o,r){if(!r.shape||!t.includes(r.shape))return;const n=r.shapeData;if(void 0===n)return;const a=n.value;void 0!==a&&(r.text=(0,e.itemFromSingleOrMultiple)(a,r.randomIndexData))}}async function a(e,r=!0){await e.addShape(t,new o,r)}})(),n})()));
+!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})()));

package/tsparticles.shape.text.min.js.LICENSE.txt

@@ -1 +1 @@
-/*! tsParticles Text Shape v3.0.0-beta.3 by Matteo Bruni */
+/*! tsParticles Text Shape v3.0.0-beta.5 by Matteo Bruni */

package/types/{ICharacterShape.d.ts → ITextShape.d.ts}

@@ -1,5 +1,5 @@
 import type { IShapeValues, SingleOrMultiple } from "@tsparticles/engine";
-export interface ICharacterShape extends IShapeValues {
+export interface ITextShape extends IShapeValues {
     font: string;
     style: string;
     value: SingleOrMultiple<string>;

package/types/TextDrawer.d.ts

@@ -3,7 +3,7 @@ import type { TextParticle } from "./TextParticle.js";
 export declare const validTypes: string[];
 export declare class TextDrawer implements IShapeDrawer<TextParticle> {
     draw(data: IShapeDrawData<TextParticle>): void;
-    getSidesCount(): number;
     init(container: Container): Promise<void>;
     particleInit(container: Container, particle: TextParticle): void;
+    private readonly _drawLine;
 }

package/umd/TextDrawer.js

@@ -11,11 +11,25 @@
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.TextDrawer = exports.validTypes = void 0;
     const engine_1 = require("@tsparticles/engine");
-    exports.validTypes = ["text", "character", "char"];
+    exports.validTypes = ["text", "character", "char", "multiline-text"];
     class TextDrawer {
+        constructor() {
+            this._drawLine = (context, line, radius, opacity, index, fill) => {
+                const offsetX = (line.length * radius) / 2, pos = {
+                    x: -offsetX,
+                    y: radius / 2,
+                }, diameter = radius * 2;
+                if (fill) {
+                    context.fillText(line, pos.x, pos.y + diameter * index);
+                }
+                else {
+                    context.strokeText(line, pos.x, pos.y + diameter * index);
+                }
+            };
+        }
         draw(data) {
             const { context, particle, radius, opacity } = data, character = particle.shapeData;
-            if (character === undefined) {
+            if (!character) {
                 return;
             }
             const textData = character.value;
@@ -25,24 +39,18 @@
             if (particle.text === undefined) {
                 particle.text = (0, engine_1.itemFromSingleOrMultiple)(textData, particle.randomIndexData);
             }
-            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;
+            const text = particle.text, style = character.style ?? "", weight = character.weight ?? "400", size = Math.round(radius) * 2, font = character.font ?? "Verdana", fill = particle.shapeFill;
+            const lines = text?.split("\n");
+            if (!lines) {
+                return;
+            }
             context.font = `${style} ${weight} ${size}px "${font}"`;
-            const pos = {
-                x: -offsetX,
-                y: radius / 2,
-            };
             context.globalAlpha = opacity;
-            if (fill) {
-                context.fillText(text, pos.x, pos.y);
-            }
-            else {
-                context.strokeText(text, pos.x, pos.y);
+            for (let i = 0; i < lines.length; i++) {
+                this._drawLine(context, lines[i], radius, opacity, i, fill);
             }
             context.globalAlpha = 1;
         }
-        getSidesCount() {
-            return 12;
-        }
         async init(container) {
             const options = container.actualOptions;
             if (exports.validTypes.find((t) => (0, engine_1.isInArray)(t, options.particles.shape.type))) {