@smartnet360/svelte-components 0.0.58 → 0.0.59
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -34,12 +34,25 @@
|
|
|
34
34
|
|
|
35
35
|
let map = $state<MapboxMap | null>(null);
|
|
36
36
|
let mounted = $state(false);
|
|
37
|
+
let viewportUpdateTimer: ReturnType<typeof setTimeout> | null = null;
|
|
37
38
|
|
|
38
|
-
//
|
|
39
|
-
function
|
|
39
|
+
// Viewport change handler (pan/zoom/move) with debouncing
|
|
40
|
+
function handleMoveEnd() {
|
|
40
41
|
if (!map) return;
|
|
41
|
-
|
|
42
|
-
|
|
42
|
+
|
|
43
|
+
// Clear any existing timer
|
|
44
|
+
if (viewportUpdateTimer) {
|
|
45
|
+
clearTimeout(viewportUpdateTimer);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
// Debounce: wait 200ms after last move event before re-rendering
|
|
49
|
+
viewportUpdateTimer = setTimeout(() => {
|
|
50
|
+
if (!map) return;
|
|
51
|
+
const newZoom = map.getZoom();
|
|
52
|
+
console.log('CellsLayer: Viewport changed (zoom/pan), updating to zoom:', newZoom);
|
|
53
|
+
// This will trigger $effect to re-run with new viewport bounds and zoom
|
|
54
|
+
store.setCurrentZoom(newZoom);
|
|
55
|
+
}, 200);
|
|
43
56
|
}
|
|
44
57
|
|
|
45
58
|
onMount(() => {
|
|
@@ -55,8 +68,8 @@
|
|
|
55
68
|
// Set initial zoom
|
|
56
69
|
store.setCurrentZoom(mapInstance.getZoom());
|
|
57
70
|
|
|
58
|
-
// Listen to zoom
|
|
59
|
-
mapInstance.on('
|
|
71
|
+
// Listen to viewport changes (pan + zoom, debounced)
|
|
72
|
+
mapInstance.on('moveend', handleMoveEnd);
|
|
60
73
|
}
|
|
61
74
|
});
|
|
62
75
|
|
|
@@ -68,7 +81,12 @@
|
|
|
68
81
|
onDestroy(() => {
|
|
69
82
|
if (!map) return;
|
|
70
83
|
|
|
71
|
-
|
|
84
|
+
// Clean up timer
|
|
85
|
+
if (viewportUpdateTimer) {
|
|
86
|
+
clearTimeout(viewportUpdateTimer);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
map.off('moveend', handleMoveEnd);
|
|
72
90
|
|
|
73
91
|
// Clean up layers and source
|
|
74
92
|
if (map.getLayer(LINE_LAYER_ID)) {
|
|
@@ -110,9 +128,31 @@
|
|
|
110
128
|
return;
|
|
111
129
|
}
|
|
112
130
|
|
|
113
|
-
//
|
|
131
|
+
// Filter cells by viewport bounds (only render visible cells)
|
|
132
|
+
const bounds = map.getBounds();
|
|
133
|
+
if (!bounds) {
|
|
134
|
+
console.warn('CellsLayer: Cannot get map bounds, skipping viewport filter');
|
|
135
|
+
return;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
const visibleCells = store.filteredCells.filter(cell =>
|
|
139
|
+
bounds.contains([cell.longitude, cell.latitude])
|
|
140
|
+
);
|
|
141
|
+
|
|
142
|
+
console.log('CellsLayer: Viewport filtering:', {
|
|
143
|
+
totalFiltered: store.filteredCells.length,
|
|
144
|
+
visibleInViewport: visibleCells.length,
|
|
145
|
+
bounds: {
|
|
146
|
+
north: bounds.getNorth(),
|
|
147
|
+
south: bounds.getSouth(),
|
|
148
|
+
east: bounds.getEast(),
|
|
149
|
+
west: bounds.getWest()
|
|
150
|
+
}
|
|
151
|
+
});
|
|
152
|
+
|
|
153
|
+
// Generate GeoJSON from visible cells only
|
|
114
154
|
const geoJSON = cellsToGeoJSON(
|
|
115
|
-
|
|
155
|
+
visibleCells,
|
|
116
156
|
store.currentZoom,
|
|
117
157
|
store.baseRadius,
|
|
118
158
|
store.groupColorMap
|