fix: debounce window resize, check if #1587 is fixed

feat: added firefly preset

core/main/src/Utils/EventListeners.ts

@@ -45,6 +45,7 @@ export class EventListeners {
     private readonly resizeHandler: EventListenerOrEventListenerObject;
 
     private canPush: boolean;
+    private resizeTimeout?: NodeJS.Timeout;
 
     /**
      * Events listener constructor
@@ -151,7 +152,13 @@ export class EventListeners {
     }
 
     private handleWindowResize(): void {
-        this.container.canvas?.windowResize();
+        if (this.resizeTimeout) {
+            clearTimeout(this.resizeTimeout);
+
+            delete this.resizeTimeout;
+        }
+
+        this.resizeTimeout = setTimeout(() => this.container.canvas?.windowResize(), 500);
     }
 
     private handleVisibilityChange(): void {

demo/vanilla/app.js

@@ -23,6 +23,7 @@ app.use("/preset-big-circles", express.static("./node_modules/tsparticles-preset
 app.use("/preset-bubbles", express.static("./node_modules/tsparticles-preset-bubbles/dist"));
 app.use("/preset-confetti", express.static("./node_modules/tsparticles-preset-confetti/dist"));
 app.use("/preset-fire", express.static("./node_modules/tsparticles-preset-fire/dist"));
+app.use("/preset-firefly", express.static("./node_modules/tsparticles-preset-firefly/dist"));
 app.use("/preset-fountain", express.static("./node_modules/tsparticles-preset-fountain/dist"));
 app.use("/preset-links", express.static("./node_modules/tsparticles-preset-links/dist"));
 app.use("/preset-sea-anemone", express.static("./node_modules/tsparticles-preset-sea-anemone/dist"));
@@ -65,6 +66,10 @@ app.get("/presets/fire", function (req, res) {
     res.render("presets/fire");
 });
 
+app.get("/presets/firefly", function (req, res) {
+    res.render("presets/firefly");
+});
+
 app.get("/presets/fountain", function (req, res) {
     res.render("presets/fountain");
 });

demo/vanilla/package.json

@@ -46,6 +46,7 @@
     "tsparticles-preset-bubbles": "^1.12.0",
     "tsparticles-preset-confetti": "^1.12.0",
     "tsparticles-preset-fire": "^1.12.0",
+    "tsparticles-preset-firefly": "^1.12.0",
     "tsparticles-preset-fountain": "^1.12.0",
     "tsparticles-preset-links": "^1.12.0",
     "tsparticles-preset-sea-anemone": "^1.12.0",

demo/vanilla/views/presets/firefly.pug

@@ -0,0 +1,26 @@
+doctype html
+html(lang="en")
+    head
+        meta(charset="utf-8")
+        meta(name="description", content= "tsParticles")
+        meta(name="author", content= "Matteo Bruni")
+        meta(name="apple-mobile-web-app-capable" content="yes")
+        meta(name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no")
+
+        meta(name="twitter:card" content="summary_large_image")
+        meta(name="twitter:creator" content="@HollowMatt_ITA")
+        meta(name="twitter:image:src" content="https://cdn.matteobruni.it/images/particles/demo.png")
+        meta(property="og:title" content="tsParticles - A lightweight TypeScript library for creating particles")
+        meta(property="og:site_name" content="tsParticles")
+        meta(property="og:url" content="https://particles.js.org/")
+        meta(property="og:description" content="A lightweight TypeScript library for creating particles.")
+        meta(property="og:image" content="https://cdn.matteobruni.it/images/particles/demo.png")
+
+        title tsParticles
+
+    body
+        #tsparticles
+
+        script(src="/preset-firefly/tsparticles.preset.firefly.bundle.min.js")
+        script.
+            tsParticles.load("tsparticles", { preset: "firefly" });

demo/vanilla/views/presets/index.pug

@@ -45,6 +45,13 @@ html(lang="en")
                             h5.card-title Fire
                             p.card-text Fire preset demo
                             a.btn.btn-primary(href="fire" target="_blank") See demo
+                .col-4.mt-3
+                    .card
+                        img.card-img-top(src="/images/presets/firefly.png" alt="Firefly")
+                        .card-body
+                            h5.card-title Firefly
+                            p.card-text Firefly preset demo
+                            a.btn.btn-primary(href="firefly" target="_blank") See demo
                 .col-4.mt-3
                     .card
                         img.card-img-top(src="/images/presets/fountain.png" alt="Fountain")
@@ -83,4 +90,4 @@ html(lang="en")
 
         script(src="/jquery/jquery.slim.min.js")
         script(src="/popper.js/umd/popper.min.js")
-        script(src="/bootstrap/js/bootstrap.min.js")
+        script(src="/bootstrap/js/bootstrap.min.js")

presets/firefly/.eslintignore

@@ -0,0 +1,2 @@
+dist
+node_modules

presets/firefly/.eslintrc.js

@@ -0,0 +1,21 @@
+module.exports = {
+    root: true,
+    parser: "@typescript-eslint/parser",
+    plugins: [
+        "@typescript-eslint"
+    ],
+    extends: [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/eslint-recommended",
+        "plugin:@typescript-eslint/recommended",
+        "prettier"
+    ],
+    rules: {
+        "@typescript-eslint/no-explicit-any": "warn",
+        "@typescript-eslint/no-var-requires": "warn",
+        "@typescript-eslint/ban-types": "warn",
+        "@typescript-eslint/explicit-member-accessibility": ["error", {
+            "accessibility": "no-public"
+        }]
+    }
+};

presets/firefly/.prettierrc

@@ -0,0 +1,12 @@
+{
+  "printWidth": 120,
+  "endOfLine": "lf",
+  "overrides": [
+    {
+      "files": "*.ts",
+      "options": {
+        "tabWidth": 4
+      }
+    }
+  ]
+}

presets/firefly/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Matteo Bruni
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

presets/firefly/README.md

@@ -0,0 +1,5 @@
+[![banner](https://particles.js.org/images/banner2.png)](https://particles.js.org)
+
+# tsparticles-preset-firefly
+
+[tsParticles](https://github.com/matteobruni/tsparticles) preset to have a mouse firefly trail configuration.

presets/firefly/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "tsparticles-preset-firefly",
+  "version": "1.12.0",
+  "description": "tsParticles firefly preset",
+  "homepage": "https://particles.js.org/",
+  "scripts": {
+    "prettify:src": "prettier --write ./src",
+    "prettify:readme": "prettier --write ./README.md",
+    "lint": "eslint src --ext .js,.jsx,.ts,.tsx --fix",
+    "compile": "tsc",
+    "bundle": "webpack --mode production",
+    "build": "yarn prettify:src && yarn compile && yarn lint && yarn bundle && yarn prettify:readme",
+    "prepack": "yarn build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/matteobruni/tsparticles.git",
+    "directory": "presets/firefly"
+  },
+  "keywords": [
+    "tsparticles",
+    "particles",
+    "particle",
+    "canvas",
+    "jsparticles",
+    "xparticles",
+    "particles-js",
+    "particles.js",
+    "particles-ts",
+    "particles.ts",
+    "typescript",
+    "javascript",
+    "animation",
+    "web",
+    "html5",
+    "web-design",
+    "webdesign",
+    "css",
+    "html",
+    "css3",
+    "animated",
+    "background",
+    "tsparticles-preset"
+  ],
+  "author": "Matteo Bruni",
+  "license": "MIT",
+  "files": [
+    "dist/**/*"
+  ],
+  "bugs": {
+    "url": "https://github.com/matteobruni/tsparticles/issues"
+  },
+  "main": "dist/index.js",
+  "jsdelivr": "dist/tsparticles.preset.firefly.min.js",
+  "unpkg": "dist/tsparticles.preset.firefly.min.js",
+  "browser": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "devDependencies": {
+    "@babel/core": "^7.14.3",
+    "@types/webpack-env": "^1.16.0",
+    "@typescript-eslint/eslint-plugin": "^4.26.0",
+    "@typescript-eslint/parser": "^4.26.0",
+    "babel-loader": "^8.2.2",
+    "eslint": "^7.27.0",
+    "eslint-config-prettier": "^8.3.0",
+    "prettier": "^2.3.0",
+    "terser-webpack-plugin": "^5.1.3",
+    "typescript": "^4.3.2",
+    "webpack": "^5.38.1",
+    "webpack-bundle-analyzer": "^4.4.2",
+    "webpack-cli": "^4.7.0"
+  },
+  "dependencies": {
+    "tsparticles": "^1.27.0"
+  }
+}

presets/firefly/src/bundle.ts

@@ -0,0 +1,6 @@
+import { tsParticles } from "tsparticles";
+import { loadFireflyPreset } from ".";
+
+loadFireflyPreset(tsParticles);
+
+export { loadFireflyPreset, tsParticles };

presets/firefly/src/index.ts

@@ -0,0 +1,6 @@
+import type { Main } from "tsparticles";
+import { options } from "./options";
+
+export function loadFireflyPreset(tsParticles: Main): void {
+    tsParticles.addPreset("firefly", options);
+}

presets/firefly/src/options.ts

@@ -0,0 +1,59 @@
+import type { ISourceOptions } from "tsparticles";
+import { ClickMode, DestroyType, StartValueType, InteractivityDetect } from "tsparticles";
+
+export const options: ISourceOptions = {
+    fullScreen: {
+        enable: true,
+        zIndex: -1,
+    },
+    fpsLimit: 60,
+    particles: {
+        number: {
+            value: 0,
+        },
+        color: {
+            value: "#fff",
+        },
+        opacity: {
+            value: 1,
+            animation: {
+                enable: true,
+                startValue: StartValueType.max,
+                destroy: DestroyType.min,
+                speed: 0.3,
+                sync: true,
+            },
+        },
+        size: {
+            value: {
+                min: 3,
+                max: 6,
+            },
+        },
+        move: {
+            enable: true,
+            speed: 3,
+            random: false,
+        },
+    },
+    interactivity: {
+        detectsOn: InteractivityDetect.window,
+        events: {
+            onHover: {
+                enable: true,
+                mode: ClickMode.trail,
+            },
+            resize: true,
+        },
+        modes: {
+            trail: {
+                delay: 0.5,
+                pauseOnStop: true,
+                quantity: 4,
+            },
+        },
+    },
+    background: {
+        color: "#000",
+    },
+};