Add MatplotlibChartWithToolbar and update test

Introduces MatplotlibChartWithToolbar for integrated chart and toolbar controls. Updates __init__.py to export the new class, refactors tests/mpl_v2_basic.py to use MatplotlibChartWithToolbar, and adds debug output and minor improvements to MatplotlibChart.

Author: FeodorFitsner

src/flet_charts/__init__.py

@@ -24,6 +24,7 @@
     MatplotlibChartMessageEvent,
     MatplotlibChartToolbarButtonsUpdateEvent,
 )
+from flet_charts.matplotlib_chart_with_toolbar import MatplotlibChartWithToolbar
 from flet_charts.pie_chart import PieChart, PieChartEvent
 from flet_charts.pie_chart_section import PieChartSection
 from flet_charts.plotly_chart import PlotlyChart
@@ -84,4 +85,5 @@
     "ScatterChartTooltip",
     "MatplotlibChartMessageEvent",
     "MatplotlibChartToolbarButtonsUpdateEvent",
+    "MatplotlibChartWithToolbar",
 ]

src/flet_charts/matplotlib_chart.py

@@ -355,6 +355,7 @@ def send_message(self, message):
             manager.handle_json(message)
 
     def send_json(self, content):
+        print(f"send_json: {content}")
         self._main_loop.call_soon_threadsafe(
             lambda: self._receive_queue.put_nowait((False, content))
         )
@@ -378,4 +379,6 @@ async def on_canvas_resize(self, e: fc.CanvasResizeEvent):
             self.send_message({"type": "refresh"})
         self._width = e.width
         self._height = e.height
-        self.send_message({"type": "resize", "width": e.width, "height": e.height})
+        self.send_message(
+            {"type": "resize", "width": self._width, "height": self._height}
+        )

src/flet_charts/matplotlib_chart_with_toolbar.py

@@ -0,0 +1,110 @@
+from dataclasses import field
+
+import flet as ft
+from matplotlib.figure import Figure
+
+import flet_charts
+
+_download_formats = [
+    "eps",
+    "jpeg",
+    "pgf",
+    "pdf",
+    "png",
+    "ps",
+    "raw",
+    "svg",
+    "tif",
+    "webp",
+]
+
+
+@ft.control(kw_only=True)
+class MatplotlibChartWithToolbar(ft.Column):
+    figure: Figure = field(metadata={"skip": True})
+    """
+    Matplotlib figure to draw - an instance of
+    [`matplotlib.figure.Figure`](https://matplotlib.org/stable/api/_as_gen/matplotlib.figure.Figure.html#matplotlib.figure.Figure).
+    """
+
+    def build(self):
+        self.mpl = flet_charts.MatplotlibChart(
+            figure=self.figure,
+            expand=True,
+            on_message=self.on_message,
+            on_toolbar_buttons_update=self.on_toolbar_update,
+        )
+        self.home_btn = ft.IconButton(ft.Icons.HOME, on_click=lambda: self.mpl.home())
+        self.back_btn = ft.IconButton(
+            ft.Icons.ARROW_BACK_ROUNDED, on_click=lambda: self.mpl.back()
+        )
+        self.fwd_btn = ft.IconButton(
+            ft.Icons.ARROW_FORWARD_ROUNDED, on_click=lambda: self.mpl.forward()
+        )
+        self.pan_btn = ft.IconButton(
+            ft.Icons.OPEN_WITH,
+            selected_icon=ft.Icons.OPEN_WITH,
+            selected_icon_color=ft.Colors.AMBER_800,
+            on_click=self.pan_click,
+        )
+        self.zoom_btn = ft.IconButton(
+            ft.Icons.ZOOM_IN,
+            selected_icon=ft.Icons.ZOOM_IN,
+            selected_icon_color=ft.Colors.AMBER_800,
+            on_click=self.zoom_click,
+        )
+        self.download_btn = ft.IconButton(
+            ft.Icons.DOWNLOAD, on_click=self.download_click
+        )
+        self.download_fmt = ft.Dropdown(
+            value="png",
+            options=[ft.DropdownOption(fmt) for fmt in _download_formats],
+        )
+        self.msg = ft.Text()
+        self.controls = [
+            ft.Row(
+                [
+                    self.home_btn,
+                    self.back_btn,
+                    self.fwd_btn,
+                    self.pan_btn,
+                    self.zoom_btn,
+                    self.download_btn,
+                    self.download_fmt,
+                    self.msg,
+                ]
+            ),
+            self.mpl,
+        ]
+        if not self.expand:
+            if not self.height:
+                self.height = self.figure.bbox.height
+            if not self.width:
+                self.width = self.figure.bbox.width
+
+    def on_message(self, e: flet_charts.MatplotlibChartMessageEvent):
+        print(f"on_message: {e.message}")
+        self.msg.value = e.message
+
+    def on_toolbar_update(
+        self, e: flet_charts.MatplotlibChartToolbarButtonsUpdateEvent
+    ):
+        self.back_btn.disabled = not e.back_enabled
+        self.fwd_btn.disabled = not e.forward_enabled
+
+    def pan_click(self):
+        self.mpl.pan()
+        self.pan_btn.selected = not self.pan_btn.selected
+        self.zoom_btn.selected = False
+
+    def zoom_click(self):
+        self.mpl.zoom()
+        self.pan_btn.selected = False
+        self.zoom_btn.selected = not self.zoom_btn.selected
+
+    async def download_click(self):
+        fmt = self.download_fmt.value
+        buffer = self.mpl.download(fmt)
+        title = self.figure.canvas.manager.get_window_title()
+        fp = ft.FilePicker()
+        await fp.save_file(file_name=f"{title}.{fmt}", src_bytes=buffer)

tests/mpl_v2_basic.py

@@ -13,123 +13,44 @@
 
 
 def main(page: ft.Page):
-    # Sample data
-    x = np.linspace(0, 10, 100)
-    y = np.sin(x)
+    # # Sample data
+    # x = np.linspace(0, 10, 100)
+    # y = np.sin(x)
+
+    # # Plot
+    # fig = plt.figure()
+    # print("Figure number:", fig.number)
+    # plt.plot(x, y)
+    # plt.title("Interactive Sine Wave")
+    # plt.xlabel("X axis")
+    # plt.ylabel("Y axis")
+    # plt.grid(True)
+
+    # ----------------------------------------------------------
+
+    plt.style.use("_mpl-gallery")
+
+    # Make data for a double helix
+    n = 50
+    theta = np.linspace(0, 2 * np.pi, n)
+    x1 = np.cos(theta)
+    y1 = np.sin(theta)
+    z1 = np.linspace(0, 1, n)
+    x2 = np.cos(theta + np.pi)
+    y2 = np.sin(theta + np.pi)
+    z2 = z1
 
     # Plot
-    fig = plt.figure()
-    print("Figure number:", fig.number)
-    plt.plot(x, y)
-    plt.title("Interactive Sine Wave")
-    plt.xlabel("X axis")
-    plt.ylabel("Y axis")
-    plt.grid(True)
-
-    # plt.style.use('_mpl-gallery')
-
-    # # Make data for a double helix
-    # n = 50
-    # theta = np.linspace(0, 2*np.pi, n)
-    # x1 = np.cos(theta)
-    # y1 = np.sin(theta)
-    # z1 = np.linspace(0, 1, n)
-    # x2 = np.cos(theta + np.pi)
-    # y2 = np.sin(theta + np.pi)
-    # z2 = z1
+    fig, ax = plt.subplots(subplot_kw={"projection": "3d"})
+    ax.fill_between(x1, y1, z1, x2, y2, z2, alpha=0.5)
+    ax.plot(x1, y1, z1, linewidth=2, color="C0")
+    ax.plot(x2, y2, z2, linewidth=2, color="C0")
 
-    # # Plot
-    # fig, ax = plt.subplots(subplot_kw={"projection": "3d"})
-    # ax.fill_between(x1, y1, z1, x2, y2, z2, alpha=0.5)
-    # ax.plot(x1, y1, z1, linewidth=2, color='C0')
-    # ax.plot(x2, y2, z2, linewidth=2, color='C0')
-
-    # ax.set(xticklabels=[],
-    #     yticklabels=[],
-    #     zticklabels=[])
-
-    # plt.show()
-
-    download_formats = [
-        "eps",
-        "jpeg",
-        "pgf",
-        "pdf",
-        "png",
-        "ps",
-        "raw",
-        "svg",
-        "tif",
-        "webp",
-    ]
-
-    fp = ft.FilePicker()
-
-    msg = ft.Text()
-
-    def on_message(e: flet_charts.MatplotlibChartMessageEvent):
-        msg.value = e.message
-
-    def on_toolbar_update(e: flet_charts.MatplotlibChartToolbarButtonsUpdateEvent):
-        back_btn.disabled = not e.back_enabled
-        fwd_btn.disabled = not e.forward_enabled
-
-    def pan_click():
-        mpl.pan()
-        pan_btn.selected = not pan_btn.selected
-        zoom_btn.selected = False
-
-    def zoom_click():
-        mpl.zoom()
-        pan_btn.selected = False
-        zoom_btn.selected = not zoom_btn.selected
-
-    async def download_click():
-        fmt = dwnld_fmt.value
-        buffer = mpl.download(fmt)
-        title = fig.canvas.manager.get_window_title()
-        await fp.save_file(file_name=f"{title}.{fmt}", src_bytes=buffer)
-
-    mpl = flet_charts.MatplotlibChart(
-        figure=fig,
-        expand=True,
-        on_message=on_message,
-        on_toolbar_buttons_update=on_toolbar_update,
-    )
-
-    # fig1.canvas.start()
-    page.add(
-        ft.Row(
-            [
-                ft.IconButton(ft.Icons.HOME, on_click=lambda: mpl.home()),
-                back_btn := ft.IconButton(
-                    ft.Icons.ARROW_BACK_ROUNDED, on_click=lambda: mpl.back()
-                ),
-                fwd_btn := ft.IconButton(
-                    ft.Icons.ARROW_FORWARD_ROUNDED, on_click=lambda: mpl.forward()
-                ),
-                pan_btn := ft.IconButton(
-                    ft.Icons.PAN_TOOL_OUTLINED,
-                    selected_icon=ft.Icons.PAN_TOOL_OUTLINED,
-                    selected_icon_color=ft.Colors.AMBER_800,
-                    on_click=pan_click,
-                ),
-                zoom_btn := ft.IconButton(
-                    ft.Icons.ZOOM_IN,
-                    selected_icon=ft.Icons.ZOOM_IN,
-                    selected_icon_color=ft.Colors.AMBER_800,
-                    on_click=zoom_click,
-                ),
-                ft.IconButton(ft.Icons.DOWNLOAD, on_click=download_click),
-                dwnld_fmt := ft.Dropdown(
-                    value="png",
-                    options=[ft.DropdownOption(fmt) for fmt in download_formats],
-                ),
-                msg,
-            ]
-        ),
-        mpl,
-    )
+    ax.set(xticklabels=[], yticklabels=[], zticklabels=[])
+
+    plt.show()
+
+    page.add(flet_charts.MatplotlibChartWithToolbar(figure=fig, expand=True))
 
 
 ft.run(main)