@tsparticles/engine 4.0.0-alpha.8 → 4.0.0-beta.1

package/types/Types/EngineInitializers.d.ts

@@ -1,10 +1,13 @@
 import type { Container } from "../Core/Container.js";
-import type { IParticleMover } from "../Core/Interfaces/IParticleMover.js";
+import type { IEffectDrawer } from "../Core/Interfaces/IEffectDrawer.js";
 import type { IParticleUpdater } from "../Core/Interfaces/IParticleUpdater.js";
+import type { IShapeDrawer } from "../Core/Interfaces/IShapeDrawer.js";
 export type GenericInitializer<T> = (container: Container) => Promise<T>;
-export type MoverInitializer = GenericInitializer<IParticleMover>;
+export type EffectInitializer = GenericInitializer<IEffectDrawer>;
+export type ShapeInitializer = GenericInitializer<IShapeDrawer>;
 export type UpdaterInitializer = GenericInitializer<IParticleUpdater>;
 export interface Initializers {
-    movers: Map<string, MoverInitializer>;
+    effects: Map<string, EffectInitializer>;
+    shapes: Map<string, ShapeInitializer>;
     updaters: Map<string, UpdaterInitializer>;
 }

package/types/Utils/CanvasUtils.d.ts

@@ -1,22 +1,19 @@
-import { AlterType } from "../Enums/Types/AlterType.js";
-import type { Container } from "../Core/Container.js";
+import type { CanvasContextType } from "../Types/CanvasContextType.js";
 import type { IContainerPlugin } from "../Core/Interfaces/IContainerPlugin.js";
-import type { ICoordinates } from "../Core/Interfaces/ICoordinates.js";
 import type { IDelta } from "../Core/Interfaces/IDelta.js";
 import type { IDimension } from "../Core/Interfaces/IDimension.js";
 import type { IDrawParticleParams } from "../Core/Interfaces/IDrawParticleParams.js";
-import type { IHsl } from "../Core/Interfaces/Colors.js";
-import type { IShapeDrawData } from "../export-types.js";
+import type { IEffectDrawer } from "../Core/Interfaces/IEffectDrawer.js";
+import type { IShapeDrawData } from "../Core/Interfaces/IShapeDrawData.js";
+import type { IShapeDrawer } from "../Core/Interfaces/IShapeDrawer.js";
 import type { Particle } from "../Core/Particle.js";
-export declare function drawLine(context: CanvasRenderingContext2D, begin: ICoordinates, end: ICoordinates): void;
-export declare function paintBase(context: CanvasRenderingContext2D, dimension: IDimension, baseColor?: string): void;
-export declare function paintImage(context: CanvasRenderingContext2D, dimension: IDimension, image: HTMLImageElement | undefined, opacity: number): void;
-export declare function clear(context: CanvasRenderingContext2D, dimension: IDimension): void;
+export declare function paintBase(context: CanvasContextType, dimension: IDimension, baseColor?: string): void;
+export declare function paintImage(context: CanvasContextType, dimension: IDimension, image: HTMLImageElement | undefined, opacity: number): void;
+export declare function clear(context: CanvasContextType, dimension: IDimension): void;
 export declare function drawParticle(data: IDrawParticleParams): void;
-export declare function drawAfterEffect(container: Container, data: IShapeDrawData): void;
-export declare function drawBeforeEffect(container: Container, data: IShapeDrawData): void;
-export declare function drawShape(container: Container, data: IShapeDrawData): void;
-export declare function drawShapeAfterDraw(container: Container, data: IShapeDrawData): void;
-export declare function drawShapeBeforeDraw(container: Container, data: IShapeDrawData): void;
-export declare function drawParticlePlugin(context: CanvasRenderingContext2D, plugin: IContainerPlugin, particle: Particle, delta: IDelta): void;
-export declare function alterHsl(color: IHsl, type: AlterType, value: number): IHsl;
+export declare function drawAfterEffect(drawer: IEffectDrawer | undefined, data: IShapeDrawData): void;
+export declare function drawBeforeEffect(drawer: IEffectDrawer | undefined, data: IShapeDrawData): void;
+export declare function drawShape(drawer: IShapeDrawer | undefined, data: IShapeDrawData): void;
+export declare function drawShapeAfterDraw(drawer: IShapeDrawer | undefined, data: IShapeDrawData): void;
+export declare function drawShapeBeforeDraw(drawer: IShapeDrawer | undefined, data: IShapeDrawData): void;
+export declare function drawParticlePlugin(context: CanvasContextType, plugin: IContainerPlugin, particle: Particle, delta: IDelta): void;

package/types/Utils/ColorUtils.d.ts

@@ -1,19 +1,19 @@
 import type { IColor, IHsl, IHsla, IRangeColor, IRgb, IRgba } from "../Core/Interfaces/Colors.js";
-import type { Engine } from "../Core/Engine.js";
+import { AlterType } from "../Enums/Types/AlterType.js";
 import type { HslAnimation } from "../Options/Classes/HslAnimation.js";
 import type { IDelta } from "../Core/Interfaces/IDelta.js";
 import type { IOptionsColor } from "../Options/Interfaces/IOptionsColor.js";
 import type { IParticleColorAnimation } from "../Core/Interfaces/IParticleValueAnimation.js";
 import type { IParticleHslAnimation } from "../Core/Interfaces/IParticleHslAnimation.js";
-import type { IRangeValue } from "../Core/Interfaces/IRangeValue.js";
 import type { Particle } from "../Core/Particle.js";
-export declare function rangeColorToRgb(engine: Engine, input?: string | IRangeColor, index?: number, useIndex?: boolean): IRgb | undefined;
-export declare function colorToRgb(engine: Engine, input?: string | IColor, index?: number, useIndex?: boolean): IRgb | undefined;
-export declare function colorToHsl(engine: Engine, color: string | IColor | undefined, index?: number, useIndex?: boolean): IHsl | undefined;
-export declare function rangeColorToHsl(engine: Engine, color: string | IRangeColor | undefined, index?: number, useIndex?: boolean): IHsl | undefined;
+import type { PluginManager } from "../Core/Utils/PluginManager.js";
+export declare function rangeColorToRgb(pluginManager: PluginManager, input?: string | IRangeColor, index?: number, useIndex?: boolean): IRgb | undefined;
+export declare function colorToRgb(pluginManager: PluginManager, input?: string | IColor, index?: number, useIndex?: boolean): IRgb | undefined;
+export declare function colorToHsl(pluginManager: PluginManager, color: string | IColor | undefined, index?: number, useIndex?: boolean): IHsl | undefined;
+export declare function rangeColorToHsl(pluginManager: PluginManager, color: string | IRangeColor | undefined, index?: number, useIndex?: boolean): IHsl | undefined;
 export declare function rgbToHsl(color: IRgb): IHsl;
-export declare function stringToAlpha(engine: Engine, input: string): number | undefined;
-export declare function stringToRgb(engine: Engine, input: string): IRgb | undefined;
+export declare function stringToAlpha(pluginManager: PluginManager, input: string): number | undefined;
+export declare function stringToRgb(pluginManager: PluginManager, input: string): IRgb | undefined;
 export declare function hslToRgb(hsl: IHsl): IRgb;
 export declare function hslaToRgba(hsla: IHsla): IRgba;
 export declare function getRandomRgbColor(min?: number): IRgb;
@@ -21,8 +21,9 @@ export declare function getStyleFromRgb(color: IRgb, hdr: boolean, opacity?: num
 export declare function getStyleFromHsl(color: IHsl, hdr: boolean, opacity?: number): string;
 export declare function colorMix(color1: IRgb | IHsl, color2: IRgb | IHsl, size1: number, size2: number): IRgb;
 export declare function getLinkColor(p1: Particle, p2?: Particle, linkColor?: string | IRgb): IRgb | undefined;
-export declare function getLinkRandomColor(engine: Engine, optColor: string | IOptionsColor, blink: boolean, consent: boolean): IRgb | string | undefined;
+export declare function getLinkRandomColor(pluginManager: PluginManager, optColor: string | IOptionsColor, blink: boolean, consent: boolean): IRgb | string | undefined;
 export declare function getHslFromAnimation(animation?: IParticleHslAnimation): IHsl | undefined;
 export declare function getHslAnimationFromHsl(hsl: IHsl, animationOptions: HslAnimation | undefined, reduceFactor: number): IParticleHslAnimation;
-export declare function updateColorValue(data: IParticleColorAnimation, range: IRangeValue, decrease: boolean, delta: IDelta): void;
+export declare function updateColorValue(data: IParticleColorAnimation, decrease: boolean, delta: IDelta): void;
 export declare function updateColor(color: IParticleHslAnimation | undefined, delta: IDelta): void;
+export declare function alterHsl(color: IHsl, type: AlterType, value: number): IHsl;

package/types/Utils/LogUtils.d.ts

@@ -3,6 +3,7 @@ interface ILogger {
     error(this: void, message?: unknown, ...optionalParams: unknown[]): void;
     info(this: void, message?: unknown, ...optionalParams: unknown[]): void;
     log(this: void, message?: unknown, ...optionalParams: unknown[]): void;
+    trace(this: void, ...data: unknown[]): void;
     verbose(this: void, message?: unknown, ...optionalParams: unknown[]): void;
     warning(this: void, message?: unknown, ...optionalParams: unknown[]): void;
 }

package/types/Utils/MathUtils.d.ts

@@ -21,7 +21,9 @@ export declare function getDistances(pointA: ICoordinates, pointB: ICoordinates)
     dx: number;
     dy: number;
 };
+export declare function getDistanceSq(pointA: ICoordinates, pointB: ICoordinates): number;
 export declare function getDistance(pointA: ICoordinates, pointB: ICoordinates): number;
+export declare function checkDistance(pointA: ICoordinates, pointB: ICoordinates, distance: number): boolean;
 export declare function degToRad(degrees: number): number;
 export declare function getParticleDirectionAngle(direction: MoveDirection | keyof typeof MoveDirection | MoveDirectionAlt | number, position: ICoordinates, center: ICoordinates): number;
 export declare function getParticleBaseVelocity(direction: number): Vector;

package/types/Utils/OptionsUtils.d.ts

@@ -1,8 +1,8 @@
 import type { Container } from "../Core/Container.js";
-import type { Engine } from "../Core/Engine.js";
 import type { IOptionLoader } from "../Options/Interfaces/IOptionLoader.js";
 import type { IParticlesOptions } from "../Options/Interfaces/Particles/IParticlesOptions.js";
 import { ParticlesOptions } from "../Options/Classes/Particles/ParticlesOptions.js";
+import type { PluginManager } from "../Core/Utils/PluginManager.js";
 import type { RecursivePartial } from "../Types/RecursivePartial.js";
 export declare function loadOptions<T>(options: IOptionLoader<T>, ...sourceOptionsArr: RecursivePartial<T | undefined>[]): void;
-export declare function loadParticlesOptions(engine: Engine, container: Container, ...sourceOptionsArr: RecursivePartial<IParticlesOptions | undefined>[]): ParticlesOptions;
+export declare function loadParticlesOptions(pluginManager: PluginManager, container: Container, ...sourceOptionsArr: RecursivePartial<IParticlesOptions | undefined>[]): ParticlesOptions;

package/types/Utils/Utils.d.ts

@@ -11,13 +11,18 @@ import { OutModeDirection } from "../Enums/Directions/OutModeDirection.js";
 import type { Particle } from "../Core/Particle.js";
 import type { RangedAnimationValueWithRandom } from "../Options/Classes/ValueWithRandom.js";
 import type { SingleOrMultiple } from "../Types/SingleOrMultiple.js";
+interface MemoizeOptions<TArgs> {
+    keyFn?: (args: TArgs) => string;
+    maxSize?: number;
+    ttlMs?: number;
+}
+export declare function memoize<TArgs extends unknown[], Result>(fn: (...args: TArgs) => Result, options?: MemoizeOptions<TArgs>): (...args: TArgs) => Result;
 export declare function hasMatchMedia(): boolean;
 export declare function safeDocument(): Document;
 export declare function safeMatchMedia(query: string): MediaQueryList | undefined;
 export declare function safeIntersectionObserver(callback: (records: IntersectionObserverEntry[]) => void): IntersectionObserver | undefined;
 export declare function safeMutationObserver(callback: (records: MutationRecord[]) => void): MutationObserver | undefined;
 export declare function isInArray<T>(value: T, array: SingleOrMultiple<T>): boolean;
-export declare function loadFont(font?: string, weight?: string): Promise<void>;
 export declare function arrayRandomIndex(array: unknown[]): number;
 export declare function itemFromArray<T>(array: T[], index?: number, useIndex?: boolean): T | undefined;
 export declare function isPointInside(point: ICoordinates, size: IDimension, offset: ICoordinates, radius?: number, direction?: OutModeDirection): boolean;
@@ -37,3 +42,5 @@ export declare function cloneStyle(style: Partial<CSSStyleDeclaration>): CSSStyl
 export declare const getFullScreenStyle: (zIndex: number) => CSSStyleDeclaration;
 export declare function manageListener(element: HTMLElement | Node | Window | MediaQueryList | typeof globalThis, event: string, handler: EventListenerOrEventListenerObject, add: boolean, options?: boolean | AddEventListenerOptions | EventListenerObject): void;
 export declare function getItemsFromInitializer<TItem, TInitializer extends GenericInitializer<TItem>>(container: Container, map: Map<Container, TItem[]>, initializers: Map<string, TInitializer>, force?: boolean): Promise<TItem[]>;
+export declare function getItemMapFromInitializer<TItem, TInitializer extends GenericInitializer<TItem>>(container: Container, map: Map<Container, Map<string, TItem>>, initializers: Map<string, TInitializer>, force?: boolean): Promise<Map<string, TItem>>;
+export {};

package/types/export-types.d.ts

@@ -11,11 +11,10 @@ export type * from "./Core/Interfaces/IDistance.js";
 export type * from "./Core/Interfaces/IDrawParticleParams.js";
 export type * from "./Core/Interfaces/IEffectDrawer.js";
 export type * from "./Core/Interfaces/ILoadParams.js";
-export type * from "./Core/Interfaces/IMovePathGenerator.js";
+export type * from "./Core/Interfaces/IPalette.js";
 export type * from "./Core/Interfaces/IParticleColorStyle.js";
 export type * from "./Core/Interfaces/IParticleHslAnimation.js";
 export type * from "./Core/Interfaces/IParticleLife.js";
-export type * from "./Core/Interfaces/IParticleMover.js";
 export type * from "./Core/Interfaces/IParticleRetinaProps.js";
 export type * from "./Core/Interfaces/IParticleRoll.js";
 export type * from "./Core/Interfaces/IParticleTransformValues.js";
@@ -43,8 +42,8 @@ export type * from "./Options/Interfaces/IValueWithRandom.js";
 export type * from "./Options/Interfaces/Particles/Bounce/IParticlesBounce.js";
 export type * from "./Options/Interfaces/Particles/Effect/IEffect.js";
 export type * from "./Options/Interfaces/Particles/IParticlesOptions.js";
+export type * from "./Options/Interfaces/Particles/IFill.js";
 export type * from "./Options/Interfaces/Particles/IStroke.js";
-export type * from "./Options/Interfaces/Particles/Move/IMoveAttract.js";
 export type * from "./Options/Interfaces/Particles/Move/IMove.js";
 export type * from "./Options/Interfaces/Particles/Move/IMoveAngle.js";
 export type * from "./Options/Interfaces/Particles/Move/IMoveCenter.js";
@@ -61,6 +60,7 @@ export type * from "./Options/Interfaces/Particles/Shape/IShape.js";
 export type * from "./Options/Interfaces/Particles/Size/ISize.js";
 export type * from "./Options/Interfaces/Particles/Size/ISizeAnimation.js";
 export type * from "./Options/Interfaces/Particles/ZIndex/IZIndex.js";
+export type * from "./Types/CanvasContextType.js";
 export type * from "./Types/CustomEventArgs.js";
 export type * from "./Types/CustomEventListener.js";
 export type * from "./Types/EasingFunction.js";
@@ -74,11 +74,11 @@ export type * from "./Types/RecursivePartial.js";
 export type * from "./Types/ShapeData.js";
 export type * from "./Types/SingleOrMultiple.js";
 export type { EventListeners } from "./Core/Utils/EventListeners.js";
-export type { QuadTree } from "./Core/Utils/QuadTree.js";
-export type { Canvas } from "./Core/Canvas.js";
+export type { SpatialHashGrid } from "./Core/Utils/SpatialHashGrid.js";
+export type { CanvasManager } from "./Core/CanvasManager.js";
 export type { Container } from "./Core/Container.js";
 export type { Particle } from "./Core/Particle.js";
-export type { Particles } from "./Core/Particles.js";
+export type { ParticlesManager } from "./Core/ParticlesManager.js";
 export type { Retina } from "./Core/Retina.js";
 export type { Engine } from "./Core/Engine.js";
-export type { IParticlesNumberLimit } from "./Options/Interfaces/Particles/Number/IParticlesNumberLimit.js";
+export type { PluginManager } from "./Core/Utils/PluginManager.js";

package/types/exports.d.ts

@@ -1,5 +1,4 @@
 export * from "./Core/Utils/Constants.js";
-export * from "./Core/Utils/Point.js";
 export * from "./Core/Utils/Ranges.js";
 export * from "./Core/Utils/Vectors.js";
 export * from "./Enums/Directions/MoveDirection.js";
@@ -28,8 +27,8 @@ export * from "./Options/Classes/OptionsColor.js";
 export * from "./Options/Classes/Particles/Bounce/ParticlesBounce.js";
 export * from "./Options/Classes/Particles/Bounce/ParticlesBounceFactor.js";
 export * from "./Options/Classes/Particles/ParticlesOptions.js";
+export * from "./Options/Classes/Particles/Fill.js";
 export * from "./Options/Classes/Particles/Stroke.js";
-export * from "./Options/Classes/Particles/Move/MoveAttract.js";
 export * from "./Options/Classes/Particles/Move/Move.js";
 export * from "./Options/Classes/Particles/Move/MoveAngle.js";
 export * from "./Options/Classes/Particles/Move/MoveCenter.js";

package/umd/Core/CanvasManager.js

@@ -0,0 +1,317 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports", "../Utils/Utils.js", "./Utils/Constants.js", "../Utils/ColorUtils.js", "./RenderManager.js"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.CanvasManager = void 0;
+    const Utils_js_1 = require("../Utils/Utils.js");
+    const Constants_js_1 = require("./Utils/Constants.js");
+    const ColorUtils_js_1 = require("../Utils/ColorUtils.js");
+    const RenderManager_js_1 = require("./RenderManager.js");
+    function setStyle(canvas, style, important = false) {
+        if (!style) {
+            return;
+        }
+        const element = canvas, elementStyle = element.style, keys = new Set();
+        for (let i = 0; i < elementStyle.length; i++) {
+            const key = elementStyle.item(i);
+            if (!key) {
+                continue;
+            }
+            keys.add(key);
+        }
+        for (let i = 0; i < style.length; i++) {
+            const key = style.item(i);
+            if (!key) {
+                continue;
+            }
+            keys.add(key);
+        }
+        for (const key of keys) {
+            const value = style.getPropertyValue(key);
+            if (value) {
+                elementStyle.setProperty(key, value, important ? "important" : "");
+            }
+            else {
+                elementStyle.removeProperty(key);
+            }
+        }
+    }
+    class CanvasManager {
+        element;
+        render;
+        size;
+        zoom = Constants_js_1.defaultZoom;
+        _container;
+        _generated;
+        _mutationObserver;
+        _originalStyle;
+        _pluginManager;
+        _pointerEvents;
+        _resizePlugins;
+        _standardSize;
+        _zoomCenter;
+        constructor(pluginManager, container) {
+            this._pluginManager = pluginManager;
+            this._container = container;
+            this.render = new RenderManager_js_1.RenderManager(pluginManager, container, this);
+            this._standardSize = {
+                height: 0,
+                width: 0,
+            };
+            const pxRatio = container.retina.pixelRatio, stdSize = this._standardSize;
+            this.size = {
+                height: stdSize.height * pxRatio,
+                width: stdSize.width * pxRatio,
+            };
+            this._generated = false;
+            this._resizePlugins = [];
+            this._pointerEvents = "none";
+        }
+        get _fullScreen() {
+            return this._container.actualOptions.fullScreen.enable;
+        }
+        destroy() {
+            this.stop();
+            if (this._generated) {
+                const element = this.element;
+                element?.remove();
+                this.element = undefined;
+            }
+            else {
+                this._resetOriginalStyle();
+            }
+            this.render.destroy();
+            this._resizePlugins = [];
+        }
+        getZoomCenter() {
+            const pxRatio = this._container.retina.pixelRatio, { width, height } = this.size;
+            if (this._zoomCenter) {
+                return this._zoomCenter;
+            }
+            return {
+                x: (width * Constants_js_1.half) / pxRatio,
+                y: (height * Constants_js_1.half) / pxRatio,
+            };
+        }
+        init() {
+            this._safeMutationObserver(obs => {
+                obs.disconnect();
+            });
+            this._mutationObserver = (0, Utils_js_1.safeMutationObserver)(records => {
+                for (const record of records) {
+                    if (record.type === "attributes" && record.attributeName === "style") {
+                        this._repairStyle();
+                    }
+                }
+            });
+            this.resize();
+            this._initStyle();
+            this.initBackground();
+            this._safeMutationObserver(obs => {
+                if (!this.element || !(this.element instanceof Node)) {
+                    return;
+                }
+                obs.observe(this.element, { attributes: true });
+            });
+            this.initPlugins();
+            this.render.init();
+        }
+        initBackground() {
+            const { _container } = this, options = _container.actualOptions, background = options.background, element = this.element;
+            if (!element) {
+                return;
+            }
+            const elementStyle = element.style, color = (0, ColorUtils_js_1.rangeColorToRgb)(this._pluginManager, background.color);
+            if (color) {
+                elementStyle.backgroundColor = (0, ColorUtils_js_1.getStyleFromRgb)(color, _container.hdr, background.opacity);
+            }
+            else {
+                elementStyle.backgroundColor = "";
+            }
+            elementStyle.backgroundImage = background.image || "";
+            elementStyle.backgroundPosition = background.position || "";
+            elementStyle.backgroundRepeat = background.repeat || "";
+            elementStyle.backgroundSize = background.size || "";
+        }
+        initPlugins() {
+            this._resizePlugins = [];
+            for (const plugin of this._container.plugins) {
+                if (plugin.resize) {
+                    this._resizePlugins.push(plugin);
+                }
+            }
+        }
+        loadCanvas(canvas) {
+            if (this._generated && this.element) {
+                this.element.remove();
+            }
+            const container = this._container;
+            this._generated =
+                Constants_js_1.generatedAttribute in canvas.dataset ? canvas.dataset[Constants_js_1.generatedAttribute] === "true" : this._generated;
+            this.element = canvas;
+            this.element.ariaHidden = "true";
+            this._originalStyle = (0, Utils_js_1.cloneStyle)(this.element.style);
+            const standardSize = this._standardSize;
+            standardSize.height = canvas.offsetHeight;
+            standardSize.width = canvas.offsetWidth;
+            const pxRatio = this._container.retina.pixelRatio, retinaSize = this.size;
+            canvas.height = retinaSize.height = standardSize.height * pxRatio;
+            canvas.width = retinaSize.width = standardSize.width * pxRatio;
+            const canSupportHdrQuery = (0, Utils_js_1.safeMatchMedia)("(color-gamut: p3)");
+            this.render.setContextSettings({
+                alpha: true,
+                colorSpace: canSupportHdrQuery?.matches && container.hdr ? "display-p3" : "srgb",
+                desynchronized: true,
+                willReadFrequently: false,
+            });
+            this.render.setContext(this.element.getContext("2d", this.render.settings));
+            this._safeMutationObserver(obs => {
+                obs.disconnect();
+            });
+            container.retina.init();
+            this.initBackground();
+            this._safeMutationObserver(obs => {
+                if (!this.element || !(this.element instanceof Node)) {
+                    return;
+                }
+                obs.observe(this.element, { attributes: true });
+            });
+        }
+        resize() {
+            if (!this.element) {
+                return false;
+            }
+            const container = this._container, currentSize = container.canvas._standardSize, newSize = {
+                width: this.element.offsetWidth,
+                height: this.element.offsetHeight,
+            }, pxRatio = container.retina.pixelRatio, retinaSize = {
+                width: newSize.width * pxRatio,
+                height: newSize.height * pxRatio,
+            };
+            if (newSize.height === currentSize.height &&
+                newSize.width === currentSize.width &&
+                retinaSize.height === this.element.height &&
+                retinaSize.width === this.element.width) {
+                return false;
+            }
+            const oldSize = { ...currentSize };
+            currentSize.height = newSize.height;
+            currentSize.width = newSize.width;
+            const canvasSize = this.size;
+            this.element.width = canvasSize.width = retinaSize.width;
+            this.element.height = canvasSize.height = retinaSize.height;
+            if (this._container.started) {
+                container.particles.setResizeFactor({
+                    width: currentSize.width / oldSize.width,
+                    height: currentSize.height / oldSize.height,
+                });
+            }
+            return true;
+        }
+        setPointerEvents(type) {
+            const element = this.element;
+            if (!element) {
+                return;
+            }
+            this._pointerEvents = type;
+            this._repairStyle();
+        }
+        setZoom(zoomLevel, center) {
+            this.zoom = zoomLevel;
+            this._zoomCenter = center;
+        }
+        stop() {
+            this._safeMutationObserver(obs => {
+                obs.disconnect();
+            });
+            this._mutationObserver = undefined;
+            this.render.stop();
+        }
+        async windowResize() {
+            if (!this.element || !this.resize()) {
+                return;
+            }
+            const container = this._container, needsRefresh = container.updateActualOptions();
+            container.particles.setDensity();
+            this._applyResizePlugins();
+            if (needsRefresh) {
+                await container.refresh();
+            }
+        }
+        _applyResizePlugins = () => {
+            for (const plugin of this._resizePlugins) {
+                plugin.resize?.();
+            }
+        };
+        _initStyle = () => {
+            const element = this.element, options = this._container.actualOptions;
+            if (!element) {
+                return;
+            }
+            if (this._fullScreen) {
+                this._setFullScreenStyle();
+            }
+            else {
+                this._resetOriginalStyle();
+            }
+            for (const key in options.style) {
+                if (!key || !(key in options.style)) {
+                    continue;
+                }
+                const value = options.style[key];
+                if (!value) {
+                    continue;
+                }
+                element.style.setProperty(key, value, "important");
+            }
+        };
+        _repairStyle = () => {
+            const element = this.element;
+            if (!element) {
+                return;
+            }
+            this._safeMutationObserver(observer => {
+                observer.disconnect();
+            });
+            this._initStyle();
+            this.initBackground();
+            const pointerEvents = this._pointerEvents;
+            element.style.pointerEvents = pointerEvents;
+            element.setAttribute("pointer-events", pointerEvents);
+            this._safeMutationObserver(observer => {
+                if (!(element instanceof Node)) {
+                    return;
+                }
+                observer.observe(element, { attributes: true });
+            });
+        };
+        _resetOriginalStyle = () => {
+            const element = this.element, originalStyle = this._originalStyle;
+            if (!element || !originalStyle) {
+                return;
+            }
+            setStyle(element, originalStyle, true);
+        };
+        _safeMutationObserver = callback => {
+            if (!this._mutationObserver) {
+                return;
+            }
+            callback(this._mutationObserver);
+        };
+        _setFullScreenStyle = () => {
+            const element = this.element;
+            if (!element) {
+                return;
+            }
+            setStyle(element, (0, Utils_js_1.getFullScreenStyle)(this._container.actualOptions.fullScreen.zIndex), true);
+        };
+    }
+    exports.CanvasManager = CanvasManager;
+});