diff --git a/README.md b/README.md index 86575ee3..59ff9e15 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,6 @@ First time you start it up you should also run `yarn prep data` - [ ] Insert color theory options, eg insert opposing, inserting analogous color, etc, mine from the adobe picker - [ ] Labels, tooltips, etc - [ ] Nice to have: Rest of basic geometry manipulations: flip (horizontal, vertical), scale, Distribute radially -- [ ] Bug report. If I am comparing a palette with itself and select a color in the main view, the color is not selected in the xy plot of the comparison panel. It is selected in the vertical only plot - [ ] For the palettes, a couple of ideas. Right now, feels like selecting a palette in the list reorders all the palettes, which is disorienting. I realize what you're doing in removing the palette I clicked on, adding the one I was editing. I think don't do this. Keep a fixed order (which I could change if I wanted to), and simply mark the palette that's being editing, don't remove it from the list. Similarly, if I copy a palette, put it right after the palette I copied, not up at the top. I also think adding a compact view of the palettes will eventually be necessary, so now might be the time to do it. Even as a default, would make the circles a bit smaller and pack them tighter. Or maybe make them tall rectangles that would pack even tighter. - [ ] For the palettes, there is a copy and delete bug. Try this: Copy Example 2, then immediately click delete (menu is still up). Surpise! - [ ] Tool tip not staying put @@ -29,6 +28,7 @@ First time you start it up you should also run `yarn prep data` - [ ] Bug: rotate in polar coordinates doesn't work right - [ ] Ad hoc lints seem possible, do a spike - [ ] Directional subtlies for aligns +- [x] Bug report. If I am comparing a palette with itself and select a color in the main view, the color is not selected in the xy plot of the comparison panel. It is selected in the vertical only plot - [x] Similarly, would like to work through the various options for the examples. Delete, Edit, Hide (not Mute) seem good. If you're going to Hide, then ideally you provide a selective unhide (dropdown of names is the easiest) as well as the unhide all. Your Solo means "hide everything else" which I'm not convinced is worth a button. However, a "full screen" or "fit width" "fit height" options that scales it up and reduces the rest to thumbnails might be cool. And I'm sure there are a few more we'll discover as we work with it. - [x] Albers color theory games style examples diff --git a/src/App.svelte b/src/App.svelte index 1500e551..7d9dee0e 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -24,6 +24,7 @@ import ContentEditable from "./components/ContentEditable.svelte"; + $: currentPal = $colorStore.palettes[$colorStore.currentPal]; const tabs = ["examples", "compare", "eval"]; @@ -40,9 +41,9 @@ class={`${buttonStyle} `} on:click={() => { const newPal = { - ...$colorStore.currentPal, - name: `${$colorStore.currentPal.name} copy`, - colors: [...$colorStore.currentPal.colors], + ...currentPal, + name: `${currentPal.name} copy`, + colors: [...currentPal.colors], }; colorStore.createNewPal(newPal); }} @@ -62,7 +63,7 @@ ✎ colorStore.setCurrentPalName(x)} - value={$colorStore.currentPal.name} + value={currentPal.name} /> @@ -70,8 +71,8 @@ colorStore.setBackground(bg)} - bg={$colorStore.currentPal.background} - colorSpace={$colorStore.currentPal.colorSpace} + bg={currentPal.background} + colorSpace={currentPal.colorSpace} /> colorStore.setColorSpace(space)} /> @@ -96,7 +97,7 @@ diff --git a/src/components/ColorScatterPlot.svelte b/src/components/ColorScatterPlot.svelte index ec00eb49..fff6d716 100644 --- a/src/components/ColorScatterPlot.svelte +++ b/src/components/ColorScatterPlot.svelte @@ -104,9 +104,10 @@ $: CircleProps = (color: Color, i: number) => ({ cx: x(color), cy: y(color), - r: 10, + // r: 10, class: "cursor-pointer", fill: color.toDisplay(), + r: 10 + (focusSet.has(i) ? 5 : 0), }); $: RectProps = (color: Color, i: number) => ({ y: z(color), @@ -310,7 +311,6 @@ {#if scatterPlotMode === "moving"} { onFocusedColorsChange([i]); dragStart(e); diff --git a/src/components/ColorScatterPlotPolarGuide.svelte b/src/components/ColorScatterPlotPolarGuide.svelte index 56d11782..ca1c6d75 100644 --- a/src/components/ColorScatterPlotPolarGuide.svelte +++ b/src/components/ColorScatterPlotPolarGuide.svelte @@ -19,7 +19,8 @@ $: config = colorPickerConfig[colorSpace as keyof typeof colorPickerConfig]; $: rNonDimScale = scaleLinear().domain([0, 1]).range(rScale.domain()); $: focusedColors = $focusStore.focusedColors; - $: colors = $colorStore.currentPal.colors; + $: currentPal = $colorStore.palettes[$colorStore.currentPal]; + $: colors = currentPal.colors; $: points = { centerTop: { diff --git a/src/components/ColorScatterPlotXYGuides.svelte b/src/components/ColorScatterPlotXYGuides.svelte index 513e5725..bfabafb9 100644 --- a/src/components/ColorScatterPlotXYGuides.svelte +++ b/src/components/ColorScatterPlotXYGuides.svelte @@ -17,7 +17,8 @@ $: xNonDimScale = scaleLinear().domain([0, 1]).range(xScale.domain()); $: yNonDimScale = scaleLinear().domain([0, 1]).range(yScale.domain()); $: focusedColors = $focusStore.focusedColors; - $: colors = $colorStore.currentPal.colors; + $: currentPal = $colorStore.palettes[$colorStore.currentPal]; + $: colors = currentPal.colors; $: axisFormatter = colorPickerConfig[colorSpace as keyof typeof colorPickerConfig].axisLabel; diff --git a/src/components/Example.svelte b/src/components/Example.svelte index 7d4be727..f7cd6050 100644 --- a/src/components/Example.svelte +++ b/src/components/Example.svelte @@ -42,8 +42,9 @@ } return svg; } - $: colors = $colorStore.currentPal.colors; - $: bg = $colorStore.currentPal.background; + $: currentPal = $colorStore.palettes[$colorStore.currentPal]; + $: colors = currentPal.colors; + $: bg = currentPal.background; $: colors, example, attachListeners(); function onClick(e: any) { diff --git a/src/components/ExplanationViewer.svelte b/src/components/ExplanationViewer.svelte index 29273453..06dfff56 100644 --- a/src/components/ExplanationViewer.svelte +++ b/src/components/ExplanationViewer.svelte @@ -37,7 +37,8 @@ return output; } - $: colors = $colorStore.currentPal.colors; + $: currentPal = $colorStore.palettes[$colorStore.currentPal]; + $: colors = currentPal.colors;
diff --git a/src/components/KeyboardHooks.svelte b/src/components/KeyboardHooks.svelte index 8b9af563..b61dfdec 100644 --- a/src/components/KeyboardHooks.svelte +++ b/src/components/KeyboardHooks.svelte @@ -4,7 +4,8 @@ import focusStore from "../stores/focus-store"; $: focusedSet = new Set($focusStore.focusedColors); $: copiedData = [] as Color[]; - $: colorSpace = $colorStore.currentPal.colorSpace; + $: currentPal = $colorStore.palettes[$colorStore.currentPal]; + $: colorSpace = currentPal.colorSpace; $: config = colorPickerConfig[colorSpace]; $: xStep = config.xStep; $: yStep = config.yStep; @@ -44,7 +45,7 @@ if (key === "backspace" || key === "delete") { e.preventDefault(); const focusedSet = new Set($focusStore.focusedColors); - const newColors = $colorStore.currentPal.colors.filter( + const newColors = currentPal.colors.filter( (_, idx) => !focusedSet.has(idx) ); colorStore.setCurrentPalColors(newColors); @@ -63,7 +64,7 @@ } e.preventDefault(); const focusSet = new Set($focusStore.focusedColors); - const newColors = $colorStore.currentPal.colors.map((color, idx) => { + const newColors = currentPal.colors.map((color, idx) => { if (!focusSet.has(idx)) { return color; } @@ -91,25 +92,15 @@ // SAVE BY DUPLICATING PALETTE if (key === "s" && metaKey) { e.preventDefault(); - const newPal = { - ...$colorStore.currentPal, - name: `${$colorStore.currentPal.name} copy`, - colors: [...$colorStore.currentPal.colors], - }; - colorStore.createNewPal(newPal); + colorStore.duplicatePal($colorStore.currentPal); } // COPY PASTE if (key === "c" && metaKey && $focusStore.focusedColors.length) { - copiedData = $colorStore.currentPal.colors.filter((_, idx) => - focusedSet.has(idx) - ); + copiedData = currentPal.colors.filter((_, idx) => focusedSet.has(idx)); } if (key === "v" && metaKey && copiedData.length) { - colorStore.setCurrentPalColors([ - ...$colorStore.currentPal.colors, - ...copiedData, - ]); + colorStore.setCurrentPalColors([...currentPal.colors, ...copiedData]); } } diff --git a/src/components/Vega.svelte b/src/components/Vega.svelte index e467047d..36aaf96e 100644 --- a/src/components/Vega.svelte +++ b/src/components/Vega.svelte @@ -7,8 +7,8 @@ export let size = 300; let producedSVG: string = ""; - - $: getSVG(spec, $colorStore.currentPal).then((x) => { + $: currentPal = $colorStore.palettes[$colorStore.currentPal]; + $: getSVG(spec, currentPal).then((x) => { producedSVG = x; }); diff --git a/src/content-modules/ComparePal.svelte b/src/content-modules/ComparePal.svelte index aabd06a2..d767fa0f 100644 --- a/src/content-modules/ComparePal.svelte +++ b/src/content-modules/ComparePal.svelte @@ -11,11 +11,13 @@ import SetColorSpace from "./contextual-tools/SetColorSpace.svelte"; - $: compareName = $configStore.comparePal; - $: ComparisonPal = $colorStore.palettes.find((x) => x.name === compareName); + $: currentPal = $colorStore.palettes[$colorStore.currentPal]; + $: compareIdx = $configStore.comparePal; + $: focused = $focusStore.focusedColors; + $: ComparisonPal = compareIdx ? $colorStore.palettes[compareIdx] : undefined; $: { - if (!ComparisonPal && $colorStore.currentPal.name === compareName) { - ComparisonPal = $colorStore.currentPal; + if (!ComparisonPal && $colorStore.currentPal === compareIdx) { + ComparisonPal = currentPal; } } let bg = ComparisonPal?.background.toHex() || "white"; @@ -26,13 +28,13 @@
{#if ComparisonPal !== undefined}
- Compare Pal: {compareName} + Compare Pal: {ComparisonPal.name}
{}} @@ -50,22 +52,22 @@
Current Palette: configStore.setComparePal($colorStore.currentPal.name)} + pal={currentPal} + onClick={() => configStore.setComparePal($colorStore.currentPal)} />
Other Saved Palettes:
- {#each [$colorStore.currentPal, ...$colorStore.palettes] as pal, idx} + {#each [currentPal, ...$colorStore.palettes] as pal, idx} configStore.setComparePal(pal.name)} + onClick={() => configStore.setComparePal(idx)} /> {/each}
diff --git a/src/content-modules/Controls.svelte b/src/content-modules/Controls.svelte index 2c5f2ee5..996f0616 100644 --- a/src/content-modules/Controls.svelte +++ b/src/content-modules/Controls.svelte @@ -11,8 +11,9 @@ import Rotate from "./contextual-tools/Rotate.svelte"; import ColorChannelPicker from "../components/ColorChannelPicker.svelte"; - $: colors = $colorStore.currentPal.colors; - $: colorSpace = $colorStore.currentPal.colorSpace; + $: currentPal = $colorStore.palettes[$colorStore.currentPal]; + $: colors = currentPal.colors; + $: colorSpace = currentPal.colorSpace; $: focusedColors = $focusStore.focusedColors; diff --git a/src/content-modules/Eval.svelte b/src/content-modules/Eval.svelte index 0cc43bb8..bfe0c08e 100644 --- a/src/content-modules/Eval.svelte +++ b/src/content-modules/Eval.svelte @@ -16,13 +16,14 @@ $: selectedBlindType = $configStore.colorSim; let metric: "dE" | "dE94" | "none" = "none"; - $: colors = $colorStore.currentPal.colors; + $: currentPal = $colorStore.palettes[$colorStore.currentPal]; + $: colors = currentPal.colors; $: stats = computeStats(colors, metric); $: colorNames = colorNameSimple(colors); - $: palType = $colorStore.currentPal.type; - $: evalConfig = $colorStore.currentPal.evalConfig; - $: checks = runLintChecks($colorStore.currentPal).filter((x) => + $: palType = currentPal.type; + $: evalConfig = currentPal.evalConfig; + $: checks = runLintChecks(currentPal).filter((x) => x.taskTypes.includes(palType) ); @@ -243,7 +244,7 @@ {/if} {/each} {/each} - {#if Object.keys($colorStore.currentPal.evalConfig)} + {#if Object.keys(currentPal.evalConfig)}