https://github.com/dulnan/artboard-deluxe
Mouse and touch friendly artboard library to pan and zoom any DOM element or canvas.
https://github.com/dulnan/artboard-deluxe
artboard drag momentum pan smooth-scrolling typescript zoom
Last synced: 6 months ago
JSON representation
Mouse and touch friendly artboard library to pan and zoom any DOM element or canvas.
- Host: GitHub
- URL: https://github.com/dulnan/artboard-deluxe
- Owner: dulnan
- License: mit
- Created: 2024-11-10T13:14:52.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-02-02T17:06:48.000Z (9 months ago)
- Last Synced: 2025-05-13T13:13:46.276Z (6 months ago)
- Topics: artboard, drag, momentum, pan, smooth-scrolling, typescript, zoom
- Language: TypeScript
- Homepage: https://artboard-deluxe.dulnan.net
- Size: 8.5 MB
- Stars: 11
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Artboard Deluxe - Mouse and touch friendly artboard library
**[Demo](https://artboard-deluxe.dulnan.net)** -
**[Docs](https://artboard-deluxe.dulnan.net/docs)** -
**[NPM](https://npmjs.com/package/artboard-deluxe)**
- Use mouse, touch or wheel to pan, drag, scroll or zoom
- Smooth/momentum scrolling, animations, scroll velocity
- Works with a DOM element or HTML canvas (2D, WebGL)
- Plugins for rendering scrollbars, overview or additional interactions
- Plugin for adding keyboard shortcuts (Arrow, Page Up/Down, Ctrl+0, etc.)
## Usage
```bash
npm install --save artboard-deluxe
```
### Minimal Example
```html
Hello World!
#root {
position: relative;
width: 500px;
height: 500px;
}
#artboard {
background: white;
}
import { createArtboard, mouse, wheel, raf, dom } from 'artboard-deluxe'
const artboard = createArtboard(document.getElementById('root'), [
dom({
element: document.getElementById('artboard'),
}),
mouse(),
wheel(),
raf(),
])
```