JAVASCRIPT EXAMPLES Draggable Image Port
In this example, an instance of Uize.Widget.ImagePort.Draggable is wired up to let you explore an image inside an image port. Click-and-drag on the image to pan it from side to side. Ctrl-click-and-drag up and down to zoom in and out, respectively. Additionally, sliders (instances of the Uize.Widgets.Slider.Widget class) are wired up to control the alignX and alignY state properties of the widget, and a slider and two select boxes are wired up to control the sizingValue, sizingUpperBound, and sizingLowerBound state properties. Event handlers wire the widgets bidirectionally, so dragging inside the image port updates the sliders, and dragging the sliders updates the image port.