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.

index.html

@@ -1181,6 +1181,15 @@
               </tr>
             </tbody>
 
+            <tbody id="styleLetterSpacing">
+              <tr data-tip="Set letter spacing size">
+                <td>Letter spacing</td>
+                <td>
+                  <slider-input id="styleLetterSpacingInput" min="0" max="80"></slider-input>
+                </td>
+              </tr>
+            </tbody>
+
             <tbody id="styleStrokeDash">
               <tr data-tip="Set stroke dash array (e.g. 5 2) and linecap">
                 <td>Stroke dash</td>
@@ -2678,6 +2687,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

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

modules/ui/style.js

@@ -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();