From a11a980b5ea0ae5debaaf6ad02f5c0ff307b0def Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrick=20Ha=C3=9Fel?= <git@patrick-hassel.de>
Date: Fri, 31 Jan 2025 09:12:12 +0100
Subject: [PATCH] splitt SVG into angular-components

---
 .../breadboard/breadboard.component.html      | 57 -------------
 .../breadboard/breadboard.component.less      | 80 -------------------
 .../editor/{breadboard => circuit}/Parts.ts   |  0
 .../editor/{breadboard => circuit}/Wires.ts   |  2 +-
 .../app/editor/circuit/circuit.component.less | 35 ++++++++
 .../app/editor/circuit/circuit.component.svg  | 45 +++++++++++
 .../circuit.component.ts}                     | 32 ++------
 .../src/app/editor/editor.component.html      |  2 +-
 .../src/app/editor/editor.component.ts        |  4 +-
 .../editor/junction/junction.component.less   | 10 +++
 .../editor/junction/junction.component.svg    | 20 +++++
 .../app/editor/junction/junction.component.ts | 19 +++++
 .../parts/battery/battery.component.less      |  1 +
 .../parts/battery/battery.component.svg       |  8 ++
 .../editor/parts/battery/battery.component.ts | 15 ++++
 .../editor/parts/light/light.component.less   | 17 ++++
 .../editor/parts/light/light.component.svg    |  9 +++
 .../app/editor/parts/light/light.component.ts | 15 ++++
 .../src/app/editor/parts/part.component.less  | 24 ++++++
 .../src/app/editor/parts/part.component.svg   | 20 +++++
 .../src/app/editor/parts/part.component.ts    | 51 ++++++++++++
 .../angular/src/app/simulation/Calculation.ts | 38 +++++++++
 22 files changed, 339 insertions(+), 165 deletions(-)
 delete mode 100644 src/main/angular/src/app/editor/breadboard/breadboard.component.html
 delete mode 100644 src/main/angular/src/app/editor/breadboard/breadboard.component.less
 rename src/main/angular/src/app/editor/{breadboard => circuit}/Parts.ts (100%)
 rename src/main/angular/src/app/editor/{breadboard => circuit}/Wires.ts (98%)
 create mode 100644 src/main/angular/src/app/editor/circuit/circuit.component.less
 create mode 100644 src/main/angular/src/app/editor/circuit/circuit.component.svg
 rename src/main/angular/src/app/editor/{breadboard/breadboard.component.ts => circuit/circuit.component.ts} (64%)
 create mode 100644 src/main/angular/src/app/editor/junction/junction.component.less
 create mode 100644 src/main/angular/src/app/editor/junction/junction.component.svg
 create mode 100644 src/main/angular/src/app/editor/junction/junction.component.ts
 create mode 100644 src/main/angular/src/app/editor/parts/battery/battery.component.less
 create mode 100644 src/main/angular/src/app/editor/parts/battery/battery.component.svg
 create mode 100644 src/main/angular/src/app/editor/parts/battery/battery.component.ts
 create mode 100644 src/main/angular/src/app/editor/parts/light/light.component.less
 create mode 100644 src/main/angular/src/app/editor/parts/light/light.component.svg
 create mode 100644 src/main/angular/src/app/editor/parts/light/light.component.ts
 create mode 100644 src/main/angular/src/app/editor/parts/part.component.less
 create mode 100644 src/main/angular/src/app/editor/parts/part.component.svg
 create mode 100644 src/main/angular/src/app/editor/parts/part.component.ts
 create mode 100644 src/main/angular/src/app/simulation/Calculation.ts

diff --git a/src/main/angular/src/app/editor/breadboard/breadboard.component.html b/src/main/angular/src/app/editor/breadboard/breadboard.component.html
deleted file mode 100644
index 03ac3a0..0000000
--- a/src/main/angular/src/app/editor/breadboard/breadboard.component.html
+++ /dev/null
@@ -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>
diff --git a/src/main/angular/src/app/editor/breadboard/breadboard.component.less b/src/main/angular/src/app/editor/breadboard/breadboard.component.less
deleted file mode 100644
index 6649a25..0000000
--- a/src/main/angular/src/app/editor/breadboard/breadboard.component.less
+++ /dev/null
@@ -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;
-    }
-  }
-
-}
diff --git a/src/main/angular/src/app/editor/breadboard/Parts.ts b/src/main/angular/src/app/editor/circuit/Parts.ts
similarity index 100%
rename from src/main/angular/src/app/editor/breadboard/Parts.ts
rename to src/main/angular/src/app/editor/circuit/Parts.ts
diff --git a/src/main/angular/src/app/editor/breadboard/Wires.ts b/src/main/angular/src/app/editor/circuit/Wires.ts
similarity index 98%
rename from src/main/angular/src/app/editor/breadboard/Wires.ts
rename to src/main/angular/src/app/editor/circuit/Wires.ts
index d89003d..df4a126 100644
--- a/src/main/angular/src/app/editor/breadboard/Wires.ts
+++ b/src/main/angular/src/app/editor/circuit/Wires.ts
@@ -25,7 +25,7 @@ export class Wires {
     //
   }
 
-  breadboardMouseUp($event: MouseEvent) {
+  circuitMouseUp($event: MouseEvent) {
     if ($event.button === 0) {
       this.dragReset();
     }
diff --git a/src/main/angular/src/app/editor/circuit/circuit.component.less b/src/main/angular/src/app/editor/circuit/circuit.component.less
new file mode 100644
index 0000000..83d930a
--- /dev/null
+++ b/src/main/angular/src/app/editor/circuit/circuit.component.less
@@ -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;
+  }
+
+}
diff --git a/src/main/angular/src/app/editor/circuit/circuit.component.svg b/src/main/angular/src/app/editor/circuit/circuit.component.svg
new file mode 100644
index 0000000..dacfe89
--- /dev/null
+++ b/src/main/angular/src/app/editor/circuit/circuit.component.svg
@@ -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>
diff --git a/src/main/angular/src/app/editor/breadboard/breadboard.component.ts b/src/main/angular/src/app/editor/circuit/circuit.component.ts
similarity index 64%
rename from src/main/angular/src/app/editor/breadboard/breadboard.component.ts
rename to src/main/angular/src/app/editor/circuit/circuit.component.ts
index 67ff0d4..1fa179e 100644
--- a/src/main/angular/src/app/editor/breadboard/breadboard.component.ts
+++ b/src/main/angular/src/app/editor/circuit/circuit.component.ts
@@ -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;
-  }
-
 }
diff --git a/src/main/angular/src/app/editor/editor.component.html b/src/main/angular/src/app/editor/editor.component.html
index f70a408..c3870f5 100644
--- a/src/main/angular/src/app/editor/editor.component.html
+++ b/src/main/angular/src/app/editor/editor.component.html
@@ -1,3 +1,3 @@
-<app-board></app-board>
+<app-circuit></app-circuit>
 
 <app-messages></app-messages>
diff --git a/src/main/angular/src/app/editor/editor.component.ts b/src/main/angular/src/app/editor/editor.component.ts
index 8b270d1..83fe977 100644
--- a/src/main/angular/src/app/editor/editor.component.ts
+++ b/src/main/angular/src/app/editor/editor.component.ts
@@ -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',
diff --git a/src/main/angular/src/app/editor/junction/junction.component.less b/src/main/angular/src/app/editor/junction/junction.component.less
new file mode 100644
index 0000000..1588d91
--- /dev/null
+++ b/src/main/angular/src/app/editor/junction/junction.component.less
@@ -0,0 +1,10 @@
+.junction {
+  stroke-width: 1px;
+  stroke: black;
+}
+
+.junction:hover {
+  circle {
+    fill: lightblue;
+  }
+}
diff --git a/src/main/angular/src/app/editor/junction/junction.component.svg b/src/main/angular/src/app/editor/junction/junction.component.svg
new file mode 100644
index 0000000..03f16c7
--- /dev/null
+++ b/src/main/angular/src/app/editor/junction/junction.component.svg
@@ -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>
diff --git a/src/main/angular/src/app/editor/junction/junction.component.ts b/src/main/angular/src/app/editor/junction/junction.component.ts
new file mode 100644
index 0000000..abcadf5
--- /dev/null
+++ b/src/main/angular/src/app/editor/junction/junction.component.ts
@@ -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;
+
+}
diff --git a/src/main/angular/src/app/editor/parts/battery/battery.component.less b/src/main/angular/src/app/editor/parts/battery/battery.component.less
new file mode 100644
index 0000000..66f1849
--- /dev/null
+++ b/src/main/angular/src/app/editor/parts/battery/battery.component.less
@@ -0,0 +1 @@
+@import "../part.component.less";
diff --git a/src/main/angular/src/app/editor/parts/battery/battery.component.svg b/src/main/angular/src/app/editor/parts/battery/battery.component.svg
new file mode 100644
index 0000000..7b091c1
--- /dev/null
+++ b/src/main/angular/src/app/editor/parts/battery/battery.component.svg
@@ -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>
diff --git a/src/main/angular/src/app/editor/parts/battery/battery.component.ts b/src/main/angular/src/app/editor/parts/battery/battery.component.ts
new file mode 100644
index 0000000..5ece71b
--- /dev/null
+++ b/src/main/angular/src/app/editor/parts/battery/battery.component.ts
@@ -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;
+
+}
diff --git a/src/main/angular/src/app/editor/parts/light/light.component.less b/src/main/angular/src/app/editor/parts/light/light.component.less
new file mode 100644
index 0000000..157e0ce
--- /dev/null
+++ b/src/main/angular/src/app/editor/parts/light/light.component.less
@@ -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);
+}
diff --git a/src/main/angular/src/app/editor/parts/light/light.component.svg b/src/main/angular/src/app/editor/parts/light/light.component.svg
new file mode 100644
index 0000000..82083e9
--- /dev/null
+++ b/src/main/angular/src/app/editor/parts/light/light.component.svg
@@ -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>
diff --git a/src/main/angular/src/app/editor/parts/light/light.component.ts b/src/main/angular/src/app/editor/parts/light/light.component.ts
new file mode 100644
index 0000000..bf7e9ef
--- /dev/null
+++ b/src/main/angular/src/app/editor/parts/light/light.component.ts
@@ -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;
+
+}
diff --git a/src/main/angular/src/app/editor/parts/part.component.less b/src/main/angular/src/app/editor/parts/part.component.less
new file mode 100644
index 0000000..0dabdcf
--- /dev/null
+++ b/src/main/angular/src/app/editor/parts/part.component.less
@@ -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;
+}
diff --git a/src/main/angular/src/app/editor/parts/part.component.svg b/src/main/angular/src/app/editor/parts/part.component.svg
new file mode 100644
index 0000000..0ab0be4
--- /dev/null
+++ b/src/main/angular/src/app/editor/parts/part.component.svg
@@ -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>
diff --git a/src/main/angular/src/app/editor/parts/part.component.ts b/src/main/angular/src/app/editor/parts/part.component.ts
new file mode 100644
index 0000000..075395c
--- /dev/null
+++ b/src/main/angular/src/app/editor/parts/part.component.ts
@@ -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;
+  }
+
+}
diff --git a/src/main/angular/src/app/simulation/Calculation.ts b/src/main/angular/src/app/simulation/Calculation.ts
new file mode 100644
index 0000000..42eaf66
--- /dev/null
+++ b/src/main/angular/src/app/simulation/Calculation.ts
@@ -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;
+  }
+
+}