@tsparticles/engine 4.0.0-beta.0 → 4.0.0-beta.1

package/browser/Core/RenderManager.js

@@ -0,0 +1,303 @@
+import { clear, drawParticle, drawParticlePlugin, paintBase, paintImage } from "../Utils/CanvasUtils.js";
+import { defaultCompositeValue, defaultTransformValue, minimumSize, zIndexFactorOffset } from "./Utils/Constants.js";
+import { getStyleFromHsl, rangeColorToHsl } from "../Utils/ColorUtils.js";
+const fColorIndex = 0, sColorIndex = 1;
+function setTransformValue(factor, newFactor, key) {
+    const newValue = newFactor[key];
+    if (newValue !== undefined) {
+        factor[key] = (factor[key] ?? defaultTransformValue) * newValue;
+    }
+}
+export class RenderManager {
+    _canvasClearPlugins;
+    _canvasManager;
+    _canvasPaintPlugins;
+    _clearDrawPlugins;
+    _colorPlugins;
+    _container;
+    _context;
+    _contextSettings;
+    _drawParticlePlugins;
+    _drawParticlesCleanupPlugins;
+    _drawParticlesSetupPlugins;
+    _drawPlugins;
+    _drawSettingsCleanupPlugins;
+    _drawSettingsSetupPlugins;
+    _pluginManager;
+    _postDrawUpdaters;
+    _preDrawUpdaters;
+    _reusableColorStyles = {};
+    _reusablePluginColors = [undefined, undefined];
+    _reusableTransform = {};
+    constructor(pluginManager, container, canvasManager) {
+        this._pluginManager = pluginManager;
+        this._container = container;
+        this._canvasManager = canvasManager;
+        this._context = null;
+        this._preDrawUpdaters = [];
+        this._postDrawUpdaters = [];
+        this._colorPlugins = [];
+        this._canvasClearPlugins = [];
+        this._canvasPaintPlugins = [];
+        this._clearDrawPlugins = [];
+        this._drawParticlePlugins = [];
+        this._drawParticlesCleanupPlugins = [];
+        this._drawParticlesSetupPlugins = [];
+        this._drawPlugins = [];
+        this._drawSettingsSetupPlugins = [];
+        this._drawSettingsCleanupPlugins = [];
+    }
+    get settings() {
+        return this._contextSettings;
+    }
+    canvasClear() {
+        if (!this._container.actualOptions.clear) {
+            return;
+        }
+        this.draw(ctx => {
+            clear(ctx, this._canvasManager.size);
+        });
+    }
+    clear() {
+        let pluginHandled = false;
+        for (const plugin of this._canvasClearPlugins) {
+            pluginHandled = plugin.canvasClear?.() ?? false;
+            if (pluginHandled) {
+                break;
+            }
+        }
+        if (pluginHandled) {
+            return;
+        }
+        this.canvasClear();
+    }
+    destroy() {
+        this.stop();
+        this._preDrawUpdaters = [];
+        this._postDrawUpdaters = [];
+        this._colorPlugins = [];
+        this._canvasClearPlugins = [];
+        this._canvasPaintPlugins = [];
+        this._clearDrawPlugins = [];
+        this._drawParticlePlugins = [];
+        this._drawParticlesCleanupPlugins = [];
+        this._drawParticlesSetupPlugins = [];
+        this._drawPlugins = [];
+        this._drawSettingsSetupPlugins = [];
+        this._drawSettingsCleanupPlugins = [];
+    }
+    draw(cb) {
+        const ctx = this._context;
+        if (!ctx) {
+            return;
+        }
+        return cb(ctx);
+    }
+    drawParticle(particle, delta) {
+        if (particle.spawning || particle.destroyed) {
+            return;
+        }
+        const radius = particle.getRadius();
+        if (radius <= minimumSize) {
+            return;
+        }
+        const pfColor = particle.getFillColor(), psColor = particle.getStrokeColor();
+        let [fColor, sColor] = this._getPluginParticleColors(particle);
+        fColor ??= pfColor;
+        sColor ??= psColor;
+        if (!fColor && !sColor) {
+            return;
+        }
+        const container = this._container, zIndexOptions = particle.options.zIndex, zIndexFactor = zIndexFactorOffset - particle.zIndexFactor, { fillOpacity, opacity, strokeOpacity } = particle.getOpacity(), transform = this._reusableTransform, colorStyles = this._reusableColorStyles, fill = fColor ? getStyleFromHsl(fColor, container.hdr, fillOpacity * opacity) : undefined, stroke = sColor ? getStyleFromHsl(sColor, container.hdr, strokeOpacity * opacity) : fill;
+        transform.a = transform.b = transform.c = transform.d = undefined;
+        colorStyles.fill = fill;
+        colorStyles.stroke = stroke;
+        this.draw((context) => {
+            for (const plugin of this._drawParticlesSetupPlugins) {
+                plugin.drawParticleSetup?.(context, particle, delta);
+            }
+            this._applyPreDrawUpdaters(context, particle, radius, opacity, colorStyles, transform);
+            drawParticle({
+                container,
+                context,
+                particle,
+                delta,
+                colorStyles,
+                radius: radius * zIndexFactor ** zIndexOptions.sizeRate,
+                opacity: opacity,
+                transform,
+            });
+            this._applyPostDrawUpdaters(particle);
+            for (const plugin of this._drawParticlesCleanupPlugins) {
+                plugin.drawParticleCleanup?.(context, particle, delta);
+            }
+        });
+    }
+    drawParticlePlugins(particle, delta) {
+        this.draw(ctx => {
+            for (const plugin of this._drawParticlePlugins) {
+                drawParticlePlugin(ctx, plugin, particle, delta);
+            }
+        });
+    }
+    drawParticles(delta) {
+        const { particles } = this._container;
+        this.clear();
+        particles.update(delta);
+        this.draw(ctx => {
+            for (const plugin of this._drawSettingsSetupPlugins) {
+                plugin.drawSettingsSetup?.(ctx, delta);
+            }
+            for (const plugin of this._drawPlugins) {
+                plugin.draw?.(ctx, delta);
+            }
+            particles.drawParticles(delta);
+            for (const plugin of this._clearDrawPlugins) {
+                plugin.clearDraw?.(ctx, delta);
+            }
+            for (const plugin of this._drawSettingsCleanupPlugins) {
+                plugin.drawSettingsCleanup?.(ctx, delta);
+            }
+        });
+    }
+    init() {
+        this.initUpdaters();
+        this.initPlugins();
+        this.paint();
+    }
+    initPlugins() {
+        this._colorPlugins = [];
+        this._canvasClearPlugins = [];
+        this._canvasPaintPlugins = [];
+        this._clearDrawPlugins = [];
+        this._drawParticlePlugins = [];
+        this._drawParticlesSetupPlugins = [];
+        this._drawParticlesCleanupPlugins = [];
+        this._drawPlugins = [];
+        this._drawSettingsSetupPlugins = [];
+        this._drawSettingsCleanupPlugins = [];
+        for (const plugin of this._container.plugins) {
+            if (plugin.particleFillColor ?? plugin.particleStrokeColor) {
+                this._colorPlugins.push(plugin);
+            }
+            if (plugin.canvasClear) {
+                this._canvasClearPlugins.push(plugin);
+            }
+            if (plugin.canvasPaint) {
+                this._canvasPaintPlugins.push(plugin);
+            }
+            if (plugin.drawParticle) {
+                this._drawParticlePlugins.push(plugin);
+            }
+            if (plugin.drawParticleSetup) {
+                this._drawParticlesSetupPlugins.push(plugin);
+            }
+            if (plugin.drawParticleCleanup) {
+                this._drawParticlesCleanupPlugins.push(plugin);
+            }
+            if (plugin.draw) {
+                this._drawPlugins.push(plugin);
+            }
+            if (plugin.drawSettingsSetup) {
+                this._drawSettingsSetupPlugins.push(plugin);
+            }
+            if (plugin.drawSettingsCleanup) {
+                this._drawSettingsCleanupPlugins.push(plugin);
+            }
+            if (plugin.clearDraw) {
+                this._clearDrawPlugins.push(plugin);
+            }
+        }
+    }
+    initUpdaters() {
+        this._preDrawUpdaters = [];
+        this._postDrawUpdaters = [];
+        for (const updater of this._container.particleUpdaters) {
+            if (updater.afterDraw) {
+                this._postDrawUpdaters.push(updater);
+            }
+            if (updater.getColorStyles ?? updater.getTransformValues ?? updater.beforeDraw) {
+                this._preDrawUpdaters.push(updater);
+            }
+        }
+    }
+    paint() {
+        let handled = false;
+        for (const plugin of this._canvasPaintPlugins) {
+            handled = plugin.canvasPaint?.() ?? false;
+            if (handled) {
+                break;
+            }
+        }
+        if (handled) {
+            return;
+        }
+        this.paintBase();
+    }
+    paintBase(baseColor) {
+        this.draw(ctx => {
+            paintBase(ctx, this._canvasManager.size, baseColor);
+        });
+    }
+    paintImage(image, opacity) {
+        this.draw(ctx => {
+            paintImage(ctx, this._canvasManager.size, image, opacity);
+        });
+    }
+    setContext(context) {
+        this._context = context;
+        if (this._context) {
+            this._context.globalCompositeOperation = defaultCompositeValue;
+        }
+    }
+    setContextSettings(settings) {
+        this._contextSettings = settings;
+    }
+    stop() {
+        this.draw(ctx => {
+            clear(ctx, this._canvasManager.size);
+        });
+    }
+    _applyPostDrawUpdaters = particle => {
+        for (const updater of this._postDrawUpdaters) {
+            updater.afterDraw?.(particle);
+        }
+    };
+    _applyPreDrawUpdaters = (ctx, particle, radius, zOpacity, colorStyles, transform) => {
+        for (const updater of this._preDrawUpdaters) {
+            if (updater.getColorStyles) {
+                const { fill, stroke } = updater.getColorStyles(particle, ctx, radius, zOpacity);
+                if (fill) {
+                    colorStyles.fill = fill;
+                }
+                if (stroke) {
+                    colorStyles.stroke = stroke;
+                }
+            }
+            if (updater.getTransformValues) {
+                const updaterTransform = updater.getTransformValues(particle);
+                for (const key in updaterTransform) {
+                    setTransformValue(transform, updaterTransform, key);
+                }
+            }
+            updater.beforeDraw?.(particle);
+        }
+    };
+    _getPluginParticleColors = particle => {
+        let fColor, sColor;
+        for (const plugin of this._colorPlugins) {
+            if (!fColor && plugin.particleFillColor) {
+                fColor = rangeColorToHsl(this._pluginManager, plugin.particleFillColor(particle));
+            }
+            if (!sColor && plugin.particleStrokeColor) {
+                sColor = rangeColorToHsl(this._pluginManager, plugin.particleStrokeColor(particle));
+            }
+            if (fColor && sColor) {
+                break;
+            }
+        }
+        this._reusablePluginColors[fColorIndex] = fColor;
+        this._reusablePluginColors[sColorIndex] = sColor;
+        return this._reusablePluginColors;
+    };
+}

package/browser/Core/Retina.js

@@ -2,10 +2,8 @@ import { defaultRatio, defaultReduceFactor } from "./Utils/Constants.js";
 import { getRangeValue } from "../Utils/MathUtils.js";
 export class Retina {
     container;
-    maxSpeed;
     pixelRatio;
     reduceFactor;
-    sizeAnimationSpeed;
     constructor(container) {
         this.container = container;
         this.pixelRatio = defaultRatio;
@@ -21,18 +19,15 @@ export class Retina {
             canvas.size.width = element.offsetWidth * ratio;
             canvas.size.height = element.offsetHeight * ratio;
         }
-        const particles = options.particles, moveOptions = particles.move;
-        this.maxSpeed = getRangeValue(moveOptions.gravity.maxSpeed) * ratio;
-        this.sizeAnimationSpeed = getRangeValue(particles.size.animation.speed) * ratio;
     }
     initParticle(particle) {
         const options = particle.options, ratio = this.pixelRatio, moveOptions = options.move, moveDistance = moveOptions.distance, props = particle.retina;
+        props.maxSpeed = getRangeValue(moveOptions.gravity.maxSpeed) * ratio;
         props.moveDrift = getRangeValue(moveOptions.drift) * ratio;
         props.moveSpeed = getRangeValue(moveOptions.speed) * ratio;
         props.sizeAnimationSpeed = getRangeValue(options.size.animation.speed) * ratio;
         const maxDistance = props.maxDistance;
-        maxDistance.horizontal = moveDistance.horizontal !== undefined ? moveDistance.horizontal * ratio : undefined;
-        maxDistance.vertical = moveDistance.vertical !== undefined ? moveDistance.vertical * ratio : undefined;
-        props.maxSpeed = getRangeValue(moveOptions.gravity.maxSpeed) * ratio;
+        maxDistance.horizontal = moveDistance.horizontal === undefined ? undefined : moveDistance.horizontal * ratio;
+        maxDistance.vertical = moveDistance.vertical === undefined ? undefined : moveDistance.vertical * ratio;
     }
 }

package/browser/Core/Utils/PluginManager.js

@@ -0,0 +1,145 @@
+import { getItemMapFromInitializer, getItemsFromInitializer } from "../../Utils/Utils.js";
+import { EventType } from "../../Enums/Types/EventType.js";
+export class PluginManager {
+    colorManagers = new Map();
+    easingFunctions = new Map();
+    effectDrawers = new Map();
+    initializers = {
+        effects: new Map(),
+        shapes: new Map(),
+        updaters: new Map(),
+    };
+    palettes = new Map();
+    plugins = [];
+    presets = new Map();
+    shapeDrawers = new Map();
+    updaters = new Map();
+    _allLoadersSet = new Set();
+    _configs = new Map();
+    _engine;
+    _executedSet = new Set();
+    _initialized = false;
+    _isRunningLoaders = false;
+    _loadPromises = new Set();
+    constructor(engine) {
+        this._engine = engine;
+    }
+    get configs() {
+        const res = {};
+        for (const [name, config] of this._configs) {
+            res[name] = config;
+        }
+        return res;
+    }
+    addColorManager(name, manager) {
+        this.colorManagers.set(name, manager);
+    }
+    addConfig(config) {
+        const key = config.key ?? config.name ?? "default";
+        this._configs.set(key, config);
+        this._engine.dispatchEvent(EventType.configAdded, { data: { name: key, config } });
+    }
+    addEasing(name, easing) {
+        if (this.easingFunctions.get(name)) {
+            return;
+        }
+        this.easingFunctions.set(name, easing);
+    }
+    addEffect(effect, drawer) {
+        this.initializers.effects.set(effect, drawer);
+    }
+    addPalette(name, palette) {
+        this.palettes.set(name, palette);
+    }
+    addParticleUpdater(name, updaterInitializer) {
+        this.initializers.updaters.set(name, updaterInitializer);
+    }
+    addPlugin(plugin) {
+        if (this.getPlugin(plugin.id)) {
+            return;
+        }
+        this.plugins.push(plugin);
+    }
+    addPreset(preset, options, override = false) {
+        if (!(override || !this.getPreset(preset))) {
+            return;
+        }
+        this.presets.set(preset, options);
+    }
+    addShape(shapes, drawer) {
+        for (const shape of shapes) {
+            this.initializers.shapes.set(shape, drawer);
+        }
+    }
+    clearPlugins(container) {
+        this.effectDrawers.delete(container);
+        this.shapeDrawers.delete(container);
+        this.updaters.delete(container);
+    }
+    getEasing(name) {
+        return this.easingFunctions.get(name) ?? ((value) => value);
+    }
+    getEffectDrawers(container, force = false) {
+        return getItemMapFromInitializer(container, this.effectDrawers, this.initializers.effects, force);
+    }
+    getPalette(name) {
+        return this.palettes.get(name);
+    }
+    getPlugin(plugin) {
+        return this.plugins.find(t => t.id === plugin);
+    }
+    getPreset(preset) {
+        return this.presets.get(preset);
+    }
+    async getShapeDrawers(container, force = false) {
+        return getItemMapFromInitializer(container, this.shapeDrawers, this.initializers.shapes, force);
+    }
+    async getUpdaters(container, force = false) {
+        return getItemsFromInitializer(container, this.updaters, this.initializers.updaters, force);
+    }
+    async init() {
+        if (this._initialized || this._isRunningLoaders) {
+            return;
+        }
+        this._isRunningLoaders = true;
+        this._executedSet = new Set();
+        this._allLoadersSet = new Set(this._loadPromises);
+        try {
+            for (const loader of this._allLoadersSet) {
+                await this._runLoader(loader, this._executedSet, this._allLoadersSet);
+            }
+        }
+        finally {
+            this._loadPromises.clear();
+            this._isRunningLoaders = false;
+            this._initialized = true;
+        }
+    }
+    loadParticlesOptions(container, options, ...sourceOptions) {
+        const updaters = this.updaters.get(container);
+        if (!updaters) {
+            return;
+        }
+        updaters.forEach(updater => updater.loadOptions?.(options, ...sourceOptions));
+    }
+    async register(...loaders) {
+        if (this._initialized) {
+            throw new Error("Register plugins can only be done before calling tsParticles.load()");
+        }
+        for (const loader of loaders) {
+            if (this._isRunningLoaders) {
+                await this._runLoader(loader, this._executedSet, this._allLoadersSet);
+            }
+            else {
+                this._loadPromises.add(loader);
+            }
+        }
+    }
+    async _runLoader(loader, executed, allLoaders) {
+        if (executed.has(loader))
+            return;
+        executed.add(loader);
+        allLoaders.add(loader);
+        await loader(this._engine);
+    }
+}

package/browser/Options/Classes/Options.js

@@ -28,9 +28,9 @@ export class Options {
     style;
     zLayers;
     _container;
-    _engine;
-    constructor(engine, container) {
-        this._engine = engine;
+    _pluginManager;
+    constructor(pluginManager, container) {
+        this._pluginManager = pluginManager;
         this._container = container;
         this.autoPlay = true;
         this.background = new Background();
@@ -42,7 +42,7 @@ export class Options {
         this.duration = 0;
         this.fpsLimit = 120;
         this.hdr = true;
-        this.particles = loadParticlesOptions(this._engine, this._container);
+        this.particles = loadParticlesOptions(this._pluginManager, this._container);
         this.pauseOnBlur = true;
         this.pauseOnOutsideViewport = true;
         this.resize = new ResizeEvent();
@@ -116,12 +116,12 @@ export class Options {
         if (data.smooth !== undefined) {
             this.smooth = data.smooth;
         }
-        this._engine.plugins.forEach(plugin => {
+        this._pluginManager.plugins.forEach(plugin => {
             plugin.loadOptions(this._container, this, data);
         });
     }
     _importPalette = palette => {
-        const paletteData = this._engine.getPalette(palette);
+        const paletteData = this._pluginManager.getPalette(palette);
         if (!paletteData) {
             return;
         }
@@ -152,6 +152,6 @@ export class Options {
         });
     };
     _importPreset = preset => {
-        this.load(this._engine.getPreset(preset));
+        this.load(this._pluginManager.getPreset(preset));
     };
 }

package/browser/Options/Classes/Particles/ParticlesOptions.js

@@ -24,9 +24,9 @@ export class ParticlesOptions {
     stroke;
     zIndex;
     _container;
-    _engine;
-    constructor(engine, container) {
-        this._engine = engine;
+    _pluginManager;
+    constructor(pluginManager, container) {
+        this._pluginManager = pluginManager;
         this._container = container;
         this.bounce = new ParticlesBounce();
         this.effect = new Effect();
@@ -84,12 +84,12 @@ export class ParticlesOptions {
             });
         }
         if (this._container) {
-            for (const plugin of this._engine.plugins) {
+            for (const plugin of this._pluginManager.plugins) {
                 if (plugin.loadParticlesOptions) {
                     plugin.loadParticlesOptions(this._container, this, data);
                 }
             }
-            const updaters = this._engine.updaters.get(this._container);
+            const updaters = this._pluginManager.updaters.get(this._container);
             if (updaters) {
                 for (const updater of updaters) {
                     if (updater.loadOptions) {

package/browser/Types/CanvasContextType.js

@@ -0,0 +1 @@
+export {};

package/browser/Utils/CanvasUtils.js

@@ -16,7 +16,7 @@ export function clear(context, dimension) {
     context.clearRect(originPoint.x, originPoint.y, dimension.width, dimension.height);
 }
 export function drawParticle(data) {
-    const { container, context, particle, delta, colorStyles, radius, opacity, transform } = data, { effectDrawers, shapeDrawers } = container.particles, pos = particle.getPosition(), transformData = particle.getTransformData(transform), drawScale = defaultZoom, drawPosition = {
+    const { container, context, particle, delta, colorStyles, radius, opacity, transform } = data, { effectDrawers, shapeDrawers } = container, pos = particle.getPosition(), transformData = particle.getTransformData(transform), drawScale = defaultZoom, drawPosition = {
         x: pos.x,
         y: pos.y,
     };

package/browser/Utils/ColorUtils.js

@@ -17,35 +17,35 @@ function getCachedStyle(key, generator) {
     }
     return cached;
 }
-function stringToRgba(engine, input) {
+function stringToRgba(pluginManager, input) {
     if (!input) {
         return;
     }
-    for (const manager of engine.colorManagers.values()) {
+    for (const manager of pluginManager.colorManagers.values()) {
         if (manager.accepts(input)) {
             return manager.parseString(input);
         }
     }
     return undefined;
 }
-export function rangeColorToRgb(engine, input, index, useIndex = true) {
+export function rangeColorToRgb(pluginManager, input, index, useIndex = true) {
     if (!input) {
         return;
     }
     const color = isString(input) ? { value: input } : input;
     if (isString(color.value)) {
-        return colorToRgb(engine, color.value, index, useIndex);
+        return colorToRgb(pluginManager, color.value, index, useIndex);
     }
     if (isArray(color.value)) {
         const value = itemFromArray(color.value, index, useIndex);
         if (!value) {
             return;
         }
-        return rangeColorToRgb(engine, {
+        return rangeColorToRgb(pluginManager, {
             value,
         });
     }
-    for (const manager of engine.colorManagers.values()) {
+    for (const manager of pluginManager.colorManagers.values()) {
         const res = manager.handleRangeColor(color);
         if (res) {
             return res;
@@ -53,24 +53,24 @@ export function rangeColorToRgb(engine, input, index, useIndex = true) {
     }
     return undefined;
 }
-export function colorToRgb(engine, input, index, useIndex = true) {
+export function colorToRgb(pluginManager, input, index, useIndex = true) {
     if (!input) {
         return;
     }
     const color = isString(input) ? { value: input } : input;
     if (isString(color.value)) {
-        return color.value === randomColorValue ? getRandomRgbColor() : stringToRgb(engine, color.value);
+        return color.value === randomColorValue ? getRandomRgbColor() : stringToRgb(pluginManager, color.value);
     }
     if (isArray(color.value)) {
         const value = itemFromArray(color.value, index, useIndex);
         if (!value) {
             return;
         }
-        return colorToRgb(engine, {
+        return colorToRgb(pluginManager, {
             value,
         });
     }
-    for (const manager of engine.colorManagers.values()) {
+    for (const manager of pluginManager.colorManagers.values()) {
         const res = manager.handleColor(color);
         if (res) {
             return res;
@@ -78,12 +78,12 @@ export function colorToRgb(engine, input, index, useIndex = true) {
     }
     return undefined;
 }
-export function colorToHsl(engine, color, index, useIndex = true) {
-    const rgb = colorToRgb(engine, color, index, useIndex);
+export function colorToHsl(pluginManager, color, index, useIndex = true) {
+    const rgb = colorToRgb(pluginManager, color, index, useIndex);
     return rgb ? rgbToHsl(rgb) : undefined;
 }
-export function rangeColorToHsl(engine, color, index, useIndex = true) {
-    const rgb = rangeColorToRgb(engine, color, index, useIndex);
+export function rangeColorToHsl(pluginManager, color, index, useIndex = true) {
+    const rgb = rangeColorToRgb(pluginManager, color, index, useIndex);
     return rgb ? rgbToHsl(rgb) : undefined;
 }
 export function rgbToHsl(color) {
@@ -115,11 +115,11 @@ export function rgbToHsl(color) {
     }
     return res;
 }
-export function stringToAlpha(engine, input) {
-    return stringToRgba(engine, input)?.a;
+export function stringToAlpha(pluginManager, input) {
+    return stringToRgba(pluginManager, input)?.a;
 }
-export function stringToRgb(engine, input) {
-    return stringToRgba(engine, input);
+export function stringToRgb(pluginManager, input) {
+    return stringToRgba(pluginManager, input);
 }
 export function hslToRgb(hsl) {
     const h = ((hsl.h % hMax) + hMax) % hMax, s = Math.max(sMin, Math.min(sMax, hsl.s)), l = Math.max(lMin, Math.min(lMax, hsl.l)), hNormalized = h / hMax, sNormalized = s / sMax, lNormalized = l / lMax;
@@ -223,11 +223,11 @@ export function getLinkColor(p1, p2, linkColor) {
     }
     return undefined;
 }
-export function getLinkRandomColor(engine, optColor, blink, consent) {
+export function getLinkRandomColor(pluginManager, optColor, blink, consent) {
     const color = isString(optColor) ? optColor : optColor.value;
     if (color === randomColorValue) {
         if (consent) {
-            return rangeColorToRgb(engine, {
+            return rangeColorToRgb(pluginManager, {
                 value: color,
             });
         }
@@ -240,7 +240,7 @@ export function getLinkRandomColor(engine, optColor, blink, consent) {
         return midColorValue;
     }
     else {
-        return rangeColorToRgb(engine, {
+        return rangeColorToRgb(pluginManager, {
             value: color,
         });
     }