xt/color-q
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: xt:2c47369772a01a95d0625ffb755d2c638d934144
Branches Tags
xt:main xt:wasm-load
..
compare: xt:wasm-load
Branches Tags
xt:main xt:wasm-load

7 Commits
2c47369772 ... wasm-load

Author SHA1 Message Date
徐涛
2ddffe1b12 调整涉及WASM内结构体的实例化位置。 2025-02-10 16:43:30 +08:00
徐涛
3eae8116e7 更改WASM的引入方式。 2025-02-10 16:17:59 +08:00
徐涛
12e76b658e 调整首页描述。 2025-02-10 14:47:06 +08:00
徐涛
2ec3578e1c 修复或屏蔽编译错误。 2025-02-10 14:42:17 +08:00
徐涛
f944d48e1b 增加部分结构的构造函数。 2025-02-10 14:31:32 +08:00
徐涛
88e3d1f928 修正大部分的编译错误。 2025-02-10 14:28:34 +08:00
徐涛
2144cd548a 修正Vite设置。 2025-02-10 12:22:43 +08:00
70 changed files with 566 additions and 3369 deletions
Expand all files Collapse all files

BIN
bun.lockb
View File

Binary file not shown.

2
color-module/build
View File

@@ -1,2 +1,2 @@
#!/bin/bash
wasm-pack build --release --target web -d ../src/color_functions
wasm-pack build --release --target web -d ../color_functions

12
color-module/src/color_differ/cam16jch.rs
View File

@@ -12,6 +12,18 @@ pub struct HctDiffference {
pub lightness: Differ,
}
#[wasm_bindgen]
impl HctDiffference {
#[wasm_bindgen(constructor)]
pub fn new(hue: Differ, chroma: Differ, lightness: Differ) -> Self {
Self {
hue,
chroma,
lightness,
}
}
}
impl ColorDifference for Cam16Jch<f32> {
type Difference = HctDiffference;

12
color-module/src/color_differ/hsl.rs
View File

@@ -12,6 +12,18 @@ pub struct HSLDifference {
pub lightness: Differ,
}
#[wasm_bindgen]
impl HSLDifference {
#[wasm_bindgen(constructor)]
pub fn new(hue: Differ, saturation: Differ, lightness: Differ) -> Self {
Self {
hue,
saturation,
lightness,
}
}
}
impl ColorDifference for Hsl {
type Difference = HSLDifference;

8
color-module/src/color_differ/mod.rs
View File

@@ -13,6 +13,14 @@ pub struct Differ {
pub percent: f32,
}
#[wasm_bindgen]
impl Differ {
#[wasm_bindgen(constructor)]
pub fn new(delta: f32, percent: f32) -> Self {
Self { delta, percent }
}
}
pub trait ColorDifference {
type Difference;

12
color-module/src/color_differ/oklch.rs
View File

@@ -12,6 +12,18 @@ pub struct OklchDifference {
pub lightness: Differ,
}
#[wasm_bindgen]
impl OklchDifference {
#[wasm_bindgen(constructor)]
pub fn new(hue: Differ, chroma: Differ, lightness: Differ) -> Self {
Self {
hue,
chroma,
lightness,
}
}
}
impl ColorDifference for Oklch {
type Difference = OklchDifference;

8
color-module/src/color_differ/rgb.rs
View File

@@ -12,6 +12,14 @@ pub struct RGBDifference {
pub b: Differ,
}
#[wasm_bindgen]
impl RGBDifference {
#[wasm_bindgen(constructor)]
pub fn new(r: Differ, g: Differ, b: Differ) -> Self {
Self { r, g, b }
}
}
impl ColorDifference for Srgb {
type Difference = RGBDifference;

13
color-module/src/reversing.rs
View File

@@ -11,6 +11,19 @@ pub struct MixReversing {
pub average: f32,
}
#[wasm_bindgen]
impl MixReversing {
#[wasm_bindgen(constructor)]
pub fn new(r_factor: f32, g_factor: f32, b_factor: f32, average: f32) -> Self {
Self {
r_factor,
g_factor,
b_factor,
average,
}
}
}
impl MixReversing {
pub fn from_tint_rgb(basic_color: Rgb, mixed_result: Rgb) -> Self {
let r_factor = if basic_color.red == 1.0 {

15
index.html
View File

@@ -1,13 +1,18 @@
<!doctype html>
<html lang="en">
<head>
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head>
<body>
<meta name="description"
content="By transforming and selecting various color theories, freely design UI color combinations." />
<title>Color Lab</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</body>
</html>

1
package.json
View File

@@ -12,6 +12,7 @@
"dependencies": {
"@iconify/react": "^5.1.0",
"clsx": "^2.1.1",
"color-module": "./color_functions",
"dayjs": "^1.11.13",
"jotai": "^2.11.0",
"lodash-es": "^4.17.21",

5
src/ColorFunctionContext.tsx
View File

@@ -1,5 +1,5 @@
import init, * as funcs from 'color-module';
import { createContext, ReactNode, use, useEffect, useMemo, useState, useTransition } from 'react';
import init, * as funcs from './color_functions/color_module';
export type ColorFunctionContextType = {
colorFn: typeof funcs | null;
@@ -23,7 +23,7 @@ export function useColorFunction(): ColorFunctionContextType {
}
export function ColorFunctionProvider({ children }: WasmProviderProps) {
const [wasmInstance, setWasmInstance] = useState<Wasm.InitOutput | null>(null);
const [wasmInstance, setWasmInstance] = useState<typeof funcs | null>(null);
const [isPending, startTransition] = useTransition();
const [error, setError] = useState<Error | null>(null);
@@ -42,6 +42,7 @@ export function ColorFunctionProvider({ children }: WasmProviderProps) {
try {
await init();
setWasmInstance(funcs);
console.debug('[Load WASM]', 'Loaded');
} catch (e) {
console.error('[Load WASM]', e);
setError(e);

317
src/color_functions/color_module.d.ts vendored
View File

@@ -1,317 +0,0 @@
/* tslint:disable */
/* eslint-disable */
export function color_categories(): any;
export function search_color_cards(tag: string, category?: string | null): any;
export function generate_material_design_3_scheme(source_color: string, error_color: string, custom_colors: any): any;
export function generate_material_design_2_scheme(primary_color: string, secondary_color: string, error_color: string, custom_colors: any): any;
export function generate_q_scheme_automatically(primary_color: string, danger_color: string, success_color: string, warning_color: string, info_color: string, fg_color: string, bg_color: string, setting: SchemeSetting): any;
export function generate_q_scheme_manually(primary_color: string, secondary_color: string | null | undefined, tertiary_color: string | null | undefined, accent_color: string | null | undefined, danger_color: string, success_color: string, warning_color: string, info_color: string, fg_color: string, bg_color: string, setting: SchemeSetting): any;
export function generate_swatch_scheme(colors: SwatchEntry[], setting: SwatchSchemeSetting): any;
export function q_scheme_color_expanding_methods(): any;
export function q_scheme_wacg_settings(): any;
export function q_scheme_default_settings(): SchemeSetting;
export function shift_hue(color: string, degree: number): string;
export function analogous_30(color: string): string[];
export function analogous_60(color: string): string[];
export function complementary(color: string): string;
export function split_complementary(color: string): string[];
export function tetradic(color: string): string[];
export function triadic(color: string): string[];
export function represent_rgb(color: string): Uint8Array;
export function rgb_to_hex(r: number, g: number, b: number): string;
export function represent_hsl(color: string): Float32Array;
export function hsl_to_hex(h: number, s: number, l: number): string;
export function represent_lab(color: string): Float32Array;
export function lab_to_hex(l: number, a: number, b: number): string;
export function represent_oklch(color: string): Float32Array;
export function oklch_to_hex(l: number, c: number, h: number): string;
export function represent_hct(color: string): Float32Array;
export function hct_to_hex(hue: number, chroma: number, tone: number): string;
export function wacg_relative_contrast(fg_color: string, bg_color: string): number;
export function differ_in_rgb(color: string, other: string): RGBDifference;
export function relative_differ_in_rgb(color: string, other: string): RGBDifference;
export function differ_in_hsl(color: string, other: string): HSLDifference;
export function relative_differ_in_hsl(color: string, other: string): HSLDifference;
export function differ_in_hct(color: string, other: string): HctDiffference;
export function relative_differ_in_hct(color: string, other: string): HctDiffference;
export function differ_in_oklch(color: string, other: string): OklchDifference;
export function relative_differ_in_oklch(color: string, other: string): OklchDifference;
export function tint_scale(basic_color: string, mixed_color: string): MixReversing;
export function shade_scale(basic_color: string, mixed_color: string): MixReversing;
export function lighten(color: string, percent: number): string;
export function lighten_absolute(color: string, value: number): string;
export function darken(color: string, percent: number): string;
export function darken_absolute(color: string, value: number): string;
export function mix(color1: string, color2: string, percent: number): string;
export function tint(color: string, percent: number): string;
export function shade(color: string, percent: number): string;
export function generate_palette_from_color(reference_color: string, swatch_amount: number, minimum_lightness: number, maximum_lightness: number, use_reference_color?: boolean | null, reference_color_bias?: number | null): string[];
export function swatch_scheme_default_settings(): SwatchSchemeSetting;
export function series(color: string, expand_amount: number, step: number): string[];
export function tonal_lighten_series(color: string, expand_amount: number, step: number): string[];
export function tonal_darken_series(color: string, expand_amount: number, step: number): string[];
export enum ColorExpand {
Complementary = 0,
Analogous = 1,
AnalogousAndComplementary = 2,
Triadic = 3,
SplitComplementary = 4,
Tetradic = 5,
Square = 6,
}
export enum WACGSetting {
Fixed = 0,
AutomaticAA = 1,
AutomaticAAA = 2,
HighContrast = 3,
}
export class ColorShifting {
free(): void;
constructor(chroma: number, lightness: number);
toJsValue(): any;
chroma: number;
lightness: number;
}
export class Differ {
private constructor();
free(): void;
delta: number;
percent: number;
}
export class HSLDifference {
private constructor();
free(): void;
hue: Differ;
saturation: Differ;
lightness: Differ;
}
export class HctDiffference {
private constructor();
free(): void;
hue: Differ;
chroma: Differ;
lightness: Differ;
}
export class MixReversing {
private constructor();
free(): void;
r_factor: number;
g_factor: number;
b_factor: number;
average: number;
}
export class OklchDifference {
private constructor();
free(): void;
hue: Differ;
chroma: Differ;
lightness: Differ;
}
export class RGBDifference {
private constructor();
free(): void;
r: Differ;
g: Differ;
b: Differ;
}
export class SchemeSetting {
free(): void;
constructor(hover: ColorShifting, active: ColorShifting, focus: ColorShifting, disabled: ColorShifting, dark_convert: ColorShifting, expand_method: ColorExpand, wacg_follows: WACGSetting);
toJsValue(): any;
hover: ColorShifting;
active: ColorShifting;
focus: ColorShifting;
disabled: ColorShifting;
dark_convert: ColorShifting;
expand_method: ColorExpand;
wacg_follows: WACGSetting;
}
export class SwatchEntry {
free(): void;
constructor(name: string, color: string);
toJsValue(): any;
name: string;
color: string;
}
export class SwatchSchemeSetting {
free(): void;
constructor(amount: number, min_lightness: number, max_lightness: number, include_primary: boolean, dark_convert: ColorShifting);
toJsValue(): any;
amount: number;
min_lightness: number;
max_lightness: number;
include_primary: boolean;
dark_convert: ColorShifting;
}
export type InitInput = RequestInfo | URL | Response | BufferSource | WebAssembly.Module;
export interface InitOutput {
readonly memory: WebAssembly.Memory;
readonly color_categories: () => [number, number, number];
readonly search_color_cards: (a: number, b: number, c: number, d: number) => [number, number, number];
readonly __wbg_colorshifting_free: (a: number, b: number) => void;
readonly __wbg_get_colorshifting_chroma: (a: number) => number;
readonly __wbg_set_colorshifting_chroma: (a: number, b: number) => void;
readonly __wbg_get_colorshifting_lightness: (a: number) => number;
readonly __wbg_set_colorshifting_lightness: (a: number, b: number) => void;
readonly colorshifting_new: (a: number, b: number) => number;
readonly colorshifting_toJsValue: (a: number) => [number, number, number];
readonly __wbg_schemesetting_free: (a: number, b: number) => void;
readonly __wbg_get_schemesetting_hover: (a: number) => number;
readonly __wbg_set_schemesetting_hover: (a: number, b: number) => void;
readonly __wbg_get_schemesetting_active: (a: number) => number;
readonly __wbg_set_schemesetting_active: (a: number, b: number) => void;
readonly __wbg_get_schemesetting_focus: (a: number) => number;
readonly __wbg_set_schemesetting_focus: (a: number, b: number) => void;
readonly __wbg_get_schemesetting_disabled: (a: number) => number;
readonly __wbg_set_schemesetting_disabled: (a: number, b: number) => void;
readonly __wbg_get_schemesetting_dark_convert: (a: number) => number;
readonly __wbg_set_schemesetting_dark_convert: (a: number, b: number) => void;
readonly __wbg_get_schemesetting_expand_method: (a: number) => number;
readonly __wbg_set_schemesetting_expand_method: (a: number, b: number) => void;
readonly __wbg_get_schemesetting_wacg_follows: (a: number) => number;
readonly __wbg_set_schemesetting_wacg_follows: (a: number, b: number) => void;
readonly schemesetting_new: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => number;
readonly schemesetting_toJsValue: (a: number) => [number, number, number];
readonly generate_material_design_3_scheme: (a: number, b: number, c: number, d: number, e: any) => [number, number, number];
readonly generate_material_design_2_scheme: (a: number, b: number, c: number, d: number, e: number, f: number, g: any) => [number, number, number];
readonly generate_q_scheme_automatically: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number, i: number, j: number, k: number, l: number, m: number, n: number, o: number) => [number, number, number];
readonly generate_q_scheme_manually: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number, i: number, j: number, k: number, l: number, m: number, n: number, o: number, p: number, q: number, r: number, s: number, t: number, u: number) => [number, number, number];
readonly generate_swatch_scheme: (a: number, b: number, c: number) => [number, number, number];
readonly __wbg_oklchdifference_free: (a: number, b: number) => void;
readonly __wbg_get_oklchdifference_hue: (a: number) => number;
readonly __wbg_set_oklchdifference_hue: (a: number, b: number) => void;
readonly __wbg_get_oklchdifference_chroma: (a: number) => number;
readonly __wbg_set_oklchdifference_chroma: (a: number, b: number) => void;
readonly __wbg_get_oklchdifference_lightness: (a: number) => number;
readonly __wbg_set_oklchdifference_lightness: (a: number, b: number) => void;
readonly __wbg_mixreversing_free: (a: number, b: number) => void;
readonly __wbg_get_mixreversing_r_factor: (a: number) => number;
readonly __wbg_set_mixreversing_r_factor: (a: number, b: number) => void;
readonly __wbg_get_mixreversing_g_factor: (a: number) => number;
readonly __wbg_set_mixreversing_g_factor: (a: number, b: number) => void;
readonly __wbg_get_mixreversing_b_factor: (a: number) => number;
readonly __wbg_set_mixreversing_b_factor: (a: number, b: number) => void;
readonly __wbg_get_mixreversing_average: (a: number) => number;
readonly __wbg_set_mixreversing_average: (a: number, b: number) => void;
readonly q_scheme_color_expanding_methods: () => [number, number, number];
readonly q_scheme_wacg_settings: () => [number, number, number];
readonly q_scheme_default_settings: () => number;
readonly __wbg_differ_free: (a: number, b: number) => void;
readonly __wbg_get_differ_delta: (a: number) => number;
readonly __wbg_set_differ_delta: (a: number, b: number) => void;
readonly __wbg_get_differ_percent: (a: number) => number;
readonly __wbg_set_differ_percent: (a: number, b: number) => void;
readonly shift_hue: (a: number, b: number, c: number) => [number, number, number, number];
readonly analogous_30: (a: number, b: number) => [number, number, number, number];
readonly analogous_60: (a: number, b: number) => [number, number, number, number];
readonly complementary: (a: number, b: number) => [number, number, number, number];
readonly split_complementary: (a: number, b: number) => [number, number, number, number];
readonly tetradic: (a: number, b: number) => [number, number, number, number];
readonly triadic: (a: number, b: number) => [number, number, number, number];
readonly represent_rgb: (a: number, b: number) => [number, number, number, number];
readonly rgb_to_hex: (a: number, b: number, c: number) => [number, number, number, number];
readonly represent_hsl: (a: number, b: number) => [number, number, number, number];
readonly hsl_to_hex: (a: number, b: number, c: number) => [number, number, number, number];
readonly represent_lab: (a: number, b: number) => [number, number, number, number];
readonly lab_to_hex: (a: number, b: number, c: number) => [number, number, number, number];
readonly represent_oklch: (a: number, b: number) => [number, number, number, number];
readonly oklch_to_hex: (a: number, b: number, c: number) => [number, number, number, number];
readonly represent_hct: (a: number, b: number) => [number, number, number, number];
readonly hct_to_hex: (a: number, b: number, c: number) => [number, number, number, number];
readonly wacg_relative_contrast: (a: number, b: number, c: number, d: number) => [number, number, number];
readonly __wbg_hctdiffference_free: (a: number, b: number) => void;
readonly __wbg_get_hctdiffference_hue: (a: number) => number;
readonly __wbg_set_hctdiffference_hue: (a: number, b: number) => void;
readonly __wbg_get_hctdiffference_chroma: (a: number) => number;
readonly __wbg_set_hctdiffference_chroma: (a: number, b: number) => void;
readonly __wbg_get_hctdiffference_lightness: (a: number) => number;
readonly __wbg_set_hctdiffference_lightness: (a: number, b: number) => void;
readonly differ_in_rgb: (a: number, b: number, c: number, d: number) => [number, number, number];
readonly relative_differ_in_rgb: (a: number, b: number, c: number, d: number) => [number, number, number];
readonly differ_in_hsl: (a: number, b: number, c: number, d: number) => [number, number, number];
readonly relative_differ_in_hsl: (a: number, b: number, c: number, d: number) => [number, number, number];
readonly differ_in_hct: (a: number, b: number, c: number, d: number) => [number, number, number];
readonly relative_differ_in_hct: (a: number, b: number, c: number, d: number) => [number, number, number];
readonly differ_in_oklch: (a: number, b: number, c: number, d: number) => [number, number, number];
readonly relative_differ_in_oklch: (a: number, b: number, c: number, d: number) => [number, number, number];
readonly tint_scale: (a: number, b: number, c: number, d: number) => [number, number, number];
readonly shade_scale: (a: number, b: number, c: number, d: number) => [number, number, number];
readonly __wbg_hsldifference_free: (a: number, b: number) => void;
readonly __wbg_get_hsldifference_hue: (a: number) => number;
readonly __wbg_set_hsldifference_hue: (a: number, b: number) => void;
readonly __wbg_get_hsldifference_saturation: (a: number) => number;
readonly __wbg_set_hsldifference_saturation: (a: number, b: number) => void;
readonly __wbg_get_hsldifference_lightness: (a: number) => number;
readonly __wbg_set_hsldifference_lightness: (a: number, b: number) => void;
readonly lighten: (a: number, b: number, c: number) => [number, number, number, number];
readonly lighten_absolute: (a: number, b: number, c: number) => [number, number, number, number];
readonly darken: (a: number, b: number, c: number) => [number, number, number, number];
readonly darken_absolute: (a: number, b: number, c: number) => [number, number, number, number];
readonly mix: (a: number, b: number, c: number, d: number, e: number) => [number, number, number, number];
readonly tint: (a: number, b: number, c: number) => [number, number, number, number];
readonly shade: (a: number, b: number, c: number) => [number, number, number, number];
readonly __wbg_rgbdifference_free: (a: number, b: number) => void;
readonly __wbg_get_rgbdifference_r: (a: number) => number;
readonly __wbg_set_rgbdifference_r: (a: number, b: number) => void;
readonly __wbg_get_rgbdifference_g: (a: number) => number;
readonly __wbg_set_rgbdifference_g: (a: number, b: number) => void;
readonly __wbg_get_rgbdifference_b: (a: number) => number;
readonly __wbg_set_rgbdifference_b: (a: number, b: number) => void;
readonly generate_palette_from_color: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => [number, number, number, number];
readonly __wbg_swatchschemesetting_free: (a: number, b: number) => void;
readonly __wbg_get_swatchschemesetting_amount: (a: number) => number;
readonly __wbg_set_swatchschemesetting_amount: (a: number, b: number) => void;
readonly __wbg_get_swatchschemesetting_min_lightness: (a: number) => number;
readonly __wbg_set_swatchschemesetting_min_lightness: (a: number, b: number) => void;
readonly __wbg_get_swatchschemesetting_max_lightness: (a: number) => number;
readonly __wbg_set_swatchschemesetting_max_lightness: (a: number, b: number) => void;
readonly __wbg_get_swatchschemesetting_include_primary: (a: number) => number;
readonly __wbg_set_swatchschemesetting_include_primary: (a: number, b: number) => void;
readonly __wbg_get_swatchschemesetting_dark_convert: (a: number) => number;
readonly __wbg_set_swatchschemesetting_dark_convert: (a: number, b: number) => void;
readonly swatchschemesetting_new: (a: number, b: number, c: number, d: number, e: number) => number;
readonly swatchschemesetting_toJsValue: (a: number) => [number, number, number];
readonly __wbg_swatchentry_free: (a: number, b: number) => void;
readonly __wbg_get_swatchentry_name: (a: number) => [number, number];
readonly __wbg_set_swatchentry_name: (a: number, b: number, c: number) => void;
readonly __wbg_get_swatchentry_color: (a: number) => [number, number];
readonly __wbg_set_swatchentry_color: (a: number, b: number, c: number) => void;
readonly swatchentry_new: (a: number, b: number, c: number, d: number) => number;
readonly swatchentry_toJsValue: (a: number) => [number, number, number];
readonly swatch_scheme_default_settings: () => number;
readonly series: (a: number, b: number, c: number, d: number) => [number, number, number, number];
readonly tonal_lighten_series: (a: number, b: number, c: number, d: number) => [number, number, number, number];
readonly tonal_darken_series: (a: number, b: number, c: number, d: number) => [number, number, number, number];
readonly __wbindgen_malloc: (a: number, b: number) => number;
readonly __wbindgen_realloc: (a: number, b: number, c: number, d: number) => number;
readonly __wbindgen_exn_store: (a: number) => void;
readonly __externref_table_alloc: () => number;
readonly __wbindgen_export_4: WebAssembly.Table;
readonly __externref_table_dealloc: (a: number) => void;
readonly __wbindgen_free: (a: number, b: number, c: number) => void;
readonly __externref_drop_slice: (a: number, b: number) => void;
readonly __wbindgen_start: () => void;
}
export type SyncInitInput = BufferSource | WebAssembly.Module;
/**
* Instantiates the given `module`, which can either be bytes or
* a precompiled `WebAssembly.Module`.
*
* @param {{ module: SyncInitInput }} module - Passing `SyncInitInput` directly is deprecated.
*
* @returns {InitOutput}
*/
export function initSync(module: { module: SyncInitInput } | SyncInitInput): InitOutput;
/**
* If `module_or_path` is {RequestInfo} or {URL}, makes a request and
* for everything else, calls `WebAssembly.instantiate` directly.
*
* @param {{ module_or_path: InitInput | Promise<InitInput> }} module_or_path - Passing `InitInput` directly is deprecated.
*
* @returns {Promise<InitOutput>}
*/
export default function __wbg_init (module_or_path?: { module_or_path: InitInput | Promise<InitInput> } | InitInput | Promise<InitInput>): Promise<InitOutput>;

2389
src/color_functions/color_module.js
View File

File diff suppressed because it is too large Load Diff

BIN
src/color_functions/color_module_bg.wasm
View File

Binary file not shown.

148
src/color_functions/color_module_bg.wasm.d.ts vendored
View File

@@ -1,148 +0,0 @@
/* tslint:disable */
/* eslint-disable */
export const memory: WebAssembly.Memory;
export const color_categories: () => [number, number, number];
export const search_color_cards: (a: number, b: number, c: number, d: number) => [number, number, number];
export const __wbg_colorshifting_free: (a: number, b: number) => void;
export const __wbg_get_colorshifting_chroma: (a: number) => number;
export const __wbg_set_colorshifting_chroma: (a: number, b: number) => void;
export const __wbg_get_colorshifting_lightness: (a: number) => number;
export const __wbg_set_colorshifting_lightness: (a: number, b: number) => void;
export const colorshifting_new: (a: number, b: number) => number;
export const colorshifting_toJsValue: (a: number) => [number, number, number];
export const __wbg_schemesetting_free: (a: number, b: number) => void;
export const __wbg_get_schemesetting_hover: (a: number) => number;
export const __wbg_set_schemesetting_hover: (a: number, b: number) => void;
export const __wbg_get_schemesetting_active: (a: number) => number;
export const __wbg_set_schemesetting_active: (a: number, b: number) => void;
export const __wbg_get_schemesetting_focus: (a: number) => number;
export const __wbg_set_schemesetting_focus: (a: number, b: number) => void;
export const __wbg_get_schemesetting_disabled: (a: number) => number;
export const __wbg_set_schemesetting_disabled: (a: number, b: number) => void;
export const __wbg_get_schemesetting_dark_convert: (a: number) => number;
export const __wbg_set_schemesetting_dark_convert: (a: number, b: number) => void;
export const __wbg_get_schemesetting_expand_method: (a: number) => number;
export const __wbg_set_schemesetting_expand_method: (a: number, b: number) => void;
export const __wbg_get_schemesetting_wacg_follows: (a: number) => number;
export const __wbg_set_schemesetting_wacg_follows: (a: number, b: number) => void;
export const schemesetting_new: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => number;
export const schemesetting_toJsValue: (a: number) => [number, number, number];
export const generate_material_design_3_scheme: (a: number, b: number, c: number, d: number, e: any) => [number, number, number];
export const generate_material_design_2_scheme: (a: number, b: number, c: number, d: number, e: number, f: number, g: any) => [number, number, number];
export const generate_q_scheme_automatically: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number, i: number, j: number, k: number, l: number, m: number, n: number, o: number) => [number, number, number];
export const generate_q_scheme_manually: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number, i: number, j: number, k: number, l: number, m: number, n: number, o: number, p: number, q: number, r: number, s: number, t: number, u: number) => [number, number, number];
export const generate_swatch_scheme: (a: number, b: number, c: number) => [number, number, number];
export const __wbg_oklchdifference_free: (a: number, b: number) => void;
export const __wbg_get_oklchdifference_hue: (a: number) => number;
export const __wbg_set_oklchdifference_hue: (a: number, b: number) => void;
export const __wbg_get_oklchdifference_chroma: (a: number) => number;
export const __wbg_set_oklchdifference_chroma: (a: number, b: number) => void;
export const __wbg_get_oklchdifference_lightness: (a: number) => number;
export const __wbg_set_oklchdifference_lightness: (a: number, b: number) => void;
export const __wbg_mixreversing_free: (a: number, b: number) => void;
export const __wbg_get_mixreversing_r_factor: (a: number) => number;
export const __wbg_set_mixreversing_r_factor: (a: number, b: number) => void;
export const __wbg_get_mixreversing_g_factor: (a: number) => number;
export const __wbg_set_mixreversing_g_factor: (a: number, b: number) => void;
export const __wbg_get_mixreversing_b_factor: (a: number) => number;
export const __wbg_set_mixreversing_b_factor: (a: number, b: number) => void;
export const __wbg_get_mixreversing_average: (a: number) => number;
export const __wbg_set_mixreversing_average: (a: number, b: number) => void;
export const q_scheme_color_expanding_methods: () => [number, number, number];
export const q_scheme_wacg_settings: () => [number, number, number];
export const q_scheme_default_settings: () => number;
export const __wbg_differ_free: (a: number, b: number) => void;
export const __wbg_get_differ_delta: (a: number) => number;
export const __wbg_set_differ_delta: (a: number, b: number) => void;
export const __wbg_get_differ_percent: (a: number) => number;
export const __wbg_set_differ_percent: (a: number, b: number) => void;
export const shift_hue: (a: number, b: number, c: number) => [number, number, number, number];
export const analogous_30: (a: number, b: number) => [number, number, number, number];
export const analogous_60: (a: number, b: number) => [number, number, number, number];
export const complementary: (a: number, b: number) => [number, number, number, number];
export const split_complementary: (a: number, b: number) => [number, number, number, number];
export const tetradic: (a: number, b: number) => [number, number, number, number];
export const triadic: (a: number, b: number) => [number, number, number, number];
export const represent_rgb: (a: number, b: number) => [number, number, number, number];
export const rgb_to_hex: (a: number, b: number, c: number) => [number, number, number, number];
export const represent_hsl: (a: number, b: number) => [number, number, number, number];
export const hsl_to_hex: (a: number, b: number, c: number) => [number, number, number, number];
export const represent_lab: (a: number, b: number) => [number, number, number, number];
export const lab_to_hex: (a: number, b: number, c: number) => [number, number, number, number];
export const represent_oklch: (a: number, b: number) => [number, number, number, number];
export const oklch_to_hex: (a: number, b: number, c: number) => [number, number, number, number];
export const represent_hct: (a: number, b: number) => [number, number, number, number];
export const hct_to_hex: (a: number, b: number, c: number) => [number, number, number, number];
export const wacg_relative_contrast: (a: number, b: number, c: number, d: number) => [number, number, number];
export const __wbg_hctdiffference_free: (a: number, b: number) => void;
export const __wbg_get_hctdiffference_hue: (a: number) => number;
export const __wbg_set_hctdiffference_hue: (a: number, b: number) => void;
export const __wbg_get_hctdiffference_chroma: (a: number) => number;
export const __wbg_set_hctdiffference_chroma: (a: number, b: number) => void;
export const __wbg_get_hctdiffference_lightness: (a: number) => number;
export const __wbg_set_hctdiffference_lightness: (a: number, b: number) => void;
export const differ_in_rgb: (a: number, b: number, c: number, d: number) => [number, number, number];
export const relative_differ_in_rgb: (a: number, b: number, c: number, d: number) => [number, number, number];
export const differ_in_hsl: (a: number, b: number, c: number, d: number) => [number, number, number];
export const relative_differ_in_hsl: (a: number, b: number, c: number, d: number) => [number, number, number];
export const differ_in_hct: (a: number, b: number, c: number, d: number) => [number, number, number];
export const relative_differ_in_hct: (a: number, b: number, c: number, d: number) => [number, number, number];
export const differ_in_oklch: (a: number, b: number, c: number, d: number) => [number, number, number];
export const relative_differ_in_oklch: (a: number, b: number, c: number, d: number) => [number, number, number];
export const tint_scale: (a: number, b: number, c: number, d: number) => [number, number, number];
export const shade_scale: (a: number, b: number, c: number, d: number) => [number, number, number];
export const __wbg_hsldifference_free: (a: number, b: number) => void;
export const __wbg_get_hsldifference_hue: (a: number) => number;
export const __wbg_set_hsldifference_hue: (a: number, b: number) => void;
export const __wbg_get_hsldifference_saturation: (a: number) => number;
export const __wbg_set_hsldifference_saturation: (a: number, b: number) => void;
export const __wbg_get_hsldifference_lightness: (a: number) => number;
export const __wbg_set_hsldifference_lightness: (a: number, b: number) => void;
export const lighten: (a: number, b: number, c: number) => [number, number, number, number];
export const lighten_absolute: (a: number, b: number, c: number) => [number, number, number, number];
export const darken: (a: number, b: number, c: number) => [number, number, number, number];
export const darken_absolute: (a: number, b: number, c: number) => [number, number, number, number];
export const mix: (a: number, b: number, c: number, d: number, e: number) => [number, number, number, number];
export const tint: (a: number, b: number, c: number) => [number, number, number, number];
export const shade: (a: number, b: number, c: number) => [number, number, number, number];
export const __wbg_rgbdifference_free: (a: number, b: number) => void;
export const __wbg_get_rgbdifference_r: (a: number) => number;
export const __wbg_set_rgbdifference_r: (a: number, b: number) => void;
export const __wbg_get_rgbdifference_g: (a: number) => number;
export const __wbg_set_rgbdifference_g: (a: number, b: number) => void;
export const __wbg_get_rgbdifference_b: (a: number) => number;
export const __wbg_set_rgbdifference_b: (a: number, b: number) => void;
export const generate_palette_from_color: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => [number, number, number, number];
export const __wbg_swatchschemesetting_free: (a: number, b: number) => void;
export const __wbg_get_swatchschemesetting_amount: (a: number) => number;
export const __wbg_set_swatchschemesetting_amount: (a: number, b: number) => void;
export const __wbg_get_swatchschemesetting_min_lightness: (a: number) => number;
export const __wbg_set_swatchschemesetting_min_lightness: (a: number, b: number) => void;
export const __wbg_get_swatchschemesetting_max_lightness: (a: number) => number;
export const __wbg_set_swatchschemesetting_max_lightness: (a: number, b: number) => void;
export const __wbg_get_swatchschemesetting_include_primary: (a: number) => number;
export const __wbg_set_swatchschemesetting_include_primary: (a: number, b: number) => void;
export const __wbg_get_swatchschemesetting_dark_convert: (a: number) => number;
export const __wbg_set_swatchschemesetting_dark_convert: (a: number, b: number) => void;
export const swatchschemesetting_new: (a: number, b: number, c: number, d: number, e: number) => number;
export const swatchschemesetting_toJsValue: (a: number) => [number, number, number];
export const __wbg_swatchentry_free: (a: number, b: number) => void;
export const __wbg_get_swatchentry_name: (a: number) => [number, number];
export const __wbg_set_swatchentry_name: (a: number, b: number, c: number) => void;
export const __wbg_get_swatchentry_color: (a: number) => [number, number];
export const __wbg_set_swatchentry_color: (a: number, b: number, c: number) => void;
export const swatchentry_new: (a: number, b: number, c: number, d: number) => number;
export const swatchentry_toJsValue: (a: number) => [number, number, number];
export const swatch_scheme_default_settings: () => number;
export const series: (a: number, b: number, c: number, d: number) => [number, number, number, number];
export const tonal_lighten_series: (a: number, b: number, c: number, d: number) => [number, number, number, number];
export const tonal_darken_series: (a: number, b: number, c: number, d: number) => [number, number, number, number];
export const __wbindgen_malloc: (a: number, b: number) => number;
export const __wbindgen_realloc: (a: number, b: number, c: number, d: number) => number;
export const __wbindgen_exn_store: (a: number) => void;
export const __externref_table_alloc: () => number;
export const __wbindgen_export_4: WebAssembly.Table;
export const __externref_table_dealloc: (a: number) => void;
export const __wbindgen_free: (a: number, b: number, c: number) => void;
export const __externref_drop_slice: (a: number, b: number) => void;
export const __wbindgen_start: () => void;

15
src/color_functions/package.json
View File

@@ -1,15 +0,0 @@
{
"name": "color-module",
"type": "module",
"version": "0.1.0",
"files": [
"color_module_bg.wasm",
"color_module.js",
"color_module.d.ts"
],
"main": "color_module.js",
"types": "color_module.d.ts",
"sideEffects": [
"./snippets/*"
]
}

2
src/components/ActionIcon.tsx
View File

@@ -1,6 +1,6 @@
import { Icon, IconProps } from '@iconify/react/dist/iconify.js';
import cx from 'clsx';
import { MouseEventHandler, useCallback } from 'react';
import { MouseEvent, MouseEventHandler, useCallback } from 'react';
import styles from './ActionIcon.module.css';
type ActionIconProps = {

2
src/components/ColorComponentInput.tsx
View File

@@ -87,7 +87,7 @@ export function ColorComponentInput({ color, onChange }: ColorComponentInputProp
}
};
const updateH = (evt: ChangeEvent<HTMLInputElement>) => {
const value = parseInt(evt.target.value, 10);
let value = parseInt(evt.target.value, 10);
if (value > 360) {
value -= 360;
}

2
src/components/ColorRangePicker.tsx
View File

@@ -28,7 +28,7 @@ export function ColorRangePicker({
}: ColorRangePickerProps) {
const [pickerValue, setPickerValue] = useState(value);
const handlePickerChange = (evt: ChangeEvent<HTMLInputElement>) => {
const value = evt.target.value as number;
const value = Number(evt.target.value);
setPickerValue(valueProcess(value));
onChange?.(valueProcess(value));
};

2
src/components/EditableTitle.tsx
View File

@@ -4,7 +4,7 @@ import { useRef, useState } from 'react';
import styles from './EditableTitle.module.css';
type EditableTitleProps = {
title: string;
title?: string;
onChange?: (newTitle: string) => void;
};

2
src/components/FloatColorPicker.tsx
View File

@@ -6,7 +6,7 @@ import styles from './FloatColorPicker.module.css';
type FloatColorPickerProps = {
name?: string;
color?: string;
color?: string | null;
onPick?: (color: string | null | undefined) => void;
};

1
src/components/HSegmentedControl.tsx
View File

@@ -52,6 +52,7 @@ export function HSegmentedControl({
<div
key={`${index}_${value}`}
className={cx(styles.option, isEqual(selected, value) && styles.selected)}
//@ts-expect-error TS2322
ref={(el) => (optionsRef.current[index] = el!)}
onClick={() => handleSelectAction(value, index)}>
{label}

2
src/components/LabeledPicker.tsx
View File

@@ -26,7 +26,7 @@ export function LabeledPicker({
}: LabeledPickerProps) {
const [pickerValue, setPickerValue] = useState(value ?? min);
const handlePickerChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const value = event.target.value as number;
const value = Number(event.target.value);
setPickerValue(value);
onChange?.(value);
};

21
src/components/Notifications.tsx
View File

@@ -118,7 +118,7 @@ type ToastProps = {
icon?: string;
duration?: ToastDuration;
ref: RefObject<HTMLDivElement>;
closeAction: () => void;
closeAction: (tid?: string) => void;
};
const Toast = ({
kind,
@@ -157,7 +157,7 @@ export function useNotification() {
type NotificationElement = {
id: string;
element: ReactNode;
ref: RefObject<ReactNode>;
ref: RefObject<ReactNode | HTMLDivElement>;
};
type NotificationsProps = {
defaultDuration?: number;
@@ -184,7 +184,7 @@ export function Notifications({
duration?: number,
) => {
const id = v4();
const ref = createRef(null);
const ref = createRef<ReactNode | HTMLDivElement>();
const newNotify = (
<Notification
kind={kind}
@@ -194,6 +194,7 @@ export function Notifications({
message={message}
duration={duration ?? defaultDuration}
closeAction={removeNotification}
//@ts-expect-error TS2322
ref={ref}
/>
);
@@ -207,14 +208,9 @@ export function Notifications({
setToasts((prev) => filter(prev, (n) => !isEqual(n.id, id)));
}, []);
const showToast = useCallback(
(
kind: NotificationType,
message?: string,
icon?: IconifyIconProps['icon'],
duration?: ToastDuration,
) => {
(kind: NotificationType, message?: string, icon?: string, duration?: ToastDuration) => {
const id = v4();
const ref = createRef(null);
const ref = createRef<HTMLDivElement>();
const newToast = (
<Toast
kind={kind}
@@ -238,9 +234,6 @@ export function Notifications({
value={{
addNotification,
removeNotification,
showDialog: () => '',
showModalDialog: () => '',
closeDialog: () => {},
showToast,
}}>
{children}
@@ -250,6 +243,7 @@ export function Notifications({
{notifications.slice(0, maxNotifications).map(({ id, element, ref }) => (
<CSSTransition
key={id}
//@ts-expect-error TS2322
nodeRef={ref}
unmountOnExit
timeout={500}
@@ -271,6 +265,7 @@ export function Notifications({
{toasts.slice(0, 1).map(({ id, element, ref }) => (
<CSSTransition
key={id}
//@ts-expect-error TS2322
nodeRef={ref}
unmountOnExit
timeout={500}

20
src/components/ScrollArea.tsx
View File

@@ -1,5 +1,5 @@
import { clamp } from 'lodash-es';
import { RefObject, useEffect, useRef, useState } from 'react';
import { MouseEvent, RefObject, useEffect, useRef, useState, WheelEvent } from 'react';
import styles from './ScrollArea.module.css';
type ScrollBarProps = {
@@ -12,10 +12,12 @@ function VerticalScrollBar({ containerRef }: ScrollBarProps) {
const thumbRef = useRef<HTMLDivElement | null>(null);
const handleMouseDown = (evt: MouseEvent) => {
evt.preventDefault();
//@ts-expect-error TS2769
document.addEventListener('mousemove', handleMouseMove);
//@ts-expect-error TS2769
document.addEventListener('mouseup', handleMouseUp);
};
const handleMouseMove = (evt: MouseEvent) => {
const handleMouseMove = (evt: MouseEvent<HTMLDivElement>) => {
evt.preventDefault();
const container = containerRef?.current;
const scrollbar = trackRef.current;
@@ -34,7 +36,9 @@ function VerticalScrollBar({ containerRef }: ScrollBarProps) {
};
const handleMouseUp = (evt: MouseEvent) => {
evt.preventDefault();
//@ts-expect-error TS2769
document.removeEventListener('mousemove', handleMouseMove);
//@ts-expect-error TS2769
document.removeEventListener('mouseup', handleMouseUp);
};
@@ -77,7 +81,9 @@ function HorizontalScrollBar({ containerRef }: ScrollBarProps) {
const thumbRef = useRef<HTMLDivElement | null>(null);
const handleMouseDown = (evt: MouseEvent) => {
evt.preventDefault();
//@ts-expect-error TS2769
document.addEventListener('mousemove', handleMouseMove);
//@ts-expect-error TS2769
document.addEventListener('mouseup', handleMouseUp);
};
const handleMouseMove = (evt: MouseEvent) => {
@@ -99,7 +105,9 @@ function HorizontalScrollBar({ containerRef }: ScrollBarProps) {
};
const handleMouseUp = (evt: MouseEvent) => {
evt.preventDefault();
//@ts-expect-error TS2769
document.removeEventListener('mousemove', handleMouseMove);
//@ts-expect-error TS2769
document.removeEventListener('mouseup', handleMouseUp);
};
@@ -129,7 +137,7 @@ function HorizontalScrollBar({ containerRef }: ScrollBarProps) {
className={styles.h_thumb}
ref={thumbRef}
style={{ left: thumbPos }}
onMouseDown={handleMouseDown}
onMouseDown={(e) => handleMouseDown(e)}
/>
</div>
);
@@ -148,10 +156,10 @@ export function ScrollArea({
enableY = false,
normalizedScroll = false,
}: ScrollAreaProps) {
const scrollContainerRef = useRef<HTMLDivElement>(null);
const scrollContainerRef = useRef<HTMLDivElement | null>(null);
const [xScrollNeeded, setXScrollNeeded] = useState(false);
const [yScrollNeeded, setYScrollNeeded] = useState(false);
const handleWheel = (evt: WheelEvent) => {
const handleWheel = (evt: WheelEvent<HTMLDivElement>) => {
const container = scrollContainerRef?.current;
if (enableY && container) {
const delta = evt.deltaY;
@@ -177,7 +185,7 @@ export function ScrollArea({
return (
<div className={styles.scroll_area}>
<div className={styles.content} ref={scrollContainerRef} onWheel={handleWheel}>
<div className={styles.content} ref={scrollContainerRef} onWheel={(e) => handleWheel(e)}>
{children}
</div>
{enableY && yScrollNeeded && <VerticalScrollBar containerRef={scrollContainerRef} />}

5
src/components/Switch.tsx
View File

@@ -26,11 +26,14 @@ export function Switch({ name, checked = false, disabled = false, onChange }: Sw
}, [checked]);
return (
//@ts-expect-error TS2322
<div className={styles.switch} disabled={disabled}>
<div
className={cx(styles.switch_handle, isChecked && styles.checked)}
onClick={handleSwitch}></div>
{!isNil(name) && <input type="hidden" name={name} value={isChecked} />}
{!isNil(name) && (
<input type="hidden" name={name} value={isChecked ? 'checked' : undefined} />
)}
</div>
);
}

2
src/components/Tooltip.tsx
View File

@@ -18,7 +18,7 @@ const positionMap = {
export function Tooltip({ content, position = 'top', children }: TooltipProps) {
const [show, setShow] = useState(false);
const contentRef = useRef<HTMLDivElement>();
const contentRef = useRef<HTMLDivElement | null>(null);
return (
<div

1
src/components/VSegmentedControl.tsx
View File

@@ -52,6 +52,7 @@ export function VSegmentedControl({
<div
key={`${index}_${value}`}
className={cx(styles.option, isEqual(selected, value) && styles.selected)}
//@ts-expect-error TS2322
ref={(el) => (optionsRef.current[index] = el!)}
onClick={() => handleSelectAction(value, index)}>
{label}

2
src/hooks/useCopy.ts
View File

@@ -6,7 +6,7 @@ import { NotificationType, useNotification } from '../components/Notifications';
export function useCopy() {
const { showToast } = useNotification();
const [cpState, copyToClipboard] = useCopyToClipboard();
const copyAction = useCallback((content: string) => {
const copyAction = useCallback((content?: string | null) => {
if (isNil(content) || isEmpty(content)) return;
copyToClipboard(content);
}, []);

6
src/models.ts
View File

@@ -4,12 +4,12 @@ import { MaterialDesign3SchemeStorage } from './material-3-scheme';
import { QSchemeStorage } from './q-scheme';
import { SwatchSchemeStorage } from './swatch_scheme';
export type Option =
export type Option<T = string | number | null> =
| {
label: string;
value: string | number | null;
value: T;
}
| Record<'label' | 'value', string | number | null>;
| Record<'label' | 'value', T>;
export type HarmonyColor = {
color: string;

21
src/page-components/color-compare/HCTCompare.tsx
View File

@@ -1,30 +1,19 @@
import { Differ, HctDiffference } from 'color-module';
import { useMemo } from 'react';
import { HctDiffference } from '../../color_functions/color_module';
import { useColorFunction } from '../../ColorFunctionContext';
import styles from './CompareLayout.module.css';
import { CompareMethodProps } from './share-props';
const defaultCompareResult: HctDiffference = {
hue: {
delta: 0,
percent: 0,
},
chroma: {
delta: 0,
percent: 0,
},
lightness: {
delta: 0,
percent: 0,
},
};
export function HCTCompare({
basic = '000000',
compare = '000000',
mode = 'absolute',
}: CompareMethodProps) {
const { colorFn } = useColorFunction();
const defaultCompareResult: HctDiffference = useMemo(
() => new HctDiffference(new Differ(0, 0), new Differ(0, 0), new Differ(0, 0)),
[],
);
const differ = useMemo(() => {
if (!colorFn) {
return defaultCompareResult;

21
src/page-components/color-compare/HSLCompare.tsx
View File

@@ -1,30 +1,19 @@
import { Differ, HSLDifference } from 'color-module';
import { useMemo } from 'react';
import { HSLDifference } from '../../color_functions/color_module';
import { useColorFunction } from '../../ColorFunctionContext';
import styles from './CompareLayout.module.css';
import { CompareMethodProps } from './share-props';
const defaultCompareResult: HSLDifference = {
hue: {
delta: 0,
percent: 0,
},
saturation: {
delta: 0,
percent: 0,
},
lightness: {
delta: 0,
percent: 0,
},
};
export function HSLCompare({
basic = '000000',
compare = '000000',
mode = 'absolute',
}: CompareMethodProps) {
const { colorFn } = useColorFunction();
const defaultCompareResult: HSLDifference = useMemo(
() => new HSLDifference(new Differ(0, 0), new Differ(0, 0), new Differ(0, 0)),
[],
);
const differ = useMemo(() => {
if (!colorFn) {
return defaultCompareResult;

21
src/page-components/color-compare/OKLCHCompare.tsx
View File

@@ -1,30 +1,19 @@
import { Differ, OklchDifference } from 'color-module';
import { useMemo } from 'react';
import { OklchDifference } from '../../color_functions/color_module';
import { useColorFunction } from '../../ColorFunctionContext';
import styles from './CompareLayout.module.css';
import { CompareMethodProps } from './share-props';
const defaultCompareResult: OklchDifference = {
hue: {
delta: 0,
percent: 0,
},
chroma: {
delta: 0,
percent: 0,
},
lightness: {
delta: 0,
percent: 0,
},
};
export function OklchCompare({
basic = '000000',
compare = '000000',
mode = 'absolute',
}: CompareMethodProps) {
const { colorFn } = useColorFunction();
const defaultCompareResult: OklchDifference = useMemo(
() => new OklchDifference(new Differ(0, 0), new Differ(0, 0), new Differ(0, 0)),
[],
);
const differ = useMemo(() => {
if (!colorFn) {
return defaultCompareResult;

21
src/page-components/color-compare/RGBCompare.tsx
View File

@@ -1,30 +1,19 @@
import { Differ, RGBDifference } from 'color-module';
import { useMemo } from 'react';
import { RGBDifference } from '../../color_functions/color_module';
import { useColorFunction } from '../../ColorFunctionContext';
import styles from './CompareLayout.module.css';
import { CompareMethodProps } from './share-props';
const defaultCompareResult: RGBDifference = {
r: {
delta: 0,
percent: 0,
},
g: {
delta: 0,
percent: 0,
},
b: {
delta: 0,
percent: 0,
},
};
export function RGBCompare({
basic = '000000',
compare = '000000',
mode = 'absolute',
}: CompareMethodProps) {
const { colorFn } = useColorFunction();
const defaultCompareResult: RGBDifference = useMemo(
() => new RGBDifference(new Differ(0, 0), new Differ(0, 0), new Differ(0, 0)),
[],
);
const differ = useMemo(() => {
if (!colorFn) {
return defaultCompareResult;

10
src/page-components/color-compare/ShadeScale.tsx
View File

@@ -1,19 +1,13 @@
import cx from 'clsx';
import { MixReversing } from 'color-module';
import { useMemo } from 'react';
import { MixReversing } from '../../color_functions/color_module';
import { useColorFunction } from '../../ColorFunctionContext';
import styles from './CompareLayout.module.css';
import { CompareMethodProps } from './share-props';
const defaultMixResult: MixReversing = {
r_factor: 0,
g_factor: 0,
b_factor: 0,
average: 0,
};
export function ShadeScale({ basic = '000000', compare = '000000' }: CompareMethodProps) {
const { colorFn } = useColorFunction();
const defaultMixResult: MixReversing = useMemo(() => new MixReversing(0, 0, 0, 0), []);
const mixFactors = useMemo(() => {
if (!colorFn) {
return defaultMixResult;

10
src/page-components/color-compare/TintScale.tsx
View File

@@ -1,19 +1,13 @@
import cx from 'clsx';
import { MixReversing } from 'color-module';
import { useMemo } from 'react';
import { MixReversing } from '../../color_functions/color_module';
import { useColorFunction } from '../../ColorFunctionContext';
import styles from './CompareLayout.module.css';
import { CompareMethodProps } from './share-props';
const defaultMixResult: MixReversing = {
r_factor: 0,
g_factor: 0,
b_factor: 0,
average: 0,
};
export function TintScale({ basic = '000000', compare = '000000' }: CompareMethodProps) {
const { colorFn } = useColorFunction();
const defaultMixResult: MixReversing = useMemo(() => new MixReversing(0, 0, 0, 0), []);
const mixFactors = useMemo(() => {
if (!colorFn) {
return defaultMixResult;

6
src/page-components/lighten-darken/darkens.tsx
View File

@@ -23,18 +23,18 @@ export function Darkens({ color, darkens, mix, step, maximum, copyMode }: Darken
switch (mix) {
case 'progressive':
for (let i = 1; i <= darkens; i++) {
const darkenColor = colorFn.darken(last(darkenColors), step);
const darkenColor = colorFn.darken(last(darkenColors) ?? '', step ?? 0);
darkenColors.push(darkenColor);
}
break;
case 'linear':
for (let i = 1; i <= darkens; i++) {
const darkenColor = colorFn.darken(color, step * i);
const darkenColor = colorFn.darken(color, (step ?? 0) * i);
darkenColors.push(darkenColor);
}
break;
case 'average': {
const interval = maximum / darkens / 100;
const interval = (maximum ?? 0) / darkens / 100;
for (let i = 1; i <= darkens; i++) {
const darkenColor = colorFn.darken(color, interval * i);
darkenColors.push(darkenColor);

6
src/page-components/lighten-darken/lightens.tsx
View File

@@ -23,18 +23,18 @@ export function Lightens({ color, lightens, mix, step, maximum, copyMode }: Ligh
switch (mix) {
case 'progressive':
for (let i = 1; i <= lightens; i++) {
const lightenColor = colorFn.lighten(last(lightenColors), step);
const lightenColor = colorFn.lighten(last(lightenColors) ?? '', step ?? 0);
lightenColors.push(lightenColor);
}
break;
case 'linear':
for (let i = 1; i <= lightens; i++) {
const lightenColor = colorFn.lighten(color, step * i);
const lightenColor = colorFn.lighten(color, (step ?? 0) * i);
lightenColors.push(lightenColor);
}
break;
case 'average': {
const interval = maximum / lightens / 100;
const interval = (maximum ?? 0) / lightens / 100;
for (let i = 1; i <= lightens; i++) {
const lightenColor = colorFn.lighten(color, interval * i);
lightenColors.push(lightenColor);

2
src/page-components/scheme/ColorEntry.tsx
View File

@@ -1,6 +1,6 @@
import { isEmpty } from 'lodash-es';
import { ActionIcon } from '../../components/ActionIcon';
import { FloatColorPicker } from '../../components/FloatcolorPicker';
import { FloatColorPicker } from '../../components/FloatColorPicker';
import styles from './colorEntry.module.css';
export type IdenticalColorEntry = {

10
src/page-components/scheme/M2Scheme.tsx
View File

@@ -1,6 +1,8 @@
import { isEqual, isNil } from 'lodash-es';
import { useState } from 'react';
import { Tab } from '../../components/Tab';
import { MaterialDesign2SchemeStorage } from '../../material-2-scheme';
import { SchemeContent } from '../../models';
import { SchemeExport } from './Export';
import { M2SchemeBuilder } from './m2-scheme/Builder';
import { M2SchemePreview } from './m2-scheme/Preview';
@@ -11,18 +13,18 @@ const tabOptions = [
{ title: 'Exports', id: 'export' },
];
type M3SchemeProps = {
scheme: SchemeContent<MaterialDesign3SchemeStorage>;
type M2SchemeProps = {
scheme: SchemeContent<MaterialDesign2SchemeStorage>;
};
export function M2Scheme({ scheme }: M3SchemeProps) {
export function M2Scheme({ scheme }: M2SchemeProps) {
const [activeTab, setActiveTab] = useState<(typeof tabOptions)[number]['id']>(() =>
isNil(scheme.schemeStorage.scheme) ? 'builder' : 'overview',
);
return (
<>
<Tab tabs={tabOptions} activeTab={activeTab} onActive={setActiveTab} />
<Tab tabs={tabOptions} activeTab={activeTab} onActive={(v) => setActiveTab(v as string)} />
{isEqual(activeTab, 'overview') && <M2SchemePreview scheme={scheme} />}
{isEqual(activeTab, 'builder') && (
<M2SchemeBuilder scheme={scheme} onBuildComplete={() => setActiveTab('overview')} />

3
src/page-components/scheme/M3Scheme.tsx
View File

@@ -2,6 +2,7 @@ import { isEqual, isNil } from 'lodash-es';
import { useState } from 'react';
import { Tab } from '../../components/Tab';
import { MaterialDesign3SchemeStorage } from '../../material-3-scheme';
import { SchemeContent } from '../../models';
import { SchemeExport } from './Export';
import { M3SchemeBuilder } from './m3-scheme/Builder';
import { M3SchemePreview } from './m3-scheme/Preview';
@@ -23,7 +24,7 @@ export function M3Scheme({ scheme }: M3SchemeProps) {
return (
<>
<Tab tabs={tabOptions} activeTab={activeTab} onActive={setActiveTab} />
<Tab tabs={tabOptions} activeTab={activeTab} onActive={(v) => setActiveTab(v as string)} />
{isEqual(activeTab, 'overview') && <M3SchemePreview scheme={scheme} />}
{isEqual(activeTab, 'builder') && (
<M3SchemeBuilder scheme={scheme} onBuildCompleted={() => setActiveTab('overview')} />

2
src/page-components/scheme/QScheme.tsx
View File

@@ -24,7 +24,7 @@ export function QScheme({ scheme }: QSchemeProps) {
return (
<>
<Tab tabs={tabOptions} activeTab={activeTab} onActive={setActiveTab} />
<Tab tabs={tabOptions} activeTab={activeTab} onActive={(v) => setActiveTab(v as string)} />
{isEqual(activeTab, 'overview') && <QSchemePreview scheme={scheme} />}
{isEqual(activeTab, 'builder') && (
<QSchemeBuilder scheme={scheme} onBuildCompleted={() => setActiveTab('overview')} />

2
src/page-components/scheme/SwatchScheme.tsx
View File

@@ -24,7 +24,7 @@ export function SwatchScheme({ scheme }: SwatchSchemeProps) {
return (
<>
<Tab tabs={tabOptions} activeTab={activeTab} onActive={setActiveTab} />
<Tab tabs={tabOptions} activeTab={activeTab} onActive={(v) => setActiveTab(v as string)} />
{isEqual(activeTab, 'overview') && <SwatchSchemePreview scheme={scheme} />}
{isEqual(activeTab, 'builder') && (
<SwatchSchemeBuilder scheme={scheme} onBuildCompleted={() => setActiveTab('overview')} />

15
src/page-components/scheme/m2-scheme/Builder.tsx
View File

@@ -1,7 +1,7 @@
import { includes, isEmpty, isNil, merge } from 'lodash-es';
import { useActionState, useCallback, useMemo, useState } from 'react';
import { useColorFunction } from '../../../ColorFunctionContext';
import { FloatColorPicker } from '../../../components/FloatcolorPicker';
import { FloatColorPicker } from '../../../components/FloatColorPicker';
import { ScrollArea } from '../../../components/ScrollArea';
import { MaterialDesign2SchemeStorage } from '../../../material-2-scheme';
import { SchemeContent } from '../../../models';
@@ -36,18 +36,19 @@ export function M2SchemeBuilder({ scheme, onBuildComplete }: M2SchemeBuilderProp
[originalColors, newColors, deleted],
);
const [errMsg, handleSubmitAction] = useActionState((state, formData) => {
const [errMsg, handleSubmitAction] = useActionState<Map<string, string>, FormData>(
(_state, formData) => {
const errMsg = new Map<string, string>();
try {
const primaryColor = formData.get('primary');
const primaryColor = formData.get('primary') as string;
if (isNil(primaryColor) || isEmpty(primaryColor)) {
errMsg.set('primary', 'Primary color is required');
}
const secondaryColor = formData.get('secondary');
const secondaryColor = formData.get('secondary') as string;
if (isNil(secondaryColor) || isEmpty(secondaryColor)) {
errMsg.set('secondary', 'Secondary color is required');
}
const errorColor = formData.get('error');
const errorColor = formData.get('error') as string;
if (isNil(errorColor) || isEmpty(errorColor)) {
errMsg.set('error', 'Error color is required');
}
@@ -89,7 +90,9 @@ export function M2SchemeBuilder({ scheme, onBuildComplete }: M2SchemeBuilderProp
}
return errMsg;
}, new Map<string, string>());
},
new Map<string, string>(),
);
return (
<ScrollArea enableY>

4
src/page-components/scheme/m2-scheme/Preview.tsx
View File

@@ -86,8 +86,8 @@ export function M2SchemePreview({ scheme }: M2SchemePreviewProps) {
return (
<ScrollArea enableY>
<div className={styles.preview_layout}>
<PreviewBlock title="Light" baseline={scheme.schemeStorage.scheme?.light} />
<PreviewBlock title="Dark" baseline={scheme.schemeStorage.scheme?.dark} />
<PreviewBlock title="Light" baseline={scheme.schemeStorage.scheme!.light} />
<PreviewBlock title="Dark" baseline={scheme.schemeStorage.scheme!.dark} />
</div>
</ScrollArea>
);

13
src/page-components/scheme/m3-scheme/Builder.tsx
View File

@@ -1,7 +1,7 @@
import { includes, isEmpty, isNil } from 'lodash-es';
import { useActionState, useCallback, useMemo, useState } from 'react';
import { useColorFunction } from '../../../ColorFunctionContext';
import { FloatColorPicker } from '../../../components/FloatcolorPicker';
import { FloatColorPicker } from '../../../components/FloatColorPicker';
import { ScrollArea } from '../../../components/ScrollArea';
import { MaterialDesign3Scheme, MaterialDesign3SchemeStorage } from '../../../material-3-scheme';
import { SchemeContent } from '../../../models';
@@ -36,15 +36,16 @@ export function M3SchemeBuilder({ scheme, onBuildCompleted }: M3SchemeBuilderPro
[originalColors, newColors, deleted],
);
const [errMsg, handleSubmitAction] = useActionState((state, formData) => {
const [errMsg, handleSubmitAction] = useActionState<Map<string, string>, FormData>(
(_state, formData) => {
const errMsg = new Map<string, string>();
try {
const sourceColor = formData.get('source');
const sourceColor = formData.get('source') as string;
if (isNil(sourceColor) || isEmpty(sourceColor)) {
errMsg.set('source', 'Source color is required');
}
const errorColor = formData.get('error');
const errorColor = formData.get('error') as string;
if (isNil(errorColor) || isEmpty(errorColor)) {
errMsg.set('error', 'Error color is required');
}
@@ -93,7 +94,9 @@ export function M3SchemeBuilder({ scheme, onBuildCompleted }: M3SchemeBuilderPro
}
return errMsg;
}, new Map<string, string>());
},
new Map<string, string>(),
);
return (
<ScrollArea enableY>

4
src/page-components/scheme/m3-scheme/Preview.tsx
View File

@@ -264,8 +264,8 @@ export function M3SchemePreview({ scheme }: M3SchemePreviewProps) {
return (
<ScrollArea enableY>
<div className={styles.preview_layout}>
<PreviewBlock title="Light Scheme" baseline={scheme.schemeStorage.scheme?.light_baseline} />
<PreviewBlock title="Dark Scheme" baseline={scheme.schemeStorage.scheme?.dark_baseline} />
<PreviewBlock title="Light Scheme" baseline={scheme.schemeStorage.scheme!.light_baseline} />
<PreviewBlock title="Dark Scheme" baseline={scheme.schemeStorage.scheme!.dark_baseline} />
</div>
</ScrollArea>
);

50
src/page-components/scheme/q-scheme/Builder.tsx
View File

@@ -1,13 +1,8 @@
import { ColorExpand, ColorShifting, SchemeSetting, WACGSetting } from 'color-module';
import { every, isEmpty, isNil } from 'lodash-es';
import { useActionState, useMemo } from 'react';
import {
ColorExpand,
ColorShifting,
SchemeSetting,
WACGSetting,
} from '../../../color_functions/color_module';
import { useColorFunction } from '../../../ColorFunctionContext';
import { FloatColorPicker } from '../../../components/FloatcolorPicker';
import { FloatColorPicker } from '../../../components/FloatColorPicker';
import { ScrollArea } from '../../../components/ScrollArea';
import { VSegmentedControl } from '../../../components/VSegmentedControl';
import { SchemeContent } from '../../../models';
@@ -82,7 +77,8 @@ export function QSchemeBuilder({ scheme, onBuildCompleted }: QSchemeBuilderProps
return [];
}, []);
const [errMsg, handleSubmitAction] = useActionState((state, formData) => {
const [errMsg, handleSubmitAction] = useActionState<Map<string, string>, FormData>(
(_state, formData) => {
const errMsg = new Map<string, string>();
const requiredFields = [
'primary',
@@ -128,9 +124,9 @@ export function QSchemeBuilder({ scheme, onBuildCompleted }: QSchemeBuilderProps
const source: QSchemeSource = {
primary: defaultEmptyFormData(formData, 'primary', null),
secondary: defaultEmptyFormData(formData, 'secondary', undefined),
tertiary: defaultEmptyFormData(formData, 'tertiary', undefined),
accent: defaultEmptyFormData(formData, 'accent', undefined),
secondary: defaultEmptyFormData(formData, 'secondary', null),
tertiary: defaultEmptyFormData(formData, 'tertiary', null),
accent: defaultEmptyFormData(formData, 'accent', null),
danger: defaultEmptyFormData(formData, 'danger', null),
success: defaultEmptyFormData(formData, 'success', null),
warning: defaultEmptyFormData(formData, 'warn', null),
@@ -141,26 +137,26 @@ export function QSchemeBuilder({ scheme, onBuildCompleted }: QSchemeBuilderProps
};
const generatedScheme = every([source.secondary, source.tertiary, source.accent], isNil)
? colorFn?.generate_q_scheme_automatically(
source.primary,
source.danger,
source.success,
source.warning,
source.info,
source.foreground,
source.background,
source.primary ?? '',
source.danger ?? '',
source.success ?? '',
source.warning ?? '',
source.info ?? '',
source.foreground ?? '',
source.background ?? '',
schemeSetting,
)
: colorFn?.generate_q_scheme_manually(
source.primary,
source.primary ?? '',
source.secondary ?? undefined,
source.tertiary ?? undefined,
source.accent ?? undefined,
source.danger,
source.success,
source.warning,
source.info,
source.foreground,
source.background,
source.danger ?? '',
source.success ?? '',
source.warning ?? '',
source.info ?? '',
source.foreground ?? '',
source.background ?? '',
schemeSetting,
);
updateScheme((prev) => {
@@ -177,7 +173,9 @@ export function QSchemeBuilder({ scheme, onBuildCompleted }: QSchemeBuilderProps
}
return errMsg;
}, new Map<string, string>());
},
new Map<string, string>(),
);
return (
<ScrollArea enableY>

22
src/page-components/scheme/swatch-scheme/Builder.tsx
View File

@@ -1,16 +1,17 @@
import { ColorShifting, SwatchEntry, SwatchSchemeSetting } from 'color-module';
import { includes, isEmpty, isEqual, isNaN } from 'lodash-es';
import { useActionState, useCallback, useMemo, useState } from 'react';
import {
ColorShifting,
SwatchEntry,
SwatchSchemeSetting,
} from '../../../color_functions/color_module';
import { useColorFunction } from '../../../ColorFunctionContext';
import { ScrollArea } from '../../../components/ScrollArea';
import { Switch } from '../../../components/Switch';
import { SchemeContent } from '../../../models';
import { useUpdateScheme } from '../../../stores/schemes';
import { QSwatchEntry, QSwatchSchemeSetting, SwatchSchemeStorage } from '../../../swatch_scheme';
import {
QSwatchEntry,
QSwatchSchemeSetting,
SwatchScheme,
SwatchSchemeStorage,
} from '../../../swatch_scheme';
import { mapToObject } from '../../../utls';
import { ColorEntry, IdenticalColorEntry } from '../ColorEntry';
import styles from './Builder.module.css';
@@ -64,7 +65,8 @@ export function SwatchSchemeBuilder({ scheme, onBuildCompleted }: SwatchSchemeBu
return null;
}, [scheme.schemeStorage.source]);
const [errMsg, handleSubmitAction] = useActionState((state, formData) => {
const [errMsg, handleSubmitAction] = useActionState<Map<string, string>, FormData>(
(_state, formData) => {
const errMsg = new Map<string, string>();
try {
@@ -119,7 +121,7 @@ export function SwatchSchemeBuilder({ scheme, onBuildCompleted }: SwatchSchemeBu
colors: dumpedEntries,
setting: dumpedSettings,
};
prev.schemeStorage.scheme = mapToObject(generatedScheme[0]);
prev.schemeStorage.scheme = mapToObject(generatedScheme[0]) as SwatchScheme;
prev.schemeStorage.cssVariables = generatedScheme[1];
prev.schemeStorage.scssVariables = generatedScheme[2];
prev.schemeStorage.jsVariables = generatedScheme[3];
@@ -132,7 +134,9 @@ export function SwatchSchemeBuilder({ scheme, onBuildCompleted }: SwatchSchemeBu
}
return errMsg;
}, new Map<string, string>());
},
new Map<string, string>(),
);
return (
<ScrollArea enableY>

4
src/page-components/scheme/swatch-scheme/Preview.tsx
View File

@@ -54,12 +54,12 @@ export function SwatchSchemePreview({ scheme }: SwatchSchemePreviewProps) {
<h2>Light Scheme</h2>
<SchemeBlock
amount={scheme.schemeStorage.source?.setting?.amount ?? 0}
scheme={scheme.schemeStorage.scheme.light}
scheme={scheme.schemeStorage.scheme!.light}
/>
<h2>Dark Scheme</h2>
<SchemeBlock
amount={scheme.schemeStorage.source?.setting?.amount ?? 0}
scheme={scheme.schemeStorage.scheme.dark}
scheme={scheme.schemeStorage.scheme!.dark}
/>
</div>
</ScrollArea>

6
src/page-components/tints-shades/shades.tsx
View File

@@ -23,18 +23,18 @@ export function Shades({ color, shades, mix, step, maximum, copyMode }: ShadesLi
switch (mix) {
case 'progressive':
for (let i = 1; i <= shades; i++) {
const shade = colorFn!.shade(last(genColors), step);
const shade = colorFn!.shade(last(genColors) ?? '', step ?? 0);
genColors.push(shade);
}
break;
case 'linear':
for (let i = 1; i <= shades; i++) {
const shade = colorFn!.shade(color, step * i);
const shade = colorFn!.shade(color, (step ?? 0) * i);
genColors.push(shade);
}
break;
case 'average': {
const interval = maximum / shades / 100;
const interval = (maximum ?? 0) / shades / 100;
for (let i = 1; i <= shades; i++) {
const shade = colorFn!.shade(color, interval * i);
genColors.push(shade);

6
src/page-components/tints-shades/tints.tsx
View File

@@ -23,18 +23,18 @@ export function Tints({ color, tints, mix, step, maximum, copyMode }: TintsListP
switch (mix) {
case 'progressive':
for (let i = 1; i <= tints; i++) {
const tint = colorFn!.tint(last(genColors), step);
const tint = colorFn!.tint(last(genColors) ?? '', step ?? 0);
genColors.push(tint);
}
break;
case 'linear':
for (let i = 1; i <= tints; i++) {
const tint = colorFn!.tint(color, step * i);
const tint = colorFn!.tint(color, (step ?? 0) * i);
genColors.push(tint);
}
break;
case 'average': {
const interval = maximum / tints / 100;
const interval = (maximum ?? 0) / tints / 100;
for (let i = 1; i <= tints; i++) {
const tint = colorFn!.tint(color, interval * i);
genColors.push(tint);

11
src/pages/CardsDetail.tsx
View File

@@ -8,6 +8,7 @@ import { ColorDescription } from '../models';
import { ColorCard } from '../page-components/cards-detail/ColorCard';
import styles from './CardsDetail.module.css';
type ColorModes = 'hex' | 'rgb' | 'hsl' | 'lab' | 'oklch';
type CardsDetailProps = {
mainTag: string;
};
@@ -20,7 +21,7 @@ export function CardsDetail({ mainTag }: CardsDetailProps) {
}
try {
const embededCategories = colorFn.color_categories() as { label: string; value: string }[];
return embededCategories.filter((cate) => !isEqual(cate.get('value'), 'unknown'));
return embededCategories.filter((cate) => !isEqual(cate.value, 'unknown'));
} catch (e) {
console.error('[Fetch color categories]', e);
}
@@ -31,7 +32,7 @@ export function CardsDetail({ mainTag }: CardsDetailProps) {
const selectedValue = e.target.value;
setCategory(selectedValue);
};
const [mode, setMode] = useState<'hex' | 'rgb' | 'hsl' | 'lab' | 'oklch'>('hex');
const [mode, setMode] = useState<ColorModes>('hex');
const colors = useMemo(() => {
if (!colorFn) {
return [];
@@ -69,8 +70,8 @@ export function CardsDetail({ mainTag }: CardsDetailProps) {
onChange={handleSelectCategory}>
<option value="null">All</option>
{categories.map((cate, index) => (
<option key={`${cate.get('value')}-${index}`} value={cate.get('value')}>
{cate.get('label')}
<option key={`${cate.value}-${index}`} value={cate.value}>
{cate.label}
</option>
))}
</select>
@@ -85,7 +86,7 @@ export function CardsDetail({ mainTag }: CardsDetailProps) {
{ label: 'OKLCH', value: 'oklch' },
]}
value={mode}
onChange={setMode}
onChange={(v) => setMode(v as ColorModes)}
/>
</div>
<ScrollArea enableY>

2
src/pages/Compare.tsx
View File

@@ -44,7 +44,7 @@ export function ColorCompare() {
{ label: 'Relative', value: 'relative' },
]}
value={analysisMode}
onChange={setMode}
onChange={(v) => setMode(v as Parameters<typeof setMode>[0])}
/>
</Labeled>
<RGBCompare basic={basicColor} compare={compareColor} mode={analysisMode} />

2
src/pages/Harmonies.tsx
View File

@@ -114,7 +114,7 @@ export function Harmonies() {
<div className={styles.mode_navigation}>
<h5>Color selection method</h5>
<VSegmentedControl
onChange={setSelectedMode}
onChange={(v) => setSelectedMode(v as string)}
options={[
{ label: 'Complementary', value: 'complementary' },
{ label: 'Analogous', value: 'analogous' },

8
src/pages/LightenDarken.tsx
View File

@@ -13,6 +13,8 @@ import { Lightens } from '../page-components/lighten-darken/lightens';
import { currentPickedColor } from '../stores/colors';
import styles from './LightenDarken.module.css';
type ColorModes = 'hex' | 'rgb' | 'hsl' | 'lab' | 'oklch';
export function LightenDarken() {
const [selectedColor, setSelectedColor] = useAtom(currentPickedColor);
const [lighten, setLighten] = useState(3);
@@ -20,7 +22,7 @@ export function LightenDarken() {
const [steps, setSteps] = useState(10);
const [maximum, setMaximum] = useState(90);
const [mixMode, setMixMode] = useState<'progressive' | 'average'>('progressive');
const [mode, setMode] = useState<'hex' | 'rgb' | 'hsl' | 'lab' | 'oklch'>('hex');
const [mode, setMode] = useState<ColorModes>('hex');
return (
<div className={cx('workspace', styles.lighten_workspace)}>
@@ -123,8 +125,8 @@ export function LightenDarken() {
{ label: 'LAB', value: 'lab' },
{ label: 'OKLCH', value: 'oklch' },
]}
valu={mode}
onChange={setMode}
value={mode}
onChange={(v) => setMode(v as ColorModes)}
/>
</div>
</div>

6
src/pages/Mixer.tsx
View File

@@ -8,12 +8,14 @@ import { LabeledPicker } from '../components/LabeledPicker';
import { ScrollArea } from '../components/ScrollArea';
import styles from './Mixer.module.css';
type ColorModes = 'hex' | 'rgb' | 'hsl' | 'lab' | 'oklch';
export function Mixer() {
const { colorFn } = useColorFunction();
const [basicColor, setBasicColor] = useState('000000');
const [mixColor, setMixColor] = useState('000000');
const [mixRatio, setMixRatio] = useState(0);
const [mode, setMode] = useState<'hex' | 'rgb' | 'hsl' | 'lab' | 'oklch'>('hex');
const [mode, setMode] = useState<ColorModes>('hex');
const mixedColor = useMemo(() => {
try {
if (!colorFn) {
@@ -68,7 +70,7 @@ export function Mixer() {
{ label: 'OKLCH', value: 'oklch' },
]}
value={mode}
onChange={setMode}
onChange={(v) => setMode(v as ColorModes)}
/>
</div>
</div>

13
src/pages/NewScheme.tsx
View File

@@ -11,7 +11,8 @@ export function NewScheme() {
const createScheme = useCreateScheme();
const navigate = useNavigate();
const [schemeType, setSchemeType] = useState<SchemeTypeOption['value']>('q_scheme');
const [errors, formAction] = useActionState((prevState, formData) => {
const [errors, formAction] = useActionState<{ [key: string]: string }, FormData>(
(_prevState, formData): { [key: string]: string } => {
try {
const name = formData.get('name') as string;
if (isNil(name) || isEmpty(name)) {
@@ -22,10 +23,12 @@ export function NewScheme() {
const newId = createScheme(name, schemeType, description);
navigate(`../${newId}`);
} catch (error) {
return error;
return error as { [key: string]: string };
}
return {};
}, {});
return {} as { [key: string]: string };
},
{},
);
return (
<form action={formAction} className={styles.create_scheme_form_layout}>
@@ -37,7 +40,7 @@ export function NewScheme() {
options={SchemeTypeOptions}
extendClassName={styles.custom_segment}
value={schemeType}
onChange={setSchemeType}
onChange={(v) => setSchemeType(v as SchemeTypeOption['value'])}
/>
<input type="hidden" name="type" value={schemeType} />
</div>

8
src/pages/Palette.tsx
View File

@@ -11,6 +11,8 @@ import { PaletteColors } from '../page-components/auto-palette/PaletteColors';
import { currentPickedColor } from '../stores/colors';
import styles from './Palette.module.css';
type ColorModes = 'hex' | 'rgb' | 'hsl' | 'lab' | 'oklch';
export function AutomaticPalette() {
const [selectedColor, setSelectedColor] = useAtom(currentPickedColor);
const [useReferenceColor, setUseReferenceColor] = useState(false);
@@ -22,7 +24,7 @@ export function AutomaticPalette() {
const [referenceBias, setReferenceBias] = useState(0);
const [minLightness, setMinLightness] = useState(10);
const [maxLightness, setMaxLightness] = useState(90);
const [mode, setMode] = useState<'hex' | 'rgb' | 'hsl' | 'lab' | 'oklch'>('hex');
const [mode, setMode] = useState<ColorModes>('hex');
useEffect(() => {
if (useReferenceColor) {
@@ -111,8 +113,8 @@ export function AutomaticPalette() {
{ label: 'LAB', value: 'lab' },
{ label: 'OKLCH', value: 'oklch' },
]}
valu={mode}
onChange={setMode}
value={mode}
onChange={(v) => setMode(v as ColorModes)}
/>
</div>
</div>

13
src/pages/SchemeDetail.tsx
View File

@@ -5,12 +5,17 @@ import { useNavigate, useParams } from 'react-router-dom';
import { EditableDescription } from '../components/EditableDescription';
import { EditableTitle } from '../components/EditableTitle';
import { SchemeSign } from '../components/SchemeSign';
import { MaterialDesign2SchemeStorage } from '../material-2-scheme';
import { MaterialDesign3SchemeStorage } from '../material-3-scheme';
import { SchemeContent } from '../models';
import { CorruptedScheme } from '../page-components/scheme/CorruptedScheme';
import { M2Scheme } from '../page-components/scheme/M2Scheme';
import { M3Scheme } from '../page-components/scheme/M3Scheme';
import { QScheme } from '../page-components/scheme/QScheme';
import { SwatchScheme } from '../page-components/scheme/SwatchScheme';
import { QSchemeStorage } from '../q-scheme';
import { useScheme, useUpdateScheme } from '../stores/schemes';
import { SwatchSchemeStorage } from '../swatch_scheme';
import styles from './SchemeDetail.module.css';
export function SchemeDetail() {
@@ -40,13 +45,13 @@ export function SchemeDetail() {
const schemeContent = useMemo(() => {
switch (scheme?.type) {
case 'q_scheme':
return <QScheme scheme={scheme} />;
return <QScheme scheme={scheme as SchemeContent<QSchemeStorage>} />;
case 'swatch_scheme':
return <SwatchScheme scheme={scheme} />;
return <SwatchScheme scheme={scheme as SchemeContent<SwatchSchemeStorage>} />;
case 'material_2':
return <M2Scheme scheme={scheme} />;
return <M2Scheme scheme={scheme as SchemeContent<MaterialDesign2SchemeStorage>} />;
case 'material_3':
return <M3Scheme scheme={scheme} />;
return <M3Scheme scheme={scheme as SchemeContent<MaterialDesign3SchemeStorage>} />;
default:
return <CorruptedScheme />;
}

8
src/pages/TintsShades.tsx
View File

@@ -13,6 +13,8 @@ import { Tints } from '../page-components/tints-shades/tints';
import { currentPickedColor } from '../stores/colors';
import styles from './TintsShades.module.css';
type ColorModes = 'hex' | 'rgb' | 'hsl' | 'lab' | 'oklch';
export function TintsShades() {
const [selectedColor, setSelectedColor] = useAtom(currentPickedColor);
const [steps, setSteps] = useState(10);
@@ -20,7 +22,7 @@ export function TintsShades() {
const [shades, setShades] = useState(3);
const [maximum, setMaximum] = useState(90);
const [mixMode, setMixMode] = useState<'progressive' | 'average'>('progressive');
const [mode, setMode] = useState<'hex' | 'rgb' | 'hsl' | 'lab' | 'oklch'>('hex');
const [mode, setMode] = useState<ColorModes>('hex');
return (
<div className={cx('workspace', styles.tints_workspace)}>
@@ -122,8 +124,8 @@ export function TintsShades() {
{ label: 'LAB', value: 'lab' },
{ label: 'OKLCH', value: 'oklch' },
]}
valu={mode}
onChange={setMode}
value={mode}
onChange={(v) => setMode(v as ColorModes)}
/>
</div>
</div>

8
src/pages/Tones.tsx
View File

@@ -11,13 +11,15 @@ import { ScrollArea } from '../components/ScrollArea';
import { currentPickedColor } from '../stores/colors';
import styles from './Tones.module.css';
type ColorModes = 'hex' | 'rgb' | 'hsl' | 'lab' | 'oklch';
export function Tones() {
const { colorFn } = useColorFunction();
const [selectedColor, setSelectedColor] = useAtom(currentPickedColor);
const [steps, setSteps] = useState(10);
const [tones, setTones] = useState(3);
const [seedBias, setSeedBias] = useState(0);
const [mode, setMode] = useState<'hex' | 'rgb' | 'hsl' | 'lab' | 'oklch'>('hex');
const [mode, setMode] = useState<ColorModes>('hex');
const colors = useMemo(() => {
try {
const lightenColors = colorFn!.tonal_lighten_series(
@@ -98,8 +100,8 @@ export function Tones() {
{ label: 'LAB', value: 'lab' },
{ label: 'OKLCH', value: 'oklch' },
]}
valu={mode}
onChange={setMode}
value={mode}
onChange={(v) => setMode(v as ColorModes)}
/>
</div>
</div>

6
src/pages/Wheels.tsx
View File

@@ -9,9 +9,11 @@ import { ColorWheel } from '../page-components/wheels/ColorWheel';
import { currentPickedColor } from '../stores/colors';
import styles from './Wheels.module.css';
type HighlightMode = Parameters<typeof ColorWheel>[0]['highlightMode'];
export function Wheels() {
const [selectedColor, setSelectedColor] = useAtom(currentPickedColor);
const [selectedMode, setSelectedMode] = useState('complementary');
const [selectedMode, setSelectedMode] = useState<HighlightMode>('complementary');
const [steps, setSteps] = useState(10);
const [tones, setTones] = useState(3);
@@ -31,7 +33,7 @@ export function Wheels() {
<div className={styles.mode_navigation}>
<h5>Color selection method</h5>
<VSegmentedControl
onChange={setSelectedMode}
onChange={(v) => setSelectedMode(v as HighlightMode)}
options={[
{ label: 'Complementary', value: 'complementary' },
{ label: 'Analogous', value: 'analogous' },

4
src/q-scheme.ts
View File

@@ -1,4 +1,4 @@
import { SchemeSetting } from './color_functions/color_module';
import { SchemeSetting } from 'color-module';
export type ColorSet = {
root: string;
@@ -47,7 +47,7 @@ export type QSchemeSource = {
warning: string | null;
info: string | null;
foreground: string | null;
background: strin | nullg;
background: string | null;
setting: QSchemeSetting | null;
};

20
src/stores/schemes.ts
View File

@@ -42,7 +42,10 @@ export type SchemeSet = {
const schemesAtom = atomWithStorage<SchemeContent<SchemeStorage>[]>('schemes', []);
export const activeSchemeAtom = atomWithStorage<string | null>('activeScheme', null);
export function useSchemeList(): Pick<SchemeContent<SchemeStorage>, 'id' | 'name' | 'createdAt'>[] {
export function useSchemeList(): Pick<
SchemeContent<SchemeStorage>,
'id' | 'name' | 'createdAt' | 'type'
>[] {
const schemes = useAtomValue(schemesAtom);
const sortedSchemes = useMemo(
() =>
@@ -56,9 +59,12 @@ export function useSchemeList(): Pick<SchemeContent<SchemeStorage>, 'id' | 'name
return sortedSchemes;
}
export function useScheme(id: string): SchemeContent<SchemeStorage> | null {
export function useScheme(id?: string | null): SchemeContent<SchemeStorage> | null {
const schemes = useAtomValue(schemesAtom);
const scheme = useMemo(() => schemes.find((s) => isEqual(id, s.id)) ?? null, [schemes, id]);
const scheme = useMemo(
() => schemes.find((s) => !isNil(id) && isEqual(id, s.id)) ?? null,
[schemes, id],
);
return scheme;
}
@@ -71,11 +77,11 @@ export function useActiveScheme(): SchemeContent<SchemeStorage> | null {
export function useCreateScheme(): (
name: string,
type: SchemeType,
description?: string,
description?: string | null,
) => string {
const updateSchemes = useSetAtom(schemesAtom);
const createSchemeAction = useCallback(
(name: string, type: SchemeType, description?: string) => {
(name: string, type: SchemeType, description?: string | null) => {
const newId = v4();
updateSchemes((prev) => [
...prev.filter((s) => !isNil(s)),
@@ -97,7 +103,7 @@ export function useCreateScheme(): (
}
export function useUpdateScheme(
id: string,
id?: string | null,
): (updater: (prev: SchemeContent<SchemeStorage>) => SchemeContent<SchemeStorage>) => void {
const updateSchemes = useSetAtom(schemesAtom);
const updateAction = useCallback(
@@ -107,7 +113,7 @@ export function useUpdateScheme(
prev,
(acc, scheme) => {
if (!isNil(scheme)) {
if (isEqual(id, scheme.id)) {
if (!isNil(id) && isEqual(id, scheme.id)) {
acc.push(updater(scheme));
} else {
acc.push(scheme);

2
src/swatch_scheme.ts
View File

@@ -1,4 +1,4 @@
import { SwatchEntry, SwatchSchemeSetting } from './color_functions/color_module';
import { SwatchEntry, SwatchSchemeSetting } from 'color-module';
export type SwatchScheme = {
light: Record<string, string[]>;

8
src/utls.ts
View File

@@ -1,7 +1,7 @@
import { isEmpty, isNil } from 'lodash-es';
export function defaultEmptyFormData<D>(formData: FormData, param: string, defaultValue: D): D {
const value = formData.get(param);
const value = formData.get(param) as D;
if (isNil(value) || isEmpty(value)) {
return defaultValue;
}
@@ -15,10 +15,8 @@ export function defaultEmptyValue<T, D>(value: T, defaultValue: D): T | D {
return value;
}
export function mapToObject<K extends string | number | symbol, V>(
map: Map<K, V>,
): Record<K, V extends Map<unknown, unknown> ? unknown : V> {
const obj: Record<K, V extends Map<unknown, unknown> ? unknown : V> = {};
export function mapToObject<K extends string | number | symbol, V>(map: Map<K, V>): Record<K, V> {
const obj = {} as Record<K, V>;
map.forEach((value, key) => {
if (value instanceof Map) {
obj[key] = mapToObject(value);

14
tsconfig.app.json
View File

@@ -3,10 +3,13 @@
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"lib": [
"ES2020",
"DOM",
"DOM.Iterable"
],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
@@ -14,13 +17,14 @@
"moduleDetection": "force",
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"strict": false,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["src"]
"include": [
"src"
]
}

12
tsconfig.node.json
View File

@@ -2,23 +2,25 @@
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"target": "ES2022",
"lib": ["ES2023"],
"lib": [
"ES2023"
],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
/* Linting */
"strict": true,
"strict": false,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["vite.config.ts"]
"include": [
"vite.config.ts"
]
}

4
vite.config.ts
View File

@@ -1,11 +1,11 @@
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import { defineConfig } from 'vite';
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
css: {
transform: 'lightningcss',
transformer: 'lightningcss',
lightningcss: {
cssModules: true,
},