Merge pull request #8 from catdad-experiments/7-size-calculation

implementing a whole bunch of bad hidden size shenanigans

src/combined-card-editor.ts

@@ -6,6 +6,7 @@ class CombinedCardEditor extends LitElement implements LovelaceCardEditor {
   private _hass?: HomeAssistant;
   private _lovelace?: LovelaceConfig;
   private _stackCardEditor?;
+  private _config = {};
 
   private _setEditorConfig(config: LovelaceCardConfig) {
     // @ts-ignore
@@ -18,20 +19,23 @@ class CombinedCardEditor extends LitElement implements LovelaceCardEditor {
   }
 
   setConfig(config: LovelaceCardConfig): void {
-    LOG('setConfig', config);
-    this._setEditorConfig(config);
+    this._config = {
+      // I think this won't allow removing the hidden values
+      // ...this._config,
+      ...config
+    };
+
+    this._setEditorConfig(this._config as LovelaceCardConfig);
   }
 
-  configChanged(newCondfig: LovelaceCardConfig): void {
+  configChanged(newConfig: LovelaceCardConfig): void {
     const event = new Event('config-changed', {
       bubbles: true,
       composed: true
     });
 
     // @ts-ignore
-    event.detail = { config: newCondfig };
-
-    LOG('configChanged', newCondfig);
+    event.detail = { config: newConfig };
 
     this.dispatchEvent(event);
   }
@@ -51,6 +55,7 @@ class CombinedCardEditor extends LitElement implements LovelaceCardEditor {
       ev.stopPropagation();
 
       this.configChanged({
+        ...this._config,
         ...ev.detail.config,
         type: `custom:${NAME}`
       });

src/combined-card.ts

@@ -31,13 +31,19 @@ class CombinedCard extends LitElement implements LovelaceCard {
     }
   }
 
-  public async getCardSize(): Promise<number> {
-    if (!this._config) {
-      return 0;
-    }
+  private async getSizeFromComponentCard(): Promise<number> {
+    return await (async function recurseWaitForCard(that) {
+      if (that._card && that._card.getCardSize) {
+        return await that._card.getCardSize();
+      }
 
-    await HELPERS.whenLoaded;
+      await sleep(10);
+
+      return await recurseWaitForCard(that);
+    })(this);
+  }
 
+  private async getSizeFromTempCard(): Promise<number> {
     return await (async function recursiveGetSize(that) {
       const el = that._createCard(that._config as LovelaceCardConfig);
 
@@ -49,18 +55,67 @@ class CombinedCard extends LitElement implements LovelaceCard {
         }
       }
 
-      await sleep(50);
+      await sleep(10);
 
       return await recursiveGetSize(that);
     })(this);
   }
 
+  private async getSizeFromRenderedCards(): Promise<number> {
+    const configCards = this._config?.cards || [];
+    const helpers = this._helpers;
+
+    const sizes = await Promise.all(configCards.map(card => (async () => {
+      const el = await helpers.createCardElement(card);
+      return await el.getCardSize();
+    })()));
+
+    return sizes.reduce((a, b) => a + b);
+  }
+
+  public async getCardSize(): Promise<number> {
+    const size = await (async () => {
+      if (!this._config) {
+        return 0;
+      }
+
+      await HELPERS.whenLoaded;
+
+      if (this._config.size) {
+        return this._config.size;
+      }
+
+      switch (this._config.sizeAlgorithm) {
+        case 'temp':
+          // this renders the vertical stack again and asks it its size
+          // this is usually wrong (often smaller)
+          return await this.getSizeFromTempCard();
+        case 'render':
+          // this renders all the cards in config and asks all of their sizes
+          // it is also usually wrong, for similar reasons as temp
+          return await this.getSizeFromRenderedCards();
+        case 'component':
+          // this waits for the actual vertical stack to render and asks it its size
+          // this is very slow
+          return await this.getSizeFromComponentCard();
+        default:
+          // most custom and some first-party cards just return this
+          // it's probably a bug that led to more bugs in lovelace itself
+          return 4;
+      }
+    })();
+
+    LOG(`card size is ${size}`);
+
+    return size;
+  }
+
   public setConfig(config: LovelaceCardConfig): void {
     if (!config || !config.cards || !Array.isArray(config.cards)) {
       throw new Error("Invalid configuration, `cards` is required");
     }
 
-    this._config = config;
+    this._config = Object.assign({}, CombinedCard.getStubConfig(), config);
     const that = this;
 
     if (HELPERS.loaded) {
@@ -166,7 +221,9 @@ class CombinedCard extends LitElement implements LovelaceCard {
   static getStubConfig() {
     return {
       type: `custom:${NAME}`,
-      cards: []
+      cards: [],
+      size: 0,
+      sizeAlgorithm: 'temp'
     };
   }
 }