@tsparticles/engine 3.5.0 → 3.6.0-beta.0

package/README.md

@@ -18,8 +18,6 @@ React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.j
 [![Run on Repl.it](https://repl.it/badge/github/tsparticles/tsparticles)](https://repl.it/github/tsparticles/tsparticles)
 
 [![Discord](https://img.shields.io/discord/872061157379301416?label=discord&logo=discord&logoColor=white&style=for-the-badge)](https://discord.gg/hACwv45Hme)
-[![Slack](https://particles.js.org/images/slack.png)](https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI)
-[![WhatsApp](https://particles.js.org/images/WhatsApp.png)](https://chat.whatsapp.com/KQyHc9UEbRc2qlqNQR2J5c)
 [![Telegram](https://particles.js.org/images/telegram.png)](https://t.me/tsparticles)
 [![Reddit](https://img.shields.io/reddit/subreddit-subscribers/tsParticles?style=for-the-badge)](https://www.reddit.com/r/tsParticles/)
 

package/browser/Core/Canvas.js

@@ -22,9 +22,6 @@ function setStyle(canvas, style, important = false) {
     }
     for (const key in style) {
         const value = style[key];
-        if (!value) {
-            continue;
-        }
         elementStyle.setProperty(key, value, important ? "important" : "");
     }
 }
@@ -208,10 +205,11 @@ export class Canvas {
             if (!element) {
                 return;
             }
-            const radix = 10;
+            const radix = 10, zIndex = this.container.actualOptions.fullScreen.zIndex.toString(radix);
             setStyle(element, {
                 position: "fixed",
-                zIndex: this.container.actualOptions.fullScreen.zIndex.toString(radix),
+                "z-index": zIndex,
+                zIndex: zIndex,
                 top: "0",
                 left: "0",
                 width: "100%",
@@ -378,7 +376,7 @@ export class Canvas {
     }
     initPlugins() {
         this._resizePlugins = [];
-        for (const [, plugin] of this.container.plugins) {
+        for (const plugin of this.container.plugins.values()) {
             if (plugin.resize) {
                 this._resizePlugins.push(plugin);
             }

package/browser/Core/Container.js

@@ -220,10 +220,10 @@ export class Container {
         this.clearClickHandlers();
         this.particles.destroy();
         this.canvas.destroy();
-        for (const [, effectDrawer] of this.effectDrawers) {
+        for (const effectDrawer of this.effectDrawers.values()) {
             effectDrawer.destroy?.(this);
         }
-        for (const [, shapeDrawer] of this.shapeDrawers) {
+        for (const shapeDrawer of this.shapeDrawers.values()) {
             shapeDrawer.destroy?.(this);
         }
         for (const key of this.effectDrawers.keys()) {
@@ -258,7 +258,7 @@ export class Container {
         this._drawAnimationFrame = animate(timestamp => frame(timestamp));
     }
     async export(type, options = {}) {
-        for (const [, plugin] of this.plugins) {
+        for (const plugin of this.plugins.values()) {
             if (!plugin.export) {
                 continue;
             }
@@ -275,7 +275,7 @@ export class Container {
             return;
         }
         this.particles.handleClickMode(mode);
-        for (const [, plugin] of this.plugins) {
+        for (const plugin of this.plugins.values()) {
             plugin.handleClickMode?.(mode);
         }
     }
@@ -317,19 +317,19 @@ export class Container {
         const defaultFpsLimit = 120, minFpsLimit = 0;
         this.fpsLimit = fpsLimit > minFpsLimit ? fpsLimit : defaultFpsLimit;
         this._smooth = smooth;
-        for (const [, drawer] of this.effectDrawers) {
+        for (const drawer of this.effectDrawers.values()) {
             await drawer.init?.(this);
         }
-        for (const [, drawer] of this.shapeDrawers) {
+        for (const drawer of this.shapeDrawers.values()) {
             await drawer.init?.(this);
         }
-        for (const [, plugin] of this.plugins) {
+        for (const plugin of this.plugins.values()) {
             await plugin.init?.();
         }
         this._engine.dispatchEvent(EventType.containerInit, { container: this });
         await this.particles.init();
         this.particles.setDensity();
-        for (const [, plugin] of this.plugins) {
+        for (const plugin of this.plugins.values()) {
             plugin.particlesSetup?.();
         }
         this._engine.dispatchEvent(EventType.particlesSetup, { container: this });
@@ -352,7 +352,7 @@ export class Container {
         if (this._paused) {
             return;
         }
-        for (const [, plugin] of this.plugins) {
+        for (const plugin of this.plugins.values()) {
             plugin.pause?.();
         }
         if (!this.pageHidden) {
@@ -373,7 +373,7 @@ export class Container {
             this._paused = false;
         }
         if (needsUpdate) {
-            for (const [, plugin] of this.plugins) {
+            for (const plugin of this.plugins.values()) {
                 if (plugin.play) {
                     plugin.play();
                 }
@@ -411,7 +411,7 @@ export class Container {
                 if (this.interactivity.element instanceof HTMLElement && this._intersectionObserver) {
                     this._intersectionObserver.observe(this.interactivity.element);
                 }
-                for (const [, plugin] of this.plugins) {
+                for (const plugin of this.plugins.values()) {
                     await plugin.start?.();
                 }
                 this._engine.dispatchEvent(EventType.containerStarted, { container: this });
@@ -438,7 +438,7 @@ export class Container {
         if (this.interactivity.element instanceof HTMLElement && this._intersectionObserver) {
             this._intersectionObserver.unobserve(this.interactivity.element);
         }
-        for (const [, plugin] of this.plugins) {
+        for (const plugin of this.plugins.values()) {
             plugin.stop?.();
         }
         for (const key of this.plugins.keys()) {

package/browser/Core/Engine.js

@@ -95,7 +95,7 @@ export class Engine {
         return this._domArray;
     }
     get version() {
-        return "3.5.0";
+        return "3.6.0-beta.0";
     }
     addConfig(config) {
         const key = config.key ?? config.name ?? "default";

package/browser/Core/Particle.js

@@ -48,7 +48,7 @@ export class Particle {
     constructor(engine, container) {
         this.container = container;
         this._calcPosition = (container, position, zIndex, tryCount = defaultRetryCount) => {
-            for (const [, plugin] of container.plugins) {
+            for (const plugin of container.plugins.values()) {
                 const pluginPos = plugin.particlePosition !== undefined ? plugin.particlePosition(position, this) : undefined;
                 if (pluginPos) {
                     return Vector3d.create(pluginPos.x, pluginPos.y, zIndex);
@@ -166,7 +166,7 @@ export class Particle {
         this.slow.inRange = false;
         const container = this.container, pathGenerator = this.pathGenerator, shapeDrawer = container.shapeDrawers.get(this.shape);
         shapeDrawer?.particleDestroy?.(this);
-        for (const [, plugin] of container.plugins) {
+        for (const plugin of container.plugins.values()) {
             plugin.particleDestroyed?.(this, override);
         }
         for (const updater of container.particles.updaters) {
@@ -182,7 +182,7 @@ export class Particle {
     }
     draw(delta) {
         const container = this.container, canvas = container.canvas;
-        for (const [, plugin] of container.plugins) {
+        for (const plugin of container.plugins.values()) {
             canvas.drawParticlePlugin(plugin, this, delta);
         }
         canvas.drawParticle(this, delta);
@@ -334,7 +334,7 @@ export class Particle {
         }
         effectDrawer?.particleInit?.(container, this);
         shapeDrawer?.particleInit?.(container, this);
-        for (const [, plugin] of container.plugins) {
+        for (const plugin of container.plugins.values()) {
             plugin.particleCreated?.(this);
         }
     }

package/browser/Core/Particles.js

@@ -122,7 +122,7 @@ export class Particles {
         options.manualParticles.forEach(p => this.addParticle(p.position ? getPosition(p.position, container.canvas.size) : undefined, p.options));
     }
     addParticle(position, overrideOptions, group, initializer) {
-        const limitMode = this._container.actualOptions.particles.number.limit.mode, limit = group === undefined ? this._limit : this._groupLimits.get(group) ?? this._limit, currentCount = this.count, minLimit = 0;
+        const limitMode = this._container.actualOptions.particles.number.limit.mode, limit = group === undefined ? this._limit : (this._groupLimits.get(group) ?? this._limit), currentCount = this.count, minLimit = 0;
         if (limit > minLimit) {
             switch (limitMode) {
                 case LimitMode.delete: {
@@ -156,7 +156,7 @@ export class Particles {
         const container = this._container, canvas = container.canvas;
         canvas.clear();
         this.update(delta);
-        for (const [, plugin] of container.plugins) {
+        for (const plugin of container.plugins.values()) {
             canvas.drawPlugin(plugin, delta);
         }
         for (const p of this._zArray) {
@@ -181,7 +181,7 @@ export class Particles {
         this._needsSort = false;
         await this.initPlugins();
         let handled = false;
-        for (const [, plugin] of container.plugins) {
+        for (const plugin of container.plugins.values()) {
             handled = plugin.particlesInitialization?.() ?? handled;
             if (handled) {
                 break;
@@ -209,7 +209,7 @@ export class Particles {
         this.movers = await this._engine.getMovers(container, true);
         this.updaters = await this._engine.getUpdaters(container, true);
         await this._interactionManager.init();
-        for (const [, pathGenerator] of container.pathGenerators) {
+        for (const pathGenerator of container.pathGenerators.values()) {
             pathGenerator.init(container);
         }
     }
@@ -233,7 +233,8 @@ export class Particles {
         }
         let deleted = 0;
         for (let i = index; deleted < quantity && i < this.count; i++) {
-            if (this._removeParticle(i--, group, override)) {
+            if (this._removeParticle(i, group, override)) {
+                i--;
                 deleted++;
             }
         }
@@ -259,10 +260,10 @@ export class Particles {
     update(delta) {
         const container = this._container, particlesToDelete = new Set();
         this.quadTree = new QuadTree(qTreeRectangle(container.canvas.size), qTreeCapacity);
-        for (const [, pathGenerator] of container.pathGenerators) {
+        for (const pathGenerator of container.pathGenerators.values()) {
             pathGenerator.update();
         }
-        for (const [, plugin] of container.plugins) {
+        for (const plugin of container.plugins.values()) {
             plugin.update?.(delta);
         }
         const resizeFactor = this._resizeFactor;
@@ -275,7 +276,7 @@ export class Particles {
             }
             particle.ignoresResizeRatio = false;
             this._interactionManager.reset(particle);
-            for (const [, plugin] of this._container.plugins) {
+            for (const plugin of this._container.plugins.values()) {
                 if (particle.destroyed) {
                     break;
                 }

package/browser/Core/Utils/EventListeners.js

@@ -187,7 +187,7 @@ export class EventListeners {
             if (!mousePosition || !options.interactivity.events.onClick.enable) {
                 return;
             }
-            for (const [, plugin] of container.plugins) {
+            for (const plugin of container.plugins.values()) {
                 if (!plugin.clickPositionValid) {
                     continue;
                 }

package/browser/Utils/CanvasUtils.js

@@ -33,8 +33,8 @@ export function drawParticle(data) {
         cos: Math.cos(angle),
     }, rotating = !!angle, identity = 1, transformData = {
         a: rotateData.cos * (transform.a ?? defaultTransform.a),
-        b: rotating ? rotateData.sin * (transform.b ?? identity) : transform.b ?? defaultTransform.b,
-        c: rotating ? -rotateData.sin * (transform.c ?? identity) : transform.c ?? defaultTransform.c,
+        b: rotating ? rotateData.sin * (transform.b ?? identity) : (transform.b ?? defaultTransform.b),
+        c: rotating ? -rotateData.sin * (transform.c ?? identity) : (transform.c ?? defaultTransform.c),
         d: rotateData.cos * (transform.d ?? defaultTransform.d),
     };
     context.setTransform(transformData.a, transformData.b, transformData.c, transformData.d, pos.x, pos.y);

package/browser/Utils/ColorUtils.js

@@ -15,7 +15,7 @@ export function addColorManager(manager) {
     colorManagers.set(manager.key, manager);
 }
 function stringToRgba(input) {
-    for (const [, manager] of colorManagers) {
+    for (const manager of colorManagers.values()) {
         if (input.startsWith(manager.stringPrefix)) {
             return manager.parseString(input);
         }
@@ -47,7 +47,7 @@ export function rangeColorToRgb(input, index, useIndex = true) {
             value: itemFromArray(color.value, index, useIndex),
         });
     }
-    for (const [, manager] of colorManagers) {
+    for (const manager of colorManagers.values()) {
         const res = manager.handleRangeColor(color);
         if (res) {
             return res;
@@ -67,7 +67,7 @@ export function colorToRgb(input, index, useIndex = true) {
             value: itemFromArray(color.value, index, useIndex),
         });
     }
-    for (const [, manager] of colorManagers) {
+    for (const manager of colorManagers.values()) {
         const res = manager.handleColor(color);
         if (res) {
             return res;

package/cjs/Core/Canvas.js

@@ -25,9 +25,6 @@ function setStyle(canvas, style, important = false) {
     }
     for (const key in style) {
         const value = style[key];
-        if (!value) {
-            continue;
-        }
         elementStyle.setProperty(key, value, important ? "important" : "");
     }
 }
@@ -211,10 +208,11 @@ class Canvas {
             if (!element) {
                 return;
             }
-            const radix = 10;
+            const radix = 10, zIndex = this.container.actualOptions.fullScreen.zIndex.toString(radix);
             setStyle(element, {
                 position: "fixed",
-                zIndex: this.container.actualOptions.fullScreen.zIndex.toString(radix),
+                "z-index": zIndex,
+                zIndex: zIndex,
                 top: "0",
                 left: "0",
                 width: "100%",
@@ -381,7 +379,7 @@ class Canvas {
     }
     initPlugins() {
         this._resizePlugins = [];
-        for (const [, plugin] of this.container.plugins) {
+        for (const plugin of this.container.plugins.values()) {
             if (plugin.resize) {
                 this._resizePlugins.push(plugin);
             }

package/cjs/Core/Container.js

@@ -223,10 +223,10 @@ class Container {
         this.clearClickHandlers();
         this.particles.destroy();
         this.canvas.destroy();
-        for (const [, effectDrawer] of this.effectDrawers) {
+        for (const effectDrawer of this.effectDrawers.values()) {
             effectDrawer.destroy?.(this);
         }
-        for (const [, shapeDrawer] of this.shapeDrawers) {
+        for (const shapeDrawer of this.shapeDrawers.values()) {
             shapeDrawer.destroy?.(this);
         }
         for (const key of this.effectDrawers.keys()) {
@@ -261,7 +261,7 @@ class Container {
         this._drawAnimationFrame = (0, NumberUtils_js_1.animate)(timestamp => frame(timestamp));
     }
     async export(type, options = {}) {
-        for (const [, plugin] of this.plugins) {
+        for (const plugin of this.plugins.values()) {
             if (!plugin.export) {
                 continue;
             }
@@ -278,7 +278,7 @@ class Container {
             return;
         }
         this.particles.handleClickMode(mode);
-        for (const [, plugin] of this.plugins) {
+        for (const plugin of this.plugins.values()) {
             plugin.handleClickMode?.(mode);
         }
     }
@@ -320,19 +320,19 @@ class Container {
         const defaultFpsLimit = 120, minFpsLimit = 0;
         this.fpsLimit = fpsLimit > minFpsLimit ? fpsLimit : defaultFpsLimit;
         this._smooth = smooth;
-        for (const [, drawer] of this.effectDrawers) {
+        for (const drawer of this.effectDrawers.values()) {
             await drawer.init?.(this);
         }
-        for (const [, drawer] of this.shapeDrawers) {
+        for (const drawer of this.shapeDrawers.values()) {
             await drawer.init?.(this);
         }
-        for (const [, plugin] of this.plugins) {
+        for (const plugin of this.plugins.values()) {
             await plugin.init?.();
         }
         this._engine.dispatchEvent(EventType_js_1.EventType.containerInit, { container: this });
         await this.particles.init();
         this.particles.setDensity();
-        for (const [, plugin] of this.plugins) {
+        for (const plugin of this.plugins.values()) {
             plugin.particlesSetup?.();
         }
         this._engine.dispatchEvent(EventType_js_1.EventType.particlesSetup, { container: this });
@@ -355,7 +355,7 @@ class Container {
         if (this._paused) {
             return;
         }
-        for (const [, plugin] of this.plugins) {
+        for (const plugin of this.plugins.values()) {
             plugin.pause?.();
         }
         if (!this.pageHidden) {
@@ -376,7 +376,7 @@ class Container {
             this._paused = false;
         }
         if (needsUpdate) {
-            for (const [, plugin] of this.plugins) {
+            for (const plugin of this.plugins.values()) {
                 if (plugin.play) {
                     plugin.play();
                 }
@@ -414,7 +414,7 @@ class Container {
                 if (this.interactivity.element instanceof HTMLElement && this._intersectionObserver) {
                     this._intersectionObserver.observe(this.interactivity.element);
                 }
-                for (const [, plugin] of this.plugins) {
+                for (const plugin of this.plugins.values()) {
                     await plugin.start?.();
                 }
                 this._engine.dispatchEvent(EventType_js_1.EventType.containerStarted, { container: this });
@@ -441,7 +441,7 @@ class Container {
         if (this.interactivity.element instanceof HTMLElement && this._intersectionObserver) {
             this._intersectionObserver.unobserve(this.interactivity.element);
         }
-        for (const [, plugin] of this.plugins) {
+        for (const plugin of this.plugins.values()) {
             plugin.stop?.();
         }
         for (const key of this.plugins.keys()) {

package/cjs/Core/Engine.js

@@ -98,7 +98,7 @@ class Engine {
         return this._domArray;
     }
     get version() {
-        return "3.5.0";
+        return "3.6.0-beta.0";
     }
     addConfig(config) {
         const key = config.key ?? config.name ?? "default";

package/cjs/Core/Particle.js

@@ -51,7 +51,7 @@ class Particle {
     constructor(engine, container) {
         this.container = container;
         this._calcPosition = (container, position, zIndex, tryCount = defaultRetryCount) => {
-            for (const [, plugin] of container.plugins) {
+            for (const plugin of container.plugins.values()) {
                 const pluginPos = plugin.particlePosition !== undefined ? plugin.particlePosition(position, this) : undefined;
                 if (pluginPos) {
                     return Vectors_js_1.Vector3d.create(pluginPos.x, pluginPos.y, zIndex);
@@ -169,7 +169,7 @@ class Particle {
         this.slow.inRange = false;
         const container = this.container, pathGenerator = this.pathGenerator, shapeDrawer = container.shapeDrawers.get(this.shape);
         shapeDrawer?.particleDestroy?.(this);
-        for (const [, plugin] of container.plugins) {
+        for (const plugin of container.plugins.values()) {
             plugin.particleDestroyed?.(this, override);
         }
         for (const updater of container.particles.updaters) {
@@ -185,7 +185,7 @@ class Particle {
     }
     draw(delta) {
         const container = this.container, canvas = container.canvas;
-        for (const [, plugin] of container.plugins) {
+        for (const plugin of container.plugins.values()) {
             canvas.drawParticlePlugin(plugin, this, delta);
         }
         canvas.drawParticle(this, delta);
@@ -337,7 +337,7 @@ class Particle {
         }
         effectDrawer?.particleInit?.(container, this);
         shapeDrawer?.particleInit?.(container, this);
-        for (const [, plugin] of container.plugins) {
+        for (const plugin of container.plugins.values()) {
             plugin.particleCreated?.(this);
         }
     }

package/cjs/Core/Particles.js

@@ -125,7 +125,7 @@ class Particles {
         options.manualParticles.forEach(p => this.addParticle(p.position ? (0, Utils_js_1.getPosition)(p.position, container.canvas.size) : undefined, p.options));
     }
     addParticle(position, overrideOptions, group, initializer) {
-        const limitMode = this._container.actualOptions.particles.number.limit.mode, limit = group === undefined ? this._limit : this._groupLimits.get(group) ?? this._limit, currentCount = this.count, minLimit = 0;
+        const limitMode = this._container.actualOptions.particles.number.limit.mode, limit = group === undefined ? this._limit : (this._groupLimits.get(group) ?? this._limit), currentCount = this.count, minLimit = 0;
         if (limit > minLimit) {
             switch (limitMode) {
                 case LimitMode_js_1.LimitMode.delete: {
@@ -159,7 +159,7 @@ class Particles {
         const container = this._container, canvas = container.canvas;
         canvas.clear();
         this.update(delta);
-        for (const [, plugin] of container.plugins) {
+        for (const plugin of container.plugins.values()) {
             canvas.drawPlugin(plugin, delta);
         }
         for (const p of this._zArray) {
@@ -184,7 +184,7 @@ class Particles {
         this._needsSort = false;
         await this.initPlugins();
         let handled = false;
-        for (const [, plugin] of container.plugins) {
+        for (const plugin of container.plugins.values()) {
             handled = plugin.particlesInitialization?.() ?? handled;
             if (handled) {
                 break;
@@ -212,7 +212,7 @@ class Particles {
         this.movers = await this._engine.getMovers(container, true);
         this.updaters = await this._engine.getUpdaters(container, true);
         await this._interactionManager.init();
-        for (const [, pathGenerator] of container.pathGenerators) {
+        for (const pathGenerator of container.pathGenerators.values()) {
             pathGenerator.init(container);
         }
     }
@@ -236,7 +236,8 @@ class Particles {
         }
         let deleted = 0;
         for (let i = index; deleted < quantity && i < this.count; i++) {
-            if (this._removeParticle(i--, group, override)) {
+            if (this._removeParticle(i, group, override)) {
+                i--;
                 deleted++;
             }
         }
@@ -262,10 +263,10 @@ class Particles {
     update(delta) {
         const container = this._container, particlesToDelete = new Set();
         this.quadTree = new QuadTree_js_1.QuadTree(qTreeRectangle(container.canvas.size), qTreeCapacity);
-        for (const [, pathGenerator] of container.pathGenerators) {
+        for (const pathGenerator of container.pathGenerators.values()) {
             pathGenerator.update();
         }
-        for (const [, plugin] of container.plugins) {
+        for (const plugin of container.plugins.values()) {
             plugin.update?.(delta);
         }
         const resizeFactor = this._resizeFactor;
@@ -278,7 +279,7 @@ class Particles {
             }
             particle.ignoresResizeRatio = false;
             this._interactionManager.reset(particle);
-            for (const [, plugin] of this._container.plugins) {
+            for (const plugin of this._container.plugins.values()) {
                 if (particle.destroyed) {
                     break;
                 }

package/cjs/Core/Utils/EventListeners.js

@@ -190,7 +190,7 @@ class EventListeners {
             if (!mousePosition || !options.interactivity.events.onClick.enable) {
                 return;
             }
-            for (const [, plugin] of container.plugins) {
+            for (const plugin of container.plugins.values()) {
                 if (!plugin.clickPositionValid) {
                     continue;
                 }

package/cjs/Utils/CanvasUtils.js

@@ -46,8 +46,8 @@ function drawParticle(data) {
         cos: Math.cos(angle),
     }, rotating = !!angle, identity = 1, transformData = {
         a: rotateData.cos * (transform.a ?? defaultTransform.a),
-        b: rotating ? rotateData.sin * (transform.b ?? identity) : transform.b ?? defaultTransform.b,
-        c: rotating ? -rotateData.sin * (transform.c ?? identity) : transform.c ?? defaultTransform.c,
+        b: rotating ? rotateData.sin * (transform.b ?? identity) : (transform.b ?? defaultTransform.b),
+        c: rotating ? -rotateData.sin * (transform.c ?? identity) : (transform.c ?? defaultTransform.c),
         d: rotateData.cos * (transform.d ?? defaultTransform.d),
     };
     context.setTransform(transformData.a, transformData.b, transformData.c, transformData.d, pos.x, pos.y);

package/cjs/Utils/ColorUtils.js

@@ -37,7 +37,7 @@ function addColorManager(manager) {
     colorManagers.set(manager.key, manager);
 }
 function stringToRgba(input) {
-    for (const [, manager] of colorManagers) {
+    for (const manager of colorManagers.values()) {
         if (input.startsWith(manager.stringPrefix)) {
             return manager.parseString(input);
         }
@@ -69,7 +69,7 @@ function rangeColorToRgb(input, index, useIndex = true) {
             value: (0, Utils_js_1.itemFromArray)(color.value, index, useIndex),
         });
     }
-    for (const [, manager] of colorManagers) {
+    for (const manager of colorManagers.values()) {
         const res = manager.handleRangeColor(color);
         if (res) {
             return res;
@@ -89,7 +89,7 @@ function colorToRgb(input, index, useIndex = true) {
             value: (0, Utils_js_1.itemFromArray)(color.value, index, useIndex),
         });
     }
-    for (const [, manager] of colorManagers) {
+    for (const manager of colorManagers.values()) {
         const res = manager.handleColor(color);
         if (res) {
             return res;

package/esm/Core/Canvas.js

@@ -22,9 +22,6 @@ function setStyle(canvas, style, important = false) {
     }
     for (const key in style) {
         const value = style[key];
-        if (!value) {
-            continue;
-        }
         elementStyle.setProperty(key, value, important ? "important" : "");
     }
 }
@@ -208,10 +205,11 @@ export class Canvas {
             if (!element) {
                 return;
             }
-            const radix = 10;
+            const radix = 10, zIndex = this.container.actualOptions.fullScreen.zIndex.toString(radix);
             setStyle(element, {
                 position: "fixed",
-                zIndex: this.container.actualOptions.fullScreen.zIndex.toString(radix),
+                "z-index": zIndex,
+                zIndex: zIndex,
                 top: "0",
                 left: "0",
                 width: "100%",
@@ -378,7 +376,7 @@ export class Canvas {
     }
     initPlugins() {
         this._resizePlugins = [];
-        for (const [, plugin] of this.container.plugins) {
+        for (const plugin of this.container.plugins.values()) {
             if (plugin.resize) {
                 this._resizePlugins.push(plugin);
             }