Module

Hylograph.Canvas.Zoom

Zoom and Pan support for Canvas

Provides event subscriptions and transform helpers for implementing zoom/pan interactions on Canvas visualizations.

type ZoomEvent = { delta :: Number, x :: Number, y :: Number }

Zoom event from mouse wheel delta: zoom factor (< 1 = zoom out, > 1 = zoom in) x, y: mouse position relative to canvas

type DragState = { active :: Boolean, lastX :: Number, lastY :: Number, startX :: Number, startY :: Number }

Internal drag state (start position, button pressed)

type DragEvent = { dx :: Number, dy :: Number }

Drag event for panning dx, dy: movement delta since last event

subscribeWheel :: CanvasContext -> (ZoomEvent -> Effect Unit) -> Effect Unsubscribe

Subscribe to wheel events on a canvas context

subscribeDrag :: CanvasContext -> (DragEvent -> Effect Unit) -> Effect Unsubscribe

Subscribe to drag events on a canvas context

type Unsubscribe = Effect Unit

Function to unsubscribe from events

zoomAt :: ZoomEvent -> Transform -> Transform

Apply a zoom event to a transform, zooming toward the mouse position This keeps the point under the mouse stationary during zoom

pan :: DragEvent -> Transform -> Transform

Apply a drag event to a transform (panning)

screenToWorld :: Transform -> { x :: Number, y :: Number } -> { x :: Number, y :: Number }

Convert screen coordinates to world coordinates

worldToScreen :: Transform -> { x :: Number, y :: Number } -> { x :: Number, y :: Number }

Convert world coordinates to screen coordinates