dots-viewer: Make text copyable while preserving drag functionality

Enable text selection on SVG text elements by changing CSS user-select
properties from 'none' to 'text' and cursor from 'default' to 'text'.

Add JavaScript event handling to intercept mousedown events on text
elements, preventing dragscroll interference while allowing normal text
selection. This preserves the existing drag-to-pan functionality for
non-text areas while making text elements selectable and copyable.

Part-of: <https://gitlab.freedesktop.org/gstreamer/gstreamer/-/merge_requests/9547>

subprojects/gst-devtools/dots-viewer/static/css/graphviz.svg.css

@@ -30,13 +30,13 @@
     white-space: nowrap;
 }
 
-/* stop people selecting text on nodes */
+/* allow text selection for copying */
 .graphviz-svg text {
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    cursor: default;
+    -webkit-touch-callout: text;
+    -webkit-user-select: text;
+    -khtml-user-select: text;
+    -moz-user-select: text;
+    -ms-user-select: text;
+    user-select: text;
+    cursor: text;
 }

subprojects/gst-devtools/dots-viewer/static/overlay.html

@@ -59,7 +59,36 @@ furnished to do so, subject to the following conditions:
       let searchParams = new URLSearchParams(url.search);
       document.getElementById("title").innerHTML = searchParams.get("title");
 
+      // Make text selection work while preserving drag functionality
+      function setupTextSelectionWithDrag() {
+        const graphDiv = document.getElementById('graph');
+
+        graphDiv.addEventListener('mousedown', function(e) {
+          if (e.target.tagName === 'text' || e.target.tagName === 'tspan') {
+            e.stopPropagation();
+            // Allow normal text selection behavior
+            return true;
+          }
+        }, true);
+
+        graphDiv.addEventListener('mouseover', function(e) {
+          if (e.target.tagName === 'text' || e.target.tagName === 'tspan') {
+            e.target.style.cursor = 'text';
+          }
+        });
+
+        graphDiv.addEventListener('mouseout', function(e) {
+          if (e.target.tagName === 'text' || e.target.tagName === 'tspan') {
+            // Reset cursor when leaving text elements
+            e.target.style.cursor = '';
+          }
+        });
+      }
+
       $(document).ready(function(){
+        // Setup text selection behavior
+        setupTextSelectionWithDrag();
+
         $("#graph").graphviz({
           url: searchParams.get("svg"),
           ready: function() {