createPanHandler
Helper function to set up panning behavior on Section
s.
<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
Argument | Required | Type(s) | Default | Unit(s) |
---|---|---|---|---|
zoomIdentity | true |
Object |
undefined |
See explanation |
panSettings | true |
Object |
undefined |
See explanation |
panSettings.setZoomIdentity | true |
Function |
undefined |
See explanation |
panSettings.setBlockReindexing | false |
Function |
() => {} |
See explanation |
panSettings.dimension | false |
String |
'both' |
'x' , 'y' or 'both' |
panSettings.extentX | false |
Number[] |
[-Infinity, Infinity] |
Pixel |
panSettings.extentY | false |
Number[] |
[-Infinity, Infinity] |
Pixel |
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 thezoomIdentity
setBlockReindexing
is a function that updates theblockReindexing
dimension
can be used to limit scrolling to a either the x or y dimensionextentX
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 }
.