patrick/Elektro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactored Wires out of BreadboardComponent

Browse Source
This commit is contained in:
Patrick Haßel 2025-01-30 15:50:31 +01:00
parent aaccd69535
commit ead9dc7946
4 changed files with 140 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/main/angular/src/app/editor/Point.ts
View File

@ -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);
}
}

113
src/main/angular/src/app/editor/breadboard/Wires.ts Normal file
View File

@ -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);
}
}

20
src/main/angular/src/app/editor/breadboard/breadboard.component.html
View File

@ -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)"
>
<circle [attr.id]="junction.id" cx="50%" cy="50%" fill="gray" r="35%"></circle>
</svg>
</svg>
<ng-container *ngFor="let wire of wires">
<ng-container *ngFor="let wire of wires.list">
<line class="wire" [attr.x1]="wire.start.pixelX + 'px'" [attr.y1]="wire.start.pixelY + 'px'" [attr.x2]="wire.end.pixelX + 'px'" [attr.y2]="wire.end.pixelY + 'px'"></line>
</ng-container>
<ng-container *ngIf="wireStart && wireCursor && wireStartJunction">
<ng-container *ngIf="wireEnd && wireEndJunction">
<line class="wire" [class.wireDuplicate]="wireEndDuplicate" [class.wireEnd]="!wireEndDuplicate" [attr.x1]="wireStart.x + 'px'" [attr.y1]="wireStart.y + 'px'" [attr.x2]="wireEnd.x + 'px'" [attr.y2]="wireEnd.y + 'px'"></line>
<ng-container *ngIf="wires.dragStart && wires.dragCursor && wires.dragStartJunction">
<ng-container *ngIf="wires.dragEnd && wires.dragEndJunction">
<line class="wire" [class.wireDuplicate]="wires.dragEndDuplicate" [class.wireEnd]="!wires.dragEndDuplicate" [attr.x1]="wires.dragStart.x + 'px'" [attr.y1]="wires.dragStart.y + 'px'" [attr.x2]="wires.dragEnd.x + 'px'" [attr.y2]="wires.dragEnd.y + 'px'"></line>
</ng-container>
<ng-container *ngIf="!wireEnd">
<line class="wire wireOpen" [attr.x1]="wireStart.x + 'px'" [attr.y1]="wireStart.y + 'px'" [attr.x2]="wireCursor.x + 'px'" [attr.y2]="wireCursor.y + 'px'"></line>
<ng-container *ngIf="!wires.dragEnd">
<line class="wire wireOpen" [attr.x1]="wires.dragStart.x + 'px'" [attr.y1]="wires.dragStart.y + 'px'" [attr.x2]="wires.dragCursor.x + 'px'" [attr.y2]="wires.dragCursor.y + 'px'"></line>
</ng-container>
</ng-container>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 3.0 KiB

116
src/main/angular/src/app/editor/breadboard/breadboard.component.ts
View File

@ -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;
}
}