Intro

ZoomPane

The zoompane is large canvas, just like the one used in toddle. It lets you pan around by scrolling or holding space while dragging. You can also zoom in and out.

Demo

This whole thing is a demo  ⌘ + scroll to zoom

Components

  • zoom-pane

    The zoom-pane lets you place a large amount of content an a canvas that you can pan around on and zoom in and out.

    Replace this with a screenshot or embed the component

    Attributes

    SizeThe size of the canvas (defaults to 8000px)
    state[Optional] If you want to have control over the internal state of the component you can set the state attribute. 

    The state attribute is an object with three properties:

    "left": the amount of pixels the canvas has been shifted left.
    "top": the amount of pixels the canvas has been shifted down.
    "zoom": the zoom factor. between 0.3 and 5. 1 means no zoom.

    Events

    changeWhen ever the panel is moved, or zoomed the change event will trigger with the new state. This has the same format as the state attibute.