Add a freeze scroll button (#21)

Author: basnijholt

js/widget.js

@@ -84,7 +84,7 @@ async function render({ model, el }) {
     renderQueue = renderQueue.then(() => {
       return new Promise((resolve) => {
         Logger.debug(`Widget ${widgetId}: Starting graph render`);
-        const zoomEnabled = model.get('enable_zoom');
+        const zoomEnabled = model.get("enable_zoom");
         d3graphvizInstance
           .engine("dot")
           .fade(false)
@@ -159,6 +159,27 @@ async function render({ model, el }) {
     await renderGraph(model.get("dot_source"));
   });
 
+  model.on("change:freeze_scroll", async () => {
+    const freezeScroll = model.get("freeze_scroll");
+    const svg = d3.select(`#${widgetId} svg`);
+    const zoomEnabled = model.get("enable_zoom");
+
+    if (freezeScroll) {
+      // Disable only scroll and zoom
+      svg.on("wheel.zoom", null); // Disable scroll wheel zoom
+      svg.on("mousedown.zoom", null); // Disable zoom on mousedown
+      svg.on("touchstart.zoom", null); // Disable zoom on touchstart
+      svg.on("touchmove.zoom", null); // Disable zoom on touchmove
+      svg.on("touchend.zoom", null); // Disable zoom on touchend
+      svg.on("touchcancel.zoom", null); // Disable zoom on touchcancel
+    } else {
+      // Re-enable zoom if not frozen and zoom is enabled
+      if (zoomEnabled) {
+        svg.call(d3graphvizInstance.zoomBehavior());
+      }
+    }
+  });
+
   model.on("msg:custom", (msg) => {
     if (msg.action === "reset_zoom") {
       resetGraph();

src/graphviz_anywidget/__init__.py

@@ -37,6 +37,7 @@ class GraphvizAnyWidget(anywidget.AnyWidget):
     search_type = traitlets.Unicode("included").tag(sync=True)
     case_sensitive = traitlets.Bool(False).tag(sync=True)  # noqa: FBT003
     enable_zoom = traitlets.Bool(True).tag(sync=True)
+    freeze_scroll = traitlets.Bool(False).tag(sync=True)  # noqa: FBT003
 
 
 def graphviz_widget(
@@ -83,10 +84,18 @@ def graphviz_widget(
     """
     widget = GraphvizAnyWidget(dot_source=dot_source)
     reset_button = ipywidgets.Button(
-        description="Reset Zoom",
+        description="Reset",
         layout=ipywidgets.Layout(width="auto"),
+        icon="refresh",
         button_style="warning",
     )
+    freeze_toggle = ipywidgets.ToggleButton(
+        value=False,
+        description="Freeze Scroll",
+        icon="snowflake-o",
+        layout=ipywidgets.Layout(width="auto"),
+        button_style="primary",
+    )
     direction_selector = ipywidgets.Dropdown(
         options=["bidirectional", "downstream", "upstream", "single"],
         value="bidirectional",
@@ -107,7 +116,7 @@ def graphviz_widget(
     case_toggle = ipywidgets.ToggleButton(
         value=False,
         description="Case Sensitive",
-        icon="check",
+        icon="font",
         layout=ipywidgets.Layout(width="auto"),
     )
 
@@ -127,18 +136,29 @@ def update_search_type(change: dict) -> None:
     def toggle_case_sensitive(change: dict) -> None:
         widget.case_sensitive = change["new"]
 
+    def toggle_freeze_scroll(change: dict) -> None:
+        widget.freeze_scroll = change["new"]
+        if widget.freeze_scroll:
+            freeze_toggle.description = "Unfreeze Scroll"
+            freeze_toggle.button_style = "danger"
+        else:
+            freeze_toggle.description = "Freeze Scroll"
+            freeze_toggle.button_style = "primary"
+
     reset_button.on_click(reset_graph)
     direction_selector.observe(update_direction, names="value")
     search_input.observe(perform_search, names="value")
     search_type_selector.observe(update_search_type, names="value")
     case_toggle.observe(toggle_case_sensitive, names="value")
+    freeze_toggle.observe(toggle_freeze_scroll, names="value")
 
     # Display ipywidgets
     return ipywidgets.VBox(
         [
             ipywidgets.HBox(
                 [
                     reset_button,
+                    freeze_toggle,
                     direction_selector,
                     search_input,
                     search_type_selector,

tests/test_widget.py

@@ -63,12 +63,13 @@ def test_graphviz_widget_full_structure() -> None:
     # Test control row 1 (reset and direction)
     control_row1 = widget.children[0]
     assert isinstance(control_row1, HBox)
-    assert len(control_row1.children) == 5
+    assert len(control_row1.children) == 6
     assert isinstance(control_row1.children[0], Button)  # Reset button
-    assert isinstance(control_row1.children[1], Dropdown)  # Direction selector
-    assert isinstance(control_row1.children[2], Text)  # Search input
-    assert isinstance(control_row1.children[3], Dropdown)  # Search type
-    assert isinstance(control_row1.children[4], ToggleButton)  # Case sensitive
+    assert isinstance(control_row1.children[1], ToggleButton)  # Freeze scroll button
+    assert isinstance(control_row1.children[2], Dropdown)  # Direction selector
+    assert isinstance(control_row1.children[3], Text)  # Search input
+    assert isinstance(control_row1.children[4], Dropdown)  # Search type
+    assert isinstance(control_row1.children[5], ToggleButton)  # Case sensitive
 
     # Test graph widget
     assert isinstance(widget.children[-1], GraphvizAnyWidget)
@@ -77,7 +78,7 @@ def test_graphviz_widget_full_structure() -> None:
 def test_graphviz_widget_direction_options() -> None:
     """Test direction selector options in full widget."""
     widget = graphviz_widget()
-    direction_selector = widget.children[0].children[1]
+    direction_selector = widget.children[0].children[2]
     assert set(direction_selector.options) == {
         "bidirectional",
         "downstream",
@@ -89,7 +90,7 @@ def test_graphviz_widget_direction_options() -> None:
 def test_graphviz_widget_search_type_options() -> None:
     """Test search type options in full widget."""
     widget = graphviz_widget()
-    search_type_selector = widget.children[0].children[3]
+    search_type_selector = widget.children[0].children[4]
     assert set(search_type_selector.options) == {"exact", "included", "regex"}