Landmark A — doc-y 100px
Landmark B — doc-y 600px
Landmark C — doc-y 1200px
Landmark D — doc-y 2000px
back

Document-space panels

Pass coordinateSpace: "document" to mount a panel in the absolute document layer. The panel's left/top are pixel offsets from the document origin — the same coordinate system as element.offsetTop — so the panel scrolls with the page.

import panel from "../index.js";

// Open at document coordinates — panel scrolls with the page.
panel.open("", "Note", {
  coordinateSpace: "document",
  left: 200,    // pixels from left edge of document
  top:  800,    // pixels from top of document
  width: 280, height: 180
});

// Tip: place next to a DOM element using its offsetTop.
const el = document.getElementById("my-section");
panel.open("", "Annotation", {
  coordinateSpace: "document",
  left: el.offsetLeft + el.offsetWidth + 16,
  top:  el.offsetTop,
  width: 240, height: 160
});