@tsparticles/engine 4.0.0-alpha.2 → 4.0.0-alpha.4

package/umd/Core/Utils/EventListeners.js

@@ -4,65 +4,19 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./Constants.js", "../../Utils/Utils.js", "../../Enums/InteractivityDetect.js", "../../Utils/TypeUtils.js"], factory);
+        define(["require", "exports", "../../Utils/Utils.js", "./Constants.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.EventListeners = void 0;
-    const Constants_js_1 = require("./Constants.js");
     const Utils_js_1 = require("../../Utils/Utils.js");
-    const InteractivityDetect_js_1 = require("../../Enums/InteractivityDetect.js");
-    const TypeUtils_js_1 = require("../../Utils/TypeUtils.js");
-    function manageListener(element, event, handler, add, options) {
-        if (add) {
-            let addOptions = { passive: true };
-            if ((0, TypeUtils_js_1.isBoolean)(options)) {
-                addOptions.capture = options;
-            }
-            else if (options !== undefined) {
-                addOptions = options;
-            }
-            element.addEventListener(event, handler, addOptions);
-        }
-        else {
-            const removeOptions = options;
-            element.removeEventListener(event, handler, removeOptions);
-        }
-    }
+    const Constants_js_1 = require("./Constants.js");
     class EventListeners {
         constructor(container) {
             this.container = container;
-            this._canPush = true;
-            this._doMouseTouchClick = e => {
-                const container = this.container, options = container.actualOptions;
-                if (this._canPush) {
-                    const mouseInteractivity = container.interactivity.mouse, mousePos = mouseInteractivity.position;
-                    if (!mousePos) {
-                        return;
-                    }
-                    mouseInteractivity.clickPosition = { ...mousePos };
-                    mouseInteractivity.clickTime = Date.now();
-                    const onClick = options.interactivity.events.onClick;
-                    (0, Utils_js_1.executeOnSingleOrMultiple)(onClick.mode, mode => {
-                        this.container.handleClickMode(mode);
-                    });
-                }
-                if (e.type === "touchend") {
-                    setTimeout(() => {
-                        this._mouseTouchFinish();
-                    }, Constants_js_1.touchDelay);
-                }
-            };
-            this._handleThemeChange = (e) => {
-                const mediaEvent = e, container = this.container, options = container.options, defaultThemes = options.defaultThemes, themeName = mediaEvent.matches ? defaultThemes.dark : defaultThemes.light, theme = options.themes.find(theme => theme.name === themeName);
-                if (theme?.default.auto) {
-                    void container.loadTheme(themeName);
-                }
-            };
             this._handleVisibilityChange = () => {
                 const container = this.container, options = container.actualOptions;
-                this._mouseTouchFinish();
                 if (!options.pauseOnBlur) {
                     return;
                 }
@@ -89,64 +43,20 @@
                     const canvas = this.container.canvas;
                     await canvas.windowResize();
                 };
-                this._resizeTimeout = setTimeout(() => void handleResize(), this.container.actualOptions.interactivity.events.resize.delay * Constants_js_1.millisecondsToSeconds);
-            };
-            this._manageInteractivityListeners = (mouseLeaveTmpEvent, add) => {
-                const handlers = this._handlers, container = this.container, options = container.actualOptions, interactivityEl = container.interactivity.element;
-                if (!interactivityEl) {
-                    return;
-                }
-                const html = interactivityEl, canvas = container.canvas;
-                canvas.setPointerEvents(html === canvas.element ? "initial" : "none");
-                if (!(options.interactivity.events.onHover.enable || options.interactivity.events.onClick.enable)) {
-                    return;
-                }
-                manageListener(interactivityEl, Constants_js_1.mouseMoveEvent, handlers.mouseMove, add);
-                manageListener(interactivityEl, Constants_js_1.touchStartEvent, handlers.touchStart, add);
-                manageListener(interactivityEl, Constants_js_1.touchMoveEvent, handlers.touchMove, add);
-                if (options.interactivity.events.onClick.enable) {
-                    manageListener(interactivityEl, Constants_js_1.touchEndEvent, handlers.touchEndClick, add);
-                    manageListener(interactivityEl, Constants_js_1.mouseUpEvent, handlers.mouseUp, add);
-                    manageListener(interactivityEl, Constants_js_1.mouseDownEvent, handlers.mouseDown, add);
-                }
-                else {
-                    manageListener(interactivityEl, Constants_js_1.touchEndEvent, handlers.touchEnd, add);
-                }
-                manageListener(interactivityEl, mouseLeaveTmpEvent, handlers.mouseLeave, add);
-                manageListener(interactivityEl, Constants_js_1.touchCancelEvent, handlers.touchCancel, add);
+                this._resizeTimeout = setTimeout(() => void handleResize(), this.container.actualOptions.resize.delay * Constants_js_1.millisecondsToSeconds);
             };
             this._manageListeners = add => {
-                const handlers = this._handlers, container = this.container, options = container.actualOptions, detectType = options.interactivity.detectsOn, canvasEl = container.canvas.element;
-                let mouseLeaveTmpEvent = Constants_js_1.mouseLeaveEvent;
-                if (detectType === InteractivityDetect_js_1.InteractivityDetect.window) {
-                    container.interactivity.element = window;
-                    mouseLeaveTmpEvent = Constants_js_1.mouseOutEvent;
-                }
-                else if (detectType === InteractivityDetect_js_1.InteractivityDetect.parent && canvasEl) {
-                    container.interactivity.element = canvasEl.parentElement ?? canvasEl.parentNode;
-                }
-                else {
-                    container.interactivity.element = canvasEl;
-                }
-                this._manageMediaMatch(add);
-                this._manageResize(add);
-                this._manageInteractivityListeners(mouseLeaveTmpEvent, add);
-                manageListener(document, Constants_js_1.visibilityChangeEvent, handlers.visibilityChange, add, false);
-            };
-            this._manageMediaMatch = add => {
                 const handlers = this._handlers;
-                if (!this._matchMedia) {
-                    return;
-                }
-                manageListener(this._matchMedia, "change", handlers.themeChange, add);
+                this._manageResize(add);
+                (0, Utils_js_1.manageListener)(document, Constants_js_1.visibilityChangeEvent, handlers.visibilityChange, add, false);
             };
             this._manageResize = add => {
                 const handlers = this._handlers, container = this.container, options = container.actualOptions;
-                if (!options.interactivity.events.resize.enable) {
+                if (!options.resize.enable) {
                     return;
                 }
                 if (typeof ResizeObserver === "undefined") {
-                    manageListener(globalThis, Constants_js_1.resizeEvent, handlers.resize, add);
+                    (0, Utils_js_1.manageListener)(globalThis, Constants_js_1.resizeEvent, handlers.resize, add);
                     return;
                 }
                 const canvasEl = container.canvas.element;
@@ -168,165 +78,10 @@
                     this._resizeObserver.observe(canvasEl);
                 }
             };
-            this._mouseDown = () => {
-                const { interactivity } = this.container, { mouse } = interactivity;
-                mouse.clicking = true;
-                mouse.downPosition = mouse.position;
-            };
-            this._mouseTouchClick = e => {
-                const container = this.container, options = container.actualOptions, { mouse } = container.interactivity;
-                mouse.inside = true;
-                let handled = false;
-                const mousePosition = mouse.position;
-                if (!mousePosition || !options.interactivity.events.onClick.enable) {
-                    return;
-                }
-                for (const plugin of container.plugins.values()) {
-                    if (!plugin.clickPositionValid) {
-                        continue;
-                    }
-                    handled = plugin.clickPositionValid(mousePosition);
-                    if (handled) {
-                        break;
-                    }
-                }
-                if (!handled) {
-                    this._doMouseTouchClick(e);
-                }
-                mouse.clicking = false;
-            };
-            this._mouseTouchFinish = () => {
-                const { interactivity } = this.container, { mouse } = interactivity;
-                delete mouse.position;
-                delete mouse.clickPosition;
-                delete mouse.downPosition;
-                interactivity.status = Constants_js_1.mouseLeaveEvent;
-                mouse.inside = false;
-                mouse.clicking = false;
-            };
-            this._mouseTouchMove = e => {
-                const container = this.container, options = container.actualOptions, interactivity = container.interactivity, canvasEl = container.canvas.element;
-                if (!interactivity.element) {
-                    return;
-                }
-                interactivity.mouse.inside = true;
-                let pos;
-                if (e.type.startsWith("pointer")) {
-                    this._canPush = true;
-                    const mouseEvent = e;
-                    if (interactivity.element === window) {
-                        if (canvasEl) {
-                            const clientRect = canvasEl.getBoundingClientRect();
-                            pos = {
-                                x: mouseEvent.clientX - clientRect.left,
-                                y: mouseEvent.clientY - clientRect.top,
-                            };
-                        }
-                    }
-                    else if (options.interactivity.detectsOn === InteractivityDetect_js_1.InteractivityDetect.parent) {
-                        const source = mouseEvent.target, target = mouseEvent.currentTarget;
-                        if (canvasEl) {
-                            const sourceRect = source.getBoundingClientRect(), targetRect = target.getBoundingClientRect(), canvasRect = canvasEl.getBoundingClientRect();
-                            pos = {
-                                x: mouseEvent.offsetX + Constants_js_1.double * sourceRect.left - (targetRect.left + canvasRect.left),
-                                y: mouseEvent.offsetY + Constants_js_1.double * sourceRect.top - (targetRect.top + canvasRect.top),
-                            };
-                        }
-                        else {
-                            pos = {
-                                x: mouseEvent.offsetX,
-                                y: mouseEvent.offsetY,
-                            };
-                        }
-                    }
-                    else if (mouseEvent.target === canvasEl) {
-                        pos = {
-                            x: mouseEvent.offsetX,
-                            y: mouseEvent.offsetY,
-                        };
-                    }
-                }
-                else {
-                    this._canPush = e.type !== "touchmove";
-                    if (canvasEl) {
-                        const touchEvent = e, lastTouch = touchEvent.touches[touchEvent.touches.length - Constants_js_1.lengthOffset], canvasRect = canvasEl.getBoundingClientRect();
-                        if (!lastTouch) {
-                            return;
-                        }
-                        pos = {
-                            x: lastTouch.clientX - canvasRect.left,
-                            y: lastTouch.clientY - canvasRect.top,
-                        };
-                    }
-                }
-                const pxRatio = container.retina.pixelRatio;
-                if (pos) {
-                    pos.x *= pxRatio;
-                    pos.y *= pxRatio;
-                }
-                interactivity.mouse.position = pos;
-                interactivity.status = Constants_js_1.mouseMoveEvent;
-            };
-            this._touchEnd = e => {
-                const evt = e, touches = Array.from(evt.changedTouches);
-                for (const touch of touches) {
-                    this._touches.delete(touch.identifier);
-                }
-                this._mouseTouchFinish();
-            };
-            this._touchEndClick = e => {
-                const evt = e, touches = Array.from(evt.changedTouches);
-                for (const touch of touches) {
-                    this._touches.delete(touch.identifier);
-                }
-                this._mouseTouchClick(e);
-            };
-            this._touchStart = e => {
-                const evt = e, touches = Array.from(evt.changedTouches);
-                for (const touch of touches) {
-                    this._touches.set(touch.identifier, performance.now());
-                }
-                this._mouseTouchMove(e);
-            };
-            this._matchMedia = (0, Utils_js_1.safeMatchMedia)("(prefers-color-scheme: dark)");
-            this._touches = new Map();
             this._handlers = {
-                mouseDown: () => {
-                    this._mouseDown();
-                },
-                mouseLeave: () => {
-                    this._mouseTouchFinish();
-                },
-                mouseMove: (e) => {
-                    this._mouseTouchMove(e);
-                },
-                mouseUp: (e) => {
-                    this._mouseTouchClick(e);
-                },
-                touchStart: (e) => {
-                    this._touchStart(e);
-                },
-                touchMove: (e) => {
-                    this._mouseTouchMove(e);
-                },
-                touchEnd: (e) => {
-                    this._touchEnd(e);
-                },
-                touchCancel: (e) => {
-                    this._touchEnd(e);
-                },
-                touchEndClick: (e) => {
-                    this._touchEndClick(e);
-                },
                 visibilityChange: () => {
                     this._handleVisibilityChange();
                 },
-                themeChange: (e) => {
-                    this._handleThemeChange(e);
-                },
-                oldThemeChange: (e) => {
-                    this._handleThemeChange(e);
-                },
                 resize: () => {
                     this._handleWindowResize();
                 },

package/umd/Options/Classes/Options.js

@@ -4,7 +4,7 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "../../Utils/Utils.js", "../../Utils/TypeUtils.js", "./Background/Background.js", "./FullScreen/FullScreen.js", "./Interactivity/Interactivity.js", "./ManualParticle.js", "./Responsive.js", "../../Enums/Modes/ResponsiveMode.js", "./Theme/Theme.js", "../../Enums/Modes/ThemeMode.js", "../../Utils/OptionsUtils.js", "../../Utils/MathUtils.js"], factory);
+        define(["require", "exports", "../../Utils/Utils.js", "../../Utils/TypeUtils.js", "./Background/Background.js", "./FullScreen/FullScreen.js", "./ResizeEvent.js", "../../Utils/OptionsUtils.js", "../../Utils/MathUtils.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
@@ -14,20 +14,11 @@
     const TypeUtils_js_1 = require("../../Utils/TypeUtils.js");
     const Background_js_1 = require("./Background/Background.js");
     const FullScreen_js_1 = require("./FullScreen/FullScreen.js");
-    const Interactivity_js_1 = require("./Interactivity/Interactivity.js");
-    const ManualParticle_js_1 = require("./ManualParticle.js");
-    const Responsive_js_1 = require("./Responsive.js");
-    const ResponsiveMode_js_1 = require("../../Enums/Modes/ResponsiveMode.js");
-    const Theme_js_1 = require("./Theme/Theme.js");
-    const ThemeMode_js_1 = require("../../Enums/Modes/ThemeMode.js");
+    const ResizeEvent_js_1 = require("./ResizeEvent.js");
     const OptionsUtils_js_1 = require("../../Utils/OptionsUtils.js");
     const MathUtils_js_1 = require("../../Utils/MathUtils.js");
     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 === ThemeMode_js_1.ThemeMode.any));
-            };
             this._importPreset = preset => {
                 this.load(this._engine.getPreset(preset));
             };
@@ -43,15 +34,12 @@
             this.duration = 0;
             this.fpsLimit = 120;
             this.hdr = true;
-            this.interactivity = new Interactivity_js_1.Interactivity(engine, container);
-            this.manualParticles = [];
             this.particles = (0, OptionsUtils_js_1.loadParticlesOptions)(this._engine, this._container);
             this.pauseOnBlur = true;
             this.pauseOnOutsideViewport = true;
-            this.responsive = [];
+            this.resize = new ResizeEvent_js_1.ResizeEvent();
             this.smooth = false;
             this.style = {};
-            this.themes = [];
             this.zLayers = 100;
         }
         load(data) {
@@ -109,71 +97,15 @@
             else {
                 this.fullScreen.load(fullScreen);
             }
-            this.interactivity.load(data.interactivity);
-            if (data.manualParticles) {
-                this.manualParticles = data.manualParticles.map(t => {
-                    const tmp = new ManualParticle_js_1.ManualParticle();
-                    tmp.load(t);
-                    return tmp;
-                });
-            }
             this.particles.load(data.particles);
+            this.resize.load(data.resize);
             this.style = (0, Utils_js_1.deepExtend)(this.style, data.style);
-            this._engine.loadOptions(this, data);
             if (data.smooth !== undefined) {
                 this.smooth = data.smooth;
             }
-            const interactors = this._engine.interactors.get(this._container);
-            if (interactors) {
-                for (const interactor of interactors) {
-                    if (interactor.loadOptions) {
-                        interactor.loadOptions(this, data);
-                    }
-                }
-            }
-            if (data.responsive !== undefined) {
-                for (const responsive of data.responsive) {
-                    const optResponsive = new Responsive_js_1.Responsive();
-                    optResponsive.load(responsive);
-                    this.responsive.push(optResponsive);
-                }
-            }
-            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);
-                    if (existingTheme) {
-                        existingTheme.load(theme);
-                    }
-                    else {
-                        const optTheme = new Theme_js_1.Theme();
-                        optTheme.load(theme);
-                        this.themes.push(optTheme);
-                    }
-                }
-            }
-            this.defaultThemes.dark = this._findDefaultTheme(ThemeMode_js_1.ThemeMode.dark)?.name;
-            this.defaultThemes.light = this._findDefaultTheme(ThemeMode_js_1.ThemeMode.light)?.name;
-        }
-        setResponsive(width, pxRatio, defaultOptions) {
-            this.load(defaultOptions);
-            const responsiveOptions = this.responsive.find(t => t.mode === ResponsiveMode_js_1.ResponsiveMode.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);
-                if (chosenTheme) {
-                    this.load(chosenTheme.options);
-                }
-            }
-            else {
-                const mediaMatch = (0, Utils_js_1.safeMatchMedia)("(prefers-color-scheme: dark)"), clientDarkMode = mediaMatch?.matches, defaultTheme = this._findDefaultTheme(clientDarkMode ? ThemeMode_js_1.ThemeMode.dark : ThemeMode_js_1.ThemeMode.light);
-                if (defaultTheme) {
-                    this.load(defaultTheme.options);
-                }
-            }
+            this._engine.plugins.forEach(plugin => {
+                plugin.loadOptions(this._container, this, data);
+            });
         }
     }
     exports.Options = Options;

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

@@ -67,9 +67,6 @@
             this.shape.load(data.shape);
             this.size.load(data.size);
             this.zIndex.load(data.zIndex);
-            if (data.interactivity !== undefined) {
-                this.interactivity = (0, Utils_js_1.deepExtend)({}, data.interactivity);
-            }
             const strokeToLoad = data.stroke;
             if (strokeToLoad) {
                 this.stroke = (0, Utils_js_1.executeOnSingleOrMultiple)(strokeToLoad, t => {
@@ -79,6 +76,11 @@
                 });
             }
             if (this._container) {
+                for (const plugin of this._engine.plugins) {
+                    if (plugin.loadParticlesOptions) {
+                        plugin.loadParticlesOptions(this._container, this, data);
+                    }
+                }
                 const updaters = this._engine.updaters.get(this._container);
                 if (updaters) {
                     for (const updater of updaters) {
@@ -87,14 +89,6 @@
                         }
                     }
                 }
-                const interactors = this._engine.interactors.get(this._container);
-                if (interactors) {
-                    for (const interactor of interactors) {
-                        if (interactor.loadParticlesOptions) {
-                            interactor.loadParticlesOptions(this, data);
-                        }
-                    }
-                }
             }
         }
     }

package/umd/Options/Classes/{Interactivity/Events/ResizeEvent.js → ResizeEvent.js}

@@ -4,13 +4,13 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "../../../../Utils/TypeUtils.js"], factory);
+        define(["require", "exports", "../../Utils/TypeUtils.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.ResizeEvent = void 0;
-    const TypeUtils_js_1 = require("../../../../Utils/TypeUtils.js");
+    const TypeUtils_js_1 = require("../../Utils/TypeUtils.js");
     class ResizeEvent {
         constructor() {
             this.delay = 0.5;

package/umd/Utils/CanvasUtils.js

@@ -53,15 +53,7 @@
         context.clearRect(Constants_js_1.originPoint.x, Constants_js_1.originPoint.y, dimension.width, dimension.height);
     }
     function drawParticle(data) {
-        const { container, context, particle, delta, colorStyles, radius, opacity, transform } = data, pos = particle.getPosition(), angle = particle.getAngle(), rotateData = {
-            sin: Math.sin(angle),
-            cos: Math.cos(angle),
-        }, rotating = particle.isRotating, transformData = {
-            a: rotateData.cos * (transform.a ?? Constants_js_1.defaultTransform.a),
-            b: rotating ? rotateData.sin * (transform.b ?? Constants_js_1.identity) : (transform.b ?? Constants_js_1.defaultTransform.b),
-            c: rotating ? -rotateData.sin * (transform.c ?? Constants_js_1.identity) : (transform.c ?? Constants_js_1.defaultTransform.c),
-            d: rotateData.cos * (transform.d ?? Constants_js_1.defaultTransform.d),
-        };
+        const { container, context, particle, delta, colorStyles, radius, opacity, transform } = data, pos = particle.getPosition(), transformData = particle.getTransformData(transform);
         context.setTransform(transformData.a, transformData.b, transformData.c, transformData.d, pos.x, pos.y);
         if (colorStyles.fill) {
             context.fillStyle = colorStyles.fill;
@@ -72,24 +64,25 @@
             context.strokeStyle = colorStyles.stroke;
         }
         const drawData = {
-            container,
             context,
             particle,
             radius,
             opacity,
             delta,
+            pixelRatio: container.retina.pixelRatio,
+            fill: particle.shapeFill,
+            stroke: strokeWidth > Constants_js_1.minStrokeWidth || !particle.shapeFill,
             transformData,
-            strokeWidth,
         };
-        drawBeforeEffect(drawData);
-        drawShapeBeforeDraw(drawData);
-        drawShape(drawData);
-        drawShapeAfterDraw(drawData);
-        drawAfterEffect(drawData);
+        drawBeforeEffect(container, drawData);
+        drawShapeBeforeDraw(container, drawData);
+        drawShape(container, drawData);
+        drawShapeAfterDraw(container, drawData);
+        drawAfterEffect(container, drawData);
         context.resetTransform();
     }
-    function drawAfterEffect(data) {
-        const { container, context, particle, radius, opacity, strokeWidth, delta, transformData } = data;
+    function drawAfterEffect(container, data) {
+        const { particle } = data;
         if (!particle.effect) {
             return;
         }
@@ -97,20 +90,10 @@
         if (!drawFunc) {
             return;
         }
-        drawFunc({
-            context,
-            particle,
-            radius,
-            opacity,
-            delta,
-            pixelRatio: container.retina.pixelRatio,
-            fill: particle.shapeFill,
-            stroke: strokeWidth > Constants_js_1.minStrokeWidth || !particle.shapeFill,
-            transformData: { ...transformData },
-        });
+        drawFunc(data);
     }
-    function drawBeforeEffect(data) {
-        const { container, context, particle, radius, opacity, strokeWidth, delta, transformData } = data;
+    function drawBeforeEffect(container, data) {
+        const { particle } = data;
         if (!particle.effect) {
             return;
         }
@@ -118,20 +101,10 @@
         if (!drawer?.drawBefore) {
             return;
         }
-        drawer.drawBefore({
-            context,
-            particle,
-            radius,
-            opacity,
-            delta,
-            pixelRatio: container.retina.pixelRatio,
-            fill: particle.shapeFill,
-            stroke: strokeWidth > Constants_js_1.minStrokeWidth || !particle.shapeFill,
-            transformData: { ...transformData },
-        });
+        drawer.drawBefore(data);
     }
-    function drawShape(data) {
-        const { container, context, particle, radius, opacity, delta, strokeWidth, transformData } = data;
+    function drawShape(container, data) {
+        const { context, particle, stroke } = data;
         if (!particle.shape) {
             return;
         }
@@ -140,29 +113,19 @@
             return;
         }
         context.beginPath();
-        drawer.draw({
-            context,
-            particle,
-            radius,
-            opacity,
-            delta,
-            pixelRatio: container.retina.pixelRatio,
-            fill: particle.shapeFill,
-            stroke: strokeWidth > Constants_js_1.minStrokeWidth || !particle.shapeFill,
-            transformData: { ...transformData },
-        });
+        drawer.draw(data);
         if (particle.shapeClose) {
             context.closePath();
         }
-        if (strokeWidth > Constants_js_1.minStrokeWidth) {
+        if (stroke) {
             context.stroke();
         }
         if (particle.shapeFill) {
             context.fill();
         }
     }
-    function drawShapeAfterDraw(data) {
-        const { container, context, particle, radius, opacity, strokeWidth, delta, transformData } = data;
+    function drawShapeAfterDraw(container, data) {
+        const { particle } = data;
         if (!particle.shape) {
             return;
         }
@@ -170,20 +133,10 @@
         if (!drawer?.afterDraw) {
             return;
         }
-        drawer.afterDraw({
-            context,
-            particle,
-            radius,
-            opacity,
-            delta,
-            pixelRatio: container.retina.pixelRatio,
-            fill: particle.shapeFill,
-            stroke: strokeWidth > Constants_js_1.minStrokeWidth || !particle.shapeFill,
-            transformData: { ...transformData },
-        });
+        drawer.afterDraw(data);
     }
-    function drawShapeBeforeDraw(data) {
-        const { container, context, particle, radius, opacity, strokeWidth, delta, transformData } = data;
+    function drawShapeBeforeDraw(container, data) {
+        const { particle } = data;
         if (!particle.shape) {
             return;
         }
@@ -191,17 +144,7 @@
         if (!drawer?.beforeDraw) {
             return;
         }
-        drawer.beforeDraw({
-            context,
-            particle,
-            radius,
-            opacity,
-            delta,
-            pixelRatio: container.retina.pixelRatio,
-            fill: particle.shapeFill,
-            stroke: strokeWidth > Constants_js_1.minStrokeWidth || !particle.shapeFill,
-            transformData: { ...transformData },
-        });
+        drawer.beforeDraw(data);
     }
     function drawPlugin(context, plugin, delta) {
         if (!plugin.draw) {