1.0.273

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.0.267",
+  "version": "1.0.273",
   "private": false,
   "description": "website for lossless.com",
   "main": "dist_ts_web/index.js",

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '1.0.267',
+  version: '1.0.273',
   description: 'website for lossless.com'
 }

ts_web/elements/dees-simple-appdash.ts

@@ -45,6 +45,16 @@ export class DeesSimpleAppDash extends DeesElement {
         position: relative;
         height: 100%;
       }
+
+      .maincontainer {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0px;
+        left: 0px;
+        overflow: hidden;
+      }
+
       .appbar {
         position: fixed;
         top: 0;
@@ -113,22 +123,24 @@ export class DeesSimpleAppDash extends DeesElement {
 
   public render(): TemplateResult {
     return html`
-      <div class="appbar">
-        <div class="appName">${this.name}</div>
-        <div class="viewTabs"></div>
-        <div class="appActions">
-          <div class="action">Logout</div>
+      <div class="maincontainer">
+        <div class="appbar">
+          <div class="appName">${this.name}</div>
+          <div class="viewTabs"></div>
+          <div class="appActions">
+            <div class="action">Logout</div>
+          </div>
         </div>
-      </div>
-      <div class="appcontent">
-        <slot></slot>
-      </div>
-      <div class="controlbar">
-        <div class="control">
-          <dees-icon .iconFA=${'networkWired'}></dees-icon>
+        <div class="appcontent">
+          <slot></slot>
         </div>
-        <div class="control" @click=${this.launchTerminal}>
-          <dees-icon .iconFA=${'terminal'}></dees-icon>
+        <div class="controlbar">
+          <div class="control">
+            <dees-icon .iconFA=${'networkWired'}></dees-icon>
+          </div>
+          <div class="control" @click=${this.launchTerminal}>
+            <dees-icon .iconFA=${'terminal'}></dees-icon>
+          </div>
         </div>
       </div>
     `;
@@ -140,15 +152,18 @@ export class DeesSimpleAppDash extends DeesElement {
   }
 
   public async launchTerminal() {
-    const appcontent = this.shadowRoot.querySelector('.appcontent');
+    const maincontainer = this.shadowRoot.querySelector('.maincontainer');
     const terminal = new DeesTerminal();
+    maincontainer.appendChild(terminal);
     terminal.style.position = 'absolute';
-    terminal.style.top = '0px';
+    terminal.style.zIndex = '1';
+    terminal.style.top = '32px';
     terminal.style.left = '0px';
+    terminal.style.right = '0px';
+    terminal.style.bottom = '24px';
     terminal.style.opacity = '0';
     terminal.style.transform = 'translateY(20px)';
     terminal.style.transition = 'all 0.2s';
-    appcontent.appendChild(terminal);
     await domtools.plugins.smartdelay.delayFor(0);
     terminal.style.opacity = '1';
     terminal.style.transform = 'translateY(0px)';

ts_web/elements/dees-terminal.ts

@@ -24,9 +24,18 @@ declare global {
 export class DeesTerminal extends DeesElement {
   public static demo = () => html` <dees-terminal></dees-terminal> `;
 
+  // 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<string | number | symbol, unknown>
   ): Promise<void> {
@@ -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<void> {
+    await super.connectedCallback();
+    this.resizeObserver.observe(this);
+  }
+
+  async disconnectedCallback(): Promise<void> {
+    this.resizeObserver.unobserve(this);
+    await super.disconnectedCallback();
+  }
+
+  handleResize() {
+    this.fitAddon.fit();
+  }
 }