From ead9dc7946cf1d7b0660182e4b3d9528f346f2ec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Patrick=20Ha=C3=9Fel?= Date: Thu, 30 Jan 2025 15:50:31 +0100 Subject: [PATCH] refactored Wires out of BreadboardComponent --- src/main/angular/src/app/editor/Point.ts | 4 +- .../src/app/editor/breadboard/Wires.ts | 113 +++++++++++++++++ .../breadboard/breadboard.component.html | 20 +-- .../editor/breadboard/breadboard.component.ts | 116 +++--------------- 4 files changed, 140 insertions(+), 113 deletions(-) create mode 100644 src/main/angular/src/app/editor/breadboard/Wires.ts diff --git a/src/main/angular/src/app/editor/Point.ts b/src/main/angular/src/app/editor/Point.ts index 423d151..bdc7bce 100644 --- a/src/main/angular/src/app/editor/Point.ts +++ b/src/main/angular/src/app/editor/Point.ts @@ -13,8 +13,8 @@ export class Point { return new Point(event.offsetX, event.offsetY); } - static fromJunction(j: Junction) { - return new Point(j.pixelX, j.pixelY); + static fromJunction(junction: Junction) { + return new Point(junction.pixelX, junction.pixelY); } } diff --git a/src/main/angular/src/app/editor/breadboard/Wires.ts b/src/main/angular/src/app/editor/breadboard/Wires.ts new file mode 100644 index 0000000..e3cdebc --- /dev/null +++ b/src/main/angular/src/app/editor/breadboard/Wires.ts @@ -0,0 +1,113 @@ +import {Point} from '../Point'; +import {Junction} from '../junction/Junction'; +import {Wire} from '../wire/Wire'; +import {MessageService} from '../message/message.service'; + +export class Wires { + + readonly list: Wire[] = []; + + dragStart: Point | null = null; + + dragStartJunction: Junction | null = null; + + dragCursor: Point | null = null; + + dragEnd: Point | null = null; + + dragEndJunction: Junction | null = null; + + dragEndDuplicate: boolean = false; + + constructor( + protected messageService: MessageService, + ) { + // + } + + breadboardMouseUp($event: MouseEvent) { + if ($event.button === 0) { + this.dragReset(); + } + } + + mouseDown(junction: Junction, $event: MouseEvent) { + if ($event.button === 0) { + this.updateDragCursor($event); + this.dragStart = Point.fromJunction(junction); + this.dragStartJunction = junction; + } + } + + mouseEnter(junction: Junction, $event: MouseEvent) { + if ($event.button === 0 && this.dragStartJunction !== null) { + if (this.dragStartJunction === junction) { + this.dragEndReset(); + } else { + this.dragEnd = Point.fromJunction(junction); + this.dragEndJunction = junction; + this.dragEndDuplicate = this.list.some(w => (w.start === this.dragStartJunction && w.end === this.dragEndJunction) || (w.start === this.dragEndJunction && w.end === this.dragStartJunction)); + } + } + } + + mouseMove($event: MouseEvent) { + this.updateDragCursor($event); + } + + mouseLeave(junction: Junction, $event: MouseEvent) { + if ($event.button === 0 && this.dragStartJunction !== null && this.dragEndJunction === junction) { + this.dragEndReset(); + } + } + + mouseUp($event: MouseEvent) { + this.updateDragCursor($event); + if ($event.button === 0) { + if (this.dragStartJunction !== null && this.dragEndJunction !== null) { + this.connect(this.dragStartJunction, this.dragEndJunction); + } + this.dragReset(); + } + } + + private updateDragCursor($event: MouseEvent) { + this.dragCursor = Point.fromEvent($event); + } + + dragReset() { + this.dragStart = null; + this.dragStartJunction = null; + this.dragEndReset(); + } + + private dragEndReset() { + this.dragEnd = null; + this.dragEndJunction = null; + this.dragEndDuplicate = false; + } + + connect(start: Junction, end: Junction) { + if (start === end) { + console.log("Not connecting junction with itself."); + return; + } + if (this.dragEndDuplicate) { + this.messageService.warn("Diese Verbindung existiert bereits."); + return; + } + const wire = new Wire(start, end); + wire.start.wires.push(wire); + wire.end.wires.push(wire); + this.list.push(wire); + console.log("Wire connected: ", wire); + } + + disconnect(wire: Wire) { + this.list.splice(this.list.indexOf(wire), 1); + wire.start.wires.splice(wire.start.wires.indexOf(wire), 1); + wire.end.wires.splice(wire.end.wires.indexOf(wire), 1); + console.log("Wire disconnected: ", wire); + } + +} diff --git a/src/main/angular/src/app/editor/breadboard/breadboard.component.html b/src/main/angular/src/app/editor/breadboard/breadboard.component.html index 60f69bf..91889ed 100644 --- a/src/main/angular/src/app/editor/breadboard/breadboard.component.html +++ b/src/main/angular/src/app/editor/breadboard/breadboard.component.html @@ -31,26 +31,26 @@ [attr.height]="junction.percentH + '%'" [attr.width]="junction.percentW + '%'" (mousemove)="mouseMove($event)" - (mousedown)="junctionMouseDown(junction, $event)" - (mouseenter)="junctionMouseEnter(junction, $event)" - (mouseleave)="junctionMouseLeave(junction, $event)" - (mouseup)="junctionMouseUp($event)" + (mousedown)="wires.mouseDown(junction, $event)" + (mouseenter)="wires.mouseEnter(junction, $event)" + (mouseleave)="wires.mouseLeave(junction, $event)" + (mouseup)="wires.mouseUp($event)" > - + - - - + + + - - + + diff --git a/src/main/angular/src/app/editor/breadboard/breadboard.component.ts b/src/main/angular/src/app/editor/breadboard/breadboard.component.ts index 93386b8..012b659 100644 --- a/src/main/angular/src/app/editor/breadboard/breadboard.component.ts +++ b/src/main/angular/src/app/editor/breadboard/breadboard.component.ts @@ -3,10 +3,9 @@ import {NgClass, NgForOf, NgIf} from '@angular/common'; import {Part} from '../parts/Part'; import {Battery} from '../parts/battery/Battery'; import {Light} from '../parts/light/Light'; -import {Junction} from '../junction/Junction'; -import {Wire} from '../wire/Wire'; -import {Point} from '../Point'; import {MessageService} from '../message/message.service'; +import {Wires} from './Wires'; +import {Parts} from './Parts'; @Component({ selector: 'app-board', @@ -20,33 +19,28 @@ import {MessageService} from '../message/message.service'; }) export class BreadboardComponent { + protected readonly wires: Wires; + private battery = new Battery(1, 1, 3, 0.5); private light = new Light(1, 5, 3, 1.5, 0.5); protected readonly parts: Part[] = [this.battery, this.light]; - protected readonly wires: Wire[] = [ - new Wire(this.battery.minus, this.light.a), - new Wire(this.battery.plus, this.light.b), - ]; - - protected wireCursor: Point | null = null; - - protected wireStart: Point | null = null; - - protected wireEnd: Point | null = null; - - protected wireStartJunction: Junction | null = null; - - protected wireEndJunction: Junction | null = null; - - protected wireEndDuplicate: boolean = false; - constructor( protected readonly messageService: MessageService, ) { - // + this.wires = new Wires(messageService); + this.wires.connect(this.battery.minus, this.light.a); + this.wires.connect(this.battery.plus, this.light.b); + } + + mouseMove($event: MouseEvent) { + this.wires.mouseMove($event); + } + + mouseUp($event: MouseEvent) { + this.wires.breadboardMouseUp($event); } asBattery(part: Part): Battery { @@ -65,84 +59,4 @@ export class BreadboardComponent { return part instanceof Light; } - mouseMove($event: MouseEvent) { - this.wireCursor = Point.fromEvent($event); - } - - mouseUp($event: MouseEvent) { - if ($event.button === 0) { - this.wireReset(); - } - } - - junctionMouseDown(j: Junction, $event: MouseEvent) { - if ($event.button === 0) { - this.wireCursor = Point.fromEvent($event); - this.wireStart = Point.fromJunction(j); - this.wireStartJunction = j; - } - } - - junctionMouseEnter(j: Junction, $event: MouseEvent) { - if ($event.button === 0 && this.wireStartJunction !== null) { - if (this.wireStartJunction === j) { - this.wireEndReset(); - } else { - this.wireEnd = Point.fromJunction(j); - this.wireEndJunction = j; - this.wireEndDuplicate = this.wires.some(w => (w.start === this.wireStartJunction && w.end === this.wireEndJunction) || (w.start === this.wireEndJunction && w.end === this.wireStartJunction)); - } - } - } - - junctionMouseLeave(j: Junction, $event: MouseEvent) { - if ($event.button === 0 && this.wireStartJunction !== null && this.wireEndJunction === j) { - this.wireEndReset(); - } - } - - junctionMouseUp($event: MouseEvent) { - if ($event.button === 0) { - if (this.wireStartJunction !== null && this.wireEndJunction !== null) { - this.wireConnect(this.wireStartJunction, this.wireEndJunction); - } - this.wireReset(); - } - } - - private wireConnect(start: Junction, end: Junction) { - if (start === end) { - console.log("Not connecting junction with itself."); - return; - } - if (this.wireEndDuplicate) { - this.messageService.warn("Diese Verbindung existiert bereits."); - return; - } - const wire = new Wire(start, end); - wire.start.wires.push(wire); - wire.end.wires.push(wire); - this.wires.push(wire); - console.log("Wire connected: ", wire); - } - - private wireDisconnect(wire: Wire) { - this.wires.splice(this.wires.indexOf(wire), 1); - wire.start.wires.splice(wire.start.wires.indexOf(wire), 1); - wire.end.wires.splice(wire.end.wires.indexOf(wire), 1); - console.log("Wire disconnected: ", wire); - } - - private wireReset() { - this.wireStart = null; - this.wireStartJunction = null; - this.wireEndReset(); - } - - private wireEndReset() { - this.wireEnd = null; - this.wireEndJunction = null; - this.wireEndDuplicate = false; - } - }