vmeln/salesman.html

## salesman.html
<!DOCTYPE html>
<html>
    <head>
        <title>Salesman problem solution</title>
    </head>
<body>
    <canvas id="canvas" height="1920" width="1080" />
    <script>
        "use strict";

        var points = [{ x: 100, y: 400 }, { x: 280, y: 400 }, { x: 150, y: 80 }, { x: 300, y: 600 }];
        var canvasElement;
        var context;
        var index = -1;

        var captured = false;

        window.onload = function () {
            canvasElement = window.document.getElementById("canvas");

            canvasElement.addEventListener('mousedown', mouseDown);
            canvasElement.addEventListener('mousemove', move);
            canvasElement.addEventListener('mouseup', mouseUp);
            canvasElement.addEventListener('dblclick', makeNewPoint);

            context = canvasElement.getContext('2d');
            context.lineWidth = 1;

            invalidate();
        };

        function getDistance(x1, y1, x2, y2) {
            return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2)).toFixed(0);
        };

        function invalidate() {
            context.clearRect(0, 0, canvasElement.width, canvasElement.height);

            for (var i = 0; i < points.length; i++) {
                for (var j = 0; j < i; j++) {
                    context.beginPath();
                    context.moveTo(points[i].x, points[i].y);
                    context.lineTo(points[j].x, points[j].y);
                    context.closePath();
                    context.stroke();

                    context.strokeText(getDistance(points[i].x, points[i].y, points[j].x, points[j].y)
                        , (points[i].x + points[j].x) / 2, (points[i].y + points[j].y) / 2);
                }
            }

            context.fillStyle = 'red';

            for (var i = 0; i < points.length; i++) {
                context.beginPath();
                context.arc(points[i].x, points[i].y, 5, 0, Math.PI * 2);
                context.fill();
                context.stroke();
                context.closePath();
            }
        };

        function mouseDown(e) {
            for (var i = 0; i < points.length; i++) {
                if (isClickOnPoint(e, points[i])) {
                    index = i;
                    captured = true;

                    break;
                }
            }
        };

		function isClickOnPoint(e, point) {
           return getDistance(e.clientX, e.clientY, point.x, point.y) < 20;
        };

        function move(e) {
            if (captured) {
                points[index].x = e.clientX;
                points[index].y = e.clientY;
                invalidate();
            }
        };

        function mouseUp() {
            captured = false;
        };

        function makeNewPoint(e) {
            var clickedPointIndex = -1;

            for (var i = 0; i < points.length; i++) {
                if (isClickOnPoint(e, points[i])) {
                    clickedPointIndex = i;
                    break;
                }
            }

            if (clickedPointIndex == -1) {
                points.push({ x: e.clientX, y: e.clientY });
                invalidate();
            } else {
                points.splice(clickedPointIndex, 1);
                invalidate();
            }
        };

    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Salesman problem solution</title>
	</head>
	<body>
	<canvas id="canvas" height="1920" width="1080" />
	<script>
	"use strict";

	var points = [{ x: 100, y: 400 }, { x: 280, y: 400 }, { x: 150, y: 80 }, { x: 300, y: 600 }];
	var canvasElement;
	var context;
	var index = -1;

	var captured = false;

	window.onload = function () {
	canvasElement = window.document.getElementById("canvas");

	canvasElement.addEventListener('mousedown', mouseDown);
	canvasElement.addEventListener('mousemove', move);
	canvasElement.addEventListener('mouseup', mouseUp);
	canvasElement.addEventListener('dblclick', makeNewPoint);

	context = canvasElement.getContext('2d');
	context.lineWidth = 1;

	invalidate();
	};

	function getDistance(x1, y1, x2, y2) {
	return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2)).toFixed(0);
	};

	function invalidate() {
	context.clearRect(0, 0, canvasElement.width, canvasElement.height);

	for (var i = 0; i < points.length; i++) {
	for (var j = 0; j < i; j++) {
	context.beginPath();
	context.moveTo(points[i].x, points[i].y);
	context.lineTo(points[j].x, points[j].y);
	context.closePath();
	context.stroke();

	context.strokeText(getDistance(points[i].x, points[i].y, points[j].x, points[j].y)
	, (points[i].x + points[j].x) / 2, (points[i].y + points[j].y) / 2);
	}
	}

	context.fillStyle = 'red';

	for (var i = 0; i < points.length; i++) {
	context.beginPath();
	context.arc(points[i].x, points[i].y, 5, 0, Math.PI * 2);
	context.fill();
	context.stroke();
	context.closePath();
	}
	};

	function mouseDown(e) {
	for (var i = 0; i < points.length; i++) {
	if (isClickOnPoint(e, points[i])) {
	index = i;
	captured = true;

	break;
	}
	}
	};

	function isClickOnPoint(e, point) {
	return getDistance(e.clientX, e.clientY, point.x, point.y) < 20;
	};

	function move(e) {
	if (captured) {
	points[index].x = e.clientX;
	points[index].y = e.clientY;
	invalidate();
	}
	};

	function mouseUp() {
	captured = false;
	};

	function makeNewPoint(e) {
	var clickedPointIndex = -1;

	for (var i = 0; i < points.length; i++) {
	if (isClickOnPoint(e, points[i])) {
	clickedPointIndex = i;
	break;
	}
	}

	if (clickedPointIndex == -1) {
	points.push({ x: e.clientX, y: e.clientY });
	invalidate();
	} else {
	points.splice(clickedPointIndex, 1);
	invalidate();
	}
	};

	</script>
	</body>
	</html>