From 38ed739f46f64af24ee8523c5c0c936beee8715c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrick=20Ha=C3=9Fel?= <git@patrick-hassel.de>
Date: Tue, 4 Feb 2025 08:55:55 +0100
Subject: [PATCH] wire hover + disconnect

---
 src/main/angular/src/app/editor/circuit/Circuit.ts        | 5 ++---
 .../angular/src/app/editor/circuit/circuit.component.svg  | 2 +-
 src/main/angular/src/app/editor/editor.component.ts       | 2 +-
 src/main/angular/src/app/editor/wire/Wire.ts              | 4 ++++
 src/main/angular/src/app/editor/wire/wire.component.less  | 6 +++++-
 src/main/angular/src/app/editor/wire/wire.component.svg   | 2 +-
 src/main/angular/src/app/editor/wire/wire.component.ts    | 8 ++++++++
 7 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/main/angular/src/app/editor/circuit/Circuit.ts b/src/main/angular/src/app/editor/circuit/Circuit.ts
index 548b46d..ddb15f3 100644
--- a/src/main/angular/src/app/editor/circuit/Circuit.ts
+++ b/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();
   }
diff --git a/src/main/angular/src/app/editor/circuit/circuit.component.svg b/src/main/angular/src/app/editor/circuit/circuit.component.svg
index 67926cc..dda0877 100644
--- a/src/main/angular/src/app/editor/circuit/circuit.component.svg
+++ b/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">
diff --git a/src/main/angular/src/app/editor/editor.component.ts b/src/main/angular/src/app/editor/editor.component.ts
index 1fb2f0e..790824d 100644
--- a/src/main/angular/src/app/editor/editor.component.ts
+++ b/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) {
diff --git a/src/main/angular/src/app/editor/wire/Wire.ts b/src/main/angular/src/app/editor/wire/Wire.ts
index eb70c50..6226668 100644
--- a/src/main/angular/src/app/editor/wire/Wire.ts
+++ b/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() {
diff --git a/src/main/angular/src/app/editor/wire/wire.component.less b/src/main/angular/src/app/editor/wire/wire.component.less
index 2105f58..7c039c3 100644
--- a/src/main/angular/src/app/editor/wire/wire.component.less
+++ b/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 {
diff --git a/src/main/angular/src/app/editor/wire/wire.component.svg b/src/main/angular/src/app/editor/wire/wire.component.svg
index 93f2b01..476dedb 100644
--- a/src/main/angular/src/app/editor/wire/wire.component.svg
+++ b/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>
 
diff --git a/src/main/angular/src/app/editor/wire/wire.component.ts b/src/main/angular/src/app/editor/wire/wire.component.ts
index 6f10675..89d934a 100644
--- a/src/main/angular/src/app/editor/wire/wire.component.ts
+++ b/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();
+    }
+  }
+
 }