Rescale style option for submaps.

This commit is contained in:
Mészáros Gergely 2022-04-16 22:41:42 +02:00
parent 53dc9a452d
commit e85f5e39d6

View file

@ -20,24 +20,24 @@ window.UISubmap = (function () {
$(this).dialog("close"); $(this).dialog("close");
} }
} }
}); }
} });
}
function openRemapOptions() { function openRemapOptions() {
resetZoom(0); resetZoom(0);
$("#remapOptionsDialog").dialog({ $("#remapOptionsDialog").dialog({
title: "Resampler options", title: "Resampler options",
resizable: false, resizable: false,
width: fitContent(), width: fitContent(),
position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}, position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"},
buttons: { buttons: {
Resample: function () { Resample: function () {
$(this).dialog("close"); $(this).dialog("close");
resampleCurrentMap(); resampleCurrentMap();
}, },
Cancel: function () { Cancel: function () {
$(this).dialog("close"); $(this).dialog("close");
}
} }
}); });
} }
@ -51,141 +51,151 @@ window.UISubmap = (function () {
console.error("Unknown cell number!"); console.error("Unknown cell number!");
return; 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 () { /* callbacks */
// Create submap from the current map
// submap limits defined by the current window size (canvas viewport)
WARN && console.warn("Resampling current map"); const resampleCurrentMap = debounce(function () {
closeDialogs("#worldConfigurator, #options3d"); // Resample the whole map to different cell resolution or shape
const checked = id => Boolean(document.getElementById(id).checked); const cellNumId = Number(document.getElementById("submapPointsInput").value);
// Create projection func from current zoom extents if (!cellsDensityConstants[cellNumId]) {
const [[x0, y0], [x1, y1]] = getViewBoxExtent(); console.error("Unknown cell number!");
const origScale = scale; 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 options = { const generateSubmap = debounce(function () {
lockMarkers: checked("submapLockMarkers"), // Create submap from the current map
lockBurgs: checked("submapLockBurgs"), // submap limits defined by the current window size (canvas viewport)
depressRivers: checked("submapDepressRivers"), WARN && console.warn("Resampling current map");
addLakesInDepressions: checked("submapAddLakeInDepression"), closeDialogs("#worldConfigurator, #options3d");
promoteTowns: checked("submapPromoteTowns"), const checked = id => Boolean(document.getElementById(id).checked);
rescaleStyles: checked("submapRescaleStyles"), // Create projection func from current zoom extents
smoothHeightMap: scale > 2, const [[x0, y0], [x1, y1]] = getViewBoxExtent();
inverse: (x, y) => [x / origScale + x0, y / origScale + y0], const origScale = scale;
projection: (x, y) => [(x - x0) * origScale, (y - y0) * origScale],
};
// converting map position on the planet const options = {
const mapSizeOutput = document.getElementById("mapSizeOutput"); lockMarkers: checked("submapLockMarkers"),
const latitudeOutput = document.getElementById("latitudeOutput"); lockBurgs: checked("submapLockBurgs"),
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 depressRivers: checked("submapDepressRivers"),
distanceScaleInput.value = distanceScaleOutput.value = rn((distanceScale = distanceScaleOutput.value / scale), 2); addLakesInDepressions: checked("submapAddLakeInDepression"),
populationRateInput.value = populationRateOutput.value = rn((populationRate = populationRateOutput.value / scale), 2); promoteTowns: checked("submapPromoteTowns"),
customization = 0; rescaleStyles: checked("submapRescaleStyles"),
startResample(options); smoothHeightMap: scale > 2,
}, 1000); inverse: (x, y) => [x / origScale + x0, y / origScale + y0],
projection: (x, y) => [(x - x0) * origScale, (y - y0) * origScale],
};
async function startResample(options) { // converting map position on the planet
// Do model changes with Submap.resample then do view changes if needed. const mapSizeOutput = document.getElementById("mapSizeOutput");
undraw(); const latitudeOutput = document.getElementById("latitudeOutput");
resetZoom(0); const latN = 90 - ((180 - (mapSizeInput.value / 100) * 180) * latitudeOutput.value) / 100;
let oldstate = { const newLatN = latN - ((y0 / graphHeight) * mapSizeOutput.value * 180) / 100;
grid: deepCopy(grid), mapSizeOutput.value /= scale;
pack: deepCopy(pack), latitudeOutput.value = ((90 - newLatN) / (180 - (mapSizeOutput.value / 100) * 180)) * 100;
seed, document.getElementById("mapSizeInput").value = mapSizeOutput.value;
graphWidth, document.getElementById("latitudeInput").value = latitudeOutput.value;
graphHeight
};
try { // fix scale
const oldScale = scale; distanceScaleInput.value = distanceScaleOutput.value = rn((distanceScale = distanceScaleOutput.value / scale), 2);
await Submap.resample(oldstate, options); populationRateInput.value = populationRateOutput.value = rn((populationRate = populationRateOutput.value / scale), 2);
if (options.promoteTowns) { customization = 0;
const groupName = "largetowns"; startResample(options);
moveAllBurgsToGroup("towns", groupName); }, 1000);
changeRadius(rn(oldScale * 0.8, 2), groupName);
changeFontSize(svg.select(`#labels #${groupName}`), rn(oldScale * 2, 2)); async function startResample(options) {
invokeActiveZooming(); // 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(scale, 0.2, 10) * 0.8, 2);
styleRadiusInput.value = newRadius;
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 :_(.
<br>You may retry after clearing stored data or contact us at discord.
<p id="errorBox">${parseError(error)}</p>`;
$("#alert").dialog({
resizable: false,
title: "Generation error",
width: "32em",
buttons: {
Ok: function () {
$(this).dialog("close");
} }
if (options.rescaleStyles) changeStyles(oldScale); },
} catch (error) { position: {my: "center", at: "center", of: "svg"}
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 :_(.
<br>You may retry after clearing stored data or contact us at discord.
<p id="errorBox">${parseError(error)}</p>`;
$("#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}
})();