Dont recreate resize observers and replace polyfill (#6043)
This commit is contained in:
parent
050cdf3783
commit
2fd64af737
|
@ -104,7 +104,7 @@
|
||||||
"node-vibrant": "^3.1.5",
|
"node-vibrant": "^3.1.5",
|
||||||
"proxy-polyfill": "^0.3.1",
|
"proxy-polyfill": "^0.3.1",
|
||||||
"regenerator-runtime": "^0.13.2",
|
"regenerator-runtime": "^0.13.2",
|
||||||
"resize-observer": "^1.0.0",
|
"resize-observer-polyfill": "^1.5.1",
|
||||||
"roboto-fontface": "^0.10.0",
|
"roboto-fontface": "^0.10.0",
|
||||||
"superstruct": "^0.6.1",
|
"superstruct": "^0.6.1",
|
||||||
"unfetch": "^4.1.0",
|
"unfetch": "^4.1.0",
|
||||||
|
|
|
@ -2,6 +2,7 @@ import { Connection, createCollection } from "home-assistant-js-websocket";
|
||||||
import { compare } from "../common/string/compare";
|
import { compare } from "../common/string/compare";
|
||||||
import { debounce } from "../common/util/debounce";
|
import { debounce } from "../common/util/debounce";
|
||||||
import { HomeAssistant } from "../types";
|
import { HomeAssistant } from "../types";
|
||||||
|
import { Store } from "home-assistant-js-websocket/dist/store";
|
||||||
|
|
||||||
export interface AreaRegistryEntry {
|
export interface AreaRegistryEntry {
|
||||||
area_id: string;
|
area_id: string;
|
||||||
|
@ -38,18 +39,27 @@ export const deleteAreaRegistryEntry = (hass: HomeAssistant, areaId: string) =>
|
||||||
area_id: areaId,
|
area_id: areaId,
|
||||||
});
|
});
|
||||||
|
|
||||||
const fetchAreaRegistry = (conn) =>
|
const fetchAreaRegistry = (conn: Connection) =>
|
||||||
conn
|
conn
|
||||||
.sendMessagePromise({
|
.sendMessagePromise({
|
||||||
type: "config/area_registry/list",
|
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(
|
conn.subscribeEvents(
|
||||||
debounce(
|
debounce(
|
||||||
() =>
|
() =>
|
||||||
fetchAreaRegistry(conn).then((areas) => store.setState(areas, true)),
|
fetchAreaRegistry(conn).then((areas: AreaRegistryEntry[]) =>
|
||||||
|
store.setState(areas, true)
|
||||||
|
),
|
||||||
500,
|
500,
|
||||||
true
|
true
|
||||||
),
|
),
|
||||||
|
|
|
@ -175,6 +175,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
|
||||||
}
|
}
|
||||||
|
|
||||||
protected firstUpdated(): void {
|
protected firstUpdated(): void {
|
||||||
|
this._measureCard();
|
||||||
this._attachObserver();
|
this._attachObserver();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -236,10 +237,12 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
|
||||||
}
|
}
|
||||||
|
|
||||||
private async _attachObserver(): Promise<void> {
|
private async _attachObserver(): Promise<void> {
|
||||||
await installResizeObserver();
|
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");
|
const card = this.shadowRoot!.querySelector("ha-card");
|
||||||
// If we show an error or warning there is no ha-card
|
// If we show an error or warning there is no ha-card
|
||||||
if (!card) {
|
if (!card) {
|
||||||
|
@ -248,8 +251,6 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
|
||||||
this._resizeObserver.observe(card);
|
this._resizeObserver.observe(card);
|
||||||
}
|
}
|
||||||
|
|
||||||
private _debouncedMeasure = debounce(() => this._measureCard(), 250, true);
|
|
||||||
|
|
||||||
private _measureCard() {
|
private _measureCard() {
|
||||||
if (!this.isConnected) {
|
if (!this.isConnected) {
|
||||||
return;
|
return;
|
||||||
|
|
|
@ -39,6 +39,7 @@ import { EntityConfig } from "../entity-rows/types";
|
||||||
import { LovelaceCard } from "../types";
|
import { LovelaceCard } from "../types";
|
||||||
import "../../../components/ha-card";
|
import "../../../components/ha-card";
|
||||||
import { MapCardConfig } from "./types";
|
import { MapCardConfig } from "./types";
|
||||||
|
import { installResizeObserver } from "../common/install-resize-observer";
|
||||||
|
|
||||||
@customElement("hui-map-card")
|
@customElement("hui-map-card")
|
||||||
class HuiMapCard extends LitElement implements LovelaceCard {
|
class HuiMapCard extends LitElement implements LovelaceCard {
|
||||||
|
@ -90,17 +91,16 @@ class HuiMapCard extends LitElement implements LovelaceCard {
|
||||||
|
|
||||||
private _leafletMap?: Map;
|
private _leafletMap?: Map;
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
private _resizeObserver?: ResizeObserver;
|
private _resizeObserver?: ResizeObserver;
|
||||||
|
|
||||||
private _debouncedResizeListener = debounce(
|
private _debouncedResizeListener = debounce(
|
||||||
() => {
|
() => {
|
||||||
if (!this._leafletMap) {
|
if (!this.isConnected || !this._leafletMap) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this._leafletMap.invalidateSize();
|
this._leafletMap.invalidateSize();
|
||||||
},
|
},
|
||||||
100,
|
250,
|
||||||
false
|
false
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -110,8 +110,6 @@ class HuiMapCard extends LitElement implements LovelaceCard {
|
||||||
|
|
||||||
private _mapPaths: Array<Polyline | CircleMarker> = [];
|
private _mapPaths: Array<Polyline | CircleMarker> = [];
|
||||||
|
|
||||||
private _connected = false;
|
|
||||||
|
|
||||||
private _colorDict: { [key: string]: string } = {};
|
private _colorDict: { [key: string]: string } = {};
|
||||||
|
|
||||||
private _colorIndex = 0;
|
private _colorIndex = 0;
|
||||||
|
@ -174,16 +172,14 @@ class HuiMapCard extends LitElement implements LovelaceCard {
|
||||||
|
|
||||||
public connectedCallback(): void {
|
public connectedCallback(): void {
|
||||||
super.connectedCallback();
|
super.connectedCallback();
|
||||||
this._connected = true;
|
this._attachObserver();
|
||||||
if (this.hasUpdated) {
|
if (this.hasUpdated) {
|
||||||
this.loadMap();
|
this.loadMap();
|
||||||
this._attachObserver();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
public disconnectedCallback(): void {
|
public disconnectedCallback(): void {
|
||||||
super.disconnectedCallback();
|
super.disconnectedCallback();
|
||||||
this._connected = false;
|
|
||||||
|
|
||||||
if (this._leafletMap) {
|
if (this._leafletMap) {
|
||||||
this._leafletMap.remove();
|
this._leafletMap.remove();
|
||||||
|
@ -193,8 +189,6 @@ class HuiMapCard extends LitElement implements LovelaceCard {
|
||||||
|
|
||||||
if (this._resizeObserver) {
|
if (this._resizeObserver) {
|
||||||
this._resizeObserver.unobserve(this._mapEl);
|
this._resizeObserver.unobserve(this._mapEl);
|
||||||
} else {
|
|
||||||
window.removeEventListener("resize", this._debouncedResizeListener);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -250,9 +244,7 @@ class HuiMapCard extends LitElement implements LovelaceCard {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this._connected) {
|
this._attachObserver();
|
||||||
this._attachObserver();
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!this._config.aspect_ratio) {
|
if (!this._config.aspect_ratio) {
|
||||||
root.style.paddingBottom = "100%";
|
root.style.paddingBottom = "100%";
|
||||||
|
@ -564,20 +556,14 @@ class HuiMapCard extends LitElement implements LovelaceCard {
|
||||||
this._mapPaths.forEach((marker) => map.addLayer(marker));
|
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
|
// Observe changes to map size and invalidate to prevent broken rendering
|
||||||
// Uses ResizeObserver in Chrome, otherwise window resize event
|
|
||||||
|
|
||||||
// @ts-ignore
|
if (!this._resizeObserver) {
|
||||||
if (typeof ResizeObserver === "function") {
|
await installResizeObserver();
|
||||||
// @ts-ignore
|
this._resizeObserver = new ResizeObserver(this._debouncedResizeListener);
|
||||||
this._resizeObserver = new ResizeObserver(() =>
|
|
||||||
this._debouncedResizeListener()
|
|
||||||
);
|
|
||||||
this._resizeObserver.observe(this._mapEl);
|
|
||||||
} else {
|
|
||||||
window.addEventListener("resize", this._debouncedResizeListener);
|
|
||||||
}
|
}
|
||||||
|
this._resizeObserver.observe(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
private async _getHistory(): Promise<void> {
|
private async _getHistory(): Promise<void> {
|
||||||
|
|
|
@ -431,6 +431,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
|
||||||
}
|
}
|
||||||
|
|
||||||
protected firstUpdated(): void {
|
protected firstUpdated(): void {
|
||||||
|
this._measureCard();
|
||||||
this._attachObserver();
|
this._attachObserver();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -618,8 +619,6 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
private _debouncedMeasure = debounce(() => this._measureCard(), 250, true);
|
|
||||||
|
|
||||||
private _measureCard() {
|
private _measureCard() {
|
||||||
const card = this.shadowRoot!.querySelector("ha-card");
|
const card = this.shadowRoot!.querySelector("ha-card");
|
||||||
if (!card) {
|
if (!card) {
|
||||||
|
@ -631,9 +630,12 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
|
||||||
}
|
}
|
||||||
|
|
||||||
private async _attachObserver(): Promise<void> {
|
private async _attachObserver(): Promise<void> {
|
||||||
await installResizeObserver();
|
if (!this._resizeObserver) {
|
||||||
this._resizeObserver = new ResizeObserver(this._debouncedMeasure);
|
await installResizeObserver();
|
||||||
|
this._resizeObserver = new ResizeObserver(
|
||||||
|
debounce(() => this._measureCard(), 250, false)
|
||||||
|
);
|
||||||
|
}
|
||||||
const card = this.shadowRoot!.querySelector("ha-card");
|
const card = this.shadowRoot!.querySelector("ha-card");
|
||||||
// If we show an error or warning there is no ha-card
|
// If we show an error or warning there is no ha-card
|
||||||
if (!card) {
|
if (!card) {
|
||||||
|
|
|
@ -102,6 +102,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
|
||||||
}
|
}
|
||||||
|
|
||||||
protected firstUpdated(): void {
|
protected firstUpdated(): void {
|
||||||
|
this._measureCard();
|
||||||
this._attachObserver();
|
this._attachObserver();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -292,7 +293,9 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
|
||||||
private async _attachObserver(): Promise<void> {
|
private async _attachObserver(): Promise<void> {
|
||||||
if (!this._resizeObserver) {
|
if (!this._resizeObserver) {
|
||||||
await installResizeObserver();
|
await installResizeObserver();
|
||||||
this._resizeObserver = new ResizeObserver(this._debouncedMeasure);
|
this._resizeObserver = new ResizeObserver(
|
||||||
|
debounce(() => this._measureCard(), 250, false)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
const card = this.shadowRoot!.querySelector("ha-card");
|
const card = this.shadowRoot!.querySelector("ha-card");
|
||||||
// If we show an error or warning there is no 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);
|
this._resizeObserver.observe(card);
|
||||||
}
|
}
|
||||||
|
|
||||||
private _debouncedMeasure = debounce(() => this._measureCard(), 250, true);
|
|
||||||
|
|
||||||
private _measureCard() {
|
private _measureCard() {
|
||||||
if (!this.isConnected) {
|
if (!this.isConnected) {
|
||||||
return;
|
return;
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
export const installResizeObserver = async () => {
|
export const installResizeObserver = async () => {
|
||||||
if (typeof ResizeObserver !== "function") {
|
if (typeof ResizeObserver !== "function") {
|
||||||
const modules = await import("resize-observer");
|
window.ResizeObserver = (await import("resize-observer-polyfill")).default;
|
||||||
modules.install();
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -47,15 +47,6 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
|
||||||
|
|
||||||
private _resizeObserver?: ResizeObserver;
|
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 {
|
public setConfig(config: EntityConfig): void {
|
||||||
if (!config || !config.entity) {
|
if (!config || !config.entity) {
|
||||||
throw new Error("Invalid Configuration: 'entity' required");
|
throw new Error("Invalid Configuration: 'entity' required");
|
||||||
|
@ -66,9 +57,7 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
|
||||||
|
|
||||||
public connectedCallback(): void {
|
public connectedCallback(): void {
|
||||||
super.connectedCallback();
|
super.connectedCallback();
|
||||||
if (!this._resizeObserver) {
|
this._attachObserver();
|
||||||
this._attachObserver();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
public disconnectedCallback(): void {
|
public disconnectedCallback(): void {
|
||||||
|
@ -76,6 +65,7 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
|
||||||
}
|
}
|
||||||
|
|
||||||
protected firstUpdated(): void {
|
protected firstUpdated(): void {
|
||||||
|
this._measureCard();
|
||||||
this._attachObserver();
|
this._attachObserver();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -214,12 +204,22 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
private _attachObserver(): void {
|
private async _attachObserver(): Promise<void> {
|
||||||
installResizeObserver().then(() => {
|
if (!this._resizeObserver) {
|
||||||
this._resizeObserver = new ResizeObserver(this._debouncedResizeListener);
|
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 {
|
private _computeControlIcon(stateObj: HassEntity): string {
|
||||||
|
|
|
@ -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"
|
resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
|
||||||
integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
|
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:
|
resolve-cwd@^2.0.0:
|
||||||
version "2.0.0"
|
version "2.0.0"
|
||||||
resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
|
resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
|
||||||
|
|
Loading…
Reference in New Issue