From a61e8343a267798ea8f284c9b43a8e4fd197d5f3 Mon Sep 17 00:00:00 2001 From: BroodjeAap Date: Sun, 11 Sep 2022 13:12:14 +0000 Subject: [PATCH] ready to start making connections between nodes --- static/diagram.js | 87 ++++++++++++++++++++++++++++++------------- static/diagram.ts | 94 ++++++++++++++++++++++++++++++++++------------- 2 files changed, 131 insertions(+), 50 deletions(-) diff --git a/static/diagram.js b/static/diagram.js index 6ce05e3..c17908e 100644 --- a/static/diagram.js +++ b/static/diagram.js @@ -40,15 +40,19 @@ var DiagramNode = /** @class */ (function () { } 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) { - var circleX = this.x; - var circleY = this.y + this.height / 3; + var _a = this.getInputCircleXY(), circleX = _a[0], circleY = _a[1]; 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 _a = this.getOutputCircleXY(), circleX = _a[0], circleY = _a[1]; var radiusSqrd = Math.pow(this.height / 3, 2); return Math.pow(x - circleX, 2) + Math.pow(y - circleY, 2) <= radiusSqrd; }; @@ -71,11 +75,16 @@ var Diagrams = /** @class */ (function () { function Diagrams(canvasId) { this.nodes = new Array(); this.connections = new Array(); - this.cameraX = 0; + this.cameraX = 0; // camera position 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.nodeDragging = null; this.nodeHover = null; + this.makingConnectionNode = null; this.canvas = document.getElementById(canvasId); if (this.canvas === null) { throw "Could not getElementById " + canvasId; @@ -94,10 +103,10 @@ var Diagrams = /** @class */ (function () { } Diagrams.prototype.onmousemove = function (ev) { var canvasRect = this.canvas.getBoundingClientRect(); - var mouseX = ev.x - canvasRect.left; - var mouseY = ev.y - canvasRect.top; - var worldX = mouseX - this.cameraX; - var worldY = mouseY - this.cameraY; + this.mouseX = ev.x - canvasRect.left; + this.mouseY = ev.y - canvasRect.top; + this.worldX = this.mouseX - this.cameraX; + this.worldY = this.mouseY - this.cameraY; if (this.nodeHover != null) { this.nodeHover.hover = false; this.nodeHover.inputHover = false; @@ -117,18 +126,18 @@ var Diagrams = /** @class */ (function () { else { for (var _i = 0, _a = this.nodes; _i < _a.length; _i++) { var node = _a[_i]; - if (node.pointNearNode(worldX, worldY)) { - if (node.pointInInputCircle(worldX, worldY)) { + if (node.pointNearNode(this.worldX, this.worldY)) { + if (node.pointInInputCircle(this.worldX, this.worldY)) { node.inputHover = true; this.nodeHover = node; break; } - else if (node.pointInOutputCircle(worldX, worldY)) { + else if (node.pointInOutputCircle(this.worldX, this.worldY)) { node.outputHover = true; this.nodeHover = node; break; } - else if (node.pointInNode(worldX, worldY)) { + else if (node.pointInNode(this.worldX, this.worldY)) { node.hover = true; this.nodeHover = node; break; @@ -143,19 +152,22 @@ var Diagrams = /** @class */ (function () { return; } var canvasRect = this.canvas.getBoundingClientRect(); - var mouseX = ev.x - canvasRect.left; - var mouseY = ev.y - canvasRect.top; - var worldX = mouseX - this.cameraX; - var worldY = mouseY - this.cameraY; + this.mouseX = ev.x - canvasRect.left; + this.mouseY = ev.y - canvasRect.top; + this.worldX = this.mouseX - this.cameraX; + this.worldY = this.mouseY - this.cameraY; for (var _i = 0, _a = this.nodes; _i < _a.length; _i++) { var node = _a[_i]; - if (node.pointNearNode(worldX, worldY)) { - if (node.pointInInputCircle(worldX, worldY)) { + if (node.pointNearNode(this.worldX, this.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; return; } @@ -165,6 +177,19 @@ var Diagrams = /** @class */ (function () { Diagrams.prototype.onmouseup = function (ev) { this.panning = false; 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 () { this.ctx.fillStyle = "#D8D8D8"; @@ -177,8 +202,22 @@ var Diagrams = /** @class */ (function () { this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); this.drawBackground(); var fullCircleRadians = Math.PI + (Math.PI * 3); - for (var _i = 0, _a = this.nodes; _i < _a.length; _i++) { - var node = _a[_i]; + if (this.makingConnectionNode != null) { + 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.fillRect(node.x + this.cameraX, node.y + this.cameraY, node.width, node.height); this.ctx.fillStyle = "#D3D3D3"; @@ -188,13 +227,11 @@ var Diagrams = /** @class */ (function () { this.ctx.beginPath(); this.ctx.arc(node.x + this.cameraX, node.y + node.height / 2 + this.cameraY, node.height / 3, 0, fullCircleRadians); 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.arc(node.x + node.width + this.cameraX, node.y + node.height / 2 + this.cameraY, node.height / 3, 0, fullCircleRadians); this.ctx.fill(); - this.ctx.closePath(); } }; Diagrams.prototype.addNode = function (x, y, label) { diff --git a/static/diagram.ts b/static/diagram.ts index d0a56ec..7e19ac9 100644 --- a/static/diagram.ts +++ b/static/diagram.ts @@ -59,16 +59,22 @@ class DiagramNode { 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){ - let circleX = this.x; - let circleY = this.y + this.height / 3; + let [circleX, circleY] = this.getInputCircleXY() 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 [circleX, circleY] = this.getOutputCircleXY() let radiusSqrd = Math.pow(this.height / 3, 2); return Math.pow(x - circleX, 2) + Math.pow(y - circleY, 2) <= radiusSqrd; } @@ -96,14 +102,20 @@ class Diagrams { connections: Array<[DiagramNode, DiagramNode]> = new Array(); - cameraX: number = 0; + cameraX: number = 0; // camera position 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; nodeDragging: DiagramNode | null = null; nodeHover: DiagramNode | null = null; + makingConnectionNode: DiagramNode | null = null; + constructor(canvasId: string){ this.canvas = document.getElementById(canvasId) as HTMLCanvasElement; if (this.canvas === null){ @@ -124,10 +136,10 @@ class Diagrams { onmousemove(ev: MouseEvent){ let canvasRect = this.canvas.getBoundingClientRect(); - let mouseX = ev.x - canvasRect.left; - let mouseY = ev.y - canvasRect.top; - let worldX = mouseX - this.cameraX; - let worldY = mouseY - this.cameraY; + this.mouseX = ev.x - canvasRect.left; + this.mouseY = ev.y - canvasRect.top; + this.worldX = this.mouseX - this.cameraX; + this.worldY = this.mouseY - this.cameraY; if (this.nodeHover != null){ this.nodeHover.hover = false; @@ -147,16 +159,16 @@ class Diagrams { this.nodeDragging.y += ev.movementY; } else { for (let node of this.nodes){ - if (node.pointNearNode(worldX, worldY)){ - if (node.pointInInputCircle(worldX, worldY)) { + if (node.pointNearNode(this.worldX, this.worldY)){ + if (node.pointInInputCircle(this.worldX, this.worldY)) { node.inputHover = true; this.nodeHover = node; break; - } else if (node.pointInOutputCircle(worldX, worldY)){ + } else if (node.pointInOutputCircle(this.worldX, this.worldY)){ node.outputHover = true; this.nodeHover = node; break; - }else if (node.pointInNode(worldX, worldY)){ + }else if (node.pointInNode(this.worldX, this.worldY)){ node.hover = true; this.nodeHover = node; break; @@ -172,19 +184,20 @@ class Diagrams { return; } let canvasRect = this.canvas.getBoundingClientRect(); - let mouseX = ev.x - canvasRect.left; - let mouseY = ev.y - canvasRect.top; - let worldX = mouseX - this.cameraX; - let worldY = mouseY - this.cameraY; + this.mouseX = ev.x - canvasRect.left; + this.mouseY = ev.y - canvasRect.top; + this.worldX = this.mouseX - this.cameraX; + this.worldY = this.mouseY - this.cameraY; for (let node of this.nodes){ - if (node.pointNearNode(worldX, worldY)){ - if (node.pointInInputCircle(worldX, worldY)) { - - } else if (node.pointInOutputCircle(worldX, worldY)){ - + if (node.pointNearNode(this.worldX, this.worldY)){ + if (node.pointInInputCircle(this.worldX, this.worldY)) { + // no dragging from inputs ? + } 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; return; } @@ -196,6 +209,18 @@ class Diagrams { onmouseup(ev: MouseEvent){ this.panning = false; 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(){ @@ -210,6 +235,27 @@ class Diagrams { this.ctx.clearRect(0,0, this.canvas.width, this.canvas.height); this.drawBackground(); 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){ this.ctx.fillStyle = node.hover ? "#303030" : "#161616"; 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.arc(node.x + this.cameraX, node.y + node.height / 2 + this.cameraY, node.height / 3, 0, fullCircleRadians); 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.arc(node.x + node.width + this.cameraX, node.y + node.height / 2 + this.cameraY, node.height / 3, 0, fullCircleRadians); this.ctx.fill(); - this.ctx.closePath(); } }