Add resize handler for FloatPanel (#6201)

holoviz · Jan 14, 2024 · 978dfa7 · 978dfa7
1 parent 4bc5fab
commit 978dfa7
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 3 deletions.
diff --git a/panel/layout/float.py b/panel/layout/float.py
@@ -106,8 +106,14 @@ class FloatPanel(ListLike, ReactiveHTML):
         config = {...config, ...data.config}
         state.panel = jsPanel.create(config);
         if (data.status !== 'normalized') {
-           view.run_script('status')
+          view.run_script('status')
         }
+        state.resizeHandler = (event) => {
+          if (event.panel === state.panel) {
+            view.invalidate_layout()
+          }
+        }
+        document.addEventListener('jspanelresizestop', state.resizeHandler, false)
         """,
         "name": "state.panel.setHeaderTitle(data.name)",
         "status": """
@@ -138,7 +144,11 @@ class FloatPanel(ListLike, ReactiveHTML):
         """,
         "contained": "delete state.panel; view.invalidate_render();",
         "theme": "state.panel.setTheme(data.theme)",
-        "remove": "view.run_script('close'); state.panel = undefined;",
+        "remove": """
+        document.removeEventListener('jspanelresizestop', state.resizeHandler, false);
+        view.run_script('close');
+        state.panel = undefined;
+        """,
         "offsetx": "view.run_script('reposition')",
         "offsety": "view.run_script('reposition')",
         "position": "if (!data.contained) { view.run_script('reposition') }",

diff --git a/panel/tests/ui/layout/test_floatpanel.py b/panel/tests/ui/layout/test_floatpanel.py
@@ -1,6 +1,6 @@
 import pytest
 
-from panel import FloatPanel, Spacer
+from panel import FloatPanel, Row, Spacer
 from panel.tests.util import serve_component, wait_until
 
 pytestmark = pytest.mark.ui
@@ -32,3 +32,22 @@ def test_float_panel_status_set_on_init(page):
     wait_until(lambda: (
         float_container.bounding_box()['y'] + float_container.bounding_box()['height']
     ) == page.viewport_size['height'], page)
+
+def test_float_panel_resize(page):
+    float_panel = FloatPanel(
+        Row(
+            Spacer(styles=dict(background='red'), css_classes=['red'], height=200, sizing_mode='stretch_width'),
+            Spacer(styles=dict(background='green'), css_classes=['green'], height=200, sizing_mode='stretch_width'),
+            Spacer(styles=dict(background='blue'), css_classes=['blue'], height=200, sizing_mode='stretch_width'),
+        )
+    )
+
+    serve_component(page, float_panel)
+
+    resize_handle = page.locator('.jsPanel-resizeit-se')
+
+    resize_handle.drag_to(resize_handle, target_position={'x': 510, 'y': 300}, force=True)
+
+    wait_until(lambda: int(page.locator('.red').bounding_box()['width']) == 200, page)
+    wait_until(lambda: int(page.locator('.green').bounding_box()['width']) == 200, page)
+    wait_until(lambda: int(page.locator('.blue').bounding_box()['width']) == 200, page)