WIP pairs selection

felixgirault · May 14, 2022 · 49f6c2f · 49f6c2f
1 parent 0ddc0e0
commit 49f6c2f
Show file tree

Hide file tree

Showing 2 changed files with 99 additions and 63 deletions.
diff --git a/src/lib/components/combinations/CombinationGrid.svelte b/src/lib/components/combinations/CombinationGrid.svelte
@@ -1,14 +1,11 @@
 <script lang="ts">
 	import {hexColor} from '$lib/color/spaces';
-	import BlindnessFilter from '$lib/components/combinations/BlindnessFilter.svelte';
-	import ColorFilter from '$lib/components/combinations/ColorFilter.svelte';
 	import Combination from '$lib/components/combinations/Combination.svelte';
-	import ContrastFilter from '$lib/components/combinations/ContrastFilter.svelte';
 	import ContrastTypeFilter from '$lib/components/combinations/ContrastTypeFilter.svelte';
 	import LuminosityFilter from '$lib/components/combinations/LuminosityFilter.svelte';
 	import {
 		colorEntries,
-		cross,
+		combinations,
 		previewedCombinationUid,
 		selectedCombinations
 	} from '$lib/stores/combinations';
@@ -20,8 +17,6 @@
 	};
 
 	$: colorCount = $colorEntries?.length || 0;
-
-	let a = $cross.map(() => {});
 </script>
 
 <div class="data-layout">
@@ -34,18 +29,20 @@
 		{/if}
 	</div>
 
-	<div class="list">
-		<!-- Using a keyed each here worsens performances as it causes layout shifts -->
-		{#if $cross.length}
+	<div>
+		{#if $colorEntries.length}
 			<table>
 				<caption>Test</caption>
 
 				<thead>
 					<tr>
 						<td />
-						{#each $cross as { id, name, rgb } (id)}
+						{#each $colorEntries as { id, name, rgbColor } (id)}
 							<th scope="col">
-								<span title="Foreground: {name}">
+								<span
+									title="Foreground: {name}"
+									style="color: {hexColor(rgbColor)}"
+								>
 									Tt
 								</span>
 							</th>
@@ -54,36 +51,51 @@
 				</thead>
 
 				<tbody>
-					{#each $cross as { id, name, rgb, bgs }, j (id)}
-						<tr>
+					{#each $colorEntries as { id: bgId, name, rgbColor }, bgIndex (bgId)}
+						<tr style="--cbg: {hexColor(rgbColor)};">
 							<th scope="row">
 								<Sample
-									color={hexColor(rgb)}
-									title="Background: {name}"
+									color={hexColor(rgbColor)}
+									title="background: {name}"
 								/>
 							</th>
-							{#each bgs as { grade }, i ($cross[i].id)}
+							{#each $colorEntries as { id: fgId }, fgIndex (fgId)}
 								<td
 									class="combination"
-									style="--cbg: {hexColor(
-										$cross[i].rgb
-									)}; --cfg: {hexColor(rgb)};"
+									style="--cfg: {hexColor(
+										$colorEntries[fgIndex].rgbColor
+									)};"
 								>
-									{#if i !== j}
+									{#if fgIndex !== bgIndex}
 										<input
 											type="checkbox"
-											id="combination-{j}-{i}"
+											id="combination-{bgId}-{fgId}"
 											checked={$selectedCombinations?.[
-												$cross[i].id
-											]?.[id]}
-											onchange={(e) => {
-												$selectedCombinations[
-													$cross[i].id
-												][id] = e.target.checked;
+												bgId
+											]?.[fgId]}
+											on:change={(e) => {
+												if (
+													bgId in
+													$selectedCombinations
+												) {
+													$selectedCombinations[
+														bgId
+													][fgId] =
+														e.target.checked;
+												} else {
+													$selectedCombinations[
+														bgId
+													] = {
+														[fgId]:
+															e.target.checked
+													};
+												}
 											}}
 										/>
-										<label for="combination-{j}-{i}">
-											{grade}
+										<label
+											for="combination-{bgId}-{fgId}"
+										>
+											Tt
 										</label>
 									{/if}
 								</td>
@@ -104,6 +116,34 @@
 				Add colors to your palette to try color combinations.
 			</p>
 		{/if}
+
+		<div class="list">
+			{#each $combinations as { uid, bgName, fgName, contrast, simulatedContrasts }}
+				<Combination
+					{uid}
+					{bgName}
+					{fgName}
+					{contrast}
+					{simulatedContrasts}
+					onPreview={handlePreview}
+				/>
+			{:else}
+				{#if colorCount > 1}
+					<p>
+						There is no color combination matching the
+						selected filters.
+						<br />
+						Try adding more colors to your palette or changing
+						filters.
+					</p>
+				{:else}
+					<p>
+						Add colors to your palette to try color
+						combinations.
+					</p>
+				{/if}
+			{/each}
+		</div>
 	</div>
 </div>
 

diff --git a/src/lib/stores/combinations.ts b/src/lib/stores/combinations.ts
@@ -1,5 +1,5 @@
 import type {Rgb} from 'culori/fn';
-import {readable, type Readable} from 'svelte/store';
+import type {Readable} from 'svelte/store';
 import {derived, get, writable} from 'svelte/store';
 import type {ContrastType} from '$lib/color/contrast';
 import {
@@ -124,33 +124,29 @@ const colorPairs = derived(filteredColors, ($colors) => {
 	);
 });
 
-export const cross = derived(
-	[filteredColors, contrastType],
-	([$colors, $type]) => {
-		const levelFn =
-			$type === 'wcag2' ? wcag2Contrast : wcag3Contrast;
-		const gradeFn =
-			$type === 'wcag2' ? wcag2Grade : wcag3Grade;
-
-		return $colors.map((fg) => ({
-			id: fg.id,
-			name: fg.name,
-			rgb: fg.rgbColor,
-			bgs: $colors.map((bg) => {
-				const level = levelFn(bg.rgbColor, fg.rgbColor);
-				return {
-					level,
-					grade: gradeFn(level)
-				};
-			})
-		}));
+// TODO don't calc here
+// just make paires for classic combinations list
+export const selectedCombinations = writable<
+	Record<Node['id'], Record<Node['id'], boolean>>
+>({});
+
+export const selectedPairs = derived(
+	[filteredColors, selectedCombinations],
+	([$colors, $selected]) => {
+		return Object.entries($selected).flatMap(([bgId, fgs]) => {
+			const bg = $colors.find((c) => c.id === bgId);
+			return Object.entries(fgs)
+				.filter(([_, used]) => used)
+				.map(([fgId]) => {
+					const fg = $colors.find((c) => c.id === fgId);
+					return [bg, fg];
+				});
+		});
 	}
 );
 
-export const selectedCombinations = writable({});
-
 export const combinations = derived(
-	[colorPairs, contrastType, blindnessTypes],
+	[selectedPairs, contrastType, blindnessTypes],
 	([$pairs, $type, $blindnessTypes]) => {
 		// Not in derived dependencies so it doesn't trigger
 		// a computation (only sortedColorIds should).
@@ -159,10 +155,10 @@ export const combinations = derived(
 		const gradeFn =
 			$type === 'wcag2' ? wcag2Grade : wcag3Grade;
 
-		return $pairs.map(([bgOutput, fgOutput]): Combination => {
+		return $pairs.map(([bgEntry, fgEntry]): Combination => {
 			const baseLevel = levelFn(
-				bgOutput.rgbColor,
-				fgOutput.rgbColor
+				bgEntry.rgbColor,
+				fgEntry.rgbColor
 			);
 
 			const baseGrade = gradeFn(baseLevel);
@@ -179,8 +175,8 @@ export const combinations = derived(
 							? simulateDeuteranomaly
 							: simulateTritanomaly;
 
-					const bg = simulate(bgOutput.rgbColor);
-					const fg = simulate(fgOutput.rgbColor);
+					const bg = simulate(bgEntry.rgbColor);
+					const fg = simulate(fgEntry.rgbColor);
 					const level = levelFn(bg, fg);
 					const grade = gradeFn(level);
 
@@ -200,15 +196,15 @@ export const combinations = derived(
 			);
 
 			return {
-				uid: `${bgOutput.id}-${fgOutput.id}`,
-				bgName: bgOutput.name,
-				fgName: fgOutput.name,
+				uid: `${bgEntry.id}-${fgEntry.id}`,
+				bgName: bgEntry.name,
+				fgName: fgEntry.name,
 				minLevel,
 				minGrade,
 				contrast: {
 					type: 'none',
-					bg: bgOutput.rgbColor,
-					fg: fgOutput.rgbColor,
+					bg: bgEntry.rgbColor,
+					fg: fgEntry.rgbColor,
 					level: baseLevel,
 					grade: baseGrade
 				},