Connect Line Between 2 Elements - Javascript

Question

I'm currently working on a way to create a single-line diagram using Javascript. I'm currently able to connect two html elements using the following function:

adjustLine (from, to, line) {
  var fT = from.offsetTop  + from.offsetHeight/2;
  var tT = to.offsetTop      + to.offsetHeight/2;
  var fL = from.offsetLeft + from.offsetWidth/2;
  var tL = to.offsetLeft     + to.offsetWidth/2;

  var CA   = Math.abs(tT - fT);
  var CO   = Math.abs(tL - fL);
  var H    = Math.sqrt(CA*CA + CO*CO);
  var ANG  = 180 / Math.PI * Math.acos( CA/H );

  if(tT > fT){
      var top  = (tT-fT)/2 + fT;
  }else{
      var top  = (fT-tT)/2 + tT;
  }
  if(tL > fL){
      var left = (tL-fL)/2 + fL;
  }else{
      var left = (fL-tL)/2 + tL;
  }

  if(( fT < tT && fL < tL) || ( tT < fT && tL < fL) || (fT > tT && fL > tL) || (tT > fT && tL > fL)){
    ANG *= -1;
  }
  top-= H/2;

  line.style["-webkit-transform"] = 'rotate('+ ANG +'deg)';
  line.style["-moz-transform"] = 'rotate('+ ANG +'deg)';
  line.style["-ms-transform"] = 'rotate('+ ANG +'deg)';
  line.style["-o-transform"] = 'rotate('+ ANG +'deg)';
  line.style["-transform"] = 'rotate('+ ANG +'deg)';
  line.style.top    = top+'px';
  line.style.left   = left+'px';
  line.style.height = H + 'px';
}

The function takes 3 parameters:

1) the first html element
2) the second html element
3) the line that connects the elements.

This works fine and outputs the following result:

However, the lines that connect the html elements are a straight line, I would like to have a more natural flow for a diagram, something like the following:

Any advice on how I could go about doing this? Any help is greatly appreciated!

Edit

I'm using html2canvas to create an image of the generated output. This is my code:

var myDiv = document.getElementById('content');

html2canvas(myDiv, {useCORS: true, allowTaint : true}).then(function (canvas) {

            var imgData = canvas.toDataURL("image/png", 1.0);
            var imgData2 = canvas2.toDataURL("image/png", 1.0);

            var pdf = new jsPDF('l', 'pt', [HTML_Width, HTML_Height]);
            pdf.internal.scaleFactor = 30;
            pdf.addImage(imgData, 'PNG', 0, 0, HTML_Width, HTML_Height);

            pdf.addPage();
            pdf.addImage(imgData2, 'PNG', 0, 0, HTML_Width_2, HTML_Height_2);

            pdf.save("my_file.pdf");
});

user_10669010 · Answer

So heree is my solution with SVG!

const xmlns   = 'http://www.w3.org/2000/svg'
  ,   svgLink = 'http://www.w3.org/1999/xlink'
  ,   elmSVG  = document.getElementById('elmSVG')
  ,   bot_inversor  = 80
  ,   top_fotovolta = 300
  ;
for (let i=0;i<4;i++)
  {
  let x = 10 + (i*60)
    , fotovolta = document.createElementNS(xmlns, 'use');

  fotovolta.setAttributeNS(svgLink, 'xlink:href', '#fotovoltaico');

  fotovolta.setAttributeNS(null, 'x', x);
  fotovolta.setAttributeNS(null, 'y', top_fotovolta);
  fotovolta.setAttributeNS(null, 'width', '50');
  fotovolta.setAttributeNS(null, 'height', '70'); 

  elmSVG.appendChild(fotovolta);

  adjustLines(i);
  }
function adjustLines(item)
  {
  let left = (item<2)    // the hard part...  
    , b1 = 25 + (item *60) + (left?0:20)
    , b2 = b1 + (left?20:-20)
    , a1 = 105 + (item *10) + (left?0:10)
    , a2 = a1 + (left?5:-5)
    , l1 = 50 + (left?item:3-item) *30
    , l2 = l1 + 10
    ;
  let jLine1 = document.createElementNS(xmlns, 'polyline');
  jLine1.setAttributeNS(null, 'points', `${b1},${top_fotovolta} ${b1},${bot_inversor+l1} ${a1},${bot_inversor+l1} ${a1},${bot_inversor}`);
  elmSVG.appendChild(jLine1);   

  let jLine2 = document.createElementNS(xmlns, 'polyline');
  jLine2.setAttributeNS(null, 'points', `${b2},${top_fotovolta} ${b2},${bot_inversor+l2} ${a2},${bot_inversor+l2} ${a2},${bot_inversor}`);
  elmSVG.appendChild(jLine2);   
  }

#elmSVG {
  width: 250px;
  height: 380px;
  background-color: #b4f0f0;
  margin: 1em;
}
#elmSVG * {
  fill:none;
  stroke:#2f363d;
  stroke-width:2px;
}
.curveSVG {
  stroke-linecap:round;
}

Connecting Lines

user_10669010 · Answer

other solution with

const eCanvas = document.getElementById('elmCanvas')
  ,   cCanvas = eCanvas.getContext('2d')
  ,   bot_inversor  = 80
  ,   top_fotovolta = 300
  ;

// set background color
cCanvas.fillStyle = 'rgb(178, 240, 240)'
cCanvas.fillRect(0, 0, eCanvas.width, eCanvas.height )

Draw_Inversor( cCanvas, (eCanvas.width/2 - 70/2), 10)

for (let i=0;i<4;i++)
  {
  Draw_Fotovoltaico( cCanvas, 10+(i*60), top_fotovolta );
  Draw_connectsLines( cCanvas, i, 4, (eCanvas.width/2), (10+(i*60)+25) );
  }

function Draw_Inversor( ctx, x, y )
  {
  ctx.beginPath();
  ctx.moveTo(x+70, y);
  ctx.lineTo(x, y+70);
  ctx.lineTo(x, y);
  ctx.lineTo(x+70, y);
  ctx.lineTo(x+70, y+70);
  ctx.lineTo(x, y+70);
  ctx.moveTo(x+10, y+15);
  ctx.lineTo(x+30, y+15);
  ctx.moveTo(x+10, y+20);
  ctx.lineTo(x+30, y+20);
  ctx.moveTo(x+50, y+55);
  ctx.arc(x+45, y+55, 5, 0, Math.PI, true);
  ctx.moveTo(x+60, y+55);
  ctx.arc(x+55, y+55, 5, 0, Math.PI, false);
  ctx.stroke();
  }
function Draw_Fotovoltaico( ctx, x, y )
  {
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(x+25, y+20);
  ctx.lineTo(x+50, y);
  ctx.lineTo(x, y);
  ctx.lineTo(x, y+70);
  ctx.lineTo(x+50, y+70);
  ctx.lineTo(x+50, y);
  ctx.stroke();
  }
function Draw_connectsLines( ctx, no, maxOcc, topCenter, botCenter )
  {
  let mid   = maxOcc/2
    , left  = no < mid
    , decal = left ? no :(maxOcc/2)-no+1 
    , topL1 = 50+ (decal *30)
    , topL2 = topL1 +10
    , topX1 = topCenter + (left? -(mid-decal)*10 : +(mid-decal)*10 )
    , topX2 = topX1 +(left?+5:-5)
    , botX1 = botCenter + (left?-10:+10)
    , botX2 = botCenter + (left?+10:-10) 
    ;
  ctx.beginPath();
  ctx.moveTo(topX1, bot_inversor);
  ctx.lineTo(topX1, bot_inversor +topL1 );
  ctx.lineTo(botX1, bot_inversor +topL1 );
  ctx.lineTo(botX1, top_fotovolta );
  ctx.stroke();

  ctx.beginPath();
  ctx.moveTo(topX2, bot_inversor);
  ctx.lineTo(topX2, bot_inversor +topL2 );
  ctx.lineTo(botX2, bot_inversor +topL2 );
  ctx.lineTo(botX2, top_fotovolta );
  ctx.stroke();
  }

#elmCanvas {
  margin: 1em;
}

Connect Line Between 2 Elements - Javascript

2 Answers