Slider para modificar pading de texto

index.html

@@ -90,6 +90,11 @@
                                 <option value="bottom">Bottom</option>
                             </select>
                         </div>
+                        <div>
+                            <label class="block text-sm text-gray-600 mb-1">Text Padding (px)</label>
+                            <input type="range" id="text-padding" min="2" max="30" value="6" class="w-full">
+                            <div class="text-xs text-gray-500 mt-1">Distance between text and node</div>
+                        </div>
                         <div>
                             <label class="block text-sm text-gray-600 mb-1">Node Width</label>
                             <input type="range" id="node-width" min="10" max="80" value="40" class="w-full">

script.js

@@ -664,25 +664,28 @@ function initDiagram() {
     // Add text with customizable position
     let textX, textY, textAnchor;
 
+    // Get the text padding value from the settings
+    const textPaddingValue = parseInt(document.getElementById('text-padding').value);
+    
     function getDefaultTextPosition(node) {
         const diagramWidth = width - textPadding;
         const xRatio = node.x / diagramWidth;
         
         if (xRatio < 0.33) {  // Left nodes
             return {
-                x: node.dx + 6,  // Position text on right side
+                x: node.dx + textPaddingValue,  // Position text on right side
                 y: node.dy / 2,
                 anchor: "start"
             };
         } else if (xRatio > 0.66) {  // Right nodes
             return {
-                x: -6,  // Position text on left side
+                x: -textPaddingValue,  // Position text on left side
                 y: node.dy / 2,
                 anchor: "end"
             };
         } else {  // Middle nodes
             return {
-                x: node.dx + 6,  // Position text on right side
+                x: node.dx + textPaddingValue,  // Position text on right side
                 y: node.dy / 2,
                 anchor: "start"
             };
@@ -697,23 +700,23 @@ function initDiagram() {
             textAnchor = d => getDefaultTextPosition(d).anchor;
             break;
         case 'left':
-            textX = -6;
+            textX = -textPaddingValue;
             textY = d => d.dy / 2;
             textAnchor = "end";
             break;
         case 'right':
-            textX = d => d.dx + 6;
+            textX = d => d.dx + textPaddingValue;
             textY = d => d.dy / 2;
             textAnchor = "start";
             break;
         case 'top':
             textX = d => d.dx / 2;
-            textY = -6;
+            textY = -textPaddingValue;
             textAnchor = "middle";
             break;
         case 'bottom':
             textX = d => d.dx / 2;
-            textY = d => d.dy + 6;
+            textY = d => d.dy + textPaddingValue;
             textAnchor = "middle";
             break;
     }
@@ -1114,6 +1117,7 @@ document.addEventListener('DOMContentLoaded', () => {
     // Color and options changes
     document.getElementById('text-color').addEventListener('input', initDiagram);
     document.getElementById('text-position').addEventListener('change', initDiagram);
+    document.getElementById('text-padding').addEventListener('input', initDiagram);
     document.getElementById('node-width').addEventListener('input', initDiagram);
     document.getElementById('diagram-height').addEventListener('input', initDiagram);
     document.getElementById('link-alpha').addEventListener('input', initDiagram);