ArtboardDeluxev0.0.2

Mouse and touch friendly artboard library to pan and zoom any element or canvas.

Features

  • Dragging

    Drag by pressing Space and clicking or using touch gestures.

  • Zooming

    Ctrl/Cmd + scroll wheel to zoom or pinch with two fingers.

  • Keyboard

    Use keyboard shortcuts to interact with the artboard.

  • Animation

    Unobtrusive smooth animations to help navigating.

  • Performance

    Uses CSS transforms, animation loops and passive listeners.

  • Modular

    Plugins for mouse, touch or wheel interaction.

Usage

<div id="root"> <div id="artboard">Hello World!</div> </div> <script> import { createArtboard, dom, mouse, wheel, raf } from 'artboard-deluxe' const artboard = createArtboard( document.getElementById('root'), [ dom({ element: document.getElementById('artboard') }), mouse(), wheel(), raf() ] ) </script> <style> #root { position: relative; width: 500px; height: 500px; } </style>

Plugins

Scrollbar

Renders a horizontal or vertical scrollbar.

import { createArtboard, scrollbar } from 'artboard-deluxe' const artboard = createArtboard( rootElement, [ scrollbar({ element: scrollbarElement, orientation: 'x' }) ] )