@tsparticles/shape-text - npm Package Compare versions

Comparing version 3.0.0-beta.3 to 3.0.0-beta.4

browser/TextDrawer.js

 import { executeOnSingleOrMultiple, isInArray, itemFromSingleOrMultiple, loadFont, } from "@tsparticles/engine";
-export const validTypes = ["text", "character", "char"];
+export const validTypes = ["text", "character", "char", "multiline-text"];
 export class TextDrawer {
+    constructor() {
+        this._drawLine = (context, line, radius, opacity, index, fill) => {
+            const offsetX = (line.length * radius) / 2, pos = {
+                x: -offsetX,
+                y: radius / 2,
+            };
+            if (fill) {
+                context.fillText(line, pos.x, pos.y + radius * 2 * index);
+            }
+            else {
+                context.strokeText(line, pos.x, pos.y + radius * 2 * index);
+            }
+        };
+    }
     draw(data) {
         const { context, particle, radius, opacity } = data, character = particle.shapeData;
-        if (character === undefined) {
+        if (!character) {
             return;
@@ -16,20 +30,14 @@ }
         }
-        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);
+        for (let i = 0; i < lines.length; i++) {
+            this._drawLine(context, lines[i], radius, opacity, i, fill);
         }
-        else {
-            context.strokeText(text, pos.x, pos.y);
-        }
         context.globalAlpha = 1;
     }
-    getSidesCount() {
-        return 12;
-    }
     async init(container) {
@@ -36,0 +44,0 @@ const options = container.actualOptions;

cjs/TextDrawer.js

@@ -5,7 +5,21 @@ "use strict";
 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,
+            };
+            if (fill) {
+                context.fillText(line, pos.x, pos.y + radius * 2 * index);
+            }
+            else {
+                context.strokeText(line, pos.x, pos.y + radius * 2 * index);
+            }
+        };
+    }
     draw(data) {
         const { context, particle, radius, opacity } = data, character = particle.shapeData;
-        if (character === undefined) {
+        if (!character) {
             return;
@@ -20,20 +34,14 @@ }
         }
-        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);
+        for (let i = 0; i < lines.length; i++) {
+            this._drawLine(context, lines[i], radius, opacity, i, fill);
         }
-        else {
-            context.strokeText(text, pos.x, pos.y);
-        }
         context.globalAlpha = 1;
     }
-    getSidesCount() {
-        return 12;
-    }
     async init(container) {
@@ -40,0 +48,0 @@ const options = container.actualOptions;

esm/TextDrawer.js

 import { executeOnSingleOrMultiple, isInArray, itemFromSingleOrMultiple, loadFont, } from "@tsparticles/engine";
-export const validTypes = ["text", "character", "char"];
+export const validTypes = ["text", "character", "char", "multiline-text"];
 export class TextDrawer {
+    constructor() {
+        this._drawLine = (context, line, radius, opacity, index, fill) => {
+            const offsetX = (line.length * radius) / 2, pos = {
+                x: -offsetX,
+                y: radius / 2,
+            };
+            if (fill) {
+                context.fillText(line, pos.x, pos.y + radius * 2 * index);
+            }
+            else {
+                context.strokeText(line, pos.x, pos.y + radius * 2 * index);
+            }
+        };
+    }
     draw(data) {
         const { context, particle, radius, opacity } = data, character = particle.shapeData;
-        if (character === undefined) {
+        if (!character) {
             return;
@@ -16,20 +30,14 @@ }
         }
-        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);
+        for (let i = 0; i < lines.length; i++) {
+            this._drawLine(context, lines[i], radius, opacity, i, fill);
         }
-        else {
-            context.strokeText(text, pos.x, pos.y);
-        }
         context.globalAlpha = 1;
     }
-    getSidesCount() {
-        return 12;
-    }
     async init(container) {
@@ -36,0 +44,0 @@ const options = container.actualOptions;

package.json

 {
   "name": "@tsparticles/shape-text",
-  "version": "3.0.0-beta.3",
+  "version": "3.0.0-beta.4",
   "description": "tsParticles text shape",
@@ -36,3 +36,3 @@ "homepage": "https://particles.js.org",
     "background",
-    "@tsparticles/shape"
+    "tsparticles-shape"
   ],
@@ -63,3 +63,3 @@ "author": "Matteo Bruni <[e-mail]>",
   "dependencies": {
-    "@tsparticles/engine": "^3.0.0-beta.3"
+    "@tsparticles/engine": "^3.0.0-beta.4"
   },
@@ -66,0 +66,0 @@ "publishConfig": {

tsparticles.shape.text.js

@@ -7,3 +7,3 @@ /*!
  * How to use? : Check the GitHub README
- * v3.0.0-beta.3
+ * v3.0.0-beta.4
  */
@@ -102,4 +102,18 @@ (function webpackUniversalModuleDefinition(root, factory) {
 
-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
+        };
+      if (fill) {
+        context.fillText(line, pos.x, pos.y + radius * 2 * index);
+      } else {
+        context.strokeText(line, pos.x, pos.y + radius * 2 * index);
+      }
+    };
+  }
   draw(data) {
@@ -113,3 +127,3 @@ const {
       character = particle.shapeData;
-    if (character === undefined) {
+    if (!character) {
       return;
@@ -129,20 +143,14 @@ }
       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) {
@@ -149,0 +157,0 @@ const options = container.actualOptions;

tsparticles.shape.text.min.js

 /*! 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};i?e.fillText(t,a.x,a.y+2*r*n):e.strokeText(t,a.x,a.y+2*r*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})()));

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

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

types/TextDrawer.d.ts

@@ -6,5 +6,5 @@ import { type Container, type IShapeDrawData, type IShapeDrawer } from "@tsparticles/engine";
     draw(data: IShapeDrawData<TextParticle>): void;
-    getSidesCount(): number;
     init(container: Container): Promise<void>;
     particleInit(container: Container, particle: TextParticle): void;
+    private readonly _drawLine;
 }

umd/TextDrawer.js

@@ -14,7 +14,21 @@ (function (factory) {
     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,
+                };
+                if (fill) {
+                    context.fillText(line, pos.x, pos.y + radius * 2 * index);
+                }
+                else {
+                    context.strokeText(line, pos.x, pos.y + radius * 2 * index);
+                }
+            };
+        }
         draw(data) {
             const { context, particle, radius, opacity } = data, character = particle.shapeData;
-            if (character === undefined) {
+            if (!character) {
                 return;
@@ -29,20 +43,14 @@ }
             }
-            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);
+            for (let i = 0; i < lines.length; i++) {
+                this._drawLine(context, lines[i], radius, opacity, i, fill);
             }
-            else {
-                context.strokeText(text, pos.x, pos.y);
-            }
             context.globalAlpha = 1;
         }
-        getSidesCount() {
-            return 12;
-        }
         async init(container) {
@@ -49,0 +57,0 @@ const options = container.actualOptions;

No alert changes

Improved metrics

Total package byte prevSize

304710

increased by0.23%

Lines of code

557

increased by7.74%

Dependency changes

• Updated@tsparticles/engine@^3.0.0-beta.4