Arnike/hnh-map
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance map updates and component performance

Browse Source 
- Updated API documentation to clarify the initial data message structure for real-time tile updates.
- Modified MapView component to load configuration and user data in parallel, improving map loading speed.
- Implemented asynchronous loading for markers after the map is visible, enhancing user experience.
- Introduced batching for tile updates to optimize rendering performance during map updates.
- Refactored character and marker creation functions to utilize dynamic Leaflet imports, improving modularity.
This commit is contained in:
Nikolay Tatarinov
2026-03-01 17:30:48 +03:00
parent 7bdaa6bfcc
commit 49af08c13f
9 changed files with 120 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
frontend-nuxt/lib/LeafletCustomTypes.ts
View File

@@ -5,13 +5,17 @@ export const HnHMaxZoom = 6
export const HnHMinZoom = 1
export const HnHDefaultZoom = 6
/** When scaleFactor exceeds this, render one label per tile instead of a full grid (avoids 100k+ DOM nodes at zoom 1). */
const GRID_COORD_SCALE_FACTOR_THRESHOLD = 8
export interface GridCoordLayerOptions extends L.GridLayerOptions {
visible?: boolean
}
/**
* Grid layer that draws one coordinate label per Leaflet tile in the top-left corner.
* coords.(x,y,z) are Leaflet tile indices and zoom; they map to game tiles as:
* scaleFactor = 2^(HnHMaxZoom - coords.z),
* topLeft = (coords.x * scaleFactor, coords.y * scaleFactor).
* This matches backend tile URL {mapid}/{z}/{x}_{y}.png (storageZ: z=6→0, Coord = tile index).
*/
export const GridCoordLayer = L.GridLayer.extend({
options: {
visible: true,
@@ -32,40 +36,16 @@ export const GridCoordLayer = L.GridLayer.extend({
const scaleFactor = Math.pow(2, HnHMaxZoom - coords.z)
const topLeft = { x: coords.x * scaleFactor, y: coords.y * scaleFactor }
const bottomRight = { x: topLeft.x + scaleFactor - 1, y: topLeft.y + scaleFactor - 1 }
const swPoint = { x: topLeft.x * TileSize, y: topLeft.y * TileSize }
const tileWidthPx = scaleFactor * TileSize
const tileHeightPx = scaleFactor * TileSize
if (scaleFactor > GRID_COORD_SCALE_FACTOR_THRESHOLD) {
// Low zoom: one label per tile to avoid hundreds of thousands of DOM nodes (Reset view freeze fix)
const textElement = document.createElement('div')
textElement.classList.add('map-tile-text')
textElement.textContent = `(${topLeft.x}, ${topLeft.y})`
textElement.style.position = 'absolute'
textElement.style.left = '2px'
textElement.style.top = '2px'
textElement.style.fontSize = Math.max(8, 12 - Math.log2(scaleFactor) * 2) + 'px'
element.appendChild(textElement)
return element
}
for (let gx = topLeft.x; gx <= bottomRight.x; gx++) {
for (let gy = topLeft.y; gy <= bottomRight.y; gy++) {
const leftPx = tileWidthPx > 0 ? ((gx * TileSize - swPoint.x) / tileWidthPx) * TileSize : 0
const topPx = tileHeightPx > 0 ? ((gy * TileSize - swPoint.y) / tileHeightPx) * TileSize : 0
const textElement = document.createElement('div')
textElement.classList.add('map-tile-text')
textElement.textContent = `(${gx}, ${gy})`
textElement.style.position = 'absolute'
textElement.style.left = leftPx + 2 + 'px'
textElement.style.top = topPx + 2 + 'px'
if (scaleFactor > 1) {
textElement.style.fontSize = Math.max(8, 12 - Math.log2(scaleFactor) * 2) + 'px'
}
element.appendChild(textElement)
}
}
// One label per Leaflet tile at top-left (2px, 2px); same (x,y) as backend tile for this coords.
const textElement = document.createElement('div')
textElement.classList.add('map-tile-text')
textElement.textContent = `(${topLeft.x}, ${topLeft.y})`
textElement.style.position = 'absolute'
textElement.style.left = '2px'
textElement.style.top = '2px'
textElement.style.fontSize = Math.max(8, 12 - Math.log2(scaleFactor) * 2) + 'px'
element.appendChild(textElement)
return element
},
}) as unknown as new (options?: GridCoordLayerOptions) => L.GridLayer