refactor: changed type from standard canvas context, to both types (canvas and offscreen)

Author: matteobruni

engine/src/Core/Container.ts

@@ -1,14 +1,7 @@
 import { animate, cancelAnimation, getRangeValue } from "../Utils/MathUtils.js";
-import {
-  defaultFps,
-  defaultFpsLimit,
-  millisecondsToSeconds,
-  minFpsLimit,
-  removeDeleteCount,
-  removeMinIndex,
-} from "./Utils/Constants.js";
+import { defaultFps, defaultFpsLimit, millisecondsToSeconds, minFpsLimit } from "./Utils/Constants.js";
 import { CanvasManager } from "./CanvasManager.js";
-import type { Engine } from "./Engine.js";
+import type { CustomEventArgs } from "../Types/CustomEventArgs.js";
 import { EventListeners } from "./Utils/EventListeners.js";
 import { EventType } from "../Enums/Types/EventType.js";
 import type { IContainerPlugin } from "./Interfaces/IContainerPlugin.js";
@@ -25,6 +18,14 @@ import { Retina } from "./Retina.js";
 import { getLogger } from "../Utils/LogUtils.js";
 import { loadOptions } from "../Utils/OptionsUtils.js";
 
+interface ContainerParams {
+  dispatchCallback: (eventType: string, args?: CustomEventArgs) => void;
+  id: string;
+  onDestroy: (remove: boolean) => void;
+  pluginManager: PluginManager;
+  sourceOptions?: ISourceOptions;
+}
+
 /**
  * Checks if the container is still usable
  * @param container - the container to check
@@ -132,12 +133,12 @@ export class Container {
   private _delay: number;
   private _delayTimeout?: number | NodeJS.Timeout;
   private readonly _delta: IDelta = { value: 0, factor: 0 };
+  private readonly _dispatchCallback;
   private _drawAnimationFrame?: number;
   /**
    * The container duration
    */
   private _duration;
-  private readonly _engine;
   private readonly _eventListeners;
   private _firstStart;
   private _initialSourceOptions;
@@ -149,19 +150,23 @@ export class Container {
    * The container lifetime
    */
   private _lifeTime;
+  private readonly _onDestroy;
   private _options;
   private _paused;
+  private readonly _pluginManager;
   private _smooth;
   private _sourceOptions;
 
   /**
    * This is the core class, create an instance to have a new working particles manager
-   * @param engine - the engine used by container
-   * @param id - the id to identify this instance
-   * @param sourceOptions - the options to load
+   * @param params -
    */
-  constructor(engine: Engine, id: string, sourceOptions?: ISourceOptions) {
-    this._engine = engine;
+  constructor(params: ContainerParams) {
+    const { dispatchCallback, pluginManager, id, onDestroy, sourceOptions } = params;
+
+    this._pluginManager = pluginManager;
+    this._dispatchCallback = dispatchCallback;
+    this._onDestroy = onDestroy;
     this.id = Symbol(id);
     this.fpsLimit = 120;
     this.hdr = false;
@@ -182,15 +187,15 @@ export class Container {
     this.shapeDrawers = new Map();
     this.particleUpdaters = [];
     this.retina = new Retina(this);
-    this.canvas = new CanvasManager(this._engine.pluginManager, this);
-    this.particles = new ParticlesManager(this._engine.pluginManager, this);
+    this.canvas = new CanvasManager(this._pluginManager, this);
+    this.particles = new ParticlesManager(this._pluginManager, this);
     this.plugins = [];
     this.particleDestroyedPlugins = [];
     this.particleCreatedPlugins = [];
     this.particlePositionPlugins = [];
     /* tsParticles variables with default values */
-    this._options = loadContainerOptions(this._engine.pluginManager, this);
-    this.actualOptions = loadContainerOptions(this._engine.pluginManager, this);
+    this._options = loadContainerOptions(this._pluginManager, this);
+    this.actualOptions = loadContainerOptions(this._pluginManager, this);
 
     /* ---------- tsParticles - start ------------ */
     this._eventListeners = new EventListeners(this);
@@ -260,24 +265,17 @@ export class Container {
     this.particleUpdaters = [];
     this.plugins.length = 0;
 
-    this._engine.pluginManager.clearPlugins(this);
+    this._pluginManager.clearPlugins(this);
 
     this.destroyed = true;
 
-    if (remove) {
-      const mainArr = this._engine.items,
-        idx = mainArr.indexOf(this);
-
-      if (idx >= removeMinIndex) {
-        mainArr.splice(idx, removeDeleteCount);
-      }
-    }
+    this._onDestroy(remove);
 
     this.dispatchEvent(EventType.containerDestroyed);
   }
 
   dispatchEvent(type: string, data?: unknown): void {
-    this._engine.dispatchEvent(type, {
+    this._dispatchCallback(type, {
       container: this,
       data,
     });
@@ -335,7 +333,7 @@ export class Container {
 
     const allContainerPlugins = new Map<IPlugin, IContainerPlugin>();
 
-    for (const plugin of this._engine.pluginManager.plugins) {
+    for (const plugin of this._pluginManager.plugins) {
       const containerPlugin = await plugin.getPlugin(this);
 
       if (containerPlugin.preInit) {
@@ -348,13 +346,8 @@ export class Container {
     await this.initDrawersAndUpdaters();
 
     /* options settings */
-    this._options = loadContainerOptions(
-      this._engine.pluginManager,
-      this,
-      this._initialSourceOptions,
-      this.sourceOptions,
-    );
-    this.actualOptions = loadContainerOptions(this._engine.pluginManager, this, this._options);
+    this._options = loadContainerOptions(this._pluginManager, this, this._initialSourceOptions, this.sourceOptions);
+    this.actualOptions = loadContainerOptions(this._pluginManager, this, this._options);
 
     this.plugins.length = 0;
     this.particleDestroyedPlugins.length = 0;
@@ -416,7 +409,7 @@ export class Container {
   }
 
   async initDrawersAndUpdaters(): Promise<void> {
-    const pluginManager = this._engine.pluginManager;
+    const pluginManager = this._pluginManager;
 
     this.effectDrawers = await pluginManager.getEffectDrawers(this, true);
     this.shapeDrawers = await pluginManager.getShapeDrawers(this, true);
@@ -508,13 +501,8 @@ export class Container {
 
     this._initialSourceOptions = sourceOptions;
     this._sourceOptions = sourceOptions;
-    this._options = loadContainerOptions(
-      this._engine.pluginManager,
-      this,
-      this._initialSourceOptions,
-      this.sourceOptions,
-    );
-    this.actualOptions = loadContainerOptions(this._engine.pluginManager, this, this._options);
+    this._options = loadContainerOptions(this._pluginManager, this, this._initialSourceOptions, this.sourceOptions);
+    this.actualOptions = loadContainerOptions(this._pluginManager, this, this._options);
 
     return this.refresh();
   }

engine/src/Core/Engine.ts

@@ -13,6 +13,7 @@ import {
   none,
   one,
   removeDeleteCount,
+  removeMinIndex,
 } from "./Utils/Constants.js";
 import { itemFromSingleOrMultiple, safeDocument } from "../Utils/Utils.js";
 import type { Container } from "./Container.js";
@@ -56,7 +57,7 @@ async function getDataFromUrl(
   const response = await fetch(url);
 
   if (response.ok) {
-    return (await response.json()) as SingleOrMultiple<ISourceOptions>;
+    return (await response.json()) as SingleOrMultiple<Readonly<ISourceOptions>>;
   }
 
   getLogger().error(`${response.status.toString()} while retrieving config file`);
@@ -107,7 +108,7 @@ const getCanvasFromContainer = (domContainer: HTMLElement): HTMLCanvasElement =>
       return domContainer;
     }
 
-    domContainer = documentSafe.createElement("div");
+    domContainer = documentSafe.createElement("canvas");
 
     domContainer.id = id;
     domContainer.dataset[generatedAttribute] = generatedTrue;
@@ -222,7 +223,26 @@ export class Engine {
       currentOptions = itemFromSingleOrMultiple(options, index),
       { items } = this,
       oldIndex = items.findIndex(v => v.id.description === id),
-      newItem = new Container(this, id, currentOptions);
+      newItem = new Container({
+        dispatchCallback: (eventType, args): void => {
+          this.dispatchEvent(eventType, args);
+        },
+        id,
+        onDestroy: (remove): void => {
+          if (!remove) {
+            return;
+          }
+
+          const mainArr = this.items,
+            idx = mainArr.indexOf(newItem);
+
+          if (idx >= removeMinIndex) {
+            mainArr.splice(idx, removeDeleteCount);
+          }
+        },
+        pluginManager: this.pluginManager,
+        sourceOptions: currentOptions,
+      });
 
     if (oldIndex >= loadMinIndex) {
       const old = this.item(oldIndex),

engine/src/Core/Interfaces/IContainerPlugin.ts

@@ -1,3 +1,4 @@
+import type { CanvasContextType } from "../../Types/CanvasContextType.js";
 import type { ExportResult } from "../../Types/ExportResult.js";
 import type { ICoordinates } from "./ICoordinates.js";
 import type { IDelta } from "./IDelta.js";
@@ -12,16 +13,16 @@ export interface IContainerPlugin {
   canvasClear?: () => boolean;
   canvasPaint?: () => boolean;
   checkParticlePosition?: (particle: Particle, position: ICoordinates, tryCount: number) => boolean;
-  clearDraw?: (context: CanvasRenderingContext2D, delta: IDelta) => void;
+  clearDraw?: (context: CanvasContextType, delta: IDelta) => void;
   clickPositionValid?: (position: ICoordinates) => boolean;
   destroy?: () => void;
-  draw?: (context: CanvasRenderingContext2D, delta: IDelta) => void;
-  drawParticle?: (context: CanvasRenderingContext2D, particle: Particle, delta: IDelta) => void;
-  drawParticleCleanup?: (context: CanvasRenderingContext2D, particle: Particle, delta: IDelta) => void;
-  drawParticleSetup?: (context: CanvasRenderingContext2D, particle: Particle, delta: IDelta) => void;
+  draw?: (context: CanvasContextType, delta: IDelta) => void;
+  drawParticle?: (context: CanvasContextType, particle: Particle, delta: IDelta) => void;
+  drawParticleCleanup?: (context: CanvasContextType, particle: Particle, delta: IDelta) => void;
+  drawParticleSetup?: (context: CanvasContextType, particle: Particle, delta: IDelta) => void;
   drawParticleTransform?: (data: IShapeDrawData) => void;
-  drawSettingsCleanup?: (context: CanvasRenderingContext2D, delta: IDelta) => void;
-  drawSettingsSetup?: (context: CanvasRenderingContext2D, delta: IDelta) => void;
+  drawSettingsCleanup?: (context: CanvasContextType, delta: IDelta) => void;
+  drawSettingsSetup?: (context: CanvasContextType, delta: IDelta) => void;
   export?: (type: string, data: Record<string, unknown>) => Promise<ExportResult>;
   init?: () => Promise<void>;
   particleBounce?: (particle: Particle, delta: IDelta, direction: OutModeDirection) => boolean;

engine/src/Core/Interfaces/IDrawParticleParams.ts

@@ -1,3 +1,4 @@
+import type { CanvasContextType } from "../../Types/CanvasContextType.js";
 import type { Container } from "../Container.js";
 import type { IDelta } from "./IDelta.js";
 import type { IParticleColorStyle } from "./IParticleColorStyle.js";
@@ -16,7 +17,7 @@ export interface IDrawParticleParams {
   /**
    * The canvas context to draw on
    */
-  context: CanvasRenderingContext2D;
+  context: CanvasContextType;
   /**
    * This variable contains the delta between the current frame and the previous frame
    */

engine/src/Core/Interfaces/IParticleUpdater.ts

@@ -1,3 +1,4 @@
+import type { CanvasContextType } from "../../Types/CanvasContextType.js";
 import type { IDelta } from "./IDelta.js";
 import type { IParticleColorStyle } from "./IParticleColorStyle.js";
 import type { IParticleTransformValues } from "./IParticleTransformValues.js";
@@ -13,7 +14,7 @@ export interface IParticleUpdater {
 
   getColorStyles?: (
     particle: Particle,
-    context: CanvasRenderingContext2D,
+    context: CanvasContextType,
     radius: number,
     opacity: number,
   ) => IParticleColorStyle;

engine/src/Core/Interfaces/IShapeDrawData.ts

@@ -1,3 +1,4 @@
+import type { CanvasContextType } from "../../Types/CanvasContextType.js";
 import type { ICoordinates } from "./ICoordinates.js";
 import type { IDelta } from "./IDelta.js";
 import type { Particle } from "../Particle.js";
@@ -6,7 +7,7 @@ export interface IShapeDrawData<TParticle extends Particle = Particle> {
   /**
    * the canvas context for drawing
    */
-  context: CanvasRenderingContext2D;
+  context: CanvasContextType;
 
   /**
    * this variable contains the delta between the current frame and the previous frame

engine/src/Core/RenderManager.ts

@@ -1,6 +1,7 @@
 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";
+import type { CanvasContextType } from "../Types/CanvasContextType.js";
 import type { CanvasManager } from "./CanvasManager.js";
 import type { Container } from "./Container.js";
 import type { IContainerPlugin } from "./Interfaces/IContainerPlugin.js";
@@ -45,7 +46,7 @@ export class RenderManager {
   /**
    * The particles canvas context
    */
-  private _context: CanvasRenderingContext2D | null;
+  private _context: CanvasContextType | null;
   private _contextSettings?: CanvasRenderingContext2DSettings;
   private _drawParticlePlugins: IContainerPlugin[];
   private _drawParticlesCleanupPlugins: IContainerPlugin[];
@@ -145,7 +146,7 @@ export class RenderManager {
    * @param cb -
    * @returns the result of the callback
    */
-  draw<T>(cb: (context: CanvasRenderingContext2D) => T): T | undefined {
+  draw<T>(cb: (context: CanvasContextType) => T): T | undefined {
     const ctx = this._context;
 
     if (!ctx) {
@@ -383,7 +384,7 @@ export class RenderManager {
     });
   }
 
-  setContext(context: CanvasRenderingContext2D | null): void {
+  setContext(context: CanvasContextType | null): void {
     this._context = context;
 
     if (this._context) {
@@ -408,7 +409,7 @@ export class RenderManager {
   };
 
   private readonly _applyPreDrawUpdaters: (
-    ctx: CanvasRenderingContext2D,
+    ctx: CanvasContextType,
     particle: Particle,
     radius: number,
     zOpacity: number,

engine/src/Types/CanvasContextType.ts

@@ -0,0 +1 @@
+export type CanvasContextType = CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D;

engine/src/Utils/CanvasUtils.ts

@@ -1,9 +1,12 @@
-import type { IEffectDrawer, IShapeDrawData, IShapeDrawer } from "../export-types.js";
 import { defaultZoom, minStrokeWidth, originPoint } from "../Core/Utils/Constants.js";
+import type { CanvasContextType } from "../Types/CanvasContextType.js";
 import type { IContainerPlugin } from "../Core/Interfaces/IContainerPlugin.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 { 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";
 
 /**
@@ -12,7 +15,7 @@ import type { Particle } from "../Core/Particle.js";
  * @param dimension - The dimension of the rectangle.
  * @param baseColor - The base color of the rectangle, if not specified a transparent color will be used.
  */
-export function paintBase(context: CanvasRenderingContext2D, dimension: IDimension, baseColor?: string): void {
+export function paintBase(context: CanvasContextType, dimension: IDimension, baseColor?: string): void {
   context.fillStyle = baseColor ?? "rgba(0,0,0,0)";
 
   context.fillRect(originPoint.x, originPoint.y, dimension.width, dimension.height);
@@ -26,7 +29,7 @@ export function paintBase(context: CanvasRenderingContext2D, dimension: IDimensi
  * @param opacity - The opacity of the image.
  */
 export function paintImage(
-  context: CanvasRenderingContext2D,
+  context: CanvasContextType,
   dimension: IDimension,
   image: HTMLImageElement | undefined,
   opacity: number,
@@ -49,7 +52,7 @@ export function paintImage(
  * @param context - The canvas context to clear.
  * @param dimension - The dimension of the canvas.
  */
-export function clear(context: CanvasRenderingContext2D, dimension: IDimension): void {
+export function clear(context: CanvasContextType, dimension: IDimension): void {
   context.clearRect(originPoint.x, originPoint.y, dimension.width, dimension.height);
 }
 
@@ -232,7 +235,7 @@ export function drawShapeBeforeDraw(drawer: IShapeDrawer | undefined, data: ISha
  * @param delta - this variable contains the delta between the current frame and the previous frame
  */
 export function drawParticlePlugin(
-  context: CanvasRenderingContext2D,
+  context: CanvasContextType,
   plugin: IContainerPlugin,
   particle: Particle,
   delta: IDelta,