Hylograph.Interaction.Zoom

Package

purescript-hylograph-selection

Repository

afcondon/purescript-hylograph-selection

Native Zoom using Pointer Events (no D3 dependency)

This module provides zoom and pan behavior using native browser events:

• Wheel events for zoom
• Pointer events for pan/drag
• Gesture events for trackpad pinch (Safari)

The zoom transform math is adapted from d3-zoom (ISC licensed).

Usage

Simple API (drop-in replacement for existing zoom)

import Hylograph.Interaction.Zoom (attachZoomNative)

svgElement <- select "#my-svg"
handle <- attachZoomNative svgElement
  { scaleMin: 0.5, scaleMax: 4.0, targetSelector: ".zoom-group" }

-- Later:
handle.destroy

With Initial Transform

handle <- attachZoomWithTransform svgElement
  0.5 4.0 ".zoom-group" savedTransform

With Callback

handle <- attachZoomWithCallback svgElement
  0.5 4.0 ".zoom-group" initialTransform \t -> do
    log $ "Scale: " <> show t.k

Full Control

handle <- attachNativeZoom svgElement
  { scaleMin: 0.1
  , scaleMax: 10.0
  , targetSelector: ".zoom-group"
  , initialTransform: Just { k: 1.0, x: 0.0, y: 0.0 }
  , translateExtent: Nothing
  , onZoom: Just \t -> log $ "Zoom: " <> show t.k
  }

-- Programmatic zoom
handle.zoomTo 2.0 { x: 400.0, y: 300.0 }
handle.zoomBy 1.5
handle.resetZoom

-- Get current state
t <- handle.getTransform

-- Cleanup
handle.destroy

type ZoomTransform = { k :: Number, x :: Number, y :: Number }

type ZoomConfig = { initialTransform :: Maybe ZoomTransform, onZoom :: Maybe (ZoomTransform -> Effect Unit), scaleMax :: Number, scaleMin :: Number, targetSelector :: String, translateExtent :: Maybe BoundingBox }

type ZoomHandle = { destroy :: Effect Unit, getTransform :: Effect ZoomTransform, resetZoom :: Effect Unit, setTransform :: ZoomTransform -> Effect Unit, zoomBy :: Number -> Effect Unit, zoomTo :: Number -> Point -> Effect Unit }

type BoundingBox = { x0 :: Number, x1 :: Number, y0 :: Number, y1 :: Number }

type Point = { x :: Number, y :: Number }

attachNativeZoom :: Element -> ZoomConfig -> Effect ZoomHandle

attachZoomNative :: Element -> Number -> Number -> String -> Effect ZoomHandle

attachZoomWithTransform :: Element -> Number -> Number -> String -> ZoomTransform -> Effect ZoomHandle

attachZoomWithCallback :: Element -> Number -> Number -> String -> ZoomTransform -> (ZoomTransform -> Effect Unit) -> Effect ZoomHandle

identity :: ZoomTransform