Smart Text position

index.html

@@ -83,9 +83,11 @@
                         <div>
                             <label class="block text-sm text-gray-600 mb-1">Text Position</label>
                             <select id="text-position" class="w-full p-2 border rounded-md">
+                                <option value="default" selected>Default</option>
                                 <option value="left">Left</option>
-                                <option value="middle" selected>Middle</option>
                                 <option value="right">Right</option>
+                                <option value="top">Top</option>
+                                <option value="bottom">Bottom</option>
                             </select>
                         </div>
                         <div>

script.js

@@ -663,19 +663,59 @@ function initDiagram() {
 
     // Add text with customizable position
     let textX, textY, textAnchor;
+
+    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
+                y: node.dy / 2,
+                anchor: "start"
+            };
+        } else if (xRatio > 0.66) {  // Right nodes
+            return {
+                x: -6,  // Position text on left side
+                y: node.dy / 2,
+                anchor: "end"
+            };
+        } else {  // Middle nodes
+            return {
+                x: node.dx + 6,  // Position text on right side
+                y: node.dy / 2,
+                anchor: "start"
+            };
+        }
+    }
     
     switch(textPosition) {
+        case 'default':
+            // Text position will be determined per node
+            textX = d => getDefaultTextPosition(d).x;
+            textY = d => getDefaultTextPosition(d).y;
+            textAnchor = d => getDefaultTextPosition(d).anchor;
+            break;
         case 'left':
             textX = -6;
+            textY = d => d.dy / 2;
             textAnchor = "end";
             break;
         case 'right':
             textX = d => d.dx + 6;
+            textY = d => d.dy / 2;
             textAnchor = "start";
             break;
-        default: // middle
+        case 'top':
+            textX = d => d.dx / 2;
+            textY = -6;
+            textAnchor = "middle";
+            break;
+        case 'bottom':
             textX = d => d.dx / 2;
+            textY = d => d.dy + 6;
             textAnchor = "middle";
+            break;
     }
 
     // Get font size from settings
@@ -697,9 +737,14 @@ function initDiagram() {
 
     node.append("text")
         .attr("x", textX)
-        .attr("y", d => d.dy / 2)
-        .attr("dy", ".35em")
-        .attr("text-anchor", textAnchor)
+        .attr("y", textY || (d => d.dy / 2))
+        .attr("dy", d => {
+            // Adjust vertical alignment based on position
+            if (textPosition === 'top') return '-0.5em';
+            if (textPosition === 'bottom') return '1em';
+            return '.35em';
+        })
+        .attr("text-anchor", typeof textAnchor === 'function' ? textAnchor : d => textAnchor)
         .text(d => d.name)
         .attr("fill", document.getElementById('text-color').value)
         .attr("font-size", fontSize)