feat: style scale bar - style presets

This commit is contained in:
Azgaar 2023-12-03 16:06:46 +04:00
parent b9f3ff6da6
commit 3d7d6ba4f8
14 changed files with 50 additions and 47 deletions

View file

@ -1719,7 +1719,7 @@ function drawScaleBar(scaleBar, scaleLevel) {
const distanceScale = +distanceScaleInput.value;
const unit = distanceUnitInput.value;
const size = +scaleBar.attr("data-size");
const size = +scaleBar.attr("data-bar-size");
const length = (function () {
const init = 100;

View file

@ -360,7 +360,7 @@ function selectStyleElement() {
if (styleElement === "scaleBar") {
styleScaleBar.style.display = "block";
styleScaleBarSize.value = el.attr("data-size");
styleScaleBarSize.value = el.attr("data-bar-size");
styleScaleBarFontSize.value = el.attr("font-size");
styleScaleBarPositionX.value = el.attr("data-x") || "99";
styleScaleBarPositionY.value = el.attr("data-y") || "99";
@ -1075,7 +1075,7 @@ styleScaleBar.addEventListener("input", function (event) {
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 === "styleScaleBarPositionX") scaleBar.attr("data-x", value);
else if (id === "styleScaleBarPositionY") scaleBar.attr("data-y", value);

View file

@ -140,6 +140,9 @@ function applyStyleWithUiRefresh(style) {
invokeActiveZooming();
setPresetRemoveButtonVisibiliy();
drawScaleBar(scaleBar, scale);
fitScaleBar(scaleBar, svgWidth, svgHeight);
}
function addStylePreset() {
@ -302,7 +305,7 @@ function addStylePreset() {
"#fogging": ["opacity", "fill", "filter"],
"#vignette": ["opacity", "fill", "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": [
"opacity",
"fill",

View file

@ -403,13 +403,13 @@
"opacity": 1,
"fill": "#353540",
"font-size": 10,
"data-size": 2,
"data-bar-size": 2,
"data-x": 99,
"data-y": 99,
"data-label": ""
},
"#scaleBarBack": {
"opacity": 0.2,
"opacity": 0,
"fill": "#ffffff",
"stroke": "#000000",
"stroke-width": 1,

View file

@ -402,8 +402,8 @@
"#scaleBar": {
"opacity": 1,
"fill": "#353540",
"font-size": 10,
"data-size": 2,
"font-size": 9,
"data-bar-size": 1.5,
"data-x": 99,
"data-y": 99,
"data-label": ""
@ -413,8 +413,8 @@
"fill": "#ffffff",
"stroke": "#000000",
"stroke-width": 1,
"filter": "url(#blur5)",
"data-top": 20,
"filter": null,
"data-top": 18,
"data-right": 15,
"data-bottom": 15,
"data-left": 10

View file

@ -404,19 +404,19 @@
"#scaleBar": {
"opacity": 1,
"fill": "#353540",
"font-size": 10,
"data-size": 2,
"font-size": 8,
"data-bar-size": 1.5,
"data-x": 99,
"data-y": 99,
"data-label": ""
},
"#scaleBarBack": {
"opacity": 0.2,
"opacity": 0,
"fill": "#ffffff",
"stroke": "#000000",
"stroke-width": 1,
"filter": "url(#blur5)",
"data-top": 20,
"filter": "",
"data-top": 17,
"data-right": 15,
"data-bottom": 15,
"data-left": 10

View file

@ -401,22 +401,22 @@
},
"#scaleBar": {
"opacity": 1,
"fill": "#353540",
"font-size": 10,
"data-size": 2,
"fill": "#d0d0dc",
"font-size": 11,
"data-bar-size": 2,
"data-x": 99,
"data-y": 99,
"data-label": ""
},
"#scaleBarBack": {
"opacity": 0.2,
"fill": "#ffffff",
"opacity": 0.3,
"fill": "#05001f",
"stroke": "#000000",
"stroke-width": 1,
"filter": "url(#blur5)",
"data-top": 20,
"data-right": 15,
"data-bottom": 15,
"data-left": 10
"filter": "",
"data-top": 23,
"data-right": 18,
"data-bottom": 18,
"data-left": 12
}
}

View file

@ -403,7 +403,7 @@
"opacity": 1,
"fill": "#353540",
"font-size": 10,
"data-size": 2,
"data-bar-size": 2,
"data-x": 99,
"data-y": 99,
"data-label": ""

View file

@ -403,16 +403,16 @@
},
"#scaleBar": {
"opacity": 1,
"fill": "#353540",
"fill": "#121212",
"font-size": 10,
"data-size": 2,
"data-bar-size": 2,
"data-x": 99,
"data-y": 99,
"data-label": ""
},
"#scaleBarBack": {
"opacity": 0.2,
"fill": "#ffffff",
"fill": "#607671",
"stroke": "#000000",
"stroke-width": 1,
"filter": "url(#blur5)",

View file

@ -403,7 +403,7 @@
"opacity": 1,
"fill": "#353540",
"font-size": 10,
"data-size": 2,
"data-bar-size": 2,
"data-x": 99,
"data-y": 99,
"data-label": ""

View file

@ -397,20 +397,20 @@
},
"#scaleBar": {
"opacity": 1,
"fill": "#353540",
"font-size": 10,
"data-size": 2,
"fill": "#ffffff",
"font-size": 8,
"data-bar-size": 1.5,
"data-x": 99,
"data-y": 99,
"data-label": ""
},
"#scaleBarBack": {
"opacity": 0.2,
"opacity": 0,
"fill": "#ffffff",
"stroke": "#000000",
"stroke-width": 1,
"filter": "url(#blur5)",
"data-top": 20,
"filter": "",
"data-top": 18,
"data-right": 15,
"data-bottom": 15,
"data-left": 10

View file

@ -401,22 +401,22 @@
},
"#scaleBar": {
"opacity": 1,
"fill": "#353540",
"font-size": 10,
"data-size": 2,
"fill": "#b5c1d4",
"font-size": 11,
"data-bar-size": 2,
"data-x": 99,
"data-y": 99,
"data-label": ""
},
"#scaleBarBack": {
"opacity": 0.2,
"fill": "#ffffff",
"stroke": "#000000",
"opacity": 0.5,
"fill": "#0a1e24",
"stroke": "#40547a",
"stroke-width": 1,
"filter": "url(#blur5)",
"data-top": 20,
"filter": "",
"data-top": 22,
"data-right": 15,
"data-bottom": 15,
"data-bottom": 16,
"data-left": 10
}
}

View file

@ -403,7 +403,7 @@
"opacity": 1,
"fill": "#353540",
"font-size": 10,
"data-size": 2,
"data-bar-size": 2,
"data-x": 99,
"data-y": 99,
"data-label": ""

View file

@ -403,7 +403,7 @@
"opacity": 1,
"fill": "#353540",
"font-size": 10,
"data-size": 2,
"data-bar-size": 2,
"data-x": 99,
"data-y": 99,
"data-label": ""