fix: debounce update of tilelayer/image bounds

This commit is contained in:
ccmdi 2025-11-22 17:14:56 -05:00
parent c4a385234b
commit 6f2e81b272
No known key found for this signature in database
3 changed files with 26 additions and 4 deletions

View file

@ -1,5 +1,5 @@
import { App, TFile, setIcon } from 'obsidian';
import { Deck, PickingInfo, MapViewState, FlyToInterpolator } from '@deck.gl/core';
import { Deck, PickingInfo, MapViewState, FlyToInterpolator, Layer } from '@deck.gl/core';
import { BitmapLayer, IconLayer, ScatterplotLayer, PolygonLayer } from '@deck.gl/layers';
import { TileLayer } from '@deck.gl/geo-layers';
import type { TileLayerProps, _Tile2DHeader as Tile2DHeader } from '@deck.gl/geo-layers';
@ -696,7 +696,7 @@ export async function createMapRenderer(config: MapRendererOptions): Promise<Dec
const markerLayer = createMarkerLayer(deckData, markerType, settings, tagSettings, options, app);
const polygonLayer = createPolygonLayer(points, tagSettings, markerColor, options, app);
const layers = [backgroundLayer];
const layers: Layer[] = [backgroundLayer];
if (polygonLayer) layers.push(polygonLayer);
layers.push(markerLayer);

View file

@ -30,7 +30,7 @@ export class MapBasesView extends BasesView {
protected savedViewState: { latitude: number; longitude: number; zoom: number } | null = null;
protected lastPoints: MapPoint[] = [];
protected watchProps = ['center', 'defaultZoom'];
protected mapUpdateTimeout?: number;
protected lastConfigState: Record<string, unknown> = {};
constructor(controller: QueryController, scrollEl: HTMLElement, plugin: MapPlugin) {
@ -171,6 +171,15 @@ export class MapBasesView extends BasesView {
public onDataUpdated(): void {
// If map exists, just update points. Otherwise create map.
if (this.deck) {
if(this.hasConfigPropertyChanged('tileLayer') || this.hasConfigPropertyChanged('imageBounds')) {
//debounce 500ms
if (this.mapUpdateTimeout) {
window.clearTimeout(this.mapUpdateTimeout);
}
this.mapUpdateTimeout = window.setTimeout(() => {
this.refresh();
}, 1500);
}
this.updateMap();
} else {
this.renderMap();

View file

@ -29,7 +29,6 @@ export class MapTimelineBasesView extends MapBasesView {
private playButton: HTMLButtonElement | null = null;
// private liveUpdateTimeout?: number;
private allTimelineEntries: TimelineMapPoint[] = [];
private mapUpdateTimeout?: number;
private dataUpdateTimeout?: number;
private isPlaying: boolean = false;
@ -451,6 +450,20 @@ export class MapTimelineBasesView extends MapBasesView {
}
public onDataUpdated(): void {
// Check for base view config changes first (tileLayer, imageBounds, etc.)
if (this.deck) {
if(this.hasConfigPropertyChanged('tileLayer') || this.hasConfigPropertyChanged('imageBounds')) {
//debounce 500ms
if (this.mapUpdateTimeout) {
window.clearTimeout(this.mapUpdateTimeout);
}
this.mapUpdateTimeout = window.setTimeout(() => {
this.refresh();
}, 250);
return;
}
}
if (this.getDateProperty()) {
this.updateTimelineData();