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

* 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

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