@tsparticles/engine 3.0.2 → 3.1.0

package/README.md

@@ -45,7 +45,7 @@ React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.j
     - [**_Usage_**](#usage)
   - [Official components for some of the most used frameworks](#official-components-for-some-of-the-most-used-frameworks)
     - [Angular](#angular)
-      - [`ng-particles`](#ng-particles)
+      - [`@tsparticles/angular`](#@tsparticles/angular)
     - [Astro](#astro)
       - [`astro-particles`](#astro-particles)
     - [Ember.js](#emberjs)
@@ -57,21 +57,21 @@ React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.j
     - [Preact](#preact)
       - [`preact-particles`](#preact-particles)
     - [ReactJS](#reactjs)
-      - [`react-particles`](#react-particles)
+      - [`@tsparticles/react`](#tsparticlesreact)
     - [RiotJS](#riotjs)
       - [`riot-particles`](#riot-particles)
     - [SolidJS](#solidjs)
       - [`solid-particles`](#solid-particles)
     - [Svelte](#svelte)
-      - [`svelte-particles`](#svelte-particles)
+      - [`@tsparticles/svelte`](#@tsparticles/svelte)
     - [VueJS 2.x](#vuejs-2x)
-      - [`vue2-particles`](#vue2-particles)
+      - [`@tsparticles/vue2`](#tsparticlesvue2)
     - [VueJS 3.x](#vuejs-3x)
-      - [`vue3-particles`](#vue3-particles)
+      - [`@tsparticles/vue3`](#tsparticlesvue3)
     - [Web Components](#web-components)
       - [`web-particles`](#web-particles)
     - [WordPress](#wordpress)
-      - [`wordpress-particles`](#wordpress-particles)
+      - [`@tsparticles/wordpress`](#@tsparticles/wordpress)
     - [Elementor](#elementor)
   - [Presets](#presets)
     - [Big Circles](#big-circles)
@@ -312,9 +312,9 @@ particles.pause();
 
 ### Angular
 
-#### `ng-particles`
+#### `@tsparticles/angular`
 
-[![npm](https://img.shields.io/npm/v/ng-particles?style=for-the-badge)](https://www.npmjs.com/package/ng-particles) [![npm](https://img.shields.io/npm/dm/ng-particles?style=for-the-badge)](https://www.npmjs.com/package/ng-particles)
+[![npm](https://img.shields.io/npm/v/@tsparticles/angular?style=for-the-badge)](https://www.npmjs.com/package/@tsparticles/angular) [![npm](https://img.shields.io/npm/dm/@tsparticles/angular?style=for-the-badge)](https://www.npmjs.com/package/@tsparticles/angular)
 
 Instructions available [here](https://github.com/tsparticles/angular/#readme)
 
@@ -360,9 +360,9 @@ Instructions available [here](https://github.com/tsparticles/preact/#readme)
 
 ### ReactJS
 
-#### `react-particles`
+#### `@tsparticles/react`
 
-[![npm](https://img.shields.io/npm/v/react-particles?style=for-the-badge)](https://www.npmjs.com/package/react-particles) [![npm](https://img.shields.io/npm/dm/react-particles?style=for-the-badge)](https://www.npmjs.com/package/react-particles)
+[![npm](https://img.shields.io/npm/v/@tsparticles/react?style=for-the-badge)](https://www.npmjs.com/package/@tsparticles/react) [![npm](https://img.shields.io/npm/dm/@tsparticles/react?style=for-the-badge)](https://www.npmjs.com/package/@tsparticles/react)
 
 Instructions available [here](https://github.com/tsparticles/react/#readme)
 
@@ -384,25 +384,25 @@ You can find the instructions [here](https://github.com/tsparticles/solid/#readm
 
 ### Svelte
 
-#### `svelte-particles`
+#### `@tsparticles/svelte`
 
-[![npm](https://img.shields.io/npm/v/svelte-particles?style=for-the-badge)](https://www.npmjs.com/package/svelte-particles) [![npm downloads](https://img.shields.io/npm/dm/svelte-particles?style=for-the-badge)](https://www.npmjs.com/package/svelte-particles)
+[![npm](https://img.shields.io/npm/v/@tsparticles/svelte?style=for-the-badge)](https://www.npmjs.com/package/@tsparticles/svelte) [![npm downloads](https://img.shields.io/npm/dm/@tsparticles/svelte?style=for-the-badge)](https://www.npmjs.com/package/@tsparticles/svelte)
 
 Instructions available [here](https://github.com/tsparticles/svelte/#readme)
 
 ### VueJS 2.x
 
-#### `vue2-particles`
+#### `@tsparticles/vue2`
 
-[![npm](https://img.shields.io/npm/v/vue2-particles?style=for-the-badge)](https://www.npmjs.com/package/vue2-particles) [![npm](https://img.shields.io/npm/dm/vue2-particles?style=for-the-badge)](https://www.npmjs.com/package/vue2-particles)
+[![npm](https://img.shields.io/npm/v/@tsparticles/vue2?style=for-the-badge)](https://www.npmjs.com/package/@tsparticles/vue2) [![npm](https://img.shields.io/npm/dm/@tsparticles/vue2?style=for-the-badge)](https://www.npmjs.com/package/@tsparticles/vue2)
 
 Instructions available [here](https://github.com/tsparticles/vue2/#readme)
 
 ### VueJS 3.x
 
-#### `vue3-particles`
+#### `@tsparticles/vue3`
 
-[![npm](https://img.shields.io/npm/v/vue3-particles?style=for-the-badge)](https://www.npmjs.com/package/vue3-particles) [![npm](https://img.shields.io/npm/dm/vue3-particles?style=for-the-badge)](https://www.npmjs.com/package/vue3-particles)
+[![npm](https://img.shields.io/npm/v/@tsparticles/vue3?style=for-the-badge)](https://www.npmjs.com/package/@tsparticles/vue3) [![npm](https://img.shields.io/npm/dm/@tsparticles/vue3?style=for-the-badge)](https://www.npmjs.com/package/@tsparticles/vue3)
 
 Instruction available [here](https://github.com/tsparticles/vue3/#readme)
 
@@ -416,9 +416,9 @@ You can find the instructions [here](https://github.com/tsparticles/webcomponent
 
 ### WordPress
 
-#### `wordpress-particles`
+#### `@tsparticles/wordpress`
 
-[![npm](https://img.shields.io/npm/v/wordpress-particles?style=for-the-badge)](https://www.npmjs.com/package/wordpress-particles) [![npm](https://img.shields.io/npm/dm/wordpress-particles?style=for-the-badge)](https://www.npmjs.com/package/wordpress-particles) [![WordPress Plugin Downloads](https://img.shields.io/wordpress/plugin/dw/@tsparticles/block?style=for-the-badge)](https://wordpress.org/plugins/tsparticles-block/) [![WordPress Plugin Active Installs](https://img.shields.io/wordpress/plugin/installs/tsparticles-block?style=for-the-badge)](https://wordpress.org/plugins/tsparticles-block/)
+[![npm](https://img.shields.io/npm/v/@tsparticles/wordpress?style=for-the-badge)](https://www.npmjs.com/package/@tsparticles/wordpress) [![npm](https://img.shields.io/npm/dm/@tsparticles/wordpress?style=for-the-badge)](https://www.npmjs.com/package/@tsparticles/wordpress) [![WordPress Plugin Downloads](https://img.shields.io/wordpress/plugin/dw/@tsparticles/block?style=for-the-badge)](https://wordpress.org/plugins/tsparticles-block/) [![WordPress Plugin Active Installs](https://img.shields.io/wordpress/plugin/installs/tsparticles-block?style=for-the-badge)](https://wordpress.org/plugins/tsparticles-block/)
 
 The plugin page hosted on WordPress.org can be
 found [here](https://wordpress.org/plugins/tsparticles-block/#description)
@@ -688,151 +688,271 @@ _Read more [here](https://particles.js.org/docs/modules/Core_Interfaces_IPlugin.
 ## Dependency Graph
 
 ```mermaid
-flowchart LR
-
-subgraph b [Bundles]
-bb[tsParticles Basic] --> bs[tsParticles Slim]
-bp[Particles.js compatibility bundle] --> bs
-bs --> bf[tsParticles]
-end
-
-e[tsParticles Engine] --> b
-
-iea & iebo & iebu & iec & ieg & iepa & iepu & ierem & ierep & ies --> bs
-ipa & ipc & ipl --> bs
-mb --> bb
-mp --> bs
-pleq --> bs
-sci --> bb
-si & sl & spo & ssq & sst & st --> bs
-uc & uop & uou & usi --> bb
-ul & urot & ust --> bs
-
-iet --> bf
-pla & plem --> bf
-urol & uti & utw & uw --> bf
-
-subgraph i [Interactions]
-
-subgraph ie [Externals]
-iea[Attract]
-iebo[Bounce]
-iebu[Bubble]
-iec[Connect]
-ieg[Grab]
-iepa[Pause]
-iepu[Push]
-ierem[Remove]
-ierep[Repulse]
-ies[Slow]
-iet[Trail]
-end
-
-il[Light]
-
-subgraph ip [Particles]
-ipa[Attract]
-ipc[Collisions]
-ipl[Links]
-ipr[Repulse]
-end
-
-end
-
-i --> ie
-i --> ip
-
-e --> i
-
-subgraph m [Movers]
-mb[Base]
-mp[Parallax]
-end
-
-e --> m
-
-subgraph pa [Paths]
-pac[Curves]
-papn[Perlin Noise]
-pap[Polygon]
-pasn[Simplex Noise]
-pasvg[SVG]
-end
-
-e --> pa
-
-subgraph pl [Plugins]
-pla[Absorbers]
-plcm[Canvas Mask]
-plem[Emitters]
-plh[HSV Color]
-pli[Infection]
-plm[Motion]
-plp[Polygon Mask]
-pls[Sounds]
-
-subgraph plea [Easings]
-pleb[Back]
-pleci[Circ]
-plecu[Cubic]
-plee[Expo]
-pleq[Quad]
-ple4[Quart]
-ple5[Quint]
-ples[Sine]
-end
-
-subgraph plex [Exports]
-plexi[Image]
-plexj[JSON]
-plexv[Video]
-end
-
-end
-
-pl --> plea
-
-e --> pl
-
-subgraph s [Shapes]
-sa[Arrow]
-sb[Bubble]
-sci[Circle]
-scog[Cog]
-sh[Heart]
-si[Image]
-sl[Line]
-smt[Multiline Text]
-spa[Path]
-spo[Polygon]
-srp[Rounded Polygon]
-srr[Rounded Rectangle]
-ssp[Spiral]
-ssq[Square]
-sst[Star]
-st[Text]
-end
-
-e --> s
-
-subgraph u [Updaters]
-uc[Color]
-ud[Destroy]
-ug[Gradient]
-ul[Life]
-uop[Opacity]
-uor[Orbit]
-uou[Out Modes]
-urol[Roll]
-urot[Rotate]
-usi[Size]
-ust[Stroke Color]
-uti[Tilt]
-utw[Twinkle]
-uw[Wobble]
-end
-
-e --> u
+flowchart TD
+
+  subgraph core [Core]
+    engine[tsParticles Engine]
+    perlin-noise[Perlin Noise Lib]
+    simplex-noise[Simplex Noise Lib]
+    configs[tsParticles Configs]
+  end
+
+  subgraph bundle-basic [tsParticles Basic]
+
+    subgraph basic-movers [Movers]
+      move-base[Base]
+    end
+
+    subgraph basic-shapes [Shapes]
+      shape-circle[Circle]
+    end
+
+    subgraph basic-updates [Updaters]
+      updater-color[Color]
+      updater-opacity[Opacity]
+      updater-out-modes[Out Modes]
+      updater-size[Size]
+    end
+
+  end
+
+  engine --> bundle-basic
+
+  subgraph bundle-confetti [tsParticles Confetti]
+
+    subgraph confetti-plugins [Plugins]
+      plugin-emitters
+      plugin-motion
+    end
+
+    subgraph confetti-shapes [Shapes]
+      shape-cards
+      shape-emoji
+      shape-heart
+      shape-image
+      shape-polygon
+      shape-square
+      shape-star
+    end
+
+    subgraph confetti-updaters [Updaters]
+      updater-life
+      updater-roll
+      updater-rotate
+      updater-tilt
+      updater-wobble
+    end
+
+  end
+
+  bundle-basic --> bundle-confetti
+
+  subgraph bundle-slim [tsParticles Slim]
+
+    subgraph slim-interactions [Interactions]
+
+      subgraph slim-interactions-external [Externals]
+        interaction-external-attract[Attract]
+        interaction-external-bounce[Bounce]
+        interaction-external-bubble[Bubble]
+        interaction-external-connect[Connect]
+        interaction-external-grab[Grab]
+        interaction-external-pause[Pause]
+        interaction-external-push[Push]
+        interaction-external-remove[Remove]
+        interaction-external-repulse[Repulse]
+        interaction-external-slow[Slow]
+      end
+
+      subgraph slim-interactions-particles [Particles]
+        interaction-particles-attract[Attract]
+        interaction-particles-collisions[Collisions]
+        interaction-particles-links[Links]
+      end
+
+    end
+
+    subgraph slim-movers [Movers]
+      move-parallax[Parallax]
+    end
+
+    subgraph slim-plugins [Plugins]
+
+      subgraph slim-plugins-easings [Easings]
+        plugin-easing-quad[Quad]
+      end
+
+    end
+
+    subgraph slim-shapes [Shapes]
+      shape-emoji[Emoji]
+      shape-image[Image]
+      shape-line[Line]
+      shape-polygon[Polygon]
+      shape-square[Square]
+      shape-star[Star]
+    end
+
+    subgraph slim-updaters [Updaters]
+      updater-life[Life]
+      updater-rotate[Rotate]
+      updater-stroke-color[Stroke Color]
+    end
+
+  end
+
+  bundle-basic --> bundle-slim
+
+  subgraph bundle-fireworks [tsParticles Fireworks]
+
+    subgraph fireworks-effects [Effects]
+      effect-trail
+    end
+
+    subgraph fireworks-plugins [Plugins]
+      plugin-emitters
+
+      subgraph fireworks-plugin-emitters-shapes [Emitters Shapes]
+        plugin-emitters-shape-square
+      end
+
+      plugin-sounds
+    end
+
+    subgraph fireworks-updaters [Updaters]
+      updater-destroy
+      updater-life
+      updater-rotate
+    end
+
+  end
+
+  bundle-basic --> bundle-fireworks
+
+  subgraph bundle-full [tsParticles]
+
+    subgraph full-interactions [Interactions]
+
+      subgraph full-interactions-external [Externals]
+        interaction-external-trail[Trail]
+      end
+
+    end
+
+    subgraph full-plugins [Plugins]
+      plugin-absorbers[Absorbers]
+      plugin-emitters[Emitters]
+
+      subgraph full-plugin-emitters-shapes [Emitters Shapes]
+        plugin-emitters-shape-circle[Circle]
+        plugin-emitters-shape-square[Square]
+      end
+
+    end
+
+    subgraph full-shapes [Shapes]
+      shape-text[Text]
+    end
+
+    subgraph full-updaters [Updaters]
+      updater-destroy[Destroy]
+      updater-roll[Roll]
+      updater-tilt[Tilt]
+      updater-twinkle[Twinkle]
+      updater-wobble[Wobble]
+    end
+
+  end
+
+  bundle-slim --> bundle-full
+
+  subgraph bundle-all [tsParticles All]
+
+    bundle-pjs[tsParticles Particles.js Compatibility]
+
+    subgraph all-effects [Effects]
+      effect-bubble[Bubble]
+      effect-trail[Trail]
+    end
+
+    subgraph all-interactions [Interactions]
+      subgraph all-interactions-external [External]
+        interaction-external-pop[Pop]
+      end
+
+      interaction-light[Light]
+
+      subgraph all-interactions-particles [Particles]
+        interaction-particles-repulse[Repulse]
+      end
+    end
+
+    subgraph all-paths [Paths]
+      path-curl-noise[Curl Noise]
+      path-curves[Curves]
+      path-perlin-noise[Perlin Noise]
+      path-polygon[Polygon]
+      path-simplex-noise[Simplex Noise]
+      path-svg[SVG]
+    end
+
+    subgraph all-plugins [Plugins]
+      plugin-canvas-mask[Canvas Mask]
+
+      subgraph all-plugins-easings [Easings]
+        plugin-easing-back[Back]
+        plugin-easing-circ[Circ]
+        plugin-easing-cubic[Cubic]
+        plugin-easing-expo[Expo]
+        plugin-easing-linear[Linear]
+        plugin-easing-quart[Quart]
+        plugin-easing-quint[Quint]
+        plugin-easing-sine[Sine]
+      end
+
+      subgraph all-plugin-emitters-shapes [Emitters Shapes]
+        plugin-emitters-shape-canvas[Canvas]
+        plugin-emitters-shape-path[Path]
+        plugin-emitters-shape-polygon[Polygon]
+      end
+
+      subgraph all-plugins-exports [Exports]
+        plugin-export-image[Image]
+        plugin-export-json[JSON]
+        plugin-export-video[Video]
+      end
+
+      plugin-hsv-color[HSV Color]
+      plugin-infection[Infection]
+      plugin-motion[Motion]
+      plugin-poisson-disc[Poisson Disc]
+      plugin-polygon-mask[Polygon Mask]
+      plugin-sounds[Sounds]
+    end
+
+    subgraph all-shapes [Shapes]
+      shape-arrow[Arrow]
+      shape-cards[Cards]
+      shape-cog[Cog]
+      shape-heart[Heart]
+      shape-path[Path]
+      shape-rounded-polygon[Rounded Polygon]
+      shape-rounded-rect[Rounded Rect]
+      shape-spiral[Spiral]
+    end
+
+    subgraph all-updaters [Updaters]
+      updater-gradient[Gradient]
+      updater-orbit[Orbit]
+    end
+
+    simplex-noise --> path-curl-noise
+    perlin-noise --> path-perlin-noise
+    simplex-noise --> path-simplex-noise
+
+  end
+
+  bundle-full --> bundle-all
 ```
 
 ---

package/browser/Core/Canvas.js

@@ -3,9 +3,9 @@ import { deepExtend, getLogger, safeMutationObserver } from "../Utils/Utils.js";
 import { getStyleFromHsl, getStyleFromRgb, rangeColorToHsl, rangeColorToRgb } from "../Utils/ColorUtils.js";
 import { generatedAttribute } from "./Utils/Constants.js";
 function setTransformValue(factor, newFactor, key) {
-    const newValue = newFactor[key];
+    const newValue = newFactor[key], defaultValue = 1;
     if (newValue !== undefined) {
-        factor[key] = (factor[key] ?? 1) * newValue;
+        factor[key] = (factor[key] ?? defaultValue) * newValue;
     }
 }
 export class Canvas {
@@ -13,7 +13,7 @@ export class Canvas {
         this.container = container;
         this._applyPostDrawUpdaters = (particle) => {
             for (const updater of this._postDrawUpdaters) {
-                updater.afterDraw && updater.afterDraw(particle);
+                updater.afterDraw?.(particle);
             }
         };
         this._applyPreDrawUpdaters = (ctx, particle, radius, zOpacity, colorStyles, transform) => {
@@ -33,12 +33,12 @@ export class Canvas {
                         setTransformValue(transform, updaterTransform, key);
                     }
                 }
-                updater.beforeDraw && updater.beforeDraw(particle);
+                updater.beforeDraw?.(particle);
             }
         };
         this._applyResizePlugins = () => {
             for (const plugin of this._resizePlugins) {
-                plugin.resize && plugin.resize();
+                plugin.resize?.();
             }
         };
         this._getPluginParticleColors = (particle) => {
@@ -94,17 +94,17 @@ export class Canvas {
             if (!trail.enable) {
                 return;
             }
+            const factorNumerator = 1, opacity = factorNumerator / trail.length;
             if (trailFill.color) {
                 const fillColor = rangeColorToRgb(trailFill.color);
                 if (!fillColor) {
                     return;
                 }
-                const trail = options.particles.move.trail;
                 this._trailFill = {
                     color: {
                         ...fillColor,
                     },
-                    opacity: 1 / trail.length,
+                    opacity,
                 };
             }
             else {
@@ -116,7 +116,7 @@ export class Canvas {
                     img.addEventListener("load", () => {
                         this._trailFill = {
                             image: img,
-                            opacity: 1 / trail.length,
+                            opacity,
                         };
                         resolve();
                     });
@@ -167,9 +167,9 @@ export class Canvas {
             if (!element) {
                 return;
             }
-            const priority = "important", style = element.style;
+            const priority = "important", style = element.style, radix = 10;
             style.setProperty("position", "fixed", priority);
-            style.setProperty("z-index", this.container.actualOptions.fullScreen.zIndex.toString(10), priority);
+            style.setProperty("z-index", this.container.actualOptions.fullScreen.zIndex.toString(radix), priority);
             style.setProperty("top", "0", priority);
             style.setProperty("left", "0", priority);
             style.setProperty("width", "100%", priority);
@@ -190,11 +190,11 @@ export class Canvas {
         return this.container.actualOptions.fullScreen.enable;
     }
     clear() {
-        const options = this.container.actualOptions, trail = options.particles.move.trail, trailFill = this._trailFill;
+        const options = this.container.actualOptions, trail = options.particles.move.trail, trailFill = this._trailFill, minimumLength = 0;
         if (options.backgroundMask.enable) {
             this.paint();
         }
-        else if (trail.enable && trail.length > 0 && trailFill) {
+        else if (trail.enable && trail.length > minimumLength && trailFill) {
             if (trailFill.color) {
                 this._paintBase(getStyleFromRgb(trailFill.color, trailFill.opacity));
             }
@@ -212,7 +212,7 @@ export class Canvas {
         this.stop();
         if (this._generated) {
             const element = this.element;
-            element && element.remove();
+            element?.remove();
         }
         else {
             this._resetOriginalStyle();
@@ -233,8 +233,8 @@ export class Canvas {
         if (particle.spawning || particle.destroyed) {
             return;
         }
-        const radius = particle.getRadius();
-        if (radius <= 0) {
+        const radius = particle.getRadius(), minimumSize = 0;
+        if (radius <= minimumSize) {
             return;
         }
         const pfColor = particle.getFillColor(), psColor = particle.getStrokeColor() ?? pfColor;
@@ -249,7 +249,7 @@ export class Canvas {
             return;
         }
         this.draw((ctx) => {
-            const container = this.container, options = container.actualOptions, zIndexOptions = particle.options.zIndex, zOpacityFactor = (1 - particle.zIndexFactor) ** zIndexOptions.opacityRate, opacity = particle.bubble.opacity ?? particle.opacity?.value ?? 1, strokeOpacity = particle.strokeOpacity ?? opacity, zOpacity = opacity * zOpacityFactor, zStrokeOpacity = strokeOpacity * zOpacityFactor, transform = {}, colorStyles = {
+            const container = this.container, options = container.actualOptions, zIndexOptions = particle.options.zIndex, zIndexFactorOffset = 1, zIndexFactor = zIndexFactorOffset - particle.zIndexFactor, zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate, defaultOpacity = 1, opacity = particle.bubble.opacity ?? particle.opacity?.value ?? defaultOpacity, strokeOpacity = particle.strokeOpacity ?? opacity, zOpacity = opacity * zOpacityFactor, zStrokeOpacity = strokeOpacity * zOpacityFactor, transform = {}, colorStyles = {
                 fill: fColor ? getStyleFromHsl(fColor, zOpacity) : undefined,
             };
             colorStyles.stroke = sColor ? getStyleFromHsl(sColor, zStrokeOpacity) : colorStyles.fill;
@@ -262,7 +262,7 @@ export class Canvas {
                 colorStyles,
                 backgroundMask: options.backgroundMask.enable,
                 composite: options.backgroundMask.composite,
-                radius: radius * (1 - particle.zIndexFactor) ** zIndexOptions.sizeRate,
+                radius: radius * zIndexFactor ** zIndexOptions.sizeRate,
                 opacity: zOpacity,
                 shadow: particle.options.shadow,
                 transform,
@@ -332,7 +332,7 @@ export class Canvas {
             if (plugin.resize) {
                 this._resizePlugins.push(plugin);
             }
-            if (plugin.particleFillColor || plugin.particleStrokeColor) {
+            if (plugin.particleFillColor ?? plugin.particleStrokeColor) {
                 this._colorPlugins.push(plugin);
             }
         }
@@ -344,7 +344,7 @@ export class Canvas {
             if (updater.afterDraw) {
                 this._postDrawUpdaters.push(updater);
             }
-            if (updater.getColorStyles || updater.getTransformValues || updater.beforeDraw) {
+            if (updater.getColorStyles ?? updater.getTransformValues ?? updater.beforeDraw) {
                 this._preDrawUpdaters.push(updater);
             }
         }