Custom Lovelace View Layouts

cast/src/receiver/layout/hc-lovelace.ts

@@ -9,7 +9,6 @@ import {
 } from "lit-element";
 import { LovelaceConfig } from "../../../../src/data/lovelace";
 import { Lovelace } from "../../../../src/panels/lovelace/types";
-import "../../../../src/panels/lovelace/views/hui-panel-view";
 import "../../../../src/panels/lovelace/views/hui-view";
 import { HomeAssistant } from "../../../../src/types";
 import "./hc-launch-screen";
@@ -45,22 +44,14 @@ class HcLovelace extends LitElement {
       deleteConfig: async () => undefined,
       setEditMode: () => undefined,
     };
-    return this.lovelaceConfig.views[index].panel
-      ? html`
-          <hui-panel-view
-            .hass=${this.hass}
-            .lovelace=${lovelace}
-            .config=${this.lovelaceConfig.views[index]}
-          ></hui-panel-view>
-        `
-      : html`
-          <hui-view
-            .hass=${this.hass}
-            .lovelace=${lovelace}
-            .index=${index}
-            columns="2"
-          ></hui-view>
-        `;
+    return html`
+      <hui-view
+        .hass=${this.hass}
+        .lovelace=${lovelace}
+        .index=${index}
+        columns="2"
+      ></hui-view>
+    `;
   }
 
   protected updated(changedProps) {

src/data/lovelace.ts

@@ -5,6 +5,12 @@ import {
 } from "home-assistant-js-websocket";
 import { HASSDomEvent } from "../common/dom/fire_event";
 import { HomeAssistant } from "../types";
+import {
+  LovelaceCard,
+  LovelaceBadge,
+  Lovelace,
+} from "../panels/lovelace/types";
+import { HuiErrorCard } from "../panels/lovelace/cards/hui-error-card";
 
 export interface LovelacePanelConfig {
   mode: "yaml" | "storage";
@@ -69,6 +75,7 @@ export interface LovelaceDashboardCreateParams
 export interface LovelaceViewConfig {
   index?: number;
   title?: string;
+  type?: string;
   badges?: Array<string | LovelaceBadgeConfig>;
   cards?: LovelaceCardConfig[];
   path?: string;
@@ -79,6 +86,16 @@ export interface LovelaceViewConfig {
   visible?: boolean | ShowViewConfig[];
 }
 
+export interface LovelaceViewElement extends HTMLElement {
+  hass?: HomeAssistant;
+  lovelace?: Lovelace;
+  index?: number;
+  columns: number;
+  cards?: Array<LovelaceCard | HuiErrorCard>;
+  badges?: LovelaceBadge[];
+  editMode?: boolean;
+}
+
 export interface ShowViewConfig {
   user?: string;
 }
@@ -91,6 +108,7 @@ export interface LovelaceBadgeConfig {
 export interface LovelaceCardConfig {
   index?: number;
   view_index?: number;
+  layout?: any;
   type: string;
   [key: string]: any;
 }

src/panels/lovelace/hui-root.ts

@@ -55,8 +55,6 @@ import { swapView } from "./editor/config-util";
 import { showEditLovelaceDialog } from "./editor/lovelace-editor/show-edit-lovelace-dialog";
 import { showEditViewDialog } from "./editor/view-editor/show-edit-view-dialog";
 import type { Lovelace } from "./types";
-import "./views/hui-panel-view";
-import type { HUIPanelView } from "./views/hui-panel-view";
 import { HUIView } from "./views/hui-view";
 import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item";
 import { shouldHandleRequestSelectedEvent } from "../../common/mwc/handle-request-selected-event";
@@ -386,7 +384,7 @@ class HUIRoot extends LitElement {
     super.updated(changedProperties);
 
     const view = this._viewRoot;
-    const huiView = view.lastChild as HUIView | HUIPanelView;
+    const huiView = view.lastChild as HUIView;
 
     if (
       changedProperties.has("columns") &&
@@ -654,15 +652,9 @@ class HUIRoot extends LitElement {
     if (!force && this._viewCache![viewIndex]) {
       view = this._viewCache![viewIndex];
     } else {
-      if (viewConfig.panel && viewConfig.cards && viewConfig.cards.length > 0) {
-        view = document.createElement("hui-panel-view");
-        view.config = viewConfig;
-        view.index = viewIndex;
-      } else {
-        view = document.createElement("hui-view");
-        view.columns = this.columns;
-        view.index = viewIndex;
-      }
+      view = document.createElement("hui-view");
+      view.columns = this.columns;
+      view.index = viewIndex;
       this._viewCache![viewIndex] = view;
     }
 

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

@@ -0,0 +1,273 @@
+import {
+  html,
+  LitElement,
+  property,
+  PropertyValues,
+  TemplateResult,
+  CSSResult,
+  css,
+} from "lit-element";
+import { classMap } from "lit-html/directives/class-map";
+import { mdiPlus } from "@mdi/js";
+
+import { computeRTL } from "../../../common/util/compute_rtl";
+import "../../../components/entity/ha-state-label-badge";
+import { HuiErrorCard } from "../cards/hui-error-card";
+import { computeCardSize } from "../common/compute-card-size";
+import { Lovelace, LovelaceBadge, LovelaceCard } from "../types";
+import "../../../components/ha-svg-icon";
+import { nextRender } from "../../../common/util/render-status";
+import type { LovelaceViewElement } from "../../../data/lovelace";
+import { HomeAssistant } from "../../../types";
+import { showEditCardDialog } from "../editor/card-editor/show-edit-card-dialog";
+
+let editCodeLoaded = false;
+
+// Find column with < 5 size, else smallest column
+const getColumnIndex = (columnSizes: number[], size: number) => {
+  let minIndex = 0;
+  for (let i = 0; i < columnSizes.length; i++) {
+    if (columnSizes[i] < 5) {
+      minIndex = i;
+      break;
+    }
+    if (columnSizes[i] < columnSizes[minIndex]) {
+      minIndex = i;
+    }
+  }
+
+  columnSizes[minIndex] += size;
+
+  return minIndex;
+};
+
+export class DefaultView extends LitElement implements LovelaceViewElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public lovelace?: Lovelace;
+
+  @property({ type: Number }) public index?: number;
+
+  @property({ type: Number }) public columns!: number;
+
+  @property({ attribute: false }) public cards: Array<
+    LovelaceCard | HuiErrorCard
+  > = [];
+
+  @property({ attribute: false }) public badges: LovelaceBadge[] = [];
+
+  @property({ type: Boolean }) public editMode = false;
+
+  private _createColumnsIteration = 0;
+
+  public constructor() {
+    super();
+    this.addEventListener("iron-resize", (ev: Event) => ev.stopPropagation());
+  }
+
+  protected render(): TemplateResult {
+    return html`
+      <div
+        id="badges"
+        style=${this.badges.length > 0 ? "display: block" : "display: none"}
+      >
+        ${this.badges.map((badge) => html`${badge}`)}
+      </div>
+      <div id="columns"></div>
+      ${this.lovelace?.editMode
+        ? html`
+            <mwc-fab
+              title=${this.hass!.localize(
+                "ui.panel.lovelace.editor.edit_card.add"
+              )}
+              @click=${this._addCard}
+              class=${classMap({
+                rtl: computeRTL(this.hass!),
+              })}
+            >
+              <ha-svg-icon slot="icon" path=${mdiPlus}></ha-svg-icon>
+            </mwc-fab>
+          `
+        : ""}
+    `;
+  }
+
+  protected updated(changedProperties: PropertyValues): void {
+    super.updated(changedProperties);
+
+    if (this.editMode && !editCodeLoaded) {
+      editCodeLoaded = true;
+      import(
+        /* webpackChunkName: "default-layout-editable" */ "./default-view-editable"
+      );
+    }
+
+    if (changedProperties.has("hass") && changedProperties.size === 1) {
+      return;
+    }
+
+    this._createColumns();
+  }
+
+  private _addCard(): void {
+    showEditCardDialog(this, {
+      lovelaceConfig: this.lovelace!.config,
+      saveConfig: this.lovelace!.saveConfig,
+      path: [this.index!],
+    });
+  }
+
+  private async _createColumns() {
+    this._createColumnsIteration++;
+    const iteration = this._createColumnsIteration;
+    const root = this.shadowRoot!.getElementById("columns")!;
+
+    // Remove old columns
+    while (root.lastChild) {
+      root.removeChild(root.lastChild);
+    }
+
+    // Track the total height of cards in a columns
+    const columnSizes: number[] = [];
+    const columnElements: HTMLDivElement[] = [];
+    // Add columns to DOM, limit number of columns to the number of cards
+    for (let i = 0; i < Math.min(this.columns!, this.cards.length); i++) {
+      const columnEl = document.createElement("div");
+      columnEl.classList.add("column");
+      root.appendChild(columnEl);
+      columnSizes.push(0);
+      columnElements.push(columnEl);
+    }
+
+    let tillNextRender: Promise<unknown> | undefined;
+    let start: Date | undefined;
+
+    // Calculate the size of every card and determine in what column it should go
+    for (const [index, el] of this.cards.entries()) {
+      if (tillNextRender === undefined) {
+        // eslint-disable-next-line no-loop-func
+        tillNextRender = nextRender().then(() => {
+          tillNextRender = undefined;
+          start = undefined;
+        });
+      }
+
+      let waitProm: Promise<unknown> | undefined;
+
+      // We should work for max 16ms (60fps) before allowing a frame to render
+      if (start === undefined) {
+        // Save the time we start for this frame, no need to wait yet
+        start = new Date();
+      } else if (new Date().getTime() - start.getTime() > 16) {
+        // We are working too long, we will prevent a render, wait to allow for a render
+        waitProm = tillNextRender;
+      }
+
+      const cardSizeProm = computeCardSize(el);
+      // @ts-ignore
+      // eslint-disable-next-line no-await-in-loop
+      const [cardSize] = await Promise.all([cardSizeProm, waitProm]);
+
+      if (iteration !== this._createColumnsIteration) {
+        // An other create columns is started, abort this one
+        return;
+      }
+      // Calculate in wich column the card should go based on the size and the cards already in there
+      this._addCardToColumn(
+        columnElements[getColumnIndex(columnSizes, cardSize as number)],
+        index,
+        this.lovelace!.editMode
+      );
+    }
+
+    // Remove empty columns
+    columnElements.forEach((column) => {
+      if (!column.lastChild) {
+        column.parentElement!.removeChild(column);
+      }
+    });
+  }
+
+  private _addCardToColumn(columnEl, index, editMode) {
+    const card: LovelaceCard = this.cards[index];
+    if (!editMode) {
+      card.editMode = false;
+      columnEl.appendChild(card);
+    } else {
+      const wrapper = document.createElement("hui-card-options");
+      wrapper.hass = this.hass;
+      wrapper.lovelace = this.lovelace;
+      wrapper.path = [this.index!, index];
+      card.editMode = true;
+      wrapper.appendChild(card);
+      columnEl.appendChild(wrapper);
+    }
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      #badges {
+        margin: 8px 16px;
+        font-size: 85%;
+        text-align: center;
+      }
+
+      #columns {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+      }
+
+      .column {
+        flex: 1 0 0;
+        max-width: 500px;
+        min-width: 0;
+      }
+
+      .column > * {
+        display: block;
+        margin: 4px 4px 8px;
+      }
+
+      mwc-fab {
+        position: sticky;
+        float: right;
+        right: calc(16px + env(safe-area-inset-right));
+        bottom: calc(16px + env(safe-area-inset-bottom));
+        z-index: 1;
+      }
+
+      mwc-fab.rtl {
+        float: left;
+        right: auto;
+        left: calc(16px + env(safe-area-inset-left));
+      }
+
+      @media (max-width: 500px) {
+        :host {
+          padding-left: 0;
+          padding-right: 0;
+        }
+
+        .column > * {
+          margin-left: 0;
+          margin-right: 0;
+        }
+      }
+
+      @media (max-width: 599px) {
+        .column {
+          max-width: 600px;
+        }
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ll-view-default": DefaultView;
+  }
+}
+
+customElements.define("ll-view-default", DefaultView);