mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-22 03:51:23 +01:00
feat: style scale bar - style presets
This commit is contained in:
parent
b9f3ff6da6
commit
3d7d6ba4f8
14 changed files with 50 additions and 47 deletions
|
|
@ -1719,7 +1719,7 @@ function drawScaleBar(scaleBar, scaleLevel) {
|
||||||
|
|
||||||
const distanceScale = +distanceScaleInput.value;
|
const distanceScale = +distanceScaleInput.value;
|
||||||
const unit = distanceUnitInput.value;
|
const unit = distanceUnitInput.value;
|
||||||
const size = +scaleBar.attr("data-size");
|
const size = +scaleBar.attr("data-bar-size");
|
||||||
|
|
||||||
const length = (function () {
|
const length = (function () {
|
||||||
const init = 100;
|
const init = 100;
|
||||||
|
|
|
||||||
|
|
@ -360,7 +360,7 @@ function selectStyleElement() {
|
||||||
if (styleElement === "scaleBar") {
|
if (styleElement === "scaleBar") {
|
||||||
styleScaleBar.style.display = "block";
|
styleScaleBar.style.display = "block";
|
||||||
|
|
||||||
styleScaleBarSize.value = el.attr("data-size");
|
styleScaleBarSize.value = el.attr("data-bar-size");
|
||||||
styleScaleBarFontSize.value = el.attr("font-size");
|
styleScaleBarFontSize.value = el.attr("font-size");
|
||||||
styleScaleBarPositionX.value = el.attr("data-x") || "99";
|
styleScaleBarPositionX.value = el.attr("data-x") || "99";
|
||||||
styleScaleBarPositionY.value = el.attr("data-y") || "99";
|
styleScaleBarPositionY.value = el.attr("data-y") || "99";
|
||||||
|
|
@ -1075,7 +1075,7 @@ styleScaleBar.addEventListener("input", function (event) {
|
||||||
|
|
||||||
const {id, value} = event.target;
|
const {id, value} = event.target;
|
||||||
|
|
||||||
if (id === "styleScaleBarSize") scaleBar.attr("data-size", value);
|
if (id === "styleScaleBarSize") scaleBar.attr("data-bar-size", value);
|
||||||
else if (id === "styleScaleBarFontSize") scaleBar.attr("font-size", value);
|
else if (id === "styleScaleBarFontSize") scaleBar.attr("font-size", value);
|
||||||
else if (id === "styleScaleBarPositionX") scaleBar.attr("data-x", value);
|
else if (id === "styleScaleBarPositionX") scaleBar.attr("data-x", value);
|
||||||
else if (id === "styleScaleBarPositionY") scaleBar.attr("data-y", value);
|
else if (id === "styleScaleBarPositionY") scaleBar.attr("data-y", value);
|
||||||
|
|
|
||||||
|
|
@ -140,6 +140,9 @@ function applyStyleWithUiRefresh(style) {
|
||||||
|
|
||||||
invokeActiveZooming();
|
invokeActiveZooming();
|
||||||
setPresetRemoveButtonVisibiliy();
|
setPresetRemoveButtonVisibiliy();
|
||||||
|
|
||||||
|
drawScaleBar(scaleBar, scale);
|
||||||
|
fitScaleBar(scaleBar, svgWidth, svgHeight);
|
||||||
}
|
}
|
||||||
|
|
||||||
function addStylePreset() {
|
function addStylePreset() {
|
||||||
|
|
@ -302,7 +305,7 @@ function addStylePreset() {
|
||||||
"#fogging": ["opacity", "fill", "filter"],
|
"#fogging": ["opacity", "fill", "filter"],
|
||||||
"#vignette": ["opacity", "fill", "filter"],
|
"#vignette": ["opacity", "fill", "filter"],
|
||||||
"#vignette-rect": ["x", "y", "width", "height", "rx", "ry", "filter"],
|
"#vignette-rect": ["x", "y", "width", "height", "rx", "ry", "filter"],
|
||||||
"#scaleBar": ["opacity", "fill", "font-size", "data-size", "data-x", "data-y", "data-label"],
|
"#scaleBar": ["opacity", "fill", "font-size", "data-bar-size", "data-x", "data-y", "data-label"],
|
||||||
"#scaleBarBack": [
|
"#scaleBarBack": [
|
||||||
"opacity",
|
"opacity",
|
||||||
"fill",
|
"fill",
|
||||||
|
|
|
||||||
|
|
@ -403,13 +403,13 @@
|
||||||
"opacity": 1,
|
"opacity": 1,
|
||||||
"fill": "#353540",
|
"fill": "#353540",
|
||||||
"font-size": 10,
|
"font-size": 10,
|
||||||
"data-size": 2,
|
"data-bar-size": 2,
|
||||||
"data-x": 99,
|
"data-x": 99,
|
||||||
"data-y": 99,
|
"data-y": 99,
|
||||||
"data-label": ""
|
"data-label": ""
|
||||||
},
|
},
|
||||||
"#scaleBarBack": {
|
"#scaleBarBack": {
|
||||||
"opacity": 0.2,
|
"opacity": 0,
|
||||||
"fill": "#ffffff",
|
"fill": "#ffffff",
|
||||||
"stroke": "#000000",
|
"stroke": "#000000",
|
||||||
"stroke-width": 1,
|
"stroke-width": 1,
|
||||||
|
|
|
||||||
|
|
@ -402,8 +402,8 @@
|
||||||
"#scaleBar": {
|
"#scaleBar": {
|
||||||
"opacity": 1,
|
"opacity": 1,
|
||||||
"fill": "#353540",
|
"fill": "#353540",
|
||||||
"font-size": 10,
|
"font-size": 9,
|
||||||
"data-size": 2,
|
"data-bar-size": 1.5,
|
||||||
"data-x": 99,
|
"data-x": 99,
|
||||||
"data-y": 99,
|
"data-y": 99,
|
||||||
"data-label": ""
|
"data-label": ""
|
||||||
|
|
@ -413,8 +413,8 @@
|
||||||
"fill": "#ffffff",
|
"fill": "#ffffff",
|
||||||
"stroke": "#000000",
|
"stroke": "#000000",
|
||||||
"stroke-width": 1,
|
"stroke-width": 1,
|
||||||
"filter": "url(#blur5)",
|
"filter": null,
|
||||||
"data-top": 20,
|
"data-top": 18,
|
||||||
"data-right": 15,
|
"data-right": 15,
|
||||||
"data-bottom": 15,
|
"data-bottom": 15,
|
||||||
"data-left": 10
|
"data-left": 10
|
||||||
|
|
|
||||||
|
|
@ -404,19 +404,19 @@
|
||||||
"#scaleBar": {
|
"#scaleBar": {
|
||||||
"opacity": 1,
|
"opacity": 1,
|
||||||
"fill": "#353540",
|
"fill": "#353540",
|
||||||
"font-size": 10,
|
"font-size": 8,
|
||||||
"data-size": 2,
|
"data-bar-size": 1.5,
|
||||||
"data-x": 99,
|
"data-x": 99,
|
||||||
"data-y": 99,
|
"data-y": 99,
|
||||||
"data-label": ""
|
"data-label": ""
|
||||||
},
|
},
|
||||||
"#scaleBarBack": {
|
"#scaleBarBack": {
|
||||||
"opacity": 0.2,
|
"opacity": 0,
|
||||||
"fill": "#ffffff",
|
"fill": "#ffffff",
|
||||||
"stroke": "#000000",
|
"stroke": "#000000",
|
||||||
"stroke-width": 1,
|
"stroke-width": 1,
|
||||||
"filter": "url(#blur5)",
|
"filter": "",
|
||||||
"data-top": 20,
|
"data-top": 17,
|
||||||
"data-right": 15,
|
"data-right": 15,
|
||||||
"data-bottom": 15,
|
"data-bottom": 15,
|
||||||
"data-left": 10
|
"data-left": 10
|
||||||
|
|
|
||||||
|
|
@ -401,22 +401,22 @@
|
||||||
},
|
},
|
||||||
"#scaleBar": {
|
"#scaleBar": {
|
||||||
"opacity": 1,
|
"opacity": 1,
|
||||||
"fill": "#353540",
|
"fill": "#d0d0dc",
|
||||||
"font-size": 10,
|
"font-size": 11,
|
||||||
"data-size": 2,
|
"data-bar-size": 2,
|
||||||
"data-x": 99,
|
"data-x": 99,
|
||||||
"data-y": 99,
|
"data-y": 99,
|
||||||
"data-label": ""
|
"data-label": ""
|
||||||
},
|
},
|
||||||
"#scaleBarBack": {
|
"#scaleBarBack": {
|
||||||
"opacity": 0.2,
|
"opacity": 0.3,
|
||||||
"fill": "#ffffff",
|
"fill": "#05001f",
|
||||||
"stroke": "#000000",
|
"stroke": "#000000",
|
||||||
"stroke-width": 1,
|
"stroke-width": 1,
|
||||||
"filter": "url(#blur5)",
|
"filter": "",
|
||||||
"data-top": 20,
|
"data-top": 23,
|
||||||
"data-right": 15,
|
"data-right": 18,
|
||||||
"data-bottom": 15,
|
"data-bottom": 18,
|
||||||
"data-left": 10
|
"data-left": 12
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -403,7 +403,7 @@
|
||||||
"opacity": 1,
|
"opacity": 1,
|
||||||
"fill": "#353540",
|
"fill": "#353540",
|
||||||
"font-size": 10,
|
"font-size": 10,
|
||||||
"data-size": 2,
|
"data-bar-size": 2,
|
||||||
"data-x": 99,
|
"data-x": 99,
|
||||||
"data-y": 99,
|
"data-y": 99,
|
||||||
"data-label": ""
|
"data-label": ""
|
||||||
|
|
|
||||||
|
|
@ -403,16 +403,16 @@
|
||||||
},
|
},
|
||||||
"#scaleBar": {
|
"#scaleBar": {
|
||||||
"opacity": 1,
|
"opacity": 1,
|
||||||
"fill": "#353540",
|
"fill": "#121212",
|
||||||
"font-size": 10,
|
"font-size": 10,
|
||||||
"data-size": 2,
|
"data-bar-size": 2,
|
||||||
"data-x": 99,
|
"data-x": 99,
|
||||||
"data-y": 99,
|
"data-y": 99,
|
||||||
"data-label": ""
|
"data-label": ""
|
||||||
},
|
},
|
||||||
"#scaleBarBack": {
|
"#scaleBarBack": {
|
||||||
"opacity": 0.2,
|
"opacity": 0.2,
|
||||||
"fill": "#ffffff",
|
"fill": "#607671",
|
||||||
"stroke": "#000000",
|
"stroke": "#000000",
|
||||||
"stroke-width": 1,
|
"stroke-width": 1,
|
||||||
"filter": "url(#blur5)",
|
"filter": "url(#blur5)",
|
||||||
|
|
|
||||||
|
|
@ -403,7 +403,7 @@
|
||||||
"opacity": 1,
|
"opacity": 1,
|
||||||
"fill": "#353540",
|
"fill": "#353540",
|
||||||
"font-size": 10,
|
"font-size": 10,
|
||||||
"data-size": 2,
|
"data-bar-size": 2,
|
||||||
"data-x": 99,
|
"data-x": 99,
|
||||||
"data-y": 99,
|
"data-y": 99,
|
||||||
"data-label": ""
|
"data-label": ""
|
||||||
|
|
|
||||||
|
|
@ -397,20 +397,20 @@
|
||||||
},
|
},
|
||||||
"#scaleBar": {
|
"#scaleBar": {
|
||||||
"opacity": 1,
|
"opacity": 1,
|
||||||
"fill": "#353540",
|
"fill": "#ffffff",
|
||||||
"font-size": 10,
|
"font-size": 8,
|
||||||
"data-size": 2,
|
"data-bar-size": 1.5,
|
||||||
"data-x": 99,
|
"data-x": 99,
|
||||||
"data-y": 99,
|
"data-y": 99,
|
||||||
"data-label": ""
|
"data-label": ""
|
||||||
},
|
},
|
||||||
"#scaleBarBack": {
|
"#scaleBarBack": {
|
||||||
"opacity": 0.2,
|
"opacity": 0,
|
||||||
"fill": "#ffffff",
|
"fill": "#ffffff",
|
||||||
"stroke": "#000000",
|
"stroke": "#000000",
|
||||||
"stroke-width": 1,
|
"stroke-width": 1,
|
||||||
"filter": "url(#blur5)",
|
"filter": "",
|
||||||
"data-top": 20,
|
"data-top": 18,
|
||||||
"data-right": 15,
|
"data-right": 15,
|
||||||
"data-bottom": 15,
|
"data-bottom": 15,
|
||||||
"data-left": 10
|
"data-left": 10
|
||||||
|
|
|
||||||
|
|
@ -401,22 +401,22 @@
|
||||||
},
|
},
|
||||||
"#scaleBar": {
|
"#scaleBar": {
|
||||||
"opacity": 1,
|
"opacity": 1,
|
||||||
"fill": "#353540",
|
"fill": "#b5c1d4",
|
||||||
"font-size": 10,
|
"font-size": 11,
|
||||||
"data-size": 2,
|
"data-bar-size": 2,
|
||||||
"data-x": 99,
|
"data-x": 99,
|
||||||
"data-y": 99,
|
"data-y": 99,
|
||||||
"data-label": ""
|
"data-label": ""
|
||||||
},
|
},
|
||||||
"#scaleBarBack": {
|
"#scaleBarBack": {
|
||||||
"opacity": 0.2,
|
"opacity": 0.5,
|
||||||
"fill": "#ffffff",
|
"fill": "#0a1e24",
|
||||||
"stroke": "#000000",
|
"stroke": "#40547a",
|
||||||
"stroke-width": 1,
|
"stroke-width": 1,
|
||||||
"filter": "url(#blur5)",
|
"filter": "",
|
||||||
"data-top": 20,
|
"data-top": 22,
|
||||||
"data-right": 15,
|
"data-right": 15,
|
||||||
"data-bottom": 15,
|
"data-bottom": 16,
|
||||||
"data-left": 10
|
"data-left": 10
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -403,7 +403,7 @@
|
||||||
"opacity": 1,
|
"opacity": 1,
|
||||||
"fill": "#353540",
|
"fill": "#353540",
|
||||||
"font-size": 10,
|
"font-size": 10,
|
||||||
"data-size": 2,
|
"data-bar-size": 2,
|
||||||
"data-x": 99,
|
"data-x": 99,
|
||||||
"data-y": 99,
|
"data-y": 99,
|
||||||
"data-label": ""
|
"data-label": ""
|
||||||
|
|
|
||||||
|
|
@ -403,7 +403,7 @@
|
||||||
"opacity": 1,
|
"opacity": 1,
|
||||||
"fill": "#353540",
|
"fill": "#353540",
|
||||||
"font-size": 10,
|
"font-size": 10,
|
||||||
"data-size": 2,
|
"data-bar-size": 2,
|
||||||
"data-x": 99,
|
"data-x": 99,
|
||||||
"data-y": 99,
|
"data-y": 99,
|
||||||
"data-label": ""
|
"data-label": ""
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue