Skip to content

Instantly share code, notes, and snippets.

@zhigang1992
Forked from mlewand/renderRect.js
Created January 1, 2020 15:14
Show Gist options
  • Save zhigang1992/8450b449dbbc3ddce8536cf47ef8dee3 to your computer and use it in GitHub Desktop.
Save zhigang1992/8450b449dbbc3ddce8536cf47ef8dee3 to your computer and use it in GitHub Desktop.
DOMRect visualisation - a small helper for visualizing DOMRect objects.
( function() {
/**
* A helper function to visualize DOMRect or set of DOMRect instances.
*
* Subsequent calls will remove previously marked elements.
*
* Debug a element currently focused in your devtools inspector.
* window.markRect( $0.getBoundingClientRect() );
* // Debug a selection.
* window.markRect( document.getSelection().getRangeAt( 0 ).getClientRects() );
*/
var drawnRect = [];
/**
* @param {DOMRect/DOMRect[]} rectangles
*/
window.markRect = function( rectangles ) {
// Cleanup.
drawnRect.forEach( function( oldRect ) {
oldRect.remove();
} );
// Unify format.
if ( typeof rectangles.length == 'undefined' ) {
rectangles = [ rectangles ];
} else {
rectangles = Array.from( rectangles );
}
rectangles.forEach( function( rect ) {
var curDrawing = createRectDraw(),
dims = [ 'top', 'left', 'width', 'height' ];
dims.forEach( function( property ) {
curDrawing.style[ property ] = rect[ property ] + 'px';
} );
console.log( 'created debug rect:', curDrawing );
drawnRect.push( curDrawing );
} );
}
function createRectDraw() {
var ret = document.createElement( 'div' );
ret.style.position = 'absolute';
ret.style.outline = '2px solid red';
ret.style.pointerEvents = 'none';
ret.className = 'debug-rect-marker';
document.body.appendChild( ret );
return ret;
}
} )();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment