From 02013446eff5afb0ee8ab3fd80083a06a80db448 Mon Sep 17 00:00:00 2001
From: saboooooor <saboor547@gmail.com>
Date: Thu, 13 Jun 2024 03:25:53 -0600
Subject: [PATCH] make color map a bit better

---
 src/components/util/HexUtils.ts        |  6 ++----
 src/routes/resources/animtab/index.tsx | 21 ++++++++++++---------
 src/routes/resources/rgb/index.tsx     | 21 +++++++++++++--------
 3 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/src/components/util/HexUtils.ts b/src/components/util/HexUtils.ts
index 4a1e5aa4..1721051d 100644
--- a/src/components/util/HexUtils.ts
+++ b/src/components/util/HexUtils.ts
@@ -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;
diff --git a/src/routes/resources/animtab/index.tsx b/src/routes/resources/animtab/index.tsx
index 403325ee..058a38c4 100644
--- a/src/routes/resources/animtab/index.tsx
+++ b/src/routes/resources/animtab/index.tsx
@@ -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();
@@ -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')!;
@@ -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();
diff --git a/src/routes/resources/rgb/index.tsx b/src/routes/resources/rgb/index.tsx
index 3b01b1a4..08ebb2a3 100644
--- a/src/routes/resources/rgb/index.tsx
+++ b/src/routes/resources/rgb/index.tsx
@@ -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>
@@ -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);
@@ -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;
@@ -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')!;
@@ -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();