Set lovelace when restoring view from cache, optimise picture element and thermostat (#5880)

src/panels/lovelace/cards/hui-picture-elements-card.ts

@@ -21,6 +21,8 @@ import { PictureElementsCardConfig } from "./types";
 class HuiPictureElementsCard extends LitElement implements LovelaceCard {
   @property() public hass?: HomeAssistant;
 
+  @property() private _elements?: LovelaceElement[];
+
   public static getStubConfig(
     hass: HomeAssistant,
     entities: string[],
@@ -70,6 +72,14 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard {
     }
 
     this._config = config;
+
+    this._elements = this._config.elements.map(
+      (elementConfig: LovelaceElementConfig) => {
+        const element = createStyledHuiElement(elementConfig);
+        element.hass = this.hass;
+        return element as LovelaceElement;
+      }
+    );
   }
 
   protected updated(changedProps: PropertyValues): void {
@@ -78,11 +88,8 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard {
       return;
     }
 
-    if (changedProps.has("hass")) {
-      for (const el of Array.from(
-        this.shadowRoot!.querySelectorAll("#root > *")
-      )) {
-        const element = el as LovelaceElement;
+    if (this._elements && changedProps.has("hass")) {
+      for (const element of this._elements) {
         element.hass = this.hass;
       }
     }
@@ -120,14 +127,7 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard {
             .entity=${this._config.entity}
             .aspectRatio=${this._config.aspect_ratio}
           ></hui-image>
-          ${this._config.elements.map(
-            (elementConfig: LovelaceElementConfig) => {
-              const element = createStyledHuiElement(elementConfig);
-              element.hass = this.hass;
-
-              return element;
-            }
-          )}
+          ${this._elements}
         </div>
       </ha-card>
     `;

src/panels/lovelace/cards/hui-thermostat-card.ts

@@ -88,15 +88,6 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
     this._config = config;
   }
 
-  public connectedCallback(): void {
-    super.connectedCallback();
-    this.rescale_svg();
-  }
-
-  protected firstUpdated(): void {
-    this.rescale_svg();
-  }
-
   protected render(): TemplateResult {
     if (!this.hass || !this._config) {
       return html``;
@@ -165,7 +156,9 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
         <g>
           <text text-anchor="middle" class="set-value">
             ${
-              this._setTemp === undefined || this._setTemp === null
+              stateObj.state === UNAVAILABLE
+                ? this.hass.localize("state.default.unavailable")
+                : this._setTemp === undefined || this._setTemp === null
                 ? ""
                 : Array.isArray(this._setTemp)
                 ? this._stepSize === 1
@@ -255,12 +248,19 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
   }
 
   protected shouldUpdate(changedProps: PropertyValues): boolean {
+    if (changedProps.has("_setTemp")) {
+      return true;
+    }
     return hasConfigOrEntityChanged(this, changedProps);
   }
 
   protected updated(changedProps: PropertyValues): void {
     super.updated(changedProps);
 
+    if (changedProps.has("_setTemp")) {
+      this.rescale_svg();
+    }
+
     if (
       !this._config ||
       !this.hass ||
@@ -287,8 +287,16 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
     if (!stateObj) {
       return;
     }
-    this._setTemp = this._getSetTemp(stateObj);
-    this.rescale_svg();
+    const newTemp = this._getSetTemp(stateObj);
+    if (
+      Array.isArray(this._setTemp) &&
+      Array.isArray(newTemp) &&
+      (this._setTemp[0] !== newTemp[0] || this._setTemp[1] !== newTemp[1])
+    ) {
+      this._setTemp = newTemp;
+    } else if (this._setTemp !== newTemp) {
+      this._setTemp = newTemp;
+    }
   }
 
   private rescale_svg() {
@@ -322,9 +330,11 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
     return this.hass!.config.unit_system.temperature === UNIT_F ? 1 : 0.5;
   }
 
-  private _getSetTemp(stateObj: HassEntity) {
+  private _getSetTemp(
+    stateObj: HassEntity
+  ): undefined | number | [number, number] {
     if (stateObj.state === UNAVAILABLE) {
-      return this.hass!.localize("state.default.unavailable");
+      return undefined;
     }
 
     if (

src/panels/lovelace/hui-root.ts

@@ -633,17 +633,16 @@ class HUIRoot extends LitElement {
       if (viewConfig.panel && viewConfig.cards && viewConfig.cards.length > 0) {
         view = document.createElement("hui-panel-view");
         view.config = viewConfig;
-        view.lovelace = this.lovelace;
         view.index = viewIndex;
       } else {
         view = document.createElement("hui-view");
-        view.lovelace = this.lovelace;
         view.columns = this.columns;
         view.index = viewIndex;
       }
       this._viewCache![viewIndex] = view;
     }
 
+    view.lovelace = this.lovelace;
     view.hass = this.hass;
 
     const configBackground = viewConfig.background || this.config.background;

src/panels/lovelace/views/hui-view.ts

@@ -157,7 +157,7 @@ export class HUIView extends LitElement {
     if (configChanged) {
       this._createCards(lovelace.config.views[this.index!]);
     } else if (editModeChanged || changedProperties.has("columns")) {
-      this._recreateColumns();
+      this._createColumns();
     }
 
     if (hassChanged && !configChanged) {
@@ -217,10 +217,6 @@ export class HUIView extends LitElement {
     root.style.display = elements.length > 0 ? "block" : "none";
   }
 
-  private async _recreateColumns() {
-    this._createColumns();
-  }
-
   private _createColumns() {
     this._createColumnsIteration++;
     const iteration = this._createColumnsIteration;