dandri/meshcore-analyzer
1
0
Fork 0
mirror of https://github.com/Kpa-clawbot/meshcore-analyzer.git synced 2026-03-30 14:45:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: re-run marker decollision on map resize

Browse Source 
Added map.on('resize') handler that re-renders markers, recalculating
pixel-based decollision offsets for the new container size. Previously
only zoomend triggered re-render — resize left stale offsets.

Added E2E test verifying markers survive a viewport resize.
This commit is contained in:
you
2026-03-24 20:55:39 +00:00
parent ae7010ae0c
commit 863ee604be
3 changed files with 46 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
public/index.html
View File

@@ -22,9 +22,9 @@
<meta name="twitter:title" content="MeshCore Analyzer">
<meta name="twitter:description" content="Real-time MeshCore LoRa mesh network analyzer — live packet visualization, node tracking, channel decryption, and route analysis.">
<meta name="twitter:image" content="https://raw.githubusercontent.com/Kpa-clawbot/meshcore-analyzer/master/public/og-image.png">
<link rel="stylesheet" href="style.css?v=1774383787">
<link rel="stylesheet" href="home.css?v=1774383787">
<link rel="stylesheet" href="live.css?v=1774383787">
<link rel="stylesheet" href="style.css?v=1774385739">
<link rel="stylesheet" href="home.css?v=1774385739">
<link rel="stylesheet" href="live.css?v=1774385739">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin="anonymous">
@@ -81,27 +81,27 @@
<main id="app" role="main"></main>
<script src="vendor/qrcode.js"></script>
<script src="roles.js?v=1774383787"></script>
<script src="customize.js?v=1774383787" onerror="console.error('Failed to load:', this.src)"></script>
<script src="region-filter.js?v=1774383787"></script>
<script src="hop-resolver.js?v=1774383787"></script>
<script src="hop-display.js?v=1774383787"></script>
<script src="app.js?v=1774383787"></script>
<script src="home.js?v=1774383787"></script>
<script src="packet-filter.js?v=1774383787"></script>
<script src="packets.js?v=1774383787"></script>
<script src="map.js?v=1774383787" onerror="console.error('Failed to load:', this.src)"></script>
<script src="channels.js?v=1774383787" onerror="console.error('Failed to load:', this.src)"></script>
<script src="nodes.js?v=1774383787" onerror="console.error('Failed to load:', this.src)"></script>
<script src="traces.js?v=1774383787" onerror="console.error('Failed to load:', this.src)"></script>
<script src="analytics.js?v=1774383787" onerror="console.error('Failed to load:', this.src)"></script>
<script src="audio.js?v=1774383787" onerror="console.error('Failed to load:', this.src)"></script>
<script src="audio-v1-constellation.js?v=1774383787" onerror="console.error('Failed to load:', this.src)"></script>
<script src="audio-lab.js?v=1774383787" onerror="console.error('Failed to load:', this.src)"></script>
<script src="live.js?v=1774383787" onerror="console.error('Failed to load:', this.src)"></script>
<script src="observers.js?v=1774383787" onerror="console.error('Failed to load:', this.src)"></script>
<script src="observer-detail.js?v=1774383787" onerror="console.error('Failed to load:', this.src)"></script>
<script src="node-analytics.js?v=1774383787" onerror="console.error('Failed to load:', this.src)"></script>
<script src="perf.js?v=1774383787" onerror="console.error('Failed to load:', this.src)"></script>
<script src="roles.js?v=1774385739"></script>
<script src="customize.js?v=1774385739" onerror="console.error('Failed to load:', this.src)"></script>
<script src="region-filter.js?v=1774385739"></script>
<script src="hop-resolver.js?v=1774385739"></script>
<script src="hop-display.js?v=1774385739"></script>
<script src="app.js?v=1774385739"></script>
<script src="home.js?v=1774385739"></script>
<script src="packet-filter.js?v=1774385739"></script>
<script src="packets.js?v=1774385739"></script>
<script src="map.js?v=1774385739" onerror="console.error('Failed to load:', this.src)"></script>
<script src="channels.js?v=1774385739" onerror="console.error('Failed to load:', this.src)"></script>
<script src="nodes.js?v=1774385739" onerror="console.error('Failed to load:', this.src)"></script>
<script src="traces.js?v=1774385739" onerror="console.error('Failed to load:', this.src)"></script>
<script src="analytics.js?v=1774385739" onerror="console.error('Failed to load:', this.src)"></script>
<script src="audio.js?v=1774385739" onerror="console.error('Failed to load:', this.src)"></script>
<script src="audio-v1-constellation.js?v=1774385739" onerror="console.error('Failed to load:', this.src)"></script>
<script src="audio-lab.js?v=1774385739" onerror="console.error('Failed to load:', this.src)"></script>
<script src="live.js?v=1774385739" onerror="console.error('Failed to load:', this.src)"></script>
<script src="observers.js?v=1774385739" onerror="console.error('Failed to load:', this.src)"></script>
<script src="observer-detail.js?v=1774385739" onerror="console.error('Failed to load:', this.src)"></script>
<script src="node-analytics.js?v=1774385739" onerror="console.error('Failed to load:', this.src)"></script>
<script src="perf.js?v=1774385739" onerror="console.error('Failed to load:', this.src)"></script>
</body>
</html>

4
public/map.js
View File

@@ -175,6 +175,10 @@
if (filters.hashLabels && !_renderingMarkers) renderMarkers();
});
map.on('resize', () => {
if (!_renderingMarkers) renderMarkers();
});
markerLayer = L.layerGroup().addTo(map);
routeLayer = L.layerGroup().addTo(map);

17
test-e2e-playwright.js
View File

@@ -298,6 +298,23 @@ async function run() {
assert(custJs.includes('Live Map') || custJs.includes('live map') || custJs.includes('📡'), 'Live slider should have live-related label');
});
// Test 16: Map re-renders markers on resize (decollision recalculates)
await test('Map re-renders on resize', async () => {
await page.goto(`${BASE}/#/map`, { waitUntil: 'networkidle' });
await page.waitForSelector('.leaflet-container', { timeout: 10000 });
await page.waitForTimeout(2000);
// Count markers before resize
const beforeCount = await page.$$eval('.leaflet-marker-icon, .leaflet-interactive', els => els.length);
// Resize viewport
await page.setViewportSize({ width: 600, height: 400 });
await page.waitForTimeout(1500);
// Markers should still be present after resize (re-rendered, not lost)
const afterCount = await page.$$eval('.leaflet-marker-icon, .leaflet-interactive', els => els.length);
assert(afterCount > 0, `Should have markers after resize, got ${afterCount}`);
// Restore
await page.setViewportSize({ width: 1280, height: 720 });
});
// Summary
const passed = results.filter(r => r.pass).length;
const failed = results.filter(r => !r.pass).length;