`InteractiveViewer`: `zoom(...)` ignores `min_scale`/`max_scale`, `pan` ignores control bounds

[jgersti]

Duplicate Check

• I have searched the opened issues and there are no duplicates

Describe the bug

Using the zoom(...) method ignores the zoom limits set with min_scale / max_scale.
Using pan(...) moves the content regardless of bounds.

Code sample

Code

copied from #4451

import flet as ft


def main(page: ft.Page):
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
    page.vertical_alignment = ft.MainAxisAlignment.CENTER

    async def handle_zoom_in():
        await i.zoom(1.2)

    async def handle_zoom_out():
        await i.zoom(0.8)

    async def handle_pan():
        await i.pan(50, 50)

    async def handle_reset():
        await i.reset()

    async def handle_reset_animation():
        await i.reset(animation_duration=ft.Duration(seconds=2))

    async def handle_save_state():
        await i.save_state()

    async def handle_restore_state():
        await i.restore_state()

    page.add(
        i := ft.InteractiveViewer(
            min_scale=0.1,
            max_scale=5,
            boundary_margin=ft.Margin.all(20),
            content=ft.Image(src="https://picsum.photos/500/500"),
        ),
        ft.Row(
            wrap=True,
            controls=[
                ft.Button("Zoom In", on_click=handle_zoom_in),
                ft.Button("Zoom Out", on_click=handle_zoom_out),
                ft.Button("Pan", on_click=handle_pan),
                ft.Button("Save State", on_click=handle_save_state),
                ft.Button("Restore State", on_click=handle_restore_state),
                ft.Button("Reset", on_click=handle_reset),
                ft.Button("Reset with Animation", on_click=handle_reset_animation),
            ],
        ),
    )


ft.run(main)

To reproduce

1. Repeatedly click the either "Zoom In", "Zoom Out", or "Pan"
2. Observe infinite pan and zoom.

Expected behavior

• Values for min_scale and max_scale are honored.
• Panning and Zooming behave the same programmatically and interactivly (e.g. mouse interactions)

Operating System

Windows

Flet version

25.2

Regression

No, it isn't

[jgersti]

The proper behavior for these operations is implemented in the in class _InteractiveViewerState methods _matrixScale(...) and _matrixTranslate(...). Unfortunately these are all private.

As quite a few people stated in various flutter github issues: the sanest way to work with with InteractiveViewer (flutter widget) is to copy the code and fix the shortcomings yourself, especially because the implementation is needlessly complicated.

Currently the Matrix4 object will only ever have 6 values that are not zero. The first three entries of the diagonal are the same and represent the current scale level, the fourth is always 1, the first and second value of the last row contain the x resp. y translation. (Note: this representation of a affine transformation is transposed to the one usually found in math text books / Wikipedia.)