workbook/static/js/panel.js

class Cable {
	start = "";
	end = "";
	strPath = "";
	color = "";
	strokeWidth = 10;
	bufferSize = 20;
	buffer = [];
	path = null;

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

	randomColor() {
		const hue = Math.floor(Math.random() * 360);
		const saturation = Math.floor(50 + Math.random() * (50 + 1)) + "%";
		const lightness = "75%";
		this.color = "hsl(" + hue + ", " + saturation + ", " + lightness + ")";
	}

	createCable(position) {
		this.path = document.createElementNS("http://www.w3.org/2000/svg", "path");

		this.path.setAttribute("fill", "none");

		this.path.setAttribute("stroke", this.color);
		this.path.setAttribute("stroke-width", this.strokeWidth);
		this.path.setAttribute("stroke-linecap", "round");

		this.buffer = [];
		this.appendToBuffer(position);
		this.strPath = "M" + position.x + " " + position.y;
		this.path.setAttribute("d", this.strPath);
	}

	appendToBuffer(position) {
		this.buffer.push(position);
		while (this.buffer.length > this.bufferSize) {
			this.buffer.shift();
		}
	}

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

	updatePath() {
		let position = this.getAveragePoint(0);
		if (position) {
			// Get the smoothed part of the path that will not change
			this.strPath += " L" + position.x + " " + position.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 < this.buffer.length; offset += 2) {
				position = this.getAveragePoint(offset);
				tmpPath += " L" + position.x + " " + position.y;
			}
			this.path.setAttribute("d", this.strPath + tmpPath);
		}
	}
}

class Panel {
	width = 0;
	height = 0;

	svg = null;
	container = null;
	containerBoundingClient = null;

	model = {};
	params = [];
	sockets = [];
	preset = {};

	cable = null;
	cables = null;

	constructor(svg, container, preset = {}, debug = false) {
		this.svg = this.htmlToElement(svg);
		this.container = container;
		this.container.style.position = "relative";
		this.containerRect = container.getBoundingClientRect();
		this.preset = { ...preset };
		this.debug = debug;

		while (container.firstChild) {
			container.removeChild(container.lastChild);
		}
		container.appendChild(this.svg);

		this.setSize();
		this.createParams();

		this.createSockets();
		this.createCables();

		this.svg.addEventListener("mousedown", (e) => this.startCable(e));
		this.svg.addEventListener("mousemove", (e) => this.drawCable(e));
		this.svg.addEventListener("mouseup", (e) => this.endCable(e));
		// this.svg.addEventListener("mouseleave", (e) => this.endCable(e));
	}

	htmlToElement(string) {
		var template = document.createElement("template");
		string = string.trim(); // Never return a text node of whitespace as the result
		template.innerHTML = string;
		return template.content.firstChild;
	}

	setSize() {
		this.width = this.svg.getAttribute("width");
		this.height = this.svg.getAttribute("height");
		this.container.style.width = this.width + "px";
		this.container.style.height = this.height + "px";
	}

	createParams() {
		// this.svg.querySelector("#params").style.visibility = "hidden";
		this.params = this.svg.querySelectorAll("#params [fill='#FF0000']");
		this.model.params = [];

		for (const param of this.params) {
			let rect = param.getBoundingClientRect();

			let control = document.createElement("input");
			control.setAttribute("type", "range");
			control.setAttribute("data-width", rect.width);
			control.setAttribute("data-height", rect.height);

			control.setAttribute("data-fgcolor", "white");
			control.classList.add("input-knob");
			control.style.position = "absolute";
			control.style.left = rect.left - this.containerRect.left + "px";
			control.style.top = rect.top - this.containerRect.top + "px";

			control.setAttribute("name", param.id);

			if (this.preset.hasOwnProperty(param.id)) {
				control.value = this.preset[param.id];
			}

			this.container.appendChild(control);

			this.model.params.push(param.id);

			if (this.debug) {
				let label = document.createElement("label");
				label.setAttribute("for", param.id);
				label.innerHTML = param.id;

				label.style.position = "absolute";
				label.style.left = rect.left - this.containerRect.left + "px";
				label.style.top = rect.top + rect.height + "px";
				label.style.fontSize = "1rem";
				label.style.backgroundColor = "red";
				label.style.color = "white";

				this.container.appendChild(label);
			}
		}
		let group = this.svg.querySelector("#params");
		if (group) group.style.display = "none";
	}

	createSockets() {
		// this.svg.querySelector("#sockets").style.visibility = "hidden";
		this.sockets = this.svg.querySelectorAll("#sockets [fill='#00FF00']");
		this.model.sockets = [];
		for (const socket of this.sockets) {
			let rect = socket.getBoundingClientRect();

			let input = document.createElement("input");
			input.setAttribute("name", socket.id);
			input.classList.add("socket");

			input.style.position = "absolute";
			input.style.left = rect.left - this.containerRect.left + "px";
			input.style.top = rect.top - this.containerRect.top + "px";
			input.style.width = rect.width + "px";
			input.style.height = rect.height + "px";

			input.style.border = "none";
			input.style.background = "none";
			input.style.opacity = 0;

			if (this.debug) {
				input.style.border = "1px solid #00FF00";
				input.style.opacity = 1;
			}

			input.style.cursor = "alias";

			input.addEventListener("mouseup", (e) => this.endCable(e));

			input.addEventListener("mousedown", (e) => {
				e.preventDefault();
				this.startCable(e);
				return false;
			});

			this.container.appendChild(input);

			this.model.sockets.push(socket.id);
		}

		let group = this.svg.querySelector("#sockets");
		if (group) group.style.display = "none";
	}

	createCables() {
		let cables = document.createElementNS("http://www.w3.org/2000/svg", "svg");

		cables.classList.add("cables");
		cables.setAttribute("xmlns", "http://www.w3.org/2000/svg");
		cables.setAttribute("width", this.width);
		cables.setAttribute("height", this.height);
		cables.setAttribute("viewBox", `0 0 ${this.width} ${this.height}`);
		cables.setAttribute("fill", "none");
		cables.style.pointerEvents = "none";
		cables.style.position = "absolute";
		cables.style.left = 0;
		cables.style.top = 0;
		cables.style.width = this.width;
		cables.style.height = this.height;

		this.cables = cables;
		this.container.appendChild(this.cables);
	}

	startCable(event) {
		let position = this.getMousePosition(event);
		let socket = event.target;

		if (socket && socket.classList.contains("socket")) {
			this.cable = new Cable(socket.getAttribute("name"));
			this.cable.createCable(position);
			let cable = this.cable.path;
			cable.style.pointerEvents = "stroke";

			cable.addEventListener("click", (e) => {
				console.log(e);
				cable.remove();
			});

			this.cables.appendChild(this.cable.path);

			for (const input of this.container.querySelectorAll(".input-knob")) {
				input.style.pointerEvents = "none";
			}
		}
	}

	drawCable(event) {
		if (this.cable) {
			this.cable.appendToBuffer(this.getMousePosition(event));
			this.cable.updatePath();
		}
	}

	endCable(event) {
		if (this.cable) {
			let socket = event.target;

			if (socket && socket.classList.contains("socket")) {
				this.cable.end = socket.getAttribute("name");

				// TODO: log cable
			} else {
				this.cable.path.remove();
			}

			for (const input of this.container.querySelectorAll(".input-knob")) {
				input.style.pointerEvents = "all";
			}

			this.cable = null;
		}
	}

	getMousePosition(e) {
		return {
			x: e.pageX - this.containerRect.left,
			y: e.pageY - this.containerRect.top,
		};
	}
}