<div id="root">
  <div id="artboard">
    <h1>Hello World!</h1>

    <ul>
      <li>Use wheel to scroll vertically</li>
      <li>Use Shift + wheel to scroll horizontally</li>
      <li>Use Ctrl + wheel to zoom</li>
      <li>Click and drag to pan</li>
    </ul>

    <a href="https://artboard-deluxe.dulnan.net" target="_blank">artboard-deluxe.dulnan.net</a>
    <p>You can still click links!</p>
  </div>
</div>

body {
  margin: 0;
  font-family: sans-serif;
}

#root {
  height: 100vh;
  position: relative;
  background: #dfdfdf;
  overflow: hidden;
}

#artboard {
  padding: 2rem;
  background: white;
  width: 500px;
  height: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 12px 0 #b6b6b6;
  border-radius: 5px;
}

h1 {
  margin: 0;
  text-align: center;
}

import {
  createArtboard,
  dom,
  mouse,
  wheel,
  touch,
  raf
} from "https://esm.sh/artboard-deluxe";

const rootElement = document.getElementById("root");
const artboardElement = document.getElementById("artboard");
const artboard = createArtboard(rootElement, [
  dom({
    element: artboardElement,
    setInitTransformFromRect: true
  }),
  wheel({
    useMomentumScroll: true,
    useMomentumZoom: true
  }),
  mouse(),
  touch(),
  raf()
]);