Merge pull request #4695 from PerBothner/demo

demo: auto-resize and other tweaks

demo/client.ts

@@ -57,6 +57,7 @@ let protocol;
 let socketURL;
 let socket;
 let pid;
+let autoResize: boolean = true;
 
 type AddonType = 'attach' | 'canvas' | 'fit' | 'image' | 'search' | 'serialize' | 'unicode11' | 'web-links' | 'webgl' | 'ligatures';
 
@@ -316,6 +317,13 @@ function createTerminal(): void {
 
   term.focus();
 
+  const resizeObserver = new ResizeObserver(entries => {
+    if (autoResize) {
+      addons.fit.instance.fit();
+    }
+  });
+  resizeObserver.observe(terminalContainer);
+
   addDomListener(paddingElement, 'change', setPadding);
 
   addDomListener(actionElements.findNext, 'keydown', (e) => {
@@ -346,9 +354,6 @@ function createTerminal(): void {
   // fit is called within a setTimeout, cols and rows need this.
   setTimeout(async () => {
     initOptions(term);
-    // TODO: Clean this up, opt-cols/rows doesn't exist anymore
-    (document.getElementById(`opt-cols`) as HTMLInputElement).value = term.cols;
-    (document.getElementById(`opt-rows`) as HTMLInputElement).value = term.rows;
     paddingElement.value = '0';
 
     // Set terminal size again to set the specific dimensions on the demo
@@ -413,6 +418,7 @@ function initOptions(term: TerminalType): void {
     'cancelEvents',
     'convertEol',
     'termName',
+    'cols', 'rows', // subsumed by "size" (cols_rows) option
     // Complex option
     'theme',
     'windowOptions'
@@ -426,7 +432,8 @@ function initOptions(term: TerminalType): void {
     fontWeightBold: ['normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
     logLevel: ['trace', 'debug', 'info', 'warn', 'error', 'off'],
     theme: ['default', 'xtermjs', 'sapphire', 'light'],
-    wordSeparator: null
+    wordSeparator: null,
+    cols_rows: null
   };
   const options = Object.getOwnPropertyNames(term.options);
   const booleanOptions = [];
@@ -459,7 +466,9 @@ function initOptions(term: TerminalType): void {
   });
   html += '</div><div class="option-group">';
   Object.keys(stringOptions).forEach(o => {
-    if (stringOptions[o]) {
+    if (o === 'cols_rows') {
+      html += `<div class="option"><label>size (<var>cols</var><code>x</code><var>rows</var> or <code>auto</code>) <input id="opt-${o}" type="text" value="auto"/></label></div>`;
+    } else if (stringOptions[o]) {
       const selectedOption = o === 'theme' ? 'xtermjs' : term.options[o];
       html += `<div class="option"><label>${o} <select id="opt-${o}">${stringOptions[o].map(v => `<option ${v === selectedOption ? 'selected' : ''}>${v}</option>`).join('')}</select></label></div>`;
     } else {
@@ -483,11 +492,7 @@ function initOptions(term: TerminalType): void {
     const input = document.getElementById(`opt-${o}`) as HTMLInputElement;
     addDomListener(input, 'change', () => {
       console.log('change', o, input.value);
-      if (o === 'rows') {
-        term.resize(term.cols, parseInt(input.value));
-      } else if (o === 'cols') {
-        term.resize(parseInt(input.value), term.rows);
-      } else if (o === 'lineHeight') {
+      if (o === 'lineHeight') {
         term.options.lineHeight = parseFloat(input.value);
       } else if (o === 'scrollSensitivity') {
         term.options.scrollSensitivity = parseFloat(input.value);
@@ -506,7 +511,17 @@ function initOptions(term: TerminalType): void {
     addDomListener(input, 'change', () => {
       console.log('change', o, input.value);
       let value: any = input.value;
-      if (o === 'theme') {
+      if (o === 'cols_rows') {
+        let m = input.value.match(/^([0-9]+)x([0-9]+)$/);
+        if (m) {
+          autoResize = false;
+          term.resize(parseInt(m[1]), parseInt(m[2]));
+        } else {
+          autoResize = true;
+          input.value = 'auto';
+          updateTerminalSize();
+        }
+      } else if (o === 'theme') {
         switch (input.value) {
           case 'default':
             value = undefined;
@@ -673,8 +688,10 @@ function addDomListener(element: HTMLElement, type: string, handler: (...args: a
 }
 
 function updateTerminalSize(): void {
-  const width = (term._core._renderService.dimensions.css.canvas.width + term._core.viewport.scrollBarWidth).toString() + 'px';
-  const height = (term._core._renderService.dimensions.css.canvas.height).toString() + 'px';
+  const width = autoResize ? '100%'
+    : (term._core._renderService.dimensions.css.canvas.width + term._core.viewport.scrollBarWidth).toString() + 'px';
+  const height = autoResize ? '100%'
+    : (term._core._renderService.dimensions.css.canvas.height).toString() + 'px';
   terminalContainer.style.width = width;
   terminalContainer.style.height = height;
   addons.fit.instance.fit();

demo/index.html

@@ -14,16 +14,16 @@
   <body>
     <h1 style="color: #2D2E2C">xterm.js: A terminal for the <em style="color: #5DA5D5">web</em></h1>
     <div id="container">
-      <div id="grid">
+      <div class="grid">
         <div id="terminal-container"></div>
       </div>
-      <div id="grid">
+      <div class="grid">
         <div class="tab">
-          <button id= "optionsbutton" class="tabLinks" onclick="openSection(event, 'options')">Options</button>
-          <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>
+          <button id="optionsbutton" class="tabLinks" onclick="openSection(event, 'options')">Options</button>
+          <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>
@@ -118,9 +118,11 @@
         </div>
       </div>
     </div>
-    <input type="checkbox" id="texture-atlas-zoom"/>
-    <label for="texture-atlas-zoom">Zoom texture atlas</label>
-    <div id="texture-atlas"></div>
+    <div id="texture-atlas-container">
+      <input type="checkbox" id="texture-atlas-zoom"/>
+      <label for="texture-atlas-zoom">Zoom texture atlas</label>
+      <div id="texture-atlas"></div>
+    </div>
       <script src="dist/client-bundle.js" defer ></script>
       <script>
       var tab = localStorage.getItem("tab");

demo/style.css

@@ -9,8 +9,7 @@ h1 {
 }
 
 #terminal-container {
-    width: 800px;
-    height: 450px;
+    height: 60%;
     margin: 0 auto;
     padding: 2px;
 }
@@ -46,11 +45,16 @@ pre {
 #container {
     display: flex;
 }
-#grid {
+.grid {
     flex: 1;
     /* max-height: 80vh;
     overflow-y: auto; */
     width: 100%;
+    min-width: 100px;
+}
+div:first-of-type.grid {
+    flex: 2;
+    height: 60vh;
 }
 .tab {
     overflow: hidden;
@@ -86,8 +90,6 @@ pre {
     padding: 6px 12px;
     border: 1px solid #ccc;
     border-top: none;
-    max-height: 100vh;
-    overflow-y: auto;
 }
 
 #texture-atlas-zoom:checked + label + #texture-atlas canvas {
@@ -106,3 +108,6 @@ pre {
 .vt-button * {
   margin-right: 1em;
 }
+input#opt-cols_rows {
+    width: 6em;
+}