Hey @Chris_Taylor, is there any way to limit panning to a specific axis? We're looking at using your module to give operators access to P&IDs on mobile devices and this module seems perfect. However I'd like to (possibly) disable zoom and only allow panning horizontally to keep the interface simpler to navigate around in.
Also, is it possible to provide panning bounds, as I noticed that I can pan well beyond the bounds of the display and can get lost in the abyss.
I've tried to write to the props.currentState.posX prop but it seems this is read-only. I just saw the doco has methods available, my bad! setPosition with the onPositionChanged event provides a kinda solution, but you can still keep trying to pan the page beyond the bounds and every few hundred-ish ms you can bring it back to the bounded value. It'd be nice if you could hard-limit the bounds
A few bugs found:
- when using
setPosition the currentState props aren't updated
props.minScale isn't honoured when config.fitOnMount is true - it initially loads much smaller than the min (in my testing). Once you use the mouse to zoom in it jumps to the minScale setting- I've found a bug where panning sometimes clips the right side of the embedded content, and sometimes clips the entire content and you don't seem to be able to get it back, see video. It could be the settings I've applied? I've attached the view json defintion below as well in case. I can only seem to get it to do this if it's set to
fitToMount: true
View Definition
{
"custom": {},
"params": {},
"props": {},
"root": {
"children": [
{
"meta": {
"name": "Label"
},
"propConfig": {
"props.text": {
"binding": {
"config": {
"expression": "{../root.props.currentState}"
},
"type": "expr"
}
}
},
"props": {
"style": {
"fontSize": "16pt"
}
},
"type": "ia.display.label"
},
{
"children": [
{
"meta": {
"name": "Operational Digram"
},
"position": {
"height": 960,
"width": 1920
},
"props": {
"path": "Pages/Station A/Operational Digram"
},
"type": "ia.display.view"
}
],
"events": {
"component": {
"onDoubleTap": {
"config": {
"script": "\tself.setPosition(0,0)"
},
"scope": "G",
"type": "script"
},
"onPositionChanged": {
"config": {
"script": "#\txLimit \u003d -500\n#\tx \u003d None\n#\t\n#\tif event.newX \u003c xLimit:\n#\t\tx \u003d xLimit\n#\t\n#\tif event.newY !\u003d 0:\n#\t\ty \u003d 0\n#\t\tx \u003d x or event.newX\n#\t\n#\tif x:\n#\t\tself.setPosition(x,y)"
},
"scope": "G",
"type": "script"
}
}
},
"meta": {
"name": "root",
"tooltip": {
"enabled": true,
"text": null
}
},
"position": {
"grow": 1
},
"props": {
"config": {
"fitOnMount": true,
"fitOnMountInstantly": true
},
"currentState": {
"posX": 375,
"posY": -111.2734375,
"scale": 0.777453125
},
"dimensions": {
"innerHeight": 960,
"innerWidth": 1920
},
"minScale": 0.5
},
"type": "bijc.container.zoompan"
}
],
"meta": {
"name": "root"
},
"props": {
"direction": "column"
},
"type": "ia.container.flex"
}
}
I don't really understand what the props.dimensions is for. It seems to be able to clip the components within the pan/zoom container, but I don't quite understand why this wouldn't always be set to the size of the components
