mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2026-02-04 17:41:23 +01:00
1ba36763ba
Updated the README to reflect the implementation details of the grid auto-numbering feature, including technical notes, usage instructions, and performance considerations.
40 lines
2.2 KiB
Markdown
40 lines
2.2 KiB
Markdown
# Grid Auto-Numbering Implementation Details
|
|
|
|
**Technical Note:**
|
|
As part of my DevOps-focused workflow, I designed the logic and coordinate system for this feature and used Antigravity AI to assist with the specific JavaScript/D3.js implementation.
|
|
|
|
---
|
|
|
|
## Logic Overview
|
|
The grid numbering system is integrated into the SVG rendering pipeline. It iterates through the existing grid cell data generated by the map engine and overlays a text element for each cell.
|
|
|
|
### Coordinate System
|
|
The system uses a top-down, left-to-right indexing method:
|
|
* **Starting Point:** The top-leftmost cell is assigned `0001`.
|
|
* **Flow:** Numbers increment horizontally across the row before moving to the next line.
|
|
* **Formatting:** Numbers are padded with leading zeros (e.g., `0001`, `0010`, `0100`) to maintain a consistent 4-digit coordinate string, common in tabletop hex-crawl systems.
|
|
|
|
### Grid Support
|
|
The logic dynamically calculates the centroid of each cell to ensure proper label placement regardless of the grid geometry:
|
|
* **Pointy Hex:** Centers text within the hexagonal bounds.
|
|
* **Square:** Standard center-point alignment.
|
|
* **Truncated Square:** Adjusts for the irregular geometry to prevent label clipping.
|
|
|
|
## Integration Points
|
|
|
|
### Style Panel
|
|
Added a new sub-section under the **Grid** layer in the Style panel:
|
|
* **Toggle:** A checkbox to enable/disable the `gridLabels` group in the SVG.
|
|
* **Font Size:** A slider controlling the `font-size` attribute of the labels.
|
|
* **Color Picker:** A standard hex color input tied to the text `fill` attribute.
|
|
|
|
### SVG Layering
|
|
A new `<g>` element with the ID `#gridLabels` is appended to the main map SVG. It sits directly above the grid lines layer to ensure visibility while remaining below the "Labels" or "Markers" layers.
|
|
|
|
## Files Modified
|
|
* `index.html`: Added the toggle and styling controls to the UI.
|
|
* `modules/ui/grid-menu.js`: Logic for handling UI interactions and state.
|
|
* `modules/render-grid.js`: Core logic for calculating centroids and appending text elements to the SVG.
|
|
|
|
## Performance Considerations
|
|
For massive maps with thousands of cells, the numbering system is optimized to only render when the Grid layer is active. This prevents unnecessary DOM overhead during standard map navigation.
|