tsparticles 1.36.0 → 1.37.0

package/tsparticles.slim.js

@@ -64,6 +64,7 @@
       ParticlesInteractorBase: () => ParticlesInteractorBase,
       Point: () => Point,
       Rectangle: () => Rectangle,
+      ResponsiveMode: () => ResponsiveMode,
       RollMode: () => RollMode,
       RotateDirection: () => RotateDirection,
       ShapeType: () => ShapeType,
@@ -263,6 +264,11 @@
       ThemeMode["dark"] = "dark";
       ThemeMode["light"] = "light";
     })(ThemeMode || (ThemeMode = {}));
+    var ResponsiveMode;
+    (function(ResponsiveMode) {
+      ResponsiveMode["screen"] = "screen";
+      ResponsiveMode["canvas"] = "canvas";
+    })(ResponsiveMode || (ResponsiveMode = {}));
     var AnimationStatus;
     (function(AnimationStatus) {
       AnimationStatus[AnimationStatus["increasing"] = 0] = "increasing";
@@ -5678,7 +5684,7 @@
     }
     class Interactivity {
       constructor() {
-        this.detectsOn = InteractivityDetect.canvas;
+        this.detectsOn = InteractivityDetect.window;
         this.events = new Events;
         this.modes = new Modes;
       }
@@ -5829,8 +5835,8 @@
     }
     class FullScreen {
       constructor() {
-        this.enable = false;
-        this.zIndex = -1;
+        this.enable = true;
+        this.zIndex = 0;
       }
       load(data) {
         if (!data) {
@@ -5897,6 +5903,7 @@
       constructor() {
         this.maxWidth = Infinity;
         this.options = {};
+        this.mode = ResponsiveMode.canvas;
       }
       load(data) {
         if (!data) {
@@ -5905,6 +5912,13 @@
         if (data.maxWidth !== undefined) {
           this.maxWidth = data.maxWidth;
         }
+        if (data.mode !== undefined) {
+          if (data.mode === ResponsiveMode.screen) {
+            this.mode = ResponsiveMode.screen;
+          } else {
+            this.mode = ResponsiveMode.canvas;
+          }
+        }
         if (data.options !== undefined) {
           this.options = deepExtend({}, data.options);
         }
@@ -6043,7 +6057,7 @@
       }
       setResponsive(width, pxRatio, defaultOptions) {
         this.load(defaultOptions);
-        const responsiveOptions = this.responsive.find((t => t.maxWidth * pxRatio > width));
+        const responsiveOptions = this.responsive.find((t => t.mode === ResponsiveMode.screen && screen ? t.maxWidth * pxRatio > screen.availWidth : t.maxWidth * pxRatio > width));
         this.load(responsiveOptions === null || responsiveOptions === void 0 ? void 0 : responsiveOptions.options);
         return responsiveOptions === null || responsiveOptions === void 0 ? void 0 : responsiveOptions.maxWidth;
       }
@@ -6073,6 +6087,7 @@
         this.canvas = new Canvas(this);
         this.particles = new Particles(this);
         this.drawer = new FrameManager(this);
+        this.presets = presets;
         this.pathGenerator = {
           generate: () => {
             const v = Vector.create(0, 0);
@@ -6101,17 +6116,6 @@
         this.density = 1;
         this._options = new Options;
         this.actualOptions = new Options;
-        for (const preset of presets) {
-          this._options.load(Plugins.getPreset(preset));
-        }
-        const shapes = Plugins.getSupportedShapes();
-        for (const type of shapes) {
-          const drawer = Plugins.getShapeDrawer(type);
-          if (drawer) {
-            this.drawers.set(type, drawer);
-          }
-        }
-        this._options.load(this._sourceOptions);
         this.eventListeners = new EventListeners(this);
         if (typeof IntersectionObserver !== "undefined" && IntersectionObserver) {
           this.intersectionObserver = new IntersectionObserver((entries => this.intersectionManager(entries)));
@@ -6253,6 +6257,7 @@
         this.particles.linksColors = new Map;
         delete this.particles.grabLineColor;
         delete this.particles.linksColor;
+        this._sourceOptions = this._options;
       }
       async loadTheme(name) {
         this.currentTheme = name;
@@ -6366,6 +6371,18 @@
         return false;
       }
       async init() {
+        this._options = new Options;
+        for (const preset of this.presets) {
+          this._options.load(Plugins.getPreset(preset));
+        }
+        const shapes = Plugins.getSupportedShapes();
+        for (const type of shapes) {
+          const drawer = Plugins.getShapeDrawer(type);
+          if (drawer) {
+            this.drawers.set(type, drawer);
+          }
+        }
+        this._options.load(this._sourceOptions);
         this.actualOptions = new Options;
         this.actualOptions.load(this._options);
         this.retina.init();
@@ -6647,7 +6664,12 @@
       domItem(index) {
         return Loader.domItem(index);
       }
-      addShape(shape, drawer, init, afterEffect, destroy) {
+      async refresh() {
+        for (const instance of this.dom()) {
+          await instance.refresh();
+        }
+      }
+      async addShape(shape, drawer, init, afterEffect, destroy) {
         let customDrawer;
         if (typeof drawer === "function") {
           customDrawer = {
@@ -6660,21 +6682,27 @@
           customDrawer = drawer;
         }
         Plugins.addShapeDrawer(shape, customDrawer);
+        await this.refresh();
       }
-      addPreset(preset, options, override = false) {
+      async addPreset(preset, options, override = false) {
         Plugins.addPreset(preset, options, override);
+        await this.refresh();
       }
-      addPlugin(plugin) {
+      async addPlugin(plugin) {
         Plugins.addPlugin(plugin);
+        await this.refresh();
       }
-      addPathGenerator(name, generator) {
+      async addPathGenerator(name, generator) {
         Plugins.addPathGenerator(name, generator);
+        await this.refresh();
       }
-      addInteractor(name, interactorInitializer) {
+      async addInteractor(name, interactorInitializer) {
         Plugins.addInteractor(name, interactorInitializer);
+        await this.refresh();
       }
-      addParticleUpdater(name, updaterInitializer) {
+      async addParticleUpdater(name, updaterInitializer) {
         Plugins.addParticleUpdater(name, updaterInitializer);
+        await this.refresh();
       }
     }
     _Main_initialized = new WeakMap;
@@ -6686,8 +6714,8 @@
         context.arc(0, 0, radius, 0, Math.PI * 2, false);
       }
     }
-    function loadCircleShape(tsParticles) {
-      tsParticles.addShape("circle", new CircleDrawer);
+    async function loadCircleShape(tsParticles) {
+      await tsParticles.addShape("circle", new CircleDrawer);
     }
     class LifeUpdater {
       constructor(container) {
@@ -6748,8 +6776,8 @@
         life.duration = getRangeValue(lifeOptions.duration.value) * 1e3;
       }
     }
-    function loadLifeUpdater(tsParticles) {
-      tsParticles.addParticleUpdater("life", (container => new LifeUpdater(container)));
+    async function loadLifeUpdater(tsParticles) {
+      await tsParticles.addParticleUpdater("life", (container => new LifeUpdater(container)));
     }
     class ExternalInteractorBase {
       constructor(container) {
@@ -6791,8 +6819,8 @@
         }
       }
     }
-    function loadExternalConnectInteraction(tsParticles) {
-      tsParticles.addInteractor("externalConnect", (container => new Connector(container)));
+    async function loadExternalConnectInteraction(tsParticles) {
+      await tsParticles.addInteractor("externalConnect", (container => new Connector(container)));
     }
     function checkDestroy(particle, value, minValue, maxValue) {
       switch (particle.options.opacity.animation.destroy) {
@@ -6903,8 +6931,8 @@
         updateOpacity(particle, delta);
       }
     }
-    function loadOpacityUpdater(tsParticles) {
-      tsParticles.addParticleUpdater("opacity", (container => new OpacityUpdater(container)));
+    async function loadOpacityUpdater(tsParticles) {
+      await tsParticles.addParticleUpdater("opacity", (container => new OpacityUpdater(container)));
     }
     function loadImage(source) {
       return new Promise(((resolve, reject) => {
@@ -7159,10 +7187,10 @@
       }
     }
     _ImageDrawer_images = new WeakMap;
-    function loadImageShape(tsParticles) {
+    async function loadImageShape(tsParticles) {
       const imageDrawer = new ImageDrawer;
-      tsParticles.addShape("image", imageDrawer);
-      tsParticles.addShape("images", imageDrawer);
+      await tsParticles.addShape("image", imageDrawer);
+      await tsParticles.addShape("images", imageDrawer);
     }
     class PolygonDrawerBase {
       getSidesCount(particle) {
@@ -7231,15 +7259,15 @@
         };
       }
     }
-    function loadGenericPolygonShape(tsParticles) {
-      tsParticles.addShape("polygon", new PolygonDrawer);
+    async function loadGenericPolygonShape(tsParticles) {
+      await tsParticles.addShape("polygon", new PolygonDrawer);
     }
-    function loadTriangleShape(tsParticles) {
-      tsParticles.addShape("triangle", new TriangleDrawer);
+    async function loadTriangleShape(tsParticles) {
+      await tsParticles.addShape("triangle", new TriangleDrawer);
     }
-    function loadPolygonShape(tsParticles) {
-      loadGenericPolygonShape(tsParticles);
-      loadTriangleShape(tsParticles);
+    async function loadPolygonShape(tsParticles) {
+      await loadGenericPolygonShape(tsParticles);
+      await loadTriangleShape(tsParticles);
     }
     var ProcessBubbleType;
     (function(ProcessBubbleType) {
@@ -7479,8 +7507,8 @@
         }
       }
     }
-    function loadExternalBubbleInteraction(tsParticles) {
-      tsParticles.addInteractor("externalBubble", (container => new Bubbler(container)));
+    async function loadExternalBubbleInteraction(tsParticles) {
+      await tsParticles.addInteractor("externalBubble", (container => new Bubbler(container)));
     }
     class Attractor extends ExternalInteractorBase {
       constructor(container) {
@@ -7548,8 +7576,8 @@
         return;
       }
     }
-    function loadExternalAttractInteraction(tsParticles) {
-      tsParticles.addInteractor("externalAttract", (container => new Attractor(container)));
+    async function loadExternalAttractInteraction(tsParticles) {
+      await tsParticles.addInteractor("externalAttract", (container => new Attractor(container)));
     }
     class Grabber extends ExternalInteractorBase {
       constructor(container) {
@@ -7591,8 +7619,8 @@
         }
       }
     }
-    function loadExternalGrabInteraction(tsParticles) {
-      tsParticles.addInteractor("externalGrab", (container => new Grabber(container)));
+    async function loadExternalGrabInteraction(tsParticles) {
+      await tsParticles.addInteractor("externalGrab", (container => new Grabber(container)));
     }
     class StarDrawer {
       getSidesCount(particle) {
@@ -7614,8 +7642,8 @@
         }
       }
     }
-    function loadStarShape(tsParticles) {
-      tsParticles.addShape("star", new StarDrawer);
+    async function loadStarShape(tsParticles) {
+      await tsParticles.addShape("star", new StarDrawer);
     }
     class ParticlesInteractorBase {
       constructor(container) {
@@ -7646,8 +7674,8 @@
       }
       reset() {}
     }
-    function loadParticlesAttractInteraction(tsParticles) {
-      tsParticles.addInteractor("particlesAttract", (container => new Attractor_Attractor(container)));
+    async function loadParticlesAttractInteraction(tsParticles) {
+      await tsParticles.addInteractor("particlesAttract", (container => new Attractor_Attractor(container)));
     }
     const fixFactor = Math.sqrt(2);
     class SquareDrawer {
@@ -7658,10 +7686,10 @@
         context.rect(-radius / fixFactor, -radius / fixFactor, radius * 2 / fixFactor, radius * 2 / fixFactor);
       }
     }
-    function loadSquareShape(tsParticles) {
+    async function loadSquareShape(tsParticles) {
       const drawer = new SquareDrawer;
-      tsParticles.addShape("edge", drawer);
-      tsParticles.addShape("square", drawer);
+      await tsParticles.addShape("edge", drawer);
+      await tsParticles.addShape("square", drawer);
     }
     function updateColorValue(delta, value, valueAnimation, max, decrease) {
       var _a;
@@ -7733,8 +7761,8 @@
         updateStrokeColor(particle, delta);
       }
     }
-    function loadStrokeColorUpdater(tsParticles) {
-      tsParticles.addParticleUpdater("strokeColor", (container => new StrokeColorUpdater(container)));
+    async function loadStrokeColorUpdater(tsParticles) {
+      await tsParticles.addParticleUpdater("strokeColor", (container => new StrokeColorUpdater(container)));
     }
     function ColorUpdater_updateColorValue(delta, value, valueAnimation, max, decrease) {
       var _a;
@@ -7793,8 +7821,8 @@
         updateColor(particle, delta);
       }
     }
-    function loadColorUpdater(tsParticles) {
-      tsParticles.addParticleUpdater("color", (container => new ColorUpdater(container)));
+    async function loadColorUpdater(tsParticles) {
+      await tsParticles.addParticleUpdater("color", (container => new ColorUpdater(container)));
     }
     function bounce(p1, p2) {
       circleBounce(circleBounceDataFromParticle(p1), circleBounceDataFromParticle(p2));
@@ -7893,8 +7921,8 @@
         }
       }
     }
-    function loadParticlesCollisionsInteraction(tsParticles) {
-      tsParticles.addInteractor("particlesCollisions", (container => new Collider(container)));
+    async function loadParticlesCollisionsInteraction(tsParticles) {
+      await tsParticles.addInteractor("particlesCollisions", (container => new Collider(container)));
     }
     function updateAngle(particle, delta) {
       var _a;
@@ -7971,8 +7999,8 @@
         updateAngle(particle, delta);
       }
     }
-    function loadAngleUpdater(tsParticles) {
-      tsParticles.addParticleUpdater("angle", (container => new AngleUpdater(container)));
+    async function loadAngleUpdater(tsParticles) {
+      await tsParticles.addParticleUpdater("angle", (container => new AngleUpdater(container)));
     }
     function bounceHorizontal(data) {
       if (!(data.outMode === OutMode.bounce || data.outMode === OutMode.bounceHorizontal || data.outMode === "bounceHorizontal" || data.outMode === OutMode.split)) {
@@ -8167,8 +8195,8 @@
         }
       }
     }
-    function loadOutModesUpdater(tsParticles) {
-      tsParticles.addParticleUpdater("outModes", (container => new OutOfCanvasUpdater(container)));
+    async function loadOutModesUpdater(tsParticles) {
+      await tsParticles.addParticleUpdater("outModes", (container => new OutOfCanvasUpdater(container)));
     }
     class Repulser extends ExternalInteractorBase {
       constructor(container) {
@@ -8256,8 +8284,8 @@
         }
       }
     }
-    function loadExternalRepulseInteraction(tsParticles) {
-      tsParticles.addInteractor("externalRepulse", (container => new Repulser(container)));
+    async function loadExternalRepulseInteraction(tsParticles) {
+      await tsParticles.addInteractor("externalRepulse", (container => new Repulser(container)));
     }
     class LineDrawer {
       getSidesCount() {
@@ -8268,8 +8296,8 @@
         context.lineTo(radius / 2, 0);
       }
     }
-    function loadLineShape(tsParticles) {
-      tsParticles.addShape("line", new LineDrawer);
+    async function loadLineShape(tsParticles) {
+      await tsParticles.addShape("line", new LineDrawer);
     }
     class Bouncer extends ExternalInteractorBase {
       constructor(container) {
@@ -8326,8 +8354,8 @@
         }
       }
     }
-    function loadExternalBounceInteraction(tsParticles) {
-      tsParticles.addInteractor("externalBounce", (container => new Bouncer(container)));
+    async function loadExternalBounceInteraction(tsParticles) {
+      await tsParticles.addInteractor("externalBounce", (container => new Bouncer(container)));
     }
     const validTypes = [ "text", "character", "char" ];
     class TextDrawer {
@@ -8386,10 +8414,10 @@
         context.globalAlpha = 1;
       }
     }
-    function loadTextShape(tsParticles) {
+    async function loadTextShape(tsParticles) {
       const drawer = new TextDrawer;
       for (const type of validTypes) {
-        tsParticles.addShape(type, drawer);
+        await tsParticles.addShape(type, drawer);
       }
     }
     function getLinkDistance(pos1, pos2, optDistance, canvasSize, warp) {
@@ -8604,16 +8632,16 @@
       }
       loadOptions() {}
     }
-    function loadPlugin(tsParticles) {
+    async function loadPlugin(tsParticles) {
       const plugin = new Plugin;
-      tsParticles.addPlugin(plugin);
+      await tsParticles.addPlugin(plugin);
     }
-    function loadInteraction(tsParticles) {
-      tsParticles.addInteractor("particlesLinks", (container => new Linker(container)));
+    async function loadInteraction(tsParticles) {
+      await tsParticles.addInteractor("particlesLinks", (container => new Linker(container)));
     }
-    function loadParticlesLinksInteraction(tsParticles) {
-      loadInteraction(tsParticles);
-      loadPlugin(tsParticles);
+    async function loadParticlesLinksInteraction(tsParticles) {
+      await loadInteraction(tsParticles);
+      await loadPlugin(tsParticles);
     }
     function SizeUpdater_checkDestroy(particle, value, minValue, maxValue) {
       switch (particle.options.size.animation.destroy) {
@@ -8680,38 +8708,38 @@
         updateSize(particle, delta);
       }
     }
-    function loadSizeUpdater(tsParticles) {
-      tsParticles.addParticleUpdater("size", (() => new SizeUpdater));
-    }
-    function loadSlim(tsParticles) {
-      loadExternalAttractInteraction(tsParticles);
-      loadExternalBounceInteraction(tsParticles);
-      loadExternalBubbleInteraction(tsParticles);
-      loadExternalConnectInteraction(tsParticles);
-      loadExternalGrabInteraction(tsParticles);
-      loadExternalRepulseInteraction(tsParticles);
-      loadParticlesAttractInteraction(tsParticles);
-      loadParticlesCollisionsInteraction(tsParticles);
-      loadParticlesLinksInteraction(tsParticles);
-      loadCircleShape(tsParticles);
-      loadImageShape(tsParticles);
-      loadLineShape(tsParticles);
-      loadPolygonShape(tsParticles);
-      loadSquareShape(tsParticles);
-      loadStarShape(tsParticles);
-      loadTextShape(tsParticles);
-      loadLifeUpdater(tsParticles);
-      loadOpacityUpdater(tsParticles);
-      loadSizeUpdater(tsParticles);
-      loadAngleUpdater(tsParticles);
-      loadColorUpdater(tsParticles);
-      loadStrokeColorUpdater(tsParticles);
-      loadOutModesUpdater(tsParticles);
+    async function loadSizeUpdater(tsParticles) {
+      await tsParticles.addParticleUpdater("size", (() => new SizeUpdater));
+    }
+    async function loadSlim(tsParticles) {
+      await loadExternalAttractInteraction(tsParticles);
+      await loadExternalBounceInteraction(tsParticles);
+      await loadExternalBubbleInteraction(tsParticles);
+      await loadExternalConnectInteraction(tsParticles);
+      await loadExternalGrabInteraction(tsParticles);
+      await loadExternalRepulseInteraction(tsParticles);
+      await loadParticlesAttractInteraction(tsParticles);
+      await loadParticlesCollisionsInteraction(tsParticles);
+      await loadParticlesLinksInteraction(tsParticles);
+      await loadCircleShape(tsParticles);
+      await loadImageShape(tsParticles);
+      await loadLineShape(tsParticles);
+      await loadPolygonShape(tsParticles);
+      await loadSquareShape(tsParticles);
+      await loadStarShape(tsParticles);
+      await loadTextShape(tsParticles);
+      await loadLifeUpdater(tsParticles);
+      await loadOpacityUpdater(tsParticles);
+      await loadSizeUpdater(tsParticles);
+      await loadAngleUpdater(tsParticles);
+      await loadColorUpdater(tsParticles);
+      await loadStrokeColorUpdater(tsParticles);
+      await loadOutModesUpdater(tsParticles);
     }
     const tsParticles = new Main;
     tsParticles.init();
-    loadSlim(tsParticles);
     const {particlesJS, pJSDom} = initPjs(tsParticles);
+    loadSlim(tsParticles);
     return __webpack_exports__;
   })();
 }));