diff --git a/index.html b/index.html index bf54db82..7846ccd0 100644 --- a/index.html +++ b/index.html @@ -1059,6 +1059,46 @@ + + + Icon + + + + + + + Icon size + + + + + + + Stroke linejoin + + + + + + + Fill opacity + + + + + + Type @@ -1177,7 +1217,7 @@ Stroke width - + @@ -1186,7 +1226,7 @@ Letter spacing - + @@ -1236,24 +1276,11 @@ - - - Radius + + + Font shift Y - - - - - - - - - - Size - - - - + diff --git a/modules/renderers/draw-burg-labels.js b/modules/renderers/draw-burg-labels.js index 6f4438bc..a8fd9318 100644 --- a/modules/renderers/draw-burg-labels.js +++ b/modules/renderers/draw-burg-labels.js @@ -10,6 +10,7 @@ function drawBurgLabels() { const labelGroup = burgLabels.select("#" + name); if (labelGroup.empty()) continue; + const dy = labelGroup.attr("data-dy"); labelGroup .selectAll("text") @@ -20,7 +21,7 @@ function drawBurgLabels() { .attr("data-id", d => d.i) .attr("x", d => d.x) .attr("y", d => d.y) - .attr("dy", "-0.4em") + .attr("dy", dy + "em") .text(d => d.name); } @@ -28,14 +29,16 @@ function drawBurgLabels() { } function drawBurgLabel(burg) { - burgLabels - .select("#" + burg.group) + const group = burgLabels.select("#" + burg.group); + const dy = labelGroup.attr("data-dy"); + + group .append("text") .attr("id", "burgLabel" + burg.i) .attr("data-id", burg.i) .attr("x", burg.x) .attr("y", burg.y) - .attr("dy", "-0.4em") + .attr("dy", dy + "em") .text(burg.name); } diff --git a/modules/ui/style-presets.js b/modules/ui/style-presets.js index dbec442e..f77b4452 100644 --- a/modules/ui/style-presets.js +++ b/modules/ui/style-presets.js @@ -317,16 +317,6 @@ function addStylePreset() { ] }; - const burgIconsAttributes = [ - "opacity", - "fill", - "fill-opacity", - "size", - "stroke", - "stroke-width", - "stroke-dasharray", - "stroke-linecap" - ]; const burgLabelsAttributes = [ "opacity", "fill", @@ -334,11 +324,24 @@ function addStylePreset() { "letter-spacing", "data-size", "font-size", - "font-family" + "font-family", + "data-dy" + ]; + const burgIconsAttributes = [ + "opacity", + "data-icon", + "font-size", + "fill", + "fill-opacity", + "stroke", + "stroke-width", + "stroke-dasharray", + "stroke-linecap", + "stroke-linejoin" ]; options.burgs.groups.forEach(({name}) => { - attributes[`#burgIcons > g#${name}`] = burgIconsAttributes; attributes[`#burgLabels > g#${name}`] = burgLabelsAttributes; + attributes[`#burgIcons > g#${name}`] = burgIconsAttributes; }); for (const selector in attributes) { diff --git a/modules/ui/style.js b/modules/ui/style.js index ca020f91..bf2abadf 100644 --- a/modules/ui/style.js +++ b/modules/ui/style.js @@ -140,9 +140,17 @@ function selectStyleElement() { // stroke dash if ( - ["borders", "cells", "coordinates", "gridOverlay", "legend", "population", "routes", "temperature", "zones"].includes( - styleElement - ) + [ + "borders", + "cells", + "coordinates", + "gridOverlay", + "legend", + "population", + "routes", + "temperature", + "zones" + ].includes(styleElement) ) { styleStrokeDash.style.display = "block"; styleStrokeDasharrayInput.value = el.attr("stroke-dasharray") || ""; @@ -240,6 +248,16 @@ function selectStyleElement() { styleStatesHaloBlur.value = parseFloat(statesHalo.attr("filter")?.match(/blur\(([^)]+)\)/)?.[1]) || 0; } + if (styleElement === "provs") { + styleFill.style.display = "block"; + styleSize.style.display = "block"; + styleFillInput.value = styleFillOutput.value = el.attr("fill") || "#111111"; + + styleFont.style.display = "block"; + styleSelectFont.value = el.attr("font-family"); + styleFontSize.value = el.attr("font-size"); + } + if (styleElement === "labels") { styleFill.style.display = "block"; styleStroke.style.display = "block"; @@ -258,41 +276,38 @@ function selectStyleElement() { styleFont.style.display = "block"; styleSelectFont.value = el.attr("font-family"); styleFontSize.value = el.attr("data-size"); - } - if (styleElement === "provs") { - styleFill.style.display = "block"; - styleSize.style.display = "block"; - styleFillInput.value = styleFillOutput.value = el.attr("fill") || "#111111"; - - styleFont.style.display = "block"; - styleSelectFont.value = el.attr("font-family"); - styleFontSize.value = el.attr("font-size"); + if (el.node().parentNode.id === "burgLabels") { + styleFontShift.style.display = "block"; + styleFontShiftY.value = el.attr("data-dy") || 0; + } } if (styleElement == "burgIcons") { + styleBurgIcons.style.display = "block"; + styleBurgIconsIcon.value = el.attr("data-icon"); + styleBurgIconsIconSize.value = el.attr("font-size"); + styleBurgIconsStrokeLinejoin.value = el.attr("stroke-linejoin"); + styleBurgIconsFillOpacity.value = el.attr("fill-opacity"); + styleFill.style.display = "block"; styleStroke.style.display = "block"; styleStrokeWidth.style.display = "block"; styleStrokeDash.style.display = "block"; - styleRadius.style.display = "block"; styleFillInput.value = styleFillOutput.value = el.attr("fill") || "#ffffff"; styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke") || "#3e3e4b"; 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; } if (styleElement == "anchors") { styleFill.style.display = "block"; styleStroke.style.display = "block"; styleStrokeWidth.style.display = "block"; - styleIconSize.style.display = "block"; styleFillInput.value = styleFillOutput.value = el.attr("fill") || "#ffffff"; styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke") || "#3e3e4b"; styleStrokeWidthInput.value = el.attr("stroke-width") || 0.24; - styleIconSizeInput.value = el.attr("size") || 2; } if (styleElement === "legend") { @@ -750,6 +765,25 @@ stylePopulationUrbanStrokeInput.on("input", e => { stylePopulationUrbanStrokeOutput.value = e.target.value; }); +styleBurgIconsIcon.on("change", e => { + getEl() + .attr("data-icon", e.target.value) + .selectAll("use") + .attr("href", d => e.target.value); +}); + +styleBurgIconsIconSize.on("input", e => { + getEl().attr("font-size", e.target.value); +}); + +styleBurgIconsStrokeLinejoin.on("change", e => { + getEl().attr("stroke-linejoin", e.target.value); +}); + +styleBurgIconsFillOpacity.on("input", e => { + getEl().attr("fill-opacity", e.target.value); +}); + styleCompassSizeInput.on("input", shiftCompass); styleCompassShiftX.on("input", shiftCompass); styleCompassShiftY.on("input", shiftCompass); @@ -788,7 +822,7 @@ styleShadowInput.on("input", function () { styleFontAdd.on("click", function () { addFontNameInput.value = ""; addFontURLInput.value = ""; - + $("#addFontDialog").dialog({ title: "Add custom font", width: "26em", @@ -858,71 +892,13 @@ function changeFontSize(el, size) { if (styleElementSelect.value === "legend") redrawLegend(); } -styleRadiusInput.on("change", function () { - changeRadius(+this.value); -}); - -styleRadiusPlus.on("click", function () { - const size = Math.max(rn(getEl().attr("size") * 1.1, 2), 0.2); - changeRadius(size); -}); - -styleRadiusMinus.on("click", function () { - const size = Math.max(rn(getEl().attr("size") * 0.9, 2), 0.2); - changeRadius(size); -}); - -function changeRadius(size, group) { - const el = group ? burgIcons.select("#" + group) : getEl(); - const g = el.attr("id"); - el.attr("size", size); - el.selectAll("circle").each(function () { - this.setAttribute("r", size); - }); - styleRadiusInput.value = size; - burgLabels - .select("g#" + g) +styleFontShiftY.on("input", e => { + getEl() + .attr("data-dy", e.target.value) .selectAll("text") - .each(function () { - this.setAttribute("dy", `${size * -1.5}px`); - }); - changeIconSize(size * 2, g); // change also anchor icons -} - -styleIconSizeInput.on("change", function () { - changeIconSize(+this.value); + .attr("dy", e.target.value + "em"); }); -styleIconSizePlus.on("click", function () { - const size = Math.max(rn(getEl().attr("size") * 1.1, 2), 0.2); - changeIconSize(size); -}); - -styleIconSizeMinus.on("click", function () { - const size = Math.max(rn(getEl().attr("size") * 0.9, 2), 0.2); - changeIconSize(size); -}); - -function changeIconSize(size, group) { - const el = group ? anchors.select("#" + group) : getEl(); - if (!el.size()) { - console.warn(`Group ${group} not found. Can not set icon size!`); - return; - } - const oldSize = +el.attr("size"); - const shift = (size - oldSize) / 2; - el.attr("size", size); - el.selectAll("use").each(function () { - const x = +this.getAttribute("x"); - const y = +this.getAttribute("y"); - this.setAttribute("x", x - shift); - this.setAttribute("y", y - shift); - this.setAttribute("width", size); - this.setAttribute("height", size); - }); - styleIconSizeInput.value = size; -} - styleStatesBodyOpacity.on("input", e => { statesBody.attr("opacity", e.target.value); }); diff --git a/modules/ui/submap-tool.js b/modules/ui/submap-tool.js index 1c992b7a..d1d7a312 100644 --- a/modules/ui/submap-tool.js +++ b/modules/ui/submap-tool.js @@ -82,10 +82,11 @@ function openSubmapTool() { function rescaleBurgStyles(scale) { const burgIcons = [...byId("burgIcons").querySelectorAll("g")]; for (const group of burgIcons) { - const newRadius = rn(minmax(group.getAttribute("size") * scale, 0.2, 10), 2); - changeRadius(newRadius, group.id); - const strokeWidth = group.attributes["stroke-width"]; - strokeWidth.value = strokeWidth.value * scale; + const newSize = rn(minmax(group.getAttribute("size") * scale, 0.2, 10), 2); + group.setAttribute("font-size", newSize); + + const newStroke = rn(group.getAttribute("stroke-width") * scale, 2); + group.setAttribute("stroke-width", newStroke); } const burgLabels = [...byId("burgLabels").querySelectorAll("g")]; diff --git a/styles/default.json b/styles/default.json index 8f2841c7..bce6f076 100644 --- a/styles/default.json +++ b/styles/default.json @@ -335,7 +335,8 @@ "letter-spacing": 0, "data-size": 7, "font-size": 7, - "font-family": "Almendra SC" + "font-family": "Almendra SC", + "data-dy": -0.4 }, "#burgIcons > g#capitals": { "data-icon": "#icon-square", @@ -356,7 +357,8 @@ "letter-spacing": 0, "data-size": 5, "font-size": 5, - "font-family": "Almendra SC" + "font-family": "Almendra SC", + "data-dy": -0.4 }, "#burgIcons > g#cities": { "data-icon": "#icon-circle", @@ -377,7 +379,8 @@ "letter-spacing": 0, "data-size": 2, "font-size": 2, - "font-family": "Almendra SC" + "font-family": "Almendra SC", + "data-dy": -0.4 }, "#burgIcons > g#forts": { "data-icon": "#icon-triangle", @@ -398,7 +401,8 @@ "letter-spacing": 0, "data-size": 2, "font-size": 2, - "font-family": "Almendra SC" + "font-family": "Almendra SC", + "data-dy": -0.4 }, "#burgIcons > g#monasteries": { "data-icon": "#icon-triangle", @@ -419,7 +423,8 @@ "letter-spacing": 0, "data-size": 2, "font-size": 2, - "font-family": "Almendra SC" + "font-family": "Almendra SC", + "data-dy": -0.4 }, "#burgIcons > g#caravanserais": { "data-icon": "#icon-triangle", @@ -440,7 +445,8 @@ "letter-spacing": 0, "data-size": 2, "font-size": 2, - "font-family": "Almendra SC" + "font-family": "Almendra SC", + "data-dy": -0.4 }, "#burgIcons > g#trading_posts": { "data-icon": "#icon-triangle", @@ -461,7 +467,8 @@ "letter-spacing": 0, "data-size": 3, "font-size": 3, - "font-family": "Almendra SC" + "font-family": "Almendra SC", + "data-dy": -0.4 }, "#burgIcons > g#villages": { "data-icon": "#icon-circle", @@ -482,7 +489,8 @@ "letter-spacing": 0, "data-size": 2, "font-size": 2, - "font-family": "Almendra SC" + "font-family": "Almendra SC", + "data-dy": -0.4 }, "#burgIcons > g#hamlets": { "data-icon": "#icon-circle", @@ -503,7 +511,8 @@ "letter-spacing": 0, "data-size": 4, "font-size": 4, - "font-family": "Almendra SC" + "font-family": "Almendra SC", + "data-dy": -0.4 }, "#burgIcons > g#towns": { "data-icon": "#icon-circle",