From 9bd8fc12d013024b9def098194c51dcd940001bc Mon Sep 17 00:00:00 2001 From: Andrew Michael McNutt Date: Thu, 18 Jan 2024 12:56:12 -0800 Subject: [PATCH] basic axes --- .../ColorScatterPlotPolarGuide.svelte | 139 ++++++++++-------- src/lib/Color.ts | 3 +- src/lib/utils.ts | 21 +-- 3 files changed, 87 insertions(+), 76 deletions(-) diff --git a/src/components/ColorScatterPlotPolarGuide.svelte b/src/components/ColorScatterPlotPolarGuide.svelte index 5dc76890..c7ee4e88 100644 --- a/src/components/ColorScatterPlotPolarGuide.svelte +++ b/src/components/ColorScatterPlotPolarGuide.svelte @@ -25,36 +25,36 @@ // $: axisFormatter = // colorPickerConfig[colorSpace as keyof typeof colorPickerConfig].axisLabel; - // $: points = { - // centerTop: { - // x: (xScale.range()[1] - xScale.range()[0]) / 2, - // y: yScale.range()[0], - // labelAdjust: { x: 0, y: -3 }, - // anchor: "middle", - // label: `${config.yChannel}: ${axisFormatter(yScale.domain()[0])}`, - // }, - // centerBottom: { - // x: (xScale.range()[1] - xScale.range()[0]) / 2, - // y: yScale.range()[1], - // anchor: "middle", - // labelAdjust: { x: 0, y: 15 }, - // label: axisFormatter(yScale.domain()[1]), - // }, - // centerLeft: { - // x: xScale.range()[0], - // y: (yScale.range()[1] - yScale.range()[0]) / 2, - // anchor: "start", - // labelAdjust: { x: 5, y: -3 }, - // label: axisFormatter(xScale.domain()[0]), - // }, - // centerRight: { - // x: xScale.range()[1], - // y: (yScale.range()[1] - yScale.range()[0]) / 2, - // anchor: "end", - // labelAdjust: { x: -5, y: -3 }, - // label: `${config.xChannel}: ${axisFormatter(xScale.domain()[1])}`, - // }, - // }; + $: points = { + centerTop: { + x: (xScale.range()[1] - xScale.range()[0]) / 2, + y: yScale.range()[0], + labelAdjust: { x: 0, y: -3 }, + anchor: "middle", + // label: `${config.yChannel}: ${axisFormatter(yScale.domain()[0])}`, + }, + centerBottom: { + x: (xScale.range()[1] - xScale.range()[0]) / 2, + y: yScale.range()[1], + anchor: "middle", + labelAdjust: { x: 0, y: 15 }, + // label: axisFormatter(yScale.domain()[1]), + }, + centerLeft: { + x: xScale.range()[0], + y: (yScale.range()[1] - yScale.range()[0]) / 2, + anchor: "start", + labelAdjust: { x: 5, y: -3 }, + // label: axisFormatter(xScale.domain()[0]), + }, + centerRight: { + x: xScale.range()[1], + y: (yScale.range()[1] - yScale.range()[0]) / 2, + anchor: "end", + labelAdjust: { x: -5, y: -3 }, + // label: `${config.xChannel}: ${axisFormatter(xScale.domain()[1])}`, + }, + }; $: miniConfig = { xIdx: config.xChannelIndex, yIdx: config.yChannelIndex, @@ -67,16 +67,16 @@ nums.reduce((acc, x) => acc + x, 0) / nums.length; $: fillColor = (i: number, j: number) => { const { xIdx, yIdx, zIdx } = miniConfig; - if (true || (dragging && focusedColors.length === 1)) { + if (dragging && focusedColors.length === 1) { const coords = [0, 0, 0] as [number, number, number]; const angle = (j / angleBgResolution) * 360; const r = rNonDimScale(i / rBgResolution); coords[xIdx] = r; coords[yIdx] = angle; - // const avgZChannel = avgNums( - // focusedColors.map((x) => colors[x].toChannels()[zIdx]) - // ); - const avgZChannel = avgNums(colors.map((x) => x.toChannels()[zIdx])); + const avgZChannel = avgNums( + focusedColors.map((x) => colors[x].toChannels()[zIdx]) + ); + // const avgZChannel = avgNums(colors.map((x) => x.toChannels()[zIdx])); coords[zIdx] = avgZChannel; return colorFromChannels(coords, colorSpace as any).toDisplay(); } @@ -88,29 +88,52 @@ .range([0, Math.PI * 2]); - - {#each [...new Array(rBgResolution)] as _, i} - {#each [...new Array(angleBgResolution)] as _, j} - - +{#if $configStore.showColorBackground} + + {#each [...new Array(rBgResolution)] as _, i} + {#each [...new Array(angleBgResolution)] as _, j} + + {/each} {/each} + +{/if} + + + + + + {#each [...new Array(rBgResolution + 1)] as _, i} + {/each} - diff --git a/src/lib/Color.ts b/src/lib/Color.ts index 6295eb2f..68133f6e 100644 --- a/src/lib/Color.ts +++ b/src/lib/Color.ts @@ -166,11 +166,12 @@ export class CIELAB extends Color { export class HSV extends Color { name = "HSV"; channelNames = ["h", "s", "v"]; + isPolar = true; channels = { h: 0, s: 0, v: 0 }; domains = { h: [0, 360], s: [0, 100], v: [0, 100] } as Domain; chromaBind = chroma.hsv; spaceName = "hsv" as const; - dimensionToChannel = { x: "s", y: "v", z: "h" }; + dimensionToChannel = { x: "v", y: "h", z: "s" }; toString(): string { const [h, s, v] = this.stringChannels(); return `color(hsv ${h} ${s} ${v})`; diff --git a/src/lib/utils.ts b/src/lib/utils.ts index 97f0e25c..2f4c25e6 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -211,17 +211,11 @@ function makeExtents(arr: number[][]) { ) as { x: number[]; y: number[]; z: number[] }; } -export function makePosAndSizes( - pickedColors: number[][], - config: (typeof colorPickerConfig)[string] -) { +// works over screen space coordinates +export function makePosAndSizes(pickedColors: number[][]) { 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 makePos = (key: keyof typeof selectionExtents) => + selectionExtents[key][0]; const diff = (key: keyof typeof selectionExtents) => { const [a, b] = selectionExtents[key]; return Math.abs(a - b); @@ -233,13 +227,6 @@ export function makePosAndSizes( 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 }; }