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

can remove connections now

Browse source
This commit is contained in:
BroodjeAap 2022-09-18 08:34:09 +00:00
parent 2f85b2ae76
commit 247cfbab9a
2 changed files with 65 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
static/diagram.js
View file

@ -195,6 +195,31 @@ var Diagrams = /** @class */ (function () {
} }
this.makingConnectionNode = null; this.makingConnectionNode = null;
} }
for (var _b = 0, _c = this.connections; _b < _c.length; _b++) {
var _d = _c[_b], output = _d[0], input = _d[1];
var _e = output.getOutputCircleXY(), outputX = _e[0], outputY = _e[1];
outputX += this.cameraX;
outputY += this.cameraY;
var _f = input.getInputCircleXY(), inputX = _f[0], inputY = _f[1];
inputX += this.cameraX;
inputY += this.cameraY;
var dX = Math.abs(outputX - inputX);
this.ctx.beginPath();
this.ctx.moveTo(outputX, outputY);
this.ctx.strokeStyle = "black";
var cp1x = (outputX + dX / 2);
var cp1y = outputY;
var cp2x = (inputX - dX / 2);
var cp2y = inputY;
this.ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, inputX, inputY);
this.ctx.stroke();
this.ctx.closePath();
var halfway = getBezierXY(0.5, outputX, outputY, cp1x, cp1y, cp2x, cp2y, inputX, inputY);
var mouseOnHalfway = Math.pow(this.mouseX - halfway.x, 2) + Math.pow(this.mouseY - halfway.y, 2) <= 10 * 10;
if (mouseOnHalfway) {
this.connections.splice(this.connections.indexOf([output, input]), 1);
}
}
this.draw(); this.draw();
}; };
Diagrams.prototype.onwheel = function (ev) { Diagrams.prototype.onwheel = function (ev) {
@ -250,7 +275,7 @@ var Diagrams = /** @class */ (function () {
this.ctx.stroke(); this.ctx.stroke();
this.ctx.closePath(); this.ctx.closePath();
var halfway = getBezierXY(0.5, outputX, outputY, cp1x, cp1y, cp2x, cp2y, inputX, inputY); var halfway = getBezierXY(0.5, outputX, outputY, cp1x, cp1y, cp2x, cp2y, inputX, inputY);
var mouseOnHalfway = Math.pow(this.mouseX - halfway.x, 2) + Math.pow(this.mouseY - halfway.y, 2) <= 20 * 20; var mouseOnHalfway = Math.pow(this.mouseX - halfway.x, 2) + Math.pow(this.mouseY - halfway.y, 2) <= 10 * 10;
this.ctx.beginPath(); this.ctx.beginPath();
this.ctx.strokeStyle = mouseOnHalfway ? "red" : "rgba(200, 200, 200, 0.8)"; this.ctx.strokeStyle = mouseOnHalfway ? "red" : "rgba(200, 200, 200, 0.8)";
this.ctx.moveTo(halfway.x - 10, halfway.y - 10); this.ctx.moveTo(halfway.x - 10, halfway.y - 10);
@ -286,6 +311,8 @@ var Diagrams = /** @class */ (function () {
Diagrams.prototype.addConnection = function (A, B) { Diagrams.prototype.addConnection = function (A, B) {
this.connections.push([A, B]); this.connections.push([A, B]);
}; };
Diagrams.prototype.drawDiagramNode = function (node) {
};
Diagrams.prototype.fillParent = function () { Diagrams.prototype.fillParent = function () {
this.canvas.width = this.canvas.clientWidth; this.canvas.width = this.canvas.clientWidth;
this.canvas.height = this.canvas.clientHeight; this.canvas.height = this.canvas.clientHeight;

38
static/diagram.ts
View file

@ -231,6 +231,38 @@ class Diagrams {
} }
this.makingConnectionNode = null; this.makingConnectionNode = null;
} }
for (let [output, input] of this.connections){
let [outputX, outputY] = output.getOutputCircleXY();
outputX += this.cameraX;
outputY += this.cameraY;
let [inputX, inputY] = input.getInputCircleXY();
inputX += this.cameraX;
inputY += this.cameraY;
let dX = Math.abs(outputX - inputX);
this.ctx.beginPath();
this.ctx.moveTo(outputX, outputY);
this.ctx.strokeStyle = "black";
let cp1x = (outputX + dX / 2);
let cp1y = outputY;
let cp2x = (inputX - dX / 2);
let cp2y = inputY;
this.ctx.bezierCurveTo(
cp1x,
cp1y,
cp2x,
cp2y,
inputX,
inputY
);
this.ctx.stroke();
this.ctx.closePath();
let halfway = getBezierXY(0.5, outputX, outputY, cp1x, cp1y, cp2x, cp2y, inputX, inputY)
let mouseOnHalfway = Math.pow(this.mouseX - halfway.x, 2) + Math.pow(this.mouseY - halfway.y, 2) <= 10*10
if (mouseOnHalfway){
this.connections.splice(this.connections.indexOf([output, input]), 1)
}
}
this.draw(); this.draw();
} }
@ -303,7 +335,7 @@ class Diagrams {
this.ctx.stroke(); this.ctx.stroke();
this.ctx.closePath(); this.ctx.closePath();
let halfway = getBezierXY(0.5, outputX, outputY, cp1x, cp1y, cp2x, cp2y, inputX, inputY) let halfway = getBezierXY(0.5, outputX, outputY, cp1x, cp1y, cp2x, cp2y, inputX, inputY)
let mouseOnHalfway = Math.pow(this.mouseX - halfway.x, 2) + Math.pow(this.mouseY - halfway.y, 2) <= 20*20 let mouseOnHalfway = Math.pow(this.mouseX - halfway.x, 2) + Math.pow(this.mouseY - halfway.y, 2) <= 10*10
this.ctx.beginPath(); this.ctx.beginPath();
this.ctx.strokeStyle = mouseOnHalfway ? "red" : "rgba(200, 200, 200, 0.8)"; this.ctx.strokeStyle = mouseOnHalfway ? "red" : "rgba(200, 200, 200, 0.8)";
this.ctx.moveTo(halfway.x - 10, halfway.y - 10); this.ctx.moveTo(halfway.x - 10, halfway.y - 10);
@ -345,6 +377,10 @@ class Diagrams {
this.connections.push([A, B]); this.connections.push([A, B]);
} }
drawDiagramNode(node: DiagramNode){
}
fillParent(){ fillParent(){
this.canvas.width = this.canvas.clientWidth; this.canvas.width = this.canvas.clientWidth;
this.canvas.height = this.canvas.clientHeight; this.canvas.height = this.canvas.clientHeight;