From 3d7d6ba4f8d356ef644cf45709b3e8f1e821dbe1 Mon Sep 17 00:00:00 2001 From: Azgaar Date: Sun, 3 Dec 2023 16:06:46 +0400 Subject: [PATCH] feat: style scale bar - style presets --- modules/ui/layers.js | 2 +- modules/ui/style.js | 4 ++-- modules/ui/stylePresets.js | 5 ++++- styles/ancient.json | 4 ++-- styles/atlas.json | 8 ++++---- styles/clean.json | 10 +++++----- styles/cyberpunk.json | 20 ++++++++++---------- styles/default.json | 2 +- styles/gloom.json | 6 +++--- styles/light.json | 2 +- styles/monochrome.json | 12 ++++++------ styles/night.json | 18 +++++++++--------- styles/pale.json | 2 +- styles/watercolor.json | 2 +- 14 files changed, 50 insertions(+), 47 deletions(-) diff --git a/modules/ui/layers.js b/modules/ui/layers.js index 2cc58063..93970815 100644 --- a/modules/ui/layers.js +++ b/modules/ui/layers.js @@ -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; diff --git a/modules/ui/style.js b/modules/ui/style.js index ef29a54d..c0498577 100644 --- a/modules/ui/style.js +++ b/modules/ui/style.js @@ -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); diff --git a/modules/ui/stylePresets.js b/modules/ui/stylePresets.js index 498a4002..bcea7d4c 100644 --- a/modules/ui/stylePresets.js +++ b/modules/ui/stylePresets.js @@ -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", diff --git a/styles/ancient.json b/styles/ancient.json index c9da2739..78dcd815 100644 --- a/styles/ancient.json +++ b/styles/ancient.json @@ -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, diff --git a/styles/atlas.json b/styles/atlas.json index 9cb915f6..90f43c8f 100644 --- a/styles/atlas.json +++ b/styles/atlas.json @@ -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 diff --git a/styles/clean.json b/styles/clean.json index ad948174..cbd40e5f 100644 --- a/styles/clean.json +++ b/styles/clean.json @@ -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 diff --git a/styles/cyberpunk.json b/styles/cyberpunk.json index 256ebbb1..269604fb 100644 --- a/styles/cyberpunk.json +++ b/styles/cyberpunk.json @@ -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 } } diff --git a/styles/default.json b/styles/default.json index 314627fe..c47037cb 100644 --- a/styles/default.json +++ b/styles/default.json @@ -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": "" diff --git a/styles/gloom.json b/styles/gloom.json index 06cc7111..5bbed17d 100644 --- a/styles/gloom.json +++ b/styles/gloom.json @@ -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)", diff --git a/styles/light.json b/styles/light.json index 7176a669..56e09599 100644 --- a/styles/light.json +++ b/styles/light.json @@ -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": "" diff --git a/styles/monochrome.json b/styles/monochrome.json index 4a4a161f..b5a90574 100644 --- a/styles/monochrome.json +++ b/styles/monochrome.json @@ -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 diff --git a/styles/night.json b/styles/night.json index 59c429a3..31735943 100644 --- a/styles/night.json +++ b/styles/night.json @@ -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 } } diff --git a/styles/pale.json b/styles/pale.json index f829f81c..c303e2e6 100644 --- a/styles/pale.json +++ b/styles/pale.json @@ -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": "" diff --git a/styles/watercolor.json b/styles/watercolor.json index 2ab0674e..d5e01f99 100644 --- a/styles/watercolor.json +++ b/styles/watercolor.json @@ -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": ""