From bd5ad627ce822c31a47099bc3ccf261e14fea590 Mon Sep 17 00:00:00 2001 From: Andrew Michael McNutt Date: Thu, 18 Jan 2024 09:43:53 -0800 Subject: [PATCH] abstract all the coordinates --- src/components/ColorScatterPlot.svelte | 52 +++++++++++-------- src/components/KeyboardHooks.svelte | 13 ++--- .../contextual-tools/AlignSelection.svelte | 8 +-- .../contextual-tools/DistributePoints.svelte | 12 +++-- src/lib/Color.ts | 28 +++++++--- src/lib/utils.ts | 24 +++++---- 6 files changed, 83 insertions(+), 54 deletions(-) diff --git a/src/components/ColorScatterPlot.svelte b/src/components/ColorScatterPlot.svelte index 252a6b7c..d3aa8080 100644 --- a/src/components/ColorScatterPlot.svelte +++ b/src/components/ColorScatterPlot.svelte @@ -50,20 +50,15 @@ $: xRange = config.xDomain; $: domainXScale = scaleLinear().domain([0, 1]).range(xRange); - const makeDomain = (range: number[], extent: number[], scale: any) => [ - // range[0] > range[1] ? scale(extent[1]) : scale(extent[0]), - // range[0] > range[1] ? scale(extent[0]) : scale(extent[1]), - scale(extent[0]), - scale(extent[1]), - ]; + $: xScale = scaleLinear() - .domain(makeDomain(xRange, extents.x, domainXScale)) + .domain([domainXScale(extents.x[0]), domainXScale(extents.x[1])]) .range([0, plotWidth]); $: yRange = config.yDomain; $: domainYScale = scaleLinear().domain([0, 1]).range(yRange); $: yScale = scaleLinear() - .domain(makeDomain(yRange, extents.y, domainYScale)) + .domain([domainYScale(extents.y[0]), domainYScale(extents.y[1])]) .range([0, plotHeight]); $: zRange = config.zDomain; @@ -72,7 +67,12 @@ .domain([domainLScale(extents.z[0]), domainLScale(extents.z[1])]) .range([0, plotHeight]); - $: pos = makePosAndSizes(pickedColors, xScale, yScale, zScale); + $: miniConfig = { + xIdx: config.xChannelIndex, + yIdx: config.yChannelIndex, + zIdx: config.zChannelIndex, + }; + $: pos = makePosAndSizes(pickedColors, xScale, yScale, zScale, miniConfig); let dragging: false | { x: number; y: number } = false; let dragBox: false | { x: number; y: number } = false; @@ -92,14 +92,18 @@ x: x - dragging.x, y: y - dragging.y, }; - const [l, a, b] = originalColor.toChannels(); - const newX = xScale.invert(xScale(a) + screenPosDelta.x); - const newY = yScale.invert(yScale(b) + screenPosDelta.y); - - return colorFromChannels( - [l, clampToRange(newX, xRange), clampToRange(newY, yRange)], - colorSpace + const { xIdx, yIdx } = miniConfig; + const coords = originalColor.toChannels(); + coords[xIdx] = clampToRange( + xScale.invert(xScale(coords[xIdx]) + screenPosDelta.x), + xRange ); + coords[yIdx] = clampToRange( + yScale.invert(yScale(coords[yIdx]) + screenPosDelta.y), + yRange + ); + + return colorFromChannels(coords, colorSpace); }; const eventToColorZ = (e: any, color: Color, originalColor: Color): Color => { @@ -107,10 +111,14 @@ return color; const screenPosDelta = toXY(e).y - dragging.y; - const [l, a, b] = originalColor.toChannels(); - const newZ = zScale.invert(zScale(l) + screenPosDelta); + const { zIdx } = miniConfig; + const coords = originalColor.toChannels(); + coords[zIdx] = clampToRange( + zScale.invert(zScale(coords[zIdx]) + screenPosDelta), + zRange + ); - return colorFromChannels([clampToRange(newZ, zRange), a, b], colorSpace); + return colorFromChannels(coords, colorSpace); }; function stopDrag() { @@ -238,9 +246,9 @@ let hoveredPoint: Color | false = false; let hoverPoint = (x: typeof hoveredPoint) => (hoveredPoint = x); - $: x = (point: Color) => xScale(point.toChannels()[1]); - $: y = (point: Color) => yScale(point.toChannels()[2]); - $: z = (point: Color) => zScale(point.toChannels()[0]); + $: x = (point: Color) => xScale(point.toChannels()[config.xChannelIndex]); + $: y = (point: Color) => yScale(point.toChannels()[config.yChannelIndex]); + $: z = (point: Color) => zScale(point.toChannels()[config.zChannelIndex]); function clickResponse(e: any, i: number) { if (e.metaKey || e.shiftKey) { diff --git a/src/components/KeyboardHooks.svelte b/src/components/KeyboardHooks.svelte index bc589e10..3543e658 100644 --- a/src/components/KeyboardHooks.svelte +++ b/src/components/KeyboardHooks.svelte @@ -62,19 +62,20 @@ if (!focusSet.has(idx)) { return color; } - const [l, a, b] = color.toChannels(); - const channels = Object.keys(color.channels); + const channels = color.toChannels(); + const xVal = channels[config.xChannelIndex]; + const yVal = channels[config.yChannelIndex]; if (key === "arrowdown") { - color.setChannel(channels[2], b + verticalDir * step); + color.setChannel(config.yChannel, yVal + verticalDir * step); } if (key === "arrowup") { - color.setChannel(channels[2], b - verticalDir * step); + color.setChannel(config.yChannel, yVal - verticalDir * step); } if (key === "arrowleft") { - color.setChannel(channels[1], a - horizontalDir * step); + color.setChannel(config.xChannel, xVal - horizontalDir * step); } if (key === "arrowright") { - color.setChannel(channels[1], a + horizontalDir * step); + color.setChannel(config.xChannel, xVal + horizontalDir * step); } return color; }); diff --git a/src/content-modules/contextual-tools/AlignSelection.svelte b/src/content-modules/contextual-tools/AlignSelection.svelte index cd3036be..f04b6f07 100644 --- a/src/content-modules/contextual-tools/AlignSelection.svelte +++ b/src/content-modules/contextual-tools/AlignSelection.svelte @@ -34,12 +34,12 @@ on:click={() => { const newCoordinate = op(...focusLabs.map((x) => x[pos])); colorStore.setCurrentPalColors( - mapFocusedColors(([l, a, b]) => { + mapFocusedColors(([a, b, c]) => { return colorFromChannels( [ - pos === 0 ? newCoordinate : l, - pos === 1 ? newCoordinate : a, - pos === 2 ? newCoordinate : b, + pos === 0 ? newCoordinate : a, + pos === 1 ? newCoordinate : b, + pos === 2 ? newCoordinate : c, ], colorSpace ); diff --git a/src/content-modules/contextual-tools/DistributePoints.svelte b/src/content-modules/contextual-tools/DistributePoints.svelte index 6edbcb8e..f0864dc7 100644 --- a/src/content-modules/contextual-tools/DistributePoints.svelte +++ b/src/content-modules/contextual-tools/DistributePoints.svelte @@ -1,5 +1,5 @@