Polyline builder

by Raul Bojalil

HTML

<canvas width="2000" height="2000"></canvas>

JavaScript

var lines = [
  /*{id: 3, x1: 65, y1: 40, x2: 35, y2: 70},
	{id: 1, x1: 10, y1: 10, x2: 30, y2: 10},
  {id: 4, x1: 35, y1: 70, x2: 10, y2: 10},
  {id: 2, x1: 30, y1: 10, x2: 65, y2: 40},
  
  {id: 7, x1: 140, y1: 60, x2: 200, y2: 20},
  {id: 5, x1: 70, y1: 10, x2: 140, y2: 10},
  {id: 8, x1: 200, y1: 20, x2: 220, y2: 80},
  {id: 6, x1: 140, y1: 10, x2: 140, y2: 60},
  
  {id: 9, x1: 10, y1: 100, x2: 10, y2: 150},
  {id: 10, x1: 10, y1: 150, x2: 60, y2: 200},
  {id: 12, x1: 90, y1: 200, x2: 200, y2: 100},
  {id: 11, x1: 60, y1: 200, x2: 90, y2: 200},
  {id: 14, x1: 200, y1: 100, x2: 200, y2: 200},*/
  
  {id: 17, x1: 30, y1: 220, x2: 100, y2: 220},
  {id: 15, x1: 10, y1: 250, x2: 30, y2: 250},
  {id: 16, x1: 30, y1: 250, x2: 30, y2: 220},
  {id: 18, x1: 100, y1: 220, x2: 100, y2: 300},
 
  
  //{id: 13, x1: 200, y1: 100, x2: 10, y2: 100},
];

var canvas = document.querySelector('canvas'),
    ctx = canvas.getContext('2d');

var buildPolylines = function(lines) {
	
  var polylineGroups = [];
  
  for (let i = 0; i < lines.length; i++) {

    var line1 = lines[i];

    let matched = false;


    for (let j = 0; j < lines.length; j++) {

      var line2 = lines[j];
      if (i === j) continue;

      if (
        (line1.x1 === line2.x1 && line1.y1 === line2.y1) || 
        (line1.x1 === line2.x2 && line1.y1 === line2.y2) || 
        (line1.x2 === line2.x1 && line1.y2 === line2.y1) || 
        (line1.x2 === line2.x2 && line1.y2 === line2.y2)
      ) {
        //There's a connection between the lines, add them to the same group

        matched = true;

        var group1 = polylineGroups.find(pl => pl.ids.some(id => id === line1.id));
        var group2 = polylineGroups.find(pl => pl.ids.some(id => id === line2.id));

        if (group1 && group2)  {
          continue;
        }

        var group = group1 || group2;

        if (group) {

          var newLine = group1 ? line2 : line1;
          group.ids.push(newLine.id);
          
          
         ...