From 5bbca406116650a183896ffd7c8dd7381956f03a Mon Sep 17 00:00:00 2001 From: Azgaar Date: Thu, 26 Aug 2021 19:09:38 +0300 Subject: [PATCH] redraw rivers on world config change --- modules/ui/layers.js | 2 + modules/ui/world-configurator.js | 63 ++++++++++++++++++++------------ 2 files changed, 41 insertions(+), 24 deletions(-) diff --git a/modules/ui/layers.js b/modules/ui/layers.js index a0e8b923..622cfc96 100644 --- a/modules/ui/layers.js +++ b/modules/ui/layers.js @@ -1456,6 +1456,8 @@ function toggleRivers(event) { function drawRivers() { TIME && console.time("drawRivers"); + rivers.selectAll("*").remove(); + const {addMeandering, getRiverPath} = Rivers; lineGen.curve(d3.curveCatmullRom.alpha(0.1)); diff --git a/modules/ui/world-configurator.js b/modules/ui/world-configurator.js index 8cbd6a20..aa83eb82 100644 --- a/modules/ui/world-configurator.js +++ b/modules/ui/world-configurator.js @@ -1,13 +1,17 @@ function editWorld() { if (customization) return; - $("#worldConfigurator").dialog({title: "Configure World", resizable: false, width: "42em", + $("#worldConfigurator").dialog({ + title: "Configure World", + resizable: false, + width: "42em", buttons: { "Whole World": () => applyWorldPreset(100, 50), - "Northern": () => applyWorldPreset(33, 25), - "Tropical": () => applyWorldPreset(33, 50), - "Southern": () => applyWorldPreset(33, 75), + Northern: () => applyWorldPreset(33, 25), + Tropical: () => applyWorldPreset(33, 50), + Southern: () => applyWorldPreset(33, 75), "Restore Winds": restoreDefaultWinds - }, open: function() { + }, + open: function () { const buttons = $(this).dialog("widget").find(".ui-dialog-buttonset > button"); buttons[0].addEventListener("mousemove", () => tip("Click to set map size to cover the whole World")); buttons[1].addEventListener("mousemove", () => tip("Click to set map size to cover the Northern latitudes")); @@ -19,7 +23,8 @@ function editWorld() { const globe = d3.select("#globe"); const clr = d3.scaleSequential(d3.interpolateSpectral); - const tMax = 30, tMin = -25; // temperature extremes + const tMax = 30, + tMin = -25; // temperature extremes const projection = d3.geoOrthographic().translate([100, 100]).scale(100); const path = d3.geoPath(projection); @@ -29,15 +34,15 @@ function editWorld() { if (modules.editWorld) return; modules.editWorld = true; - document.getElementById("worldControls").addEventListener("input", (e) => updateWorld(e.target)); + document.getElementById("worldControls").addEventListener("input", e => updateWorld(e.target)); globe.select("#globeWindArrows").on("click", changeWind); globe.select("#globeGraticule").attr("d", round(path(d3.geoGraticule()()))); // globe graticule updateWindDirections(); function updateWorld(el) { if (el) { - document.getElementById(el.dataset.stored+"Input").value = el.value; - document.getElementById(el.dataset.stored+"Output").value = el.value; + document.getElementById(el.dataset.stored + "Input").value = el.value; + document.getElementById(el.dataset.stored + "Output").value = el.value; if (el.dataset.stored) lock(el.dataset.stored); } @@ -56,16 +61,18 @@ function editWorld() { if (layerIsOn("togglePrec")) drawPrec(); if (layerIsOn("toggleBiomes")) drawBiomes(); if (layerIsOn("toggleCoordinates")) drawCoordinates(); + if (layerIsOn("toggleRivers")) drawRivers(); if (document.getElementById("canvas3d")) setTimeout(ThreeD.update(), 500); } function updateGlobePosition() { const size = +document.getElementById("mapSizeOutput").value; - const eqD = graphHeight / 2 * 100 / size; + const eqD = ((graphHeight / 2) * 100) / size; calculateMapCoordinates(); const mc = mapCoordinates; // shortcut - const scale = +distanceScaleInput.value, unit = distanceUnitInput.value; + const scale = +distanceScaleInput.value, + unit = distanceUnitInput.value; const meridian = toKilometer(eqD * 2 * scale); document.getElementById("mapSize").innerHTML = `${graphWidth}x${graphHeight}`; document.getElementById("mapSizeFriendly").innerHTML = `${rn(graphWidth * scale)}x${rn(graphHeight * scale)} ${unit}`; @@ -82,27 +89,35 @@ function editWorld() { return 0; // 0 if distanceUnitInput is a custom unit } - function lat(lat) {return lat > 0 ? Math.abs(rn(lat)) + "°N" : Math.abs(rn(lat)) + "°S";} // parse latitude value - const area = d3.geoGraticule().extent([[mc.lonW, mc.latN], [mc.lonE, mc.latS]]); + function lat(lat) { + return lat > 0 ? Math.abs(rn(lat)) + "°N" : Math.abs(rn(lat)) + "°S"; + } // parse latitude value + const area = d3.geoGraticule().extent([ + [mc.lonW, mc.latN], + [mc.lonE, mc.latS] + ]); globe.select("#globeArea").attr("d", round(path(area.outline()))); // map area } function updateGlobeTemperature() { const tEq = +document.getElementById("temperatureEquatorOutput").value; - document.getElementById("temperatureEquatorF").innerHTML = rn(tEq * 9/5 + 32); + document.getElementById("temperatureEquatorF").innerHTML = rn((tEq * 9) / 5 + 32); const tPole = +document.getElementById("temperaturePoleOutput").value; - document.getElementById("temperaturePoleF").innerHTML = rn(tPole * 9/5 + 32); + document.getElementById("temperaturePoleF").innerHTML = rn((tPole * 9) / 5 + 32); globe.selectAll(".tempGradient90").attr("stop-color", clr(1 - (tPole - tMin) / (tMax - tMin))); - globe.selectAll(".tempGradient60").attr("stop-color", clr(1 - (tEq - (tEq - tPole) * 2/3 - tMin) / (tMax - tMin))); - globe.selectAll(".tempGradient30").attr("stop-color", clr(1 - (tEq - (tEq - tPole) * 1/3 - tMin) / (tMax - tMin))); + globe.selectAll(".tempGradient60").attr("stop-color", clr(1 - (tEq - ((tEq - tPole) * 2) / 3 - tMin) / (tMax - tMin))); + globe.selectAll(".tempGradient30").attr("stop-color", clr(1 - (tEq - ((tEq - tPole) * 1) / 3 - tMin) / (tMax - tMin))); globe.select(".tempGradient0").attr("stop-color", clr(1 - (tEq - tMin) / (tMax - tMin))); } function updateWindDirections() { - globe.select("#globeWindArrows").selectAll("path").each(function(d, i) { - const tr = parseTransform(this.getAttribute("transform")); - this.setAttribute("transform", `rotate(${options.winds[i]} ${tr[1]} ${tr[2]})`); - }); + globe + .select("#globeWindArrows") + .selectAll("path") + .each(function (d, i) { + const tr = parseTransform(this.getAttribute("transform")); + this.setAttribute("transform", `rotate(${options.winds[i]} ${tr[1]} ${tr[2]})`); + }); } function changeWind() { @@ -112,13 +127,13 @@ function editWorld() { const tr = parseTransform(arrow.getAttribute("transform")); arrow.setAttribute("transform", `rotate(${options.winds[tier]} ${tr[1]} ${tr[2]})`); localStorage.setItem("winds", options.winds); - const mapTiers = d3.range(mapCoordinates.latN, mapCoordinates.latS, -30).map(c => (90-c) / 30 | 0); + const mapTiers = d3.range(mapCoordinates.latN, mapCoordinates.latS, -30).map(c => ((90 - c) / 30) | 0); if (mapTiers.includes(tier)) updateWorld(); } function restoreDefaultWinds() { const defaultWinds = [225, 45, 225, 315, 135, 315]; - const mapTiers = d3.range(mapCoordinates.latN, mapCoordinates.latS, -30).map(c => (90-c) / 30 | 0); + const mapTiers = d3.range(mapCoordinates.latN, mapCoordinates.latS, -30).map(c => ((90 - c) / 30) | 0); const update = mapTiers.some(t => options.winds[t] != defaultWinds[t]); options.winds = defaultWinds; updateWindDirections(); @@ -132,4 +147,4 @@ function editWorld() { lock("latitude"); updateWorld(); } -} \ No newline at end of file +}