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 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;

View file

@ -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);

View file

@ -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",

View file

@ -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,

View file

@ -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

View file

@ -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

View file

@ -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
} }
} }

View file

@ -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": ""

View file

@ -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)",

View file

@ -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": ""

View file

@ -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

View file

@ -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
} }
} }

View file

@ -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": ""

View file

@ -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": ""