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

got clicking and connection delete working

Browse source
This commit is contained in:
BroodjeAap 2022-10-02 08:39:03 +00:00
parent 0555ad1020
commit 112bf3f726
2 changed files with 110 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
static/diagram.js
View file

@ -128,37 +128,55 @@ var NodeConnection = /** @class */ (function (_super) {
__extends(NodeConnection, _super); __extends(NodeConnection, _super);
function NodeConnection(output, input) { function NodeConnection(output, input) {
var _this = _super.call(this, 0, 0, 0, 0) || this; var _this = _super.call(this, 0, 0, 0, 0) || this;
_this.controlPoints = {
dX: 0,
outputX: 0,
outputY: 0,
inputX: 0,
inputY: 0,
cp1x: 0,
cp1y: 0,
cp2x: 0,
cp2y: 0
};
_this.halfWayPoint = new Point();
_this.output = output; _this.output = output;
_this.input = input; _this.input = input;
return _this; return _this;
} }
NodeConnection.prototype.update = function (ms) { NodeConnection.prototype.update = function (ms) {
this.controlPoints.outputX = ms.offset.x + this.output.output.x;
this.controlPoints.outputY = ms.offset.y + this.output.output.y;
this.controlPoints.inputX = ms.offset.x + this.input.input.x;
this.controlPoints.inputY = ms.offset.y + this.input.input.y;
this.controlPoints.dX = Math.abs(this.controlPoints.outputX - this.controlPoints.inputX);
this.controlPoints.cp1x = (this.controlPoints.outputX + this.controlPoints.dX);
this.controlPoints.cp1y = this.controlPoints.outputY;
this.controlPoints.cp2x = (this.controlPoints.inputX - this.controlPoints.dX);
this.controlPoints.cp2y = this.controlPoints.inputY;
this.halfWayPoint = getBezierXY(0.5, this.controlPoints.outputX, this.controlPoints.outputY, this.controlPoints.cp1x, this.controlPoints.cp1y, this.controlPoints.cp2x, this.controlPoints.cp2y, this.controlPoints.inputX, this.controlPoints.inputY);
this.hover = Math.pow(this.halfWayPoint.x - ms.canvas.x, 2) + Math.pow(this.halfWayPoint.y - ms.canvas.y, 2) <= 15 * 15;
if (this.hover && ms.click) {
_diagram.removeConnection(this.output, this.input);
ms.click = false;
}
}; };
NodeConnection.prototype.draw = function (ctx, ms) { NodeConnection.prototype.draw = function (ctx, ms) {
var outputX = ms.offset.x + this.output.output.x;
var outputY = ms.offset.y + this.output.output.y;
var inputX = ms.offset.x + this.input.input.x;
var inputY = ms.offset.y + this.input.input.y;
var dX = Math.abs(outputX - inputX);
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(outputX, outputY); ctx.moveTo(this.controlPoints.outputX, this.controlPoints.outputY);
ctx.strokeStyle = "#757575"; ctx.strokeStyle = "#757575";
ctx.lineWidth = 5; ctx.lineWidth = 5;
var cp1x = (outputX + dX); ctx.bezierCurveTo(this.controlPoints.cp1x, this.controlPoints.cp1y, this.controlPoints.cp2x, this.controlPoints.cp2y, this.controlPoints.inputX, this.controlPoints.inputY);
var cp1y = outputY; ctx.stroke();
var cp2x = (inputX - dX); ctx.closePath();
var cp2y = inputY; ctx.beginPath();
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, inputX, inputY); ctx.strokeStyle = this.hover ? "red" : "rgba(200, 200, 200, 0.8)";
ctx.moveTo(this.halfWayPoint.x - 10, this.halfWayPoint.y - 10);
ctx.lineTo(this.halfWayPoint.x + 10, this.halfWayPoint.y + 10);
ctx.moveTo(this.halfWayPoint.x + 10, this.halfWayPoint.y - 10);
ctx.lineTo(this.halfWayPoint.x - 10, this.halfWayPoint.y + 10);
ctx.stroke(); ctx.stroke();
ctx.closePath(); 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.removeConnection(output, input);
break;
}
*/
}; };
NodeConnection.prototype.reposition = function () { NodeConnection.prototype.reposition = function () {
}; };
@ -353,6 +371,7 @@ var MouseState = /** @class */ (function () {
this.panning = false; this.panning = false;
this.draggingNode = false; this.draggingNode = false;
this.draggingConnection = false; this.draggingConnection = false;
this.click = true;
} }
return MouseState; return MouseState;
}()); }());
@ -392,6 +411,9 @@ var Diagrams = /** @class */ (function () {
Diagrams.prototype.tick = function () { Diagrams.prototype.tick = function () {
var e_1, _a, e_2, _b, e_3, _c, e_4, _d; var e_1, _a, e_2, _b, e_3, _c, e_4, _d;
this.drawBackground(); this.drawBackground();
if (this.mouseState.leftUp && !this.mouseState.panning && !this.mouseState.draggingNode && !this.mouseState.draggingConnection) {
this.mouseState.click = true;
}
try { try {
for (var _e = __values(this.nodes.values()), _f = _e.next(); !_f.done; _f = _e.next()) { for (var _e = __values(this.nodes.values()), _f = _e.next(); !_f.done; _f = _e.next()) {
var node = _f.value; var node = _f.value;
@ -444,10 +466,8 @@ var Diagrams = /** @class */ (function () {
} }
finally { if (e_4) throw e_4.error; } finally { if (e_4) throw e_4.error; }
} }
if (this.mouseState.leftUp) {
console.log("Click");
}
this.mouseState.leftUp = false; this.mouseState.leftUp = false;
this.mouseState.click = false;
}; };
Diagrams.prototype.onmousemove = function (ev) { Diagrams.prototype.onmousemove = function (ev) {
var canvasRect = this.canvas.getBoundingClientRect(); var canvasRect = this.canvas.getBoundingClientRect();
@ -554,10 +574,7 @@ var Diagrams = /** @class */ (function () {
}()); }());
// http://www.independent-software.com/determining-coordinates-on-a-html-canvas-bezier-curve.html // 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) { function getBezierXY(t, sx, sy, cp1x, cp1y, cp2x, cp2y, ex, ey) {
return { return new Point(Math.pow(1 - t, 3) * sx + 3 * t * Math.pow(1 - t, 2) * cp1x
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, Math.pow(1 - t, 3) * sy + 3 * t * Math.pow(1 - t, 2) * cp1y
+ 3 * t * t * (1 - t) * cp2x + t * t * t * ex, + 3 * t * t * (1 - t) * cp2y + t * t * t * ey);
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
};
} }

96
static/diagram.ts
View file

@ -105,6 +105,20 @@ class NodeIO extends CanvasObject {
class NodeConnection extends CanvasObject { class NodeConnection extends CanvasObject {
output: DiagramNode; output: DiagramNode;
input: DiagramNode; input: DiagramNode;
controlPoints = {
dX: 0,
outputX: 0,
outputY: 0,
inputX: 0,
inputY: 0,
cp1x: 0,
cp1y: 0,
cp2x: 0,
cp2y: 0,
}
halfWayPoint: Point = new Point();
constructor(output: DiagramNode, input: DiagramNode){ constructor(output: DiagramNode, input: DiagramNode){
super(0, 0, 0, 0); super(0, 0, 0, 0);
@ -113,40 +127,58 @@ class NodeConnection extends CanvasObject {
} }
update(ms: MouseState): void { update(ms: MouseState): void {
this.controlPoints.outputX = ms.offset.x + this.output.output.x;
this.controlPoints.outputY = ms.offset.y + this.output.output.y;
this.controlPoints.inputX = ms.offset.x + this.input.input.x;
this.controlPoints.inputY = ms.offset.y + this.input.input.y;
this.controlPoints.dX = Math.abs(this.controlPoints.outputX - this.controlPoints.inputX);
this.controlPoints.cp1x = (this.controlPoints.outputX + this.controlPoints.dX);
this.controlPoints.cp1y = this.controlPoints.outputY;
this.controlPoints.cp2x = (this.controlPoints.inputX - this.controlPoints.dX);
this.controlPoints.cp2y = this.controlPoints.inputY;
this.halfWayPoint = getBezierXY(
0.5,
this.controlPoints.outputX,
this.controlPoints.outputY,
this.controlPoints.cp1x,
this.controlPoints.cp1y,
this.controlPoints.cp2x,
this.controlPoints.cp2y,
this.controlPoints.inputX,
this.controlPoints.inputY
);
this.hover = Math.pow(this.halfWayPoint.x - ms.canvas.x, 2) + Math.pow(this.halfWayPoint.y - ms.canvas.y, 2) <= 15*15;
if (this.hover && ms.click){
_diagram.removeConnection(this.output, this.input);
ms.click = false;
}
} }
draw(ctx: CanvasRenderingContext2D, ms: MouseState): void { draw(ctx: CanvasRenderingContext2D, ms: MouseState): void {
let outputX = ms.offset.x + this.output.output.x;
let outputY = ms.offset.y + this.output.output.y;
let inputX = ms.offset.x + this.input.input.x;
let inputY = ms.offset.y + this.input.input.y;
let dX = Math.abs(outputX - inputX);
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(outputX, outputY); ctx.moveTo(this.controlPoints.outputX, this.controlPoints.outputY);
ctx.strokeStyle = "#757575"; ctx.strokeStyle = "#757575";
ctx.lineWidth = 5; ctx.lineWidth = 5;
let cp1x = (outputX + dX);
let cp1y = outputY;
let cp2x = (inputX - dX);
let cp2y = inputY;
ctx.bezierCurveTo( ctx.bezierCurveTo(
cp1x, this.controlPoints.cp1x,
cp1y, this.controlPoints.cp1y,
cp2x, this.controlPoints.cp2x,
cp2y, this.controlPoints.cp2y,
inputX, this.controlPoints.inputX,
inputY this.controlPoints.inputY
); );
ctx.stroke(); ctx.stroke();
ctx.closePath(); ctx.closePath();
/*
let halfway = getBezierXY(0.5, outputX, outputY, cp1x, cp1y, cp2x, cp2y, inputX, inputY) ctx.beginPath();
let mouseOnHalfway = Math.pow(this.mouseX - halfway.x, 2) + Math.pow(this.mouseY - halfway.y, 2) <= 10*10 ctx.strokeStyle = this.hover ? "red" : "rgba(200, 200, 200, 0.8)";
if (mouseOnHalfway){ ctx.moveTo(this.halfWayPoint.x - 10, this.halfWayPoint.y - 10);
this.removeConnection(output, input); ctx.lineTo(this.halfWayPoint.x + 10, this.halfWayPoint.y + 10);
break; ctx.moveTo(this.halfWayPoint.x + 10, this.halfWayPoint.y - 10);
} ctx.lineTo(this.halfWayPoint.x - 10, this.halfWayPoint.y + 10);
*/ ctx.stroke();
ctx.closePath();
} }
reposition(){ reposition(){
@ -387,6 +419,7 @@ class MouseState {
panning: boolean = false; panning: boolean = false;
draggingNode: boolean = false; draggingNode: boolean = false;
draggingConnection: boolean = false; draggingConnection: boolean = false;
click: boolean = true;
} }
class Diagrams { class Diagrams {
@ -441,6 +474,9 @@ class Diagrams {
tick(){ tick(){
this.drawBackground(); this.drawBackground();
if (this.mouseState.leftUp && !this.mouseState.panning && !this.mouseState.draggingNode && !this.mouseState.draggingConnection){
this.mouseState.click = true;
}
for (let node of this.nodes.values()){ for (let node of this.nodes.values()){
node.update(this.mouseState); node.update(this.mouseState);
} }
@ -453,10 +489,8 @@ class Diagrams {
for (let node of this.nodes.values()){ for (let node of this.nodes.values()){
node.draw(this.ctx, this.mouseState); node.draw(this.ctx, this.mouseState);
} }
if (this.mouseState.leftUp){
console.log("Click");
}
this.mouseState.leftUp = false; this.mouseState.leftUp = false;
this.mouseState.click = false;
} }
onmousemove(ev: MouseEvent){ onmousemove(ev: MouseEvent){
@ -552,10 +586,10 @@ class Diagrams {
// http://www.independent-software.com/determining-coordinates-on-a-html-canvas-bezier-curve.html // 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) { function getBezierXY(t, sx, sy, cp1x, cp1y, cp2x, cp2y, ex, ey) {
return { return new Point(
x: Math.pow(1-t,3) * sx + 3 * t * Math.pow(1 - t, 2) * cp1x Math.pow(1-t,3) * sx + 3 * t * Math.pow(1 - t, 2) * cp1x
+ 3 * t * t * (1 - t) * cp2x + t * t * t * ex, + 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 Math.pow(1-t,3) * sy + 3 * t * Math.pow(1 - t, 2) * cp1y
+ 3 * t * t * (1 - t) * cp2y + t * t * t * ey + 3 * t * t * (1 - t) * cp2y + t * t * t * ey
}; );
} }