Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Draft
wants to merge 8 commits into
base: master
Choose a base branch
from
Draft

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
170d05a
remove-colorparsing-rendering
asturur Jan 21, 2024
90f34b6
not broken
asturur Jan 21, 2024
ffa6310
update CHANGELOG.md
github-actions[bot] Jan 21, 2024
fc9b162
mutation protect
asturur Jan 21, 2024
57db454
Merge branch 'colorstops-in-render' of github.com:fabricjs/fabric.js …
asturur Jan 21, 2024
ec7567b
Merge branch 'master' into colorstops-in-render
asturur Mar 16, 2024
2cc5abb
Merge branch 'master' into colorstops-in-render
asturur Mar 27, 2024
1946d69
restored code as before
asturur Mar 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
- feat(LayoutManager): Handle the case of activeSelection with objects inside different groups [#9651](https://github.com/fabricjs/fabric.js/pull/9651)

## [6.0.0-beta20]
Expand Down
44 changes: 15 additions & 29 deletions src/gradient/Gradient.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,10 +62,8 @@ describe('Gradient', () => {
expect(gradient.colorStops[0].offset).toEqual(1);
expect(gradient.colorStops[1].offset).toEqual(0);

expect(gradient.colorStops[0].color).toEqual('rgb(0,0,0)');
expect(gradient.colorStops[1].color).toEqual('rgb(255,255,255)');

expect(gradient.colorStops[0].opacity).toEqual(0);
expect(gradient.colorStops[0].color).toEqual('rgba(0,0,0,0)');
expect(gradient.colorStops[1].color).toEqual('rgba(255,255,255,1)');
});

test('fromElement linearGradient with floats percentage - objectBoundingBox', () => {
Expand Down Expand Up @@ -191,10 +189,8 @@ describe('Gradient', () => {
expect(gradient.colorStops[0].offset).toEqual(1);
expect(gradient.colorStops[1].offset).toEqual(0);

expect(gradient.colorStops[0].color).toEqual('rgb(0,0,0)');
expect(gradient.colorStops[1].color).toEqual('rgb(255,255,255)');

expect(gradient.colorStops[0].opacity).toEqual(0);
expect(gradient.colorStops[0].color).toEqual('rgba(0,0,0,0)');
expect(gradient.colorStops[1].color).toEqual('rgba(255,255,255,1)');
});

test('fromElement without stop', () => {
Expand Down Expand Up @@ -392,7 +388,7 @@ describe('Gradient', () => {
element.appendChild(stop2);

const object = new FabricObject({ width: 100, height: 100 });
const gradient = fromElement(element, object, {});
const gradient = fromElement(element, object, {}) as Gradient<'radial'>;

expect(gradient instanceof Gradient).toBeTruthy();

Expand All @@ -406,8 +402,8 @@ describe('Gradient', () => {
expect(gradient.colorStops[0].offset).toEqual(1);
expect(gradient.colorStops[1].offset).toEqual(0);

expect(gradient.colorStops[0].color).toEqual('rgb(0,0,0)');
expect(gradient.colorStops[1].color).toEqual('rgb(255,255,255)');
expect(gradient.colorStops[0].color).toEqual('rgba(0,0,0,1)');
expect(gradient.colorStops[1].color).toEqual('rgba(255,255,255,1)');
});

test('fromElement radialGradient with transform', () => {
Expand Down Expand Up @@ -495,15 +491,10 @@ describe('Gradient', () => {
expect(gradient.colorStops[2].offset).toEqual(0.5);
expect(gradient.colorStops[3].offset).toEqual(0);

expect(gradient.colorStops[0].color).toEqual('rgb(255,0,0)');
expect(gradient.colorStops[1].color).toEqual('rgb(0,0,255)');
expect(gradient.colorStops[2].color).toEqual('rgb(0,0,0)');
expect(gradient.colorStops[3].color).toEqual('rgb(0,0,0)');

expect(gradient.colorStops[0].opacity).toEqual(0.5);
expect(gradient.colorStops[1].opacity).toEqual(0.9);
expect(gradient.colorStops[2].opacity).toEqual(1);
expect(gradient.colorStops[3].opacity).toEqual(1);
expect(gradient.colorStops[0].color).toEqual('rgba(255,0,0,0.5)');
expect(gradient.colorStops[1].color).toEqual('rgba(0,0,255,0.9)');
expect(gradient.colorStops[2].color).toEqual('rgba(0,0,0,1)');
expect(gradient.colorStops[3].color).toEqual('rgba(0,0,0,1)');
});

test('fromElement radialGradient colorStop attributes/styles', () => {
Expand Down Expand Up @@ -557,14 +548,9 @@ describe('Gradient', () => {
expect(gradient.colorStops[2].offset).toEqual(0.5);
expect(gradient.colorStops[3].offset).toEqual(0);

expect(gradient.colorStops[0].color).toEqual('rgb(255,0,0)');
expect(gradient.colorStops[1].color).toEqual('rgb(0,0,255)');
expect(gradient.colorStops[2].color).toEqual('rgb(0,0,0)');
expect(gradient.colorStops[3].color).toEqual('rgb(0,0,0)');

expect(gradient.colorStops[0].opacity).toEqual(0.5);
expect(gradient.colorStops[1].opacity).toEqual(0.9);
expect(gradient.colorStops[2].opacity).toEqual(1);
expect(gradient.colorStops[3].opacity).toEqual(1);
expect(gradient.colorStops[0].color).toEqual('rgba(255,0,0,0.5)');
expect(gradient.colorStops[1].color).toEqual('rgba(0,0,255,0.9)');
expect(gradient.colorStops[2].color).toEqual('rgba(0,0,0,1)');
expect(gradient.colorStops[3].color).toEqual('rgba(0,0,0,1)');
});
});
28 changes: 7 additions & 21 deletions src/gradient/Gradient.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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],
});
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe those can be sort correctly every time we add new.
Unsorted colorstops are often cause of strange bugs.
Canvas doesn't care much but SVGs or PDFs do.

}
return this;
Expand All @@ -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,
Expand Down Expand Up @@ -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`
);
});

Expand Down Expand Up @@ -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;
Expand Down
22 changes: 12 additions & 10 deletions src/gradient/parser/parseColorStops.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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
);

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(),
};
}

Expand Down
1 change: 0 additions & 1 deletion src/gradient/typedefs.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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> = {
Expand Down
Loading