mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-19 18:41:23 +01:00
refactor(es modules): move all files to src, try vite 3.0
This commit is contained in:
Azgaar
parent
4feed39d5c
commit
0d05e1b250
119 changed files with 8218 additions and 139 deletions
|
|
@ -1,851 +0,0 @@
|
|||
import {tip} from "/src/scripts/tooltips";
|
||||
import {rn} from "/src/utils/numberUtils";
|
||||
import {parseTransform} from "/src/utils/stringUtils";
|
||||
import {getBase64} from "/src/utils/functionUtils";
|
||||
|
||||
// add available filters to lists
|
||||
{
|
||||
const filters = Array.from(document.getElementById("filters").querySelectorAll("filter"));
|
||||
const emptyOption = '<option value="" selected>None</option>';
|
||||
const options = filters.map(filter => {
|
||||
const id = filter.getAttribute("id");
|
||||
const name = filter.getAttribute("name");
|
||||
return `<option value="url(#${id})">${name}</option>`;
|
||||
});
|
||||
const allOptions = emptyOption + options.join("");
|
||||
|
||||
document.getElementById("styleFilterInput").innerHTML = allOptions;
|
||||
document.getElementById("styleStatesBodyFilter").innerHTML = allOptions;
|
||||
}
|
||||
|
||||
// store some style inputs as options
|
||||
styleElements.addEventListener("change", function (ev) {
|
||||
if (ev.target.dataset.stored) lock(ev.target.dataset.stored);
|
||||
});
|
||||
|
||||
// select element to be edited
|
||||
function editStyle(element, group) {
|
||||
showOptions();
|
||||
styleTab.click();
|
||||
styleElementSelect.value = element;
|
||||
if (group) styleGroupSelect.options.add(new Option(group, group, true, true));
|
||||
selectStyleElement();
|
||||
|
||||
styleElementSelect.classList.add("glow");
|
||||
if (group) styleGroupSelect.classList.add("glow");
|
||||
setTimeout(() => {
|
||||
styleElementSelect.classList.remove("glow");
|
||||
if (group) styleGroupSelect.classList.remove("glow");
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
// Toggle style sections on element select
|
||||
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
|
||||
|
||||
// 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";
|
||||
|
||||
// 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");
|
||||
}
|
||||
|
||||
// opacity
|
||||
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") || "";
|
||||
}
|
||||
|
||||
// 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
|
||||
if (
|
||||
[
|
||||
"armies",
|
||||
"routes",
|
||||
"lakes",
|
||||
"borders",
|
||||
"cults",
|
||||
"relig",
|
||||
"cells",
|
||||
"coastline",
|
||||
"prec",
|
||||
"ice",
|
||||
"icons",
|
||||
"coordinates",
|
||||
"zones",
|
||||
"gridOverlay"
|
||||
].includes(sel)
|
||||
) {
|
||||
styleStroke.style.display = "block";
|
||||
styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke");
|
||||
styleStrokeWidth.style.display = "block";
|
||||
styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || "";
|
||||
}
|
||||
|
||||
// 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";
|
||||
}
|
||||
|
||||
// clipping
|
||||
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 === "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 === "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"));
|
||||
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 === "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;
|
||||
styleStatesHaloBlur.value = styleStatesHaloBlurOutput.value = blur;
|
||||
}
|
||||
|
||||
if (sel === "labels") {
|
||||
styleFill.style.display = "block";
|
||||
styleStroke.style.display = "block";
|
||||
styleStrokeWidth.style.display = "block";
|
||||
|
||||
styleShadow.style.display = "block";
|
||||
styleSize.style.display = "block";
|
||||
styleVisibility.style.display = "block";
|
||||
styleFillInput.value = styleFillOutput.value = el.attr("fill") || "#3e3e4b";
|
||||
styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke") || "#3a3a3a";
|
||||
styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || 0;
|
||||
styleShadowInput.value = el.style("text-shadow") || "white 0 0 4px";
|
||||
|
||||
styleFont.style.display = "block";
|
||||
styleSelectFont.value = el.attr("font-family");
|
||||
styleFontSize.value = el.attr("data-size");
|
||||
}
|
||||
|
||||
if (sel === "provs") {
|
||||
styleFill.style.display = "block";
|
||||
styleSize.style.display = "block";
|
||||
styleFillInput.value = styleFillOutput.value = el.attr("fill") || "#111111";
|
||||
|
||||
styleFont.style.display = "block";
|
||||
styleSelectFont.value = el.attr("font-family");
|
||||
styleFontSize.value = el.attr("data-size");
|
||||
}
|
||||
|
||||
if (sel == "burgIcons") {
|
||||
styleFill.style.display = "block";
|
||||
styleStroke.style.display = "block";
|
||||
styleStrokeWidth.style.display = "block";
|
||||
styleStrokeDash.style.display = "block";
|
||||
styleRadius.style.display = "block";
|
||||
styleFillInput.value = styleFillOutput.value = el.attr("fill") || "#ffffff";
|
||||
styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke") || "#3e3e4b";
|
||||
styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || 0.24;
|
||||
styleStrokeDasharrayInput.value = el.attr("stroke-dasharray") || "";
|
||||
styleStrokeLinecapInput.value = el.attr("stroke-linecap") || "inherit";
|
||||
styleRadiusInput.value = el.attr("size") || 1;
|
||||
}
|
||||
|
||||
if (sel == "anchors") {
|
||||
styleFill.style.display = "block";
|
||||
styleStroke.style.display = "block";
|
||||
styleStrokeWidth.style.display = "block";
|
||||
styleIconSize.style.display = "block";
|
||||
styleFillInput.value = styleFillOutput.value = el.attr("fill") || "#ffffff";
|
||||
styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke") || "#3e3e4b";
|
||||
styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || 0.24;
|
||||
styleIconSizeInput.value = el.attr("size") || 2;
|
||||
}
|
||||
|
||||
if (sel === "legend") {
|
||||
styleStroke.style.display = "block";
|
||||
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");
|
||||
|
||||
styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke") || "#111111";
|
||||
styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || 0.5;
|
||||
|
||||
styleFont.style.display = "block";
|
||||
styleSelectFont.value = el.attr("font-family");
|
||||
styleFontSize.value = el.attr("data-size");
|
||||
}
|
||||
|
||||
if (sel === "ocean") {
|
||||
styleOcean.style.display = "block";
|
||||
styleOceanFill.value = styleOceanFillOutput.value = oceanLayers.select("#oceanBase").attr("fill");
|
||||
styleOceanPattern.value = document.getElementById("oceanicPattern")?.getAttribute("href");
|
||||
styleOceanPatternOpacity.value = styleOceanPatternOpacityOutput.value =
|
||||
document.getElementById("oceanicPattern").getAttribute("opacity") || 1;
|
||||
outlineLayers.value = oceanLayers.attr("layers");
|
||||
}
|
||||
|
||||
if (sel === "temperature") {
|
||||
styleStrokeWidth.style.display = "block";
|
||||
styleTemperature.style.display = "block";
|
||||
styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || "";
|
||||
styleTemperatureFillOpacityInput.value = styleTemperatureFillOpacityOutput.value = el.attr("fill-opacity") || 0.1;
|
||||
styleTemperatureFillInput.value = styleTemperatureFillOutput.value = el.attr("fill") || "#000";
|
||||
styleTemperatureFontSizeInput.value = styleTemperatureFontSizeOutput.value = el.attr("font-size") || "8px";
|
||||
}
|
||||
|
||||
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 === "emblems") {
|
||||
styleEmblems.style.display = "block";
|
||||
styleStrokeWidth.style.display = "block";
|
||||
styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || 1;
|
||||
}
|
||||
|
||||
// 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;
|
||||
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";
|
||||
} else {
|
||||
styleGroupSelect.options.add(new Option(sel, sel, false, true));
|
||||
styleGroup.style.display = "none";
|
||||
}
|
||||
|
||||
if (sel === "coastline" && styleGroupSelect.value === "sea_island") {
|
||||
styleCoastline.style.display = "block";
|
||||
const auto = (styleCoastlineAuto.checked = coastline.select("#sea_island").attr("auto-filter"));
|
||||
if (auto) styleFilter.style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
// Handle style inputs change
|
||||
styleGroupSelect.addEventListener("change", selectStyleElement);
|
||||
|
||||
function getEl() {
|
||||
const el = styleElementSelect.value;
|
||||
const g = styleGroupSelect.value;
|
||||
if (g === el) return svg.select("#" + el);
|
||||
else return svg.select("#" + el).select("#" + g);
|
||||
}
|
||||
|
||||
styleFillInput.addEventListener("input", function () {
|
||||
styleFillOutput.value = this.value;
|
||||
getEl().attr("fill", this.value);
|
||||
});
|
||||
|
||||
styleStrokeInput.addEventListener("input", function () {
|
||||
styleStrokeOutput.value = this.value;
|
||||
getEl().attr("stroke", this.value);
|
||||
if (styleElementSelect.value === "gridOverlay" && layerIsOn("toggleGrid")) drawGrid();
|
||||
});
|
||||
|
||||
styleStrokeWidthInput.addEventListener("input", function () {
|
||||
styleStrokeWidthOutput.value = this.value;
|
||||
getEl().attr("stroke-width", +this.value);
|
||||
if (styleElementSelect.value === "gridOverlay" && layerIsOn("toggleGrid")) drawGrid();
|
||||
});
|
||||
|
||||
styleStrokeDasharrayInput.addEventListener("input", function () {
|
||||
getEl().attr("stroke-dasharray", this.value);
|
||||
if (styleElementSelect.value === "gridOverlay" && layerIsOn("toggleGrid")) drawGrid();
|
||||
});
|
||||
|
||||
styleStrokeLinecapInput.addEventListener("change", function () {
|
||||
getEl().attr("stroke-linecap", this.value);
|
||||
if (styleElementSelect.value === "gridOverlay" && layerIsOn("toggleGrid")) drawGrid();
|
||||
});
|
||||
|
||||
styleOpacityInput.addEventListener("input", function () {
|
||||
styleOpacityOutput.value = this.value;
|
||||
getEl().attr("opacity", 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 () {
|
||||
if (this.value === "none") texture.select("image").attr("xlink:href", "");
|
||||
else getBase64(this.value, base64 => texture.select("image").attr("xlink:href", base64));
|
||||
});
|
||||
|
||||
styleTextureShiftX.addEventListener("input", function () {
|
||||
texture
|
||||
.select("image")
|
||||
.attr("x", this.value)
|
||||
.attr("width", graphWidth - this.valueAsNumber);
|
||||
});
|
||||
|
||||
styleTextureShiftY.addEventListener("input", function () {
|
||||
texture
|
||||
.select("image")
|
||||
.attr("y", this.value)
|
||||
.attr("height", graphHeight - this.valueAsNumber);
|
||||
});
|
||||
|
||||
styleClippingInput.addEventListener("change", function () {
|
||||
getEl().attr("mask", this.value);
|
||||
});
|
||||
|
||||
styleGridType.addEventListener("change", function () {
|
||||
getEl().attr("type", this.value);
|
||||
if (layerIsOn("toggleGrid")) drawGrid();
|
||||
calculateFriendlyGridSize();
|
||||
});
|
||||
|
||||
styleGridScale.addEventListener("input", function () {
|
||||
getEl().attr("scale", this.value);
|
||||
if (layerIsOn("toggleGrid")) drawGrid();
|
||||
calculateFriendlyGridSize();
|
||||
});
|
||||
|
||||
function calculateFriendlyGridSize() {
|
||||
const size = styleGridScale.value * 25;
|
||||
const friendly = `${rn(size * distanceScaleInput.value, 2)} ${distanceUnitInput.value}`;
|
||||
styleGridSizeFriendly.value = friendly;
|
||||
}
|
||||
|
||||
styleGridShiftX.addEventListener("input", function () {
|
||||
getEl().attr("dx", this.value);
|
||||
if (layerIsOn("toggleGrid")) drawGrid();
|
||||
});
|
||||
|
||||
styleGridShiftY.addEventListener("input", function () {
|
||||
getEl().attr("dy", this.value);
|
||||
if (layerIsOn("toggleGrid")) drawGrid();
|
||||
});
|
||||
|
||||
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})`);
|
||||
}
|
||||
|
||||
styleRescaleMarkers.addEventListener("change", function () {
|
||||
markers.attr("rescale", +this.checked);
|
||||
invokeActiveZooming();
|
||||
});
|
||||
|
||||
styleCoastlineAuto.addEventListener("change", function () {
|
||||
coastline.select("#sea_island").attr("auto-filter", +this.checked);
|
||||
styleFilter.style.display = this.checked ? "none" : "block";
|
||||
invokeActiveZooming();
|
||||
});
|
||||
|
||||
styleOceanFill.addEventListener("input", function () {
|
||||
oceanLayers.select("rect").attr("fill", this.value);
|
||||
styleOceanFillOutput.value = this.value;
|
||||
});
|
||||
|
||||
styleOceanPattern.addEventListener("change", function () {
|
||||
document.getElementById("oceanicPattern")?.setAttribute("href", this.value);
|
||||
});
|
||||
|
||||
styleOceanPatternOpacity.addEventListener("input", function () {
|
||||
document.getElementById("oceanicPattern").setAttribute("opacity", this.value);
|
||||
styleOceanPatternOpacityOutput.value = this.value;
|
||||
});
|
||||
|
||||
outlineLayers.addEventListener("change", function () {
|
||||
oceanLayers.selectAll("path").remove();
|
||||
oceanLayers.attr("layers", this.value);
|
||||
OceanLayers();
|
||||
});
|
||||
|
||||
styleHeightmapScheme.addEventListener("change", function () {
|
||||
terrs.attr("scheme", this.value);
|
||||
drawHeightmap();
|
||||
});
|
||||
|
||||
styleHeightmapTerracingInput.addEventListener("input", function () {
|
||||
terrs.attr("terracing", this.value);
|
||||
drawHeightmap();
|
||||
});
|
||||
|
||||
styleHeightmapSkipInput.addEventListener("input", function () {
|
||||
terrs.attr("skip", this.value);
|
||||
drawHeightmap();
|
||||
});
|
||||
|
||||
styleHeightmapSimplificationInput.addEventListener("input", function () {
|
||||
terrs.attr("relax", this.value);
|
||||
drawHeightmap();
|
||||
});
|
||||
|
||||
styleHeightmapCurve.addEventListener("change", function () {
|
||||
terrs.attr("curve", this.value);
|
||||
drawHeightmap();
|
||||
});
|
||||
|
||||
styleReliefSet.addEventListener("change", function () {
|
||||
terrain.attr("set", this.value);
|
||||
ReliefIcons();
|
||||
if (!layerIsOn("toggleRelief")) toggleRelief();
|
||||
});
|
||||
|
||||
styleReliefSizeInput.addEventListener("change", function () {
|
||||
terrain.attr("size", this.value);
|
||||
styleReliefSizeOutput.value = this.value;
|
||||
ReliefIcons();
|
||||
if (!layerIsOn("toggleRelief")) toggleRelief();
|
||||
});
|
||||
|
||||
styleReliefDensityInput.addEventListener("change", function () {
|
||||
terrain.attr("density", this.value);
|
||||
styleReliefDensityOutput.value = this.value;
|
||||
ReliefIcons();
|
||||
if (!layerIsOn("toggleRelief")) toggleRelief();
|
||||
});
|
||||
|
||||
styleTemperatureFillOpacityInput.addEventListener("input", function () {
|
||||
temperature.attr("fill-opacity", this.value);
|
||||
styleTemperatureFillOpacityOutput.value = this.value;
|
||||
});
|
||||
|
||||
styleTemperatureFontSizeInput.addEventListener("input", function () {
|
||||
temperature.attr("font-size", this.value + "px");
|
||||
styleTemperatureFontSizeOutput.value = this.value + "px";
|
||||
});
|
||||
|
||||
styleTemperatureFillInput.addEventListener("input", function () {
|
||||
temperature.attr("fill", this.value);
|
||||
styleTemperatureFillOutput.value = this.value;
|
||||
});
|
||||
|
||||
stylePopulationRuralStrokeInput.addEventListener("input", function () {
|
||||
population.select("#rural").attr("stroke", this.value);
|
||||
stylePopulationRuralStrokeOutput.value = this.value;
|
||||
});
|
||||
|
||||
stylePopulationUrbanStrokeInput.addEventListener("input", function () {
|
||||
population.select("#urban").attr("stroke", this.value);
|
||||
stylePopulationUrbanStrokeOutput.value = this.value;
|
||||
});
|
||||
|
||||
styleCompassSizeInput.addEventListener("input", function () {
|
||||
styleCompassSizeOutput.value = this.value;
|
||||
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);
|
||||
}
|
||||
|
||||
styleLegendColItems.addEventListener("input", function () {
|
||||
styleLegendColItemsOutput.value = 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);
|
||||
});
|
||||
|
||||
styleLegendOpacity.addEventListener("input", function () {
|
||||
styleLegendOpacityOutput.value = this.value;
|
||||
legend.select("#legendBox").attr("fill-opacity", this.value);
|
||||
});
|
||||
|
||||
styleSelectFont.addEventListener("change", changeFont);
|
||||
function changeFont() {
|
||||
const family = styleSelectFont.value;
|
||||
getEl().attr("font-family", family);
|
||||
|
||||
if (styleElementSelect.value === "legend") redrawLegend();
|
||||
}
|
||||
|
||||
styleShadowInput.addEventListener("input", function () {
|
||||
getEl().style("text-shadow", this.value);
|
||||
});
|
||||
|
||||
styleFontAdd.addEventListener("click", function () {
|
||||
addFontNameInput.value = "";
|
||||
addFontURLInput.value = "";
|
||||
|
||||
$("#addFontDialog").dialog({
|
||||
title: "Add custom font",
|
||||
width: "26em",
|
||||
position: {my: "center", at: "center", of: "svg"},
|
||||
buttons: {
|
||||
Add: function () {
|
||||
const family = addFontNameInput.value;
|
||||
const src = addFontURLInput.value;
|
||||
const method = addFontMethod.value;
|
||||
|
||||
if (!family) return tip("Please provide a font name", false, "error");
|
||||
|
||||
const existingFont =
|
||||
method === "fontURL"
|
||||
? fonts.find(font => font.family === family && font.src === src)
|
||||
: fonts.find(font => font.family === family);
|
||||
if (existingFont) return tip("The font is already added", false, "error");
|
||||
|
||||
if (method === "fontURL") addWebFont(family, src);
|
||||
else if (method === "googleFont") addGoogleFont(family);
|
||||
else if (method === "localFont") addLocalFont(family);
|
||||
|
||||
addFontNameInput.value = "";
|
||||
addFontURLInput.value = "";
|
||||
$(this).dialog("close");
|
||||
},
|
||||
Cancel: function () {
|
||||
$(this).dialog("close");
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
addFontMethod.addEventListener("change", function () {
|
||||
addFontURLInput.style.display = this.value === "fontURL" ? "inline" : "none";
|
||||
});
|
||||
|
||||
styleFontSize.addEventListener("change", function () {
|
||||
changeFontSize(getEl(), +this.value);
|
||||
});
|
||||
|
||||
styleFontPlus.addEventListener("click", function () {
|
||||
const size = +getEl().attr("data-size") + 1;
|
||||
changeFontSize(getEl(), Math.min(size, 999));
|
||||
});
|
||||
|
||||
styleFontMinus.addEventListener("click", function () {
|
||||
const size = +getEl().attr("data-size") - 1;
|
||||
changeFontSize(getEl(), Math.max(size, 1));
|
||||
});
|
||||
|
||||
function changeFontSize(el, size) {
|
||||
styleFontSize.value = size;
|
||||
|
||||
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);
|
||||
|
||||
// other has the same size
|
||||
return size;
|
||||
};
|
||||
|
||||
const scaleSize = getSizeOnScale(styleElementSelect.value);
|
||||
el.attr("data-size", size).attr("font-size", scaleSize);
|
||||
|
||||
if (styleElementSelect.value === "legend") redrawLegend();
|
||||
}
|
||||
|
||||
styleRadiusInput.addEventListener("change", function () {
|
||||
changeRadius(+this.value);
|
||||
});
|
||||
|
||||
styleRadiusPlus.addEventListener("click", function () {
|
||||
const size = Math.max(rn(getEl().attr("size") * 1.1, 2), 0.2);
|
||||
changeRadius(size);
|
||||
});
|
||||
|
||||
styleRadiusMinus.addEventListener("click", function () {
|
||||
const size = Math.max(rn(getEl().attr("size") * 0.9, 2), 0.2);
|
||||
changeRadius(size);
|
||||
});
|
||||
|
||||
function changeRadius(size, group) {
|
||||
const el = group ? burgIcons.select("#" + group) : getEl();
|
||||
const g = el.attr("id");
|
||||
el.attr("size", size);
|
||||
el.selectAll("circle").each(function () {
|
||||
this.setAttribute("r", size);
|
||||
});
|
||||
styleRadiusInput.value = size;
|
||||
burgLabels
|
||||
.select("g#" + g)
|
||||
.selectAll("text")
|
||||
.each(function () {
|
||||
this.setAttribute("dy", `${size * -1.5}px`);
|
||||
});
|
||||
changeIconSize(size * 2, g); // change also anchor icons
|
||||
}
|
||||
|
||||
styleIconSizeInput.addEventListener("change", function () {
|
||||
changeIconSize(+this.value);
|
||||
});
|
||||
|
||||
styleIconSizePlus.addEventListener("click", function () {
|
||||
const size = Math.max(rn(getEl().attr("size") * 1.1, 2), 0.2);
|
||||
changeIconSize(size);
|
||||
});
|
||||
|
||||
styleIconSizeMinus.addEventListener("click", function () {
|
||||
const size = Math.max(rn(getEl().attr("size") * 0.9, 2), 0.2);
|
||||
changeIconSize(size);
|
||||
});
|
||||
|
||||
function changeIconSize(size, group) {
|
||||
const el = group ? anchors.select("#" + group) : getEl();
|
||||
if (!el.size()) {
|
||||
console.warn(`Group ${group} not found. Can not set icon size!`);
|
||||
return;
|
||||
}
|
||||
const oldSize = +el.attr("size");
|
||||
const shift = (size - oldSize) / 2;
|
||||
el.attr("size", size);
|
||||
el.selectAll("use").each(function () {
|
||||
const x = +this.getAttribute("x");
|
||||
const y = +this.getAttribute("y");
|
||||
this.setAttribute("x", x - shift);
|
||||
this.setAttribute("y", y - shift);
|
||||
this.setAttribute("width", size);
|
||||
this.setAttribute("height", size);
|
||||
});
|
||||
styleIconSizeInput.value = size;
|
||||
}
|
||||
|
||||
styleStatesBodyOpacity.addEventListener("input", function () {
|
||||
styleStatesBodyOpacityOutput.value = this.value;
|
||||
statesBody.attr("opacity", this.value);
|
||||
});
|
||||
|
||||
styleStatesBodyFilter.addEventListener("change", function () {
|
||||
statesBody.attr("filter", this.value);
|
||||
});
|
||||
|
||||
styleStatesHaloWidth.addEventListener("input", function () {
|
||||
styleStatesHaloWidthOutput.value = 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);
|
||||
});
|
||||
|
||||
styleStatesHaloBlur.addEventListener("input", function () {
|
||||
styleStatesHaloBlurOutput.value = this.value;
|
||||
const blur = +this.value > 0 ? `blur(${this.value}px)` : null;
|
||||
statesHalo.attr("filter", blur);
|
||||
});
|
||||
|
||||
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 => {
|
||||
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());
|
||||
|
||||
// request a URL to image to be used as a texture
|
||||
function textureProvideURL() {
|
||||
alertMessage.innerHTML = /* html */ `Provide an image URL to be used as a texture:
|
||||
<input id="textureURL" type="url" style="width: 100%" placeholder="http://www.example.com/image.jpg" oninput="fetchTextureURL(this.value)" />
|
||||
<canvas id="texturePreview" width="256px" height="144px"></canvas>`;
|
||||
$("#alert").dialog({
|
||||
resizable: false,
|
||||
title: "Load custom texture",
|
||||
width: "26em",
|
||||
buttons: {
|
||||
Apply: function () {
|
||||
const name = textureURL.value.split("/").pop();
|
||||
if (!name || name === "") {
|
||||
tip("Please provide a valid URL", false, "error");
|
||||
return;
|
||||
}
|
||||
const opt = document.createElement("option");
|
||||
opt.value = textureURL.value;
|
||||
opt.text = name.slice(0, 20);
|
||||
styleTextureInput.add(opt);
|
||||
styleTextureInput.value = textureURL.value;
|
||||
getBase64(textureURL.value, base64 => texture.select("image").attr("xlink:href", base64));
|
||||
zoom.scaleBy(svg, 1.00001); // enforce browser re-draw
|
||||
$(this).dialog("close");
|
||||
},
|
||||
Cancel: function () {
|
||||
$(this).dialog("close");
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function fetchTextureURL(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");
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
|
||||
};
|
||||
img.src = url;
|
||||
}
|
||||
|
||||
function updateElements() {
|
||||
// burgIcons to desired size
|
||||
burgIcons.selectAll("g").each(function () {
|
||||
const size = +this.getAttribute("size");
|
||||
d3.select(this)
|
||||
.selectAll("circle")
|
||||
.each(function () {
|
||||
this.setAttribute("r", size);
|
||||
});
|
||||
burgLabels
|
||||
.select("g#" + this.id)
|
||||
.selectAll("text")
|
||||
.each(function () {
|
||||
this.setAttribute("dy", `${size * -1.5}px`);
|
||||
});
|
||||
});
|
||||
|
||||
// anchor icons to desired size
|
||||
anchors.selectAll("g").each(function (d) {
|
||||
const size = +this.getAttribute("size");
|
||||
d3.select(this)
|
||||
.selectAll("use")
|
||||
.each(function () {
|
||||
const id = +this.dataset.id;
|
||||
const x = pack.burgs[id].x,
|
||||
y = pack.burgs[id].y;
|
||||
this.setAttribute("x", rn(x - size * 0.47, 2));
|
||||
this.setAttribute("y", rn(y - size * 0.47, 2));
|
||||
this.setAttribute("width", size);
|
||||
this.setAttribute("height", size);
|
||||
});
|
||||
});
|
||||
|
||||
// redraw elements
|
||||
if (layerIsOn("toggleHeight")) drawHeightmap();
|
||||
if (legend.selectAll("*").size() && window.redrawLegend) redrawLegend();
|
||||
oceanLayers.selectAll("path").remove();
|
||||
OceanLayers();
|
||||
invokeActiveZooming();
|
||||
}
|
||||
|
||||
// GLOBAL FILTERS
|
||||
mapFilters.addEventListener("click", applyMapFilter);
|
||||
function applyMapFilter(event) {
|
||||
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");
|
||||
|
||||
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 + ")");
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue