JSFiddle - React, Tailwind, and code Playground

by Arthur Lutkevichus

HTML

<table id="test">
    <tr>
        <td>My</td>
        <td>best</td>
    </tr>
    <tr>
        <td>table</td>
        <td>ever</td>
    </tr>
</table>
<table id="test2">
    <tr>
        <td>My</td>
        <td>best</td>
    </tr>
    <tr>
        <td>table</td>
        <td>ever</td>
    </tr>
</table>

CSS

.visualize-on-blowchart-line {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -9999;
}
table {
    margin-left: 220px;
}
table td {
    border: 1px solid #333;
}
button {
    position: absolute;
}

JavaScript

// Function to redraw line, needs to be refactored. should be passed only index of button
function drawLine(table, canvas, button, ctx) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.moveTo((button.offsetLeft + button.offsetWidth), (button.offsetTop + button.offsetHeight));
    ctx.lineTo(table.offsetLeft, (table.offsetTop + table.offsetHeight));
    ctx.stroke();
};

// TMP function to  move button and check redrawing
function moveButton(table, canvas, button, ctx) {
    button.style.left = 200 + "px";
    button.style.top = 200 + "px";
    drawLine(table, canvas, button, ctx);
}

// Array of all lines, should be array of all data by index
var lines = [];
var body = document.body,
    html = document.documentElement;
var height = Math.max(body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight);
var width = Math.max(body.scrollWidth, body.offsetWidth,
html.clientWidth, html.scrollWidth, html.offsetHeight);

// Loop through tables
var tables = document.getElementsByTagName("table");
for(var i = 0; i < tables.length; i++) {
    var table = tables[i];
    // Create button element
    var button = document.createElement("button");
    button.innerHTML = "Visualize on Blowchart!";
    button.className = "visualize-on-blowchart";
    // Add canvase after table
    table.parentNode.insertBefore(button, table.nextSibling);

    // Create canvas
    var canvas = document.createElement("canvas");
    canvas.className = "visualize-on-blowchart-line";
    canvas.setAttribute("width", width);
    canvas.setAttribute("height", height);
    var ctx = canvas.getContext("2d");
    // Should be addedd all elements to specific index
    lines.push(ctx);
    drawLine(table, canvas, button, ctx);

    // TMP move line
    setTimeout(function () {
        moveButton(table, canvas, button, ctx);
    }, 2000);

    // Add canvase after table
    table.parentNode.insertBefore(canvas, table.nextSibling);
};