From 0ec5c5638ff23f6c49350f9440066d566cbba6cd Mon Sep 17 00:00:00 2001
From: Oriolowsky <oriolowsky@gmail.com>
Date: Sat, 31 Aug 2024 23:39:10 +0200
Subject: [PATCH] Added the option to set letter-spacing size to individual
 labels.

---
 index.html                  | 13 +++++++++++++
 modules/ui/labels-editor.js | 22 ++++++++++++++++++++++
 2 files changed, 35 insertions(+)

diff --git a/index.html b/index.html
index 1e1f219b..bea9c41a 100644
--- a/index.html
+++ b/index.html
@@ -2678,6 +2678,19 @@
           />
         </div>
 
+        <button id="labelLetterSpacingShow" data-tip="Show the letter spacing section" class="icon-text-width"></button>
+        <div id="labelLetterSpacingSection" style="display: none">
+        <button id="labelLetterSpacingHide" data-tip="Hide the letter spacing section" class="icon-text-width"></button>
+        <input
+          id="labelLetterSpacingSize"
+          data-tip="Set the letter spacing size for the particular label"
+          type="range"
+          min="0"
+          max="80"
+          style="width: 8em"
+        />
+        </div>
+
         <button id="labelAlign" data-tip="Turn text path into a straight line" class="icon-resize-horizontal"></button>
         <button id="labelLegend" data-tip="Edit free text notes (legend) for this label" class="icon-edit"></button>
         <button
diff --git a/modules/ui/labels-editor.js b/modules/ui/labels-editor.js
index d19de7ae..e707ec66 100644
--- a/modules/ui/labels-editor.js
+++ b/modules/ui/labels-editor.js
@@ -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];