mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-17 01:41:22 +01:00
Slider-input web component (#1109)
* feat: slider-input web component * feat: slider-input web component - Brush size * feat: slider-input - statesGrowthRate * feat: slider-input - units editor * feat: slider-input - dissalow invalid numbers * chore: pump version to v1.99.05 * chore: pump version to v1.99.05 --------- Co-authored-by: Azgaar <azgaar.fmg@yandex.com>
This commit is contained in:
Azgaar
GitHub
parent
da8c4f1e4a
commit
d4aef4920c
26 changed files with 546 additions and 798 deletions
|
|
@ -72,6 +72,7 @@ function getColorScheme(scheme = "bright") {
|
|||
|
||||
// Toggle style sections on element select
|
||||
styleElementSelect.addEventListener("change", selectStyleElement);
|
||||
|
||||
function selectStyleElement() {
|
||||
const styleElement = styleElementSelect.value;
|
||||
let el = d3.select("#" + styleElement);
|
||||
|
|
@ -92,7 +93,7 @@ function selectStyleElement() {
|
|||
// opacity
|
||||
if (!["landmass", "ocean", "regions", "legend"].includes(styleElement)) {
|
||||
styleOpacity.style.display = "block";
|
||||
styleOpacityInput.value = styleOpacityOutput.value = el.attr("opacity") || 1;
|
||||
styleOpacityInput.value = el.attr("opacity") || 1;
|
||||
}
|
||||
|
||||
// filter
|
||||
|
|
@ -129,7 +130,7 @@ function selectStyleElement() {
|
|||
styleStroke.style.display = "block";
|
||||
styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke");
|
||||
styleStrokeWidth.style.display = "block";
|
||||
styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || "";
|
||||
styleStrokeWidthInput.value = el.attr("stroke-width") || 0;
|
||||
}
|
||||
|
||||
// stroke dash
|
||||
|
|
@ -176,9 +177,9 @@ function selectStyleElement() {
|
|||
styleHeightmapRenderOcean.checked = +el.attr("data-render");
|
||||
|
||||
styleHeightmapScheme.value = el.attr("scheme");
|
||||
styleHeightmapTerracingInput.value = styleHeightmapTerracingOutput.value = el.attr("terracing");
|
||||
styleHeightmapSkipInput.value = styleHeightmapSkipOutput.value = el.attr("skip");
|
||||
styleHeightmapSimplificationInput.value = styleHeightmapSimplificationOutput.value = el.attr("relax");
|
||||
styleHeightmapTerracing.value = el.attr("terracing");
|
||||
styleHeightmapSkip.value = el.attr("skip");
|
||||
styleHeightmapSimplification.value = el.attr("relax");
|
||||
styleHeightmapCurve.value = el.attr("curve");
|
||||
}
|
||||
|
||||
|
|
@ -201,13 +202,13 @@ function selectStyleElement() {
|
|||
const tr = parseTransform(compass.select("use").attr("transform"));
|
||||
styleCompassShiftX.value = tr[0];
|
||||
styleCompassShiftY.value = tr[1];
|
||||
styleCompassSizeInput.value = styleCompassSizeOutput.value = tr[2];
|
||||
styleCompassSizeInput.value = tr[2];
|
||||
}
|
||||
|
||||
if (styleElement === "terrain") {
|
||||
styleRelief.style.display = "block";
|
||||
styleReliefSizeOutput.innerHTML = styleReliefSizeInput.value = terrain.attr("size");
|
||||
styleReliefDensityOutput.innerHTML = styleReliefDensityInput.value = terrain.attr("density");
|
||||
styleReliefSize.value = terrain.attr("size") || 1;
|
||||
styleReliefDensity.value = terrain.attr("density") || 0.4;
|
||||
styleReliefSet.value = terrain.attr("set");
|
||||
}
|
||||
|
||||
|
|
@ -220,17 +221,16 @@ function selectStyleElement() {
|
|||
.select("#urban")
|
||||
.attr("stroke");
|
||||
styleStrokeWidth.style.display = "block";
|
||||
styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || "";
|
||||
styleStrokeWidthInput.value = el.attr("stroke-width") || 0;
|
||||
}
|
||||
|
||||
if (styleElement === "regions") {
|
||||
styleStates.style.display = "block";
|
||||
styleStatesBodyOpacity.value = styleStatesBodyOpacityOutput.value = statesBody.attr("opacity") || 1;
|
||||
styleStatesBodyOpacity.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;
|
||||
styleStatesHaloWidth.value = statesHalo.attr("data-width") || 10;
|
||||
styleStatesHaloOpacity.value = statesHalo.attr("opacity") || 1;
|
||||
styleStatesHaloBlur.value = parseFloat(statesHalo.attr("filter")?.match(/blur\(([^)]+)\)/)?.[1]) || 0;
|
||||
}
|
||||
|
||||
if (styleElement === "labels") {
|
||||
|
|
@ -243,7 +243,7 @@ function selectStyleElement() {
|
|||
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;
|
||||
styleStrokeWidthInput.value = el.attr("stroke-width") || 0;
|
||||
styleShadowInput.value = el.style("text-shadow") || "white 0 0 4px";
|
||||
|
||||
styleFont.style.display = "block";
|
||||
|
|
@ -258,7 +258,7 @@ function selectStyleElement() {
|
|||
|
||||
styleFont.style.display = "block";
|
||||
styleSelectFont.value = el.attr("font-family");
|
||||
styleFontSize.value = el.attr("data-size");
|
||||
styleFontSize.value = el.attr("font-size");
|
||||
}
|
||||
|
||||
if (styleElement == "burgIcons") {
|
||||
|
|
@ -269,7 +269,7 @@ function selectStyleElement() {
|
|||
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;
|
||||
styleStrokeWidthInput.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;
|
||||
|
|
@ -282,7 +282,7 @@ function selectStyleElement() {
|
|||
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;
|
||||
styleStrokeWidthInput.value = el.attr("stroke-width") || 0.24;
|
||||
styleIconSizeInput.value = el.attr("size") || 2;
|
||||
}
|
||||
|
||||
|
|
@ -292,12 +292,13 @@ function selectStyleElement() {
|
|||
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");
|
||||
styleLegendColItems.value = el.attr("data-columns");
|
||||
const legendBox = el.select("#legendBox");
|
||||
styleLegendBack.value = styleLegendBackOutput.value = legendBox.size() ? legendBox.attr("fill") : "#ffffff";
|
||||
styleLegendOpacity.value = legendBox.size() ? legendBox.attr("fill-opacity") : 1;
|
||||
|
||||
styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke") || "#111111";
|
||||
styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || 0.5;
|
||||
styleStrokeWidthInput.value = el.attr("stroke-width") || 0.5;
|
||||
|
||||
styleFont.style.display = "block";
|
||||
styleSelectFont.value = el.attr("font-family");
|
||||
|
|
@ -308,18 +309,17 @@ function selectStyleElement() {
|
|||
styleOcean.style.display = "block";
|
||||
styleOceanFill.value = styleOceanFillOutput.value = oceanLayers.select("#oceanBase").attr("fill");
|
||||
styleOceanPattern.value = byId("oceanicPattern")?.getAttribute("href");
|
||||
styleOceanPatternOpacity.value = styleOceanPatternOpacityOutput.value =
|
||||
byId("oceanicPattern").getAttribute("opacity") || 1;
|
||||
styleOceanPatternOpacity.value = byId("oceanicPattern").getAttribute("opacity") || 1;
|
||||
outlineLayers.value = oceanLayers.attr("layers");
|
||||
}
|
||||
|
||||
if (styleElement === "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;
|
||||
styleStrokeWidthInput.value = el.attr("stroke-width") || "";
|
||||
styleTemperatureFillOpacityInput.value = el.attr("fill-opacity") || 0.1;
|
||||
styleTemperatureFillInput.value = styleTemperatureFillOutput.value = el.attr("fill") || "#000";
|
||||
styleTemperatureFontSizeInput.value = styleTemperatureFontSizeOutput.value = el.attr("font-size") || "8px";
|
||||
styleTemperatureFontSizeInput.value = el.attr("font-size") || "8px";
|
||||
}
|
||||
|
||||
if (styleElement === "coordinates") {
|
||||
|
|
@ -329,14 +329,14 @@ function selectStyleElement() {
|
|||
|
||||
if (styleElement === "armies") {
|
||||
styleArmies.style.display = "block";
|
||||
styleArmiesFillOpacity.value = styleArmiesFillOpacityOutput.value = el.attr("fill-opacity");
|
||||
styleArmiesSize.value = styleArmiesSizeOutput.value = el.attr("box-size");
|
||||
styleArmiesFillOpacity.value = el.attr("fill-opacity");
|
||||
styleArmiesSize.value = el.attr("box-size");
|
||||
}
|
||||
|
||||
if (styleElement === "emblems") {
|
||||
styleEmblems.style.display = "block";
|
||||
styleStrokeWidth.style.display = "block";
|
||||
styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || 1;
|
||||
styleStrokeWidthInput.value = el.attr("stroke-width") || 1;
|
||||
}
|
||||
|
||||
// update group options
|
||||
|
|
@ -372,11 +372,9 @@ function selectStyleElement() {
|
|||
|
||||
const scaleBarBack = el.select("#scaleBarBack");
|
||||
if (scaleBarBack.size()) {
|
||||
styleScaleBarBackgroundOpacityInput.value = styleScaleBarBackgroundOpacityOutput.value =
|
||||
scaleBarBack.attr("opacity");
|
||||
styleScaleBarBackgroundFillInput.value = styleScaleBarBackgroundFillOutput.value = scaleBarBack.attr("fill");
|
||||
styleScaleBarBackgroundStrokeInput.value = styleScaleBarBackgroundStrokeOutput.value =
|
||||
scaleBarBack.attr("stroke");
|
||||
styleScaleBarBackgroundOpacity.value = scaleBarBack.attr("opacity");
|
||||
styleScaleBarBackgroundFill.value = styleScaleBarBackgroundFillOutput.value = scaleBarBack.attr("fill");
|
||||
styleScaleBarBackgroundStroke.value = styleScaleBarBackgroundStrokeOutput.value = scaleBarBack.attr("stroke");
|
||||
styleScaleBarBackgroundStrokeWidth.value = scaleBarBack.attr("stroke-width");
|
||||
styleScaleBarBackgroundFilter.value = scaleBarBack.attr("filter");
|
||||
styleScaleBarBackgroundPaddingTop.value = scaleBarBack.attr("data-top");
|
||||
|
|
@ -398,7 +396,7 @@ function selectStyleElement() {
|
|||
styleVignetteHeight.value = digit(maskRect.getAttribute("height"));
|
||||
styleVignetteRx.value = digit(maskRect.getAttribute("rx"));
|
||||
styleVignetteRy.value = digit(maskRect.getAttribute("ry"));
|
||||
styleVignetteBlur.value = styleVignetteBlurOutput.value = digit(maskRect.getAttribute("filter"));
|
||||
styleVignetteBlur.value = digit(maskRect.getAttribute("filter"));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -424,9 +422,8 @@ styleStrokeInput.addEventListener("input", function () {
|
|||
if (styleElementSelect.value === "gridOverlay" && layerIsOn("toggleGrid")) drawGrid();
|
||||
});
|
||||
|
||||
styleStrokeWidthInput.addEventListener("input", function () {
|
||||
styleStrokeWidthOutput.value = this.value;
|
||||
getEl().attr("stroke-width", +this.value);
|
||||
styleStrokeWidthInput.addEventListener("input", e => {
|
||||
getEl().attr("stroke-width", e.target.value);
|
||||
if (styleElementSelect.value === "gridOverlay" && layerIsOn("toggleGrid")) drawGrid();
|
||||
});
|
||||
|
||||
|
|
@ -440,9 +437,8 @@ styleStrokeLinecapInput.addEventListener("change", function () {
|
|||
if (styleElementSelect.value === "gridOverlay" && layerIsOn("toggleGrid")) drawGrid();
|
||||
});
|
||||
|
||||
styleOpacityInput.addEventListener("input", function () {
|
||||
styleOpacityOutput.value = this.value;
|
||||
getEl().attr("opacity", this.value);
|
||||
styleOpacityInput.addEventListener("input", e => {
|
||||
getEl().attr("opacity", e.target.value);
|
||||
});
|
||||
|
||||
styleFilterInput.addEventListener("change", function () {
|
||||
|
|
@ -537,9 +533,8 @@ styleOceanPattern.addEventListener("change", function () {
|
|||
byId("oceanicPattern")?.setAttribute("href", this.value);
|
||||
});
|
||||
|
||||
styleOceanPatternOpacity.addEventListener("input", function () {
|
||||
byId("oceanicPattern").setAttribute("opacity", this.value);
|
||||
styleOceanPatternOpacityOutput.value = this.value;
|
||||
styleOceanPatternOpacity.addEventListener("input", e => {
|
||||
byId("oceanicPattern").setAttribute("opacity", e.target.value);
|
||||
});
|
||||
|
||||
outlineLayers.addEventListener("change", function () {
|
||||
|
|
@ -672,81 +667,74 @@ openCreateHeightmapSchemeButton.addEventListener("click", function () {
|
|||
});
|
||||
});
|
||||
|
||||
styleHeightmapRenderOcean.addEventListener("change", function () {
|
||||
getEl().attr("data-render", +this.checked);
|
||||
styleHeightmapRenderOcean.addEventListener("change", e => {
|
||||
const checked = +e.target.checked;
|
||||
getEl().attr("data-render", checked);
|
||||
drawHeightmap();
|
||||
});
|
||||
|
||||
styleHeightmapTerracingInput.addEventListener("input", function () {
|
||||
getEl().attr("terracing", this.value);
|
||||
styleHeightmapTerracing.addEventListener("input", e => {
|
||||
getEl().attr("terracing", e.target.value);
|
||||
drawHeightmap();
|
||||
});
|
||||
|
||||
styleHeightmapSkipInput.addEventListener("input", function () {
|
||||
getEl().attr("skip", this.value);
|
||||
styleHeightmapSkip.addEventListener("input", e => {
|
||||
getEl().attr("skip", e.target.value);
|
||||
drawHeightmap();
|
||||
});
|
||||
|
||||
styleHeightmapSimplificationInput.addEventListener("input", function () {
|
||||
getEl().attr("relax", this.value);
|
||||
styleHeightmapSimplification.addEventListener("input", e => {
|
||||
getEl().attr("relax", e.target.value);
|
||||
drawHeightmap();
|
||||
});
|
||||
|
||||
styleHeightmapCurve.addEventListener("change", function () {
|
||||
getEl().attr("curve", this.value);
|
||||
styleHeightmapCurve.addEventListener("change", e => {
|
||||
getEl().attr("curve", e.target.value);
|
||||
drawHeightmap();
|
||||
});
|
||||
|
||||
styleReliefSet.addEventListener("change", function () {
|
||||
terrain.attr("set", this.value);
|
||||
ReliefIcons();
|
||||
styleReliefSet.addEventListener("change", e => {
|
||||
terrain.attr("set", e.target.value);
|
||||
ReliefIcons.draw();
|
||||
if (!layerIsOn("toggleRelief")) toggleRelief();
|
||||
});
|
||||
|
||||
styleReliefSizeInput.addEventListener("change", function () {
|
||||
terrain.attr("size", this.value);
|
||||
styleReliefSizeOutput.value = this.value;
|
||||
ReliefIcons();
|
||||
styleReliefSize.addEventListener("change", e => {
|
||||
terrain.attr("size", e.target.value);
|
||||
ReliefIcons.draw();
|
||||
if (!layerIsOn("toggleRelief")) toggleRelief();
|
||||
});
|
||||
|
||||
styleReliefDensityInput.addEventListener("change", function () {
|
||||
terrain.attr("density", this.value);
|
||||
styleReliefDensityOutput.value = this.value;
|
||||
ReliefIcons();
|
||||
styleReliefDensity.addEventListener("change", e => {
|
||||
terrain.attr("density", e.target.value);
|
||||
ReliefIcons.draw();
|
||||
if (!layerIsOn("toggleRelief")) toggleRelief();
|
||||
});
|
||||
|
||||
styleTemperatureFillOpacityInput.addEventListener("input", function () {
|
||||
temperature.attr("fill-opacity", this.value);
|
||||
styleTemperatureFillOpacityOutput.value = this.value;
|
||||
styleTemperatureFillOpacityInput.addEventListener("input", e => {
|
||||
temperature.attr("fill-opacity", e.target.value);
|
||||
});
|
||||
|
||||
styleTemperatureFontSizeInput.addEventListener("input", function () {
|
||||
temperature.attr("font-size", this.value + "px");
|
||||
styleTemperatureFontSizeOutput.value = this.value + "px";
|
||||
styleTemperatureFontSizeInput.addEventListener("input", e => {
|
||||
temperature.attr("font-size", e.target.value + "px");
|
||||
});
|
||||
|
||||
styleTemperatureFillInput.addEventListener("input", function () {
|
||||
temperature.attr("fill", this.value);
|
||||
styleTemperatureFillOutput.value = this.value;
|
||||
styleTemperatureFillInput.addEventListener("input", e => {
|
||||
temperature.attr("fill", e.target.value);
|
||||
styleTemperatureFillOutput.value = e.target.value;
|
||||
});
|
||||
|
||||
stylePopulationRuralStrokeInput.addEventListener("input", function () {
|
||||
stylePopulationRuralStrokeInput.addEventListener("input", e => {
|
||||
population.select("#rural").attr("stroke", this.value);
|
||||
stylePopulationRuralStrokeOutput.value = this.value;
|
||||
});
|
||||
|
||||
stylePopulationUrbanStrokeInput.addEventListener("input", function () {
|
||||
stylePopulationUrbanStrokeInput.addEventListener("input", e => {
|
||||
population.select("#urban").attr("stroke", this.value);
|
||||
stylePopulationUrbanStrokeOutput.value = this.value;
|
||||
});
|
||||
|
||||
styleCompassSizeInput.addEventListener("input", function () {
|
||||
styleCompassSizeOutput.value = this.value;
|
||||
shiftCompass();
|
||||
});
|
||||
|
||||
styleCompassSizeInput.addEventListener("input", shiftCompass);
|
||||
styleCompassShiftX.addEventListener("input", shiftCompass);
|
||||
styleCompassShiftY.addEventListener("input", shiftCompass);
|
||||
|
||||
|
|
@ -755,20 +743,18 @@ function shiftCompass() {
|
|||
compass.select("use").attr("transform", tr);
|
||||
}
|
||||
|
||||
styleLegendColItems.addEventListener("input", function () {
|
||||
styleLegendColItemsOutput.value = this.value;
|
||||
legend.select("#legendBox").attr("data-columns", this.value);
|
||||
styleLegendColItems.addEventListener("input", e => {
|
||||
legend.select("#legendBox").attr("data-columns", e.target.value);
|
||||
redrawLegend();
|
||||
});
|
||||
|
||||
styleLegendBack.addEventListener("input", function () {
|
||||
styleLegendBackOutput.value = this.value;
|
||||
legend.select("#legendBox").attr("fill", this.value);
|
||||
styleLegendBack.addEventListener("input", e => {
|
||||
styleLegendBackOutput.value = e.target.value;
|
||||
legend.select("#legendBox").attr("fill", e.target.value);
|
||||
});
|
||||
|
||||
styleLegendOpacity.addEventListener("input", function () {
|
||||
styleLegendOpacityOutput.value = this.value;
|
||||
legend.select("#legendBox").attr("fill-opacity", this.value);
|
||||
styleLegendOpacity.addEventListener("input", e => {
|
||||
legend.select("#legendBox").attr("fill-opacity", e.target.value);
|
||||
});
|
||||
|
||||
styleSelectFont.addEventListener("change", changeFont);
|
||||
|
|
@ -829,13 +815,13 @@ styleFontSize.addEventListener("change", function () {
|
|||
});
|
||||
|
||||
styleFontPlus.addEventListener("click", function () {
|
||||
const size = +getEl().attr("data-size") + 1;
|
||||
changeFontSize(getEl(), Math.min(size, 999));
|
||||
const current = +styleFontSize.value || 12;
|
||||
changeFontSize(getEl(), Math.min(current + 1, 999));
|
||||
});
|
||||
|
||||
styleFontMinus.addEventListener("click", function () {
|
||||
const size = +getEl().attr("data-size") - 1;
|
||||
changeFontSize(getEl(), Math.max(size, 1));
|
||||
const current = +styleFontSize.value || 12;
|
||||
changeFontSize(getEl(), Math.max(current - 1, 1));
|
||||
});
|
||||
|
||||
function changeFontSize(el, size) {
|
||||
|
|
@ -921,39 +907,37 @@ function changeIconSize(size, group) {
|
|||
styleIconSizeInput.value = size;
|
||||
}
|
||||
|
||||
styleStatesBodyOpacity.addEventListener("input", function () {
|
||||
styleStatesBodyOpacityOutput.value = this.value;
|
||||
statesBody.attr("opacity", this.value);
|
||||
styleStatesBodyOpacity.addEventListener("input", e => {
|
||||
statesBody.attr("opacity", e.target.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);
|
||||
styleStatesHaloWidth.addEventListener("input", e => {
|
||||
const value = e.target.value;
|
||||
statesHalo.attr("data-width", value).attr("stroke-width", value);
|
||||
});
|
||||
|
||||
styleStatesHaloOpacity.addEventListener("input", function () {
|
||||
styleStatesHaloOpacityOutput.value = this.value;
|
||||
statesHalo.attr("opacity", this.value);
|
||||
styleStatesHaloOpacity.addEventListener("input", e => {
|
||||
statesHalo.attr("opacity", e.target.value);
|
||||
});
|
||||
|
||||
styleStatesHaloBlur.addEventListener("input", function () {
|
||||
styleStatesHaloBlurOutput.value = this.value;
|
||||
const blur = +this.value > 0 ? `blur(${this.value}px)` : null;
|
||||
styleStatesHaloBlur.addEventListener("input", e => {
|
||||
const value = Number(e.target.value);
|
||||
const blur = value > 0 ? `blur(${value}px)` : null;
|
||||
statesHalo.attr("filter", blur);
|
||||
});
|
||||
|
||||
styleArmiesFillOpacity.addEventListener("input", function () {
|
||||
armies.attr("fill-opacity", this.value);
|
||||
styleArmiesFillOpacityOutput.value = this.value;
|
||||
styleArmiesFillOpacity.addEventListener("input", e => {
|
||||
armies.attr("fill-opacity", e.target.value);
|
||||
});
|
||||
|
||||
styleArmiesSize.addEventListener("input", function () {
|
||||
armies.attr("box-size", this.value).attr("font-size", this.value * 2);
|
||||
styleArmiesSizeOutput.value = this.value;
|
||||
styleArmiesSize.addEventListener("input", e => {
|
||||
const value = Number(e.target.value);
|
||||
armies.attr("box-size", value).attr("font-size", value * 2);
|
||||
|
||||
armies.selectAll("g").remove(); // clear armies layer
|
||||
pack.states.forEach(s => {
|
||||
if (!s.i || s.removed || !s.military.length) return;
|
||||
|
|
@ -1029,7 +1013,7 @@ styleVignettePreset.addEventListener("change", function () {
|
|||
|
||||
const vignette = byId("vignette");
|
||||
if (vignette) {
|
||||
styleOpacityInput.value = styleOpacityOutput.value = vignette.getAttribute("opacity");
|
||||
styleOpacityInput.value = vignette.getAttribute("opacity");
|
||||
styleFillInput.value = styleFillOutput.value = vignette.getAttribute("fill");
|
||||
styleFilterInput.value = vignette.getAttribute("filter");
|
||||
}
|
||||
|
|
@ -1043,37 +1027,36 @@ styleVignettePreset.addEventListener("change", function () {
|
|||
styleVignetteHeight.value = digit(maskRect.getAttribute("height"));
|
||||
styleVignetteRx.value = digit(maskRect.getAttribute("rx"));
|
||||
styleVignetteRy.value = digit(maskRect.getAttribute("ry"));
|
||||
styleVignetteBlur.value = styleVignetteBlurOutput.value = digit(maskRect.getAttribute("filter"));
|
||||
styleVignetteBlur.value = digit(maskRect.getAttribute("filter"));
|
||||
}
|
||||
});
|
||||
|
||||
styleVignetteX.addEventListener("input", function () {
|
||||
byId("vignette-rect")?.setAttribute("x", `${this.value}%`);
|
||||
styleVignetteX.addEventListener("input", e => {
|
||||
byId("vignette-rect")?.setAttribute("x", `${e.target.value}%`);
|
||||
});
|
||||
|
||||
styleVignetteWidth.addEventListener("input", function () {
|
||||
byId("vignette-rect")?.setAttribute("width", `${this.value}%`);
|
||||
styleVignetteWidth.addEventListener("input", e => {
|
||||
byId("vignette-rect")?.setAttribute("width", `${e.target.value}%`);
|
||||
});
|
||||
|
||||
styleVignetteY.addEventListener("input", function () {
|
||||
byId("vignette-rect")?.setAttribute("y", `${this.value}%`);
|
||||
styleVignetteY.addEventListener("input", e => {
|
||||
byId("vignette-rect")?.setAttribute("y", `${e.target.value}%`);
|
||||
});
|
||||
|
||||
styleVignetteHeight.addEventListener("input", function () {
|
||||
byId("vignette-rect")?.setAttribute("height", `${this.value}%`);
|
||||
styleVignetteHeight.addEventListener("input", e => {
|
||||
byId("vignette-rect")?.setAttribute("height", `${e.target.value}%`);
|
||||
});
|
||||
|
||||
styleVignetteRx.addEventListener("input", function () {
|
||||
byId("vignette-rect")?.setAttribute("rx", `${this.value}%`);
|
||||
styleVignetteRx.addEventListener("input", e => {
|
||||
byId("vignette-rect")?.setAttribute("rx", `${e.target.value}%`);
|
||||
});
|
||||
|
||||
styleVignetteRy.addEventListener("input", function () {
|
||||
byId("vignette-rect")?.setAttribute("ry", `${this.value}%`);
|
||||
styleVignetteRy.addEventListener("input", e => {
|
||||
byId("vignette-rect")?.setAttribute("ry", `${e.target.value}%`);
|
||||
});
|
||||
|
||||
styleVignetteBlur.addEventListener("input", function () {
|
||||
styleVignetteBlurOutput.value = this.value;
|
||||
byId("vignette-rect")?.setAttribute("filter", `blur(${this.value}px)`);
|
||||
styleVignetteBlur.addEventListener("input", e => {
|
||||
byId("vignette-rect")?.setAttribute("filter", `blur(${e.target.value}px)`);
|
||||
});
|
||||
|
||||
styleScaleBar.addEventListener("input", function (event) {
|
||||
|
|
@ -1087,9 +1070,9 @@ styleScaleBar.addEventListener("input", function (event) {
|
|||
else if (id === "styleScaleBarPositionX") scaleBar.attr("data-x", value);
|
||||
else if (id === "styleScaleBarPositionY") scaleBar.attr("data-y", value);
|
||||
else if (id === "styleScaleBarLabel") scaleBar.attr("data-label", value);
|
||||
else if (id === "styleScaleBarBackgroundOpacityInput") scaleBarBack.attr("opacity", value);
|
||||
else if (id === "styleScaleBarBackgroundFillInput") scaleBarBack.attr("fill", value);
|
||||
else if (id === "styleScaleBarBackgroundStrokeInput") scaleBarBack.attr("stroke", value);
|
||||
else if (id === "styleScaleBarBackgroundOpacity") scaleBarBack.attr("opacity", value);
|
||||
else if (id === "styleScaleBarBackgroundFill") scaleBarBack.attr("fill", value);
|
||||
else if (id === "styleScaleBarBackgroundStroke") scaleBarBack.attr("stroke", value);
|
||||
else if (id === "styleScaleBarBackgroundStrokeWidth") scaleBarBack.attr("stroke-width", value);
|
||||
else if (id === "styleScaleBarBackgroundFilter") scaleBarBack.attr("filter", value);
|
||||
else if (id === "styleScaleBarBackgroundPaddingTop") scaleBarBack.attr("data-top", value);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue