midgard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Performance hacks

Browse source
This commit is contained in:
Pieter Vander Vennet 2022-01-06 18:51:52 +01:00
parent 686fb29ed3
commit 7090a5ceb8
15 changed files with 167 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

8
UI/Base/Combine.ts
View file

@ -1,7 +1,6 @@
import {FixedUiElement} from "./FixedUiElement";
import {Utils} from "../../Utils";
import BaseUIElement from "../BaseUIElement";
import Title from "./Title";
export default class Combine extends BaseUIElement {
private readonly uiElements: BaseUIElement[];
@ -21,6 +20,13 @@ export default class Combine extends BaseUIElement {
return this.uiElements.map(el => el.AsMarkdown()).join(this.HasClass("flex-col") ? "\n\n" : " ");
}
Destroy() {
super.Destroy();
for (const uiElement of this.uiElements) {
uiElement.Destroy()
}
}
protected InnerConstructElement(): HTMLElement {
const el = document.createElement("span")
try {

18
UI/Base/MinimapImplementation.ts
View file

@ -48,7 +48,7 @@ export default class MinimapImplementation extends BaseUIElement implements Mini
public static initialize() {
Minimap.createMiniMap = options => new MinimapImplementation(options)
}
public installBounds(factor: number | BBox, showRange?: boolean) {
this.leafletMap.addCallbackD(leaflet => {
let bounds;
@ -105,6 +105,15 @@ export default class MinimapImplementation extends BaseUIElement implements Mini
}
})
}
Destroy() {
super.Destroy();
console.warn("Decomissioning minimap", this._id)
const mp = this.leafletMap.data
this.leafletMap.setData(null)
mp.off()
mp.remove()
}
public async TakeScreenshot() {
const screenshotter = new SimpleMapScreenshoter();
@ -125,6 +134,13 @@ export default class MinimapImplementation extends BaseUIElement implements Mini
const self = this;
// @ts-ignore
const resizeObserver = new ResizeObserver(_ => {
if(wrapper.clientHeight === 0 || wrapper.clientWidth === 0){
return;
}
if(wrapper.offsetParent === null || window.getComputedStyle(wrapper).display === 'none'){
// Not visible
return;
}
try {
self.InitMap();
self.leafletMap?.data?.invalidateSize()

29
UI/Base/ScrollableFullScreen.ts
View file

@ -49,24 +49,26 @@ export default class ScrollableFullScreen extends UIElement {
Hash.hash.setData(hashToShow)
self.Activate();
} else {
self.clear();
// Some cleanup...
ScrollableFullScreen.empty.AttachTo("fullscreen")
const fs = document.getElementById("fullscreen");
ScrollableFullScreen._currentlyOpen?.isShown?.setData(false);
fs.classList.add("hidden")
}
})
Hash.hash.addCallback(hash => {
if (!isShown.data) {
return;
}
if (hash === undefined || hash === "" || hash !== hashToShow) {
isShown.setData(false)
}
})
}
InnerRender(): BaseUIElement {
return this._component;
}
Destroy() {
super.Destroy();
this._component.Destroy()
this._fullscreencomponent.Destroy()
}
Activate(): void {
this.isShown.setData(true)
this._fullscreencomponent.AttachTo("fullscreen");
@ -74,14 +76,6 @@ export default class ScrollableFullScreen extends UIElement {
ScrollableFullScreen._currentlyOpen = this;
fs.classList.remove("hidden")
}
private clear() {
ScrollableFullScreen.empty.AttachTo("fullscreen")
const fs = document.getElementById("fullscreen");
ScrollableFullScreen._currentlyOpen?.isShown?.setData(false);
fs.classList.add("hidden")
}
private BuildComponent(title: BaseUIElement, content: BaseUIElement, isShown: UIEventSource<boolean>) {
const returnToTheMap =
new Combine([
@ -93,6 +87,7 @@ export default class ScrollableFullScreen extends UIElement {
returnToTheMap.onClick(() => {
isShown.setData(false)
Hash.hash.setData(undefined)
})
title.SetClass("block text-l sm:text-xl md:text-2xl w-full font-bold p-0 max-h-20vh overflow-y-auto")

9
UI/Base/VariableUIElement.ts
View file

@ -8,10 +8,19 @@ export class VariableUiElement extends BaseUIElement {
super();
this._contents = contents;
}
Destroy() {
super.Destroy();
this.isDestroyed = true;
}
protected InnerConstructElement(): HTMLElement {
const el = document.createElement("span");
const self = this;
this._contents.addCallbackAndRun((contents) => {
if(self.isDestroyed){
return true;
}
while (el.firstChild) {
el.removeChild(el.lastChild);
}

5
UI/BaseUIElement.ts
View file

@ -11,6 +11,7 @@ export default abstract class BaseUIElement {
private clss: Set<string> = new Set<string>();
private style: string;
private _onClick: () => void;
protected isDestroyed = false;
public onClick(f: (() => void)) {
this._onClick = f;
@ -149,6 +150,10 @@ export default abstract class BaseUIElement {
public AsMarkdown(): string {
throw "AsMarkdown is not implemented by " + this.constructor.name+"; implement it in the subclass"
}
public Destroy(){
this.isDestroyed = true;
}
protected abstract InnerConstructElement(): HTMLElement;
}

2
UI/BigComponents/LeftControls.ts
View file

@ -121,7 +121,7 @@ export default class LeftControls extends Combine {
"filters",
guiState.filterViewIsOpened
).SetClass("rounded-lg md:floating-element-width"),
new MapControlButton(Svg.filter_svg())
new MapControlButton(Svg.layers_svg())
.onClick(() => guiState.filterViewIsOpened.setData(true)),
guiState.filterViewIsOpened
)

1
UI/Popup/FeatureInfoBox.ts
View file

@ -235,4 +235,5 @@ export default class FeatureInfoBox extends ScrollableFullScreen {
return false;
}
}

102
UI/ShowDataLayer/ShowDataLayer.ts
View file

@ -29,6 +29,11 @@ export default class ShowDataLayer {
// Used to generate a fresh ID when needed
private _cleanCount = 0;
private geoLayer = undefined;
/**
* A collection of functions to call when the current geolayer is unregistered
*/
private unregister: (() => void)[] = [];
private isDirty = false;
/**
* If the selected element triggers, this is used to lookup the correct layer and to open the popup
@ -56,25 +61,32 @@ export default class ShowDataLayer {
const self = this;
options.leafletMap.addCallback(_ => {
self.update(options)
return self.update(options)
}
);
this._features.features.addCallback(_ => self.update(options));
options.doShowLayer?.addCallback(doShow => {
const mp = options.leafletMap.data;
if(mp === null){
self.Destroy()
return true;
}
if (mp == undefined) {
return;
}
if (doShow) {
if (self.isDirty) {
self.update(options)
return self.update(options)
} else {
mp.addLayer(this.geoLayer)
}
} else {
if (this.geoLayer !== undefined) {
mp.removeLayer(this.geoLayer)
this.unregister.forEach(f => f())
this.unregister = []
}
}
@ -82,40 +94,50 @@ export default class ShowDataLayer {
this._selectedElement?.addCallbackAndRunD(selected => {
if (self._leafletMap.data === undefined) {
return;
}
const v = self.leafletLayersPerId.get(selected.properties.id + selected.geometry.type)
if (v === undefined) {
return;
}
const leafletLayer = v.leafletlayer
const feature = v.feature
if (leafletLayer.getPopup().isOpen()) {
return;
}
if (selected.properties.id !== feature.properties.id) {
return;
}
if (feature.id !== feature.properties.id) {
// Probably a feature which has renamed
// the feature might have as id 'node/-1' and as 'feature.properties.id' = 'the newly assigned id'. That is no good too
console.log("Not opening the popup for", feature, "as probably renamed")
return;
}
if (selected.geometry.type === feature.geometry.type // If a feature is rendered both as way and as point, opening one popup might trigger the other to open, which might trigger the one to open again
) {
console.log("Opening popup of feature", feature)
leafletLayer.openPopup()
}
self.openPopupOfSelectedElement(selected)
})
this.update(options)
}
private update(options: ShowDataLayerOptions) {
private Destroy() {
this.unregister.forEach(f => f())
}
private openPopupOfSelectedElement(selected) {
if (selected === undefined) {
return
}
if (this._leafletMap.data === undefined) {
return;
}
const v = this.leafletLayersPerId.get(selected.properties.id + selected.geometry.type)
if (v === undefined) {
return;
}
const leafletLayer = v.leafletlayer
const feature = v.feature
if (leafletLayer.getPopup().isOpen()) {
return;
}
if (selected.properties.id !== feature.properties.id) {
return;
}
if (feature.id !== feature.properties.id) {
// Probably a feature which has renamed
// the feature might have as id 'node/-1' and as 'feature.properties.id' = 'the newly assigned id'. That is no good too
console.log("Not opening the popup for", feature, "as probably renamed")
return;
}
if (selected.geometry.type === feature.geometry.type // If a feature is rendered both as way and as point, opening one popup might trigger the other to open, which might trigger the one to open again
) {
leafletLayer.openPopup()
}
}
private update(options: ShowDataLayerOptions) : boolean{
if (this._features.features.data === undefined) {
return;
}
@ -125,9 +147,13 @@ export default class ShowDataLayer {
}
const mp = options.leafletMap.data;
if(mp === null){
return true; // Unregister as the map is destroyed
}
if (mp === undefined) {
return;
}
console.trace("Updating... " + mp["_container"]?.id +" for layer "+this._layerToShow.id)
this._cleanCount++
// clean all the old stuff away, if any
if (this.geoLayer !== undefined) {
@ -145,7 +171,7 @@ export default class ShowDataLayer {
pointToLayer: (feature, latLng) => self.pointToLayer(feature, latLng),
onEachFeature: (feature, leafletLayer) => self.postProcessFeature(feature, leafletLayer)
});
const selfLayer = this.geoLayer;
const allFeats = this._features.features.data;
for (const feat of allFeats) {
@ -176,20 +202,20 @@ export default class ShowDataLayer {
offsettedLine = L.polyline(coords, lineStyle);
this.postProcessFeature(feat, offsettedLine)
offsettedLine.addTo(this.geoLayer)
// If 'self.geoLayer' is not the same as the layer the feature is added to, we can safely remove this callback
return self.geoLayer !== selfLayer
})
} else {
this.geoLayer.addData(feat);
}
}
} catch (e) {
console.error("Could not add ", feat, "to the geojson layer in leaflet due to", e, e.stack)
}
}
if (options.zoomToFeatures ?? false) {
if(this.geoLayer.getLayers().length > 0){
if (this.geoLayer.getLayers().length > 0) {
try {
const bounds = this.geoLayer.getBounds()
mp.fitBounds(bounds, {animate: false})
@ -203,6 +229,7 @@ export default class ShowDataLayer {
mp.addLayer(this.geoLayer)
}
this.isDirty = false;
this.openPopupOfSelectedElement(this._selectedElement?.data)
}
@ -250,7 +277,7 @@ export default class ShowDataLayer {
}
/**
* POst processing - basically adding the popup
* Post processing - basically adding the popup
* @param feature
* @param leafletLayer
* @private
@ -290,6 +317,10 @@ export default class ShowDataLayer {
}
infobox.AttachTo(id)
infobox.Activate();
this.unregister.push(() => {
console.log("Destroying infobox")
infobox.Destroy();
})
if (this._selectedElement?.data?.properties?.id !== feature.properties.id) {
this._selectedElement?.setData(feature)
}
@ -303,7 +334,6 @@ export default class ShowDataLayer {
leafletlayer: leafletLayer
})
}
}

11
UI/i18n/Translation.ts
View file

@ -7,7 +7,7 @@ export class Translation extends BaseUIElement {
public static forcedLanguage = undefined;
public readonly translations: object
constructor(translations: object, context?: string) {
super()
if (translations === undefined) {
@ -33,6 +33,11 @@ export class Translation extends BaseUIElement {
get txt(): string {
return this.textFor(Translation.forcedLanguage ?? Locale.language.data)
}
Destroy() {
super.Destroy();
this.isDestroyed = true;
}
static ExtractAllTranslationsFrom(object: any, context = ""): { context: string, tr: Translation }[] {
const allTranslations: { context: string, tr: Translation }[] = []
@ -90,7 +95,11 @@ export class Translation extends BaseUIElement {
InnerConstructElement(): HTMLElement {
const el = document.createElement("span")
const self = this
Locale.language.addCallbackAndRun(_ => {
if(self.isDestroyed){
return true
}
el.innerHTML = this.txt
})
return el;