refactor: updated palettes to the new paint syntax

Author: matteobruni

engine/src/Core/Interfaces/IPalette.ts

@@ -3,22 +3,24 @@ import type { SingleOrMultiple } from "../../Types/SingleOrMultiple.js";
 
 export interface IPaletteColorsFill {
   enable: boolean;
+  opacity?: RangeValue;
   value: SingleOrMultiple<string>;
 }
 
 export interface IPaletteColorsStroke {
+  opacity?: RangeValue;
   value: SingleOrMultiple<string>;
   width: RangeValue;
 }
 
 export interface IPaletteColors {
   fill?: IPaletteColorsFill;
-  stroke?: SingleOrMultiple<IPaletteColorsStroke>;
+  stroke?: IPaletteColorsStroke;
 }
 
 export interface IPalette {
   background: string;
   blendMode: GlobalCompositeOperation;
-  colors: IPaletteColors;
+  colors: SingleOrMultiple<IPaletteColors>;
   name: string;
 }

engine/src/Options/Classes/Particles/ParticlesOptions.ts

@@ -134,42 +134,49 @@ export class ParticlesOptions implements IParticlesOptions, IOptionLoader<IParti
     }
 
     const paletteColors = paletteData.colors,
-      paletteFill = paletteColors.fill,
-      paletteStroke = paletteColors.stroke,
-      defaultPaintStrokeIndex = 0,
       defaultPaintStrokeWidth = 0,
-      palettePaint: IPaint = {
-        fill: paletteFill
-          ? {
+      defaultPaintVariantsLength = 1,
+      firstPaintVariantIndex = 0,
+      defaultPalettePaintVariant: IPaint = {},
+      colorVariants = isArray(paletteColors) ? paletteColors : [paletteColors],
+      palettePaintVariants = colorVariants.flatMap<IPaint>(variant => {
+        const paletteFill = variant.fill,
+          paletteStroke = variant.stroke,
+          fillPart: IPaint["fill"] = paletteFill
+            ? {
+                color: {
+                  value: paletteFill.value,
+                },
+                enable: paletteFill.enable,
+                opacity: paletteFill.opacity,
+              }
+            : undefined;
+
+        if (!paletteStroke) {
+          return [
+            {
+              fill: fillPart,
+            },
+          ];
+        }
+
+        return [
+          {
+            fill: fillPart,
+            stroke: {
               color: {
-                value: paletteFill.value,
+                value: paletteStroke.value,
               },
-              enable: paletteFill.enable,
-            }
-          : undefined,
-      };
-
-    if (paletteStroke) {
-      if (isArray(paletteStroke)) {
-        const firstStroke = paletteStroke[defaultPaintStrokeIndex];
-
-        if (firstStroke) {
-          palettePaint.stroke = {
-            color: {
-              value: firstStroke.value,
+              opacity: paletteStroke.opacity,
+              width: paletteStroke.width || defaultPaintStrokeWidth,
             },
-            width: firstStroke.width || defaultPaintStrokeWidth,
-          };
-        }
-      } else {
-        palettePaint.stroke = {
-          color: {
-            value: paletteStroke.value,
           },
-          width: paletteStroke.width,
-        };
-      }
-    }
+        ];
+      }),
+      palettePaint: SingleOrMultiple<IPaint> =
+        palettePaintVariants.length > defaultPaintVariantsLength
+          ? palettePaintVariants
+          : (palettePaintVariants[firstPaintVariantIndex] ?? defaultPalettePaintVariant);
 
     this.load({
       paint: palettePaint,