Path JS

class Path {
   constructor(x1, y1, x2, y2) {
     this.x1 = x1;
     this.y1 = y1;
     this.x2 = x2;
     this.y2 = y2;
   }
}

function mergePath(path1, path2) {
	if ((path1.x1 == path1.x2) && (path2.x1 == path2.x2) && (path1.x1 == path2.x1)) // on OY, merge
	{
		listY = [path1.y1, path1.y2, path2.y1, path2.y2];
		return new Path(path1.x1, getMax(listY), path1.x1, getMin(listY));
	}
	else if ((path1.y1 == path1.y2) && (path2.y1 == path2.y2) && (path1.y1 == path2.y1)) // on OX, merge
	{
		listX = [path1.x1, path1.x2, path2.x1, path2.x2];
		return new Path(getMax(listX), path1.y1, getMin(listX), path1.y1);
	}
	else {return undefined}
}

function shuffle(a) {
    var j, x, i;
    for (i = a.length; i; i--) {
        j = Math.floor(Math.random() * i);
        x = a[i - 1];
        a[i - 1] = a[j];
        a[j] = x;
    }
}

function getMax(arr) {
	max = arr[0]
	arr.forEach(function(item) {
		if (item > max) {max = item}
	})
    
	return max
}

function getMin(arr) {
	min = arr[0]
	arr.forEach(function(item) {
		if (item < min) {min = item}
	})
    
	return min
}

function writeArray(arr) {

	arr.forEach(function(path) {
		
		document.write('<p style="line-height: 5px">')
		document.write('(' + path.x1)
		document.write('; ' + path.y1 + ')')
		document.write(' - (' + path.x2)
		document.write('; ' + path.y2 + ')')
		document.write('</p>')

	})
	
	document.write('<p>')
	document.write('===== ' + arr.length + ' el. =====')
	document.write('</p>')
}

document.write('<h1>')
document.write('The task in the  path (debugger)')
document.write('</h1>')


var array = [];
array.push(new Path(10, 15, 15, 15));
array.push(new Path(10, 15, 7, 15));
array.push(new Path(7, 5, 7, 15));
array.push(new Path(5, 10, 8, 9));
array.push(new Path(1, 3, 8, 9));
array.push(new Path(1, 3, 4, 3));
array.push(new Path(1, 1, 4, 3));
array.push(new Path(11, 1, 15, 1));
array.push(new Path(15, 1, 15, 8));
array.push(new Path(7, 5, 15, 8));
array.unshift(new Path(1, 1, 11, 1)); // on top array


var array_2 = [];
array_2.push(new Path(5, 5, 5, 9));
array_2.push(new Path(5, 5, 5, 10));
array_2.push(new Path(1, 10, 5, 10));
array_2.push(new Path(1, 10, 1, 3));
array_2.push(new Path(2, 2, 1, 3));
array_2.push(new Path(2, 2, 10, 5));


var array_3 = [];
array_3.push(new Path(1, 3, 2, 3));
array_3.push(new Path(2, 3, 3, 3));
array_3.push(new Path(3, 3, 3, 5));
array_3.push(new Path(3, 5, 4, 5));
array_3.push(new Path(4, 5, 5, 5));
array_3.push(new Path(5, 5, 6, 5));
array_3.push(new Path(6, 5, 6, 7));
array_3.push(new Path(6, 7, 6, 8));
array_3.push(new Path(6, 8, 8, 8));
array_3.push(new Path(8, 8, 9, 8));
array_3.push(new Path(9, 8, 9, 6));
array_3.push(new Path(9, 6, 9, 4));
array_3.push(new Path(9, 4, 9, 2));
array_3.push(new Path(9, 2, 8, 2));

//array = array_2; // for test second aarray
array = array_3; // for test second aarray


//////////////
// image

centers_before = [];
radius = 1;
k = 10;
array.forEach(function(path) {
		
		center_tag = '<circle cx="' + (path.x1*k) + '" cy="' + (path.y1*k) + '" r="' + radius + '" fill="rgb(255,0,0)" stroke-width="1" stroke="rgb(0,0,0)"/>';
		centers_before.push(center_tag);
		center_tag = '<circle cx="' + (path.x2*k) + '" cy="' + (path.y2*k) + '" r="' + radius + '" fill="rgb(255,0,0)" stroke-width="1" stroke="rgb(0,0,0)"/>';
		centers_before.push(center_tag);
		
	})
/////////////

shuffle(array)

writeArray(array)

var new_array = [];
new_array.push(array.shift());

length_array = 0;
while (array.length > 0) {

if (array.length == length_array) {
	throw "Error: not adjacent path";
	}
	
	length_array = array.length
	
	array.forEach(function(item) {
	
	path = item;
	
	
	if (((path.x1 == new_array[0].x1) && (path.y1 == new_array[0].y1))
		|| ((path.x1 == new_array[0].x2) && (path.y1 == new_array[0].y2))
		|| ((path.x2 == new_array[0].x1) && (path.y2 == new_array[0].y1))
		|| ((path.x2 == new_array[0].x2) && (path.y2 == new_array[0].y2)))
		
	{
	
		merge_path = mergePath(path, new_array[0]);
		
		if (merge_path !== undefined)
		{
			new_array[0] = merge_path
		}
		else
		{
			new_array.unshift(path)
		}
		
		array.splice(array.indexOf(path), 1); // delete used path
	
	}
	
	else if (((path.x1 == new_array[new_array.length-1].x1) && (path.y1 == new_array[new_array.length-1].y1))
			|| ((path.x1 == new_array[new_array.length-1].x2) && (path.y1 == new_array[new_array.length-1].y2))
			|| ((path.x2 == new_array[new_array.length-1].x1) && (path.y2 == new_array[new_array.length-1].y1))
			|| ((path.x2 == new_array[new_array.length-1].x2) && (path.y2 == new_array[new_array.length-1].y2)))
	{
		merge_path = mergePath(path, new_array[new_array.length-1]);
		
		if (merge_path != undefined)
		{
			new_array[new_array.length-1] = merge_path
		}
		else
		{
			new_array.push(path)
		}
		
		array.splice(array.indexOf(path), 1); // delete used path
	
	}
	
	})
}
// image for test :)

writeArray(new_array)

string_path = "";
radius = 3;
centers = [];
new_array.forEach(function(path) {
		
		string_path = string_path + 'M ' + (path.x1*k) + ',' + (path.y1*k) + ' ' + 'L ' + (path.x2*k) + ',' + (path.y2*k) + ' ';
		
		
		center_tag = '<circle cx="' + (path.x1*k) + '" cy="' + (path.y1*k) + '" r="' + radius + '" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/>';
		centers.push(center_tag);
		center_tag = '<circle cx="' + (path.x2*k) + '" cy="' + (path.y2*k) + '" r="' + radius + '" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/>';
		centers.push(center_tag);
		
	})

document.write('<svg class="svg" width="400" height="400">');
document.write('<path d="' + string_path + 'z" fill="gold" stroke="orange" stroke-width="5"/>');

centers.forEach(function(center_tag) {
document.write(center_tag);
	})
	
centers_before.forEach(function(center_tag) {
document.write(center_tag);
	})
	
document.write('</svg>');