State Persistence & Snap-to-Edges
The persistable plugin saves panel position, size, and minimized state to
localStorage. The snappable plugin snaps panels to viewport edges
(and optionally to other panels) while dragging.
Persistence
import panel from "../index.js";
// persist:"key" auto-adds the persistable plugin and saves to localStorage.
const handle = panel.open("", "Settings", {
persist: "my-settings-panel", // storage key (namespaced as "panel-api:my-settings-panel")
width: 360, height: 280
});
// Manual save / restore
handle.saveState(); // write current bounds + minimized to localStorage
handle.restoreState(); // read and apply saved state
Snap-to-Edges
import panel from "../index.js";
// Snap to viewport edges (default: threshold 16px, edges enabled).
panel.open("", "Snappable", {
plugins: [...panel.defaults.plugins, "snappable"],
snapThreshold: 20, // px within which a snap fires (default 16)
snapEdges: true, // snap to viewport edges (default)
snapPanels: false, // snap to other open panels (default false)
width: 300, height: 180
});
// Snap to other panels too.
panel.open("", "Snap to panels", {
plugins: [...panel.defaults.plugins, "snappable"],
snapEdges: true,
snapPanels: true,
width: 260, height: 160
});