wire hover + disconnect

src/main/angular/src/app/editor/circuit/Circuit.ts

@@ -85,15 +85,14 @@ export class Circuit {
   }
 
   connect(start: Junction, end: Junction) {
-    const wire = new Wire(start, end, RESISTANCE_MIN);
+    const wire = new Wire(start, end, RESISTANCE_MIN, "", (wire) => this.disconnect(wire));
     this.wires.push(wire);
     console.log(`Wire connected: ${wire}`);
     this.calculate();
   }
 
-  disconnect(wire: Wire) {
+  private disconnect(wire: Wire) {
     this.wires.splice(this.wires.indexOf(wire), 1);
-    wire.disconnect();
     console.log("Wire disconnected: ", wire);
     this.calculate();
   }

src/main/angular/src/app/editor/circuit/circuit.component.svg

@@ -2,7 +2,7 @@
 
   <g inner-part *ngFor="let part of circuit.parts" [part]="part" [parts]="parts" [wires]="wires"></g>
 
-  <g inner-wire *ngFor="let wire of circuit.wires" [globalWire]="wire"></g>
+  <g inner-wire *ngFor="let wire of circuit.wires" [globalWire]="wire" extraClassesBack="wireBackGlobal"></g>
 
   <ng-container *ngIf="wires.dragStart && wires.dragCursor && wires.dragStartJunction">
     <ng-container *ngIf="wires.dragEnd && wires.dragEndJunction">

src/main/angular/src/app/editor/editor.component.ts

@@ -21,7 +21,7 @@ export class EditorComponent implements OnInit {
   private _circuit: Circuit = Circuit.new();
 
   ngOnInit(): void {
-    this.circuit = DEMO_004;
+    this.circuit = DEMO_003;
   }
 
   set circuit(circuit: Circuit) {

src/main/angular/src/app/editor/wire/Wire.ts

@@ -13,6 +13,7 @@ export class Wire {
     readonly end: Junction,
     public resistance: number,
     public name: string | null = null,
+    readonly disconnectCallback?: (wire: Wire) => any,
   ) {
     if (this.resistance === 0) {
       this.resistance = RESISTANCE_MIN;
@@ -24,6 +25,9 @@ export class Wire {
   disconnect() {
     this.start.wires.splice(this.start.wires.indexOf(this), 1);
     this.end.wires.splice(this.end.wires.indexOf(this), 1);
+    if (this.disconnectCallback) {
+      this.disconnectCallback(this);
+    }
   }
 
   toString() {

src/main/angular/src/app/editor/wire/wire.component.less

@@ -2,7 +2,11 @@
   stroke-linecap: round;
   stroke-width: 11px;
   stroke: black;
-  pointer-events: none;
+}
+
+.wireBackGlobal:hover {
+  stroke: darkgray;
+  stroke-width: 15px;
 }
 
 .wire {

src/main/angular/src/app/editor/wire/wire.component.svg

@@ -1,6 +1,6 @@
 <svg width="100%" height="100%">
 
-  <line class="wireBack {{extraClassesBack}}" [attr.x1]="x1" [attr.y1]="y1" [attr.x2]="x2" [attr.y2]="y2">
+  <line class="wireBack {{extraClassesBack}}" [attr.x1]="x1" [attr.y1]="y1" [attr.x2]="x2" [attr.y2]="y2" (contextmenu)="click($event)">
     <!-- nothing -->
   </line>
 

src/main/angular/src/app/editor/wire/wire.component.ts

@@ -169,4 +169,12 @@ export class WireComponent {
     return fadeColor((ratio - 0.5) * 2, 'magenta', 'red');
   }
 
+  click($event: MouseEvent) {
+    console.log($event);
+    $event.preventDefault();
+    if ($event.button === 2 && this.wire) {
+      this.wire.disconnect();
+    }
+  }
+
 }