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

fix(color-picker): alpha-channel slider scope updates to reflect current opacity #8700

Merged
merged 9 commits into from
Feb 8, 2024
+19 −4
Merged

fix(color-picker): alpha-channel slider scope updates to reflect current opacity #8700

Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
92749d6
fix(color-picker): alpha-channel slider scope updates
Elijbet Feb 7, 2024
c98fbfe
cleanup
Elijbet Feb 7, 2024
d76bf68
replace sliderType argument with boolean applyAlpha, only apply check…
Elijbet Feb 7, 2024
afb7c34
Merge branch 'main' into elijbet/7761-update-color-picker-slider-scope
Elijbet Feb 7, 2024
fb37c29
remove SliderType from interfaces
Elijbet Feb 7, 2024
2a5b1b8
refactor and simplify
Elijbet Feb 8, 2024
a3f23a5
Merge branch 'main' into elijbet/7761-update-color-picker-slider-scope
Elijbet Feb 8, 2024
a7245a0
clean up
Elijbet Feb 8, 2024
4d9f710
Merge branch 'main' into elijbet/7761-update-color-picker-slider-scope
Elijbet Feb 8, 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
23 changes: 19 additions & 4 deletions packages/calcite-components/src/components/color-picker/color-picker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1382,7 +1382,7 @@ export class ColorPicker
this.colorFieldScopeTop = y;
});

this.drawThumb(this.colorFieldRenderingContext, radius, x, y, hsvColor);
this.drawThumb(this.colorFieldRenderingContext, radius, x, y, hsvColor, false);
}

private drawThumb(
Expand All @@ -1391,6 +1391,7 @@ export class ColorPicker
x: number,
y: number,
color: Color,
applyAlpha: boolean,
): void {
const startAngle = 0;
const endAngle = 2 * Math.PI;
Expand All @@ -1400,14 +1401,28 @@ export class ColorPicker
context.arc(x, y, radius, startAngle, endAngle);
context.fillStyle = "#fff";
context.fill();

context.strokeStyle = "rgba(0,0,0,0.3)";
context.lineWidth = outlineWidth;
context.stroke();

if (applyAlpha && color.alpha() < 1) {
const pattern = context.createPattern(this.getCheckeredBackgroundPattern(), "repeat");
context.beginPath();
context.arc(x, y, radius - 3, startAngle, endAngle);
context.fillStyle = pattern;
context.fill();
}

context.globalCompositeOperation = "source-atop";
Copy link
Member

Choose a reason for hiding this comment

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

Noice! I was not aware of this prop. Will need to add it to the toolbox. ✨🧰✨

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yeah, it's layering operations, photoshop style. Here is a playground: https://www.w3schools.com/jsref/playcanvas.php?filename=playcanvas_globalcompop&preval=source-atop


context.beginPath();
context.arc(x, y, radius - 3, startAngle, endAngle);
context.fillStyle = color.rgb().alpha(1).string();
const alpha = applyAlpha ? color.alpha() : 1;
context.fillStyle = color.rgb().alpha(alpha).string();
context.fill();

context.globalCompositeOperation = "source-over";
}

private drawActiveHueSliderColor(): void {
Expand All @@ -1434,7 +1449,7 @@ export class ColorPicker
this.hueScopeLeft = sliderBoundX;
});

this.drawThumb(this.hueSliderRenderingContext, radius, sliderBoundX, y, hsvColor);
this.drawThumb(this.hueSliderRenderingContext, radius, sliderBoundX, y, hsvColor, false);
}

private drawHueSlider(): void {
Expand Down Expand Up @@ -1589,7 +1604,7 @@ export class ColorPicker
this.opacityScopeLeft = sliderBoundX;
});

this.drawThumb(this.opacitySliderRenderingContext, radius, sliderBoundX, y, hsvColor);
this.drawThumb(this.opacitySliderRenderingContext, radius, sliderBoundX, y, hsvColor, true);
}

private getSliderBoundX(x: number, width: number, radius: number): number {
Expand Down
Loading