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();
+ }
}