Disable word wrap in layout textarea.

Add duplicate LED index warning. Show layout errors in div, not alert.
jclark2019 · Sep 22, 2023 · 886e770 · 886e770
1 parent 5d4bd3a
commit 886e770
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
diff --git a/index.htm b/index.htm
@@ -161,7 +161,7 @@ <h6 class="mb-2 text-muted">Choose one of the tabs below and paste in your input
                     <a href="https://sheets.google.com" target="_blank" rel="noopener noreferrer">Google Sheets</a>
                     or other spreadsheet in tab-delimited text format, with a unique LED index in each cell. LED indexes should start at zero. Cells without an LED should be empty.
                   </div>
-                  <textarea class="form-control" id="textAreaLayout" rows="7">
+                  <textarea class="form-control" id="textAreaLayout" rows="7" style="white-space: pre; overflow-wrap: normal; overflow-x: auto;">
 	0	1	2	3	4	5	6		7	8	9	10	11	12	13	
 30	29	28	27	26	25	24	23	22	21	20	19	18	17	16	15	14
 31	32	33	34	35	36	37	38	39	40	41	42	43	44	45	46	47
@@ -177,6 +177,7 @@ <h6 class="mb-2 text-muted">Choose one of the tabs below and paste in your input
                       <button id="buttonLinkLayout" type="button" class="btn btn-sm btn-outline-secondary">Link</button>
                     </div>
                     <div class="input-group ms-2">
+                      <div id="layoutError" class="text-danger"></div>
                       <div class="invisible input-group-text" id="divCopyLayoutInput"></div>
                     </div>
                   </div>

diff --git a/index.js b/index.js
@@ -445,11 +445,15 @@ function parseCoordinates(value) {
 }
 
 function parseLayout(value) {
+  document.getElementById('layoutError').innerText = '';
+
   if (!value) value = textAreaLayout.value;
   const results = parseLayoutText(value);
 
   if (results.minIndex !== 0) {
-    alert(`Layout should start at 0 instead of ${results.minIndex}`);
+    document.getElementById('layoutError').innerText = `Layout should start at 0 instead of ${results.minIndex}`;
+  } else if (results.duplicateIndices.length > 0) {
+    document.getElementById('layoutError').innerText = `Duplicate indices found: ${results.duplicateIndices.join(', ')}`;
   }
 
   // destructure the results into our global variables
@@ -598,7 +602,7 @@ function render() {
 
     if (showPreviewNumbers) {
       context.fillStyle = !showPreviewLEDs ? fillStyle : "white";
-      context.fillText(led.index, x + ledWidth / 2, y + ledHeight / 2);
+      context.fillText(i, x + ledWidth / 2, y + ledHeight / 2);
     }
   }
 

diff --git a/js/layout.js b/js/layout.js
@@ -14,6 +14,8 @@ export function parseLayoutText(text) {
 
   let minX, minY, maxX, maxY, width, height, minIndex;
 
+  const duplicateIndices = [];
+
   minX = minY = minIndex = 1000000;
   maxX = maxY = -1000000;
 
@@ -34,6 +36,10 @@ export function parseLayoutText(text) {
 
       if (index < minIndex) minIndex = index;
 
+      if (leds.some(l => l.index === index)) {
+        duplicateIndices.push(index);
+      }
+
       leds.push({
         index,
         x,
@@ -55,5 +61,6 @@ export function parseLayoutText(text) {
     rows,
     width,
     minIndex,
+    duplicateIndices,
   };
 }