backups/Fantasy-Map-Generator
1
0
Fork 0
mirror of https://github.com/Azgaar/Fantasy-Map-Generator.git synced 2025-12-17 17:51:24 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added the option to set letter-spacing size to individual labels. (#1116)

Browse source 
* Added the option to set letter-spacing size to individual labels.

* Allowed to set letter-spacing for label groups from the Style tab.
This commit is contained in:
Oriolowsky 2024-09-01 13:02:07 +02:00 • committed by GitHub
parent e77202a08a
commit 6ffc5a0cc5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 51 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

22
modules/ui/labels-editor.js
View file

@ -45,6 +45,10 @@ function editLabel() {
document.getElementById("labelStartOffset").addEventListener("input", changeStartOffset);
document.getElementById("labelRelativeSize").addEventListener("input", changeRelativeSize);
document.getElementById("labelLetterSpacingShow").addEventListener("click", showLetterSpacingSection);
document.getElementById("labelLetterSpacingHide").addEventListener("click", hideLetterSpacingSection);
document.getElementById("labelLetterSpacingSize").addEventListener("input", changeLetterSpacingSize);
document.getElementById("labelAlign").addEventListener("click", editLabelAlign);
document.getElementById("labelLegend").addEventListener("click", editLabelLegend);
document.getElementById("labelRemoveSingle").addEventListener("click", removeLabel);
@ -83,6 +87,8 @@ function editLabel() {
.join("|");
document.getElementById("labelStartOffset").value = parseFloat(textPath.getAttribute("startOffset"));
document.getElementById("labelRelativeSize").value = parseFloat(textPath.getAttribute("font-size"));
let letterSpacingSize = (textPath.getAttribute("letter-spacing")) ? textPath.getAttribute("letter-spacing") : 0;
document.getElementById("labelLetterSpacingSize").value = parseFloat(letterSpacingSize);
}
function drawControlPointsAndLine() {
@ -342,6 +348,16 @@ function editLabel() {
document.getElementById("labelSizeSection").style.display = "none";
}
function showLetterSpacingSection() {
document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "none"));
document.getElementById("labelLetterSpacingSection").style.display = "inline-block";
}
function hideLetterSpacingSection() {
document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "inline-block"));
document.getElementById("labelLetterSpacingSection").style.display = "none";
}
function changeStartOffset() {
elSelected.select("textPath").attr("startOffset", this.value + "%");
tip("Label offset: " + this.value + "%");
@ -353,6 +369,12 @@ function editLabel() {
changeText();
}
function changeLetterSpacingSize() {
elSelected.select("textPath").attr("letter-spacing", this.value + "px");
tip("Label letter-spacing size: " + this.value + "px");
changeText();
}
function editLabelAlign() {
const bbox = elSelected.node().getBBox();
const c = [bbox.x + bbox.width / 2, bbox.y + bbox.height / 2];

7
modules/ui/style.js
View file

@ -239,6 +239,7 @@ function selectStyleElement() {
styleFill.style.display = "block";
styleStroke.style.display = "block";
styleStrokeWidth.style.display = "block";
styleLetterSpacing.style.display = "block";
styleShadow.style.display = "block";
styleSize.style.display = "block";
@ -246,6 +247,7 @@ function selectStyleElement() {
styleFillInput.value = styleFillOutput.value = el.attr("fill") || "#3e3e4b";
styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke") || "#3a3a3a";
styleStrokeWidthInput.value = el.attr("stroke-width") || 0;
styleLetterSpacingInput.value = el.attr("letter-spacing")+"px" || "0px";
styleShadowInput.value = el.style("text-shadow") || "white 0 0 4px";
styleFont.style.display = "block";
@ -432,6 +434,11 @@ styleStrokeWidthInput.addEventListener("input", e => {
if (styleElementSelect.value === "gridOverlay" && layerIsOn("toggleGrid")) drawGrid();
});
styleLetterSpacingInput.addEventListener("input", e => {
getEl().attr("letter-spacing", e.target.value);
if (styleElementSelect.value === "gridOverlay" && layerIsOn("toggleGrid")) drawGrid();
});
styleStrokeDasharrayInput.addEventListener("input", function () {
getEl().attr("stroke-dasharray", this.value);
if (styleElementSelect.value === "gridOverlay" && layerIsOn("toggleGrid")) drawGrid();