fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-27 23:58:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

Port the color picker popover to a Rust-defined layout (#4102)

Browse Source 
* Break out VisualColorPickersInput.svelte

* Break out ColorComparisonInput.svelte and ColorPresetsInput.svelte

* Add backend definitions and plumbing for the 4 new widgets

* Port the ColorPicker.svelte layout and business logic to Rust

* Port more ColorComparisonInput.svelte logic to Rust

* Port more SpectrumInput.svelte logic to Rust

* Port more frontend logic to Rust

* Code review

* Code review

* Fix some CSS
This commit is contained in:
Keavon Chambers
2026-05-05 02:47:53 -07:00
committed by GitHub
parent 62203cb171
commit e59612c4ce
31 changed files with 2260 additions and 1333 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/utility-functions/colors.ts
-33
View File
@@ -1,4 +1,3 @@
import { sampleInterpolatedGradient } from "/wrapper/pkg/graphite_wasm_wrapper";
import type { Color, FillChoice, GradientStops } from "/wrapper/pkg/graphite_wasm_wrapper";
// Channels can have any range (0-1, 0-255, 0-100, 0-360) in the context they are being used in, these are just containers for the numbers
@@ -63,12 +62,6 @@ export function colorFromCSS(colorCode: string): Color | undefined {
return createColor(r / 255, g / 255, b / 255, a / 255);
}
export function colorEquals(c1: Color | undefined, c2: Color | undefined): boolean {
if (c1 === undefined && c2 === undefined) return true;
if (c1 === undefined || c2 === undefined) return false;
return Math.abs(c1.red - c2.red) < 1e-6 && Math.abs(c1.green - c2.green) < 1e-6 && Math.abs(c1.blue - c2.blue) < 1e-6 && Math.abs(c1.alpha - c2.alpha) < 1e-6;
}
export function colorToHexNoAlpha(color: Color): string {
const r = Math.round(color.red * 255)
.toString(16)
@@ -83,15 +76,6 @@ export function colorToHexNoAlpha(color: Color): string {
return `#${r}${g}${b}`;
}
export function colorToHexOptionalAlpha(color: Color): string {
const hex = colorToHexNoAlpha(color);
const a = Math.round(color.alpha * 255)
.toString(16)
.padStart(2, "0");
return a === "ff" ? hex : `${hex}${a}`;
}
export function colorToRgb255(color: Color): RGB {
return {
r: Math.round(color.red * 255),
@@ -205,23 +189,6 @@ export function isGradientStops(value: unknown): value is GradientStops {
return typeof value === "object" && value !== null && "position" in value && "midpoint" in value && "color" in value;
}
export function gradientToLinearGradientCSS(gradient: GradientStops): string {
if (gradient.position.length === 1) {
return `linear-gradient(to right, ${colorToHexOptionalAlpha(gradient.color[0])} 0%, ${colorToHexOptionalAlpha(gradient.color[0])} 100%)`;
}
const pieces = sampleInterpolatedGradient(new Float64Array(gradient.position), new Float64Array(gradient.midpoint), gradient.color, false);
return `linear-gradient(to right, ${pieces})`;
}
export function gradientFirstColor(gradient: GradientStops): Color | undefined {
return gradient.color[0];
}
export function gradientLastColor(gradient: GradientStops): Color | undefined {
return gradient.color[gradient.color.length - 1];
}
// FILL CHOICE UTILITY FUNCTIONS
export function fillChoiceColor(value: FillChoice): Color | undefined {