From b00a8a222822b8da6d20098272b8aad103c130f8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gergely=20M=C3=A9sz=C3=A1ros=2C=20Ph=2ED?= Date: Tue, 19 Apr 2022 08:16:49 +0200 Subject: [PATCH 1/2] Fix submap: Wrong typedarray usage for precipitation (#778) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Redraw emblems after resample. * Remove aspect change feature on submaps to support more useful crop operation. * Fix wrong type for prec typedArray Co-authored-by: Mészáros Gergely --- modules/submap.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/submap.js b/modules/submap.js index 09853f97..92d30865 100644 --- a/modules/submap.js +++ b/modules/submap.js @@ -58,7 +58,7 @@ window.Submap = (function () { const n = grid.points.length; grid.cells.h = new Uint8Array(n); // heightmap grid.cells.temp = new Int8Array(n); // temperature - grid.cells.prec = new Int8Array(n); // precipitation + grid.cells.prec = new Uint8Array(n); // precipitation const reverseGridMap = new Uint32Array(n); // cellmap from new -> oldcell const oldGrid = parentMap.grid; From 3cd30206b77cf49a91035d01b2fb10633682e5ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gergely=20M=C3=A9sz=C3=A1ros=2C=20Ph=2ED?= Date: Tue, 19 Apr 2022 13:35:37 +0200 Subject: [PATCH 2/2] Dev submaps update (#780) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Rescale style option for submaps. * namespace for submap ui. * Keep visual change for towns Co-authored-by: Mészáros Gergely --- index.html | 8 +- modules/ui/submap.js | 330 +++++++++++++++++++++++-------------------- 2 files changed, 186 insertions(+), 152 deletions(-) diff --git a/index.html b/index.html index 88e63977..597edef3 100644 --- a/index.html +++ b/index.html @@ -1728,8 +1728,8 @@

Click to create a new map:

- - + +
@@ -4488,6 +4488,10 @@ +
+ + +
diff --git a/modules/ui/submap.js b/modules/ui/submap.js index 74ef44e6..5a2223a2 100644 --- a/modules/ui/submap.js +++ b/modules/ui/submap.js @@ -4,158 +4,188 @@ UI elements for submap generation */ -function openSubmapOptions() { - $("#submapOptionsDialog").dialog({ - title: "Submap options", - resizable: false, - width: fitContent(), - position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}, - buttons: { - Submap: function () { - $(this).dialog("close"); - generateSubmap(); - }, - Cancel: function () { - $(this).dialog("close"); - } - } - }); -} - -function openRemapOptions() { - resetZoom(0); - $("#remapOptionsDialog").dialog({ - title: "Resampler options", - resizable: false, - width: fitContent(), - position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}, - buttons: { - Resample: function () { - const cellNumId = Number(document.getElementById("submapPointsInput").value); - const cells = cellsDensityConstants[cellNumId]; - $(this).dialog("close"); - if (!cells) { - console.error("Unknown cell number!"); - return; +window.UISubmap = (function () { + function openSubmapOptions() { + $("#submapOptionsDialog").dialog({ + title: "Submap options", + resizable: false, + width: fitContent(), + position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}, + buttons: { + Submap: function () { + $(this).dialog("close"); + generateSubmap(); + }, + Cancel: function () { + $(this).dialog("close"); } - changeCellsDensity(cellNumId); - resampleCurrentMap(); - }, - Cancel: function () { - $(this).dialog("close"); } - } - }); -} - -/* callbacks */ - -const resampleCurrentMap = debounce(function () { - // Resample the whole map to different cell resolution or shape - WARN && console.warn("Resampling current map"); - const options = { - lockMarkers: false, - lockBurgs: false, - depressRivers: false, - addLakesInDepressions: false, - promoteTowns: false, - smoothHeightMap: false, - projection: (x, y) => [x, y], - inverse: (x, y) => [x, y] - }; - - startResample(options); -}, 1000); - -const generateSubmap = debounce(function () { - // Create submap from the current map - // submap limits defined by the current window size (canvas viewport) - - WARN && console.warn("Resampling current map"); - closeDialogs("#worldConfigurator, #options3d"); - const checked = id => Boolean(document.getElementById(id).checked); - // Create projection func from current zoom extents - const [[x0, y0], [x1, y1]] = getViewBoxExtent(); - const origScale = scale; - - const options = { - lockMarkers: checked("submapLockMarkers"), - lockBurgs: checked("submapLockBurgs"), - - depressRivers: checked("submapDepressRivers"), - addLakesInDepressions: checked("submapAddLakeInDepression"), - promoteTowns: checked("submapPromoteTowns"), - smoothHeightMap: scale > 2, - inverse: (x, y) => [x / origScale + x0, y / origScale + y0], - projection: (x, y) => [(x - x0) * origScale, (y - y0) * origScale], - }; - - // converting map position on the planet - const mapSizeOutput = document.getElementById("mapSizeOutput"); - const latitudeOutput = document.getElementById("latitudeOutput"); - const latN = 90 - ((180 - (mapSizeInput.value / 100) * 180) * latitudeOutput.value) / 100; - const newLatN = latN - ((y0 / graphHeight) * mapSizeOutput.value * 180) / 100; - mapSizeOutput.value /= scale; - latitudeOutput.value = ((90 - newLatN) / (180 - (mapSizeOutput.value / 100) * 180)) * 100; - document.getElementById("mapSizeInput").value = mapSizeOutput.value; - document.getElementById("latitudeInput").value = latitudeOutput.value; - - // fix scale - distanceScaleInput.value = distanceScaleOutput.value = rn((distanceScale = distanceScaleOutput.value / scale), 2); - populationRateInput.value = populationRateOutput.value = rn((populationRate = populationRateOutput.value / scale), 2); - customization = 0; - startResample(options); -}, 1000); - -async function startResample(options) { - undraw(); - resetZoom(0); - let oldstate = { - grid: deepCopy(grid), - pack: deepCopy(pack), - seed, - graphWidth, - graphHeight - }; - - try { - const oldScale = scale; - await Submap.resample(oldstate, options); - if (options.promoteTowns) { - const groupName = "largetowns"; - moveAllBurgsToGroup("towns", groupName); - changeRadius(rn(oldScale * 0.8, 2), groupName); - changeFontSize(svg.select(`#labels #${groupName}`), rn(oldScale * 2, 2)); - invokeActiveZooming(); - } - } catch (error) { - showSubmapErrorHandler(error); + }); } - oldstate = null; // destroy old state to free memory - - restoreLayers(); - turnButtonOn("toggleMarkers"); - if (ThreeD.options.isOn) ThreeD.redraw(); - if ($("#worldConfigurator").is(":visible")) editWorld(); -} - -function showSubmapErrorHandler(error) { - ERROR && console.error(error); - clearMainTip(); - - alertMessage.innerHTML = `Map resampling failed :_(. -
You may retry after clearing stored data or contact us at discord. -

${parseError(error)}

`; - $("#alert").dialog({ - resizable: false, - title: "Generation error", - width: "32em", - buttons: { - Ok: function () { - $(this).dialog("close"); + function openRemapOptions() { + resetZoom(0); + $("#remapOptionsDialog").dialog({ + title: "Resampler options", + resizable: false, + width: fitContent(), + position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}, + buttons: { + Resample: function () { + $(this).dialog("close"); + resampleCurrentMap(); + }, + Cancel: function () { + $(this).dialog("close"); + } } - }, - position: {my: "center", at: "center", of: "svg"} - }); -} + }); + } + + /* callbacks */ + + const resampleCurrentMap = debounce(function () { + // Resample the whole map to different cell resolution or shape + const cellNumId = Number(document.getElementById("submapPointsInput").value); + if (!cellsDensityConstants[cellNumId]) { + console.error("Unknown cell number!"); + return; + } + changeCellsDensity(cellNumId); + WARN && console.warn("Resampling current map"); + startResample({ + lockMarkers: false, + lockBurgs: false, + depressRivers: false, + addLakesInDepressions: false, + promoteTowns: false, + smoothHeightMap: false, + rescaleStyles: false, + projection: (x, y) => [x, y], + inverse: (x, y) => [x, y] + }); + }, 1000); + + const generateSubmap = debounce(function () { + // Create submap from the current map + // submap limits defined by the current window size (canvas viewport) + + WARN && console.warn("Resampling current map"); + closeDialogs("#worldConfigurator, #options3d"); + const checked = id => Boolean(document.getElementById(id).checked); + // Create projection func from current zoom extents + const [[x0, y0], [x1, y1]] = getViewBoxExtent(); + const origScale = scale; + + const options = { + lockMarkers: checked("submapLockMarkers"), + lockBurgs: checked("submapLockBurgs"), + + depressRivers: checked("submapDepressRivers"), + addLakesInDepressions: checked("submapAddLakeInDepression"), + promoteTowns: checked("submapPromoteTowns"), + rescaleStyles: checked("submapRescaleStyles"), + smoothHeightMap: scale > 2, + inverse: (x, y) => [x / origScale + x0, y / origScale + y0], + projection: (x, y) => [(x - x0) * origScale, (y - y0) * origScale], + }; + + // converting map position on the planet + const mapSizeOutput = document.getElementById("mapSizeOutput"); + const latitudeOutput = document.getElementById("latitudeOutput"); + const latN = 90 - ((180 - (mapSizeInput.value / 100) * 180) * latitudeOutput.value) / 100; + const newLatN = latN - ((y0 / graphHeight) * mapSizeOutput.value * 180) / 100; + mapSizeOutput.value /= scale; + latitudeOutput.value = ((90 - newLatN) / (180 - (mapSizeOutput.value / 100) * 180)) * 100; + document.getElementById("mapSizeInput").value = mapSizeOutput.value; + document.getElementById("latitudeInput").value = latitudeOutput.value; + + // fix scale + distanceScaleInput.value = distanceScaleOutput.value = rn((distanceScale = distanceScaleOutput.value / scale), 2); + populationRateInput.value = populationRateOutput.value = rn((populationRate = populationRateOutput.value / scale), 2); + customization = 0; + startResample(options); + }, 1000); + + async function startResample(options) { + // Do model changes with Submap.resample then do view changes if needed. + undraw(); + resetZoom(0); + let oldstate = { + grid: deepCopy(grid), + pack: deepCopy(pack), + seed, + graphWidth, + graphHeight + }; + + try { + const oldScale = scale; + await Submap.resample(oldstate, options); + if (options.promoteTowns) { + const groupName = "largetowns"; + moveAllBurgsToGroup("towns", groupName); + changeRadius(rn(oldScale * 0.8, 2), groupName); + changeFontSize(svg.select(`#labels #${groupName}`), rn(oldScale * 2, 2)); + invokeActiveZooming(); + } + if (options.rescaleStyles) changeStyles(oldScale); + } catch (error) { + showSubmapErrorHandler(error); + } + + oldstate = null; // destroy old state to free memory + + restoreLayers(); + turnButtonOn("toggleMarkers"); + if (ThreeD.options.isOn) ThreeD.redraw(); + if ($("#worldConfigurator").is(":visible")) editWorld(); + } + + function changeStyles(scale) { + // resize burgIcons + const burgIcons = [...document.getElementById("burgIcons").querySelectorAll("g")]; + for (const bi of burgIcons) { + const newRadius = rn(minmax(bi.getAttribute('size') * scale, 0.2, 10), 2); + changeRadius(newRadius, bi.id); + const swAttr = bi.attributes['stroke-width']; + swAttr.value = +swAttr.value * scale; + } + + // burglabels + const burgLabels= [...document.getElementById("burgLabels").querySelectorAll("g")]; + for (const bl of burgLabels) { + const size = +bl.dataset['size']; + bl.dataset['size'] = Math.max(rn((size + size / scale) / 2, 2), 1) * scale; + } + + // emblems + const emblemMod = minmax((scale - 1) * 0.3 + 1, 0.5, 5); + emblemsStateSizeInput.value = minmax(+emblemsStateSizeInput.value * emblemMod, 0.5, 5); + emblemsProvinceSizeInput.value = minmax(+emblemsProvinceSizeInput.value * emblemMod, 0.5, 5); + emblemsBurgSizeInput.value = minmax(+emblemsBurgSizeInput.value * emblemMod, 0.5, 5); + drawEmblems(); + } + + function showSubmapErrorHandler(error) { + ERROR && console.error(error); + clearMainTip(); + + alertMessage.innerHTML = `Map resampling failed :_(. +
You may retry after clearing stored data or contact us at discord. +

${parseError(error)}

`; + $("#alert").dialog({ + resizable: false, + title: "Generation error", + width: "32em", + buttons: { + Ok: function () { + $(this).dialog("close"); + } + }, + position: {my: "center", at: "center", of: "svg"} + }); + } + + return {openSubmapOptions, openRemapOptions} +})();