backups/Fantasy-Map-Generator
1
0
Fork 0
mirror of https://github.com/Azgaar/Fantasy-Map-Generator.git synced 2025-12-17 01:41:22 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(es modules): continue migration

Browse source
This commit is contained in:
Azgaar 2022-06-25 20:24:43 +03:00
parent eaa0046e67
commit 4a04a8622d
23 changed files with 121 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

27
index.html
View file

@ -459,7 +459,6 @@
data-tip="Texture overlay: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
data-shortcut="X"
class="buttonoff"
onclick="toggleTexture(event)"
>
Te<u>x</u>ture
</li>
@ -468,7 +467,6 @@
data-tip="Heightmap: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
data-shortcut="H"
class="buttonoff"
onclick="toggleHeight(event)"
>
<u>H</u>eightmap
</li>
@ -477,7 +475,6 @@
data-tip="Biomes: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
data-shortcut="B"
class="buttonoff"
onclick="toggleBiomes(event)"
>
<u>B</u>iomes
</li>
@ -486,7 +483,6 @@
data-tip="Cells structure: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
data-shortcut="E"
class="buttonoff"
onclick="toggleCells(event)"
>
C<u>e</u>lls
</li>
@ -495,7 +491,6 @@
data-tip="Grid: click to toggle, drag to raise or lower. Ctrl + click to edit layer style and select type"
data-shortcut="G"
class="buttonoff"
onclick="toggleGrid(event)"
>
<u>G</u>rid
</li>
@ -504,7 +499,6 @@
data-tip="Coordinate grid: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
data-shortcut="O"
class="buttonoff"
onclick="toggleCoordinates(event)"
>
C<u>o</u>ordinates
</li>
@ -513,7 +507,6 @@
data-tip="Wind (Compass) Rose: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
data-shortcut="W"
class="buttonoff"
onclick="toggleCompass(event)"
>
<u>W</u>ind Rose
</li>
@ -521,7 +514,6 @@
id="toggleRivers"
data-tip="Rivers: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
data-shortcut="V"
onclick="toggleRivers(event)"
>
Ri<u>v</u>ers
</li>
@ -530,7 +522,6 @@
data-tip="Relief and biome icons: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
data-shortcut="F"
class="buttonoff"
onclick="toggleRelief(event)"
>
Relie<u>f</u>
</li>
@ -539,7 +530,6 @@
data-tip="Religions: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
data-shortcut="R"
class="buttonoff"
onclick="toggleReligions(event)"
>
<u>R</u>eligions
</li>
@ -548,7 +538,6 @@
data-tip="Cultures: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
data-shortcut="C"
class="buttonoff"
onclick="toggleCultures(event)"
>
<u>C</u>ultures
</li>
@ -556,7 +545,6 @@
id="toggleStates"
data-tip="States: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
data-shortcut="S"
onclick="toggleStates(event)"
>
<u>S</u>tates
</li>
@ -565,7 +553,6 @@
data-tip="Provinces: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
data-shortcut="P"
class="buttonoff"
onclick="toggleProvinces(event)"
>
<u>P</u>rovinces
</li>
@ -574,7 +561,6 @@
data-tip="Zones: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
data-shortcut="Z"
class="buttonoff"
onclick="toggleZones(event)"
>
<u>Z</u>ones
</li>
@ -582,7 +568,6 @@
id="toggleBorders"
data-tip="State borders: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
data-shortcut="D"
onclick="toggleBorders(event)"
>
Bor<u>d</u>ers
</li>
@ -590,7 +575,6 @@
id="toggleRoutes"
data-tip="Trade routes: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
data-shortcut="U"
onclick="toggleRoutes(event)"
>
Ro<u>u</u>tes
</li>
@ -599,7 +583,6 @@
data-tip="Temperature map: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
data-shortcut="T"
class="buttonoff"
onclick="toggleTemp(event)"
>
<u>T</u>emperature
</li>
@ -608,7 +591,6 @@
data-tip="Population map: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
data-shortcut="N"
class="buttonoff"
onclick="togglePopulation(event)"
>
Populatio<u>n</u>
</li>
@ -617,7 +599,6 @@
data-tip="Icebergs and glaciers: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
data-shortcut="J"
class="buttonoff"
onclick="toggleIce(event)"
>
Ice
</li>
@ -626,7 +607,6 @@
data-tip="Precipitation map: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
data-shortcut="A"
class="buttonoff"
onclick="togglePrec(event)"
>
Precipit<u>a</u>tion
</li>
@ -635,7 +615,6 @@
data-tip="Emblems: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
data-shortcut="Y"
class="buttonoff"
onclick="toggleEmblems(event)"
>
Emblems
</li>
@ -643,7 +622,6 @@
id="toggleLabels"
data-tip="Labels: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
data-shortcut="L"
onclick="toggleLabels(event)"
>
<u>L</u>abels
</li>
@ -651,7 +629,6 @@
id="toggleIcons"
data-tip="Burg icons: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
data-shortcut="I"
onclick="toggleIcons(event)"
>
<u>I</u>cons
</li>
@ -660,7 +637,6 @@
data-tip="Military forces: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
data-shortcut="M"
class="buttonoff"
onclick="toggleMilitary(event)"
>
<u>M</u>ilitary
</li>
@ -669,7 +645,6 @@
data-tip="Markers: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
data-shortcut="K"
class="buttonoff"
onclick="toggleMarkers(event)"
>
Mar<u>k</u>ers
</li>
@ -678,7 +653,6 @@
data-tip="Rulers: click to toggle, drag to move, click on label to delete. Ctrl + click to edit layer style"
data-shortcut="= (equal sign)"
class="buttonoff"
onclick="toggleRulers(event)"
>
Rulers
</li>
@ -686,7 +660,6 @@
id="toggleScaleBar"
data-tip="Scale Bar: click to toggle. Ctrl + click to edit style"
data-shortcut="/ (slash sign)"
onclick="toggleScaleBar(event)"
class="solid"
>
Scale Bar

1
modules/dynamic/editors/cultures-editor.js
View file

@ -1,3 +1,4 @@
import {restoreDefaultEvents} from "/src/scripts/events";
import {findAll, findCell, getPackPolygon, isLand} from "/src/utils/graphUtils";
import {byId} from "/src/utils/shorthands";

1
modules/dynamic/editors/religions-editor.js
View file

@ -1,3 +1,4 @@
import {restoreDefaultEvents} from "/src/scripts/events";
import {findAll, findCell, getPackPolygon, isLand} from "/src/utils/graphUtils";
import {byId} from "/src/utils/shorthands";

1
modules/dynamic/editors/states-editor.js
View file

@ -1,3 +1,4 @@
import {restoreDefaultEvents} from "/src/scripts/events";
import {findAll, findCell, getPackPolygon, isLand} from "/src/utils/graphUtils";
import {byId} from "/src/utils/shorthands";

3
modules/io/load.js
View file

@ -1,3 +1,4 @@
import {restoreDefaultEvents} from "/src/scripts/events";
import {calculateVoronoi, findCell} from "/src/utils/graphUtils";
import {last} from "/src/utils/arrayUtils";
@ -571,7 +572,7 @@ async function parseLoadedData(data) {
eraInput.value = options.era;
shapeRendering.value = viewbox.attr("shape-rendering") || "geometricPrecision";
if (window.restoreDefaultEvents) restoreDefaultEvents();
restoreDefaultEvents();
focusOn(); // based on searchParams focus on point, cell or burg
invokeActiveZooming();

1
modules/ui/biomes-editor.js
View file

@ -1,3 +1,4 @@
import {restoreDefaultEvents} from "/src/scripts/events";
import {findAll, findCell, getPackPolygon, isLand} from "/src/utils/graphUtils";
export function editBiomes() {

1
modules/ui/burgs-overview.js
View file

@ -1,3 +1,4 @@
import {restoreDefaultEvents} from "/src/scripts/events";
import {findCell} from "/src/utils/graphUtils";
export function overviewBurgs() {

1
modules/ui/diplomacy-editor.js
View file

@ -1,3 +1,4 @@
import {restoreDefaultEvents} from "/src/scripts/events";
import {findCell} from "/src/utils/graphUtils";
export function editDiplomacy() {

8
modules/ui/editors.js
View file

@ -1,13 +1,7 @@
import {restoreDefaultEvents} from "/src/scripts/events";
import {findCell} from "/src/utils/graphUtils";
import {byId} from "/src/utils/shorthands";
// restore default viewbox events
function restoreDefaultEvents() {
svg.call(zoom);
viewbox.style("cursor", "default").on(".drag", null).on("click", clicked).on("touchmove mousemove", onMouseMove);
legend.call(d3.drag().on("start", dragLegendBox));
}
// on viewbox click event - run function based on target
function clicked() {
const el = d3.event.target;

1
modules/ui/heightmap-editor.js
View file

@ -1,3 +1,4 @@
import {restoreDefaultEvents} from "/src/scripts/events";
import {findGridCell, findGridAll, findCell, getPackPolygon, getGridPolygon} from "/src/utils/graphUtils";
import {last, createTypedArray} from "/src/utils/arrayUtils";
import {byId} from "/src/utils/shorthands";

114
modules/ui/layers.js
View file

@ -2,9 +2,12 @@ import {TIME} from "/src/config/logging";
import {invokeActiveZooming} from "../activeZooming";
import {getGridPolygon} from "/src/utils/graphUtils";
import {last} from "/src/utils/arrayUtils";
import {stored, store} from "/src/utils/shorthands";
import {byId} from "/src/utils/shorthands";
let presets = {}; // global object
let presets = {};
restoreCustomPresets(); // run on-load
addToggleLayersListener();
function getDefaultPresets() {
return {
@ -88,33 +91,34 @@ function restoreCustomPresets() {
}
// run on map generation
function applyPreset() {
const preset = localStorage.getItem("preset") || document.getElementById("layersPreset").value;
export function applyPreset() {
const preset = stored("preset") || byId("layersPreset")?.value || "political";
changePreset(preset);
}
// toggle layers on preset change
function changePreset(preset) {
const layers = presets[preset]; // layers to be turned on
document
.getElementById("mapLayers")
.querySelectorAll("li")
.forEach(function (e) {
if (layers.includes(e.id) && !layerIsOn(e.id)) e.click();
else if (!layers.includes(e.id) && layerIsOn(e.id)) e.click();
});
layersPreset.value = preset;
localStorage.setItem("preset", preset);
const $layerButtons = byId("mapLayers").querySelectorAll("li");
$layerButtons.forEach(function ($layerButton) {
const {id} = $layerButton;
if (layers.includes(id) && !layerIsOn(id)) $layerButton.click();
else if (!layers.includes(id) && layerIsOn(id)) $layerButton.click();
});
byId("layersPreset").value = preset;
store("preset", preset);
const isDefault = getDefaultPresets()[preset];
removePresetButton.style.display = isDefault ? "none" : "inline-block";
savePresetButton.style.display = "none";
if (document.getElementById("canvas3d")) setTimeout(ThreeD.update(), 400);
byId("removePresetButton").style.display = isDefault ? "none" : "inline-block";
byId("savePresetButton").style.display = "none";
if (byId("canvas3d")) setTimeout(ThreeD.update(), 400);
}
function savePreset() {
prompt("Please provide a preset name", {default: ""}, preset => {
presets[preset] = Array.from(document.getElementById("mapLayers").querySelectorAll("li:not(.buttonoff)"))
presets[preset] = Array.from(byId("mapLayers").querySelectorAll("li:not(.buttonoff)"))
.map(node => node.id)
.sort();
layersPreset.add(new Option(preset, preset, false, true));
@ -139,22 +143,24 @@ function removePreset() {
}
function getCurrentPreset() {
const layers = Array.from(document.getElementById("mapLayers").querySelectorAll("li:not(.buttonoff)"))
const $toggledOnLayers = byId("mapLayers").querySelectorAll("li:not(.buttonoff)");
const currentLayers = Array.from($toggledOnLayers)
.map(node => node.id)
.sort();
const defaultPresets = getDefaultPresets();
const defaultPresets = getDefaultPresets();
for (const preset in presets) {
if (JSON.stringify(presets[preset]) !== JSON.stringify(layers)) continue;
layersPreset.value = preset;
removePresetButton.style.display = defaultPresets[preset] ? "none" : "inline-block";
savePresetButton.style.display = "none";
if (JSON.stringify(presets[preset].sort()) !== JSON.stringify(currentLayers)) continue;
byId("layersPreset").value = preset;
byId("removePresetButton").style.display = defaultPresets[preset] ? "none" : "inline-block";
byId("savePresetButton").style.display = "none";
return;
}
layersPreset.value = "custom";
removePresetButton.style.display = "none";
savePresetButton.style.display = "inline-block";
byId("layersPreset").value = "custom";
byId("removePresetButton").style.display = "none";
byId("savePresetButton").style.display = "inline-block";
}
// run on map regeneration
@ -182,6 +188,46 @@ function restoreLayers() {
if (!layerIsOn("toggleRivers")) rivers.selectAll("*").remove();
}
export const layerTogglesMap = {
toggleBiomes,
toggleBorders,
toggleCells,
toggleCompass,
toggleCoordinates,
toggleCultures,
toggleEmblems,
toggleGrid,
toggleHeight,
toggleIce,
toggleIcons,
toggleLabels,
toggleMarkers,
toggleMilitary,
togglePopulation,
togglePrec,
toggleProvinces,
toggleRelief,
toggleReligions,
toggleRivers,
toggleRoutes,
toggleRulers,
toggleScaleBar,
toggleStates,
toggleTemp,
toggleTexture,
toggleZones
};
function toggleLayer(event) {
const targetId = event.target.id;
if (!targetId || targetId === "mapLayers" || !layerTogglesMap[targetId]) return;
layerTogglesMap[targetId]();
}
export function addToggleLayersListener() {
byId("mapLayers").on("click", toggleLayer);
}
function toggleHeight(event) {
if (customization === 1) {
tip("You cannot turn off the layer when heightmap is in edit mode", false, "error");
@ -1475,8 +1521,8 @@ function drawCoordinates() {
// conver svg point into viewBox point
function getViewPoint(x, y) {
const view = document.getElementById("viewbox");
const svg = document.getElementById("map");
const view = byId("viewbox");
const svg = byId("map");
const pt = svg.createSVGPoint();
(pt.x = x), (pt.y = y);
return pt.matrixTransform(view.getScreenCTM().inverse());
@ -1597,7 +1643,7 @@ function toggleRoutes(event) {
}
}
function toggleMilitary() {
function toggleMilitary(event) {
if (!layerIsOn("toggleMilitary")) {
turnButtonOn("toggleMilitary");
$("#armies").fadeIn();
@ -1772,21 +1818,21 @@ function drawEmblems() {
const getStateEmblemsSize = () => {
const startSize = minmax((graphHeight + graphWidth) / 40, 10, 100);
const statesMod = 1 + validStates.length / 100 - (15 - validStates.length) / 200; // states number modifier
const sizeMod = +document.getElementById("emblemsStateSizeInput").value || 1;
const sizeMod = +byId("emblemsStateSizeInput").value || 1;
return rn((startSize / statesMod) * sizeMod); // target size ~50px on 1536x754 map with 15 states
};
const getProvinceEmblemsSize = () => {
const startSize = minmax((graphHeight + graphWidth) / 100, 5, 70);
const provincesMod = 1 + validProvinces.length / 1000 - (115 - validProvinces.length) / 1000; // states number modifier
const sizeMod = +document.getElementById("emblemsProvinceSizeInput").value || 1;
const sizeMod = +byId("emblemsProvinceSizeInput").value || 1;
return rn((startSize / provincesMod) * sizeMod); // target size ~20px on 1536x754 map with 115 provinces
};
const getBurgEmblemSize = () => {
const startSize = minmax((graphHeight + graphWidth) / 185, 2, 50);
const burgsMod = 1 + validBurgs.length / 1000 - (450 - validBurgs.length) / 1000; // states number modifier
const sizeMod = +document.getElementById("emblemsBurgSizeInput").value || 1;
const sizeMod = +byId("emblemsBurgSizeInput").value || 1;
return rn((startSize / burgsMod) * sizeMod); // target size ~8.5px on 1536x754 map with 450 burgs
};
@ -1873,17 +1919,17 @@ function drawEmblems() {
}
export function layerIsOn(el) {
const buttonoff = document.getElementById(el).classList.contains("buttonoff");
const buttonoff = byId(el).classList.contains("buttonoff");
return !buttonoff;
}
function turnButtonOff(el) {
document.getElementById(el).classList.add("buttonoff");
byId(el).classList.add("buttonoff");
getCurrentPreset();
}
function turnButtonOn(el) {
document.getElementById(el).classList.remove("buttonoff");
byId(el).classList.remove("buttonoff");
getCurrentPreset();
}

1
modules/ui/markers-editor.js
View file

@ -1,3 +1,4 @@
import {restoreDefaultEvents} from "/src/scripts/events";
import {findCell} from "/src/utils/graphUtils";
export function editMarker(markerI) {

17
modules/ui/markers-overview.js
View file

@ -1,5 +1,6 @@
"use strict";
function overviewMarkers() {
import {restoreDefaultEvents} from "/src/scripts/events";
export function overviewMarkers() {
if (customization) return;
closeDialogs("#markersOverview, .stable");
if (!layerIsOn("toggleMarkers")) toggleMarkers();
@ -54,8 +55,12 @@ function overviewMarkers() {
<div data-tip="Marker icon and type" style="width:12em">${icon} ${type}</div>
<span style="padding-right:.1em" data-tip="Edit marker" class="icon-pencil"></span>
<span style="padding-right:.1em" data-tip="Focus on marker position" class="icon-dot-circled pointer"></span>
<span style="padding-right:.1em" data-tip="Pin marker (display only pinned markers)" class="icon-pin ${pinned ? "" : "inactive"}" pointer"></span>
<span style="padding-right:.1em" class="locks pointer ${lock ? "icon-lock" : "icon-lock-open inactive"}" onmouseover="showElementLockTip(event)"></span>
<span style="padding-right:.1em" data-tip="Pin marker (display only pinned markers)" class="icon-pin ${
pinned ? "" : "inactive"
}" pointer"></span>
<span style="padding-right:.1em" class="locks pointer ${
lock ? "icon-lock" : "icon-lock-open inactive"
}" onmouseover="showElementLockTip(event)"></span>
<span data-tip="Remove marker" class="icon-trash-empty"></span>
</div>`;
})
@ -177,8 +182,8 @@ function overviewMarkers() {
const {i, type, icon, x, y} = marker;
const id = `marker${i}`;
const note = notes.find(note => note.id === id);
const name = note ? quote(note.name) : 'Unknown';
const legend = note ? quote(note.legend) : '';
const name = note ? quote(note.name) : "Unknown";
const legend = note ? quote(note.legend) : "";
return [id, type, icon, name, legend, x, y].join(",");
});

1
modules/ui/provinces-editor.js
View file

@ -1,3 +1,4 @@
import {restoreDefaultEvents} from "/src/scripts/events";
import {findAll, findCell, getPackPolygon, isLand} from "/src/utils/graphUtils";
import {unique} from "/src/utils/arrayUtils";

1
modules/ui/regiment-editor.js
View file

@ -1,3 +1,4 @@
import {restoreDefaultEvents} from "/src/scripts/events";
import {findCell} from "/src/utils/graphUtils";
import {last} from "/src/utils/arrayUtils";

1
modules/ui/relief-editor.js
View file

@ -1,3 +1,4 @@
import {restoreDefaultEvents} from "/src/scripts/events";
import {findCell} from "/src/utils/graphUtils";
export function editReliefIcon() {

1
modules/ui/rivers-creator.js
View file

@ -1,3 +1,4 @@
import {restoreDefaultEvents} from "/src/scripts/events";
import {getPackPolygon, findCell} from "/src/utils/graphUtils";
import {last} from "/src/utils/arrayUtils";

1
modules/ui/tools.js
View file

@ -1,3 +1,4 @@
import {restoreDefaultEvents} from "/src/scripts/events";
import {findCell} from "/src/utils/graphUtils";
import {last} from "/src/utils/arrayUtils";

1
modules/ui/units-editor.js
View file

@ -1,3 +1,4 @@
import {restoreDefaultEvents} from "/src/scripts/events";
import {findCell} from "/src/utils/graphUtils";
export function editUnits() {

1
modules/ui/zones-editor.js
View file

@ -1,3 +1,4 @@
import {restoreDefaultEvents} from "/src/scripts/events";
import {findAll, findCell, getPackPolygon} from "/src/utils/graphUtils";
import {unique} from "/src/utils/arrayUtils";

6
modules/zoom.js
View file

@ -22,6 +22,10 @@ window.Zoom = (function () {
const onZoomDebouced = debounce(onZoom, 50);
const zoom = d3.zoom().scaleExtent([1, 20]).on("zoom", onZoomDebouced);
function setZoomBehavior() {
svg.call(zoom);
}
// zoom to a specific point
function to(x, y, z = 8, d = 2000) {
const transform = d3.zoomIdentity.translate(x * -z + graphWidth / 2, y * -z + graphHeight / 2).scale(z);
@ -48,5 +52,5 @@ window.Zoom = (function () {
zoom.scaleTo(element, scale);
}
return {to, reset, scaleExtent, translateExtent, scaleTo};
return {setZoomBehavior, to, reset, scaleExtent, translateExtent, scaleTo};
})();

3
src/main.ts
View file

@ -12,13 +12,14 @@ import {
findCell
} from "./utils/graphUtils";
import {createTypedArray} from "./utils/arrayUtils";
import {drawRivers, drawStates, drawBorders} from "../modules/ui/layers";
import {applyPreset, drawRivers, drawStates, drawBorders} from "../modules/ui/layers";
import {invokeActiveZooming} from "../modules/activeZooming";
import {applyStoredOptions, applyMapSize, randomizeOptions} from "../modules/ui/options";
import {locked} from "./scripts/options/lock";
import {Rulers, Ruler, drawScaleBar} from "./modules/measurers";
import {byId} from "./utils/shorthands";
import {addGlobalListeners} from "./scripts/listeners";
import {restoreDefaultEvents} from "./scripts/events";
addGlobalListeners();

5
src/scripts/events.ts Normal file
View file

@ -0,0 +1,5 @@
export function restoreDefaultEvents() {
Zoom.setZoomBehavior();
viewbox.style("cursor", "default").on(".drag", null).on("click", clicked).on("touchmove mousemove", onMouseMove);
legend.call(d3.drag().on("start", dragLegendBox));
}