dots-viewer: Add dragscroll support for better UX

thiblahute · GStreamer Marge Bot · commit 1f7b6fea6da2 · 2025-02-15T18:01:37.000Z
Patch suggested by Rubén Gonzalez Part-of: <https://gitlab.freedesktop.org/gstreamer/gstreamer/-/merge_requests/7999>
diff --git a/subprojects/gst-devtools/dots-viewer/static/overlay.html b/subprojects/gst-devtools/dots-viewer/static/overlay.html
@@ -43,7 +43,7 @@
   <body>
     <h1 style="text-align: center" id="title"> {{ TITLE }}</h1>
 
-    <div id="graph" style="width: 100%; height: 100%; overflow: scroll;"></div>
+    <div id="graph" class="dragscroll" style="width: 100%; height: 100%; overflow: scroll;"></div>
     <div class="floating-rectangle" id="instructions">
       Click node to highlight<br/>Shift-Ctrl-scroll or w/s to zoom<br/>Esc to unhighlight
     </div>
@@ -54,6 +54,7 @@ <h1 style="text-align: center" id="title"> {{ TITLE }}</h1>
     <script type="text/javascript" src="https://cdn.rawgit.com/jquery/jquery-mousewheel/master/jquery.mousewheel.min.js"></script>
     <script type="text/javascript" src="https://cdn.rawgit.com/jquery/jquery-color/master/jquery.color.js"></script>
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
+    <script type="text/javascript" src="http://asvd.github.io/dragscroll/dragscroll.js"></script>
     <script type="text/javascript" src="/js/jquery.graphviz.svg.js"></script>
     <script type="text/javascript">
       let url = new URL(window.location.href);
