DRAFT WIP BREAKING: remove opacity from colorstops in live Gradient class

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- DRAFT WIP BREAKING: remove opacity from colorstops in live Gradient class [#9622](https://github.com/fabricjs/fabric.js/pull/9622)
 - fix(ActiveSelection): block ancestors/descendants of selected objects from being selected [#9732](https://github.com/fabricjs/fabric.js/pull/9732)
 - fix(Image): typo in style property for svg export [#9717](https://github.com/fabricjs/fabric.js/pull/9717)
 - ci(): Update the changelog and stats action to work from forks

src/gradient/Gradient.ts

@@ -1,4 +1,3 @@
-import { Color } from '../color/Color';
 import { iMatrix } from '../constants';
 import { parseTransformAttribute } from '../parser/parseTransformAttribute';
 import type { FabricObject } from '../shapes/Object/FabricObject';
@@ -133,11 +132,9 @@ export class Gradient<
    */
   addColorStop(colorStops: Record<string, string>) {
     for (const position in colorStops) {
-      const color = new Color(colorStops[position]);
       this.colorStops.push({
         offset: parseFloat(position),
-        color: color.toRgb(),
-        opacity: color.getAlpha(),
+        color: colorStops[position],
       });
     }
     return this;
@@ -152,8 +149,8 @@ export class Gradient<
     return {
       ...pick(this, propertiesToInclude as (keyof this)[]),
       type: this.type,
-      coords: this.coords,
-      colorStops: this.colorStops,
+      coords: { ...this.coords },
+      colorStops: this.colorStops.map((colorStop) => ({ ...colorStop })),
       offsetX: this.offsetX,
       offsetY: this.offsetY,
       gradientUnits: this.gradientUnits,
@@ -269,15 +266,9 @@ export class Gradient<
       }
     }
 
-    colorStops.forEach(({ color, offset, opacity }) => {
+    colorStops.forEach(({ color, offset }) => {
       markup.push(
-        '<stop ',
-        'offset="',
-        offset * 100 + '%',
-        '" style="stop-color:',
-        color,
-        typeof opacity !== 'undefined' ? ';stop-opacity: ' + opacity : ';',
-        '"/>\n'
+        `<stop offset="${offset * 100}%" style="stop-color:${color};"/>\n`
       );
     });
 
@@ -309,13 +300,8 @@ export class Gradient<
             coords.r2
           );
 
-    this.colorStops.forEach(({ color, opacity, offset }) => {
-      gradient.addColorStop(
-        offset,
-        typeof opacity !== 'undefined'
-          ? new Color(color).setAlpha(opacity).toRgba()
-          : color
-      );
+    this.colorStops.forEach(({ color, offset }) => {
+      gradient.addColorStop(offset, color);
     });
 
     return gradient;

src/gradient/parser/parseColorStops.ts

@@ -6,8 +6,8 @@ import type { ColorStop } from '../typedefs';
 const RE_KEY_VALUE_PAIRS = /\s*;\s*/;
 const RE_KEY_VALUE = /\s*:\s*/;
 
-function parseColorStop(el: SVGStopElement, multiplier: number) {
-  let colorValue, opacity;
+function parseColorStop(el: SVGStopElement, opacityMultiplier: number) {
+  let colorValue, opacityValue;
   const style = el.getAttribute('style');
   if (style) {
     const keyValuePairs = style.split(RE_KEY_VALUE_PAIRS);
@@ -23,22 +23,24 @@ function parseColorStop(el: SVGStopElement, multiplier: number) {
       if (key === 'stop-color') {
         colorValue = value;
       } else if (key === 'stop-opacity') {
-        opacity = value;
+        opacityValue = value;
       }
     }
   }
 
-  const color = new Color(
-    colorValue || el.getAttribute('stop-color') || 'rgb(0,0,0)'
+  colorValue = colorValue || el.getAttribute('stop-color') || 'rgb(0,0,0)';
+  opacityValue = ifNaN(
+    parseFloat(opacityValue ?? (el.getAttribute('stop-opacity') || '1')),
+    1
   );
 
+  const color = new Color(colorValue);
+
+  color.setAlpha(color.getAlpha() * opacityValue * opacityMultiplier);
+
   return {
     offset: parsePercent(el.getAttribute('offset'), 0),
-    color: color.toRgb(),
-    opacity:
-      ifNaN(parseFloat(opacity || el.getAttribute('stop-opacity') || ''), 1) *
-      color.getAlpha() *
-      multiplier,
+    color: color.toRgba(),
   };
 }
 

src/gradient/typedefs.ts

@@ -9,7 +9,6 @@ export type GradientCoordValue = number | Percent | string;
 export type ColorStop = {
   color: string;
   offset: number;
-  opacity?: number;
 };
 
 export type LinearGradientCoords<T extends GradientCoordValue> = {