Auto textarea size

kakol20 · May 26, 2024 · b3e4464 · b3e4464
1 parent 97f7e6a
commit b3e4464
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 5 deletions.
diff --git a/src/ColourSpace.js b/src/ColourSpace.js
@@ -77,6 +77,11 @@ class OkLab {
     return new OkLab(this.l, this.a, this.b);
   }
 
+  get CSSColor() {
+    const l = Math.max(Math.min(this.l, 1), 0);
+    return 'oklab(' + MathCustom.Round(l, 3) + ', ' + MathCustom.Round(this.a, 3) + ', ' + MathCustom.Round(this.b, 3) + ')';
+  }
+
   static mix(lab1, lab2, t) {
     let out = lab2.copy();
     out.sub(lab1);

diff --git a/src/MathCustom.js b/src/MathCustom.js
@@ -17,6 +17,11 @@ class MathCustom {
     return ((numer % denom) + denom) % denom;
   }
 
+  static Round(numer, places = 0) {
+    const mult = Math.max(places, 0) === 0 ? 1 : Math.pow(10, places);
+    return Math.round((numer + Number.EPSILON) * mult) / mult;
+  }
+
   static TAU = Math.PI * 2;
   static DegToRad = Math.PI / 180;
 }
diff --git a/src/sketch.js b/src/sketch.js
@@ -51,21 +51,34 @@ function generate() {
     console.log('Box Width', boxWidth);
 
     // text area
-    let textArea = '<textarea style=\"position: absolute; left: 10px;';
-    textArea += ' top: ' + (top + 10 + boxHeight) + 'px;\"';
-    textArea += ' rows=\"' + (count + 1) + '\">';
+    let textArea = '<textarea wrap="off" id="textOut" style="position: absolute; left: 10px;';
+    textArea += ' height: auto; width: auto;';
+    // textArea += ' overflow-wrap: normal; overflow-x: scroll;'
+    textArea += ' top: ' + (top + 10 + boxHeight) + 'px;"';
+    // textArea += ' rows=\"' + (count + 1) + '\">';
+    // textArea += ' style="height: auto;"';
+    textArea += '>';
+    let textAreaText = ['', ''];
 
     for (let i = 0; i < count; i++) {
       const t = i / (count - 1);
       const left = 10 + (i * boxWidth);
 
       const valLab = OkLab.mix(col1Lab, col2Lab, t);
       const valRGB = OkLab.OkLabtosRGB(valLab);
-      out += generateDiv(left, top, valRGB.CSSColor, boxWidth, boxHeight);
-      textArea += valRGB.CSSColor + '\n';
+      out += generateDiv(left, top, valLab.CSSColor, boxWidth, boxHeight);
+      // textArea += valRGB.CSSColor + ' - ' + valLab.CSSColor + '\n';
+
+      textAreaText[0] += valRGB.CSSColor + (i + 1 === count ? '' : '\n');
+      textAreaText[1] += valLab.CSSColor + (i + 1 === count ? '' : '\n');
     }
+    textArea += textAreaText[0] + '\n\n' + textAreaText[1];
     textArea += '</textarea>';
 
     $('#output').html(out + textArea);
+
+    $('#textOut').css('height', $('#textOut').prop('scrollHeight') + 'px');
+    $('#textOut').css('width', ($('#textOut').prop('scrollWidth') + 10) + 'px');
+
   }
 }