From fd8a0690c9cfe297e96bf679f363b7092ae33e63 Mon Sep 17 00:00:00 2001
From: Daniel Imms <2193314+Tyriar@users.noreply.github.com>
Date: Wed, 14 Dec 2022 09:28:25 -0800
Subject: [PATCH] Add VT arrow buttons

Part of #2064
---
 demo/client.ts  | 31 +++++++++++++++++++++++++++++++
 demo/index.html |  5 +++++
 2 files changed, 36 insertions(+)

diff --git a/demo/client.ts b/demo/client.ts
index 092e5636..759b0658 100644
--- a/demo/client.ts
+++ b/demo/client.ts
@@ -228,6 +228,7 @@ if (document.location.pathname === '/test') {
   document.getElementById('sgr-test').addEventListener('click', sgrTest);
   document.getElementById('add-decoration').addEventListener('click', addDecoration);
   document.getElementById('add-overview-ruler').addEventListener('click', addOverviewRuler);
+  addVtButtons();
 }
 
 function createTerminal(): void {
@@ -1091,3 +1092,33 @@ function addOverviewRuler(): void {
   );
   console.groupEnd();
 };
+
+function addVtButtons(): void {
+  function csi(e: string): string {
+    return `\x1b[${e}`;
+  }
+
+  const vtCUU = (): void => term.write(csi('A'));
+  const vtCUD = (): void => term.write(csi('B'));
+  const vtCUF = (): void => term.write(csi('C'));
+  const vtCUB = (): void => term.write(csi('D'));
+
+  function createButton(name: string, writeCsi: string): HTMLElement {
+    const element = document.createElement('button');
+    element.textContent = name;
+    element.addEventListener('click', () => term.write(csi(writeCsi)));
+    return element;
+  }
+  const vtFragment = document.createDocumentFragment();
+  const buttonSpecs: { [key: string]: string } = {
+    A: 'CUU ↑',
+    B: 'CUD ↓',
+    C: 'CUF →',
+    D: 'CUB ←'
+  };
+  for (const s of Object.keys(buttonSpecs)) {
+    vtFragment.appendChild(createButton(buttonSpecs[s], s));
+  }
+
+  document.querySelector('#vt-container').appendChild(vtFragment);
+}
diff --git a/demo/index.html b/demo/index.html
index 0a7c8bb3..5662f361 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -23,6 +23,7 @@
           <button id= "addonsbutton" class="tabLinks" onclick="openSection(event, 'addons')">Addons</button>
           <button id= "stylebutton" class="tabLinks" onclick="openSection(event, 'style')">Style</button>
           <button id= "testbutton" class="tabLinks" onclick="openSection(event, 'test')">Test</button>
+          <button id= "vtbutton" class="tabLinks" onclick="openSection(event, 'vt')">VT</button>
         </div>
         <div id="options" class="tabContent">
           <h3>Options</h3>
@@ -89,6 +90,10 @@
             </dl>
           </div>
         </div>
+        <div id="vt" class="tabContent">
+          <h3>VT</h3>
+          <div id="vt-container"></div>
+        </div>
       </div>
     </div>
     <input type="checkbox" id="texture-atlas-zoom"/>