From a6a8acbd1e2ea8885aeef04b8a5dc6357ddaa12b Mon Sep 17 00:00:00 2001 From: Peter Date: Sun, 27 Nov 2022 17:05:47 -0500 Subject: [PATCH] merge module uis --- modules/ui/general.js | 4 - modules/ui/regiment-editor.js | 4 +- modules/ui/rivers-editor.js | 22 +-- modules/ui/rivers-overview.js | 46 ++--- modules/ui/routes-editor.js | 143 +++++++-------- modules/ui/style.js | 315 ++++++++++++++++------------------ modules/ui/tools.js | 114 ++++++------ modules/ui/units-editor.js | 58 +++---- modules/ui/zones-editor.js | 2 - 9 files changed, 331 insertions(+), 377 deletions(-) diff --git a/modules/ui/general.js b/modules/ui/general.js index 997b321f..4305f016 100644 --- a/modules/ui/general.js +++ b/modules/ui/general.js @@ -335,10 +335,6 @@ function getPrecipitation(prec) { return prec * 100 + " mm"; } -function getPrecipitation(prec) { - return prec * 100 + " mm"; -} - // get user-friendly (real-world) precipitation value from map data function getFriendlyPrecipitation(i) { const prec = grid.cells.prec[pack.cells.g[i]]; diff --git a/modules/ui/regiment-editor.js b/modules/ui/regiment-editor.js index 3c0fe73c..359cca91 100644 --- a/modules/ui/regiment-editor.js +++ b/modules/ui/regiment-editor.js @@ -370,8 +370,8 @@ function editRegiment(selector) { military.splice(regIndex, 1); const index = notes.findIndex(n => n.id === elSelected.id); - if (index != -1) notes.splice(index, 1); - elSelected.remove(); + if (index != -1) notes.splice(index, 1); + elSelected.remove(); if (militaryOverviewRefresh.offsetParent) militaryOverviewRefresh.click(); if (regimentsOverviewRefresh.offsetParent) regimentsOverviewRefresh.click(); diff --git a/modules/ui/rivers-editor.js b/modules/ui/rivers-editor.js index c94d8492..7a24cfe5 100644 --- a/modules/ui/rivers-editor.js +++ b/modules/ui/rivers-editor.js @@ -1,4 +1,4 @@ -'use strict'; +"use strict"; function editRiver(id) { if (customization) return; if (elSelected && id === elSelected.attr("id")) return; @@ -47,18 +47,18 @@ function editRiver(id) { document.getElementById("riverWidthFactor").addEventListener("input", changeWidthFactor); function getRiver() { - const riverId = +elSelected.attr('id').slice(5); - const river = pack.rivers.find((r) => r.i === riverId); + const riverId = +elSelected.attr("id").slice(5); + const river = pack.rivers.find(r => r.i === riverId); return river; } function updateRiverData() { const r = getRiver(); - document.getElementById('riverName').value = r.name; - document.getElementById('riverType').value = r.type; + document.getElementById("riverName").value = r.name; + document.getElementById("riverType").value = r.type; - const parentSelect = document.getElementById('riverMainstem'); + const parentSelect = document.getElementById("riverMainstem"); parentSelect.options.length = 0; const parent = r.parent || r.i; const sortedRivers = pack.rivers.slice().sort((a, b) => (a.name > b.name ? 1 : -1)); @@ -66,7 +66,7 @@ function editRiver(id) { const opt = new Option(river.name, river.i, false, river.i === parent); parentSelect.options.add(opt); }); - document.getElementById('riverBasin').value = pack.rivers.find((river) => river.i === r.basin).name; + document.getElementById("riverBasin").value = pack.rivers.find(river => river.i === r.basin).name; document.getElementById("riverDischarge").value = r.discharge + " m³/s"; document.getElementById("riverSourceWidth").value = r.sourceWidth; @@ -208,8 +208,8 @@ function editRiver(id) { function changeParent() { const r = getRiver(); r.parent = +this.value; - r.basin = pack.rivers.find((river) => river.i === r.parent).basin; - document.getElementById('riverBasin').value = pack.rivers.find((river) => river.i === r.basin).name; + r.basin = pack.rivers.find(river => river.i === r.parent).basin; + document.getElementById("riverBasin").value = pack.rivers.find(river => river.i === r.basin).name; } function changeSourceWidth() { @@ -232,9 +232,9 @@ function editRiver(id) { } function editRiverLegend() { - const id = elSelected.attr('id'); + const id = elSelected.attr("id"); const river = getRiver(); - editNotes(id, river.name + ' ' + river.type); + editNotes(id, river.name + " " + river.type); } function removeRiver() { diff --git a/modules/ui/rivers-overview.js b/modules/ui/rivers-overview.js index f5166c9c..e9045fd5 100644 --- a/modules/ui/rivers-overview.js +++ b/modules/ui/rivers-overview.js @@ -1,12 +1,12 @@ -'use strict'; +"use strict"; function overviewRivers() { if (customization) return; - closeDialogs('#riversOverview, .stable'); - if (!layerIsOn('toggleRivers')) toggleRivers(); + closeDialogs("#riversOverview, .stable"); + if (!layerIsOn("toggleRivers")) toggleRivers(); - const body = document.getElementById('riversBody'); + const body = document.getElementById("riversBody"); riversOverviewAddLines(); - $('#riversOverview').dialog(); + $("#riversOverview").dialog(); if (modules.overviewRivers) return; modules.overviewRivers = true; @@ -28,15 +28,15 @@ function overviewRivers() { // add line for each river function riversOverviewAddLines() { - body.innerHTML = ''; - let lines = ''; + body.innerHTML = ""; + let lines = ""; const unit = distanceUnitInput.value; for (const r of pack.rivers) { - const discharge = r.discharge + ' m³/s'; - const length = rn(r.length * distanceScaleInput.value) + ' ' + unit; - const width = rn(r.width * distanceScaleInput.value, 3) + ' ' + unit; - const basin = pack.rivers.find((river) => river.i === r.basin)?.name; + const discharge = r.discharge + " m³/s"; + const length = rn(r.length * distanceScaleInput.value) + " " + unit; + const width = rn(r.width * distanceScaleInput.value, 3) + " " + unit; + const basin = pack.rivers.find(river => river.i === r.basin)?.name; lines += /* html */ `
`; } - body.insertAdjacentHTML('beforeend', lines); + body.insertAdjacentHTML("beforeend", lines); // update footer riversFooterNumber.innerHTML = pack.rivers.length; @@ -71,17 +71,17 @@ function overviewRivers() { riversFooterWidth.innerHTML = rn(averageWidth * distanceScaleInput.value, 3) + " " + unit; // add listeners - body.querySelectorAll('div.states').forEach((el) => el.addEventListener('mouseenter', (ev) => riverHighlightOn(ev))); - body.querySelectorAll('div.states').forEach((el) => el.addEventListener('mouseleave', (ev) => riverHighlightOff(ev))); - body.querySelectorAll('div > span.icon-dot-circled').forEach((el) => el.addEventListener('click', zoomToRiver)); - body.querySelectorAll('div > span.icon-pencil').forEach((el) => el.addEventListener('click', openRiverEditor)); - body.querySelectorAll('div > span.icon-trash-empty').forEach((el) => el.addEventListener('click', triggerRiverRemove)); + body.querySelectorAll("div.states").forEach(el => el.addEventListener("mouseenter", ev => riverHighlightOn(ev))); + body.querySelectorAll("div.states").forEach(el => el.addEventListener("mouseleave", ev => riverHighlightOff(ev))); + body.querySelectorAll("div > span.icon-dot-circled").forEach(el => el.addEventListener("click", zoomToRiver)); + body.querySelectorAll("div > span.icon-pencil").forEach(el => el.addEventListener("click", openRiverEditor)); + body.querySelectorAll("div > span.icon-trash-empty").forEach(el => el.addEventListener("click", triggerRiverRemove)); applySorting(riversHeader); } function riverHighlightOn(event) { - if (!layerIsOn('toggleRivers')) toggleRivers(); + if (!layerIsOn("toggleRivers")) toggleRivers(); const r = +event.target.dataset.id; rivers .select("#river" + r) @@ -104,9 +104,9 @@ function overviewRivers() { } function toggleBasinsHightlight() { - if (rivers.attr('data-basin') === 'hightlighted') { - rivers.selectAll('*').attr('fill', null); - rivers.attr('data-basin', null); + if (rivers.attr("data-basin") === "hightlighted") { + rivers.selectAll("*").attr("fill", null); + rivers.attr("data-basin", null); } else { rivers.attr("data-basin", "hightlighted"); const basins = [...new Set(pack.rivers.map(r => r.basin))]; @@ -124,7 +124,7 @@ function overviewRivers() { } function downloadRiversData() { - let data = 'Id,River,Type,Discharge,Length,Width,Basin\n'; // headers + let data = "Id,River,Type,Discharge,Length,Width,Basin\n"; // headers body.querySelectorAll(":scope > div").forEach(function (el) { const d = el.dataset; @@ -134,7 +134,7 @@ function overviewRivers() { data += [d.id, d.name, d.type, discharge, length, width, d.basin].join(",") + "\n"; }); - const name = getFileName('Rivers') + '.csv'; + const name = getFileName("Rivers") + ".csv"; downloadFile(data, name); } diff --git a/modules/ui/routes-editor.js b/modules/ui/routes-editor.js index 4aefcdb1..785c22a9 100644 --- a/modules/ui/routes-editor.js +++ b/modules/ui/routes-editor.js @@ -1,9 +1,9 @@ -'use strict'; +"use strict"; function editRoute(onClick) { if (customization) return; - if (!onClick && elSelected && d3.event.target.id === elSelected.attr('id')) return; - closeDialogs('.stable'); - if (!layerIsOn('toggleRoutes')) toggleRoutes(); + if (!onClick && elSelected && d3.event.target.id === elSelected.attr("id")) return; + closeDialogs(".stable"); + if (!layerIsOn("toggleRoutes")) toggleRoutes(); $("#routeEditor").dialog({ title: "Edit Route", @@ -12,32 +12,32 @@ function editRoute(onClick) { close: closeRoutesEditor }); - debug.append('g').attr('id', 'controlPoints'); + debug.append("g").attr("id", "controlPoints"); const node = onClick ? elSelected.node() : d3.event.target; - elSelected = d3.select(node).on('click', addInterimControlPoint); + elSelected = d3.select(node).on("click", addInterimControlPoint); drawControlPoints(node); selectRouteGroup(node); - viewbox.on('touchmove mousemove', showEditorTips); + viewbox.on("touchmove mousemove", showEditorTips); if (onClick) toggleRouteCreationMode(); if (modules.editRoute) return; modules.editRoute = true; // add listeners - document.getElementById('routeGroupsShow').addEventListener('click', showGroupSection); - document.getElementById('routeGroup').addEventListener('change', changeRouteGroup); - document.getElementById('routeGroupAdd').addEventListener('click', toggleNewGroupInput); - document.getElementById('routeGroupName').addEventListener('change', createNewGroup); - document.getElementById('routeGroupRemove').addEventListener('click', removeRouteGroup); - document.getElementById('routeGroupsHide').addEventListener('click', hideGroupSection); - document.getElementById('routeElevationProfile').addEventListener('click', showElevationProfile); + document.getElementById("routeGroupsShow").addEventListener("click", showGroupSection); + document.getElementById("routeGroup").addEventListener("change", changeRouteGroup); + document.getElementById("routeGroupAdd").addEventListener("click", toggleNewGroupInput); + document.getElementById("routeGroupName").addEventListener("change", createNewGroup); + document.getElementById("routeGroupRemove").addEventListener("click", removeRouteGroup); + document.getElementById("routeGroupsHide").addEventListener("click", hideGroupSection); + document.getElementById("routeElevationProfile").addEventListener("click", showElevationProfile); - document.getElementById('routeEditStyle').addEventListener('click', editGroupStyle); - document.getElementById('routeSplit').addEventListener('click', toggleRouteSplitMode); - document.getElementById('routeLegend').addEventListener('click', editRouteLegend); - document.getElementById('routeNew').addEventListener('click', toggleRouteCreationMode); - document.getElementById('routeRemove').addEventListener('click', removeRoute); + document.getElementById("routeEditStyle").addEventListener("click", editGroupStyle); + document.getElementById("routeSplit").addEventListener("click", toggleRouteSplitMode); + document.getElementById("routeLegend").addEventListener("click", editRouteLegend); + document.getElementById("routeNew").addEventListener("click", toggleRouteCreationMode); + document.getElementById("routeRemove").addEventListener("click", removeRoute); function showEditorTips() { showMainTip(); @@ -53,7 +53,7 @@ function editRoute(onClick) { const point = node.getPointAtLength(i); addControlPoint([point.x, point.y]); } - routeLength.innerHTML = rn(l * distanceScaleInput.value) + ' ' + distanceUnitInput.value; + routeLength.innerHTML = rn(l * distanceScaleInput.value) + " " + distanceUnitInput.value; } function addControlPoint(point, before = null) { @@ -69,8 +69,8 @@ function editRoute(onClick) { function addInterimControlPoint() { const point = d3.mouse(this); - const controls = document.getElementById('controlPoints').querySelectorAll('circle'); - const points = Array.from(controls).map((circle) => [+circle.getAttribute('cx'), +circle.getAttribute('cy')]); + const controls = document.getElementById("controlPoints").querySelectorAll("circle"); + const points = Array.from(controls).map(circle => [+circle.getAttribute("cx"), +circle.getAttribute("cy")]); const index = getSegmentId(points, point, 2); addControlPoint(point, ":nth-child(" + (index + 1) + ")"); @@ -78,8 +78,8 @@ function editRoute(onClick) { } function dragControlPoint() { - this.setAttribute('cx', d3.event.x); - this.setAttribute('cy', d3.event.y); + this.setAttribute("cx", d3.event.x); + this.setAttribute("cy", d3.event.y); redrawRoute(); } @@ -93,9 +93,9 @@ function editRoute(onClick) { points.push([this.getAttribute("cx"), this.getAttribute("cy")]); }); - elSelected.attr('d', round(lineGen(points))); + elSelected.attr("d", round(lineGen(points))); const l = elSelected.node().getTotalLength(); - routeLength.innerHTML = rn(l * distanceScaleInput.value) + ' ' + distanceUnitInput.value; + routeLength.innerHTML = rn(l * distanceScaleInput.value) + " " + distanceUnitInput.value; if (modules.elevation) showEPForRoute(elSelected.node()); } @@ -120,7 +120,7 @@ function editRoute(onClick) { function selectRouteGroup(node) { const group = node.parentNode.id; - const select = document.getElementById('routeGroup'); + const select = document.getElementById("routeGroup"); select.options.length = 0; // remove all options routes.selectAll("g").each(function () { @@ -133,10 +133,10 @@ function editRoute(onClick) { } function toggleNewGroupInput() { - if (routeGroupName.style.display === 'none') { - routeGroupName.style.display = 'inline-block'; + if (routeGroupName.style.display === "none") { + routeGroupName.style.display = "inline-block"; routeGroupName.focus(); - routeGroup.style.display = 'none'; + routeGroup.style.display = "none"; } else { routeGroupName.style.display = "none"; routeGroup.style.display = "inline-block"; @@ -154,17 +154,17 @@ function editRoute(onClick) { .replace(/[^\w\s]/gi, ""); if (document.getElementById(group)) { - tip('Element with this id already exists. Please provide a unique name', false, 'error'); + tip("Element with this id already exists. Please provide a unique name", false, "error"); return; } if (Number.isFinite(+group.charAt(0))) { - tip('Group name should start with a letter', false, 'error'); + tip("Group name should start with a letter", false, "error"); return; } // just rename if only 1 element left const oldGroup = elSelected.node().parentNode; - const basic = ['roads', 'trails', 'searoutes'].includes(oldGroup.id); + const basic = ["roads", "trails", "searoutes"].includes(oldGroup.id); if (!basic && oldGroup.childElementCount === 1) { document.getElementById("routeGroup").selectedOptions[0].remove(); document.getElementById("routeGroup").options.add(new Option(group, group, false, true)); @@ -175,18 +175,18 @@ function editRoute(onClick) { } const newGroup = elSelected.node().parentNode.cloneNode(false); - document.getElementById('routes').appendChild(newGroup); + document.getElementById("routes").appendChild(newGroup); newGroup.id = group; - document.getElementById('routeGroup').options.add(new Option(group, group, false, true)); + document.getElementById("routeGroup").options.add(new Option(group, group, false, true)); document.getElementById(group).appendChild(elSelected.node()); toggleNewGroupInput(); - document.getElementById('routeGroupName').value = ''; + document.getElementById("routeGroupName").value = ""; } function removeRouteGroup() { const group = elSelected.node().parentNode.id; - const basic = ['roads', 'trails', 'searoutes'].includes(group); + const basic = ["roads", "trails", "searoutes"].includes(group); const count = elSelected.node().parentNode.childElementCount; alertMessage.innerHTML = /* html */ `Are you sure you want to remove ${ basic ? "all elements in the group" : "the entire route group" @@ -216,12 +216,12 @@ function editRoute(onClick) { function editGroupStyle() { const g = elSelected.node().parentNode.id; - editStyle('routes', g); + editStyle("routes", g); } function toggleRouteSplitMode() { - document.getElementById('routeNew').classList.remove('pressed'); - this.classList.toggle('pressed'); + document.getElementById("routeNew").classList.remove("pressed"); + this.classList.toggle("pressed"); } function clickControlPoint() { @@ -252,54 +252,34 @@ function editRoute(onClick) { this.remove(); }); - function splitRoute(clicked) { - lineGen.curve(d3.curveCatmullRom.alpha(0.1)); - const group = d3.select(elSelected.node().parentNode); - routeSplit.classList.remove('pressed'); - - const points1 = [], - points2 = []; - let points = points1; - debug - .select('#controlPoints') - .selectAll('circle') - .each(function () { - points.push([this.getAttribute('cx'), this.getAttribute('cy')]); - if (this === clicked) { - points = points2; - points.push([this.getAttribute('cx'), this.getAttribute('cy')]); - } - this.remove(); - }); - - elSelected.attr('d', round(lineGen(points1))); - const id = getNextId('route'); - group.append('path').attr('id', id).attr('d', lineGen(points2)); - debug.select('#controlPoints').selectAll('circle').remove(); + elSelected.attr("d", round(lineGen(points1))); + const id = getNextId("route"); + group.append("path").attr("id", id).attr("d", lineGen(points2)); + debug.select("#controlPoints").selectAll("circle").remove(); drawControlPoints(elSelected.node()); } function toggleRouteCreationMode() { - document.getElementById('routeSplit').classList.remove('pressed'); - document.getElementById('routeNew').classList.toggle('pressed'); - if (document.getElementById('routeNew').classList.contains('pressed')) { - tip('Click on map to add control points', true); - viewbox.on('click', addPointOnClick).style('cursor', 'crosshair'); - elSelected.on('click', null); + document.getElementById("routeSplit").classList.remove("pressed"); + document.getElementById("routeNew").classList.toggle("pressed"); + if (document.getElementById("routeNew").classList.contains("pressed")) { + tip("Click on map to add control points", true); + viewbox.on("click", addPointOnClick).style("cursor", "crosshair"); + elSelected.on("click", null); } else { clearMainTip(); - viewbox.on('click', clicked).style('cursor', 'default'); - elSelected.on('click', addInterimControlPoint).attr('data-new', null); + viewbox.on("click", clicked).style("cursor", "default"); + elSelected.on("click", addInterimControlPoint).attr("data-new", null); } } function addPointOnClick() { // create new route - if (!elSelected.attr('data-new')) { - debug.select('#controlPoints').selectAll('circle').remove(); + if (!elSelected.attr("data-new")) { + debug.select("#controlPoints").selectAll("circle").remove(); const parent = elSelected.node().parentNode; - const id = getNextId('route'); - elSelected = d3.select(parent).append('path').attr('id', id).attr('data-new', 1); + const id = getNextId("route"); + elSelected = d3.select(parent).append("path").attr("id", id).attr("data-new", 1); } addControlPoint(d3.mouse(this)); @@ -307,7 +287,7 @@ function editRoute(onClick) { } function editRouteLegend() { - const id = elSelected.attr('id'); + const id = elSelected.attr("id"); editNotes(id, id); } @@ -330,12 +310,11 @@ function editRoute(onClick) { } function closeRoutesEditor() { - elSelected.attr('data-new', null).on('click', null); + elSelected.attr("data-new", null).on("click", null); clearMainTip(); - routeSplit.classList.remove('pressed'); - routeNew.classList.remove('pressed'); - debug.select('#controlPoints').remove(); + routeSplit.classList.remove("pressed"); + routeNew.classList.remove("pressed"); + debug.select("#controlPoints").remove(); unselect(); } } -} \ No newline at end of file diff --git a/modules/ui/style.js b/modules/ui/style.js index 5b8d2c1e..9e5744d7 100644 --- a/modules/ui/style.js +++ b/modules/ui/style.js @@ -1,16 +1,16 @@ // UI module to control the style -'use strict'; +"use strict"; // add available filters to lists { const filters = Array.from(document.getElementById("filters").querySelectorAll("filter")); const emptyOption = ''; - const options = filters.map((filter) => { - const id = filter.getAttribute('id'); - const name = filter.getAttribute('name'); + const options = filters.map(filter => { + const id = filter.getAttribute("id"); + const name = filter.getAttribute("name"); return ``; }); - const allOptions = emptyOption + options.join(''); + const allOptions = emptyOption + options.join(""); document.getElementById("styleFilterInput").innerHTML = allOptions; document.getElementById("styleStatesBodyFilter").innerHTML = allOptions; @@ -29,49 +29,49 @@ function editStyle(element, group) { if (group) styleGroupSelect.options.add(new Option(group, group, true, true)); selectStyleElement(); - styleElementSelect.classList.add('glow'); - if (group) styleGroupSelect.classList.add('glow'); + styleElementSelect.classList.add("glow"); + if (group) styleGroupSelect.classList.add("glow"); setTimeout(() => { - styleElementSelect.classList.remove('glow'); - if (group) styleGroupSelect.classList.remove('glow'); + styleElementSelect.classList.remove("glow"); + if (group) styleGroupSelect.classList.remove("glow"); }, 1500); } // Toggle style sections on element select -styleElementSelect.addEventListener('change', selectStyleElement); +styleElementSelect.addEventListener("change", selectStyleElement); function selectStyleElement() { const sel = styleElementSelect.value; let el = d3.select("#" + sel); - styleElements.querySelectorAll('tbody').forEach((e) => (e.style.display = 'none')); // hide all sections + styleElements.querySelectorAll("tbody").forEach(e => (e.style.display = "none")); // hide all sections // show alert line if layer is not visible - const isLayerOff = sel !== 'ocean' && (el.style('display') === 'none' || !el.selectAll('*').size()); - styleIsOff.style.display = isLayerOff ? 'block' : 'none'; + const isLayerOff = sel !== "ocean" && (el.style("display") === "none" || !el.selectAll("*").size()); + styleIsOff.style.display = isLayerOff ? "block" : "none"; // active group element const group = styleGroupSelect.value; - if (['routes', 'labels', 'coastline', 'lakes', 'anchors', 'burgIcons', 'borders'].includes(sel)) { - const gEl = group && el.select('#' + group); - el = group && gEl.size() ? gEl : el.select('g'); + if (["routes", "labels", "coastline", "lakes", "anchors", "burgIcons", "borders"].includes(sel)) { + const gEl = group && el.select("#" + group); + el = group && gEl.size() ? gEl : el.select("g"); } // opacity - if (!['landmass', 'ocean', 'regions', 'legend'].includes(sel)) { - styleOpacity.style.display = 'block'; - styleOpacityInput.value = styleOpacityOutput.value = el.attr('opacity') || 1; + if (!["landmass", "ocean", "regions", "legend"].includes(sel)) { + styleOpacity.style.display = "block"; + styleOpacityInput.value = styleOpacityOutput.value = el.attr("opacity") || 1; } // filter - if (!['landmass', 'legend', 'regions'].includes(sel)) { - styleFilter.style.display = 'block'; - styleFilterInput.value = el.attr('filter') || ''; + if (!["landmass", "legend", "regions"].includes(sel)) { + styleFilter.style.display = "block"; + styleFilterInput.value = el.attr("filter") || ""; } // fill - if (['rivers', 'lakes', 'landmass', 'prec', 'ice', 'fogging'].includes(sel)) { - styleFill.style.display = 'block'; - styleFillInput.value = styleFillOutput.value = el.attr('fill'); + if (["rivers", "lakes", "landmass", "prec", "ice", "fogging"].includes(sel)) { + styleFill.style.display = "block"; + styleFillInput.value = styleFillOutput.value = el.attr("fill"); } // stroke color and width @@ -87,74 +87,74 @@ function selectStyleElement() { } // stroke dash - if (['routes', 'borders', 'temperature', 'legend', 'population', 'coordinates', 'zones', 'gridOverlay'].includes(sel)) { - styleStrokeDash.style.display = 'block'; - styleStrokeDasharrayInput.value = el.attr('stroke-dasharray') || ''; - styleStrokeLinecapInput.value = el.attr('stroke-linecap') || 'inherit'; + if (["routes", "borders", "temperature", "legend", "population", "coordinates", "zones", "gridOverlay"].includes(sel)) { + styleStrokeDash.style.display = "block"; + styleStrokeDasharrayInput.value = el.attr("stroke-dasharray") || ""; + styleStrokeLinecapInput.value = el.attr("stroke-linecap") || "inherit"; } // clipping - if (['cells', 'gridOverlay', 'coordinates', 'compass', 'terrain', 'temperature', 'routes', 'texture', 'biomes', 'zones'].includes(sel)) { - styleClipping.style.display = 'block'; - styleClippingInput.value = el.attr('mask') || ''; + if (["cells", "gridOverlay", "coordinates", "compass", "terrain", "temperature", "routes", "texture", "biomes", "zones"].includes(sel)) { + styleClipping.style.display = "block"; + styleClippingInput.value = el.attr("mask") || ""; } // show specific sections - if (sel === 'texture') styleTexture.style.display = 'block'; + if (sel === "texture") styleTexture.style.display = "block"; - if (sel === 'terrs') { - styleHeightmap.style.display = 'block'; - styleHeightmapScheme.value = terrs.attr('scheme'); - styleHeightmapTerracingInput.value = styleHeightmapTerracingOutput.value = terrs.attr('terracing'); - styleHeightmapSkipInput.value = styleHeightmapSkipOutput.value = terrs.attr('skip'); - styleHeightmapSimplificationInput.value = styleHeightmapSimplificationOutput.value = terrs.attr('relax'); - styleHeightmapCurve.value = terrs.attr('curve'); + if (sel === "terrs") { + styleHeightmap.style.display = "block"; + styleHeightmapScheme.value = terrs.attr("scheme"); + styleHeightmapTerracingInput.value = styleHeightmapTerracingOutput.value = terrs.attr("terracing"); + styleHeightmapSkipInput.value = styleHeightmapSkipOutput.value = terrs.attr("skip"); + styleHeightmapSimplificationInput.value = styleHeightmapSimplificationOutput.value = terrs.attr("relax"); + styleHeightmapCurve.value = terrs.attr("curve"); } - if (sel === 'markers') { - styleMarkers.style.display = 'block'; - styleRescaleMarkers.checked = +markers.attr('rescale'); + if (sel === "markers") { + styleMarkers.style.display = "block"; + styleRescaleMarkers.checked = +markers.attr("rescale"); } - if (sel === 'gridOverlay') { - styleGrid.style.display = 'block'; - styleGridType.value = el.attr('type'); - styleGridScale.value = el.attr('scale') || 1; - styleGridShiftX.value = el.attr('dx') || 0; - styleGridShiftY.value = el.attr('dy') || 0; + if (sel === "gridOverlay") { + styleGrid.style.display = "block"; + styleGridType.value = el.attr("type"); + styleGridScale.value = el.attr("scale") || 1; + styleGridShiftX.value = el.attr("dx") || 0; + styleGridShiftY.value = el.attr("dy") || 0; calculateFriendlyGridSize(); } - if (sel === 'compass') { - styleCompass.style.display = 'block'; - const tr = parseTransform(compass.select('use').attr('transform')); + if (sel === "compass") { + styleCompass.style.display = "block"; + const tr = parseTransform(compass.select("use").attr("transform")); styleCompassShiftX.value = tr[0]; styleCompassShiftY.value = tr[1]; styleCompassSizeInput.value = styleCompassSizeOutput.value = tr[2]; } - if (sel === 'terrain') { - styleRelief.style.display = 'block'; - styleReliefSizeOutput.innerHTML = styleReliefSizeInput.value = terrain.attr('size'); - styleReliefDensityOutput.innerHTML = styleReliefDensityInput.value = terrain.attr('density'); - styleReliefSet.value = terrain.attr('set'); + if (sel === "terrain") { + styleRelief.style.display = "block"; + styleReliefSizeOutput.innerHTML = styleReliefSizeInput.value = terrain.attr("size"); + styleReliefDensityOutput.innerHTML = styleReliefDensityInput.value = terrain.attr("density"); + styleReliefSet.value = terrain.attr("set"); } - if (sel === 'population') { - stylePopulation.style.display = 'block'; - stylePopulationRuralStrokeInput.value = stylePopulationRuralStrokeOutput.value = population.select('#rural').attr('stroke'); - stylePopulationUrbanStrokeInput.value = stylePopulationUrbanStrokeOutput.value = population.select('#urban').attr('stroke'); - styleStrokeWidth.style.display = 'block'; - styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr('stroke-width') || ''; + if (sel === "population") { + stylePopulation.style.display = "block"; + stylePopulationRuralStrokeInput.value = stylePopulationRuralStrokeOutput.value = population.select("#rural").attr("stroke"); + stylePopulationUrbanStrokeInput.value = stylePopulationUrbanStrokeOutput.value = population.select("#urban").attr("stroke"); + styleStrokeWidth.style.display = "block"; + styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || ""; } - if (sel === 'regions') { - styleStates.style.display = 'block'; - styleStatesBodyOpacity.value = styleStatesBodyOpacityOutput.value = statesBody.attr('opacity') || 1; - styleStatesBodyFilter.value = statesBody.attr('filter') || ''; - styleStatesHaloWidth.value = styleStatesHaloWidthOutput.value = statesHalo.attr('data-width') || 10; - styleStatesHaloOpacity.value = styleStatesHaloOpacityOutput.value = statesHalo.attr('opacity') || 1; - const blur = parseFloat(statesHalo.attr('filter')?.match(/blur\(([^)]+)\)/)?.[1]) || 0; + if (sel === "regions") { + styleStates.style.display = "block"; + styleStatesBodyOpacity.value = styleStatesBodyOpacityOutput.value = statesBody.attr("opacity") || 1; + styleStatesBodyFilter.value = statesBody.attr("filter") || ""; + styleStatesHaloWidth.value = styleStatesHaloWidthOutput.value = statesHalo.attr("data-width") || 10; + styleStatesHaloOpacity.value = styleStatesHaloOpacityOutput.value = statesHalo.attr("opacity") || 1; + const blur = parseFloat(statesHalo.attr("filter")?.match(/blur\(([^)]+)\)/)?.[1]) || 0; styleStatesHaloBlur.value = styleStatesHaloBlurOutput.value = blur; } @@ -216,10 +216,10 @@ function selectStyleElement() { styleStrokeWidth.style.display = "block"; styleSize.style.display = "block"; - styleLegend.style.display = 'block'; - styleLegendColItemsOutput.value = styleLegendColItems.value = el.attr('data-columns'); - styleLegendBackOutput.value = styleLegendBack.value = el.select('#legendBox').attr('fill'); - styleLegendOpacityOutput.value = styleLegendOpacity.value = el.select('#legendBox').attr('fill-opacity'); + styleLegend.style.display = "block"; + styleLegendColItemsOutput.value = styleLegendColItems.value = el.attr("data-columns"); + styleLegendBackOutput.value = styleLegendBack.value = el.select("#legendBox").attr("fill"); + styleLegendOpacityOutput.value = styleLegendOpacity.value = el.select("#legendBox").attr("fill-opacity"); styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke") || "#111111"; styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || 0.5; @@ -246,28 +246,21 @@ function selectStyleElement() { styleTemperatureFontSizeInput.value = styleTemperatureFontSizeOutput.value = el.attr("font-size") || "8px"; } - if (sel === 'coordinates') { - styleSize.style.display = 'block'; - styleFontSize.value = el.attr('data-size'); + if (sel === "coordinates") { + styleSize.style.display = "block"; + styleFontSize.value = el.attr("data-size"); } - if (sel === 'armies') { - styleArmies.style.display = 'block'; - styleArmiesFillOpacity.value = styleArmiesFillOpacityOutput.value = el.attr('fill-opacity'); - styleArmiesSize.value = styleArmiesSizeOutput.value = el.attr('box-size'); + if (sel === "armies") { + styleArmies.style.display = "block"; + styleArmiesFillOpacity.value = styleArmiesFillOpacityOutput.value = el.attr("fill-opacity"); + styleArmiesSize.value = styleArmiesSizeOutput.value = el.attr("box-size"); } - if (sel === 'emblems') { - styleEmblems.style.display = 'block'; - styleStrokeWidth.style.display = 'block'; - styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr('stroke-width') || 1; - } - - if (sel === 'goods') { - styleStrokeWidth.style.display = 'block'; - styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr('stroke-width') || ''; - styleResources.style.display = 'block'; - styleResourcesCircle.checked = +el.attr('data-circle'); + if (sel === "emblems") { + styleEmblems.style.display = "block"; + styleStrokeWidth.style.display = "block"; + styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || 1; } if (sel === 'goods') { @@ -279,18 +272,18 @@ function selectStyleElement() { // update group options styleGroupSelect.options.length = 0; // remove all options - if (['routes', 'labels', 'coastline', 'lakes', 'anchors', 'burgIcons', 'borders'].includes(sel)) { - const groups = document.getElementById(sel).querySelectorAll('g'); - groups.forEach((el) => { - if (el.id === 'burgLabels') return; + if (["routes", "labels", "coastline", "lakes", "anchors", "burgIcons", "borders"].includes(sel)) { + const groups = document.getElementById(sel).querySelectorAll("g"); + groups.forEach(el => { + if (el.id === "burgLabels") return; const option = new Option(`${el.id} (${el.childElementCount})`, el.id, false, false); styleGroupSelect.options.add(option); }); - styleGroupSelect.value = el.attr('id'); - styleGroup.style.display = 'block'; + styleGroupSelect.value = el.attr("id"); + styleGroup.style.display = "block"; } else { styleGroupSelect.options.add(new Option(sel, sel, false, true)); - styleGroup.style.display = 'none'; + styleGroup.style.display = "none"; } if (sel === "coastline" && styleGroupSelect.value === "sea_island") { @@ -301,7 +294,7 @@ function selectStyleElement() { } // Handle style inputs change -styleGroupSelect.addEventListener('change', selectStyleElement); +styleGroupSelect.addEventListener("change", selectStyleElement); function getEl() { const el = styleElementSelect.value; @@ -342,9 +335,9 @@ styleOpacityInput.addEventListener("input", function () { getEl().attr("opacity", this.value); }); -styleFilterInput.addEventListener('change', function () { - if (styleGroupSelect.value === 'ocean') return oceanLayers.attr('filter', this.value); - getEl().attr('filter', this.value); +styleFilterInput.addEventListener("change", function () { + if (styleGroupSelect.value === "ocean") return oceanLayers.attr("filter", this.value); + getEl().attr("filter", this.value); }); styleTextureInput.addEventListener("change", function () { @@ -398,13 +391,13 @@ styleGridShiftY.addEventListener("input", function () { if (layerIsOn("toggleGrid")) drawGrid(); }); -styleShiftX.addEventListener('input', shiftElement); -styleShiftY.addEventListener('input', shiftElement); +styleShiftX.addEventListener("input", shiftElement); +styleShiftY.addEventListener("input", shiftElement); function shiftElement() { const x = styleShiftX.value || 0; const y = styleShiftY.value || 0; - getEl().attr('transform', `translate(${x},${y})`); + getEl().attr("transform", `translate(${x},${y})`); } styleRescaleMarkers.addEventListener("change", function () { @@ -466,21 +459,21 @@ styleHeightmapCurve.addEventListener("change", function () { styleReliefSet.addEventListener("change", function () { terrain.attr("set", this.value); ReliefIcons(); - if (!layerIsOn('toggleRelief')) toggleRelief(); + if (!layerIsOn("toggleRelief")) toggleRelief(); }); -styleReliefSizeInput.addEventListener('change', function () { - terrain.attr('size', this.value); +styleReliefSizeInput.addEventListener("change", function () { + terrain.attr("size", this.value); styleReliefSizeOutput.value = this.value; ReliefIcons(); - if (!layerIsOn('toggleRelief')) toggleRelief(); + if (!layerIsOn("toggleRelief")) toggleRelief(); }); -styleReliefDensityInput.addEventListener('change', function () { - terrain.attr('density', this.value); +styleReliefDensityInput.addEventListener("change", function () { + terrain.attr("density", this.value); styleReliefDensityOutput.value = this.value; ReliefIcons(); - if (!layerIsOn('toggleRelief')) toggleRelief(); + if (!layerIsOn("toggleRelief")) toggleRelief(); }); styleTemperatureFillOpacityInput.addEventListener("input", function () { @@ -513,31 +506,31 @@ styleCompassSizeInput.addEventListener("input", function () { shiftCompass(); }); -styleCompassShiftX.addEventListener('input', shiftCompass); -styleCompassShiftY.addEventListener('input', shiftCompass); +styleCompassShiftX.addEventListener("input", shiftCompass); +styleCompassShiftY.addEventListener("input", shiftCompass); function shiftCompass() { const tr = `translate(${styleCompassShiftX.value} ${styleCompassShiftY.value}) scale(${styleCompassSizeInput.value})`; - compass.select('use').attr('transform', tr); + compass.select("use").attr("transform", tr); } styleLegendColItems.addEventListener("input", function () { styleLegendColItemsOutput.value = this.value; - legend.select('#legendBox').attr('data-columns', this.value); + legend.select("#legendBox").attr("data-columns", this.value); redrawLegend(); }); styleLegendBack.addEventListener("input", function () { styleLegendBackOutput.value = this.value; - legend.select('#legendBox').attr('fill', this.value); + legend.select("#legendBox").attr("fill", this.value); }); styleLegendOpacity.addEventListener("input", function () { styleLegendOpacityOutput.value = this.value; - legend.select('#legendBox').attr('fill-opacity', this.value); + legend.select("#legendBox").attr("fill-opacity", this.value); }); -styleSelectFont.addEventListener('change', changeFont); +styleSelectFont.addEventListener("change", changeFont); function changeFont() { const family = styleSelectFont.value; getEl().attr("font-family", family); @@ -604,10 +597,10 @@ styleFontMinus.addEventListener("click", function () { function changeFontSize(el, size) { styleFontSize.value = size; - const getSizeOnScale = (element) => { + const getSizeOnScale = element => { // some labels are rescaled on zoom - if (element === 'labels') return Math.max(rn((size + size / scale) / 2, 2), 1); - if (element === 'coordinates') return rn(size / scale ** 0.8, 2); + if (element === "labels") return Math.max(rn((size + size / scale) / 2, 2), 1); + if (element === "coordinates") return rn(size / scale ** 0.8, 2); // other has the same size return size; @@ -616,7 +609,7 @@ function changeFontSize(el, size) { const scaleSize = getSizeOnScale(styleElementSelect.value); el.attr("data-size", size).attr("font-size", scaleSize); - if (styleElementSelect.value === 'legend') redrawLegend(); + if (styleElementSelect.value === "legend") redrawLegend(); } styleRadiusInput.addEventListener("change", function () { @@ -684,59 +677,53 @@ function changeIconSize(size, group) { styleIconSizeInput.value = size; } -styleStatesBodyOpacity.addEventListener('input', function () { +styleStatesBodyOpacity.addEventListener("input", function () { styleStatesBodyOpacityOutput.value = this.value; - statesBody.attr('opacity', this.value); + statesBody.attr("opacity", this.value); }); -styleStatesBodyFilter.addEventListener('change', function () { - statesBody.attr('filter', this.value); +styleStatesBodyFilter.addEventListener("change", function () { + statesBody.attr("filter", this.value); }); -styleStatesHaloWidth.addEventListener('input', function () { +styleStatesHaloWidth.addEventListener("input", function () { styleStatesHaloWidthOutput.value = this.value; - statesHalo.attr('data-width', this.value).attr('stroke-width', this.value); + statesHalo.attr("data-width", this.value).attr("stroke-width", this.value); }); styleStatesHaloOpacity.addEventListener("input", function () { styleStatesHaloOpacityOutput.value = this.value; - statesHalo.attr('opacity', this.value); + statesHalo.attr("opacity", this.value); }); -styleStatesHaloBlur.addEventListener('input', function () { +styleStatesHaloBlur.addEventListener("input", function () { styleStatesHaloBlurOutput.value = this.value; const blur = +this.value > 0 ? `blur(${this.value}px)` : null; - statesHalo.attr('filter', blur); + statesHalo.attr("filter", blur); }); -styleArmiesFillOpacity.addEventListener('input', function () { - armies.attr('fill-opacity', this.value); +styleArmiesFillOpacity.addEventListener("input", function () { + armies.attr("fill-opacity", this.value); styleArmiesFillOpacityOutput.value = this.value; }); styleArmiesSize.addEventListener("input", function () { armies.attr("box-size", this.value).attr("font-size", this.value * 2); styleArmiesSizeOutput.value = this.value; - armies.selectAll('g').remove(); // clear armies layer - pack.states.forEach((s) => { + armies.selectAll("g").remove(); // clear armies layer + pack.states.forEach(s => { if (!s.i || s.removed || !s.military.length) return; Military.drawRegiments(s.military, s.i); }); }); -emblemsStateSizeInput.addEventListener('change', drawEmblems); -emblemsProvinceSizeInput.addEventListener('change', drawEmblems); -emblemsBurgSizeInput.addEventListener('change', drawEmblems); +emblemsStateSizeInput.addEventListener("change", drawEmblems); +emblemsProvinceSizeInput.addEventListener("change", drawEmblems); +emblemsBurgSizeInput.addEventListener("change", drawEmblems); -styleResourcesCircle.addEventListener('change', function () { - goods.attr('data-circle', +this.checked); - goods.selectAll('*').remove(); - drawResources(); -}); - -styleResourcesCircle.addEventListener('change', function () { - goods.attr('data-circle', +this.checked); - goods.selectAll('*').remove(); +styleResourcesCircle.addEventListener("change", function () { + goods.attr("data-circle", +this.checked); + goods.selectAll("*").remove(); drawResources(); }); @@ -761,9 +748,9 @@ function textureProvideURL() { opt.text = name.slice(0, 20); styleTextureInput.add(opt); styleTextureInput.value = textureURL.value; - getBase64(textureURL.value, (base64) => texture.select('image').attr('xlink:href', base64)); + getBase64(textureURL.value, base64 => texture.select("image").attr("xlink:href", base64)); zoom.scaleBy(svg, 1.00001); // enforce browser re-draw - $(this).dialog('close'); + $(this).dialog("close"); }, Cancel: function () { $(this).dialog("close"); @@ -773,11 +760,11 @@ function textureProvideURL() { } function fetchTextureURL(url) { - INFO && console.log('Provided URL is', url); + INFO && console.log("Provided URL is", url); const img = new Image(); img.onload = function () { - const canvas = document.getElementById('texturePreview'); - const ctx = canvas.getContext('2d'); + const canvas = document.getElementById("texturePreview"); + const ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0, canvas.width, canvas.height); }; @@ -818,22 +805,22 @@ function updateElements() { }); // redraw elements - if (layerIsOn('toggleHeight')) drawHeightmap(); - if (legend.selectAll('*').size() && window.redrawLegend) redrawLegend(); - oceanLayers.selectAll('path').remove(); + if (layerIsOn("toggleHeight")) drawHeightmap(); + if (legend.selectAll("*").size() && window.redrawLegend) redrawLegend(); + oceanLayers.selectAll("path").remove(); OceanLayers(); invokeActiveZooming(); } // GLOBAL FILTERS -mapFilters.addEventListener('click', applyMapFilter); +mapFilters.addEventListener("click", applyMapFilter); function applyMapFilter(event) { - if (event.target.tagName !== 'BUTTON') return; + if (event.target.tagName !== "BUTTON") return; const button = event.target; - svg.attr('data-filter', null).attr('filter', null); - if (button.classList.contains('pressed')) return button.classList.remove('pressed'); + svg.attr("data-filter", null).attr("filter", null); + if (button.classList.contains("pressed")) return button.classList.remove("pressed"); - mapFilters.querySelectorAll('.pressed').forEach((button) => button.classList.remove('pressed')); - button.classList.add('pressed'); - svg.attr('data-filter', button.id).attr('filter', 'url(#filter-' + button.id + ')'); + mapFilters.querySelectorAll(".pressed").forEach(button => button.classList.remove("pressed")); + button.classList.add("pressed"); + svg.attr("data-filter", button.id).attr("filter", "url(#filter-" + button.id + ")"); } diff --git a/modules/ui/tools.js b/modules/ui/tools.js index 54caec75..d2f5a5e5 100644 --- a/modules/ui/tools.js +++ b/modules/ui/tools.js @@ -1,36 +1,36 @@ +"use strict"; // module to control the Tools options (click to edit, to re-geenerate, tp add) -'use strict'; toolsContent.addEventListener("click", function (event) { if (customization) return tip("Please exit the customization mode first", false, "warning"); if (!["BUTTON", "I"].includes(event.target.tagName)) return; const button = event.target.id; - // Click to open Editor buttons - if (button === 'editHeightmapButton') editHeightmap(); - else if (button === 'editBiomesButton') editBiomes(); - else if (button === 'editStatesButton') editStates(); - else if (button === 'editProvincesButton') editProvinces(); - else if (button === 'editDiplomacyButton') editDiplomacy(); - else if (button === 'editCulturesButton') editCultures(); - else if (button === 'editReligions') editReligions(); + // click on open Editor buttons + if (button === "editHeightmapButton") editHeightmap(); + else if (button === "editBiomesButton") editBiomes(); + else if (button === "editStatesButton") editStates(); + else if (button === "editProvincesButton") editProvinces(); + else if (button === "editDiplomacyButton") editDiplomacy(); + else if (button === "editCulturesButton") editCultures(); + else if (button === "editReligions") editReligions(); else if (button === 'editResources') editResources(); - else if (button === 'editEmblemButton') openEmblemEditor(); - else if (button === 'editNamesBaseButton') editNamesbase(); - else if (button === 'editUnitsButton') editUnits(); - else if (button === 'editNotesButton') editNotes(); - else if (button === 'editZonesButton') editZones(); - else if (button === 'overviewBurgsButton') overviewBurgs(); - else if (button === 'overviewRiversButton') overviewRivers(); - else if (button === 'overviewMilitaryButton') overviewMilitary(); - else if (button === 'overviewCellsButton') viewCellDetails(); + else if (button === "editEmblemButton") openEmblemEditor(); + else if (button === "editNamesBaseButton") editNamesbase(); + else if (button === "editUnitsButton") editUnits(); + else if (button === "editNotesButton") editNotes(); + else if (button === "editZonesButton") editZones(); + else if (button === "overviewChartsButton") overviewCharts(); + else if (button === "overviewBurgsButton") overviewBurgs(); + else if (button === "overviewRiversButton") overviewRivers(); + else if (button === "overviewMilitaryButton") overviewMilitary(); + else if (button === "overviewMarkersButton") overviewMarkers(); + else if (button === "overviewCellsButton") viewCellDetails(); - // Click to Regenerate buttons - if (event.target.parentNode.id === 'regenerateFeature') { - if (sessionStorage.getItem('regenerateFeatureDontAsk')) { - processFeatureRegeneration(event, button); - return; - } + // click on Regenerate buttons + if (event.target.parentNode.id === "regenerateFeature") { + const dontAsk = sessionStorage.getItem("regenerateFeatureDontAsk"); + if (dontAsk) return processFeatureRegeneration(event, button); alertMessage.innerHTML = /* html */ `Regeneration will remove all the custom changes for the element.

Are you sure you want to proceed?`; $("#alert").dialog({ @@ -59,12 +59,18 @@ toolsContent.addEventListener("click", function (event) { }); } - // Click to Add buttons - if (button === 'addLabel') toggleAddLabel(); - else if (button === 'addBurgTool') toggleAddBurg(); - else if (button === 'addRiver') toggleAddRiver(); - else if (button === 'addRoute') toggleAddRoute(); - else if (button === 'addMarker') toggleAddMarker(); + // click on Configure regenerate buttons + if (button === "configRegenerateMarkers") configMarkersGeneration(); + + // click on Add buttons + if (button === "addLabel") toggleAddLabel(); + else if (button === "addBurgTool") toggleAddBurg(); + else if (button === "addRiver") toggleAddRiver(); + else if (button === "addRoute") toggleAddRoute(); + else if (button === "addMarker") toggleAddMarker(); + // click to create a new map buttons + else if (button === "openSubmapMenu") UISubmap.openSubmapMenu(); + else if (button === "openResampleMenu") UISubmap.openResampleMenu(); }); function processFeatureRegeneration(event, button) { @@ -76,20 +82,20 @@ function processFeatureRegeneration(event, button) { if (!layerIsOn("toggleRelief")) toggleRelief(); } else if (button === "regenerateRoutes") { Routes.regenerate(); - if (!layerIsOn('toggleRoutes')) toggleRoutes(); - } else if (button === 'regenerateRivers') regenerateRivers(); - else if (button === 'regeneratePopulation') recalculatePopulation(); - else if (button === 'regenerateStates') regenerateStates(); - else if (button === 'regenerateProvinces') regenerateProvinces(); - else if (button === 'regenerateBurgs') regenerateBurgs(); + if (!layerIsOn("toggleRoutes")) toggleRoutes(); + } else if (button === "regenerateRivers") regenerateRivers(); + else if (button === "regeneratePopulation") recalculatePopulation(); + else if (button === "regenerateStates") regenerateStates(); + else if (button === "regenerateProvinces") regenerateProvinces(); + else if (button === "regenerateBurgs") regenerateBurgs(); else if (button === 'regenerateResources') regenerateResources(); - else if (button === 'regenerateEmblems') regenerateEmblems(); - else if (button === 'regenerateReligions') regenerateReligions(); - else if (button === 'regenerateCultures') regenerateCultures(); - else if (button === 'regenerateMilitary') regenerateMilitary(); - else if (button === 'regenerateIce') regenerateIce(); - else if (button === 'regenerateMarkers') regenerateMarkers(event); - else if (button === 'regenerateZones') regenerateZones(event); + else if (button === "regenerateEmblems") regenerateEmblems(); + else if (button === "regenerateReligions") regenerateReligions(); + else if (button === "regenerateCultures") regenerateCultures(); + else if (button === "regenerateMilitary") regenerateMilitary(); + else if (button === "regenerateIce") regenerateIce(); + else if (button === "regenerateMarkers") regenerateMarkers(); + else if (button === "regenerateZones") regenerateZones(event); } async function openEmblemEditor() { @@ -430,23 +436,11 @@ function regenerateIce() { drawIce(); } -function regenerateMarkers(event) { - if (isCtrlClick(event)) prompt("Please provide markers number multiplier", {default: 1, step: 0.01, min: 0, max: 100}, v => addNumberOfMarkers(v)); - else addNumberOfMarkers(); - - function addNumberOfMarkers(multiplier) { - pack.markers = pack.markers.filter(marker => { - if (marker.lock) return true; - document.getElementById(`marker${marker.i}`)?.remove(); - const index = notes.findIndex(note => note.id === marker.id); - if (index != -1) notes.splice(index, 1); - return false; - }); - - Markers.regenerate(multiplier); - turnButtonOn("toggleMarkers"); - drawMarkers(); - } +function regenerateMarkers() { + Markers.regenerate(); + turnButtonOn("toggleMarkers"); + drawMarkers(); + if (document.getElementById("markersOverviewRefresh").offsetParent) markersOverviewRefresh.click(); } function regenerateZones(event) { diff --git a/modules/ui/units-editor.js b/modules/ui/units-editor.js index e7ecb959..37645978 100644 --- a/modules/ui/units-editor.js +++ b/modules/ui/units-editor.js @@ -1,14 +1,14 @@ -'use strict'; +"use strict"; function editUnits() { - closeDialogs('#unitsEditor, .stable'); - $('#unitsEditor').dialog(); + closeDialogs("#unitsEditor, .stable"); + $("#unitsEditor").dialog(); if (modules.editUnits) return; modules.editUnits = true; - $('#unitsEditor').dialog({ - title: 'Units Editor', - position: {my: 'right top', at: 'right-10 top+10', of: 'svg', collision: 'fit'} + $("#unitsEditor").dialog({ + title: "Units Editor", + position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"} }); const drawBar = () => drawScaleBar(scale); @@ -36,12 +36,12 @@ function editUnits() { document.getElementById("urbanDensityOutput").addEventListener("input", changeUrbanDensity); document.getElementById("urbanDensityInput").addEventListener("change", changeUrbanDensity); - document.getElementById('addLinearRuler').addEventListener('click', addRuler); - document.getElementById('addOpisometer').addEventListener('click', toggleOpisometerMode); - document.getElementById('addRouteOpisometer').addEventListener('click', toggleRouteOpisometerMode); - document.getElementById('addPlanimeter').addEventListener('click', togglePlanimeterMode); - document.getElementById('removeRulers').addEventListener('click', removeAllRulers); - document.getElementById('unitsRestore').addEventListener('click', restoreDefaultUnits); + document.getElementById("addLinearRuler").addEventListener("click", addRuler); + document.getElementById("addOpisometer").addEventListener("click", toggleOpisometerMode); + document.getElementById("addRouteOpisometer").addEventListener("click", toggleRouteOpisometerMode); + document.getElementById("addPlanimeter").addEventListener("click", togglePlanimeterMode); + document.getElementById("removeRulers").addEventListener("click", removeAllRulers); + document.getElementById("unitsRestore").addEventListener("click", restoreDefaultUnits); function changeDistanceUnit() { if (this.value === "custom_name") { @@ -109,21 +109,21 @@ function editUnits() { unlock("distanceScale"); // units - const US = navigator.language === 'en-US'; - const UK = navigator.language === 'en-GB'; - distanceUnitInput.value = US || UK ? 'mi' : 'km'; - heightUnit.value = US || UK ? 'ft' : 'm'; - temperatureScale.value = US ? '°F' : '°C'; - areaUnit.value = 'square'; - localStorage.removeItem('distanceUnit'); - localStorage.removeItem('heightUnit'); - localStorage.removeItem('temperatureScale'); - localStorage.removeItem('areaUnit'); + const US = navigator.language === "en-US"; + const UK = navigator.language === "en-GB"; + distanceUnitInput.value = US || UK ? "mi" : "km"; + heightUnit.value = US || UK ? "ft" : "m"; + temperatureScale.value = US ? "°F" : "°C"; + areaUnit.value = "square"; + localStorage.removeItem("distanceUnit"); + localStorage.removeItem("heightUnit"); + localStorage.removeItem("temperatureScale"); + localStorage.removeItem("areaUnit"); calculateFriendlyGridSize(); // height exponent heightExponentInput.value = heightExponentOutput.value = 1.8; - localStorage.removeItem('heightExponent'); + localStorage.removeItem("heightExponent"); calculateTemperatures(); // scale bar @@ -163,10 +163,10 @@ function editUnits() { } function toggleOpisometerMode() { - if (this.classList.contains('pressed')) { + if (this.classList.contains("pressed")) { restoreDefaultEvents(); clearMainTip(); - this.classList.remove('pressed'); + this.classList.remove("pressed"); } else { if (!layerIsOn("toggleRulers")) toggleRulers(); tip("Draw a curve to measure length. Hold Shift to disallow path optimization", true); @@ -195,10 +195,10 @@ function editUnits() { } function toggleRouteOpisometerMode() { - if (this.classList.contains('pressed')) { + if (this.classList.contains("pressed")) { restoreDefaultEvents(); clearMainTip(); - this.classList.remove('pressed'); + this.classList.remove("pressed"); } else { if (!layerIsOn("toggleRulers")) toggleRulers(); tip("Draw a curve along routes to measure length. Hold Shift to measure away from roads.", true); @@ -244,10 +244,10 @@ function editUnits() { } function togglePlanimeterMode() { - if (this.classList.contains('pressed')) { + if (this.classList.contains("pressed")) { restoreDefaultEvents(); clearMainTip(); - this.classList.remove('pressed'); + this.classList.remove("pressed"); } else { if (!layerIsOn("toggleRulers")) toggleRulers(); tip("Draw a curve to measure its area. Hold Shift to disallow path optimization", true); diff --git a/modules/ui/zones-editor.js b/modules/ui/zones-editor.js index 8476123e..759447dd 100644 --- a/modules/ui/zones-editor.js +++ b/modules/ui/zones-editor.js @@ -127,8 +127,6 @@ function editZones() { $("#zonesEditor").dialog({width: fitContent()}); } - function filterZonesByType() {} - function zoneHighlightOn(event) { const zone = event.target.dataset.id; zones.select("#" + zone).style("outline", "1px solid red");