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

splitt SVG into angular-components

Browse Source
This commit is contained in:
Patrick Haßel 2025-01-31 09:12:12 +01:00
parent 4ed85bdd63
commit a11a980b5e
22 changed files with 339 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,57 +0,0 @@
<svg class="breadboard" (mousemove)="mouseMove($event)" (mouseup)="mouseUp($event)">
<svg *ngFor="let part of parts.list" [attr.x]="part.x + 'px'" [attr.y]="part.y + 'px'" [attr.width]="part.w + 'px'" [attr.height]="part.h + 'px'" [ngClass]="part.getClasses()" (mousedown)="parts.mouseDown(part, $event)">
<rect class="background" height="100%" width="100%" x="0" y="0"></rect>
<ng-container *ngIf="isBattery(part)">
<text dominant-baseline="hanging" text-anchor="middle" x="50%" y="3%">{{ asBattery(part).voltageStr }}</text>
<line class="partWire" id="wireMinus" x1="15%" x2="40%" y1="50%" y2="50%"></line>
<line class="partWire" id="wirePlus" x1="55%" x2="80%" y1="50%" y2="50%"></line>
<rect height="30%" id="symbolMinus" width="10%" x="35%" y="35%"></rect>
<rect height="60%" id="symbolPlus" width="5%" x="55%" y="20%"></rect>
<text text-anchor="middle" x="50%" y="95%">{{ asBattery(part).currentStr }}</text>
</ng-container>
<ng-container *ngIf="isLight(part)">
<text dominant-baseline="hanging" text-anchor="middle" x="50%" y="3%">{{ asLight(part).voltageStr }}</text>
<circle [attr.fill]="asLight(part).fill()" [class.defect]="asLight(part).defect" cx="50%" cy="50%" id="circle" r="35%"></circle>
<g class="cross">
<line id="lineLeftRight" x1="15%" x2="85%" y1="50%" y2="50%"></line>
<line id="lineTopDown" x1="50%" x2="50%" y1="15%" y2="85%"></line>
</g>
<text text-anchor="middle" x="50%" y="95%">{{ asLight(part).currentStr }}</text>
</ng-container>
<svg
*ngFor="let junction of part.junctions"
class="junction"
[attr.x]="junction.percentX + '%'"
[attr.y]="junction.percentY + '%'"
[attr.height]="junction.percentH + '%'"
[attr.width]="junction.percentW + '%'"
(mousemove)="mouseMove($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.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="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="!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>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 3.1 KiB

80
src/main/angular/src/app/editor/breadboard/breadboard.component.less
View File

@ -1,80 +0,0 @@
.breadboard {
position: absolute;
width: 100%;
height: 100%;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
.part {
.background {
fill: lightgray;
}
.partWire {
stroke-width: 5px;
stroke: black;
}
}
.part:not(:has(.junction:hover)):hover {
.background {
fill: lightblue;
}
}
.partLight {
circle {
stroke-width: 1px;
stroke: black;
}
.defect {
filter: drop-shadow(0 0 30px black);
}
.cross {
transform-origin: 50% 50%;
transform: rotate(45deg);
stroke-width: 1px;
stroke: black;
}
}
.wire {
stroke-width: 9px;
stroke: black;
stroke-linecap: round;
pointer-events: none;
}
.wireOpen {
stroke: blue;
stroke-dasharray: 5px 15px;
}
.wireEnd {
stroke: green;
}
.wireDuplicate {
stroke: red;
}
.junction {
stroke-width: 1px;
stroke: black;
}
.junction:hover {
circle {
fill: lightblue;
}
}
}

0
src/main/angular/src/app/editor/breadboard/Parts.ts → src/main/angular/src/app/editor/circuit/Parts.ts
View File

2
src/main/angular/src/app/editor/breadboard/Wires.ts → src/main/angular/src/app/editor/circuit/Wires.ts
View File

@ -25,7 +25,7 @@ export class Wires {
//
}
breadboardMouseUp($event: MouseEvent) {
circuitMouseUp($event: MouseEvent) {
if ($event.button === 0) {
this.dragReset();
}

35
src/main/angular/src/app/editor/circuit/circuit.component.less Normal file
View File

@ -0,0 +1,35 @@
.circuit {
position: absolute;
width: 100%;
height: 100%;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
.wire {
stroke-width: 9px;
stroke: gray;
stroke-linecap: round;
pointer-events: none;
}
.wireBack {
stroke-width: 11px;
stroke: black;
}
.wireOpen {
stroke: blue;
stroke-dasharray: 5px 15px;
}
.wireEnd {
stroke: green;
}
.wireDuplicate {
stroke: red;
}
}

45
src/main/angular/src/app/editor/circuit/circuit.component.svg Normal file
View File

@ -0,0 +1,45 @@
<svg class="circuit" (mousemove)="mouseMove($event)" (mouseup)="mouseUp($event)">
<g inner-part *ngFor="let part of parts.list" [part]="part" [parts]="parts" [wires]="wires"></g>
<ng-container *ngFor="let wire of wires.list">
<line
class="wire wireBack"
[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>
<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="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="!wires.dragEnd || !wires.dragEndJunction">
<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>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

32
src/main/angular/src/app/editor/breadboard/breadboard.component.ts → src/main/angular/src/app/editor/circuit/circuit.component.ts
View File

@ -1,23 +1,23 @@
import {Component} from '@angular/core';
import {NgClass, NgForOf, NgIf} from '@angular/common';
import {Part} from '../parts/Part';
import {NgForOf, NgIf} from '@angular/common';
import {Battery} from '../parts/battery/Battery';
import {Light} from '../parts/light/Light';
import {MessageService} from '../message/message.service';
import {Wires} from './Wires';
import {Parts} from './Parts';
import {PartComponent} from '../parts/part.component';
@Component({
selector: 'app-board',
selector: 'app-circuit',
imports: [
NgForOf,
NgIf,
NgClass,
PartComponent,
],
templateUrl: './breadboard.component.html',
styleUrl: './breadboard.component.less'
templateUrl: './circuit.component.svg',
styleUrl: './circuit.component.less'
})
export class BreadboardComponent {
export class CircuitComponent {
protected readonly parts: Parts;
@ -45,24 +45,8 @@ export class BreadboardComponent {
}
mouseUp($event: MouseEvent) {
this.wires.breadboardMouseUp($event);
this.wires.circuitMouseUp($event);
this.parts.mouseUp($event);
}
asBattery(part: Part): Battery {
return part as Battery;
}
isBattery(part: Part): boolean {
return part instanceof Battery;
}
asLight(part: Part): Light {
return part as Light;
}
isLight(part: Part): boolean {
return part instanceof Light;
}
}

2
src/main/angular/src/app/editor/editor.component.html
View File

@ -1,3 +1,3 @@
<app-board></app-board>
<app-circuit></app-circuit>
<app-messages></app-messages>

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

@ -1,11 +1,11 @@
import {Component} from '@angular/core';
import {BreadboardComponent} from './breadboard/breadboard.component';
import {CircuitComponent} from './circuit/circuit.component';
import {MessagesComponent} from './message/messages/messages.component';
@Component({
selector: 'app-editor',
imports: [
BreadboardComponent,
CircuitComponent,
MessagesComponent
],
templateUrl: './editor.component.html',

10
src/main/angular/src/app/editor/junction/junction.component.less Normal file
View File

@ -0,0 +1,10 @@
.junction {
stroke-width: 1px;
stroke: black;
}
.junction:hover {
circle {
fill: lightblue;
}
}

20
src/main/angular/src/app/editor/junction/junction.component.svg Normal file
View File

@ -0,0 +1,20 @@
<svg
class="junction"
[attr.x]="junction.percentX + '%'"
[attr.y]="junction.percentY + '%'"
[attr.height]="junction.percentH + '%'"
[attr.width]="junction.percentW + '%'"
(mousedown)="wires.mouseDown(junction, $event)"
(mouseenter)="wires.mouseEnter(junction, $event)"
(mousemove)="wires.mouseMove($event)"
(mouseleave)="wires.mouseLeave(junction, $event)"
(mouseup)="wires.mouseUp($event)"
>
<circle
[attr.id]="junction.id"
cx="50%"
cy="50%"
r="35%"
fill="gray"
></circle>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 525 B

19
src/main/angular/src/app/editor/junction/junction.component.ts Normal file
View File

@ -0,0 +1,19 @@
import {Component, Input} from '@angular/core';
import {Junction} from './Junction';
import {Wires} from '../circuit/Wires';
@Component({
selector: 'g[inner-junction]',
imports: [],
templateUrl: './junction.component.svg',
styleUrl: './junction.component.less',
})
export class JunctionComponent {
@Input()
wires!: Wires;
@Input()
junction!: Junction;
}

1
src/main/angular/src/app/editor/parts/battery/battery.component.less Normal file
View File

@ -0,0 +1 @@
@import "../part.component.less";

8
src/main/angular/src/app/editor/parts/battery/battery.component.svg Normal file
View File

@ -0,0 +1,8 @@
<svg width="100%" height="100%">
<text dominant-baseline="hanging" text-anchor="middle" x="50%" y="3%">{{ battery.voltageStr }}</text>
<line class="partWire" id="wireMinus" x1="15%" x2="40%" y1="50%" y2="50%"></line>
<line class="partWire" id="wirePlus" x1="55%" x2="80%" y1="50%" y2="50%"></line>
<rect height="30%" id="symbolMinus" width="10%" x="35%" y="35%"></rect>
<rect height="60%" id="symbolPlus" width="5%" x="55%" y="20%"></rect>
<text text-anchor="middle" x="50%" y="95%">{{ battery.currentStr }}</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 534 B

15
src/main/angular/src/app/editor/parts/battery/battery.component.ts Normal file
View File

@ -0,0 +1,15 @@
import {Component, Input} from '@angular/core';
import {Battery} from './Battery';
@Component({
selector: 'g[inner-part-battery]',
imports: [],
templateUrl: './battery.component.svg',
styleUrl: './battery.component.less',
})
export class BatteryComponent {
@Input()
battery!: Battery;
}

17
src/main/angular/src/app/editor/parts/light/light.component.less Normal file
View File

@ -0,0 +1,17 @@
@import "../part.component.less";
circle {
stroke-width: 1px;
stroke: black;
}
.cross {
transform-origin: 50% 50%;
transform: rotate(45deg);
stroke-width: 1px;
stroke: black;
}
.defect {
filter: drop-shadow(0 0 30px black);
}

9
src/main/angular/src/app/editor/parts/light/light.component.svg Normal file
View File

@ -0,0 +1,9 @@
<svg width="100%" height="100%">
<text dominant-baseline="hanging" text-anchor="middle" x="50%" y="3%">{{ light.voltageStr }}</text>
<circle [attr.fill]="light.fill()" [class.defect]="light.defect" cx="50%" cy="50%" id="circle" r="35%"></circle>
<g class="cross">
<line id="lineLeftRight" x1="15%" x2="85%" y1="50%" y2="50%"></line>
<line id="lineTopDown" x1="50%" x2="50%" y1="15%" y2="85%"></line>
</g>
<text text-anchor="middle" x="50%" y="95%">{{ light.currentStr }}</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 503 B

15
src/main/angular/src/app/editor/parts/light/light.component.ts Normal file
View File

@ -0,0 +1,15 @@
import {Component, Input} from '@angular/core';
import {Light} from './Light';
@Component({
selector: 'g[inner-part-light]',
imports: [],
templateUrl: './light.component.svg',
styleUrl: './light.component.less',
})
export class LightComponent {
@Input()
light!: Light;
}

24
src/main/angular/src/app/editor/parts/part.component.less Normal file
View File

@ -0,0 +1,24 @@
.part {
border-radius: 0.51em;
border: 1px solid transparent;
.background {
fill: rgba(200, 200, 200, 0.6);
}
}
.part:not(:has(.junction:hover)):hover {
.background {
fill: palegreen;
}
}
.partDrag {
opacity: 0.7;
}
.partWire {
stroke-width: 5px;
stroke: black;
}

20
src/main/angular/src/app/editor/parts/part.component.svg Normal file
View File

@ -0,0 +1,20 @@
<svg
class="part"
*ngFor="let part of parts.list"
[attr.x]="part.x + 'px'"
[attr.y]="part.y + 'px'"
[attr.width]="part.w + 'px'"
[attr.height]="part.h + 'px'"
[class.partDrag]="parts.dragStartPart === part"
(mousedown)="parts.mouseDown(part, $event)"
>
<rect class="background" height="100%" width="100%" x="0" y="0"></rect>
<g inner-part-battery *ngIf="isBattery(part)" [battery]="asBattery(part)"></g>
<g inner-part-light *ngIf="isLight(part)" [light]="asLight(part)"></g>
<g inner-junction *ngFor="let junction of part.junctions" [junction]="junction" [wires]="wires"></g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 612 B

51
src/main/angular/src/app/editor/parts/part.component.ts Normal file
View File

@ -0,0 +1,51 @@
import {Component, Input} from '@angular/core';
import {Part} from './Part';
import {Battery} from './battery/Battery';
import {Light} from './light/Light';
import {BatteryComponent} from './battery/battery.component';
import {NgForOf, NgIf} from '@angular/common';
import {Parts} from '../circuit/Parts';
import {Wires} from '../circuit/Wires';
import {LightComponent} from './light/light.component';
import {JunctionComponent} from '../junction/junction.component';
@Component({
selector: 'g[inner-part]',
imports: [
BatteryComponent,
NgIf,
NgForOf,
LightComponent,
JunctionComponent
],
templateUrl: './part.component.svg',
styleUrl: './part.component.less',
})
export class PartComponent {
@Input()
parts!: Parts;
@Input()
wires!: Wires;
@Input()
part!: Part;
asBattery(part: Part): Battery {
return part as Battery;
}
isBattery(part: Part): boolean {
return part instanceof Battery;
}
asLight(part: Part): Light {
return part as Light;
}
isLight(part: Part): boolean {
return part instanceof Light;
}
}

38
src/main/angular/src/app/simulation/Calculation.ts Normal file
View File

@ -0,0 +1,38 @@
import {Part} from '../editor/parts/Part';
import {Battery} from '../editor/parts/battery/Battery';
export class Circuit {
constructor(
readonly battery: Battery,
readonly parts: Part[],
) {
//
}
private static create2(battery: Battery, parts: Part[]): Circuit {
parts.splice(parts.indexOf(battery), 1);
const connectedParts: Part[] = [];
for (let part of parts) {
}
connectedParts.forEach(part => parts.splice(parts.indexOf(part), 1));
return new Circuit(battery, connectedParts);
}
static create(parts: Part[]): Circuit[] {
const circuits: Circuit[] = [];
while (true) {
const battery = parts.filter(p => p instanceof Battery)[0];
if (!battery) {
break;
}
const circuit = this.create2(battery, parts);
circuits.push(circuit);
}
return circuits;
}
}