A development tool for visualizing `DOMRect` rectangles.
npm install rect-visualizerA development tool for visualizing DOMRect rectangles.
``bash`
npm install -D rect-visualizer
`javascript
// while you import rect-visualizer, it will be assigned to window.rv
import rv from "rect-visualizer";
// you may get rects by Range.getClientRects while you have a selection
const rects = getSelection().getRangeAt(0)?.getClientRects() ?? [];
// draw rects, with 1px solid border to avoid invisible when width or height is 0
rv.drawClientRects(rects, {
// alpha: 0.6,
// clear: true,
// colors: ["red", "green", "blue"],
});
// or append a single rect (which can with a name).
rv.drawClientRect(someRect, {name: "SomeRect", color: "#239923aa"})
// clear all rects
rv.clear();
``