update component connections when rotated

component.js

@@ -60,7 +60,6 @@ class Component {
 
     ctx.fillText(this.value, this.x + (this.width - valueMetric.width) / 2, this.y - (valueMetric.actualBoundingBoxAscent + valueMetric.actualBoundingBoxDescent) / 2);
     ctx.fillText(this.name, this.x + (this.width - nameMetric.width) / 2, this.y - (nameMetric.actualBoundingBoxAscent + nameMetric.actualBoundingBoxDescent) * 2);
-
     ctx.restore();
   }
 
@@ -71,6 +70,10 @@ class Component {
     if (onMove) return;
 
     /* update onMouseUp */
+    this.update();
+  }
+
+  update() {
     let rotateLeft = rotatePoint(
       {x: this.x - this.width, y: this.y + this.height / 2}, 
       {x: this.rotationPointX(), y: this.rotationPointY()}, 

main.js

@@ -273,6 +273,11 @@ document.addEventListener('keypress', function(e) { // rotate
 
     selectedComponents[0].angle += 45;
     selectedComponents[0].angle %= 360;
+
+    if (!isDragging) {
+      selectedComponents[0].update();
+      updateComponentConnections(selectedComponents[0]);
+    }
 
     renderAll();
   } 
@@ -533,6 +538,33 @@ function junction(x,y, node1,node2) {
   }
 }
 
+function updateComponentConnections(component) {
+  deleteNode(component.node1); // delete all connection
+  deleteNode(component.node2); // delete all connection
+  connectNodes(component.node1, component.node2);
+
+  for (let i = 0; i < wires.length; ++i) {
+    connectComponentLine(component, wires[i]);
+  }
+
+  for (let i in components) {
+    connectComponentComponent(component, components[i]);
+
+  }
+
+  // Some connected nodes may have more than or equal to 3 connections and no junction
+  // this solution seems to fix that problem
+  if (component.node1.connections.length >= 3) {
+    let pos = component.node1;
+    junction(pos.x, pos.y, component.node1, component.node1.connections[1].node);
+  }
+
+  if (component.node2.connections.length >= 3) {
+    let pos = component.node2;
+    junction(pos.x, pos.y, component.node2, component.node2.connections[1].node);
+  }
+}
+
 function deleteJunction(j) {
   if (!j) return;
   for (let i = 0; i < junctions.length; ++i) {
@@ -611,36 +643,13 @@ canvas.addEventListener('mouseup', function(event) {
       if (selectedComponents.length > 0) {
         let component = selectedComponents[0];
 
-        deleteNode(component.node1); // delete all connection
-        deleteNode(component.node2); // delete all connection
-        connectNodes(component.node1, component.node2);
-
         component.move(
           snapToGrid((mouseX / zoom) - mouseOffsetX),
           snapToGrid((mouseY / zoom) - mouseOffsetY),
           false, // onMove
         );
 
-        for (let i = 0; i < wires.length; ++i) {
-          connectComponentLine(component, wires[i]);
-        }
-
-        for (let i in components) {
-          connectComponentComponent(component, components[i]);
-
-        }
-
-        // Some connected nodes may have more than or equal to 3 connections and no junction
-        // this solution seems to fix that problem
-        if (component.node1.connections.length >= 3) {
-          let pos = component.node1;
-          junction(pos.x, pos.y, component.node1, component.node1.connections[1].node);
-        }
-
-        if (component.node2.connections.length >= 3) {
-          let pos = component.node2;
-          junction(pos.x, pos.y, component.node2, component.node2.connections[1].node);
-        }
+        updateComponentConnections(component);
 
       } 
       else {

node.js

@@ -9,13 +9,13 @@ class Node {
   }
 
   hitTest(x, y) {
-    let r = 5;
-    let dx1 = x - this.x;
-    let dy1 = y - this.y;
+    const r = 5;
+    let dx = x - this.x;
+    let dy = y - this.y;
 
-    let dist1 = Math.sqrt((dx1 * dx1) + (dy1 * dy1));
+    let dist = Math.sqrt((dx * dx) + (dy * dy));
 
-    return (dist1 <= 5);
+    return (dist <= r);
   }
 }