annotate_page.js

function addOverlay() {
    destroyOverlay()
    overlay = document.createElement('div');
    overlay.classList.add('annotation-overlay');
    overlay.setAttribute('style', 'position:absolute;top:0;left:0;right:0;bottom:0;');
    document.body.appendChild(overlay);
}

function destroyOverlay() {
    if (window.hasOwnProperty('overlay')) {
        overlay.remove();
    }
}

function addArrow(left, top, text) {
    const arrow = document.createElement('div');
    let arrowSVG = `<svg width="100" height="100">
<defs>
  <marker id="arrow" markerWidth="13" markerHeight="13" refx="2" refy="6" orient="auto">
      <path d="M2,1 L2,10 L10,6 L2,2" style="fill:red;" />
  </marker>
</defs>

<path d="M80,50 L20,18"
      style="stroke:red; stroke-width: 3px; fill: none;
      marker-end: url(#arrow);"
/>`;
    if (text) {
    arrowSVG += `<circle cx="80" cy="50" r="10" style="fill:red;"/>
<text x="77" y="55" style="font: bold 12px sans-serif;fill:white">${text}</text>`
    }
    arrowSVG += '</svg>'
    arrow.innerHTML = arrowSVG;   
    arrow.setAttribute('style', `z-index:9999;position:absolute;left:${left}px;top:${top}px;`);
    overlay.appendChild(arrow);
}

function addArrowToSelector(selector, text) {
    const e = document.querySelector(selector);
    if (e) {
        const box = e.getBoundingClientRect();
        addArrow(box.x + box.width / 2, box.y + box.height * 0.3, text);
    }
}

// TODO refactor box function and style into css?

function addHighlightToSelector(selector) {
    const e = document.querySelector(selector);
    if (e) {
        const box = e.getBoundingClientRect();
        const highlight = document.createElement('div');
        highlight.setAttribute('style', `background-color: rgba(255, 230, 8, 0.54);position:absolute;top:${box.top}px;left:${box.left}px;width:${box.width}px;height:${box.height}px`)
        overlay.appendChild(highlight);
    }
}

function addBorderToSelector(selector, withArrow) {
    const e = document.querySelector(selector);
    if (e) {
        const box = e.getBoundingClientRect();
        const borderBox = document.createElement('div');
        borderBox.setAttribute('style', `z-index:9999;border:3px solid red;position:absolute;top:${box.top}px;left:${box.left}px;width:${box.width}px;height:${box.height}px`)
        overlay.appendChild(borderBox);
        if (withArrow) {
            addArrow(box.x + box.width- 10, box.y + box.height - 15);
        }
    }
}

destroyOverlay();

// test
addOverlay();
addBorderToSelector('[data-menu-xmlid="purchase.menu_procurement_management"]');
addBorderToSelector('[data-menu-xmlid="purchase.menu_procurement_partner_contact_form"]', true);

addArrowToSelector('[name="name"]', '1');
addHighlightToSelector('[name="name"]');

addArrowToSelector('[name="sale_ok"]', '2');
addHighlightToSelector('[name="sale_ok"]');

addArrowToSelector('[name="type"]', '3');
addHighlightToSelector('[name="type"]');

addArrowToSelector('[name="taxes_id"]', 'x');
addHighlightToSelector('[name="taxes_id"]');

// out of scope
// selector helper
// arrow orientation
// screenshot clipping