From 6001d86e4150e1ddcd52f6d4a0d663ab01eb5909 Mon Sep 17 00:00:00 2001
From: BroodjeAap <david@broodjeaap.net>
Date: Tue, 13 Sep 2022 17:37:03 +0000
Subject: [PATCH] working highlight for delete connection button

---
 static/diagram.js | 28 ++++++++++++++++++++++++++++
 static/diagram.ts | 32 +++++++++++++++++++++++++++++++-
 2 files changed, 59 insertions(+), 1 deletion(-)

diff --git a/static/diagram.js b/static/diagram.js
index 246111e..1454155 100644
--- a/static/diagram.js
+++ b/static/diagram.js
@@ -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
+    };
+}
diff --git a/static/diagram.ts b/static/diagram.ts
index bc74d39..6caddba 100644
--- a/static/diagram.ts
+++ b/static/diagram.ts
@@ -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();
     }
-}
\ No newline at end of file
+}
+
+// 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
+    };
+  }
\ No newline at end of file