mirror of https://github.com/lgc-4/DataTools3.git
66 lines
1.5 KiB
JavaScript
66 lines
1.5 KiB
JavaScript
let cv, c;
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
cv = document.getElementById("canvas");
|
|
c = cv.getContext("2d");
|
|
|
|
window.requestAnimationFrame(draw);
|
|
});
|
|
|
|
function draw() {
|
|
|
|
cv.width = window.innerWidth;
|
|
cv.height = window.innerHeight;
|
|
|
|
|
|
// draw connections
|
|
c.strokeStyle = "white";
|
|
c.lineWidth = 3 * Camera.zoom;
|
|
|
|
for (let box of Box.instances) {
|
|
for (let input of box.inputs) {
|
|
if (!input.connection) continue;
|
|
let output = input.connection;
|
|
|
|
let i = input.circle.getBoundingClientRect();
|
|
let ix = i.x + i.width / 2;
|
|
let iy = i.y + i.height / 2;
|
|
|
|
let o = output.circle.getBoundingClientRect();
|
|
let ox = o.x + o.width / 2;
|
|
let oy = o.y + o.height / 2;
|
|
|
|
drawConnection(ox, oy, ix, iy);
|
|
}
|
|
}
|
|
|
|
// draw currently connecting connection
|
|
|
|
if (ConnectionController.currentlySelectedConnector) {
|
|
let i = ConnectionController.currentlySelectedConnector.circle.getBoundingClientRect();
|
|
let ix = i.x + i.width / 2;
|
|
let iy = i.y + i.height / 2;
|
|
|
|
let ox = Mouse.position.x;
|
|
let oy = Mouse.position.y;
|
|
if (ConnectionController.currentlySelectedConnector.direction == Connector.OUTPUT) {
|
|
ox = ix;
|
|
oy = iy;
|
|
ix = Mouse.position.x;
|
|
iy = Mouse.position.y;
|
|
}
|
|
drawConnection(ox, oy, ix, iy);
|
|
}
|
|
|
|
window.requestAnimationFrame(draw);
|
|
}
|
|
|
|
function drawConnection(x1, y1, x2, y2) {
|
|
let cpDistance = Math.min(Math.max((x1 - x2), 50), 100);
|
|
c.beginPath();
|
|
c.moveTo(x1, y1);
|
|
c.lineTo(x1 + 10, y1);
|
|
c.bezierCurveTo(x1 + cpDistance, y1, x2 - cpDistance, y2, x2 - 10, y2);
|
|
c.lineTo(x2, y2);
|
|
c.stroke();
|
|
} |