broodjeaap/go-watch
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ready to start making connections between nodes

Browse source
This commit is contained in:
BroodjeAap 2022-09-11 13:12:14 +00:00
parent 67e9dc694e
commit a61e8343a2
2 changed files with 131 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

87
static/diagram.js
View file

@ -40,15 +40,19 @@ var DiagramNode = /** @class */ (function () {
} }
return true; return true;
}; };
DiagramNode.prototype.getInputCircleXY = function () {
return [this.x, this.y + this.height / 3];
};
DiagramNode.prototype.getOutputCircleXY = function () {
return [this.x + this.width, this.y + this.height / 3];
};
DiagramNode.prototype.pointInInputCircle = function (x, y) { DiagramNode.prototype.pointInInputCircle = function (x, y) {
var circleX = this.x; var _a = this.getInputCircleXY(), circleX = _a[0], circleY = _a[1];
var circleY = this.y + this.height / 3;
var radiusSqrd = Math.pow(this.height / 3, 2); var radiusSqrd = Math.pow(this.height / 3, 2);
return Math.pow(x - circleX, 2) + Math.pow(y - circleY, 2) <= radiusSqrd; return Math.pow(x - circleX, 2) + Math.pow(y - circleY, 2) <= radiusSqrd;
}; };
DiagramNode.prototype.pointInOutputCircle = function (x, y) { DiagramNode.prototype.pointInOutputCircle = function (x, y) {
var circleX = this.x + this.width; var _a = this.getOutputCircleXY(), circleX = _a[0], circleY = _a[1];
var circleY = this.y + this.height / 2;
var radiusSqrd = Math.pow(this.height / 3, 2); var radiusSqrd = Math.pow(this.height / 3, 2);
return Math.pow(x - circleX, 2) + Math.pow(y - circleY, 2) <= radiusSqrd; return Math.pow(x - circleX, 2) + Math.pow(y - circleY, 2) <= radiusSqrd;
}; };
@ -71,11 +75,16 @@ var Diagrams = /** @class */ (function () {
function Diagrams(canvasId) { function Diagrams(canvasId) {
this.nodes = new Array(); this.nodes = new Array();
this.connections = new Array(); this.connections = new Array();
this.cameraX = 0; this.cameraX = 0; // camera position
this.cameraY = 0; this.cameraY = 0;
this.mouseX = 0; // mouse position on the canvas
this.mouseY = 0;
this.worldX = 0; // relative mouse position
this.worldY = 0;
this.panning = false; this.panning = false;
this.nodeDragging = null; this.nodeDragging = null;
this.nodeHover = null; this.nodeHover = null;
this.makingConnectionNode = null;
this.canvas = document.getElementById(canvasId); this.canvas = document.getElementById(canvasId);
if (this.canvas === null) { if (this.canvas === null) {
throw "Could not getElementById " + canvasId; throw "Could not getElementById " + canvasId;
@ -94,10 +103,10 @@ var Diagrams = /** @class */ (function () {
} }
Diagrams.prototype.onmousemove = function (ev) { Diagrams.prototype.onmousemove = function (ev) {
var canvasRect = this.canvas.getBoundingClientRect(); var canvasRect = this.canvas.getBoundingClientRect();
var mouseX = ev.x - canvasRect.left; this.mouseX = ev.x - canvasRect.left;
var mouseY = ev.y - canvasRect.top; this.mouseY = ev.y - canvasRect.top;
var worldX = mouseX - this.cameraX; this.worldX = this.mouseX - this.cameraX;
var worldY = mouseY - this.cameraY; this.worldY = this.mouseY - this.cameraY;
if (this.nodeHover != null) { if (this.nodeHover != null) {
this.nodeHover.hover = false; this.nodeHover.hover = false;
this.nodeHover.inputHover = false; this.nodeHover.inputHover = false;
@ -117,18 +126,18 @@ var Diagrams = /** @class */ (function () {
else { else {
for (var _i = 0, _a = this.nodes; _i < _a.length; _i++) { for (var _i = 0, _a = this.nodes; _i < _a.length; _i++) {
var node = _a[_i]; var node = _a[_i];
if (node.pointNearNode(worldX, worldY)) { if (node.pointNearNode(this.worldX, this.worldY)) {
if (node.pointInInputCircle(worldX, worldY)) { if (node.pointInInputCircle(this.worldX, this.worldY)) {
node.inputHover = true; node.inputHover = true;
this.nodeHover = node; this.nodeHover = node;
break; break;
} }
else if (node.pointInOutputCircle(worldX, worldY)) { else if (node.pointInOutputCircle(this.worldX, this.worldY)) {
node.outputHover = true; node.outputHover = true;
this.nodeHover = node; this.nodeHover = node;
break; break;
} }
else if (node.pointInNode(worldX, worldY)) { else if (node.pointInNode(this.worldX, this.worldY)) {
node.hover = true; node.hover = true;
this.nodeHover = node; this.nodeHover = node;
break; break;
@ -143,19 +152,22 @@ var Diagrams = /** @class */ (function () {
return; return;
} }
var canvasRect = this.canvas.getBoundingClientRect(); var canvasRect = this.canvas.getBoundingClientRect();
var mouseX = ev.x - canvasRect.left; this.mouseX = ev.x - canvasRect.left;
var mouseY = ev.y - canvasRect.top; this.mouseY = ev.y - canvasRect.top;
var worldX = mouseX - this.cameraX; this.worldX = this.mouseX - this.cameraX;
var worldY = mouseY - this.cameraY; this.worldY = this.mouseY - this.cameraY;
for (var _i = 0, _a = this.nodes; _i < _a.length; _i++) { for (var _i = 0, _a = this.nodes; _i < _a.length; _i++) {
var node = _a[_i]; var node = _a[_i];
if (node.pointNearNode(worldX, worldY)) { if (node.pointNearNode(this.worldX, this.worldY)) {
if (node.pointInInputCircle(worldX, worldY)) { if (node.pointInInputCircle(this.worldX, this.worldY)) {
// no dragging from inputs ?
} }
else if (node.pointInOutputCircle(worldX, worldY)) { else if (node.pointInOutputCircle(this.worldX, this.worldY)) {
this.makingConnectionNode = node;
return;
} }
} }
if (node.pointInNode(worldX, worldY)) { if (node.pointInNode(this.worldX, this.worldY)) {
this.nodeDragging = node; this.nodeDragging = node;
return; return;
} }
@ -165,6 +177,19 @@ var Diagrams = /** @class */ (function () {
Diagrams.prototype.onmouseup = function (ev) { Diagrams.prototype.onmouseup = function (ev) {
this.panning = false; this.panning = false;
this.nodeDragging = null; this.nodeDragging = null;
if (this.makingConnectionNode !== null) {
for (var _i = 0, _a = this.nodes; _i < _a.length; _i++) {
var node = _a[_i];
if (node == this.makingConnectionNode) {
continue;
}
if (node.pointInInputCircle(this.worldX, this.worldY)) {
console.log("Making connection");
}
}
this.makingConnectionNode = null;
}
this.draw();
}; };
Diagrams.prototype.drawBackground = function () { Diagrams.prototype.drawBackground = function () {
this.ctx.fillStyle = "#D8D8D8"; this.ctx.fillStyle = "#D8D8D8";
@ -177,8 +202,22 @@ var Diagrams = /** @class */ (function () {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.drawBackground(); this.drawBackground();
var fullCircleRadians = Math.PI + (Math.PI * 3); var fullCircleRadians = Math.PI + (Math.PI * 3);
for (var _i = 0, _a = this.nodes; _i < _a.length; _i++) { if (this.makingConnectionNode != null) {
var node = _a[_i]; var _a = this.makingConnectionNode.getOutputCircleXY(), circleX = _a[0], circleY = _a[1];
var dX = Math.abs((circleX + this.cameraX) - this.mouseX);
this.ctx.beginPath();
this.ctx.moveTo(circleX + this.cameraX, circleY + this.cameraY);
this.ctx.strokeStyle = "black";
var cp1x = (circleX + dX / 2) + this.cameraX;
var cp1y = circleY + this.cameraY;
var cp2x = (this.mouseX - dX / 2);
var cp2y = this.mouseY;
this.ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, this.mouseX, this.mouseY);
this.ctx.stroke();
this.ctx.closePath();
}
for (var _i = 0, _b = this.nodes; _i < _b.length; _i++) {
var node = _b[_i];
this.ctx.fillStyle = node.hover ? "#303030" : "#161616"; this.ctx.fillStyle = node.hover ? "#303030" : "#161616";
this.ctx.fillRect(node.x + this.cameraX, node.y + this.cameraY, node.width, node.height); this.ctx.fillRect(node.x + this.cameraX, node.y + this.cameraY, node.width, node.height);
this.ctx.fillStyle = "#D3D3D3"; this.ctx.fillStyle = "#D3D3D3";
@ -188,13 +227,11 @@ var Diagrams = /** @class */ (function () {
this.ctx.beginPath(); this.ctx.beginPath();
this.ctx.arc(node.x + this.cameraX, node.y + node.height / 2 + this.cameraY, node.height / 3, 0, fullCircleRadians); this.ctx.arc(node.x + this.cameraX, node.y + node.height / 2 + this.cameraY, node.height / 3, 0, fullCircleRadians);
this.ctx.fill(); this.ctx.fill();
this.ctx.closePath();
this.ctx.beginPath(); this.ctx.beginPath();
this.ctx.fillStyle = node.outputHover ? "red" : "green"; this.ctx.fillStyle = node.outputHover ? "red" : "green";
this.ctx.moveTo(node.x + node.width + this.cameraX, node.y + node.height / 2 + this.cameraY); this.ctx.moveTo(node.x + node.width + this.cameraX, node.y + node.height / 2 + this.cameraY);
this.ctx.arc(node.x + node.width + this.cameraX, node.y + node.height / 2 + this.cameraY, node.height / 3, 0, fullCircleRadians); this.ctx.arc(node.x + node.width + this.cameraX, node.y + node.height / 2 + this.cameraY, node.height / 3, 0, fullCircleRadians);
this.ctx.fill(); this.ctx.fill();
this.ctx.closePath();
} }
}; };
Diagrams.prototype.addNode = function (x, y, label) { Diagrams.prototype.addNode = function (x, y, label) {

94
static/diagram.ts
View file

@ -59,16 +59,22 @@ class DiagramNode {
return true; return true;
} }
getInputCircleXY(){
return [this.x, this.y + this.height / 3]
}
getOutputCircleXY(){
return [this.x + this.width, this.y + this.height / 3]
}
pointInInputCircle(x: number, y: number){ pointInInputCircle(x: number, y: number){
let circleX = this.x; let [circleX, circleY] = this.getInputCircleXY()
let circleY = this.y + this.height / 3;
let radiusSqrd = Math.pow(this.height / 3, 2); let radiusSqrd = Math.pow(this.height / 3, 2);
return Math.pow(x - circleX, 2) + Math.pow(y - circleY, 2) <= radiusSqrd; return Math.pow(x - circleX, 2) + Math.pow(y - circleY, 2) <= radiusSqrd;
} }
pointInOutputCircle(x: number, y: number){ pointInOutputCircle(x: number, y: number){
let circleX = this.x + this.width; let [circleX, circleY] = this.getOutputCircleXY()
let circleY = this.y + this.height / 2;
let radiusSqrd = Math.pow(this.height / 3, 2); let radiusSqrd = Math.pow(this.height / 3, 2);
return Math.pow(x - circleX, 2) + Math.pow(y - circleY, 2) <= radiusSqrd; return Math.pow(x - circleX, 2) + Math.pow(y - circleY, 2) <= radiusSqrd;
} }
@ -96,14 +102,20 @@ class Diagrams {
connections: Array<[DiagramNode, DiagramNode]> = new Array(); connections: Array<[DiagramNode, DiagramNode]> = new Array();
cameraX: number = 0; cameraX: number = 0; // camera position
cameraY: number = 0; cameraY: number = 0;
mouseX: number = 0; // mouse position on the canvas
mouseY: number = 0;
worldX: number = 0; // relative mouse position
worldY: number = 0;
panning: boolean = false; panning: boolean = false;
nodeDragging: DiagramNode | null = null; nodeDragging: DiagramNode | null = null;
nodeHover: DiagramNode | null = null; nodeHover: DiagramNode | null = null;
makingConnectionNode: DiagramNode | null = null;
constructor(canvasId: string){ constructor(canvasId: string){
this.canvas = document.getElementById(canvasId) as HTMLCanvasElement; this.canvas = document.getElementById(canvasId) as HTMLCanvasElement;
if (this.canvas === null){ if (this.canvas === null){
@ -124,10 +136,10 @@ class Diagrams {
onmousemove(ev: MouseEvent){ onmousemove(ev: MouseEvent){
let canvasRect = this.canvas.getBoundingClientRect(); let canvasRect = this.canvas.getBoundingClientRect();
let mouseX = ev.x - canvasRect.left; this.mouseX = ev.x - canvasRect.left;
let mouseY = ev.y - canvasRect.top; this.mouseY = ev.y - canvasRect.top;
let worldX = mouseX - this.cameraX; this.worldX = this.mouseX - this.cameraX;
let worldY = mouseY - this.cameraY; this.worldY = this.mouseY - this.cameraY;
if (this.nodeHover != null){ if (this.nodeHover != null){
this.nodeHover.hover = false; this.nodeHover.hover = false;
@ -147,16 +159,16 @@ class Diagrams {
this.nodeDragging.y += ev.movementY; this.nodeDragging.y += ev.movementY;
} else { } else {
for (let node of this.nodes){ for (let node of this.nodes){
if (node.pointNearNode(worldX, worldY)){ if (node.pointNearNode(this.worldX, this.worldY)){
if (node.pointInInputCircle(worldX, worldY)) { if (node.pointInInputCircle(this.worldX, this.worldY)) {
node.inputHover = true; node.inputHover = true;
this.nodeHover = node; this.nodeHover = node;
break; break;
} else if (node.pointInOutputCircle(worldX, worldY)){ } else if (node.pointInOutputCircle(this.worldX, this.worldY)){
node.outputHover = true; node.outputHover = true;
this.nodeHover = node; this.nodeHover = node;
break; break;
}else if (node.pointInNode(worldX, worldY)){ }else if (node.pointInNode(this.worldX, this.worldY)){
node.hover = true; node.hover = true;
this.nodeHover = node; this.nodeHover = node;
break; break;
@ -172,19 +184,20 @@ class Diagrams {
return; return;
} }
let canvasRect = this.canvas.getBoundingClientRect(); let canvasRect = this.canvas.getBoundingClientRect();
let mouseX = ev.x - canvasRect.left; this.mouseX = ev.x - canvasRect.left;
let mouseY = ev.y - canvasRect.top; this.mouseY = ev.y - canvasRect.top;
let worldX = mouseX - this.cameraX; this.worldX = this.mouseX - this.cameraX;
let worldY = mouseY - this.cameraY; this.worldY = this.mouseY - this.cameraY;
for (let node of this.nodes){ for (let node of this.nodes){
if (node.pointNearNode(worldX, worldY)){ if (node.pointNearNode(this.worldX, this.worldY)){
if (node.pointInInputCircle(worldX, worldY)) { if (node.pointInInputCircle(this.worldX, this.worldY)) {
// no dragging from inputs ?
} else if (node.pointInOutputCircle(worldX, worldY)){ } else if (node.pointInOutputCircle(this.worldX, this.worldY)){
this.makingConnectionNode = node;
return;
} }
} }
if (node.pointInNode(worldX, worldY)) { if (node.pointInNode(this.worldX, this.worldY)) {
this.nodeDragging = node; this.nodeDragging = node;
return; return;
} }
@ -196,6 +209,18 @@ class Diagrams {
onmouseup(ev: MouseEvent){ onmouseup(ev: MouseEvent){
this.panning = false; this.panning = false;
this.nodeDragging = null; this.nodeDragging = null;
if (this.makingConnectionNode !== null){
for (let node of this.nodes){
if (node == this.makingConnectionNode){
continue;
}
if(node.pointInInputCircle(this.worldX, this.worldY)){
console.log("Making connection");
}
}
this.makingConnectionNode = null;
}
this.draw();
} }
drawBackground(){ drawBackground(){
@ -210,6 +235,27 @@ class Diagrams {
this.ctx.clearRect(0,0, this.canvas.width, this.canvas.height); this.ctx.clearRect(0,0, this.canvas.width, this.canvas.height);
this.drawBackground(); this.drawBackground();
let fullCircleRadians = Math.PI + (Math.PI * 3); let fullCircleRadians = Math.PI + (Math.PI * 3);
if (this.makingConnectionNode != null){
let [circleX, circleY] = this.makingConnectionNode.getOutputCircleXY();
let dX = Math.abs((circleX + this.cameraX) - this.mouseX);
this.ctx.beginPath();
this.ctx.moveTo(circleX + this.cameraX, circleY + this.cameraY);
this.ctx.strokeStyle = "black";
let cp1x = (circleX + dX / 2) + this.cameraX;
let cp1y = circleY + this.cameraY;
let cp2x = (this.mouseX - dX / 2);
let cp2y = this.mouseY;
this.ctx.bezierCurveTo(
cp1x,
cp1y,
cp2x,
cp2y,
this.mouseX,
this.mouseY
);
this.ctx.stroke();
this.ctx.closePath();
}
for (let node of this.nodes){ for (let node of this.nodes){
this.ctx.fillStyle = node.hover ? "#303030" : "#161616"; this.ctx.fillStyle = node.hover ? "#303030" : "#161616";
this.ctx.fillRect(node.x + this.cameraX, node.y + this.cameraY, node.width, node.height); this.ctx.fillRect(node.x + this.cameraX, node.y + this.cameraY, node.width, node.height);
@ -224,13 +270,11 @@ class Diagrams {
this.ctx.beginPath() this.ctx.beginPath()
this.ctx.arc(node.x + this.cameraX, node.y + node.height / 2 + this.cameraY, node.height / 3, 0, fullCircleRadians); this.ctx.arc(node.x + this.cameraX, node.y + node.height / 2 + this.cameraY, node.height / 3, 0, fullCircleRadians);
this.ctx.fill(); this.ctx.fill();
this.ctx.closePath();
this.ctx.beginPath() this.ctx.beginPath()
this.ctx.fillStyle = node.outputHover ? "red" : "green"; this.ctx.fillStyle = node.outputHover ? "red" : "green";
this.ctx.moveTo(node.x + node.width + this.cameraX, node.y + node.height / 2 + this.cameraY); this.ctx.moveTo(node.x + node.width + this.cameraX, node.y + node.height / 2 + this.cameraY);
this.ctx.arc(node.x + node.width + this.cameraX, node.y + node.height / 2 + this.cameraY, node.height / 3, 0, fullCircleRadians); this.ctx.arc(node.x + node.width + this.cameraX, node.y + node.height / 2 + this.cameraY, node.height / 3, 0, fullCircleRadians);
this.ctx.fill(); this.ctx.fill();
this.ctx.closePath();
} }
} }