diff --git a/index.html b/index.html index eb17ea52..bd389c9d 100644 --- a/index.html +++ b/index.html @@ -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)" > Texture @@ -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)" > Heightmap @@ -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)" > Biomes @@ -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)" > Cells @@ -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)" > Grid @@ -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)" > Coordinates @@ -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)" > Wind Rose @@ -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)" > Rivers @@ -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)" > Relief @@ -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)" > Religions @@ -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)" > Cultures @@ -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)" > States @@ -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)" > Provinces @@ -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)" > Zones @@ -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)" > Borders @@ -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)" > Routes @@ -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)" > Temperature @@ -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)" > Population @@ -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 @@ -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)" > Precipitation @@ -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 @@ -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)" > Labels @@ -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)" > Icons @@ -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)" > Military @@ -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)" > Markers @@ -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 @@ -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 diff --git a/modules/dynamic/editors/cultures-editor.js b/modules/dynamic/editors/cultures-editor.js index 648679fb..90e50932 100644 --- a/modules/dynamic/editors/cultures-editor.js +++ b/modules/dynamic/editors/cultures-editor.js @@ -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"; diff --git a/modules/dynamic/editors/religions-editor.js b/modules/dynamic/editors/religions-editor.js index 8bd934ed..973550ce 100644 --- a/modules/dynamic/editors/religions-editor.js +++ b/modules/dynamic/editors/religions-editor.js @@ -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"; diff --git a/modules/dynamic/editors/states-editor.js b/modules/dynamic/editors/states-editor.js index 8e22a943..92ea85ff 100644 --- a/modules/dynamic/editors/states-editor.js +++ b/modules/dynamic/editors/states-editor.js @@ -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"; diff --git a/modules/io/load.js b/modules/io/load.js index 19ce7e0a..90ebfb86 100644 --- a/modules/io/load.js +++ b/modules/io/load.js @@ -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(); diff --git a/modules/ui/biomes-editor.js b/modules/ui/biomes-editor.js index 4fdce51a..dfe82a47 100644 --- a/modules/ui/biomes-editor.js +++ b/modules/ui/biomes-editor.js @@ -1,3 +1,4 @@ +import {restoreDefaultEvents} from "/src/scripts/events"; import {findAll, findCell, getPackPolygon, isLand} from "/src/utils/graphUtils"; export function editBiomes() { diff --git a/modules/ui/burgs-overview.js b/modules/ui/burgs-overview.js index c34f0d49..675d8e47 100644 --- a/modules/ui/burgs-overview.js +++ b/modules/ui/burgs-overview.js @@ -1,3 +1,4 @@ +import {restoreDefaultEvents} from "/src/scripts/events"; import {findCell} from "/src/utils/graphUtils"; export function overviewBurgs() { diff --git a/modules/ui/diplomacy-editor.js b/modules/ui/diplomacy-editor.js index 02de7675..0839ad69 100644 --- a/modules/ui/diplomacy-editor.js +++ b/modules/ui/diplomacy-editor.js @@ -1,3 +1,4 @@ +import {restoreDefaultEvents} from "/src/scripts/events"; import {findCell} from "/src/utils/graphUtils"; export function editDiplomacy() { diff --git a/modules/ui/editors.js b/modules/ui/editors.js index f897d273..cabbe975 100644 --- a/modules/ui/editors.js +++ b/modules/ui/editors.js @@ -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; diff --git a/modules/ui/heightmap-editor.js b/modules/ui/heightmap-editor.js index 2813fd06..e83f4f6f 100644 --- a/modules/ui/heightmap-editor.js +++ b/modules/ui/heightmap-editor.js @@ -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"; diff --git a/modules/ui/layers.js b/modules/ui/layers.js index 7547cff7..01aaa5a4 100644 --- a/modules/ui/layers.js +++ b/modules/ui/layers.js @@ -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(); } diff --git a/modules/ui/markers-editor.js b/modules/ui/markers-editor.js index 0a7bab3e..24a1c2ce 100644 --- a/modules/ui/markers-editor.js +++ b/modules/ui/markers-editor.js @@ -1,3 +1,4 @@ +import {restoreDefaultEvents} from "/src/scripts/events"; import {findCell} from "/src/utils/graphUtils"; export function editMarker(markerI) { diff --git a/modules/ui/markers-overview.js b/modules/ui/markers-overview.js index 5570ffb9..dfe1b638 100644 --- a/modules/ui/markers-overview.js +++ b/modules/ui/markers-overview.js @@ -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() {