@tsparticles/engine 3.3.0 → 3.5.0

package/browser/Core/Utils/ParticlesInteractorBase.js

@@ -1,6 +1,7 @@
+import { InteractorType } from "../../Enums/Types/InteractorType.js";
 export class ParticlesInteractorBase {
     constructor(container) {
-        this.type = "particles";
+        this.type = InteractorType.particles;
         this.container = container;
     }
 }

package/browser/Core/Utils/QuadTree.js

@@ -28,7 +28,7 @@ export class QuadTree {
         if (!this._divided) {
             this._subdivide();
         }
-        return this._subs.some((sub) => sub.insert(point));
+        return this._subs.some(sub => sub.insert(point));
     }
     query(range, check) {
         const res = [];

package/browser/Core/Utils/Ranges.js

@@ -1,3 +1,4 @@
+import { RangeType } from "../../Types/RangeType.js";
 import { getDistance } from "../../Utils/NumberUtils.js";
 const squareExp = 2;
 export class BaseRange {
@@ -11,7 +12,7 @@ export class BaseRange {
 }
 export class Circle extends BaseRange {
     constructor(x, y, radius) {
-        super(x, y, "circle");
+        super(x, y, RangeType.circle);
         this.radius = radius;
     }
     contains(point) {
@@ -19,11 +20,11 @@ export class Circle extends BaseRange {
     }
     intersects(range) {
         const pos1 = this.position, pos2 = range.position, distPos = { x: Math.abs(pos2.x - pos1.x), y: Math.abs(pos2.y - pos1.y) }, r = this.radius;
-        if (range instanceof Circle || range.type === "circle") {
+        if (range instanceof Circle || range.type === RangeType.circle) {
             const circleRange = range, rSum = r + circleRange.radius, dist = Math.sqrt(distPos.x ** squareExp + distPos.y ** squareExp);
             return rSum > dist;
         }
-        else if (range instanceof Rectangle || range.type === "rectangle") {
+        else if (range instanceof Rectangle || range.type === RangeType.rectangle) {
             const rectRange = range, { width, height } = rectRange.size, edges = Math.pow(distPos.x - width, squareExp) + Math.pow(distPos.y - height, squareExp);
             return (edges <= r ** squareExp ||
                 (distPos.x <= r + width && distPos.y <= r + height) ||
@@ -35,7 +36,7 @@ export class Circle extends BaseRange {
 }
 export class Rectangle extends BaseRange {
     constructor(x, y, width, height) {
-        super(x, y, "rectangle");
+        super(x, y, RangeType.rectangle);
         this.size = {
             height: height,
             width: width,

package/browser/Enums/AnimationStatus.js

@@ -1 +1,5 @@
-export {};
+export var AnimationStatus;
+(function (AnimationStatus) {
+    AnimationStatus["increasing"] = "increasing";
+    AnimationStatus["decreasing"] = "decreasing";
+})(AnimationStatus || (AnimationStatus = {}));

package/browser/Enums/Directions/MoveDirection.js

@@ -1 +1,14 @@
-export {};
+export var MoveDirection;
+(function (MoveDirection) {
+    MoveDirection["bottom"] = "bottom";
+    MoveDirection["bottomLeft"] = "bottom-left";
+    MoveDirection["bottomRight"] = "bottom-right";
+    MoveDirection["left"] = "left";
+    MoveDirection["none"] = "none";
+    MoveDirection["right"] = "right";
+    MoveDirection["top"] = "top";
+    MoveDirection["topLeft"] = "top-left";
+    MoveDirection["topRight"] = "top-right";
+    MoveDirection["outside"] = "outside";
+    MoveDirection["inside"] = "inside";
+})(MoveDirection || (MoveDirection = {}));

package/browser/Enums/Directions/OutModeDirection.js

@@ -1 +1,7 @@
-export {};
+export var OutModeDirection;
+(function (OutModeDirection) {
+    OutModeDirection["bottom"] = "bottom";
+    OutModeDirection["left"] = "left";
+    OutModeDirection["right"] = "right";
+    OutModeDirection["top"] = "top";
+})(OutModeDirection || (OutModeDirection = {}));

package/browser/Enums/Directions/RotateDirection.js

@@ -1 +1,6 @@
-export {};
+export var RotateDirection;
+(function (RotateDirection) {
+    RotateDirection["clockwise"] = "clockwise";
+    RotateDirection["counterClockwise"] = "counter-clockwise";
+    RotateDirection["random"] = "random";
+})(RotateDirection || (RotateDirection = {}));

package/browser/Enums/InteractivityDetect.js

@@ -1 +1,6 @@
-export {};
+export var InteractivityDetect;
+(function (InteractivityDetect) {
+    InteractivityDetect["canvas"] = "canvas";
+    InteractivityDetect["parent"] = "parent";
+    InteractivityDetect["window"] = "window";
+})(InteractivityDetect || (InteractivityDetect = {}));

package/browser/Enums/Modes/AnimationMode.js

@@ -1 +1,7 @@
-export {};
+export var AnimationMode;
+(function (AnimationMode) {
+    AnimationMode["auto"] = "auto";
+    AnimationMode["increase"] = "increase";
+    AnimationMode["decrease"] = "decrease";
+    AnimationMode["random"] = "random";
+})(AnimationMode || (AnimationMode = {}));

package/browser/Enums/Modes/CollisionMode.js

@@ -1 +1,6 @@
-export {};
+export var CollisionMode;
+(function (CollisionMode) {
+    CollisionMode["absorb"] = "absorb";
+    CollisionMode["bounce"] = "bounce";
+    CollisionMode["destroy"] = "destroy";
+})(CollisionMode || (CollisionMode = {}));

package/browser/Enums/Modes/LimitMode.js

@@ -1 +1,5 @@
-export {};
+export var LimitMode;
+(function (LimitMode) {
+    LimitMode["delete"] = "delete";
+    LimitMode["wait"] = "wait";
+})(LimitMode || (LimitMode = {}));

package/browser/Enums/Modes/OutMode.js

@@ -1 +1,8 @@
-export {};
+export var OutMode;
+(function (OutMode) {
+    OutMode["bounce"] = "bounce";
+    OutMode["none"] = "none";
+    OutMode["out"] = "out";
+    OutMode["destroy"] = "destroy";
+    OutMode["split"] = "split";
+})(OutMode || (OutMode = {}));

package/browser/Enums/Modes/PixelMode.js

@@ -1 +1,5 @@
-export {};
+export var PixelMode;
+(function (PixelMode) {
+    PixelMode["precise"] = "precise";
+    PixelMode["percent"] = "percent";
+})(PixelMode || (PixelMode = {}));

package/browser/Enums/Modes/ResponsiveMode.js

@@ -1 +1,5 @@
-export {};
+export var ResponsiveMode;
+(function (ResponsiveMode) {
+    ResponsiveMode["screen"] = "screen";
+    ResponsiveMode["canvas"] = "canvas";
+})(ResponsiveMode || (ResponsiveMode = {}));

package/browser/Enums/Modes/ThemeMode.js

@@ -1 +1,6 @@
-export {};
+export var ThemeMode;
+(function (ThemeMode) {
+    ThemeMode["any"] = "any";
+    ThemeMode["dark"] = "dark";
+    ThemeMode["light"] = "light";
+})(ThemeMode || (ThemeMode = {}));

package/browser/Enums/Types/AlterType.js

@@ -1 +1,5 @@
-export {};
+export var AlterType;
+(function (AlterType) {
+    AlterType["darken"] = "darken";
+    AlterType["enlighten"] = "enlighten";
+})(AlterType || (AlterType = {}));

package/browser/Enums/Types/DestroyType.js

@@ -1 +1,6 @@
-export {};
+export var DestroyType;
+(function (DestroyType) {
+    DestroyType["none"] = "none";
+    DestroyType["max"] = "max";
+    DestroyType["min"] = "min";
+})(DestroyType || (DestroyType = {}));

package/browser/Enums/Types/DivType.js

@@ -1 +1,5 @@
-export {};
+export var DivType;
+(function (DivType) {
+    DivType["circle"] = "circle";
+    DivType["rectangle"] = "rectangle";
+})(DivType || (DivType = {}));

package/browser/Enums/Types/EasingType.js

@@ -1 +1,30 @@
-export {};
+export var EasingType;
+(function (EasingType) {
+    EasingType["easeInBack"] = "ease-in-back";
+    EasingType["easeInCirc"] = "ease-in-circ";
+    EasingType["easeInCubic"] = "ease-in-cubic";
+    EasingType["easeInLinear"] = "ease-in-linear";
+    EasingType["easeInQuad"] = "ease-in-quad";
+    EasingType["easeInQuart"] = "ease-in-quart";
+    EasingType["easeInQuint"] = "ease-in-quint";
+    EasingType["easeInExpo"] = "ease-in-expo";
+    EasingType["easeInSine"] = "ease-in-sine";
+    EasingType["easeOutBack"] = "ease-out-back";
+    EasingType["easeOutCirc"] = "ease-out-circ";
+    EasingType["easeOutCubic"] = "ease-out-cubic";
+    EasingType["easeOutLinear"] = "ease-out-linear";
+    EasingType["easeOutQuad"] = "ease-out-quad";
+    EasingType["easeOutQuart"] = "ease-out-quart";
+    EasingType["easeOutQuint"] = "ease-out-quint";
+    EasingType["easeOutExpo"] = "ease-out-expo";
+    EasingType["easeOutSine"] = "ease-out-sine";
+    EasingType["easeInOutBack"] = "ease-in-out-back";
+    EasingType["easeInOutCirc"] = "ease-in-out-circ";
+    EasingType["easeInOutCubic"] = "ease-in-out-cubic";
+    EasingType["easeInOutLinear"] = "ease-in-out-linear";
+    EasingType["easeInOutQuad"] = "ease-in-out-quad";
+    EasingType["easeInOutQuart"] = "ease-in-out-quart";
+    EasingType["easeInOutQuint"] = "ease-in-out-quint";
+    EasingType["easeInOutExpo"] = "ease-in-out-expo";
+    EasingType["easeInOutSine"] = "ease-in-out-sine";
+})(EasingType || (EasingType = {}));

package/browser/Enums/Types/EventType.js

@@ -1 +1,15 @@
-export {};
+export var EventType;
+(function (EventType) {
+    EventType["configAdded"] = "configAdded";
+    EventType["containerInit"] = "containerInit";
+    EventType["particlesSetup"] = "particlesSetup";
+    EventType["containerStarted"] = "containerStarted";
+    EventType["containerStopped"] = "containerStopped";
+    EventType["containerDestroyed"] = "containerDestroyed";
+    EventType["containerPaused"] = "containerPaused";
+    EventType["containerPlay"] = "containerPlay";
+    EventType["containerBuilt"] = "containerBuilt";
+    EventType["particleAdded"] = "particleAdded";
+    EventType["particleDestroyed"] = "particleDestroyed";
+    EventType["particleRemoved"] = "particleRemoved";
+})(EventType || (EventType = {}));

package/browser/Enums/Types/GradientType.js

@@ -1 +1,6 @@
-export {};
+export var GradientType;
+(function (GradientType) {
+    GradientType["linear"] = "linear";
+    GradientType["radial"] = "radial";
+    GradientType["random"] = "random";
+})(GradientType || (GradientType = {}));

package/browser/Enums/Types/InteractorType.js

@@ -1 +1,5 @@
-export {};
+export var InteractorType;
+(function (InteractorType) {
+    InteractorType["external"] = "external";
+    InteractorType["particles"] = "particles";
+})(InteractorType || (InteractorType = {}));

package/browser/Enums/Types/ParticleOutType.js

@@ -1 +1,6 @@
-export {};
+export var ParticleOutType;
+(function (ParticleOutType) {
+    ParticleOutType["normal"] = "normal";
+    ParticleOutType["inside"] = "inside";
+    ParticleOutType["outside"] = "outside";
+})(ParticleOutType || (ParticleOutType = {}));

package/browser/Enums/Types/StartValueType.js

@@ -1 +1,6 @@
-export {};
+export var StartValueType;
+(function (StartValueType) {
+    StartValueType["max"] = "max";
+    StartValueType["min"] = "min";
+    StartValueType["random"] = "random";
+})(StartValueType || (StartValueType = {}));

package/browser/Options/Classes/AnimationOptions.js

@@ -1,3 +1,5 @@
+import { AnimationMode } from "../../Enums/Modes/AnimationMode.js";
+import { StartValueType } from "../../Enums/Types/StartValueType.js";
 import { setRangeValue } from "../../Utils/NumberUtils.js";
 export class AnimationOptions {
     constructor() {
@@ -35,8 +37,8 @@ export class AnimationOptions {
 export class RangedAnimationOptions extends AnimationOptions {
     constructor() {
         super();
-        this.mode = "auto";
-        this.startValue = "random";
+        this.mode = AnimationMode.auto;
+        this.startValue = StartValueType.random;
     }
     load(data) {
         super.load(data);

package/browser/Options/Classes/Interactivity/Events/DivEvent.js

@@ -1,9 +1,10 @@
+import { DivType } from "../../../../Enums/Types/DivType.js";
 export class DivEvent {
     constructor() {
         this.selectors = [];
         this.enable = false;
         this.mode = [];
-        this.type = "circle";
+        this.type = DivType.circle;
     }
     load(data) {
         if (!data) {

package/browser/Options/Classes/Interactivity/Events/Events.js

@@ -17,7 +17,7 @@ export class Events {
         this.onClick.load(data.onClick);
         const onDiv = data.onDiv;
         if (onDiv !== undefined) {
-            this.onDiv = executeOnSingleOrMultiple(onDiv, (t) => {
+            this.onDiv = executeOnSingleOrMultiple(onDiv, t => {
                 const tmp = new DivEvent();
                 tmp.load(t);
                 return tmp;

package/browser/Options/Classes/Interactivity/Interactivity.js

@@ -1,8 +1,9 @@
 import { Events } from "./Events/Events.js";
+import { InteractivityDetect } from "../../../Enums/InteractivityDetect.js";
 import { Modes } from "./Modes/Modes.js";
 export class Interactivity {
     constructor(engine, container) {
-        this.detectsOn = "window";
+        this.detectsOn = InteractivityDetect.window;
         this.events = new Events();
         this.modes = new Modes(engine, container);
     }

package/browser/Options/Classes/ManualParticle.js

@@ -1,3 +1,4 @@
+import { PixelMode } from "../../Enums/Modes/PixelMode.js";
 import { deepExtend } from "../../Utils/Utils.js";
 const defaultPosition = 50;
 export class ManualParticle {
@@ -9,7 +10,7 @@ export class ManualParticle {
             this.position = {
                 x: data.position.x ?? defaultPosition,
                 y: data.position.y ?? defaultPosition,
-                mode: data.position.mode ?? "percent",
+                mode: data.position.mode ?? PixelMode.percent,
             };
         }
         if (data.options) {

package/browser/Options/Classes/Options.js

@@ -5,17 +5,19 @@ import { FullScreen } from "./FullScreen/FullScreen.js";
 import { Interactivity } from "./Interactivity/Interactivity.js";
 import { ManualParticle } from "./ManualParticle.js";
 import { Responsive } from "./Responsive.js";
+import { ResponsiveMode } from "../../Enums/Modes/ResponsiveMode.js";
 import { Theme } from "./Theme/Theme.js";
+import { ThemeMode } from "../../Enums/Modes/ThemeMode.js";
 import { isBoolean } from "../../Utils/TypeUtils.js";
 import { loadParticlesOptions } from "../../Utils/OptionsUtils.js";
 import { setRangeValue } from "../../Utils/NumberUtils.js";
 export class Options {
     constructor(engine, container) {
-        this._findDefaultTheme = (mode) => {
-            return (this.themes.find((theme) => theme.default.value && theme.default.mode === mode) ??
-                this.themes.find((theme) => theme.default.value && theme.default.mode === "any"));
+        this._findDefaultTheme = mode => {
+            return (this.themes.find(theme => theme.default.value && theme.default.mode === mode) ??
+                this.themes.find(theme => theme.default.value && theme.default.mode === ThemeMode.any));
         };
-        this._importPreset = (preset) => {
+        this._importPreset = preset => {
             this.load(this._engine.getPreset(preset));
         };
         this._engine = engine;
@@ -46,7 +48,7 @@ export class Options {
             return;
         }
         if (data.preset !== undefined) {
-            executeOnSingleOrMultiple(data.preset, (preset) => this._importPreset(preset));
+            executeOnSingleOrMultiple(data.preset, preset => this._importPreset(preset));
         }
         if (data.autoPlay !== undefined) {
             this.autoPlay = data.autoPlay;
@@ -94,7 +96,7 @@ export class Options {
         this.backgroundMask.load(data.backgroundMask);
         this.interactivity.load(data.interactivity);
         if (data.manualParticles) {
-            this.manualParticles = data.manualParticles.map((t) => {
+            this.manualParticles = data.manualParticles.map(t => {
                 const tmp = new ManualParticle();
                 tmp.load(t);
                 return tmp;
@@ -124,7 +126,7 @@ export class Options {
         this.responsive.sort((a, b) => a.maxWidth - b.maxWidth);
         if (data.themes !== undefined) {
             for (const theme of data.themes) {
-                const existingTheme = this.themes.find((t) => t.name === theme.name);
+                const existingTheme = this.themes.find(t => t.name === theme.name);
                 if (!existingTheme) {
                     const optTheme = new Theme();
                     optTheme.load(theme);
@@ -135,24 +137,24 @@ export class Options {
                 }
             }
         }
-        this.defaultThemes.dark = this._findDefaultTheme("dark")?.name;
-        this.defaultThemes.light = this._findDefaultTheme("light")?.name;
+        this.defaultThemes.dark = this._findDefaultTheme(ThemeMode.dark)?.name;
+        this.defaultThemes.light = this._findDefaultTheme(ThemeMode.light)?.name;
     }
     setResponsive(width, pxRatio, defaultOptions) {
         this.load(defaultOptions);
-        const responsiveOptions = this.responsive.find((t) => t.mode === "screen" && screen ? t.maxWidth > screen.availWidth : t.maxWidth * pxRatio > width);
+        const responsiveOptions = this.responsive.find(t => t.mode === ResponsiveMode.screen && screen ? t.maxWidth > screen.availWidth : t.maxWidth * pxRatio > width);
         this.load(responsiveOptions?.options);
         return responsiveOptions?.maxWidth;
     }
     setTheme(name) {
         if (name) {
-            const chosenTheme = this.themes.find((theme) => theme.name === name);
+            const chosenTheme = this.themes.find(theme => theme.name === name);
             if (chosenTheme) {
                 this.load(chosenTheme.options);
             }
         }
         else {
-            const mediaMatch = safeMatchMedia("(prefers-color-scheme: dark)"), clientDarkMode = mediaMatch && mediaMatch.matches, defaultTheme = this._findDefaultTheme(clientDarkMode ? "dark" : "light");
+            const mediaMatch = safeMatchMedia("(prefers-color-scheme: dark)"), clientDarkMode = mediaMatch?.matches, defaultTheme = this._findDefaultTheme(clientDarkMode ? ThemeMode.dark : ThemeMode.light);
             if (defaultTheme) {
                 this.load(defaultTheme.options);
             }

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

@@ -1,3 +1,4 @@
+import { CollisionMode } from "../../../../Enums/Modes/CollisionMode.js";
 import { CollisionsAbsorb } from "./CollisionsAbsorb.js";
 import { CollisionsOverlap } from "./CollisionsOverlap.js";
 import { ParticlesBounce } from "../Bounce/ParticlesBounce.js";
@@ -8,7 +9,7 @@ export class Collisions {
         this.bounce = new ParticlesBounce();
         this.enable = false;
         this.maxSpeed = 50;
-        this.mode = "bounce";
+        this.mode = CollisionMode.bounce;
         this.overlap = new CollisionsOverlap();
     }
     load(data) {

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

@@ -1,3 +1,4 @@
+import { MoveDirection } from "../../../../Enums/Directions/MoveDirection.js";
 import { isNumber, isObject } from "../../../../Utils/TypeUtils.js";
 import { MoveAngle } from "./MoveAngle.js";
 import { MoveAttract } from "./MoveAttract.js";
@@ -15,7 +16,7 @@ export class Move {
         this.center = new MoveCenter();
         this.decay = 0;
         this.distance = {};
-        this.direction = "none";
+        this.direction = MoveDirection.none;
         this.drift = 0;
         this.enable = false;
         this.gravity = new MoveGravity();

package/browser/Options/Classes/Particles/Move/MoveCenter.js

@@ -1,8 +1,9 @@
+import { PixelMode } from "../../../../Enums/Modes/PixelMode.js";
 export class MoveCenter {
     constructor() {
         this.x = 50;
         this.y = 50;
-        this.mode = "percent";
+        this.mode = PixelMode.percent;
         this.radius = 0;
     }
     load(data) {

package/browser/Options/Classes/Particles/Move/OutModes.js

@@ -1,6 +1,7 @@
+import { OutMode } from "../../../../Enums/Modes/OutMode.js";
 export class OutModes {
     constructor() {
-        this.default = "out";
+        this.default = OutMode.out;
     }
     load(data) {
         if (!data) {

package/browser/Options/Classes/Particles/Number/ParticlesNumberLimit.js

@@ -1,6 +1,7 @@
+import { LimitMode } from "../../../../Enums/Modes/LimitMode.js";
 export class ParticlesNumberLimit {
     constructor() {
-        this.mode = "delete";
+        this.mode = LimitMode.delete;
         this.value = 0;
     }
     load(data) {

package/browser/Options/Classes/Particles/Opacity/OpacityAnimation.js

@@ -1,8 +1,9 @@
+import { DestroyType } from "../../../../Enums/Types/DestroyType.js";
 import { RangedAnimationOptions } from "../../AnimationOptions.js";
 export class OpacityAnimation extends RangedAnimationOptions {
     constructor() {
         super();
-        this.destroy = "none";
+        this.destroy = DestroyType.none;
         this.speed = 2;
     }
     load(data) {

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

@@ -65,7 +65,7 @@ export class ParticlesOptions {
         }
         const strokeToLoad = data.stroke;
         if (strokeToLoad) {
-            this.stroke = executeOnSingleOrMultiple(strokeToLoad, (t) => {
+            this.stroke = executeOnSingleOrMultiple(strokeToLoad, t => {
                 const tmp = new Stroke();
                 tmp.load(t);
                 return tmp;

package/browser/Options/Classes/Particles/Size/SizeAnimation.js

@@ -1,8 +1,9 @@
+import { DestroyType } from "../../../../Enums/Types/DestroyType.js";
 import { RangedAnimationOptions } from "../../AnimationOptions.js";
 export class SizeAnimation extends RangedAnimationOptions {
     constructor() {
         super();
-        this.destroy = "none";
+        this.destroy = DestroyType.none;
         this.speed = 5;
     }
     load(data) {

package/browser/Options/Classes/Responsive.js

@@ -1,9 +1,10 @@
+import { ResponsiveMode } from "../../Enums/Modes/ResponsiveMode.js";
 import { deepExtend } from "../../Utils/Utils.js";
 export class Responsive {
     constructor() {
         this.maxWidth = Infinity;
         this.options = {};
-        this.mode = "canvas";
+        this.mode = ResponsiveMode.canvas;
     }
     load(data) {
         if (!data) {
@@ -13,11 +14,11 @@ export class Responsive {
             this.maxWidth = data.maxWidth;
         }
         if (data.mode !== undefined) {
-            if (data.mode === "screen") {
-                this.mode = "screen";
+            if (data.mode === ResponsiveMode.screen) {
+                this.mode = ResponsiveMode.screen;
             }
             else {
-                this.mode = "canvas";
+                this.mode = ResponsiveMode.canvas;
             }
         }
         if (data.options !== undefined) {

package/browser/Options/Classes/Theme/ThemeDefault.js

@@ -1,7 +1,8 @@
+import { ThemeMode } from "../../../Enums/Modes/ThemeMode.js";
 export class ThemeDefault {
     constructor() {
         this.auto = false;
-        this.mode = "any";
+        this.mode = ThemeMode.any;
         this.value = false;
     }
     load(data) {

package/browser/Types/RangeType.js

@@ -1 +1,5 @@
-export {};
+export var RangeType;
+(function (RangeType) {
+    RangeType["circle"] = "circle";
+    RangeType["rectangle"] = "rectangle";
+})(RangeType || (RangeType = {}));

package/browser/Utils/CanvasUtils.js

@@ -1,5 +1,11 @@
+import { AlterType } from "../Enums/Types/AlterType.js";
 import { getStyleFromRgb } from "./ColorUtils.js";
-const origin = { x: 0, y: 0 };
+const origin = { x: 0, y: 0 }, defaultTransform = {
+    a: 1,
+    b: 0,
+    c: 0,
+    d: 1,
+};
 export function drawLine(context, begin, end) {
     context.beginPath();
     context.moveTo(begin.x, begin.y);
@@ -25,11 +31,11 @@ export function drawParticle(data) {
     const { container, context, particle, delta, colorStyles, backgroundMask, composite, radius, opacity, shadow, transform, } = data, pos = particle.getPosition(), defaultAngle = 0, angle = particle.rotation + (particle.pathRotation ? particle.velocity.angle : defaultAngle), rotateData = {
         sin: Math.sin(angle),
         cos: Math.cos(angle),
-    }, defaultTransformFactor = 1, transformData = {
-        a: rotateData.cos * (transform.a ?? defaultTransformFactor),
-        b: rotateData.sin * (transform.b ?? defaultTransformFactor),
-        c: -rotateData.sin * (transform.c ?? defaultTransformFactor),
-        d: rotateData.cos * (transform.d ?? defaultTransformFactor),
+    }, 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,
+        d: rotateData.cos * (transform.d ?? defaultTransform.d),
     };
     context.setTransform(transformData.a, transformData.b, transformData.c, transformData.d, pos.x, pos.y);
     if (backgroundMask) {
@@ -150,6 +156,6 @@ export function alterHsl(color, type, value) {
     return {
         h: color.h,
         s: color.s,
-        l: color.l + (type === "darken" ? -lFactor : lFactor) * value,
+        l: color.l + (type === AlterType.darken ? -lFactor : lFactor) * value,
     };
 }