@@ -526,7 +583,7 @@
-moz-transition: r 0.2s ease-in-out;
}
- /* svg {
+ svg {
overflow: visible;
- } */
+ }
diff --git a/src/components/ColorScatterPlotPolarGuide.svelte b/src/components/ColorScatterPlotPolarGuide.svelte
new file mode 100644
index 00000000..5dc76890
--- /dev/null
+++ b/src/components/ColorScatterPlotPolarGuide.svelte
@@ -0,0 +1,116 @@
+
+
+
+ {#each [...new Array(rBgResolution)] as _, i}
+ {#each [...new Array(angleBgResolution)] as _, j}
+
+
+ {/each}
+ {/each}
+
+
diff --git a/src/components/ColorScatterPlotXYGuides.svelte b/src/components/ColorScatterPlotXYGuides.svelte
index 2c24ddaf..2afa4e51 100644
--- a/src/components/ColorScatterPlotXYGuides.svelte
+++ b/src/components/ColorScatterPlotXYGuides.svelte
@@ -56,12 +56,14 @@
nums.reduce((acc, x) => acc + x, 0) / nums.length;
$: fillColor = (i: number, j: number) => {
if (dragging && focusedColors.length === 1) {
- const avgColor = [
- avgNums(focusedColors.map((x) => colors[x].toChannels()[0])),
- xNonDimScale(i / bgResolution),
- yNonDimScale(j / bgResolution),
- ] as [number, number, number];
- return colorFromChannels(avgColor, colorSpace as any).toDisplay();
+ const coords = [0, 0, 0] as [number, number, number];
+ coords[config.xChannelIndex] = xNonDimScale(i / bgResolution);
+ coords[config.yChannelIndex] = yNonDimScale(j / bgResolution);
+ const avgZChannel = avgNums(
+ focusedColors.map((x) => colors[x].toChannels()[config.zChannelIndex])
+ );
+ coords[config.zChannelIndex] = avgZChannel;
+ return colorFromChannels(coords, colorSpace as any).toDisplay();
}
return "#ffffff00";
};
diff --git a/src/lib/Color.ts b/src/lib/Color.ts
index 3f7dcb68..6295eb2f 100644
--- a/src/lib/Color.ts
+++ b/src/lib/Color.ts
@@ -16,6 +16,7 @@ export class Color {
channelNames: string[] = [];
dimensionToChannel: Record<"x" | "y" | "z", string> = { x: "", y: "", z: "" };
axisLabel: (num: number) => string = (x) => x.toFixed(1).toString();
+ isPolar = false;
constructor() {
this.domains = {};
@@ -154,7 +155,7 @@ export class CIELAB extends Color {
chromaBind = chroma.lab;
spaceName = "lab" as const;
stepSize: Channels = [1, 1, 1];
- dimensionToChannel = { x: "L", y: "b", z: "a" };
+ dimensionToChannel = { x: "a", y: "b", z: "L" };
axisLabel = (num: number) => `${Math.round(num)}`;
toString(): string {
@@ -198,9 +199,10 @@ export class HSL extends Color {
channels = { h: 0, s: 0, l: 0 };
chromaBind = chroma.hsl;
spaceName = "hsl" as const;
- domains = { h: [0, 360], s: [0, 100], l: [0, 100] } as Domain;
+ domains = { h: [0, 360], s: [0, 100], l: [100, 0] } as Domain;
stepSize: Channels = [1, 1, 1];
- dimensionToChannel = { x: "s", y: "l", z: "h" };
+ dimensionToChannel = { x: "l", y: "h", z: "s" };
+ isPolar = true;
toString(): string {
const [h, s, l] = this.stringChannels();
@@ -325,20 +327,21 @@ export const colorPickerConfig = Object.fromEntries(
return [
name,
{
+ axisLabel: exampleColor.axisLabel,
+ isPolar: exampleColor.isPolar,
title: exampleColor.name,
- xDomain: exampleColor.domains[x],
- yDomain: exampleColor.domains[y],
- zDomain: exampleColor.domains[z],
xChannel: x,
xChannelIndex: exampleColor.channelNames.indexOf(x),
+ xDomain: exampleColor.domains[x],
+ xStep: exampleColor.stepSize[1],
yChannel: y,
yChannelIndex: exampleColor.channelNames.indexOf(y),
+ yDomain: exampleColor.domains[y],
+ yStep: exampleColor.stepSize[2],
zChannel: z,
zChannelIndex: exampleColor.channelNames.indexOf(z),
- xStep: exampleColor.stepSize[1],
- yStep: exampleColor.stepSize[2],
+ zDomain: exampleColor.domains[z],
zStep: exampleColor.stepSize[0],
- axisLabel: exampleColor.axisLabel,
},
];
})
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 87442456..97f0e25c 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,5 +1,9 @@
-import chroma from "chroma-js";
-import { Color, colorFromString, colorFromChannels } from "./Color";
+import {
+ Color,
+ colorFromString,
+ colorFromChannels,
+ colorPickerConfig,
+} from "./Color";
import type { PalType } from "../stores/color-store";
export const insert = (arr: Color[], newItem: Color, index?: number) => {
if (index === undefined) {
@@ -128,19 +132,6 @@ export function draggable(node: any) {
};
}
-const extent = (arr: number[]) => [Math.min(...arr), Math.max(...arr)];
-function makeExtents(
- arr: number[][],
- config: { xIdx: number; yIdx: number; zIdx: number }
-) {
- const { xIdx, yIdx, zIdx } = config;
- return {
- x: extent(arr.map((x) => x[xIdx])),
- y: extent(arr.map((x) => x[yIdx])),
- z: extent(arr.map((x) => x[zIdx])),
- };
-}
-
export const clamp = (n: number, min: number, max: number) =>
Math.min(Math.max(n, min), max);
@@ -213,30 +204,42 @@ export const colorBrewerMapToType = Object.entries(colorBrewerTypeMap).reduce(
{} as any
) as Record
;
+const extent = (arr: number[]) => [Math.min(...arr), Math.max(...arr)];
+function makeExtents(arr: number[][]) {
+ return Object.fromEntries(
+ ["x", "y", "z"].map((key, idx) => [key, extent(arr.map((el) => el[idx]))])
+ ) as { x: number[]; y: number[]; z: number[] };
+}
+
export function makePosAndSizes(
- pickedColors: [number, number, number][],
- xScale: any,
- yScale: any,
- zScale: any,
- config: { xIdx: number; yIdx: number; zIdx: number }
+ pickedColors: number[][],
+ config: (typeof colorPickerConfig)[string]
) {
- const selectionExtents = makeExtents(pickedColors, config);
- const makePos = (key: keyof typeof selectionExtents, scale: any) => {
- const [a, b] = scale.domain();
- return scale(selectionExtents[key][a > b ? 1 : 0]);
+ const selectionExtents = makeExtents(pickedColors);
+ console.log(selectionExtents, pickedColors);
+ const makePos = (key: keyof typeof selectionExtents) => {
+ // const [a, b] = config[`${key}Domain`];
+ // return selectionExtents[key][a > b ? 1 : 0];
+ return selectionExtents[key][0];
};
- const diff = (key: keyof typeof selectionExtents, scale: any) => {
+ const diff = (key: keyof typeof selectionExtents) => {
const [a, b] = selectionExtents[key];
- return Math.abs(scale(a) - scale(b));
+ return Math.abs(a - b);
};
- let xPos = makePos("x", xScale) - 15;
- let yPos = makePos("y", yScale) - 15;
- let zPos = makePos("z", zScale);
-
- let selectionWidth = diff("x", xScale) + 30;
- let selectionHeight = diff("y", yScale) + 30;
- let selectionDepth = diff("z", zScale);
+ let xPos = makePos("x") - 15;
+ let yPos = makePos("y") - 15;
+ let zPos = makePos("z");
+ let selectionWidth = diff("x") + 30;
+ let selectionHeight = diff("y") + 30;
+ let selectionDepth = diff("z");
+ // let xPos = makePos("x");
+ // let yPos = makePos("y");
+ // let zPos = makePos("z");
+
+ // let selectionWidth = diff("x");
+ // let selectionHeight = diff("y");
+ // let selectionDepth = diff("z");
return { xPos, yPos, zPos, selectionWidth, selectionHeight, selectionDepth };
}