Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

demo: auto-resize and other tweaks #4695

Merged
merged 6 commits into from
Aug 20, 2023
Merged

demo: auto-resize and other tweaks #4695

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6e39d03
Some html/css cleanps in demo
PerBothner Aug 18, 2023
e2d699c
Styling tweaks for demo
PerBothner Aug 19, 2023
025e850
implement autoResize for terminal in demo
PerBothner Aug 19, 2023
a20599e
Merge branch 'master' into demo
PerBothner Aug 19, 2023
6021e6c
Merge branch 'master' into demo
Tyriar Aug 20, 2023
1529e0b
Remove unused variable
Tyriar Aug 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 30 additions & 13 deletions demo/client.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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) => {
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -413,6 +418,7 @@ function initOptions(term: TerminalType): void {
'cancelEvents',
'convertEol',
'termName',
'cols', 'rows', // subsumed by "size" (cols_rows) option
// Complex option
'theme',
'windowOptions'
Expand All @@ -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 = [];
Expand Down Expand Up @@ -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 {
Expand All @@ -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);
Expand All @@ -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;
Expand Down Expand Up @@ -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();
Expand Down
22 changes: 12 additions & 10 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -118,9 +118,11 @@ <h3>VT</h3>
</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");
Expand Down
15 changes: 10 additions & 5 deletions demo/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,7 @@ h1 {
}

#terminal-container {
width: 800px;
height: 450px;
height: 60%;
margin: 0 auto;
padding: 2px;
}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand All @@ -106,3 +108,6 @@ pre {
.vt-button * {
margin-right: 1em;
}
input#opt-cols_rows {
width: 6em;
}
Loading