waveterm/xterm.js
0
0
Fork 0
mirror of https://github.com/wavetermdev/xterm.js.git synced 2026-08-05 13:43:48 -07:00
Code Issues Packages Projects Releases Wiki Activity

Add web fonts window to demo

Browse Source
This commit is contained in:
Daniel Imms
2026-01-03 15:31:24 -08:00
parent 5e95dc1f10
commit a35223a819
4 changed files with 72 additions and 1452 deletions
Download Patch File Download Diff File Expand all files Collapse all files
demo/client.ts
-1450
View File
File diff suppressed because it is too large Load Diff
demo/client/client.ts
+8 -1
View File
@@ -18,6 +18,7 @@ import { AttachAddon } from '@xterm/addon-attach';
import { AddonImageWindow } from './components/window/addonImageWindow';
import { AddonSearchWindow } from './components/window/addonSearchWindow';
import { AddonSerializeWindow } from './components/window/addonSerializeWindow';
import { AddonWebFontsWindow } from './components/window/addonWebFontsWindow';
import { AddonsWindow } from './components/window/addonsWindow';
import { CellInspectorWindow } from './components/window/cellInspectorWindow';
import { ControlBar } from './components/controlBar';
@@ -32,6 +33,7 @@ import { LigaturesAddon } from '@xterm/addon-ligatures';
import { ProgressAddon } from '@xterm/addon-progress';
import { SearchAddon, ISearchOptions } from '@xterm/addon-search';
import { SerializeAddon } from '@xterm/addon-serialize';
import { WebFontsAddon } from '@xterm/addon-web-fonts';
import { WebLinksAddon } from '@xterm/addon-web-links';
import { WebglAddon } from '@xterm/addon-webgl';
import { Unicode11Addon } from '@xterm/addon-unicode11';
@@ -75,6 +77,7 @@ const addons: AddonCollection = {
progress: { name: 'progress', ctor: ProgressAddon, canChange: true },
search: { name: 'search', ctor: SearchAddon, canChange: true },
serialize: { name: 'serialize', ctor: SerializeAddon, canChange: true },
webFonts: { name: 'webFonts', ctor: WebFontsAddon, canChange: true },
webLinks: { name: 'webLinks', ctor: WebLinksAddon, canChange: true },
webgl: { name: 'webgl', ctor: WebglAddon, canChange: true },
unicode11: { name: 'unicode11', ctor: Unicode11Addon, canChange: true },
@@ -213,7 +216,8 @@ if (document.location.pathname === '/test') {
addonSearchWindow = controlBar.registerWindow(new AddonSearchWindow(typedTerm, addons), { afterId: 'addons', hidden: true, italics: true });
controlBar.registerWindow(new AddonSerializeWindow(typedTerm, addons), { afterId: 'addon-search', hidden: true, italics: true });
controlBar.registerWindow(new AddonImageWindow(typedTerm, addons), { afterId: 'addon-serialize', hidden: true, italics: true });
addonWebglWindow = controlBar.registerWindow(new WebglWindow(typedTerm, addons), { afterId: 'addon-image', hidden: true, italics: true });
controlBar.registerWindow(new AddonWebFontsWindow(typedTerm, addons), { afterId: 'addon-image', hidden: true, italics: true });
addonWebglWindow = controlBar.registerWindow(new WebglWindow(typedTerm, addons), { afterId: 'addon-web-fonts', hidden: true, italics: true });
controlBar.registerWindow(new TestWindow(typedTerm, addons, { disposeRecreateButtonHandler, createNewWindowButtonHandler }), { afterId: 'options' });
actionElements = {
findNext: addonSearchWindow.findNextInput,
@@ -229,6 +233,7 @@ if (document.location.pathname === '/test') {
controlBar.setTabVisible('addon-search', true);
controlBar.setTabVisible('addon-serialize', true);
controlBar.setTabVisible('addon-image', true);
controlBar.setTabVisible('addon-web-fonts', true);
addonWebglWindow.setTextureAtlas(addons.webgl.instance.textureAtlas);
addons.webgl.instance.onChangeTextureAtlas(e => addonWebglWindow.setTextureAtlas(e));
addons.webgl.instance.onAddTextureAtlasCanvas(e => addonWebglWindow.appendTextureAtlas(e));
@@ -295,6 +300,7 @@ function createTerminal(): Terminal {
console.warn(e);
}
addons.webLinks.instance = new WebLinksAddon();
addons.webFonts.instance = new WebFontsAddon();
typedTerm.loadAddon(addons.fit.instance);
typedTerm.loadAddon(addons.image.instance);
typedTerm.loadAddon(addons.progress.instance);
@@ -302,6 +308,7 @@ function createTerminal(): Terminal {
typedTerm.loadAddon(addons.serialize.instance);
typedTerm.loadAddon(addons.unicodeGraphemes.instance);
typedTerm.loadAddon(addons.webLinks.instance);
typedTerm.loadAddon(addons.webFonts.instance);
typedTerm.loadAddon(addons.clipboard.instance);
window.term = term; // Expose `term` to window for debugging purposes
demo/client/components/window/addonWebFontsWindow.ts
+60
View File
@@ -0,0 +1,60 @@
/**
* Copyright (c) 2024 The xterm.js authors. All rights reserved.
* @license MIT
*/
import { loadFonts } from '@xterm/addon-web-fonts';
import { BaseWindow } from './baseWindow';
import type { IControlWindow } from '../controlBar';
export class AddonWebFontsWindow extends BaseWindow implements IControlWindow {
public readonly id = 'addon-web-fonts';
public readonly label = 'web-fonts';
public build(container: HTMLElement): void {
const dl = document.createElement('dl');
// Kongtext font button
const dtKongtext = document.createElement('dt');
dtKongtext.textContent = 'Kongtext';
dl.appendChild(dtKongtext);
const ddKongtext = document.createElement('dd');
const btnKongtext = document.createElement('button');
btnKongtext.textContent = 'Load Kongtext';
btnKongtext.title = 'Load Kongtext font and apply C64 style';
btnKongtext.addEventListener('click', async () => {
const ff = new FontFace('Kongtext', 'url(/kongtext.regular.ttf) format(\'truetype\')');
await loadFonts([ff]);
this._terminal.options.fontFamily = 'Kongtext';
this._terminal.options.lineHeight = 1.3;
this._addons.fit.instance?.fit();
setTimeout(() => this._terminal.write('\x1b[?12h\x1b]12;#776CF9\x07\x1b[38;2;119;108;249;48;2;21;8;150m\x1b[2J\x1b[2;5H**** COMMODORE 64 BASIC V2 ****\r\n\r\n 64K RAM SYSTEM 38911 BASIC BYTES FREE\r\n\r\nREADY.\r\nLOAD '), 1000);
setTimeout(() => { this._terminal.write('🤣\x1b[m\x1b[99;1H'); this._terminal.input('\r'); }, 5000);
});
ddKongtext.appendChild(btnKongtext);
dl.appendChild(ddKongtext);
// BPdots font button
const dtBpdots = document.createElement('dt');
dtBpdots.textContent = 'BPdots';
dl.appendChild(dtBpdots);
const ddBpdots = document.createElement('dd');
const btnBpdots = document.createElement('button');
btnBpdots.textContent = 'Load BPdots';
btnBpdots.title = 'Load BPdots font';
btnBpdots.addEventListener('click', async () => {
document.styleSheets[0].insertRule('@font-face { font-family: "BPdots"; src: url(/bpdots.regular.otf) format("opentype"); weight: 400 }', 0);
await loadFonts(['BPdots']);
this._terminal.options.fontFamily = 'BPdots';
this._terminal.options.lineHeight = 1.3;
this._terminal.options.fontSize = 20;
this._addons.fit.instance?.fit();
});
ddBpdots.appendChild(btnBpdots);
dl.appendChild(ddBpdots);
container.appendChild(dl);
}
}
demo/client/types.ts
+4 -1
View File
@@ -15,10 +15,11 @@ import type { SearchAddon } from '@xterm/addon-search';
import type { SerializeAddon } from '@xterm/addon-serialize';
import type { UnicodeGraphemesAddon } from '@xterm/addon-unicode-graphemes';
import type { Unicode11Addon } from '@xterm/addon-unicode11';
import type { WebFontsAddon } from '@xterm/addon-web-fonts';
import type { WebLinksAddon } from '@xterm/addon-web-links';
import type { WebglAddon } from '@xterm/addon-webgl';
export type AddonType = 'attach' | 'clipboard' | 'fit' | 'image' | 'progress' | 'search' | 'serialize' | 'unicode11' | 'unicodeGraphemes' | 'webLinks' | 'webgl' | 'ligatures';
export type AddonType = 'attach' | 'clipboard' | 'fit' | 'image' | 'progress' | 'search' | 'serialize' | 'unicode11' | 'unicodeGraphemes' | 'webFonts' | 'webLinks' | 'webgl' | 'ligatures';
export interface IDemoAddon<T extends AddonType> {
name: T;
@@ -32,6 +33,7 @@ export interface IDemoAddon<T extends AddonType> {
T extends 'progress' ? typeof ProgressAddon :
T extends 'search' ? typeof SearchAddon :
T extends 'serialize' ? typeof SerializeAddon :
T extends 'webFonts' ? typeof WebFontsAddon :
T extends 'webLinks' ? typeof WebLinksAddon :
T extends 'unicode11' ? typeof Unicode11Addon :
T extends 'unicodeGraphemes' ? typeof UnicodeGraphemesAddon :
@@ -47,6 +49,7 @@ export interface IDemoAddon<T extends AddonType> {
T extends 'progress' ? ProgressAddon :
T extends 'search' ? SearchAddon :
T extends 'serialize' ? SerializeAddon :
T extends 'webFonts' ? WebFontsAddon :
T extends 'webLinks' ? WebLinksAddon :
T extends 'unicode11' ? Unicode11Addon :
T extends 'unicodeGraphemes' ? UnicodeGraphemesAddon :