Improve card size algorithm for grids/stacks

home-assistant · Sep 2, 2023 · f82d652 · f82d652
1 parent fe3a63a
commit f82d652
Show file tree

Hide file tree

Showing 12 changed files with 31 additions and 26 deletions.
diff --git a/src/panels/lovelace/cards/hui-area-card.ts b/src/panels/lovelace/cards/hui-area-card.ts
@@ -254,8 +254,8 @@ export class HuiAreaCard
     ];
   }
 
-  public getCardSize(): number {
-    return 3;
+  public getCardSize(hScale?: number): number {
+    return 3 * (hScale || 1);
   }
 
   public setConfig(config: AreaCardConfig): void {

diff --git a/src/panels/lovelace/cards/hui-button-card.ts b/src/panels/lovelace/cards/hui-button-card.ts
@@ -136,9 +136,10 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
     );
   }
 
-  public getCardSize(): number {
+  public getCardSize(hScale?: number): number {
     return (
-      (this._config?.show_icon ? 4 : 0) + (this._config?.show_name ? 1 : 0)
+      (this._config?.show_icon ? 4 * (hScale || 1) : 0) +
+      (this._config?.show_name ? 1 : 0)
     );
   }
 

diff --git a/src/panels/lovelace/cards/hui-grid-card.ts b/src/panels/lovelace/cards/hui-grid-card.ts
@@ -17,13 +17,14 @@ class HuiGridCard extends HuiStackCard<GridCardConfig> {
     return document.createElement("hui-grid-card-editor");
   }
 
-  public async getCardSize(): Promise<number> {
+  public async getCardSize(hScale?: number): Promise<number> {
     if (!this._cards || !this._config) {
       return 0;
     }
 
     if (this.square) {
-      const rowHeight = SQUARE_ROW_HEIGHTS_BY_COLUMNS[this.columns] || 1;
+      const rowHeight =
+        (SQUARE_ROW_HEIGHTS_BY_COLUMNS[this.columns] || 1) * (hScale || 1);
       return (
         (this._cards.length < this.columns
           ? rowHeight
@@ -35,7 +36,7 @@ class HuiGridCard extends HuiStackCard<GridCardConfig> {
     const promises: Array<Promise<number> | number> = [];
 
     for (const element of this._cards) {
-      promises.push(computeCardSize(element));
+      promises.push(computeCardSize(element, (hScale || 1) / this.columns));
     }
 
     const cardSizes = await Promise.all(promises);

diff --git a/src/panels/lovelace/cards/hui-horizontal-stack-card.ts b/src/panels/lovelace/cards/hui-horizontal-stack-card.ts
@@ -3,15 +3,17 @@ import { computeCardSize } from "../common/compute-card-size";
 import { HuiStackCard } from "./hui-stack-card";
 
 class HuiHorizontalStackCard extends HuiStackCard {
-  public async getCardSize(): Promise<number> {
+  public async getCardSize(hScale?: number): Promise<number> {
     if (!this._cards) {
       return 0;
     }
 
     const promises: Array<Promise<number> | number> = [];
 
     for (const element of this._cards) {
-      promises.push(computeCardSize(element));
+      promises.push(
+        computeCardSize(element, (hScale || 1) / this._cards.length)
+      );
     }
 
     const results = await Promise.all(promises);

diff --git a/src/panels/lovelace/cards/hui-map-card.ts b/src/panels/lovelace/cards/hui-map-card.ts
@@ -101,9 +101,9 @@ class HuiMapCard extends LitElement implements LovelaceCard {
     ).map((entity) => entity.entity);
   }
 
-  public getCardSize(): number {
+  public getCardSize(hScale?: number): number {
     if (!this._config?.aspect_ratio) {
-      return 7;
+      return 7 * (hScale || 1);
     }
 
     const ratio = parseAspectRatio(this._config.aspect_ratio);
@@ -112,7 +112,7 @@ class HuiMapCard extends LitElement implements LovelaceCard {
         ? `${((100 * ratio.h) / ratio.w).toFixed(2)}`
         : "100";
 
-    return 1 + Math.floor(Number(ar) / 25) || 3;
+    return (1 + Math.floor(Number(ar) / 25) || 3) * (hScale || 1);
   }
 
   public static async getConfigElement() {

diff --git a/src/panels/lovelace/cards/hui-picture-card.ts b/src/panels/lovelace/cards/hui-picture-card.ts
@@ -40,8 +40,8 @@ export class HuiPictureCard extends LitElement implements LovelaceCard {
 
   @property() protected _config?: PictureCardConfig;
 
-  public getCardSize(): number {
-    return 5;
+  public getCardSize(hScale?: number): number {
+    return 5 * (hScale || 1);
   }
 
   public setConfig(config: PictureCardConfig): void {

diff --git a/src/panels/lovelace/cards/hui-picture-elements-card.ts b/src/panels/lovelace/cards/hui-picture-elements-card.ts
@@ -55,8 +55,8 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard {
 
   @state() private _config?: PictureElementsCardConfig;
 
-  public getCardSize(): number {
-    return 4;
+  public getCardSize(hScale?: number): number {
+    return 4 * (hScale || 1);
   }
 
   public setConfig(config: PictureElementsCardConfig): void {

diff --git a/src/panels/lovelace/cards/hui-picture-glance-card.ts b/src/panels/lovelace/cards/hui-picture-glance-card.ts
@@ -71,8 +71,8 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
 
   private _entitiesToggle?: PictureGlanceEntityConfig[];
 
-  public getCardSize(): number {
-    return 3;
+  public getCardSize(hScale?: number): number {
+    return 3 * (hScale || 1);
   }
 
   public setConfig(config: PictureGlanceCardConfig): void {

diff --git a/src/panels/lovelace/cards/hui-statistics-graph-card.ts b/src/panels/lovelace/cards/hui-statistics-graph-card.ts
@@ -89,9 +89,9 @@ export class HuiStatisticsGraphCard extends LitElement implements LovelaceCard {
     this._setFetchStatisticsTimer();
   }
 
-  public getCardSize(): number {
+  public getCardSize(hScale?: number): number {
     return (
-      5 +
+      5 * (hScale || 1) +
       (this._config?.title ? 2 : 0) +
       (!this._config?.hide_legend ? this._entities?.length || 0 : 0)
     );

diff --git a/src/panels/lovelace/cards/hui-vertical-stack-card.ts b/src/panels/lovelace/cards/hui-vertical-stack-card.ts
@@ -3,15 +3,15 @@ import { computeCardSize } from "../common/compute-card-size";
 import { HuiStackCard } from "./hui-stack-card";
 
 class HuiVerticalStackCard extends HuiStackCard {
-  public async getCardSize() {
+  public async getCardSize(hScale?: number) {
     if (!this._cards) {
       return 0;
     }
 
     const promises: Array<Promise<number> | number> = [];
 
     for (const element of this._cards) {
-      promises.push(computeCardSize(element));
+      promises.push(computeCardSize(element, hScale));
     }
 
     const results = await Promise.all(promises);

diff --git a/src/panels/lovelace/common/compute-card-size.ts b/src/panels/lovelace/common/compute-card-size.ts
@@ -2,11 +2,12 @@ import { promiseTimeout } from "../../../common/util/promise-timeout";
 import { LovelaceCard, LovelaceHeaderFooter } from "../types";
 
 export const computeCardSize = (
-  card: LovelaceCard | LovelaceHeaderFooter
+  card: LovelaceCard | LovelaceHeaderFooter,
+  hScale: number = 1
 ): number | Promise<number> => {
   if (typeof card.getCardSize === "function") {
     try {
-      return promiseTimeout(500, card.getCardSize()).catch(
+      return promiseTimeout(500, card.getCardSize(hScale)).catch(
         () => 1
       ) as Promise<number>;
     } catch (_e: any) {
@@ -18,5 +19,5 @@ export const computeCardSize = (
   }
   return customElements
     .whenDefined(card.localName)
-    .then(() => computeCardSize(card));
+    .then(() => computeCardSize(card, hScale));
 };
diff --git a/src/panels/lovelace/types.ts b/src/panels/lovelace/types.ts
@@ -43,7 +43,7 @@ export interface LovelaceCard extends HTMLElement {
   hass?: HomeAssistant;
   isPanel?: boolean;
   editMode?: boolean;
-  getCardSize(): number | Promise<number>;
+  getCardSize(hScale?: number): number | Promise<number>;
   setConfig(config: LovelaceCardConfig): void;
 }