github
/
ha-frontend
mirror of https://github.com/home-assistant/frontend
1
Fork 0
Code Releases Activity

Dont recreate resize observers and replace polyfill (#6043)

This commit is contained in:
Bram Kragten 2020-05-25 19:36:47 +02:00 committed by GitHub
parent 050cdf3783
commit 2fd64af737
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 61 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -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",

18
src/data/area_registry.ts
View File

@ -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<AreaRegistryEntry[]>
) =>
conn.subscribeEvents(
debounce(
() =>
fetchAreaRegistry(conn).then((areas) => store.setState(areas, true)),
fetchAreaRegistry(conn).then((areas: AreaRegistryEntry[]) =>
store.setState(areas, true)
),
500,
true
),

13
src/panels/lovelace/cards/hui-gauge-card.ts
View File

@ -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<void> {
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;

34
src/panels/lovelace/cards/hui-map-card.ts
View File

@ -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<Polyline | CircleMarker> = [];
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<void> {
// 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<void> {

12
src/panels/lovelace/cards/hui-media-control-card.ts
View File

@ -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<void> {
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) {

7
src/panels/lovelace/cards/hui-weather-forecast-card.ts
View File

@ -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<void> {
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;

3
src/panels/lovelace/common/install-resize-observer.ts
View File

@ -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;
}
};

34
src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts
View File

@ -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<void> {
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 {

5
yarn.lock
View File

@ -12758,11 +12758,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"