JSFiddle - React, Tailwind, and code Playground

by Graham Dixon

HTML

<div id="contenu">
<table><tr>
        <td>1. récurrent </td><td><div id='but_1' class='point' type='Q'> </div></td>
         <td class='zoneblanche'></td>
        <td><div id='but_1-1' class='point' type='A'> </div>a. capital</td>
        </tr><tr>
        <td>2. extravagant </td><td><div id='but_2' class='point' type='Q'> </div></td>
         <td class='zoneblanche'></td>
        <td><div id='but_2-2' class='point' type='A'> </div>b. farfelu</td>
        </tr><tr>
        <td>3. franc (sens de l’article)</td><td><div id='but_3' class='point' type='Q'></div></td>
         <td class='zoneblanche'></td>
        <td><div id='but_3-3' class='point' type='A'> </div>c. éventuel</td>
        </tr><tr>
        <td>4. inquiet </td><td><div id='but_4' class='point' type='Q'> </div></td>
         <td class='zoneblanche'></td>
        <td><div id='but_4-4' class='point' type='A'> </div>d. incontournable</td>
        </tr><tr>
        <td>5. indispensable</td><td><div id='but_5' class='point' type='Q'></div></td>
         <td class='zoneblanche'></td>
        <td><div id='but_5-5' class='point' type='A'></div>e. fréquent </td>
        </tr><tr>
        <td>6. ingénieux</td><td><div id='but_6' class='point' type='Q'></div></td>
         <td class='zoneblanche'></td>
        <td><div id='but_6-6' class='point' type='A'></div>f. instantané</td>
        </tr><tr>
        <td>7. majeur</td><td><div id='but_7' class='point' type='Q'></div></td>
         <td class='zoneblanche'></td>
        <td><div id='but_7-7' class='point' type='A'></div>g. astucieux</td>
        </tr><tr>
        <td>8. potentiel</td><td><div id='but_8' class='point' type='Q'></div></td>
         <td class='zoneblanche'></td>
        <td><div id='but_8-8' class='point' type='A'></div>h. multiples </td>
        </tr><tr>
        <td>9. immédiat</td><td><div id='but_9' class='point' type='Q'></div></td>
         <td class='zoneblanche'></td>
        <td><div id='but_9-9' class='point' type='A'></div>i....

CSS

.zoneblanche{
    width:50px;
    display: inline-block;
    white-space: nowrap;
}
.point {
    display:inline-block;
    color: white; 
    font-weight: bold; 
    background-color: #06a; 
   /* margin: 5em auto; */
    text-align: center; 
    line-height: 70px; 
    height: 20px; 
    width: 20px; 
    -webkit-border-radius: 100%; 
    -moz-border-radius: 100%; 
    border-radius: 100%;
    cursor:pointer;
    z-index: 500;
}

.line {
    position: absolute;
    width: 3px;
    background-color: #06a;
    z-index: 100;
    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -o-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
}
.line.offset{
    position:absolute;
}
#new-link-line {
    position: absolute;
}

JavaScript

var originpoint;

$('.point').click(function(event) {
   //Attribut link detection and line suppression
   if(this.getAttribute("type") != "A")
   { 

    }
    //Creatation of the line that follow the mouse
    if (!$('#new-link-line').length){ 
        //$(this).find(".line").remove();
        var linkLine = $('<div id="new-link-line" class="line"></div>').appendTo('body');
        originpoint = '#'+event.target.id;
        
        linkLine
            .css('top', ($(originpoint).offset().top + $(originpoint).outerHeight() / 2))
            .css('left', ($(originpoint).offset().left + $(originpoint).outerWidth() / 2));
    
        $(document).mousemove(linkMouseMoveEvent);
    }
    //If clic on the same element than the one creating the line, suppression of it.
    else if (originpoint == '#'+event.target.id)
    {
         endLinkMode();       
    }
    //Drawing of the final line between 2 elements
    else
    {

        if(this.getAttribute("type") != $(originpoint).attr('type'))
        { 
            //modication here (on the append)
            var FinalLine = $('<div id="final-line" class="line"></div>').appendTo(originpoint);
            var endpoint = '#'+event.target.id;
            var originX = $(originpoint).offset().left + $(originpoint).outerWidth() / 2;
            var originY = $(originpoint).offset().top + $(originpoint).outerHeight() / 2;
            var endX = $(endpoint).offset().left + $(endpoint).outerWidth() / 2;
            var endY = $(endpoint).offset().top + $(endpoint).outerHeight() / 2;        
            
            if(typeof originpoint !== "undefined") {
                //modification on the left and top
                FinalLine         
                    .css('top', ($(originpoint).outerHeight() / 2)+$(originpoint).offset().top)
                    .css('left', ($(originpoint).outerWidth() / 2)+$(originpoint).offset().left);
                
                drawline('#final-line',originX,originY,endX,endY);
          ...