workbook/static/js/cables.js

// Great resource from https://stackoverflow.com/a/40700068
// Thank you ConnorFan

var strokeWidth = 10;
var bufferSize = 10;

var svgElement = document.getElementById("svgElement");
svgElement.setAttribute("viewBox", `0 0 ${svgElement.clientWidth} ${svgElement.clientHeight}`);
svgElement.setAttribute("xmlns", "http://www.w3.org/2000/svg");

var rect = svgElement.getBoundingClientRect();
var path = null;
var strPath;
var buffer = []; // Contains the last positions of the mouse cursor
var cable;

class Cable {
	start = "";
	end = "";
	path = "";
	color = "";

	constructor(start) {
		this.start = start;
	}
}

window.addEventListener("resize", (e) => {
	svgElement.setAttribute("viewBox", `0 0 ${svgElement.clientWidth} ${svgElement.clientHeight}`);
});

window.addEventListener("mousedown", function (e) {
	let socket = e.target;

	if (socket.matches(".plug.out")) {
		path = document.createElementNS("http://www.w3.org/2000/svg", "path");
		path.setAttribute("fill", "none");

		let color = randomColor();
		path.setAttribute("stroke", color);
		path.setAttribute("stroke-width", strokeWidth);
		path.setAttribute("stroke-linecap", "round");
		buffer = [];
		var pt = getMousePosition(e);
		appendToBuffer(pt);
		strPath = "M" + pt.x + " " + pt.y;
		path.setAttribute("d", strPath);
		svgElement.appendChild(path);

		cable = new Cable(socket.nextElementSibling.innerHTML);
		cable.color = color;
	}
});

window.addEventListener("mousemove", function (e) {
	if (path) {
		appendToBuffer(getMousePosition(e));
		updateSvgPath();
	}
});

window.addEventListener("mouseup", (e) => appendCable(e));
window.addEventListener("mouseleave", (e) => appendCable(e));

var appendCable = function (e) {
	if (path) {
		let socket = e.target;
		if (socket.matches(".plug.in")) {
			cable.end = socket.nextElementSibling.innerHTML;
			cable.path = path.getAttribute("d");
		}
		path = null;
	}
};

var getMousePosition = function (e) {
	return {
		x: e.pageX - rect.left,
		y: e.pageY - rect.top,
	};
};

var appendToBuffer = function (pt) {
	buffer.push(pt);
	while (buffer.length > bufferSize) {
		buffer.shift();
	}
};

// Calculate the average point, starting at offset in the buffer
var getAveragePoint = function (offset) {
	var len = buffer.length;
	if (len % 2 === 1 || len >= bufferSize) {
		var totalX = 0;
		var totalY = 0;
		var pt, i;
		var count = 0;
		for (i = offset; i < len; i++) {
			count++;
			pt = buffer[i];
			totalX += pt.x;
			totalY += pt.y;
		}
		return {
			x: totalX / count,
			y: totalY / count,
		};
	}
	return null;
};

// ok
var updateSvgPath = function () {
	var pt = getAveragePoint(0);

	if (pt) {
		// Get the smoothed part of the path that will not change
		strPath += " L" + pt.x + " " + pt.y;

		// Get the last part of the path (close to the current mouse position)
		// This part will change if the mouse moves again
		var tmpPath = "";
		for (var offset = 2; offset < buffer.length; offset += 2) {
			pt = getAveragePoint(offset);
			tmpPath += " L" + pt.x + " " + pt.y;
		}

		// Set the complete current path coordinates
		path.setAttribute("d", strPath + tmpPath);
	}
};

// ok
var randomColor = function () {
	const hue = Math.floor(Math.random() * 360);
	const saturation = Math.floor(50 + Math.random() * (50 + 1)) + "%";
	const lightness = "75%";
	return "hsl(" + hue + ", " + saturation + ", " + lightness + ")";
};

const enter = document.getElementById("enter");
enter.addEventListener("mouseup", (e) => {
	window.location = cable.start.toLowerCase();
});