createPanHandler

Helper function to set up panning behavior on Sections.

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

  let zoomIdentity = { x: 0, y: 0, kx: 1, ky: 1 }
  let blockReindexing = false

  const setZoomIdentity = zoomId => { zoomIdentity = zoomId }
  const setBlockReindexing = bool => { blockReindexing = bool }

  const pan = createPanHandler(zoomIdentity, {
    setZoomIdentity,
    setBlockReindexing,
    extentX: [-100, 100],
    extentY: [-100, 100]
  })
</script>

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

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

    <XAxis />
    <YAxis />

  </Section>

</Graphic>

Arguments

zoomIdentity must be an Object of the form:

{ 
  x: <Number>,
  y: <Number>,
  kx: <Number>,
  ky: <Number>
}

Where x and y represent the amount in pixels that the Section is panned to the right and bottom. kx and ky represent zooming factors, which are not used for panning. Its default values (i.e. no zooming and panning) are:

{ 
  x: 0,
  y: 0,
  kx: 1,
  ky: 1
}

panSettings must be an Object with the following possible members:

{
  setZoomIdentity: <Function>,
  setBlockReindexing: <Function>,
  dimension: <String>,
  extentX: <Array>,
  extentY: <Array>
}

where

• setZoomIdentity is a function that updates the zoomIdentity
• setBlockReindexingis a function that updates the blockReindexing
• dimension can be used to limit scrolling to a either the x or y dimension
• extentX determines how far can be scrolled in the x dimension (if set to [0, 0] scrolling will be disabled in the x dimension)
• extentY determines how far can be scrolled in the y dimension (if set to [0, 0] scrolling will be disabled in the y dimension)

Return value

createPanHandler returns an Object of the following form:

{
  handlers: {
    onMousedown: <Function>,
    onMousemove: <Function>,
    onMouseup: <Function>
  },

  reset: <Function>
}

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