drawbox bookmarklet

by Laurens Maneschijn

HTML

<hr>
drag link to bookmarks to use anywhere:<br>
<a href="javascript:(function(){ if (window.drawbox_initialized) { return; } window.drawbox_initialized = true; var style_id = '__TM__style__selected'; document.querySelector('style#'+style_id)?.remove(); var style = document.createElement('style'); document.body.appendChild(style); style.style_id = '__TM__style__draw'; style.innerText = `\n        .drawing { position: absolute; z-index: 999999; display: inline-block; pointer-events: none; background: #0000ff20; outline: 5px solid #0000ff80; min-width: 10px; min-height: 10px;}\n        body { position: relative; }\n    `; var drawing_enabled = true; var drawing = false; var mousedown_event, mouseup_event; var draw_el; var draw_elements = []; function update(el, x1, y1, x2, y2) { Object.assign(el.style, { top: Math.min(y1, y2) + 'px', left: Math.min(x1, x2) + 'px', width: Math.abs(x2 - x1) + 'px', height: Math.abs(y2 - y1) + 'px', }); } function draw_mousehandler(e) { if (!drawing_enabled) { return; } e.preventDefault(); if (e.type == 'mousedown') { mousedown_event = e; drawing = true; draw_el = document.createElement('div'); draw_elements.push(draw_el); draw_el.classList.add('drawing'); document.body.appendChild(draw_el); update(draw_el, e.pageX, e.pageY, e.pageX, e.pageY); } else if (e.type == 'mousemove') { if (drawing &amp;&amp; draw_el) { update(draw_el, mousedown_event.pageX, mousedown_event.pageY, e.pageX, e.pageY); } } else if (e.type == 'mouseup') { mouseup_event = e; update(draw_el, mousedown_event.pageX, mousedown_event.pageY, e.pageX, e.pageY); drawing = false; draw_el = null; } } function draw_keyhandler(e) { console.log(e.code, e.keyCode, e); var drawing_enabled_old = drawing_enabled; if (e.code === 'Escape'|| e.keyCode == 27) { drawing_enabled = false; } if (e.shiftKey &amp;&amp; (e.code === 'KeyD'|| e.keyCode == 68)) { drawing_enabled = !drawing_enabled; } if (drawing_enabled !== drawing_enabled_old) { alert('drawing ' + (drawing_enabled ?...

JavaScript

return;

//javascript:
(function(){
    if (window.drawbox_initialized) {
        return;
    }
    window.drawbox_initialized = true;

    var style_id = '__TM__style__selected';
    document.querySelector('style#'+style_id)?.remove();
    var style = document.createElement('style');
    document.body.appendChild(style);
    style.style_id = '__TM__style__draw';
    style.innerText = `
        .drawing { position: absolute; z-index: 999999; display: inline-block; pointer-events: none; background: #0000ff20; outline: 5px solid #0000ff80; min-width: 10px; min-height: 10px;}
        body { position: relative; }
    `;

    var drawing_enabled = true;
    var drawing = false;
    var mousedown_event, mouseup_event;
    var draw_el;
    var draw_elements = [];

    function update(el, x1, y1, x2, y2) {
        Object.assign(el.style, {
            top: Math.min(y1, y2) + 'px',
            left: Math.min(x1, x2) + 'px',
            width: Math.abs(x2 - x1) + 'px',
            height: Math.abs(y2 - y1) + 'px',
        });
    }

    function draw_mousehandler(e) {
        if (!drawing_enabled) {
            return;
        }
        e.preventDefault();
        if (e.type == 'mousedown') {
            mousedown_event = e;
            drawing = true;
            draw_el = document.createElement('div');
            draw_elements.push(draw_el);
            draw_el.classList.add('drawing');
            document.body.appendChild(draw_el);
            update(draw_el, e.pageX, e.pageY, e.pageX, e.pageY);
        } else if (e.type == 'mousemove') {
            if (drawing && draw_el) {
                update(draw_el, mousedown_event.pageX, mousedown_event.pageY, e.pageX, e.pageY);
            }
        } else if (e.type == 'mouseup') {
            mouseup_event = e;
            update(draw_el, mousedown_event.pageX, mousedown_event.pageY, e.pageX, e.pageY);
            drawing = false;
            draw_el = null;
        }
    }

    function draw_keyhandler(e) {
       ...