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

working input/output segmets for nodes, simplified moveto state

Browse source
This commit is contained in:
BroodjeAap 2022-09-11 11:41:04 +00:00
parent 377cd8bcf1
commit 67e9dc694e
2 changed files with 147 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
static/diagram.js
View file

@ -1,6 +1,8 @@
var DiagramNode = /** @class */ (function () { var DiagramNode = /** @class */ (function () {
function DiagramNode(x, y, width, height, label) { function DiagramNode(x, y, width, height, label) {
this.hover = false; this.hover = false;
this.inputHover = false;
this.outputHover = false;
this.x = x; this.x = x;
this.y = y; this.y = y;
this.width = width; this.width = width;
@ -22,6 +24,34 @@ var DiagramNode = /** @class */ (function () {
} }
return true; return true;
}; };
DiagramNode.prototype.pointNearNode = function (x, y) {
// including the input/output circles
if (x < this.x - this.height / 3) {
return false;
}
if (y < this.y) {
return false;
}
if (x > this.x + this.width + this.height / 3) {
return false;
}
if (y > this.y + this.height) {
return false;
}
return true;
};
DiagramNode.prototype.pointInInputCircle = function (x, y) {
var circleX = this.x;
var circleY = this.y + this.height / 3;
var radiusSqrd = Math.pow(this.height / 3, 2);
return Math.pow(x - circleX, 2) + Math.pow(y - circleY, 2) <= radiusSqrd;
};
DiagramNode.prototype.pointInOutputCircle = function (x, y) {
var circleX = this.x + this.width;
var circleY = this.y + this.height / 2;
var radiusSqrd = Math.pow(this.height / 3, 2);
return Math.pow(x - circleX, 2) + Math.pow(y - circleY, 2) <= radiusSqrd;
};
return DiagramNode; return DiagramNode;
}()); }());
var _diagram; var _diagram;
@ -66,26 +96,43 @@ var Diagrams = /** @class */ (function () {
var canvasRect = this.canvas.getBoundingClientRect(); var canvasRect = this.canvas.getBoundingClientRect();
var mouseX = ev.x - canvasRect.left; var mouseX = ev.x - canvasRect.left;
var mouseY = ev.y - canvasRect.top; var mouseY = ev.y - canvasRect.top;
var worldX = mouseX - this.cameraX;
var worldY = mouseY - this.cameraY;
if (this.nodeHover != null) {
this.nodeHover.hover = false;
this.nodeHover.inputHover = false;
this.nodeHover.outputHover = false;
this.nodeHover = null;
}
if (this.panning) { if (this.panning) {
this.cameraX += ev.movementX; this.cameraX += ev.movementX;
this.cameraY += ev.movementY; this.cameraY += ev.movementY;
} }
else if (this.nodeDragging != null) { else if (this.nodeDragging != null) {
this.nodeDragging.x = mouseX - this.cameraX - this.nodeDragging.width / 2; // this.nodeDragging.x = worldX - this.nodeDragging.width / 2;
this.nodeDragging.y = mouseY - this.cameraY - this.nodeDragging.height / 2; // this.nodeDragging.y = worldY - this.nodeDragging.height / 2;
} this.nodeDragging.x += ev.movementX;
else if (this.nodeHover != null) { this.nodeDragging.y += ev.movementY;
if (!this.nodeHover.pointInNode(mouseX - this.cameraX, mouseY - this.cameraY)) {
this.nodeHover.hover = false;
this.nodeHover = null;
}
} }
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.pointInNode(mouseX - this.cameraX, mouseY - this.cameraY)) { if (node.pointNearNode(worldX, worldY)) {
node.hover = true; if (node.pointInInputCircle(worldX, worldY)) {
this.nodeHover = node; node.inputHover = true;
this.nodeHover = node;
break;
}
else if (node.pointInOutputCircle(worldX, worldY)) {
node.outputHover = true;
this.nodeHover = node;
break;
}
else if (node.pointInNode(worldX, worldY)) {
node.hover = true;
this.nodeHover = node;
break;
}
} }
} }
} }
@ -98,9 +145,17 @@ var Diagrams = /** @class */ (function () {
var canvasRect = this.canvas.getBoundingClientRect(); var canvasRect = this.canvas.getBoundingClientRect();
var mouseX = ev.x - canvasRect.left; var mouseX = ev.x - canvasRect.left;
var mouseY = ev.y - canvasRect.top; var mouseY = ev.y - canvasRect.top;
var worldX = mouseX - this.cameraX;
var worldY = 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.pointInNode(mouseX - this.cameraX, mouseY - this.cameraY)) { if (node.pointNearNode(worldX, worldY)) {
if (node.pointInInputCircle(worldX, worldY)) {
}
else if (node.pointInOutputCircle(worldX, worldY)) {
}
}
if (node.pointInNode(worldX, worldY)) {
this.nodeDragging = node; this.nodeDragging = node;
return; return;
} }
@ -129,11 +184,13 @@ var Diagrams = /** @class */ (function () {
this.ctx.fillStyle = "#D3D3D3"; this.ctx.fillStyle = "#D3D3D3";
this.ctx.font = "30px Helvetica"; this.ctx.font = "30px Helvetica";
this.ctx.fillText(node.label, node.x + this.cameraX + node.height / 2, node.y + this.cameraY + node.height / 1.5); this.ctx.fillText(node.label, node.x + this.cameraX + node.height / 2, node.y + this.cameraY + node.height / 1.5);
this.ctx.strokeStyle = "red"; this.ctx.fillStyle = node.inputHover ? "red" : "green";
this.ctx.fillStyle = "red";
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.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();

93
static/diagram.ts
View file

@ -6,6 +6,8 @@ class DiagramNode {
height: number; height: number;
hover: boolean = false; hover: boolean = false;
inputHover: boolean = false;
outputHover: boolean = false;
parents: Array<DiagramNode>; parents: Array<DiagramNode>;
children: Array<DiagramNode>; children: Array<DiagramNode>;
@ -35,10 +37,41 @@ class DiagramNode {
return false; return false;
} }
if (y > this.y + this.height) { if (y > this.y + this.height) {
return false return false;
} }
return true; return true;
} }
pointNearNode(x: number, y: number){
// including the input/output circles
if (x < this.x - this.height / 3){
return false;
}
if (y < this.y){
return false;
}
if (x > this.x + this.width + this.height / 3){
return false;
}
if (y > this.y + this.height) {
return false;
}
return true;
}
pointInInputCircle(x: number, y: number){
let circleX = this.x;
let circleY = this.y + this.height / 3;
let radiusSqrd = Math.pow(this.height / 3, 2);
return Math.pow(x - circleX, 2) + Math.pow(y - circleY, 2) <= radiusSqrd;
}
pointInOutputCircle(x: number, y: number){
let circleX = this.x + this.width;
let circleY = this.y + this.height / 2;
let radiusSqrd = Math.pow(this.height / 3, 2);
return Math.pow(x - circleX, 2) + Math.pow(y - circleY, 2) <= radiusSqrd;
}
} }
let _diagram: Diagrams; let _diagram: Diagrams;
@ -93,26 +126,41 @@ class Diagrams {
let canvasRect = this.canvas.getBoundingClientRect(); let canvasRect = this.canvas.getBoundingClientRect();
let mouseX = ev.x - canvasRect.left; let mouseX = ev.x - canvasRect.left;
let mouseY = ev.y - canvasRect.top; let mouseY = ev.y - canvasRect.top;
let worldX = mouseX - this.cameraX;
let worldY = mouseY - this.cameraY;
if (this.nodeHover != null){
this.nodeHover.hover = false;
this.nodeHover.inputHover = false
this.nodeHover.outputHover = false
this.nodeHover = null;
}
if (this.panning){ if (this.panning){
this.cameraX += ev.movementX; this.cameraX += ev.movementX;
this.cameraY += ev.movementY; this.cameraY += ev.movementY;
} }
else if (this.nodeDragging != null){ else if (this.nodeDragging != null){
this.nodeDragging.x = mouseX - this.cameraX - this.nodeDragging.width / 2; // this.nodeDragging.x = worldX - this.nodeDragging.width / 2;
this.nodeDragging.y = mouseY - this.cameraY - this.nodeDragging.height / 2; // this.nodeDragging.y = worldY - this.nodeDragging.height / 2;
} this.nodeDragging.x += ev.movementX;
else if (this.nodeHover != null){ this.nodeDragging.y += ev.movementY;
if (!this.nodeHover.pointInNode(mouseX - this.cameraX, mouseY - this.cameraY)){ } else {
this.nodeHover.hover = false;
this.nodeHover = null;
}
}
else {
for (let node of this.nodes){ for (let node of this.nodes){
if (node.pointInNode(mouseX - this.cameraX, mouseY - this.cameraY)){ if (node.pointNearNode(worldX, worldY)){
node.hover = true; if (node.pointInInputCircle(worldX, worldY)) {
this.nodeHover = node; node.inputHover = true;
this.nodeHover = node;
break;
} else if (node.pointInOutputCircle(worldX, worldY)){
node.outputHover = true;
this.nodeHover = node;
break;
}else if (node.pointInNode(worldX, worldY)){
node.hover = true;
this.nodeHover = node;
break;
}
} }
} }
} }
@ -126,8 +174,17 @@ class Diagrams {
let canvasRect = this.canvas.getBoundingClientRect(); let canvasRect = this.canvas.getBoundingClientRect();
let mouseX = ev.x - canvasRect.left; let mouseX = ev.x - canvasRect.left;
let mouseY = ev.y - canvasRect.top; let mouseY = ev.y - canvasRect.top;
let worldX = mouseX - this.cameraX;
let worldY = mouseY - this.cameraY;
for (let node of this.nodes){ for (let node of this.nodes){
if (node.pointInNode(mouseX - this.cameraX, mouseY - this.cameraY)) { if (node.pointNearNode(worldX, worldY)){
if (node.pointInInputCircle(worldX, worldY)) {
} else if (node.pointInOutputCircle(worldX, worldY)){
}
}
if (node.pointInNode(worldX, worldY)) {
this.nodeDragging = node; this.nodeDragging = node;
return; return;
} }
@ -163,11 +220,13 @@ class Diagrams {
node.x + this.cameraX + node.height / 2, node.x + this.cameraX + node.height / 2,
node.y + this.cameraY + node.height / 1.5 node.y + this.cameraY + node.height / 1.5
); );
this.ctx.strokeStyle = "red"; this.ctx.fillStyle = node.inputHover ? "red" : "green";
this.ctx.fillStyle = "red";
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.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();