Skip to content

Commit

Permalink
clean up
Browse files Browse the repository at this point in the history
  • Loading branch information
mcnuttandrew committed Jan 18, 2024
1 parent 9bd8fc1 commit d156eea
Show file tree
Hide file tree
Showing 4 changed files with 19 additions and 39 deletions.
7 changes: 3 additions & 4 deletions src/components/ColorScatterPlot.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -329,7 +329,6 @@
$: guideProps = {
xScale,
yScale,
rScale,
plotHeight,
plotWidth,
axisColor,
Expand Down Expand Up @@ -358,7 +357,7 @@
>
<g transform={`translate(${margin.left}, ${margin.top})`}>
{#if config.isPolar}
<ColorScatterPlotPolarGuide {...guideProps} />
<ColorScatterPlotPolarGuide {...guideProps} {rScale} />
{:else}
<ColorScatterPlotXyGuides {...guideProps} />
{/if}
Expand Down Expand Up @@ -583,7 +582,7 @@
-moz-transition: r 0.2s ease-in-out;
}
svg {
/* svg {
overflow: visible;
}
} */
</style>
31 changes: 8 additions & 23 deletions src/components/ColorScatterPlotPolarGuide.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -17,70 +17,55 @@
export let textColor: string;
$: config = colorPickerConfig[colorSpace as keyof typeof colorPickerConfig];
// $: xNonDimScale = scaleLinear().domain([0, 1]).range(xScale.domain());
// $: yNonDimScale = scaleLinear().domain([0, 1]).range(yScale.domain());
$: rNonDimScale = scaleLinear().domain([0, 1]).range(rScale.domain());
$: focusedColors = $focusStore.focusedColors;
$: colors = $colorStore.currentPal.colors;
// $: 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])}`,
},
};
$: miniConfig = {
xIdx: config.xChannelIndex,
yIdx: config.yChannelIndex,
zIdx: config.zChannelIndex,
};
// $: { xIdx, yIdx, zIdx } = miniConfig;
const angleBgResolution = 30;
const rBgResolution = 5;
const avgNums = (nums: number[]) =>
nums.reduce((acc, x) => acc + x, 0) / nums.length;
$: fColors = focusedColors.map((x) => colors[x].toChannels());
$: fillColor = (i: number, j: number) => {
const { xIdx, yIdx, zIdx } = miniConfig;
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]));
coords[zIdx] = avgZChannel;
return colorFromChannels(coords, colorSpace as any).toDisplay();
}
return "#ffffff00";
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;
coords[zIdx] = avgNums(fColors.map((x) => x[zIdx]));
return colorFromChannels(coords, colorSpace as any).toDisplay();
};
$: arcScale = arc();
$: angleScale = scaleLinear()
Expand Down
18 changes: 7 additions & 11 deletions src/components/ColorScatterPlotXYGuides.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -54,18 +54,14 @@
const bgResolution = 25;
const avgNums = (nums: number[]) =>
nums.reduce((acc, x) => acc + x, 0) / nums.length;
$: fColors = focusedColors.map((x) => colors[x].toChannels());
$: fillColor = (i: number, j: number) => {
if (dragging && focusedColors.length === 1) {
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";
const coords = [0, 0, 0] as [number, number, number];
coords[config.xChannelIndex] = xNonDimScale(i / bgResolution);
coords[config.yChannelIndex] = yNonDimScale(j / bgResolution);
const avgZChannel = avgNums(fColors.map((x) => x[config.zChannelIndex]));
coords[config.zChannelIndex] = avgZChannel;
return colorFromChannels(coords, colorSpace as any).toDisplay();
};
</script>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@
</script>

<Tooltip>
<span slot="content" let:onClick>
<span slot="content" let:onClick class="max-w-lg">
<div class="flex">
<input bind:value={searchString} placeholder="Search for palettes" />
<div>
Expand Down

0 comments on commit d156eea

Please sign in to comment.