jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-08-02 14:07:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Code split Leaflet (#2196)

Browse Source
This commit is contained in:
Paulus Schoutsen 2018-12-06 13:30:05 +01:00 committed by GitHub
parent be3bfc7aa4
commit 6e3c2bfd6a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 40 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/common/dom/setup-leaflet-map.js
View File

@ -1,7 +1,9 @@
import Leaflet from "leaflet";
// Sets up a Leaflet map on the provided DOM element // Sets up a Leaflet map on the provided DOM element
export default function setupLeafletMap(mapElement) { export const setupLeafletMap = async (mapElement) => {
const Leaflet = (await import(/* webpackChunkName: "leaflet" */ "leaflet"))
.default;
Leaflet.Icon.Default.imagePath = "/static/images/leaflet";
const map = Leaflet.map(mapElement); const map = Leaflet.map(mapElement);
const style = document.createElement("link"); const style = document.createElement("link");
style.setAttribute("href", "/static/images/leaflet/leaflet.css"); style.setAttribute("href", "/static/images/leaflet/leaflet.css");
@ -21,5 +23,5 @@ export default function setupLeafletMap(mapElement) {
} }
).addTo(map); ).addTo(map);
return map; return [map, Leaflet];
} };

36
src/panels/lovelace/cards/hui-map-card.js
View File

@ -1,19 +1,16 @@
import { html } from "@polymer/polymer/lib/utils/html-tag"; import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element"; import { PolymerElement } from "@polymer/polymer/polymer-element";
import "@polymer/paper-icon-button/paper-icon-button"; import "@polymer/paper-icon-button/paper-icon-button";
import Leaflet from "leaflet";
import "../../map/ha-entity-marker"; import "../../map/ha-entity-marker";
import setupLeafletMap from "../../../common/dom/setup-leaflet-map"; import { setupLeafletMap } from "../../../common/dom/setup-leaflet-map";
import { processConfigEntities } from "../common/process-config-entities"; import { processConfigEntities } from "../common/process-config-entities";
import computeStateDomain from "../../../common/entity/compute_state_domain"; import computeStateDomain from "../../../common/entity/compute_state_domain";
import computeStateName from "../../../common/entity/compute_state_name"; import computeStateName from "../../../common/entity/compute_state_name";
import debounce from "../../../common/util/debounce"; import debounce from "../../../common/util/debounce";
import parseAspectRatio from "../../../common/util/parse-aspect-ratio"; import parseAspectRatio from "../../../common/util/parse-aspect-ratio";
Leaflet.Icon.Default.imagePath = "/static/images/leaflet";
class HuiMapCard extends PolymerElement { class HuiMapCard extends PolymerElement {
static get template() { static get template() {
return html` return html`
@ -143,13 +140,14 @@ class HuiMapCard extends PolymerElement {
window.addEventListener("resize", this._debouncedResizeListener); window.addEventListener("resize", this._debouncedResizeListener);
} }
this._map = setupLeafletMap(this.$.map); this.loadMap();
this._drawEntities(this.hass); }
setTimeout(() => { async loadMap() {
this._resetMap(); [this._map, this.Leaflet] = await setupLeafletMap(this.$.map);
this._fitMap(); this._drawEntities(this.hass);
}, 1); this._map.invalidateSize();
this._fitMap();
} }
disconnectedCallback() { disconnectedCallback() {
@ -177,7 +175,7 @@ class HuiMapCard extends PolymerElement {
const zoom = this._config.default_zoom; const zoom = this._config.default_zoom;
if (this._mapItems.length === 0) { if (this._mapItems.length === 0) {
this._map.setView( this._map.setView(
new Leaflet.LatLng( new this.Leaflet.LatLng(
this.hass.config.latitude, this.hass.config.latitude,
this.hass.config.longitude this.hass.config.longitude
), ),
@ -186,7 +184,7 @@ class HuiMapCard extends PolymerElement {
return; return;
} }
const bounds = new Leaflet.latLngBounds( const bounds = new this.Leaflet.latLngBounds(
this._mapItems.map((item) => item.getLatLng()) this._mapItems.map((item) => item.getLatLng())
); );
this._map.fitBounds(bounds.pad(0.5)); this._map.fitBounds(bounds.pad(0.5));
@ -245,7 +243,7 @@ class HuiMapCard extends PolymerElement {
iconHTML = title; iconHTML = title;
} }
markerIcon = Leaflet.divIcon({ markerIcon = this.Leaflet.divIcon({
html: iconHTML, html: iconHTML,
iconSize: [24, 24], iconSize: [24, 24],
className: "", className: "",
@ -253,7 +251,7 @@ class HuiMapCard extends PolymerElement {
// create market with the icon // create market with the icon
mapItems.push( mapItems.push(
Leaflet.marker([latitude, longitude], { this.Leaflet.marker([latitude, longitude], {
icon: markerIcon, icon: markerIcon,
interactive: false, interactive: false,
title: title, title: title,
@ -262,7 +260,7 @@ class HuiMapCard extends PolymerElement {
// create circle around it // create circle around it
mapItems.push( mapItems.push(
Leaflet.circle([latitude, longitude], { this.Leaflet.circle([latitude, longitude], {
interactive: false, interactive: false,
color: "#FF9800", color: "#FF9800",
radius: radius, radius: radius,
@ -285,9 +283,9 @@ class HuiMapCard extends PolymerElement {
el.setAttribute("entity-name", entityName); el.setAttribute("entity-name", entityName);
el.setAttribute("entity-picture", entityPicture || ""); el.setAttribute("entity-picture", entityPicture || "");
/* Leaflet clones this element before adding it to the map. This messes up /* this.Leaflet clones this element before adding it to the map. This messes up
our Polymer object and we can't pass data through. Thus we hack like this. */ our Polymer object and we can't pass data through. Thus we hack like this. */
markerIcon = Leaflet.divIcon({ markerIcon = this.Leaflet.divIcon({
html: el.outerHTML, html: el.outerHTML,
iconSize: [48, 48], iconSize: [48, 48],
className: "", className: "",
@ -295,7 +293,7 @@ class HuiMapCard extends PolymerElement {
// create market with the icon // create market with the icon
mapItems.push( mapItems.push(
Leaflet.marker([latitude, longitude], { this.Leaflet.marker([latitude, longitude], {
icon: markerIcon, icon: markerIcon,
title: computeStateName(stateObj), title: computeStateName(stateObj),
}).addTo(map) }).addTo(map)
@ -304,7 +302,7 @@ class HuiMapCard extends PolymerElement {
// create circle around if entity has accuracy // create circle around if entity has accuracy
if (gpsAccuracy) { if (gpsAccuracy) {
mapItems.push( mapItems.push(
Leaflet.circle([latitude, longitude], { this.Leaflet.circle([latitude, longitude], {
interactive: false, interactive: false,
color: "#0288D1", color: "#0288D1",
radius: gpsAccuracy, radius: gpsAccuracy,

35
src/panels/map/ha-panel-map.js
View File

@ -1,7 +1,6 @@
import "@polymer/app-layout/app-toolbar/app-toolbar"; import "@polymer/app-layout/app-toolbar/app-toolbar";
import { html } from "@polymer/polymer/lib/utils/html-tag"; import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element"; import { PolymerElement } from "@polymer/polymer/polymer-element";
import Leaflet from "leaflet";
import "../../components/ha-menu-button"; import "../../components/ha-menu-button";
import "../../components/ha-icon"; import "../../components/ha-icon";
@ -11,9 +10,7 @@ import "./ha-entity-marker";
import computeStateDomain from "../../common/entity/compute_state_domain"; import computeStateDomain from "../../common/entity/compute_state_domain";
import computeStateName from "../../common/entity/compute_state_name"; import computeStateName from "../../common/entity/compute_state_name";
import LocalizeMixin from "../../mixins/localize-mixin"; import LocalizeMixin from "../../mixins/localize-mixin";
import setupLeafletMap from "../../common/dom/setup-leaflet-map"; import { setupLeafletMap } from "../../common/dom/setup-leaflet-map";
Leaflet.Icon.Default.imagePath = "/static/images/leaflet";
/* /*
* @appliesMixin LocalizeMixin * @appliesMixin LocalizeMixin
@ -61,14 +58,14 @@ class HaPanelMap extends LocalizeMixin(PolymerElement) {
connectedCallback() { connectedCallback() {
super.connectedCallback(); super.connectedCallback();
var map = (this._map = setupLeafletMap(this.$.map)); this.loadMap();
}
async loadMap() {
[this._map, this.Leaflet] = await setupLeafletMap(this.$.map);
this.drawEntities(this.hass); this.drawEntities(this.hass);
this._map.invalidateSize();
setTimeout(() => { this.fitMap();
map.invalidateSize();
this.fitMap();
}, 1);
} }
disconnectedCallback() { disconnectedCallback() {
@ -82,14 +79,14 @@ class HaPanelMap extends LocalizeMixin(PolymerElement) {
if (this._mapItems.length === 0) { if (this._mapItems.length === 0) {
this._map.setView( this._map.setView(
new Leaflet.LatLng( new this.Leaflet.LatLng(
this.hass.config.latitude, this.hass.config.latitude,
this.hass.config.longitude this.hass.config.longitude
), ),
14 14
); );
} else { } else {
bounds = new Leaflet.latLngBounds( bounds = new this.Leaflet.latLngBounds(
this._mapItems.map((item) => item.getLatLng()) this._mapItems.map((item) => item.getLatLng())
); );
this._map.fitBounds(bounds.pad(0.5)); this._map.fitBounds(bounds.pad(0.5));
@ -108,7 +105,7 @@ class HaPanelMap extends LocalizeMixin(PolymerElement) {
} }
var mapItems = (this._mapItems = []); var mapItems = (this._mapItems = []);
Object.keys(hass.states).forEach(function(entityId) { Object.keys(hass.states).forEach((entityId) => {
var entity = hass.states[entityId]; var entity = hass.states[entityId];
var title = computeStateName(entity); var title = computeStateName(entity);
@ -137,7 +134,7 @@ class HaPanelMap extends LocalizeMixin(PolymerElement) {
iconHTML = title; iconHTML = title;
} }
icon = Leaflet.divIcon({ icon = this.Leaflet.divIcon({
html: iconHTML, html: iconHTML,
iconSize: [24, 24], iconSize: [24, 24],
className: "", className: "",
@ -145,7 +142,7 @@ class HaPanelMap extends LocalizeMixin(PolymerElement) {
// create market with the icon // create market with the icon
mapItems.push( mapItems.push(
Leaflet.marker( this.Leaflet.marker(
[entity.attributes.latitude, entity.attributes.longitude], [entity.attributes.latitude, entity.attributes.longitude],
{ {
icon: icon, icon: icon,
@ -157,7 +154,7 @@ class HaPanelMap extends LocalizeMixin(PolymerElement) {
// create circle around it // create circle around it
mapItems.push( mapItems.push(
Leaflet.circle( this.Leaflet.circle(
[entity.attributes.latitude, entity.attributes.longitude], [entity.attributes.latitude, entity.attributes.longitude],
{ {
interactive: false, interactive: false,
@ -181,7 +178,7 @@ class HaPanelMap extends LocalizeMixin(PolymerElement) {
.join(""); .join("");
/* Leaflet clones this element before adding it to the map. This messes up /* Leaflet clones this element before adding it to the map. This messes up
our Polymer object and we can't pass data through. Thus we hack like this. */ our Polymer object and we can't pass data through. Thus we hack like this. */
icon = Leaflet.divIcon({ icon = this.Leaflet.divIcon({
html: html:
"<ha-entity-marker entity-id='" + "<ha-entity-marker entity-id='" +
entity.entity_id + entity.entity_id +
@ -196,7 +193,7 @@ class HaPanelMap extends LocalizeMixin(PolymerElement) {
// create market with the icon // create market with the icon
mapItems.push( mapItems.push(
Leaflet.marker( this.Leaflet.marker(
[entity.attributes.latitude, entity.attributes.longitude], [entity.attributes.latitude, entity.attributes.longitude],
{ {
icon: icon, icon: icon,
@ -208,7 +205,7 @@ class HaPanelMap extends LocalizeMixin(PolymerElement) {
// create circle around if entity has accuracy // create circle around if entity has accuracy
if (entity.attributes.gps_accuracy) { if (entity.attributes.gps_accuracy) {
mapItems.push( mapItems.push(
Leaflet.circle( this.Leaflet.circle(
[entity.attributes.latitude, entity.attributes.longitude], [entity.attributes.latitude, entity.attributes.longitude],
{ {
interactive: false, interactive: false,