createZoomHandler

<script>
  import { 
    Graphic, Section, Rectangle, XAxis, YAxis, createZoomHandler
  } from '@snlab/florence'

  let zoomIdentity = { x: 0, y: 0, kx: 1, ky: 1 }
  const setZoomIdentity = zoomId => { zoomIdentity = zoomId }

  const zoom = createZoomHandler(zoomIdentity, {
    setZoomIdentity,
    minZoom: 0.2,
    maxZoom: 3
  })
</script>

<Graphic width={200} height={200} padding={20}>

  <Section
    scaleX={[0, 10]}
    scaleY={[0, 10]}
    {zoomIdentity}
    {...zoom.handlers}
  >
  
    <Rectangle x1={2.5} x2={7.5} y1={2.5} y2={7.5} />

    <XAxis />
    <YAxis />

  </Section>

</Graphic>

Arguments

zoomIdentity and zoomSettings.setZoomIdentity work similar to their counterparts in createPanHandler.

• minZoom: limits zooming out to this level
• maxZoom: limits zooming in to this level
• step: indicates how sensitive zooming is (higher is more sensitive)
• dimension: makes it possible to limit zooming in only one dimensions

Return value

createZoomHandler returns an Object of the following form:

{
  handlers: {
    onWheel: <Function>,
    onPinch: <Function>
  },

  reset: <Function>
}

The handlers can be spread over the Section, and enable the actual zooming behavior. The reset method will reset the zoomIdentity originally passed to createZoomHandler to { x: 0, y: 0, kx: 1, ky: 1 }.