diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index b280cfa..8e69f51 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { name: '@design.estate/dees-catalog', - version: '1.0.269', + version: '1.0.270', description: 'website for lossless.com' } diff --git a/ts_web/elements/dees-terminal.ts b/ts_web/elements/dees-terminal.ts index e505c52..c9e20e5 100644 --- a/ts_web/elements/dees-terminal.ts +++ b/ts_web/elements/dees-terminal.ts @@ -24,9 +24,18 @@ declare global { export class DeesTerminal extends DeesElement { public static demo = () => html` `; + // INSTANCE + private resizeObserver: ResizeObserver; + constructor() { super(); - domtools.DomTools.setupDomTools(); + this.resizeObserver = new ResizeObserver((entries) => { + for (const entry of entries) { + // Handle the resize event + console.log(`Terminal Resized`); + this.handleResize(); + } + }); } public static styles = [ @@ -231,6 +240,7 @@ export class DeesTerminal extends DeesElement { `; } + private fitAddon: FitAddon; public async firstUpdated( _changedProperties: Map ): Promise { @@ -242,14 +252,14 @@ export class DeesTerminal extends DeesElement { convertEol: true, cursorBlink: true, }); - const fitAddon = new FitAddon(); - term.loadAddon(fitAddon); + this.fitAddon = new FitAddon(); + term.loadAddon(this.fitAddon); // Open the terminal in #terminal-container term.open(container); // Make the terminal's size and geometry fit the size of #terminal-container - fitAddon.fit(); + this.fitAddon.fit(); term.write(`dees-terminal custom terminal. \r\n$ `); @@ -271,4 +281,18 @@ export class DeesTerminal extends DeesElement { await domtools.convenience.smartdelay.delayFor(5000); input.write(`pnpm add isomorphic-git @git.zone/tsbuild\n`); } + + async connectedCallback(): Promise { + await super.connectedCallback(); + this.resizeObserver.observe(this); + } + + async disconnectedCallback(): Promise { + this.resizeObserver.unobserve(this); + await super.disconnectedCallback(); + } + + handleResize() { + this.fitAddon.fit(); + } }