Original source: Gist mlewand/56237c19050d27f61b807ed384dff2db
- Refactor to ES6 style
- Function
window.markRect()
now returns the element for extra stuff like styling - Function
window.deleteRects()
to delete all previously created rects
window.markRect()
now returns the element for extra stuff like stylingwindow.deleteRects()
to delete all previously created rects/** | |
* @author mlewand | |
* @see https://gist.github.com/mlewand/56237c19050d27f61b807ed384dff2db | |
* | |
* 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() ); | |
* | |
* | |
* Original source: https://gist.github.com/mlewand/56237c19050d27f61b807ed384dff2db | |
* Updated by [Sv443](https://github.com/Sv443) | |
* | |
* Styling example: | |
* ```js | |
* const [ mark ] = window.markRect(new DOMRect()); | |
* markElem.style.backgroundColor = "red"; | |
* ``` | |
*/ | |
( () => { | |
const drawnRect = []; | |
const createRectDraw = () => { | |
const ret = document.createElement( 'div' ); | |
ret.style.position = 'absolute'; | |
ret.style.outline = '2px solid red'; | |
ret.classList.add('debug-rect-marker'); | |
document.body.appendChild( ret ); | |
return ret; | |
}; | |
/** | |
* Creates an element that marks the passed DOMRectangle(s) | |
* These elements get the class `debug-rect-marker` | |
* @param {DOMRect|DOMRect[]} rectangles Accepts a DOMRectangle or an array of them | |
* @returns {HTMLElement[]} Returns array of marker elements | |
*/ | |
const markRect = ( rectangles ) => { | |
const marks = []; | |
// Cleanup. | |
drawnRect.forEach( ( oldRect ) => oldRect.remove() ); | |
// Unify format. | |
if ( !Array.isArray(rectangles) ) { | |
rectangles = [ rectangles ]; | |
} | |
rectangles.forEach( ( rect ) => { | |
const curDrawing = createRectDraw(), | |
dims = [ 'top', 'left', 'width', 'height' ]; | |
dims.forEach( ( property ) => { | |
curDrawing.style[ property ] = `${rect[ property ]}px`; | |
} ); | |
console.info( 'created debug rect:', curDrawing ); | |
drawnRect.push( curDrawing ); | |
marks.push( curDrawing ); | |
} ); | |
return marks; | |
}; | |
/** | |
* Deletes all rectangles that have been previously created | |
* @returns {void} | |
* @author Sv443 | |
*/ | |
const deleteRects = () => { | |
const markers = document.querySelectorAll(".debug-rect-marker"); | |
markers.forEach(elem => { | |
elem.innerHTML = ""; | |
elem.outerHTML = ""; | |
}); | |
console.warn(`Deleted ${markers.length} markers`); | |
}; | |
window.markRect = markRect; | |
window.deleteRects = deleteRects; | |
} )(); |
/** | |
* @author mlewand | |
* @see https://gist.github.com/mlewand/56237c19050d27f61b807ed384dff2db | |
* | |
* 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() ); | |
* | |
* | |
* Original source: https://gist.github.com/mlewand/56237c19050d27f61b807ed384dff2db | |
* Updated by [Sv443](https://github.com/Sv443) | |
* | |
* Styling example: | |
* ```js | |
* const [ mark ] = window.markRect(new DOMRect()); | |
* markElem.style.backgroundColor = "red"; | |
* ``` | |
*/ | |
(()=>{const e=[];window.markRect=(t=>{const r=[];return e.forEach(e=>e.remove()),Array.isArray(t)||(t=[t]),t.forEach(t=>{const o=(()=>{const e=document.createElement("div");return e.style.position="absolute",e.style.outline="2px solid red",e.classList.add("debug-rect-marker"),document.body.appendChild(e),e})();["top","left","width","height"].forEach(e=>{o.style[e]=`${t[e]}px`}),console.info("created debug rect:",o),e.push(o),r.push(o)}),r}),window.deleteRects=(()=>{const e=document.querySelectorAll(".debug-rect-marker");e.forEach(e=>{e.innerHTML="",e.outerHTML=""}),console.warn(`Deleted ${e.length} markers`)})})(); |