Add Lakes as a movable, toggleable layer#1383
Merged
Conversation
✅ Deploy Preview for afmg ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Agent-Logs-Url: https://github.com/Azgaar/Fantasy-Map-Generator/sessions/ee056fa6-a52a-4abf-98d8-ff91ec027763 Co-authored-by: Azgaar <26469650+Azgaar@users.noreply.github.com>
Copilot
AI
changed the title
[WIP] Allow custom lake colors in render ocean height mode
Add Lakes as a movable, toggleable layer
Apr 22, 2026
Contributor
There was a problem hiding this comment.
Pull request overview
Adds Lakes as a first-class, movable/toggleable map layer so users can reorder it above the heightmap and keep custom-colored lakes visible when ocean-height rendering is enabled.
Changes:
- Adds a Lakes entry to the Layers panel sortable list (with shortcut Q) and wires it to a new
toggleLakeshandler. - Implements
toggleLakes()(show/hide + Ctrl+click style edit) and connectstoggleLakesto the SVG#lakesgroup for drag-reordering. - Restores the Lakes toggle state on map load and binds KeyQ to toggle lakes.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| src/index.html | Adds the Lakes list item to #mapLayers so it can be toggled and reordered by the user. |
| public/modules/ui/layers.js | Adds toggleLakes, maps it to #lakes for sortable reordering, and updates default presets to include lakes. |
| public/modules/ui/hotkeys.js | Binds KeyQ to toggleLakes(). |
| public/modules/io/load.js | Restores the Lakes toggle button state on load based on #lakes visibility. |
Azgaar
requested changes
Apr 22, 2026
Owner
Azgaar
left a comment
Azgaar
left a comment
There was a problem hiding this comment.
By default, lakes should be ordered just after (above) the Heightmap layer.
Agent-Logs-Url: https://github.com/Azgaar/Fantasy-Map-Generator/sessions/000c5f7d-f7b5-44cd-9924-84f1a8877e63 Co-authored-by: Azgaar <26469650+Azgaar@users.noreply.github.com>
Contributor
Author
Done in commit Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
Azgaar
requested changes
Apr 22, 2026
Owner
Azgaar
left a comment
Azgaar
left a comment
There was a problem hiding this comment.
remove landmass from the landmass preset.
Owner
|
Lakes |
Azgaar
requested changes
Apr 22, 2026
Owner
Azgaar
left a comment
Azgaar
left a comment
There was a problem hiding this comment.
Lakes g group is still rendered before the terrs. It should be rendered after it by default.
Agent-Logs-Url: https://github.com/Azgaar/Fantasy-Map-Generator/sessions/d15d8549-f004-4431-9be6-a5a9069e7fac Co-authored-by: Azgaar <26469650+Azgaar@users.noreply.github.com>
Contributor
Author
Done in commit |
… default Agent-Logs-Url: https://github.com/Azgaar/Fantasy-Map-Generator/sessions/cd73e8fd-9235-4ea0-b026-0490582c209f Co-authored-by: Azgaar <26469650+Azgaar@users.noreply.github.com>
Contributor
Author
Fixed in commit
Fixed in commit |
Azgaar
requested changes
Apr 22, 2026
Owner
Azgaar
left a comment
Azgaar
left a comment
There was a problem hiding this comment.
The problem is with featurePaths rendering. Lakes may have inner island that in the current code will be hidden by lakes. To fix mask rendering need to add mask to lake group and render lake paths in water mask as white elements.
src/renderers/draw-features.ts
if (feature.type === "lake") {
html.landMask.push(
<use href="#feature_${feature.i}" data-f="${feature.i}" fill="black"></use>,
);
html.waterMask.push(
<use href="#feature_${feature.i}" data-f="${feature.i}" fill="white"></use>,
);
Agent-Logs-Url: https://github.com/Azgaar/Fantasy-Map-Generator/sessions/d8572ce6-aa57-4ce6-b9bc-7b83354a19de Co-authored-by: Azgaar <26469650+Azgaar@users.noreply.github.com>
Contributor
Author
Done in commit
|
Azgaar
requested changes
Apr 22, 2026
| let landmass = viewbox.append("g").attr("id", "landmass"); | ||
| let texture = viewbox.append("g").attr("id", "texture"); | ||
| let terrs = viewbox.append("g").attr("id", "terrs"); | ||
| let lakes = viewbox.append("g").attr("id", "lakes").attr("mask", "url(#water)"); |
Owner
There was a problem hiding this comment.
Only add mask at level, see index.css
Contributor
Author
There was a problem hiding this comment.
Done in commit 7a4cf60. Moved the mask to CSS level — added #lakes { mask: url(#water); } in public/index.css and removed the .attr("mask", ...) call from main.js and the auto-update migration.
Agent-Logs-Url: https://github.com/Azgaar/Fantasy-Map-Generator/sessions/4a790923-83ed-4063-8813-c0702329794e Co-authored-by: Azgaar <26469650+Azgaar@users.noreply.github.com>
Azgaar
approved these changes
Apr 22, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Custom-colored lakes (lava, abyss, etc.) were invisible when Ocean Height rendering was enabled — the heightmap (
#terrs) sits above#lakesin SVG z-order and paints over them with ocean height colors. The fix is to make#lakesa proper movable layer so users can drag it relative to the heightmap, render it above the heightmap by default, and correctly mask inner lake islands so they are never hidden by the lake fill.Changes
public/main.js— Moved#lakesgroup declaration to after#terrsso lakes render above the heightmap by defaultpublic/index.css— Added#lakes { mask: url(#water); }so inner lake islands are not hidden by the lake fill (consistent with how#landmassusesmask: url(#land))src/renderers/draw-features.ts— Lake features now also push a white<use>intohtml.waterMaskso the lake area is explicitly white in the water mask while lake-island features remain black, correctly cutting holes for inner islandssrc/index.html— NewLakesentry in#mapLayerssortable list, positioned just after the Heightmap entry; shortcutQpublic/modules/ui/layers.jstoggleLakes()— fade show/hide of#lakes; Ctrl+click opens style editorgetLayer("toggleLakes")— wires the list item to#lakesfor drag-reorder support"toggleLakes"(backward-compat: lakes were always visible before);landmasspreset intentionally excludes lakespublic/modules/io/load.js— Restores toggle button state on map load viaisVisible(lakes)checkpublic/modules/ui/hotkeys.js—KeyQbound totoggleLakes()tests/e2e/lakes-layer.spec.ts— New focused e2e tests covering: button toggle, KeyQ toggle, panel position (just after Heightmap), and SVG DOM reorder when Lakes is dragged above HeightmapBy default,
#lakesnow renders on top of the heightmap with inner islands properly visible. To make lakes render behind the heightmap, drag the Lakes entry above Heightmap in the layers panel.