Skip to content

Commit

Permalink
make color map a bit better
Browse files Browse the repository at this point in the history
  • Loading branch information
@saboooor
saboooor committed Jun 13, 2024
1 parent 3a59ced commit 0201344
Show file tree
Hide file tree
Showing 3 changed files with 27 additions and 21 deletions.
6 changes: 2 additions & 4 deletions src/components/util/HexUtils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,10 +53,8 @@ export class Gradient {
color = this.gradients[0].colorAt(adjustedStep);
}
else {
const segment = this.gradients[this.gradient].upperRange - this.gradients[this.gradient].lowerRange;
const index = Math.min(Math.floor(adjustedStep / segment), this.gradients.length - 1);
const gradient = this.gradients[index];
color = gradient.colorAt(adjustedStep);
const gradient = this.gradients[this.gradient];
color = gradient?.colorAt(adjustedStep);
if (adjustedStep >= gradient.upperRange) {
this.gradient++;
if (this.gradient > this.gradients.length) this.gradient = 0;
Expand Down
21 changes: 12 additions & 9 deletions src/routes/resources/animtab/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,13 +135,14 @@ export default component$(() => {
<div class="flex gap-2 my-4 items-center">
<div class="w-full h-3 rounded-full items-center relative" id="colormap"
style={`background: linear-gradient(to right, ${sortColors(store.colors).map(color => `${color.hex} ${color.pos}%`).join(', ')});`}
onClick$={(e, el) => {
onMouseDown$={(e, el) => {
if (e.target != el) return;
const rect = el.getBoundingClientRect();
const pos = (e.clientX - rect.left) / rect.width * 100;
const pos = Math.round((e.clientX - rect.left) / rect.width * store.text.length) / store.text.length * 100;
if (store.colors.find(c => c.pos == pos)) return;
const newColors = [...store.colors];
newColors.push({ hex: getRandomColor(), pos });
store.colors = newColors;
store.colors = sortColors(newColors);
}}
onMouseEnter$={(e, el) => {
const abortController = new AbortController();
Expand All @@ -151,8 +152,10 @@ export default component$(() => {
addbutton.classList.add('opacity-0');
return;
}
const pos = Math.round((e.clientX - el.getBoundingClientRect().left) / el.getBoundingClientRect().width * store.text.length) / store.text.length * 100;
if (store.colors.find(c => c.pos == pos)) return;
addbutton.classList.remove('opacity-0');
addbutton.style.left = `${(e.clientX - el.getBoundingClientRect().left) / el.getBoundingClientRect().width * 100}%`;
addbutton.style.left = `${pos}%`;
}, { signal: abortController.signal });
el.addEventListener('mouseleave', () => {
const addbutton = document.getElementById('add-button')!;
Expand All @@ -172,11 +175,11 @@ export default component$(() => {
const colormap = document.getElementById('colormap')!;
const rect = colormap.getBoundingClientRect();
document.addEventListener('mousemove', e => {
const newColors = [...store.colors];
newColors[i].pos = (e.clientX - rect.left) / rect.width * 100;
if (newColors[i].pos < 0) newColors[i].pos = 0;
if (newColors[i].pos > 100) newColors[i].pos = 100;
store.colors = newColors;
let pos = Math.round((((e.clientX - rect.left) / rect.width) * store.text.length)) / store.text.length * 100;
if (pos < 0) pos = 0;
if (pos > 100) pos = 100;
if (store.colors.find(c => c.pos == pos)) return;
color.pos = pos;
}, { signal: abortController.signal });
document.addEventListener('mouseup', () => {
abortController.abort();
Expand Down
21 changes: 13 additions & 8 deletions src/routes/resources/rgb/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ export default component$(() => {
Wanna automate generating gradients or use this in your own project? We have <a class="text-blue-400 hover:underline" href="/api/v2/docs">an API!</a>
</h3>

<TextArea output id="output" class={{ 'font-mc': true }} value={generateOutput(store.text, store.colors, store.format, store.prefixsuffix, store.trimspaces, store.bold, store.italic, store.underline, store.strikethrough)}>
<TextArea output id="output" class={{ 'font-mc': true }} value={generateOutput(store.text, sortColors(store.colors), store.format, store.prefixsuffix, store.trimspaces, store.bold, store.italic, store.underline, store.strikethrough)}>
<Header subheader={t('color.outputSubtitle@@Copy-paste this for RGB text!')}>
{t('color.output@@Output')}
</Header>
Expand All @@ -82,7 +82,7 @@ export default component$(() => {
{(() => {
const text = store.text ? store.text : 'birdflop';

const colors = store.colors.map((color) => ({ rgb: convertToRGB(color.hex), pos: color.pos }));
const colors = sortColors(store.colors).map((color) => ({ rgb: convertToRGB(color.hex), pos: color.pos }));
if (colors.length < 2) return text;

const gradient = new Gradient(colors, text.length);
Expand All @@ -107,10 +107,11 @@ export default component$(() => {
<div class="flex gap-2 my-4 items-center">
<div class="w-full h-3 rounded-full items-center relative" id="colormap"
style={`background: linear-gradient(to right, ${sortColors(store.colors).map(color => `${color.hex} ${color.pos}%`).join(', ')});`}
onClick$={(e, el) => {
onMouseDown$={(e, el) => {
if (e.target != el) return;
const rect = el.getBoundingClientRect();
const pos = (e.clientX - rect.left) / rect.width * 100;
const pos = Math.round((e.clientX - rect.left) / rect.width * store.text.length) / store.text.length * 100;
if (store.colors.find(c => c.pos == pos)) return;
const newColors = [...store.colors];
newColors.push({ hex: getRandomColor(), pos });
store.colors = newColors;
Expand All @@ -123,8 +124,10 @@ export default component$(() => {
addbutton.classList.add('opacity-0');
return;
}
const pos = Math.round((e.clientX - el.getBoundingClientRect().left) / el.getBoundingClientRect().width * store.text.length) / store.text.length * 100;
if (store.colors.find(c => c.pos == pos)) return;
addbutton.classList.remove('opacity-0');
addbutton.style.left = `${(e.clientX - el.getBoundingClientRect().left) / el.getBoundingClientRect().width * 100}%`;
addbutton.style.left = `${pos}%`;
}, { signal: abortController.signal });
el.addEventListener('mouseleave', () => {
const addbutton = document.getElementById('add-button')!;
Expand All @@ -144,9 +147,11 @@ export default component$(() => {
const colormap = document.getElementById('colormap')!;
const rect = colormap.getBoundingClientRect();
document.addEventListener('mousemove', e => {
color.pos = (e.clientX - rect.left) / rect.width * 100;
if (color.pos < 0) color.pos = 0;
if (color.pos > 100) color.pos = 100;
let pos = Math.round((((e.clientX - rect.left) / rect.width) * store.text.length)) / store.text.length * 100;
if (pos < 0) pos = 0;
if (pos > 100) pos = 100;
if (store.colors.find(c => c.pos == pos)) return;
color.pos = pos;
}, { signal: abortController.signal });
document.addEventListener('mouseup', () => {
abortController.abort();
Expand Down

0 comments on commit 0201344

Please sign in to comment.