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

working highlight for delete connection button

Browse source
This commit is contained in:
BroodjeAap 2022-09-13 17:37:03 +00:00
parent 4401abf0d1
commit 6001d86e41
2 changed files with 59 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
static/diagram.js
View file

@ -236,6 +236,25 @@ var Diagrams = /** @class */ (function () {
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);
/*
let hwWidth = 20;
let hwhWidth = hwWidth / 2;
let mouseOnHalfwayX = this.worldX - hwhWidth >= halfway.x && this.worldX + hwhWidth <= halfway.x;
let mouseOnHalfwayY = this.worldY - hwhWidth >= halfway.y && this.worldY + hwhWidth <= halfway.y;
console.log(mouseOnHalfwayX, mouseOnHalfwayY);
let mouseOnHalfway = mouseOnHalfwayX && mouseOnHalfwayY;
*/
var mouseOnHalfway = Math.pow(this.mouseX - halfway.x, 2) + Math.pow(this.mouseY - halfway.y, 2) <= 20 * 20;
this.ctx.beginPath();
this.ctx.strokeStyle = mouseOnHalfway ? "red" : "rgba(200, 200, 200, 0.8)";
// this.ctx.arc(halfway.x, halfway.y, 20, 0, fullCircleRadians);
this.ctx.moveTo(halfway.x - 10, halfway.y - 10);
this.ctx.lineTo(halfway.x + 10, halfway.y + 10);
this.ctx.moveTo(halfway.x + 10, halfway.y - 10);
this.ctx.lineTo(halfway.x - 10, halfway.y + 10);
this.ctx.stroke();
this.ctx.closePath();
}
for (var _f = 0, _g = this.nodes; _f < _g.length; _f++) {
var node = _g[_f];
@ -270,3 +289,12 @@ var Diagrams = /** @class */ (function () {
};
return Diagrams;
}());
// http://www.independent-software.com/determining-coordinates-on-a-html-canvas-bezier-curve.html
function getBezierXY(t, sx, sy, cp1x, cp1y, cp2x, cp2y, ex, ey) {
return {
x: Math.pow(1 - t, 3) * sx + 3 * t * Math.pow(1 - t, 2) * cp1x
+ 3 * t * t * (1 - t) * cp2x + t * t * t * ex,
y: Math.pow(1 - t, 3) * sy + 3 * t * Math.pow(1 - t, 2) * cp1y
+ 3 * t * t * (1 - t) * cp2y + t * t * t * ey
};
}

32
static/diagram.ts
View file

@ -223,6 +223,7 @@ class Diagrams {
}
this.makingConnectionNode = null;
}
this.draw();
}
@ -284,6 +285,25 @@ class Diagrams {
);
this.ctx.stroke();
this.ctx.closePath();
let halfway = getBezierXY(0.5, outputX, outputY, cp1x, cp1y, cp2x, cp2y, inputX, inputY)
/*
let hwWidth = 20;
let hwhWidth = hwWidth / 2;
let mouseOnHalfwayX = this.worldX - hwhWidth >= halfway.x && this.worldX + hwhWidth <= halfway.x;
let mouseOnHalfwayY = this.worldY - hwhWidth >= halfway.y && this.worldY + hwhWidth <= halfway.y;
console.log(mouseOnHalfwayX, mouseOnHalfwayY);
let mouseOnHalfway = mouseOnHalfwayX && mouseOnHalfwayY;
*/
let mouseOnHalfway = Math.pow(this.mouseX - halfway.x, 2) + Math.pow(this.mouseY - halfway.y, 2) <= 20*20
this.ctx.beginPath();
this.ctx.strokeStyle = mouseOnHalfway ? "red" : "rgba(200, 200, 200, 0.8)";
// this.ctx.arc(halfway.x, halfway.y, 20, 0, fullCircleRadians);
this.ctx.moveTo(halfway.x - 10, halfway.y - 10);
this.ctx.lineTo(halfway.x + 10, halfway.y + 10);
this.ctx.moveTo(halfway.x + 10, halfway.y - 10);
this.ctx.lineTo(halfway.x - 10, halfway.y + 10);
this.ctx.stroke();
this.ctx.closePath();
}
for (let node of this.nodes){
this.ctx.fillStyle = node.hover ? "#303030" : "#161616";
@ -322,4 +342,14 @@ class Diagrams {
this.canvas.height = this.canvas.clientHeight;
this.draw();
}
}
}
// http://www.independent-software.com/determining-coordinates-on-a-html-canvas-bezier-curve.html
function getBezierXY(t, sx, sy, cp1x, cp1y, cp2x, cp2y, ex, ey) {
return {
x: Math.pow(1-t,3) * sx + 3 * t * Math.pow(1 - t, 2) * cp1x
+ 3 * t * t * (1 - t) * cp2x + t * t * t * ex,
y: Math.pow(1-t,3) * sy + 3 * t * Math.pow(1 - t, 2) * cp1y
+ 3 * t * t * (1 - t) * cp2y + t * t * t * ey
};
}