Phoenix LiveView hook for zoom and pan interactions.

Enables mouse wheel zoom and drag-to-pan on SVG elements. Transform state is synced back to the LiveView for server-side updates.

Usage

1. Add the hook to your app.js:

   import { ZoomHook } from "visualize/hooks"

   let liveSocket = new LiveSocket("/live", Socket, { hooks: { ZoomHook } })

2. Use in your LiveView template:

   <svg phx-hook="ZoomHook"

     id="my-chart"
     data-min-zoom="0.5"
     data-max-zoom="10"
     phx-update="ignore">

   <g class="zoom-container">

    <!-- Your chart content -->

   </g> </svg>

3. Handle zoom events in your LiveView:

   def handle_event("zoom", %{"k" => scale, "x" => x, "y" => y}, socket) do {:noreply, assign(socket, transform: %{k: scale, x: x, y: y})} end

Configuration

Data attributes on the SVG element:

• data-min-zoom - Minimum zoom level (default: 0.1)
• data-max-zoom - Maximum zoom level (default: 10)
• data-zoom-event - Event name to push (default: "zoom")
• data-disable-wheel - Set to "true" to disable wheel zoom
• data-disable-drag - Set to "true" to disable drag pan