@tsparticles/fireworks 3.6.0-beta.0 → 3.6.0

package/README.md

@@ -68,6 +68,12 @@ fireworks();
 })();
 ```
 
+** Custom Canvas **
+
+```javascript
+fireworks.create(document.getElementById("custom-id"));
+```
+
 ** Fireworks Options **
 
 ```javascript
@@ -76,6 +82,14 @@ fireworks({
 });
 ```
 
+** Custom Canvas with Options **
+
+```javascript
+fireworks.create(document.getElementById("custom-id"), {
+  colors: ["#ffffff", "#ff0000"],
+});
+```
+
 #### Options
 
 The `fireworks` has only a single `options` object parameter, with the following properties:

package/browser/FireworkOptions.js

@@ -1,4 +1,4 @@
-import { isArray, setRangeValue, } from "@tsparticles/engine";
+import { isArray, isNull, setRangeValue, } from "@tsparticles/engine";
 export class FireworkOptions {
     constructor() {
         this.background = "none";
@@ -25,7 +25,7 @@ export class FireworkOptions {
         };
     }
     load(data) {
-        if (!data) {
+        if (isNull(data)) {
             return;
         }
         if (data.background !== undefined) {

package/browser/fireworks.js

@@ -56,23 +56,16 @@ async function initPlugins() {
     initializing = false;
     initialized = true;
 }
-export async function fireworks(idOrOptions, sourceOptions) {
-    await initPlugins();
-    let id;
-    const options = new FireworkOptions();
-    if (isString(idOrOptions)) {
-        id = idOrOptions;
-        options.load(sourceOptions);
-    }
-    else {
-        id = "fireworks";
-        options.load(idOrOptions);
-    }
-    const identity = 1, particlesOptions = {
+function getOptions(options, canvas) {
+    const identity = 1;
+    return {
         detectRetina: true,
         background: {
             color: options.background,
         },
+        fullScreen: {
+            enable: !!canvas,
+        },
         fpsLimit: 60,
         emitters: {
             direction: MoveDirection.top,
@@ -252,12 +245,34 @@ export async function fireworks(idOrOptions, sourceOptions) {
             volume: 50,
         },
     };
-    const container = await tsParticles.load({ id, options: particlesOptions });
+}
+async function getFireworksInstance(id, sourceOptions, canvas) {
+    await initPlugins();
+    const options = new FireworkOptions();
+    options.load(sourceOptions);
+    const particlesOptions = getOptions(options, canvas), container = await tsParticles.load({ id, element: canvas, options: particlesOptions });
     if (!container) {
         return;
     }
     return new FireworksInstance(container);
 }
+export async function fireworks(idOrOptions, sourceOptions) {
+    let id;
+    let options;
+    if (isString(idOrOptions)) {
+        id = idOrOptions;
+        options = sourceOptions ?? {};
+    }
+    else {
+        id = "fireworks";
+        options = idOrOptions ?? {};
+    }
+    return getFireworksInstance(id, options);
+}
+fireworks.create = async (canvas, options) => {
+    const id = canvas.id ?? "fireworks";
+    return getFireworksInstance(id, options ?? {}, canvas);
+};
 fireworks.init = async () => {
     await initPlugins();
 };

package/cjs/FireworkOptions.js

@@ -28,7 +28,7 @@ class FireworkOptions {
         };
     }
     load(data) {
-        if (!data) {
+        if ((0, engine_1.isNull)(data)) {
             return;
         }
         if (data.background !== undefined) {

package/cjs/fireworks.js

@@ -59,23 +59,16 @@ async function initPlugins() {
     initializing = false;
     initialized = true;
 }
-async function fireworks(idOrOptions, sourceOptions) {
-    await initPlugins();
-    let id;
-    const options = new FireworkOptions_js_1.FireworkOptions();
-    if ((0, engine_1.isString)(idOrOptions)) {
-        id = idOrOptions;
-        options.load(sourceOptions);
-    }
-    else {
-        id = "fireworks";
-        options.load(idOrOptions);
-    }
-    const identity = 1, particlesOptions = {
+function getOptions(options, canvas) {
+    const identity = 1;
+    return {
         detectRetina: true,
         background: {
             color: options.background,
         },
+        fullScreen: {
+            enable: !!canvas,
+        },
         fpsLimit: 60,
         emitters: {
             direction: engine_1.MoveDirection.top,
@@ -255,12 +248,34 @@ async function fireworks(idOrOptions, sourceOptions) {
             volume: 50,
         },
     };
-    const container = await engine_1.tsParticles.load({ id, options: particlesOptions });
+}
+async function getFireworksInstance(id, sourceOptions, canvas) {
+    await initPlugins();
+    const options = new FireworkOptions_js_1.FireworkOptions();
+    options.load(sourceOptions);
+    const particlesOptions = getOptions(options, canvas), container = await engine_1.tsParticles.load({ id, element: canvas, options: particlesOptions });
     if (!container) {
         return;
     }
     return new FireworksInstance(container);
 }
+async function fireworks(idOrOptions, sourceOptions) {
+    let id;
+    let options;
+    if ((0, engine_1.isString)(idOrOptions)) {
+        id = idOrOptions;
+        options = sourceOptions ?? {};
+    }
+    else {
+        id = "fireworks";
+        options = idOrOptions ?? {};
+    }
+    return getFireworksInstance(id, options);
+}
+fireworks.create = async (canvas, options) => {
+    const id = canvas.id ?? "fireworks";
+    return getFireworksInstance(id, options ?? {}, canvas);
+};
 fireworks.init = async () => {
     await initPlugins();
 };

package/esm/FireworkOptions.js

@@ -1,4 +1,4 @@
-import { isArray, setRangeValue, } from "@tsparticles/engine";
+import { isArray, isNull, setRangeValue, } from "@tsparticles/engine";
 export class FireworkOptions {
     constructor() {
         this.background = "none";
@@ -25,7 +25,7 @@ export class FireworkOptions {
         };
     }
     load(data) {
-        if (!data) {
+        if (isNull(data)) {
             return;
         }
         if (data.background !== undefined) {

package/esm/fireworks.js

@@ -56,23 +56,16 @@ async function initPlugins() {
     initializing = false;
     initialized = true;
 }
-export async function fireworks(idOrOptions, sourceOptions) {
-    await initPlugins();
-    let id;
-    const options = new FireworkOptions();
-    if (isString(idOrOptions)) {
-        id = idOrOptions;
-        options.load(sourceOptions);
-    }
-    else {
-        id = "fireworks";
-        options.load(idOrOptions);
-    }
-    const identity = 1, particlesOptions = {
+function getOptions(options, canvas) {
+    const identity = 1;
+    return {
         detectRetina: true,
         background: {
             color: options.background,
         },
+        fullScreen: {
+            enable: !!canvas,
+        },
         fpsLimit: 60,
         emitters: {
             direction: MoveDirection.top,
@@ -252,12 +245,34 @@ export async function fireworks(idOrOptions, sourceOptions) {
             volume: 50,
         },
     };
-    const container = await tsParticles.load({ id, options: particlesOptions });
+}
+async function getFireworksInstance(id, sourceOptions, canvas) {
+    await initPlugins();
+    const options = new FireworkOptions();
+    options.load(sourceOptions);
+    const particlesOptions = getOptions(options, canvas), container = await tsParticles.load({ id, element: canvas, options: particlesOptions });
     if (!container) {
         return;
     }
     return new FireworksInstance(container);
 }
+export async function fireworks(idOrOptions, sourceOptions) {
+    let id;
+    let options;
+    if (isString(idOrOptions)) {
+        id = idOrOptions;
+        options = sourceOptions ?? {};
+    }
+    else {
+        id = "fireworks";
+        options = idOrOptions ?? {};
+    }
+    return getFireworksInstance(id, options);
+}
+fireworks.create = async (canvas, options) => {
+    const id = canvas.id ?? "fireworks";
+    return getFireworksInstance(id, options ?? {}, canvas);
+};
 fireworks.init = async () => {
     await initPlugins();
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/fireworks",
-  "version": "3.6.0-beta.0",
+  "version": "3.6.0",
   "description": "Easily create highly customizable particle animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -99,15 +99,15 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@tsparticles/basic": "^3.6.0-beta.0",
-    "@tsparticles/effect-trail": "^3.6.0-beta.0",
-    "@tsparticles/engine": "^3.6.0-beta.0",
-    "@tsparticles/plugin-emitters": "^3.6.0-beta.0",
-    "@tsparticles/plugin-emitters-shape-square": "^3.6.0-beta.0",
-    "@tsparticles/plugin-sounds": "^3.6.0-beta.0",
-    "@tsparticles/updater-destroy": "^3.6.0-beta.0",
-    "@tsparticles/updater-life": "^3.6.0-beta.0",
-    "@tsparticles/updater-rotate": "^3.6.0-beta.0"
+    "@tsparticles/basic": "^3.6.0",
+    "@tsparticles/effect-trail": "^3.6.0",
+    "@tsparticles/engine": "^3.6.0",
+    "@tsparticles/plugin-emitters": "^3.6.0",
+    "@tsparticles/plugin-emitters-shape-square": "^3.6.0",
+    "@tsparticles/plugin-sounds": "^3.6.0",
+    "@tsparticles/updater-destroy": "^3.6.0",
+    "@tsparticles/updater-life": "^3.6.0",
+    "@tsparticles/updater-rotate": "^3.6.0"
   },
   "publishConfig": {
     "access": "public"

package/report.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
-    <title>@tsparticles/fireworks [7 Oct 2024 at 10:42]</title>
+    <title>@tsparticles/fireworks [19 Nov 2024 at 00:03]</title>
     <link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABrVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+O1foceMD///+J0/qK1Pr7/v8Xdr/9///W8P4UdL7L7P0Scr2r4Pyj3vwad8D5/f/2/f+55f3E6f34+/2H0/ojfMKpzOd0rNgQcb3F3O/j9f7c8v6g3Pz0/P/w+v/q+P7n9v6T1/uQ1vuE0vqLut/y+v+Z2fvt+f+15Pzv9fuc2/vR7v2V2Pvd6/bg9P7I6/285/2y4/yp3/zp8vk8i8kqgMT7/P31+fyv4vxGkcz6/P6/6P3j7vfS5PNnpNUxhcbO7f7F6v3O4vHK3/DA2u631Ouy0eqXweKJud5wqthfoNMMbLvY8f73+v2dxeR8sNtTmdDx9/zX6PSjyeaCtd1YnNGX2PuQveCGt95Nls42h8dLlM3F4vBtAAAAM3RSTlMAAyOx0/sKBvik8opWGBMOAe3l1snDm2E9LSb06eHcu5JpHbarfHZCN9CBb08zzkdNS0kYaptYAAAFV0lEQVRYw92X51/aYBDHHS2O2qqttVbrqNq9m+TJIAYIShBkWwqIiCgoWvfeq7Z2/s29hyQNyUcR7LveGwVyXy6XH8/9rqxglLfUPLxVduUor3h0rfp2TYvpivk37929TkG037hffoX0+peVtZQc1589rigVUdXS/ABSAyEmGIO/1XfvldSK8vs3OqB6u3m0nxmIrvgB0dj7rr7Y9IbuF68hnfFaiHA/sxqm0wciIG43P60qKv9WXWc1RXGh/mFESFABTSBi0sNAKzqet17eCtOb3kZIDwxEEU0oAIJGYxNBDhBND29e0rtXXbcpuPmED9IhEAAQ/AXEaF8EPmnrrKsv0LvWR3fg5sWDNAFZOgAgaKvZDogHNU9MFwnnYROkc56RD5CjAbQX9Ow4g7upCsvYu55aSI/Nj0H1akgKQEUM94dwK65hYRmFU9MIcH/fqJYOZYcnuJSU/waKDgTOEVaVKhwrTRP5XzgSpAITYzom7UvkhFX5VutmxeNnWDjjswTKTyfgluNDGbUpWissXhF3s7mlSml+czWkg3D0l1nNjGNjz3myOQOa1KM/jOS6ebdbAVTCi4gljHSFrviza7tOgRWcS0MOUX9zdNgag5w7rRqA44Lzw0hr1WqES36dFliSJFlh2rXIae3FFcDDgKdxrUIDePr8jGcSClV1u7A9xeN0ModY/pHMxmR1EzRh8TJiwqsHmKW0l4FCEZI+jHio+JdPPE9qwQtTRxku2D8sIeRL2LnxWSllANCQGOIiqVHAz2ye2JR0DcH+HoxDkaADLjgxjKQ+AwCX/g0+DNgdG0ukYCONAe+dbc2IAc6fwt1ARoDSezNHxV2Cmzwv3O6lDMV55edBGwGK9n1+x2F8EDfAGCxug8MhpsMEcTEAWf3rx2vZhe/LAmtIn/6apE6PN0ULKgywD9mmdxbmFl3OvD5AS5fW5zLbv/YHmcsBTjf/afDz3MaZTVCfAP9z6/Bw6ycv8EUBWJIn9zYcoAWWlW9+OzO3vkTy8H+RANLmdrpOuYWdZYEXpo+TlCJrW5EARb7fF+bWdqf3hhyZI1nWJQHgznErZhbjoEsWqi8dQNoE294aldzFurwSABL2XXMf9+H1VQGke9exw5P/AnA5Pv5ngMul7LOvO922iwACu8WkCwLCafvM4CeWPxfA8lNHcWZSoi8EwMAIciKX2Z4SWCMAa3snCZ/G4EA8D6CMLNFsGQhkkz/gQNEBbPCbWsxGUpYVu3z8IyNAknwJkfPMEhLyrdi5RTyUVACkw4GSFRNWJNEW+fgPGwHD8/JxnRuLabN4CGNRkAE23na2+VmEAUmrYymSGjMAYqH84YUIyzgzs3XC7gNgH36Vcc4zKY9o9fgPBXUAiHHwVboBHGLiX6Zcjp1f2wu4tvzZKo0ecPnDtQYDQvJXaBeNzce45Fp28ZQLrEZVuFqgBwOalArKXnW1UzlnSusQKJqKYNuz4tOnI6sZG4zanpemv+7ySU2jbA9h6uhcgpfy6G2PahirDZ6zvq6zDduMVFTKvzw8wgyEdelwY9in3XkEPs3osJuwRQ4qTkfzifndg9Gfc4pdsu82+tTnHZTBa2EAMrqr2t43pguc8tNm7JQVQ2S0ukj2d22dhXYP0/veWtwKrCkNoNimAN5+Xr/oLrxswKbVJjteWrX7eR63o4j9q0GxnaBdWgGA5VStpanIjQmEhV0/nVt5VOFUvix6awJhPcAaTEShgrG+iGyvb5a0Ndb1YGHFPEwoqAinoaykaID1o1pdPNu7XsnCKQ3R+hwWIIhGvORcJUBYXe3Xa3vq/mF/N9V13ugufMkfXn+KHsRD0B8AAAAASUVORK5CYII=" type="image/x-icon" />
 
     <script>