diff --git a/package.json b/package.json index 4252ee18a7..17e89644b2 100644 --- a/package.json +++ b/package.json @@ -104,7 +104,7 @@ "node-vibrant": "^3.1.5", "proxy-polyfill": "^0.3.1", "regenerator-runtime": "^0.13.2", - "resize-observer": "^1.0.0", + "resize-observer-polyfill": "^1.5.1", "roboto-fontface": "^0.10.0", "superstruct": "^0.6.1", "unfetch": "^4.1.0", diff --git a/src/data/area_registry.ts b/src/data/area_registry.ts index 63e8a38301..d59a7ff69d 100644 --- a/src/data/area_registry.ts +++ b/src/data/area_registry.ts @@ -2,6 +2,7 @@ import { Connection, createCollection } from "home-assistant-js-websocket"; import { compare } from "../common/string/compare"; import { debounce } from "../common/util/debounce"; import { HomeAssistant } from "../types"; +import { Store } from "home-assistant-js-websocket/dist/store"; export interface AreaRegistryEntry { area_id: string; @@ -38,18 +39,27 @@ export const deleteAreaRegistryEntry = (hass: HomeAssistant, areaId: string) => area_id: areaId, }); -const fetchAreaRegistry = (conn) => +const fetchAreaRegistry = (conn: Connection) => conn .sendMessagePromise({ type: "config/area_registry/list", }) - .then((areas) => areas.sort((ent1, ent2) => compare(ent1.name, ent2.name))); + .then((areas) => + (areas as AreaRegistryEntry[]).sort((ent1, ent2) => + compare(ent1.name, ent2.name) + ) + ); -const subscribeAreaRegistryUpdates = (conn, store) => +const subscribeAreaRegistryUpdates = ( + conn: Connection, + store: Store +) => conn.subscribeEvents( debounce( () => - fetchAreaRegistry(conn).then((areas) => store.setState(areas, true)), + fetchAreaRegistry(conn).then((areas: AreaRegistryEntry[]) => + store.setState(areas, true) + ), 500, true ), diff --git a/src/panels/lovelace/cards/hui-gauge-card.ts b/src/panels/lovelace/cards/hui-gauge-card.ts index c13ff98fef..37d9f761af 100644 --- a/src/panels/lovelace/cards/hui-gauge-card.ts +++ b/src/panels/lovelace/cards/hui-gauge-card.ts @@ -175,6 +175,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard { } protected firstUpdated(): void { + this._measureCard(); this._attachObserver(); } @@ -236,10 +237,12 @@ class HuiGaugeCard extends LitElement implements LovelaceCard { } private async _attachObserver(): Promise { - await installResizeObserver(); - - this._resizeObserver = new ResizeObserver(this._debouncedMeasure); - + if (!this._resizeObserver) { + await installResizeObserver(); + this._resizeObserver = new ResizeObserver( + debounce(() => this._measureCard(), 250, false) + ); + } const card = this.shadowRoot!.querySelector("ha-card"); // If we show an error or warning there is no ha-card if (!card) { @@ -248,8 +251,6 @@ class HuiGaugeCard extends LitElement implements LovelaceCard { this._resizeObserver.observe(card); } - private _debouncedMeasure = debounce(() => this._measureCard(), 250, true); - private _measureCard() { if (!this.isConnected) { return; diff --git a/src/panels/lovelace/cards/hui-map-card.ts b/src/panels/lovelace/cards/hui-map-card.ts index 1a8f72a1b4..de7bd3a434 100644 --- a/src/panels/lovelace/cards/hui-map-card.ts +++ b/src/panels/lovelace/cards/hui-map-card.ts @@ -39,6 +39,7 @@ import { EntityConfig } from "../entity-rows/types"; import { LovelaceCard } from "../types"; import "../../../components/ha-card"; import { MapCardConfig } from "./types"; +import { installResizeObserver } from "../common/install-resize-observer"; @customElement("hui-map-card") class HuiMapCard extends LitElement implements LovelaceCard { @@ -90,17 +91,16 @@ class HuiMapCard extends LitElement implements LovelaceCard { private _leafletMap?: Map; - // @ts-ignore private _resizeObserver?: ResizeObserver; private _debouncedResizeListener = debounce( () => { - if (!this._leafletMap) { + if (!this.isConnected || !this._leafletMap) { return; } this._leafletMap.invalidateSize(); }, - 100, + 250, false ); @@ -110,8 +110,6 @@ class HuiMapCard extends LitElement implements LovelaceCard { private _mapPaths: Array = []; - private _connected = false; - private _colorDict: { [key: string]: string } = {}; private _colorIndex = 0; @@ -174,16 +172,14 @@ class HuiMapCard extends LitElement implements LovelaceCard { public connectedCallback(): void { super.connectedCallback(); - this._connected = true; + this._attachObserver(); if (this.hasUpdated) { this.loadMap(); - this._attachObserver(); } } public disconnectedCallback(): void { super.disconnectedCallback(); - this._connected = false; if (this._leafletMap) { this._leafletMap.remove(); @@ -193,8 +189,6 @@ class HuiMapCard extends LitElement implements LovelaceCard { if (this._resizeObserver) { this._resizeObserver.unobserve(this._mapEl); - } else { - window.removeEventListener("resize", this._debouncedResizeListener); } } @@ -250,9 +244,7 @@ class HuiMapCard extends LitElement implements LovelaceCard { return; } - if (this._connected) { - this._attachObserver(); - } + this._attachObserver(); if (!this._config.aspect_ratio) { root.style.paddingBottom = "100%"; @@ -564,20 +556,14 @@ class HuiMapCard extends LitElement implements LovelaceCard { this._mapPaths.forEach((marker) => map.addLayer(marker)); } - private _attachObserver(): void { + private async _attachObserver(): Promise { // Observe changes to map size and invalidate to prevent broken rendering - // Uses ResizeObserver in Chrome, otherwise window resize event - // @ts-ignore - if (typeof ResizeObserver === "function") { - // @ts-ignore - this._resizeObserver = new ResizeObserver(() => - this._debouncedResizeListener() - ); - this._resizeObserver.observe(this._mapEl); - } else { - window.addEventListener("resize", this._debouncedResizeListener); + if (!this._resizeObserver) { + await installResizeObserver(); + this._resizeObserver = new ResizeObserver(this._debouncedResizeListener); } + this._resizeObserver.observe(this); } private async _getHistory(): Promise { diff --git a/src/panels/lovelace/cards/hui-media-control-card.ts b/src/panels/lovelace/cards/hui-media-control-card.ts index c7e5ba8319..340689a843 100644 --- a/src/panels/lovelace/cards/hui-media-control-card.ts +++ b/src/panels/lovelace/cards/hui-media-control-card.ts @@ -431,6 +431,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { } protected firstUpdated(): void { + this._measureCard(); this._attachObserver(); } @@ -618,8 +619,6 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { ); } - private _debouncedMeasure = debounce(() => this._measureCard(), 250, true); - private _measureCard() { const card = this.shadowRoot!.querySelector("ha-card"); if (!card) { @@ -631,9 +630,12 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { } private async _attachObserver(): Promise { - await installResizeObserver(); - this._resizeObserver = new ResizeObserver(this._debouncedMeasure); - + if (!this._resizeObserver) { + await installResizeObserver(); + this._resizeObserver = new ResizeObserver( + debounce(() => this._measureCard(), 250, false) + ); + } const card = this.shadowRoot!.querySelector("ha-card"); // If we show an error or warning there is no ha-card if (!card) { diff --git a/src/panels/lovelace/cards/hui-weather-forecast-card.ts b/src/panels/lovelace/cards/hui-weather-forecast-card.ts index e2b49a2d4b..23155a918a 100644 --- a/src/panels/lovelace/cards/hui-weather-forecast-card.ts +++ b/src/panels/lovelace/cards/hui-weather-forecast-card.ts @@ -102,6 +102,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard { } protected firstUpdated(): void { + this._measureCard(); this._attachObserver(); } @@ -292,7 +293,9 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard { private async _attachObserver(): Promise { if (!this._resizeObserver) { await installResizeObserver(); - this._resizeObserver = new ResizeObserver(this._debouncedMeasure); + this._resizeObserver = new ResizeObserver( + debounce(() => this._measureCard(), 250, false) + ); } const card = this.shadowRoot!.querySelector("ha-card"); // If we show an error or warning there is no ha-card @@ -302,8 +305,6 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard { this._resizeObserver.observe(card); } - private _debouncedMeasure = debounce(() => this._measureCard(), 250, true); - private _measureCard() { if (!this.isConnected) { return; diff --git a/src/panels/lovelace/common/install-resize-observer.ts b/src/panels/lovelace/common/install-resize-observer.ts index f675858d99..1018ea38ca 100644 --- a/src/panels/lovelace/common/install-resize-observer.ts +++ b/src/panels/lovelace/common/install-resize-observer.ts @@ -1,6 +1,5 @@ export const installResizeObserver = async () => { if (typeof ResizeObserver !== "function") { - const modules = await import("resize-observer"); - modules.install(); + window.ResizeObserver = (await import("resize-observer-polyfill")).default; } }; diff --git a/src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts b/src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts index ba9da31e08..16bed1f07b 100644 --- a/src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts @@ -47,15 +47,6 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow { private _resizeObserver?: ResizeObserver; - private _debouncedResizeListener = debounce( - () => { - this._narrow = (this.clientWidth || 0) < 300; - this._veryNarrow = (this.clientWidth || 0) < 225; - }, - 250, - true - ); - public setConfig(config: EntityConfig): void { if (!config || !config.entity) { throw new Error("Invalid Configuration: 'entity' required"); @@ -66,9 +57,7 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow { public connectedCallback(): void { super.connectedCallback(); - if (!this._resizeObserver) { - this._attachObserver(); - } + this._attachObserver(); } public disconnectedCallback(): void { @@ -76,6 +65,7 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow { } protected firstUpdated(): void { + this._measureCard(); this._attachObserver(); } @@ -214,12 +204,22 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow { `; } - private _attachObserver(): void { - installResizeObserver().then(() => { - this._resizeObserver = new ResizeObserver(this._debouncedResizeListener); + private async _attachObserver(): Promise { + if (!this._resizeObserver) { + await installResizeObserver(); + this._resizeObserver = new ResizeObserver( + debounce(() => this._measureCard(), 250, false) + ); + } + this._resizeObserver.observe(this); + } - this._resizeObserver.observe(this); - }); + private _measureCard() { + if (!this.isConnected) { + return; + } + this._narrow = (this.clientWidth || 0) < 300; + this._veryNarrow = (this.clientWidth || 0) < 225; } private _computeControlIcon(stateObj: HassEntity): string { diff --git a/yarn.lock b/yarn.lock index 8bca36beda..3515c5589f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12534,11 +12534,6 @@ resize-observer-polyfill@^1.5.1: resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464" integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg== -resize-observer@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/resize-observer/-/resize-observer-1.0.0.tgz#4f8380b73b411af4ed7d916fe85a2d59900e71ef" - integrity sha512-D7UFShDm2TgrEDEyeg+/tTEbvOgPWlvPAfJtxiKp+qutu6HowmcGJKjECgGru0PPDIj3SAucn3ZPpOx54fF7DQ== - resolve-cwd@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"