@tsparticles/plugin-polygon-mask 3.0.0-alpha.1 → 3.0.0-beta.0

package/README.md

@@ -2,9 +2,9 @@
 
 # tsParticles Polygon Mask Plugin
 
-[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-plugin-polygon-mask/badge)](https://www.jsdelivr.com/package/npm/tsparticles-plugin-polygon-mask)
-[![npmjs](https://badge.fury.io/js/tsparticles-plugin-polygon-mask.svg)](https://www.npmjs.com/package/tsparticles-plugin-polygon-mask)
-[![npmjs](https://img.shields.io/npm/dt/tsparticles-plugin-polygon-mask)](https://www.npmjs.com/package/tsparticles-plugin-polygon-mask) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
+[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@tsparticles/plugin-polygon-mask/badge)](https://www.jsdelivr.com/package/npm/@tsparticles/plugin-polygon-mask)
+[![npmjs](https://badge.fury.io/js/@tsparticles/plugin-polygon-mask.svg)](https://www.npmjs.com/package/@tsparticles/plugin-polygon-mask)
+[![npmjs](https://img.shields.io/npm/dt/@tsparticles/plugin-polygon-mask)](https://www.npmjs.com/package/@tsparticles/plugin-polygon-mask) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
 
 [tsParticles](https://github.com/matteobruni/tsparticles) plugin for particles polygon mask effect.
 
@@ -42,29 +42,33 @@ Once the scripts are loaded you can set up `tsParticles` and the plugin like thi
 This package is compatible also with ES or CommonJS modules, firstly this needs to be installed, like this:
 
 ```shell
-$ npm install tsparticles-plugin-polygon-mask
+$ npm install @tsparticles/plugin-polygon-mask
 ```
 
 or
 
 ```shell
-$ yarn add tsparticles-plugin-polygon-mask
+$ yarn add @tsparticles/plugin-polygon-mask
 ```
 
 Then you need to import it in the app, like this:
 
 ```javascript
-const { tsParticles } = require("tsparticles-engine");
-const { loadPolygonMaskPlugin } = require("tsparticles-plugin-polygon-mask");
+const { tsParticles } = require("@tsparticles/engine");
+const { loadPolygonMaskPlugin } = require("@tsparticles/plugin-polygon-mask");
 
-loadPolygonMaskPlugin(tsParticles); // awaitable
+(async () => {
+  await loadPolygonMaskPlugin(tsParticles);
+})();
 ```
 
 or
 
 ```javascript
-import { tsParticles } from "tsparticles-engine";
-import { loadPolygonMaskPlugin } from "tsparticles-plugin-polygon-mask";
+import { tsParticles } from "@tsparticles/engine";
+import { loadPolygonMaskPlugin } from "@tsparticles/plugin-polygon-mask";
 
-loadPolygonMaskPlugin(tsParticles); // awaitable
+(async () => {
+  await loadPolygonMaskPlugin(tsParticles);
+})();
 ```

package/browser/Options/Classes/PolygonMask.js

@@ -1,8 +1,8 @@
+import { deepExtend, isString, } from "@tsparticles/engine";
 import { PolygonMaskDraw } from "./PolygonMaskDraw";
 import { PolygonMaskInline } from "./PolygonMaskInline";
 import { PolygonMaskLocalSvg } from "./PolygonMaskLocalSvg";
 import { PolygonMaskMove } from "./PolygonMaskMove";
-import { deepExtend } from "@tsparticles/engine";
 export class PolygonMask {
     constructor() {
         this.draw = new PolygonMaskDraw();
@@ -12,12 +12,6 @@ export class PolygonMask {
         this.scale = 1;
         this.type = "none";
     }
-    get inlineArrangement() {
-        return this.inline.arrangement;
-    }
-    set inlineArrangement(value) {
-        this.inline.arrangement = value;
-    }
     load(data) {
         if (!data) {
             return;
@@ -41,7 +35,7 @@ export class PolygonMask {
             this.url = data.url;
         }
         if (data.data !== undefined) {
-            if (typeof data.data === "string") {
+            if (isString(data.data)) {
                 this.data = data.data;
             }
             else {

package/browser/Options/Classes/PolygonMaskDraw.js

@@ -1,34 +1,17 @@
-import { OptionsColor } from "@tsparticles/engine";
 import { PolygonMaskDrawStroke } from "./PolygonMaskDrawStroke";
 export class PolygonMaskDraw {
     constructor() {
         this.enable = false;
         this.stroke = new PolygonMaskDrawStroke();
     }
-    get lineColor() {
-        return this.stroke.color;
-    }
-    set lineColor(value) {
-        this.stroke.color = OptionsColor.create(this.stroke.color, value);
-    }
-    get lineWidth() {
-        return this.stroke.width;
-    }
-    set lineWidth(value) {
-        this.stroke.width = value;
-    }
     load(data) {
-        var _a;
         if (!data) {
             return;
         }
         if (data.enable !== undefined) {
             this.enable = data.enable;
         }
-        const stroke = (_a = data.stroke) !== null && _a !== void 0 ? _a : {
-            color: data.lineColor,
-            width: data.lineWidth,
-        };
+        const stroke = data.stroke;
         this.stroke.load(stroke);
     }
 }

package/browser/Options/Classes/PolygonMaskDrawStroke.js

@@ -1,4 +1,4 @@
-import { OptionsColor, stringToAlpha } from "@tsparticles/engine";
+import { OptionsColor, isString, stringToAlpha } from "@tsparticles/engine";
 export class PolygonMaskDrawStroke {
     constructor() {
         this.color = new OptionsColor();
@@ -6,13 +6,12 @@ export class PolygonMaskDrawStroke {
         this.opacity = 1;
     }
     load(data) {
-        var _a;
         if (!data) {
             return;
         }
         this.color = OptionsColor.create(this.color, data.color);
-        if (typeof this.color.value === "string") {
-            this.opacity = (_a = stringToAlpha(this.color.value)) !== null && _a !== void 0 ? _a : this.opacity;
+        if (isString(this.color.value)) {
+            this.opacity = stringToAlpha(this.color.value) ?? this.opacity;
         }
         if (data.opacity !== undefined) {
             this.opacity = data.opacity;