@tsparticles/shape-text - npm Package Compare versions

Comparing version 3.0.0-alpha.1 to 3.0.0-beta.0

browser/index.js

 import { TextDrawer, validTypes } from "./TextDrawer";
-export async function loadTextShape(engine) {
-    await engine.addShape(validTypes, new TextDrawer());
+export async function loadTextShape(engine, refresh = true) {
+    await engine.addShape(validTypes, new TextDrawer(), refresh);
 }

browser/TextDrawer.js

@@ -1,6 +0,5 @@
-import { executeOnSingleOrMultiple, isInArray, itemFromSingleOrMultiple, loadFont } from "@tsparticles/engine";
+import { executeOnSingleOrMultiple, isInArray, itemFromSingleOrMultiple, loadFont, } from "@tsparticles/engine";
 export const validTypes = ["text", "character", "char"];
 export class TextDrawer {
     draw(context, particle, radius, opacity) {
-        var _a, _b, _c;
         const character = particle.shapeData;
@@ -14,7 +13,6 @@ if (character === undefined) {
         }
-        const textParticle = particle;
-        if (textParticle.text === undefined) {
-            textParticle.text = itemFromSingleOrMultiple(textData, particle.randomIndexData);
+        if (particle.text === undefined) {
+            particle.text = itemFromSingleOrMultiple(textData, particle.randomIndexData);
         }
-        const text = textParticle.text, style = (_a = character.style) !== null && _a !== void 0 ? _a : "", weight = (_b = character.weight) !== null && _b !== void 0 ? _b : "400", size = Math.round(radius) * 2, font = (_c = character.font) !== null && _c !== void 0 ? _c : "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.fill, offsetX = (text.length * radius) / 2;
         context.font = `${style} ${weight} ${size}px "${font}"`;
@@ -49,2 +47,16 @@ const pos = {
     }
+    particleInit(container, particle) {
+        if (!particle.shape || !validTypes.includes(particle.shape)) {
+            return;
+        }
+        const character = particle.shapeData;
+        if (character === undefined) {
+            return;
+        }
+        const textData = character.value;
+        if (textData === undefined) {
+            return;
+        }
+        particle.text = itemFromSingleOrMultiple(textData, particle.randomIndexData);
+    }
 }

cjs/index.js

 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadTextShape = void 0;
 const TextDrawer_1 = require("./TextDrawer");
-function loadTextShape(engine) {
-    return __awaiter(this, void 0, void 0, function* () {
-        yield engine.addShape(TextDrawer_1.validTypes, new TextDrawer_1.TextDrawer());
-    });
+async function loadTextShape(engine, refresh = true) {
+    await engine.addShape(TextDrawer_1.validTypes, new TextDrawer_1.TextDrawer(), refresh);
 }
 exports.loadTextShape = loadTextShape;

cjs/TextDrawer.js

 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -17,3 +8,2 @@ exports.TextDrawer = exports.validTypes = void 0;
     draw(context, particle, radius, opacity) {
-        var _a, _b, _c;
         const character = particle.shapeData;
@@ -27,7 +17,6 @@ if (character === undefined) {
         }
-        const textParticle = particle;
-        if (textParticle.text === undefined) {
-            textParticle.text = (0, engine_1.itemFromSingleOrMultiple)(textData, particle.randomIndexData);
+        if (particle.text === undefined) {
+            particle.text = (0, engine_1.itemFromSingleOrMultiple)(textData, particle.randomIndexData);
         }
-        const text = textParticle.text, style = (_a = character.style) !== null && _a !== void 0 ? _a : "", weight = (_b = character.weight) !== null && _b !== void 0 ? _b : "400", size = Math.round(radius) * 2, font = (_c = character.font) !== null && _c !== void 0 ? _c : "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.fill, offsetX = (text.length * radius) / 2;
         context.font = `${style} ${weight} ${size}px "${font}"`;
@@ -50,17 +39,29 @@ const pos = {
     }
-    init(container) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const options = container.actualOptions;
-            if (exports.validTypes.find((t) => (0, engine_1.isInArray)(t, options.particles.shape.type))) {
-                const shapeOptions = exports.validTypes
-                    .map((t) => options.particles.shape.options[t])
-                    .find((t) => !!t), promises = [];
-                (0, engine_1.executeOnSingleOrMultiple)(shapeOptions, (shape) => {
-                    promises.push((0, engine_1.loadFont)(shape.font, shape.weight));
-                });
-                yield Promise.all(promises);
-            }
-        });
+    async init(container) {
+        const options = container.actualOptions;
+        if (exports.validTypes.find((t) => (0, engine_1.isInArray)(t, options.particles.shape.type))) {
+            const shapeOptions = exports.validTypes
+                .map((t) => options.particles.shape.options[t])
+                .find((t) => !!t), promises = [];
+            (0, engine_1.executeOnSingleOrMultiple)(shapeOptions, (shape) => {
+                promises.push((0, engine_1.loadFont)(shape.font, shape.weight));
+            });
+            await Promise.all(promises);
+        }
     }
+    particleInit(container, particle) {
+        if (!particle.shape || !exports.validTypes.includes(particle.shape)) {
+            return;
+        }
+        const character = particle.shapeData;
+        if (character === undefined) {
+            return;
+        }
+        const textData = character.value;
+        if (textData === undefined) {
+            return;
+        }
+        particle.text = (0, engine_1.itemFromSingleOrMultiple)(textData, particle.randomIndexData);
+    }
 }
 exports.TextDrawer = TextDrawer;

esm/index.js

 import { TextDrawer, validTypes } from "./TextDrawer";
-export async function loadTextShape(engine) {
-    await engine.addShape(validTypes, new TextDrawer());
+export async function loadTextShape(engine, refresh = true) {
+    await engine.addShape(validTypes, new TextDrawer(), refresh);
 }

esm/TextDrawer.js

@@ -1,6 +0,5 @@
-import { executeOnSingleOrMultiple, isInArray, itemFromSingleOrMultiple, loadFont } from "@tsparticles/engine";
+import { executeOnSingleOrMultiple, isInArray, itemFromSingleOrMultiple, loadFont, } from "@tsparticles/engine";
 export const validTypes = ["text", "character", "char"];
 export class TextDrawer {
     draw(context, particle, radius, opacity) {
-        var _a, _b, _c;
         const character = particle.shapeData;
@@ -14,7 +13,6 @@ if (character === undefined) {
         }
-        const textParticle = particle;
-        if (textParticle.text === undefined) {
-            textParticle.text = itemFromSingleOrMultiple(textData, particle.randomIndexData);
+        if (particle.text === undefined) {
+            particle.text = itemFromSingleOrMultiple(textData, particle.randomIndexData);
         }
-        const text = textParticle.text, style = (_a = character.style) !== null && _a !== void 0 ? _a : "", weight = (_b = character.weight) !== null && _b !== void 0 ? _b : "400", size = Math.round(radius) * 2, font = (_c = character.font) !== null && _c !== void 0 ? _c : "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.fill, offsetX = (text.length * radius) / 2;
         context.font = `${style} ${weight} ${size}px "${font}"`;
@@ -49,2 +47,16 @@ const pos = {
     }
+    particleInit(container, particle) {
+        if (!particle.shape || !validTypes.includes(particle.shape)) {
+            return;
+        }
+        const character = particle.shapeData;
+        if (character === undefined) {
+            return;
+        }
+        const textData = character.value;
+        if (textData === undefined) {
+            return;
+        }
+        particle.text = itemFromSingleOrMultiple(textData, particle.randomIndexData);
+    }
 }

package.json

 {
   "name": "@tsparticles/shape-text",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-beta.0",
   "description": "tsParticles text shape",
@@ -48,8 +48,9 @@ "homepage": "https://particles.js.org",
   "types": "types/index.d.ts",
+  "sideEffects": false,
+  "dependencies": {
+    "@tsparticles/engine": "^3.0.0-beta.0"
+  },
   "publishConfig": {
     "access": "public"
-  },
-  "dependencies": {
-    "@tsparticles/engine": "^3.0.0-alpha.1"
   }
-}
+}

README.md

@@ -5,5 +5,5 @@ [![banner](https://particles.js.org/images/banner2.png)](https://particles.js.org)
 
-[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-shape-text/badge)](https://www.jsdelivr.com/package/npm/tsparticles-shape-text)
-[![npmjs](https://badge.fury.io/js/tsparticles-shape-text.svg)](https://www.npmjs.com/package/tsparticles-shape-text)
-[![npmjs](https://img.shields.io/npm/dt/tsparticles-shape-text)](https://www.npmjs.com/package/tsparticles-shape-text) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
+[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@tsparticles/shape-text/badge)](https://www.jsdelivr.com/package/npm/@tsparticles/shape-text)
+[![npmjs](https://badge.fury.io/js/@tsparticles/shape-text.svg)](https://www.npmjs.com/package/@tsparticles/shape-text)
+[![npmjs](https://img.shields.io/npm/dt/@tsparticles/shape-text)](https://www.npmjs.com/package/@tsparticles/shape-text) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
 
@@ -30,3 +30,3 @@ [tsParticles](https://github.com/matteobruni/tsparticles) additional text shape.
 (async () => {
-  await loadTextShape();
+  await loadTextShape(tsParticles);
 
@@ -48,3 +48,3 @@ await tsParticles.load({
 ```shell
-$ npm install tsparticles-shape-text
+$ npm install @tsparticles/shape-text
 ```
@@ -55,3 +55,3 @@
 ```shell
-$ yarn add tsparticles-shape-text
+$ yarn add @tsparticles/shape-text
 ```
@@ -62,6 +62,8 @@
 ```javascript
-const { tsParticles } = require("tsparticles-engine");
-const { loadTextShape } = require("tsparticles-shape-text");
+const { tsParticles } = require("@tsparticles/engine");
+const { loadTextShape } = require("@tsparticles/shape-text");
 
-loadTextShape(tsParticles);
+(async () => {
+  await loadTextShape(tsParticles);
+})();
 ```
@@ -72,6 +74,8 @@
 ```javascript
-import { tsParticles } from "tsparticles-engine";
-import { loadTextShape } from "tsparticles-shape-text";
+import { tsParticles } from "@tsparticles/engine";
+import { loadTextShape } from "@tsparticles/shape-text";
 
-loadTextShape(tsParticles);
+(async () => {
+  await loadTextShape(tsParticles);
+})();
 ```

tsparticles.shape.text.js

@@ -7,3 +7,3 @@ /*!
  * How to use? : Check the GitHub README
- * v3.0.0-alpha.1
+ * v3.0.0-beta.0
  */
@@ -95,3 +95,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 __webpack_require__.d(__webpack_exports__, {
-  "loadTextShape": () => (/* binding */ loadTextShape)
+  loadTextShape: () => (/* binding */ loadTextShape)
 });
@@ -106,3 +106,2 @@
   draw(context, particle, radius, opacity) {
-    var _a, _b, _c;
     const character = particle.shapeData;
@@ -116,11 +115,10 @@ if (character === undefined) {
     }
-    const textParticle = particle;
-    if (textParticle.text === undefined) {
-      textParticle.text = (0,engine_root_window_.itemFromSingleOrMultiple)(textData, particle.randomIndexData);
+    if (particle.text === undefined) {
+      particle.text = (0,engine_root_window_.itemFromSingleOrMultiple)(textData, particle.randomIndexData);
     }
-    const text = textParticle.text,
-      style = (_a = character.style) !== null && _a !== void 0 ? _a : "",
-      weight = (_b = character.weight) !== null && _b !== void 0 ? _b : "400",
+    const text = particle.text,
+      style = character.style ?? "",
+      weight = character.weight ?? "400",
       size = Math.round(radius) * 2,
-      font = (_c = character.font) !== null && _c !== void 0 ? _c : "Verdana",
+      font = character.font ?? "Verdana",
       fill = particle.fill,
@@ -155,7 +153,21 @@ offsetX = text.length * radius / 2;
   }
+  particleInit(container, particle) {
+    if (!particle.shape || !validTypes.includes(particle.shape)) {
+      return;
+    }
+    const character = particle.shapeData;
+    if (character === undefined) {
+      return;
+    }
+    const textData = character.value;
+    if (textData === undefined) {
+      return;
+    }
+    particle.text = (0,engine_root_window_.itemFromSingleOrMultiple)(textData, particle.randomIndexData);
+  }
 }
 ;// CONCATENATED MODULE: ./dist/browser/index.js
 
-async function loadTextShape(engine) {
-  await engine.addShape(validTypes, new TextDrawer());
+async function loadTextShape(engine, refresh = true) {
+  await engine.addShape(validTypes, new TextDrawer(), refresh);
 }
@@ -162,0 +174,0 @@ })();

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 i=o[e]={exports:{}};return t[e](i,i.exports,r),i.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:()=>i});var e=r(533);const t=["text","character","char"];class o{draw(t,o,r,n){var i,a,l;const s=o.shapeData;if(void 0===s)return;const p=s.value;if(void 0===p)return;const c=o;void 0===c.text&&(c.text=(0,e.itemFromSingleOrMultiple)(p,o.randomIndexData));const d=c.text,f=null!==(i=s.style)&&void 0!==i?i:"",u=null!==(a=s.weight)&&void 0!==a?a:"400",x=2*Math.round(r),y=null!==(l=s.font)&&void 0!==l?l:"Verdana",v=o.fill,g=d.length*r/2;t.font=`${f} ${u} ${x}px "${y}"`;const h={x:-g,y:r/2};t.globalAlpha=n,v?t.fillText(d,h.x,h.y):t.strokeText(d,h.x,h.y),t.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)}}}async function i(e){await e.addShape(t,new o)}})(),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 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,o,r,n){const a=o.shapeData;if(void 0===a)return;const i=a.value;if(void 0===i)return;void 0===o.text&&(o.text=(0,e.itemFromSingleOrMultiple)(i,o.randomIndexData));const s=o.text,l=a.style??"",p=a.weight??"400",c=2*Math.round(r),d=a.font??"Verdana",f=o.fill,u=s.length*r/2;t.font=`${l} ${p} ${c}px "${d}"`;const x={x:-u,y:r/2};t.globalAlpha=n,f?t.fillText(s,x.x,x.y):t.strokeText(s,x.x,x.y),t.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})()));

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

@@ -1,8 +0,1 @@
-/*!
- * Author : Matteo Bruni
- * MIT license: https://opensource.org/licenses/MIT
- * Demo / Generator : https://particles.js.org/
- * GitHub : https://www.github.com/matteobruni/tsparticles
- * How to use? : Check the GitHub README
- * v3.0.0-alpha.1
- */
+/*! tsParticles Text Shape v3.0.0-beta.0 by Matteo Bruni */

types/index.d.ts

 import type { Engine } from "@tsparticles/engine";
-export declare function loadTextShape(engine: Engine): Promise<void>;
+export declare function loadTextShape(engine: Engine, refresh?: boolean): Promise<void>;

types/TextDrawer.d.ts

@@ -1,7 +0,9 @@
-import type { Container, IParticle, IShapeDrawer } from "@tsparticles/engine";
+import { type Container, type IShapeDrawer } from "@tsparticles/engine";
+import type { TextParticle } from "./TextParticle";
 export declare const validTypes: string[];
 export declare class TextDrawer implements IShapeDrawer {
-    draw(context: CanvasRenderingContext2D, particle: IParticle, radius: number, opacity: number): void;
+    draw(context: CanvasRenderingContext2D, particle: TextParticle, radius: number, opacity: number): void;
     getSidesCount(): number;
     init(container: Container): Promise<void>;
+    particleInit(container: Container, particle: TextParticle): void;
 }

umd/index.js

@@ -14,6 +14,6 @@ (function (factory) {
     const TextDrawer_1 = require("./TextDrawer");
-    async function loadTextShape(engine) {
-        await engine.addShape(TextDrawer_1.validTypes, new TextDrawer_1.TextDrawer());
+    async function loadTextShape(engine, refresh = true) {
+        await engine.addShape(TextDrawer_1.validTypes, new TextDrawer_1.TextDrawer(), refresh);
     }
     exports.loadTextShape = loadTextShape;
 });

umd/TextDrawer.js

@@ -17,3 +17,2 @@ (function (factory) {
         draw(context, particle, radius, opacity) {
-            var _a, _b, _c;
             const character = particle.shapeData;
@@ -27,7 +26,6 @@ if (character === undefined) {
             }
-            const textParticle = particle;
-            if (textParticle.text === undefined) {
-                textParticle.text = (0, engine_1.itemFromSingleOrMultiple)(textData, particle.randomIndexData);
+            if (particle.text === undefined) {
+                particle.text = (0, engine_1.itemFromSingleOrMultiple)(textData, particle.randomIndexData);
             }
-            const text = textParticle.text, style = (_a = character.style) !== null && _a !== void 0 ? _a : "", weight = (_b = character.weight) !== null && _b !== void 0 ? _b : "400", size = Math.round(radius) * 2, font = (_c = character.font) !== null && _c !== void 0 ? _c : "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.fill, offsetX = (text.length * radius) / 2;
             context.font = `${style} ${weight} ${size}px "${font}"`;
@@ -62,4 +60,18 @@ const pos = {
         }
+        particleInit(container, particle) {
+            if (!particle.shape || !exports.validTypes.includes(particle.shape)) {
+                return;
+            }
+            const character = particle.shapeData;
+            if (character === undefined) {
+                return;
+            }
+            const textData = character.value;
+            if (textData === undefined) {
+                return;
+            }
+            particle.text = (0, engine_1.itemFromSingleOrMultiple)(textData, particle.randomIndexData);
+        }
     }
     exports.TextDrawer = TextDrawer;
 });

No alert changes

Improved metrics

Total package byte prevSize

305177

increased by0.04%

Lines of code

511

increased by7.58%

Number of lines in readme file

76

increased by5.56%

Dependency changes

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