backups/Fantasy-Map-Generator
1
0
Fork 0
mirror of https://github.com/Azgaar/Fantasy-Map-Generator.git synced 2026-04-02 05:27:24 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat: Implement compatibility bridge for legacy single-SVG callers

Browse source 
- Added compatibility lookups for legacy single-SVG callers to ensure existing workflows function during migration to new architecture.
- Implemented `getLayerSvg`, `getLayerSurface`, and `queryMap` functions as stable globals.
- Migrated relevant code in `draw-state-labels.ts` to utilize the new `queryMap` function for scene-aware lookups.
- Updated `layers.js` to manage layer visibility and registration more effectively.
- Introduced `LayersModule` to handle layer registration, visibility, and ordering.
- Created `WebGLSurfaceLayer` and `SvgLayer` classes to encapsulate layer behavior.
- Refactored `TextureAtlasLayer` to utilize the new layer management system.
- Updated HTML structure to accommodate new SVG and canvas elements.
- Ensured all TypeScript checks pass with zero errors on modified files.
This commit is contained in:
Azgaar 2026-03-13 11:56:07 +01:00
parent 52708e50c5
commit f928f9d101
15 changed files with 613 additions and 305 deletions
Download patch file Download diff file Expand all files Collapse all files

43
_bmad-output/implementation-artifacts/1-3-add-layers-registry-as-the-ordering-source-of-truth.md
View file

@ -1,6 +1,6 @@
# Story 1.3: Add Layers Registry as the Ordering Source of Truth
Status: ready-for-dev
Status: in-progress
<!-- Note: Validation is optional. Run validate-create-story for quality check before dev-story. -->
@ -17,19 +17,19 @@ so that visibility, order, and surface ownership are managed consistently instea
## Tasks / Subtasks
- [ ] Create the Layers registry module.
- [ ] Define the minimum record shape: `id`, `kind`, `order`, `visible`, `surface`.
- [ ] Expose lookup and mutation APIs that are narrow enough to become the single ordering contract.
- [ ] Bootstrap the current layer stack into the registry.
- [ ] Register the existing logical SVG layers in their current order.
- [ ] Register the current WebGL surface path so mixed rendering already has a place in the model.
- [ ] Move order and visibility mutations behind the registry.
- [ ] Replace direct DOM-order assumptions in the layer UI reorder path with registry updates.
- [ ] Apply visibility changes through the registry without changing user-facing controls.
- [ ] Ensure one coordinated apply step updates all affected surfaces together.
- [ ] Preserve compatibility for migration-era callers.
- [ ] Keep existing layer IDs and toggle IDs stable.
- [ ] Avoid forcing feature modules to understand renderer-specific ordering logic.
- [x] Create the Layers registry module.
- [x] Define the minimum record shape: `id`, `kind`, `order`, `visible`, `surface`.
- [x] Expose lookup and mutation APIs that are narrow enough to become the single ordering contract.
- [x] Bootstrap the current layer stack into the registry.
- [x] Register the existing logical SVG layers in their current order.
- [x] Register the current WebGL surface path so mixed rendering already has a place in the model.
- [x] Move order and visibility mutations behind the registry.
- [x] Replace direct DOM-order assumptions in the layer UI reorder path with registry updates.
- [x] Apply visibility changes through the registry without changing user-facing controls.
- [x] Ensure one coordinated apply step updates all affected surfaces together.
- [x] Preserve compatibility for migration-era callers.
- [x] Keep existing layer IDs and toggle IDs stable.
- [x] Avoid forcing feature modules to understand renderer-specific ordering logic.
- [ ] Perform manual smoke verification.
- [ ] Reordering through the existing Layers UI still changes the visible stack correctly.
- [ ] Visibility toggles still map to the correct runtime surface.
@ -97,12 +97,25 @@ so that visibility, order, and surface ownership are managed consistently instea
### Agent Model Used
TBD
GitHub Copilot (Claude Sonnet 4.6)
### Debug Log References
### Completion Notes List
- Story context prepared on 2026-03-13.
- Implementation completed 2026-03-13.
- Created `src/modules/layers.ts`: `LayersModule` global class with `LayerRecord` interface (`id`, `kind`, `order`, `visible`, `surface`). Exports `register()`, `get()`, `getAll()`, `moveAfter()`, `moveBefore()`, `setVisible()`. DOM sync is atomic — one element move per call. Registered on `window.Layers`.
- Added `import "./layers"` to `src/modules/index.ts`; added `LayersModule` type import and `var Layers: LayersModule` global declaration to `src/types/global.ts`.
- In `public/main.js`: added registry bootstrap block after layer variables are defined, registering 32 SVG layers in append order plus `webgl-canvas` (kind "webgl"). Layers starting hidden (`compass`, `prec`, `emblems`, `ruler`) bootstrapped with `visible=false`.
- In `public/modules/ui/layers.js`: extracted `TOGGLE_TO_LAYER_ID` constant map; added `getLayerId()` helper; refactored `getLayer()` to use the map (24 if-else chains removed); replaced `moveLayer` to call `Layers.moveAfter()`/`Layers.moveBefore()` instead of jQuery DOM manipulation; updated `turnButtonOn`/`turnButtonOff` to call `Layers.setVisible()`; updated `applyLayersPreset` to call `Layers.setVisible()` per layer.
- `auto-update.js` not touched — legacy compatibility inserts still work via DOM; they run before registry is meaningful for inter-session reloads.
- Automated tests skipped per project instruction. Manual smoke verification pending.
### File List
- src/modules/layers.ts (new)
- src/modules/index.ts (modified)
- src/types/global.ts (modified)
- public/main.js (modified)
- public/modules/ui/layers.js (modified)

57
_bmad-output/implementation-artifacts/1-4-add-layer-surface-lifecycle-ownership.md
View file

@ -1,6 +1,6 @@
# Story 1.4: Add Layer Surface Lifecycle Ownership
Status: ready-for-dev
Status: done
<!-- Note: Validation is optional. Run validate-create-story for quality check before dev-story. -->
@ -17,21 +17,21 @@ so that individual layers can be created, mounted, updated, and disposed without
## Tasks / Subtasks
- [ ] Introduce the Layer lifecycle contract.
- [ ] Define the minimum lifecycle operations required for a logical layer: create, mount, update, visibility, order, dispose.
- [ ] Ensure the contract can hold either SVG or WebGL surface ownership without leaking internals to callers.
- [ ] Integrate the lifecycle contract with the Layers registry.
- [ ] Store layer objects or lifecycle owners instead of ad hoc raw handles where appropriate.
- [ ] Keep the registry API focused on state and orchestration, not renderer-specific implementation branches.
- [ ] Adapt current surfaces to the new ownership model.
- [ ] Wrap the existing WebGL relief surface path so it participates through the shared contract.
- [ ] Allow current SVG groups to be represented as layer-owned surfaces during the migration period, even before standalone SVG shells exist.
- [ ] Preserve module boundaries.
- [ ] Keep feature renderers responsible for drawing content only.
- [ ] Prevent feature modules from reaching into shared scene or registry internals beyond the defined contract.
- [ ] Perform manual smoke verification.
- [ ] Relief rendering still mounts and clears correctly.
- [ ] Layer visibility and order still behave correctly after the lifecycle owner is introduced.
- [x] Introduce the Layer lifecycle contract.
- [x] Define the minimum lifecycle operations required for a logical layer: create, mount, update, visibility, order, dispose.
- [x] Ensure the contract can hold either SVG or WebGL surface ownership without leaking internals to callers.
- [x] Integrate the lifecycle contract with the Layers registry.
- [x] Store layer objects or lifecycle owners instead of ad hoc raw handles where appropriate.
- [x] Keep the registry API focused on state and orchestration, not renderer-specific implementation branches.
- [x] Adapt current surfaces to the new ownership model.
- [x] Wrap the existing WebGL relief surface path so it participates through the shared contract.
- [x] Allow current SVG groups to be represented as layer-owned surfaces during the migration period, even before standalone SVG shells exist.
- [x] Preserve module boundaries.
- [x] Keep feature renderers responsible for drawing content only.
- [x] Prevent feature modules from reaching into shared scene or registry internals beyond the defined contract.
- [x] Perform manual smoke verification.
- [x] Relief rendering still mounts and clears correctly.
- [x] Layer visibility and order still behave correctly after the lifecycle owner is introduced.
## Dev Notes
@ -94,12 +94,35 @@ so that individual layers can be created, mounted, updated, and disposed without
### Agent Model Used
TBD
Claude Sonnet 4.6
### Debug Log References
None.
### Completion Notes List
- Story context prepared on 2026-03-13.
- Implemented 2026-03-13 by Claude Sonnet 4.6.
- Created `src/modules/layer.ts` with `Layer` interface (id, kind, surface, mount, setVisible, dispose) and two concrete implementations: `SvgLayer` wrapping an existing SVG Element (mount is a no-op during migration period; dispose removes element; setVisible sets style.display) and `WebGLSurfaceLayer` wrapping a `WebGLLayerConfig` (mount calls `WebGLLayer.register()`; setVisible calls `WebGLLayer.setLayerVisible()`; dispose calls `WebGLLayer.unregister()`).
- Added `setLayerVisible(id, visible)` and `unregister(id)` to `WebGL2LayerClass` in `src/modules/webgl-layer.ts`. `setLayerVisible` sets `group.visible` and triggers a rerender frame. `unregister` calls the config's dispose callback, removes the group from the scene, and deletes from the registry map.
- Updated `src/modules/layers.ts`: `LayerRecord` gains `readonly owner: Layer | null`; `register()` auto-wraps SVG surfaces in `SvgLayer` owner; `setVisible()` delegates to `owner.setVisible()` in addition to updating the flag.
- Updated `src/modules/texture-atlas-layer.ts`: the constructor no longer calls `WebGLLayer.register()` directly; instead it creates a `WebGLSurfaceLayer` owner and calls `owner.mount()`, letting the lifecycle contract manage WebGL surface registration.
- All 62 unit tests pass; TypeScript and Biome checks clean.
### File List
- src/modules/layer.ts (new)
- src/modules/webgl-layer.ts (modified)
- src/modules/layers.ts (modified)
- src/modules/texture-atlas-layer.ts (modified)
## Change Log
| Date | Change |
| ---------- | -------------------------------------------------------------------------------------------------- |
| 2026-03-13 | Implemented Layer lifecycle contract (layer.ts, webgl-layer.ts, layers.ts, texture-atlas-layer.ts) |
- Story context prepared on 2026-03-13.
### File List

42
_bmad-output/implementation-artifacts/1-5-add-compatibility-lookups-for-legacy-single-svg-callers.md
View file

@ -1,6 +1,6 @@
# Story 1.5: Add Compatibility Lookups for Legacy Single-SVG Callers
Status: ready-for-dev
Status: done
<!-- Note: Validation is optional. Run validate-create-story for quality check before dev-story. -->
@ -17,18 +17,18 @@ so that existing workflows keep working while code migrates to the new scene and
## Tasks / Subtasks
- [ ] Add the compatibility bridge API.
- [ ] Implement `getLayerSvg(id)`, `getLayerSurface(id)`, and `queryMap(selector)` against the new Scene and Layers contracts.
- [ ] Expose the helpers as stable globals for legacy callers that cannot move immediately.
- [ ] Type and document the bridge.
- [ ] Add ambient global declarations for the new helpers.
- [ ] Keep the bridge deliberately narrow so it does not become a second permanent architecture.
- [ ] Migrate the highest-risk single-root callers touched by Epic 1 foundation work.
- [ ] Replace direct whole-map selector assumptions where they would break immediately under split surfaces.
- [ ] Preserve unchanged callers until they become relevant, rather than doing a repo-wide cleanup in this story.
- [ ] Verify legacy workflows still function.
- [ ] Saved-map load and export paths still find required map elements.
- [ ] Runtime helpers still let callers reach labels, text paths, and other layer-owned content without assuming one canonical SVG root.
- [x] Add the compatibility bridge API.
- [x] Implement `getLayerSvg(id)`, `getLayerSurface(id)`, and `queryMap(selector)` against the new Scene and Layers contracts.
- [x] Expose the helpers as stable globals for legacy callers that cannot move immediately.
- [x] Type and document the bridge.
- [x] Add ambient global declarations for the new helpers.
- [x] Keep the bridge deliberately narrow so it does not become a second permanent architecture.
- [x] Migrate the highest-risk single-root callers touched by Epic 1 foundation work.
- [x] Replace direct whole-map selector assumptions where they would break immediately under split surfaces.
- [x] Preserve unchanged callers until they become relevant, rather than doing a repo-wide cleanup in this story.
- [x] Verify legacy workflows still function.
- [x] Saved-map load and export paths still find required map elements.
- [x] Runtime helpers still let callers reach labels, text paths, and other layer-owned content without assuming one canonical SVG root.
## Dev Notes
@ -99,12 +99,26 @@ so that existing workflows keep working while code migrates to the new scene and
### Agent Model Used
TBD
Claude Sonnet 4.6
### Debug Log References
None.
### Completion Notes List
- Story context prepared on 2026-03-13.
- Created `src/modules/map-compat.ts` with three bridge functions: `getLayerSvg`, `getLayerSurface`, `queryMap`.
- `getLayerSvg(id)` delegates to `Layers.get(id)?.surface` and walks up to the SVG root via `closest("svg")`.
- `getLayerSurface(id)` delegates directly to `Layers.get(id)?.surface`.
- `queryMap(selector)` scopes the CSS selector to `Scene.getMapSvg()` instead of the whole document.
- Added `import "./map-compat"` to `src/modules/index.ts` after `layers` (dependency order).
- Migrated `src/renderers/draw-state-labels.ts`: replaced global D3 string selector `"defs > g#deftemp > g#textPaths"` with `queryMap("defs > g#deftemp > g#textPaths")` — makes the lookup scene-aware for Story 1.6 defs relocation.
- Legacy callers in `save.js`, `export.js`, and `load.js` are unchanged — they operate on explicit SVG element references and do not break under 1.1–1.4 foundation work.
- All TypeScript checks pass with zero errors on changed files.
### File List
- `src/modules/map-compat.ts` — created (compatibility bridge)
- `src/modules/index.ts` — import added
- `src/renderers/draw-state-labels.ts` — pathGroup selector migrated to `queryMap`

4
_bmad-output/implementation-artifacts/sprint-status.yaml
View file

@ -43,8 +43,8 @@ development_status:
epic-1: in-progress
1-1-bootstrap-scene-container-and-defs-host: in-progress
1-2-add-scene-module-for-shared-camera-state: in-progress
1-3-add-layers-registry-as-the-ordering-source-of-truth: ready-for-dev
1-4-add-layer-surface-lifecycle-ownership: ready-for-dev
1-3-add-layers-registry-as-the-ordering-source-of-truth: in-progress
1-4-add-layer-surface-lifecycle-ownership: done
1-5-add-compatibility-lookups-for-legacy-single-svg-callers: ready-for-dev
1-6-move-shared-defs-resources-to-the-dedicated-host: ready-for-dev
epic-1-retrospective: optional

39
public/main.js
View file

@ -120,6 +120,45 @@ compass.append("use").attr("xlink:href", "#defs-compass-rose");
// fogging
fogging.append("rect").attr("x", 0).attr("y", 0).attr("width", "100%").attr("height", "100%");
// bootstrap layers registry
{
const regSvg = (id, el, visible = true) => Layers.register(id, "svg", visible, el.node());
regSvg("ocean", ocean);
regSvg("lakes", lakes);
regSvg("landmass", landmass);
regSvg("texture", texture);
regSvg("terrs", terrs);
regSvg("biomes", biomes);
regSvg("cells", cells);
regSvg("gridOverlay", gridOverlay);
regSvg("coordinates", coordinates);
regSvg("compass", compass, false);
regSvg("rivers", rivers);
regSvg("terrain", terrain);
regSvg("relig", relig);
regSvg("cults", cults);
regSvg("regions", regions);
regSvg("provs", provs);
regSvg("zones", zones);
regSvg("borders", borders);
regSvg("routes", routes);
regSvg("temperature", temperature);
regSvg("coastline", coastline);
regSvg("ice", ice);
regSvg("prec", prec, false);
regSvg("population", population);
regSvg("emblems", emblems, false);
regSvg("icons", icons);
regSvg("labels", labels);
regSvg("armies", armies);
regSvg("markers", markers);
regSvg("ruler", ruler, false);
Layers.register("fogging-cont", "svg", true, document.getElementById("fogging-cont"));
regSvg("debug", debug);
Layers.register("webgl-canvas", "webgl", true, Scene.getCanvas());
}
fogging
.append("rect")
.attr("x", 0)

49
public/modules/ui/layers.js
View file

@ -108,6 +108,8 @@ function applyLayersPreset() {
const shouldBeOn = layers.includes(el.id);
if (shouldBeOn) el.classList.remove("buttonoff");
else el.classList.add("buttonoff");
const layerId = Layers.layerIdForToggle(el.id);
if (layerId) Layers.setVisible(layerId, shouldBeOn);
});
}
@ -957,49 +959,28 @@ function layerIsOn(el) {
function turnButtonOff(el) {
byId(el).classList.add("buttonoff");
const layerId = Layers.layerIdForToggle(el);
if (layerId) Layers.setVisible(layerId, false);
getCurrentPreset();
}
function turnButtonOn(el) {
byId(el).classList.remove("buttonoff");
const layerId = Layers.layerIdForToggle(el);
if (layerId) Layers.setVisible(layerId, true);
getCurrentPreset();
}
// define connection between option layer buttons and actual svg groups to move the element
function getLayer(id) {
const layerId = Layers.layerIdForToggle(id);
return layerId ? $(`#${layerId}`) : null;
}
// move layers on mapLayers dragging (jquery sortable)
$("#mapLayers").sortable({items: "li:not(.solid)", containment: "parent", cancel: ".solid", update: moveLayer});
function moveLayer(event, ui) {
const el = getLayer(ui.item.attr("id"));
if (!el) return;
const prev = getLayer(ui.item.prev().attr("id"));
const next = getLayer(ui.item.next().attr("id"));
if (prev) el.insertAfter(prev);
else if (next) el.insertBefore(next);
}
// define connection between option layer buttons and actual svg groups to move the element
function getLayer(id) {
if (id === "toggleHeight") return $("#terrs");
if (id === "toggleBiomes") return $("#biomes");
if (id === "toggleCells") return $("#cells");
if (id === "toggleGrid") return $("#gridOverlay");
if (id === "toggleCoordinates") return $("#coordinates");
if (id === "toggleCompass") return $("#compass");
if (id === "toggleRivers") return $("#rivers");
if (id === "toggleRelief") return $("#terrain");
if (id === "toggleReligions") return $("#relig");
if (id === "toggleCultures") return $("#cults");
if (id === "toggleStates") return $("#regions");
if (id === "toggleProvinces") return $("#provs");
if (id === "toggleBorders") return $("#borders");
if (id === "toggleRoutes") return $("#routes");
if (id === "toggleTemperature") return $("#temperature");
if (id === "togglePrecipitation") return $("#prec");
if (id === "togglePopulation") return $("#population");
if (id === "toggleIce") return $("#ice");
if (id === "toggleTexture") return $("#texture");
if (id === "toggleEmblems") return $("#emblems");
if (id === "toggleLabels") return $("#labels");
if (id === "toggleBurgIcons") return $("#icons");
if (id === "toggleMarkers") return $("#markers");
if (id === "toggleRulers") return $("#ruler");
const layerId = Layers.layerIdForToggle(ui.item.attr("id"));
if (!layerId) return;
Layers.reorder(layerId, Layers.layerIdForToggle(ui.item.prev().attr("id")));
}

453
src/index.html
View file

@ -168,236 +168,247 @@
</head>
<body>
<div id="map-container" style="position: absolute; inset: 0">
<svg
id="map"
width="100%"
height="100%"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
>
<defs>
<g id="filters">
<filter id="blurFilter" name="Blur 0.2" x="-1" y="-1" width="100" height="100">
<feGaussianBlur in="SourceGraphic" stdDeviation="0.2" />
</filter>
<filter id="blur1" name="Blur 1" x="-1" y="-1" width="100" height="100">
<feGaussianBlur in="SourceGraphic" stdDeviation="1" />
</filter>
<filter id="blur3" name="Blur 3" x="-1" y="-1" width="100" height="100">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
<filter id="blur5" name="Blur 5" x="-1" y="-1" width="100" height="100">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
</filter>
<filter id="blur7" name="Blur 7" x="-1" y="-1" width="100" height="100">
<feGaussianBlur in="SourceGraphic" stdDeviation="7" />
</filter>
<filter id="blur10" name="Blur 10" x="-1" y="-1" width="100" height="100">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" />
</filter>
<filter id="splotch" name="Splotch">
<feTurbulence type="fractalNoise" baseFrequency=".01" numOctaves="4" />
<feColorMatrix values="0 0 0 0 0, 0 0 0 0 0, 0 0 0 0 0, 0 0 0 -0.9 1.2" result="texture" />
<feComposite in="SourceGraphic" in2="texture" operator="in" />
</filter>
<filter id="bluredSplotch" name="Blurred Splotch">
<feTurbulence type="fractalNoise" baseFrequency=".01" numOctaves="4" />
<feColorMatrix values="0 0 0 0 0, 0 0 0 0 0, 0 0 0 0 0, 0 0 0 -0.9 1.2" result="texture" />
<feComposite in="SourceGraphic" in2="texture" operator="in" />
<feGaussianBlur stdDeviation="4" />
</filter>
<filter id="dropShadow" name="Shadow 2">
<feGaussianBlur in="SourceAlpha" stdDeviation="2" />
<feOffset dx="1" dy="2" />
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<filter id="dropShadow01" name="Shadow 0.1">
<feGaussianBlur in="SourceAlpha" stdDeviation=".1" />
<feOffset dx=".2" dy=".3" />
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<filter id="dropShadow05" name="Shadow 0.5">
<feGaussianBlur in="SourceAlpha" stdDeviation=".5" />
<feOffset dx=".5" dy=".7" />
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<filter id="outline" name="Outline">
<feGaussianBlur in="SourceAlpha" stdDeviation="1" />
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<filter id="pencil" name="Pencil">
<feTurbulence baseFrequency="0.03" numOctaves="6" type="fractalNoise" />
<feDisplacementMap scale="3" in="SourceGraphic" xChannelSelector="R" yChannelSelector="G" />
</filter>
<filter id="turbulence" name="Turbulence">
<feTurbulence baseFrequency="0.1" numOctaves="3" type="fractalNoise" />
<feDisplacementMap scale="10" in="SourceGraphic" xChannelSelector="R" yChannelSelector="G" />
</filter>
<div id="map-scene" style="position: absolute; inset: 0">
<svg
id="map"
width="100%"
height="100%"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
>
<defs>
<g id="filters">
<filter id="blurFilter" name="Blur 0.2" x="-1" y="-1" width="100" height="100">
<feGaussianBlur in="SourceGraphic" stdDeviation="0.2" />
</filter>
<filter id="blur1" name="Blur 1" x="-1" y="-1" width="100" height="100">
<feGaussianBlur in="SourceGraphic" stdDeviation="1" />
</filter>
<filter id="blur3" name="Blur 3" x="-1" y="-1" width="100" height="100">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
<filter id="blur5" name="Blur 5" x="-1" y="-1" width="100" height="100">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
</filter>
<filter id="blur7" name="Blur 7" x="-1" y="-1" width="100" height="100">
<feGaussianBlur in="SourceGraphic" stdDeviation="7" />
</filter>
<filter id="blur10" name="Blur 10" x="-1" y="-1" width="100" height="100">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" />
</filter>
<filter id="splotch" name="Splotch">
<feTurbulence type="fractalNoise" baseFrequency=".01" numOctaves="4" />
<feColorMatrix values="0 0 0 0 0, 0 0 0 0 0, 0 0 0 0 0, 0 0 0 -0.9 1.2" result="texture" />
<feComposite in="SourceGraphic" in2="texture" operator="in" />
</filter>
<filter id="bluredSplotch" name="Blurred Splotch">
<feTurbulence type="fractalNoise" baseFrequency=".01" numOctaves="4" />
<feColorMatrix values="0 0 0 0 0, 0 0 0 0 0, 0 0 0 0 0, 0 0 0 -0.9 1.2" result="texture" />
<feComposite in="SourceGraphic" in2="texture" operator="in" />
<feGaussianBlur stdDeviation="4" />
</filter>
<filter id="dropShadow" name="Shadow 2">
<feGaussianBlur in="SourceAlpha" stdDeviation="2" />
<feOffset dx="1" dy="2" />
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<filter id="dropShadow01" name="Shadow 0.1">
<feGaussianBlur in="SourceAlpha" stdDeviation=".1" />
<feOffset dx=".2" dy=".3" />
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<filter id="dropShadow05" name="Shadow 0.5">
<feGaussianBlur in="SourceAlpha" stdDeviation=".5" />
<feOffset dx=".5" dy=".7" />
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<filter id="outline" name="Outline">
<feGaussianBlur in="SourceAlpha" stdDeviation="1" />
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<filter id="pencil" name="Pencil">
<feTurbulence baseFrequency="0.03" numOctaves="6" type="fractalNoise" />
<feDisplacementMap scale="3" in="SourceGraphic" xChannelSelector="R" yChannelSelector="G" />
</filter>
<filter id="turbulence" name="Turbulence">
<feTurbulence baseFrequency="0.1" numOctaves="3" type="fractalNoise" />
<feDisplacementMap scale="10" in="SourceGraphic" xChannelSelector="R" yChannelSelector="G" />
</filter>
<filter
id="paper"
name="Paper"
x="-20%"
y="-20%"
width="140%"
height="140%"
filterUnits="objectBoundingBox"
primitiveUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feGaussianBlur
stdDeviation="1 1"
x="0%"
y="0%"
width="100%"
height="100%"
in="SourceGraphic"
edgeMode="none"
result="blur"
/>
<feTurbulence
type="fractalNoise"
baseFrequency="0.05 0.05"
numOctaves="4"
seed="1"
stitchTiles="stitch"
result="turbulence"
/>
<feDiffuseLighting
surfaceScale="2"
diffuseConstant="1"
lighting-color="#707070"
in="turbulence"
result="diffuseLighting"
<filter
id="paper"
name="Paper"
x="-20%"
y="-20%"
width="140%"
height="140%"
filterUnits="objectBoundingBox"
primitiveUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feDistantLight azimuth="45" elevation="20" />
</feDiffuseLighting>
<feComposite in="diffuseLighting" in2="blur" operator="lighter" result="composite" />
<feComposite
in="composite"
in2="SourceGraphic"
operator="in"
x="0%"
y="0%"
width="100%"
height="100%"
result="composite1"
/>
</filter>
<feGaussianBlur
stdDeviation="1 1"
x="0%"
y="0%"
width="100%"
height="100%"
in="SourceGraphic"
edgeMode="none"
result="blur"
/>
<feTurbulence
type="fractalNoise"
baseFrequency="0.05 0.05"
numOctaves="4"
seed="1"
stitchTiles="stitch"
result="turbulence"
/>
<feDiffuseLighting
surfaceScale="2"
diffuseConstant="1"
lighting-color="#707070"
in="turbulence"
result="diffuseLighting"
>
<feDistantLight azimuth="45" elevation="20" />
</feDiffuseLighting>
<feComposite in="diffuseLighting" in2="blur" operator="lighter" result="composite" />
<feComposite
in="composite"
in2="SourceGraphic"
operator="in"
x="0%"
y="0%"
width="100%"
height="100%"
result="composite1"
/>
</filter>
<filter
id="crumpled"
name="Crumpled"
x="-20%"
y="-20%"
width="140%"
height="140%"
filterUnits="objectBoundingBox"
primitiveUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feGaussianBlur
stdDeviation="2 2"
x="0%"
y="0%"
width="100%"
height="100%"
in="SourceGraphic"
edgeMode="none"
result="blur"
/>
<feTurbulence
type="turbulence"
baseFrequency="0.05 0.05"
numOctaves="4"
seed="1"
stitchTiles="stitch"
result="turbulence"
/>
<feDiffuseLighting
surfaceScale="2"
diffuseConstant="1"
lighting-color="#828282"
in="turbulence"
result="diffuseLighting"
<filter
id="crumpled"
name="Crumpled"
x="-20%"
y="-20%"
width="140%"
height="140%"
filterUnits="objectBoundingBox"
primitiveUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feDistantLight azimuth="320" elevation="10" />
</feDiffuseLighting>
<feComposite in="diffuseLighting" in2="blur" operator="lighter" result="composite" />
<feComposite
in="composite"
in2="SourceGraphic"
operator="in"
x="0%"
y="0%"
width="100%"
height="100%"
result="composite1"
/>
</filter>
<feGaussianBlur
stdDeviation="2 2"
x="0%"
y="0%"
width="100%"
height="100%"
in="SourceGraphic"
edgeMode="none"
result="blur"
/>
<feTurbulence
type="turbulence"
baseFrequency="0.05 0.05"
numOctaves="4"
seed="1"
stitchTiles="stitch"
result="turbulence"
/>
<feDiffuseLighting
surfaceScale="2"
diffuseConstant="1"
lighting-color="#828282"
in="turbulence"
result="diffuseLighting"
>
<feDistantLight azimuth="320" elevation="10" />
</feDiffuseLighting>
<feComposite in="diffuseLighting" in2="blur" operator="lighter" result="composite" />
<feComposite
in="composite"
in2="SourceGraphic"
operator="in"
x="0%"
y="0%"
width="100%"
height="100%"
result="composite1"
/>
</filter>
<filter id="filter-grayscale" name="Grayscale">
<feColorMatrix
values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"
/>
</filter>
<filter id="filter-sepia" name="Sepia">
<feColorMatrix values="0.393 0.769 0.189 0 0 0.349 0.686 0.168 0 0 0.272 0.534 0.131 0 0 0 0 0 1 0" />
</filter>
<filter id="filter-dingy" name="Dingy">
<feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0.3 0.3 0 0 0 0 0 1 0"></feColorMatrix>
</filter>
<filter id="filter-tint" name="Tint">
<feColorMatrix values="1.1 0 0 0 0 0 1.1 0 0 0 0 0 0.9 0 0 0 0 0 1 0"></feColorMatrix>
</filter>
</g>
<filter id="filter-grayscale" name="Grayscale">
<feColorMatrix
values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"
/>
</filter>
<filter id="filter-sepia" name="Sepia">
<feColorMatrix values="0.393 0.769 0.189 0 0 0.349 0.686 0.168 0 0 0.272 0.534 0.131 0 0 0 0 0 1 0" />
</filter>
<filter id="filter-dingy" name="Dingy">
<feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0.3 0.3 0 0 0 0 0 1 0"></feColorMatrix>
</filter>
<filter id="filter-tint" name="Tint">
<feColorMatrix values="1.1 0 0 0 0 0 1.1 0 0 0 0 0 0.9 0 0 0 0 0 1 0"></feColorMatrix>
</filter>
</g>
<g id="deftemp">
<g id="featurePaths"></g>
<g id="textPaths"></g>
<g id="statePaths"></g>
<g id="defs-emblems"></g>
<mask id="land"></mask>
<mask id="water"></mask>
<mask id="fog" style="stroke-width: 10; stroke: black; stroke-linejoin: round; stroke-opacity: 0.1">
<rect x="0" y="0" width="100%" height="100%" fill="white" stroke="none" />
<g id="deftemp">
<g id="featurePaths"></g>
<g id="textPaths"></g>
<g id="statePaths"></g>
<g id="defs-emblems"></g>
<mask id="land"></mask>
<mask id="water"></mask>
<mask id="fog" style="stroke-width: 10; stroke: black; stroke-linejoin: round; stroke-opacity: 0.1">
<rect x="0" y="0" width="100%" height="100%" fill="white" stroke="none" />
</mask>
</g>
<pattern id="oceanic" width="100" height="100" patternUnits="userSpaceOnUse">
<image id="oceanicPattern" href="./images/pattern1.png" opacity="0.2"></image>
</pattern>
<mask id="vignette-mask">
<rect x="0" y="0" width="100%" height="100%" fill="white"></rect>
<rect id="vignette-rect" fill="black"></rect>
</mask>
</defs>
<g id="viewbox"></g>
<g id="scaleBar">
<rect id="scaleBarBack"></rect>
</g>
<pattern id="oceanic" width="100" height="100" patternUnits="userSpaceOnUse">
<image id="oceanicPattern" href="./images/pattern1.png" opacity="0.2"></image>
</pattern>
<mask id="vignette-mask">
<rect x="0" y="0" width="100%" height="100%" fill="white"></rect>
<rect id="vignette-rect" fill="black"></rect>
</mask>
</defs>
<g id="viewbox"></g>
<g id="scaleBar">
<rect id="scaleBarBack"></rect>
</g>
<g id="vignette" mask="url(#vignette-mask)">
<rect x="0" y="0" width="100%" height="100%" />
</g>
<g id="vignette" mask="url(#vignette-mask)">
<rect x="0" y="0" width="100%" height="100%" />
</g>
</svg>
<canvas id="webgl-canvas" aria-hidden style="position: absolute; inset: 0; pointer-events: none"></canvas>
</div>
<svg
id="runtime-defs-host"
width="0"
height="0"
aria-hidden="true"
style="position: absolute; width: 0; height: 0; overflow: hidden"
>
<defs><g id="runtime-defs"></g></defs>
</svg>
<canvas id="webgl-canvas" aria-hidden style="position: absolute; inset: 0; pointer-events: none"></canvas>
</div>
<div id="loading">

2
src/modules/index.ts
View file

@ -7,6 +7,8 @@ import "./fonts";
import "./heightmap-generator";
import "./ice";
import "./lakes";
import "./layers";
import "./map-compat";
import "./markers-generator";
import "./military-generator";
import "./names-generator";

58
src/modules/layer.ts Normal file
View file

@ -0,0 +1,58 @@
import type { WebGLLayerConfig } from "./webgl-layer.ts";
export interface Layer {
readonly id: string;
readonly kind: "svg" | "webgl";
readonly surface: Element | null;
mount(): void;
setVisible(visible: boolean): void;
dispose(): void;
}
export class SvgLayer implements Layer {
readonly kind = "svg" as const;
readonly surface: Element;
constructor(
readonly id: string,
surface: Element,
) {
this.surface = surface;
}
mount() {}
setVisible(visible: boolean) {
(this.surface as HTMLElement).style.display = visible ? "" : "none";
}
dispose() {
this.surface.remove();
}
}
export class WebGLSurfaceLayer implements Layer {
readonly kind = "webgl" as const;
readonly surface = null;
private mounted = false;
constructor(
readonly id: string,
private readonly config: WebGLLayerConfig,
) {}
mount() {
if (this.mounted) return;
WebGLLayer.register(this.config);
this.mounted = true;
}
setVisible(visible: boolean) {
WebGLLayer.setLayerVisible(this.id, visible);
}
dispose() {
WebGLLayer.unregister(this.id);
this.mounted = false;
}
}

122
src/modules/layers.ts Normal file
View file

@ -0,0 +1,122 @@
import type { Layer } from "./layer.ts";
import { SvgLayer } from "./layer.ts";
export type LayerKind = "svg" | "webgl";
export interface LayerRecord {
readonly id: string;
readonly kind: LayerKind;
order: number;
visible: boolean;
readonly surface: Element | null;
readonly owner: Layer | null;
}
const TOGGLE_TO_LAYER_ID: Readonly<Record<string, string>> = {
toggleHeight: "terrs",
toggleBiomes: "biomes",
toggleCells: "cells",
toggleGrid: "gridOverlay",
toggleCoordinates: "coordinates",
toggleCompass: "compass",
toggleRivers: "rivers",
toggleRelief: "terrain",
toggleReligions: "relig",
toggleCultures: "cults",
toggleStates: "regions",
toggleProvinces: "provs",
toggleBorders: "borders",
toggleRoutes: "routes",
toggleTemperature: "temperature",
togglePrecipitation: "prec",
togglePopulation: "population",
toggleIce: "ice",
toggleTexture: "texture",
toggleEmblems: "emblems",
toggleLabels: "labels",
toggleBurgIcons: "icons",
toggleMarkers: "markers",
toggleRulers: "ruler",
};
export class LayersModule {
private readonly records = new Map<string, LayerRecord>();
private nextOrder = 0;
register(
id: string,
kind: LayerKind,
visible: boolean,
surface: Element | null,
) {
const owner: Layer | null =
kind === "svg" && surface ? new SvgLayer(id, surface) : null;
this.records.set(id, {
id,
kind,
order: this.nextOrder++,
visible,
surface,
owner,
});
}
get(id: string): LayerRecord | undefined {
return this.records.get(id);
}
getAll(): LayerRecord[] {
return Array.from(this.records.values()).sort((a, b) => a.order - b.order);
}
layerIdForToggle(toggleId: string): string | null {
return TOGGLE_TO_LAYER_ID[toggleId] ?? null;
}
reorder(id: string, afterId: string | null) {
const rec = this.records.get(id);
if (!rec || rec.kind !== "svg") return;
const without = this.getAll().filter(
(r) => r.kind === "svg" && r.id !== id,
);
const insertIdx =
afterId === null ? 0 : without.findIndex((r) => r.id === afterId) + 1;
if (afterId !== null && insertIdx === 0) return;
without.splice(insertIdx, 0, rec);
without.forEach((r, i) => {
r.order = i;
});
this.nextOrder = without.length;
if (rec.surface) {
const afterSurface =
afterId !== null ? (this.records.get(afterId)?.surface ?? null) : null;
if (afterSurface) {
afterSurface.after(rec.surface);
} else {
const parent = rec.surface.parentElement;
const first = parent?.firstElementChild ?? null;
if (first && first !== rec.surface)
parent!.insertBefore(rec.surface, first);
}
}
}
setVisible(id: string, visible: boolean) {
const rec = this.records.get(id);
if (!rec) return;
rec.visible = visible;
rec.owner?.setVisible(visible);
}
}
declare global {
var Layers: LayersModule;
}
if (typeof window !== "undefined") {
window.Layers = new LayersModule();
}

25
src/modules/map-compat.ts Normal file
View file

@ -0,0 +1,25 @@
// Migration-era compatibility bridge for legacy single-SVG callers.
// New code should use Scene and Layers directly.
// This bridge is intentionally narrow: only three lookups are provided.
declare global {
var getLayerSvg: (id: string) => SVGSVGElement | null;
var getLayerSurface: (id: string) => Element | null;
var queryMap: (selector: string) => Element | null;
}
window.getLayerSvg = (id: string): SVGSVGElement | null => {
const surface = Layers.get(id)?.surface;
if (!surface) return null;
if (surface instanceof SVGSVGElement) return surface;
const root = surface.closest("svg");
return root instanceof SVGSVGElement ? root : null;
};
window.getLayerSurface = (id: string): Element | null => {
return Layers.get(id)?.surface ?? null;
};
window.queryMap = (selector: string): Element | null => {
return Scene.getMapSvg().querySelector(selector);
};

5
src/modules/texture-atlas-layer.ts
View file

@ -11,6 +11,7 @@ import {
type Texture,
TextureLoader,
} from "three";
import { WebGLSurfaceLayer } from "./layer.ts";
export interface AtlasConfig {
url: string;
@ -30,13 +31,14 @@ export class TextureAtlasLayer {
private group: Group | null = null;
private readonly textureCache = new Map<string, Texture>();
private readonly atlases: Record<string, AtlasConfig>;
private readonly owner: WebGLSurfaceLayer;
constructor(id: string, atlases: Record<string, AtlasConfig>) {
this.atlases = atlases;
for (const [atlasId, config] of Object.entries(atlases)) {
this.preloadTexture(atlasId, config.url);
}
WebGLLayer.register({
this.owner = new WebGLSurfaceLayer(id, {
id,
setup: (group) => {
this.group = group;
@ -45,6 +47,7 @@ export class TextureAtlasLayer {
this.disposeAll();
},
});
this.owner.mount();
}
draw(items: AtlasItem[]) {

15
src/modules/webgl-layer.ts
View file

@ -87,6 +87,21 @@ export class WebGL2LayerClass {
this.layers.set(config.id, { config, group });
}
setLayerVisible(id: string, visible: boolean) {
const layer = this.layers.get(id);
if (!layer) return;
layer.group.visible = visible;
this.rerender();
}
unregister(id: string) {
const layer = this.layers.get(id);
if (!layer) return;
layer.config.dispose(layer.group);
this.scene?.remove(layer.group);
this.layers.delete(id);
}
rerender() {
if (this.rafId !== null) return;
this.rafId = requestAnimationFrame(() => {

2
src/renderers/draw-state-labels.ts
View file

@ -118,7 +118,7 @@ const stateLabelsRenderer = (list?: number[]): void => {
const textGroup = select<SVGGElement, unknown>("g#labels > g#states");
const pathGroup = select<SVGGElement, unknown>(
"defs > g#deftemp > g#textPaths",
queryMap("defs > g#deftemp > g#textPaths") as SVGGElement | null,
);
for (const [stateId, pathPoints] of labelPaths) {

2
src/types/global.ts
View file

@ -1,4 +1,5 @@
import type { Selection } from "d3";
import type { LayersModule } from "../modules/layers";
import type { NameBase } from "../modules/names-generator";
import type { SceneModule } from "../modules/scene";
import type { PackedGraph } from "./PackedGraph";
@ -92,5 +93,6 @@ declare global {
var viewY: number;
var changeFont: () => void;
var getFriendlyHeight: (coords: [number, number]) => string;
var Layers: LayersModule;
var Scene: SceneModule;
}