You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

145 lines
3.4 KiB
JavaScript

// 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();
});