Update version to 1.113.2 and enhance label editor functionality with offset controls

Author: Azgaar

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fantasy-map-generator",
-  "version": "1.110.0",
+  "version": "1.113.2",
   "description": "Azgaar's _Fantasy Map Generator_ is a free web application that helps fantasy writers, game masters, and cartographers create and edit fantasy maps.",
   "homepage": "https://github.com/Azgaar/Fantasy-Map-Generator#readme",
   "bugs": {

public/modules/ui/labels-editor.js

@@ -42,7 +42,10 @@ function editLabel() {
 
   byId("labelSizeShow").on("click", showSizeSection);
   byId("labelSizeHide").on("click", hideSizeSection);
+  byId("labelOffsetShow").on("click", showOffsetSection);
+  byId("labelOffsetHide").on("click", hideOffsetSection);
   byId("labelStartOffset").on("input", changeStartOffset);
+  byId("labelStartOffsetValue").on("input", changeStartOffsetFromValue);
   byId("labelRelativeSize").on("input", changeRelativeSize);
 
   byId("labelLetterSpacingShow").on("click", showLetterSpacingSection);
@@ -83,7 +86,9 @@ function editLabel() {
 
   function updateValues(textPath) {
     byId("labelText").value = [...textPath.querySelectorAll("tspan")].map(tspan => tspan.textContent).join("|");
-    byId("labelStartOffset").value = parseFloat(textPath.getAttribute("startOffset"));
+    const startOffset = parseFloat(textPath.getAttribute("startOffset"));
+    byId("labelStartOffset").value = startOffset;
+    byId("labelStartOffsetValue").value = startOffset;
     byId("labelRelativeSize").value = parseFloat(textPath.getAttribute("font-size"));
     let letterSpacingSize = textPath.getAttribute("letter-spacing") ? textPath.getAttribute("letter-spacing") : 0;
     byId("labelLetterSpacingSize").value = parseFloat(letterSpacingSize);
@@ -346,6 +351,16 @@ function editLabel() {
     byId("labelSizeSection").style.display = "none";
   }
 
+  function showOffsetSection() {
+    document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "none"));
+    byId("labelOffsetSection").style.display = "inline-block";
+  }
+
+  function hideOffsetSection() {
+    document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "inline-block"));
+    byId("labelOffsetSection").style.display = "none";
+  }
+
   function showLetterSpacingSection() {
     document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "none"));
     byId("labelLetterSpacingSection").style.display = "inline-block";
@@ -357,8 +372,18 @@ function editLabel() {
   }
 
   function changeStartOffset() {
-    elSelected.select("textPath").attr("startOffset", this.value + "%");
-    tip("Label offset: " + this.value + "%");
+    const value = this.value;
+    byId("labelStartOffsetValue").value = value;
+    elSelected.select("textPath").attr("startOffset", value + "%");
+    tip("Label offset: " + value + "%");
+  }
+
+  function changeStartOffsetFromValue() {
+    const value = Math.min(80, Math.max(20, this.value));
+    byId("labelStartOffset").value = value;
+    this.value = value;
+    elSelected.select("textPath").attr("startOffset", value + "%");
+    tip("Label offset: " + value + "%");
   }
 
   function changeRelativeSize() {

public/versioning.js

@@ -13,7 +13,7 @@
  * Example: 1.102.2 -> Major version 1, Minor version 102, Patch version 2
  */
 
-const VERSION = "1.113.1";
+const VERSION = "1.113.2";
 if (parseMapVersion(VERSION) !== VERSION) alert("versioning.js: Invalid format or parsing function");
 
 {

src/index.html

@@ -2748,23 +2748,38 @@
         <button id="labelSizeShow" data-tip="Show the font size section" class="icon-text-height"></button>
         <div id="labelSizeSection" style="display: none">
           <button id="labelSizeHide" data-tip="Hide the font size section" class="icon-text-height"></button>
+          <span data-tip="Set relative size for the particular label">Size:</span>
+          <input
+            id="labelRelativeSize"
+            data-tip="Set relative size for the particular label (% of group default)"
+            type="number"
+            min="30"
+            max="300"
+            step="1"
+            style="width: 4.5em"
+          />
+        </div>
+
+        <button id="labelOffsetShow" data-tip="Show the label offset section" class="icon-sliders"></button>
+        <div id="labelOffsetSection" style="display: none">
+          <button id="labelOffsetHide" data-tip="Hide the label offset section" class="icon-sliders"></button>
+          <span data-tip="Set starting offset for the particular label">Offset:</span>
           <input
             id="labelStartOffset"
-            data-tip="Set starting offset for the particular label"
+            data-tip="Set starting offset for the particular label (% along the path)"
             type="range"
             min="20"
             max="80"
             style="width: 8em"
           />
-          <i class="icon-text-height"></i>
           <input
-            id="labelRelativeSize"
-            data-tip="Set relative size for the particular label"
+            id="labelStartOffsetValue"
             type="number"
-            min="30"
-            max="300"
+            min="20"
+            max="80"
             step="1"
-            style="width: 4.5em"
+            style="width: 3.5em"
+            data-tip="Set starting offset numerically"
           />
         </div>
 
@@ -8548,7 +8563,7 @@
     <script defer src="modules/ui/ice-editor.js?v=1.111.0"></script>
     <script defer src="modules/ui/lakes-editor.js?v=1.106.0"></script>
     <script defer src="modules/ui/coastline-editor.js?v=1.99.00"></script>
-    <script defer src="modules/ui/labels-editor.js?v=1.106.0"></script>
+    <script defer src="modules/ui/labels-editor.js?v=1.113.2"></script>
     <script defer src="modules/ui/rivers-editor.js?v=1.106.0"></script>
     <script defer src="modules/ui/rivers-creator.js?v=1.106.0"></script>
     <script defer src="modules/ui/relief-editor.js?v=1.99.00"></script>