splitt SVG into angular-components

src/main/angular/src/app/editor/breadboard/breadboard.component.html

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

src/main/angular/src/app/editor/breadboard/breadboard.component.less

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

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

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

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>

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 {NgForOf, NgIf} from '@angular/common';
-import {Part} from '../parts/Part';
 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',
+  templateUrl: './circuit.component.svg',
-  styleUrl: './breadboard.component.less'
+  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;
-  }
-
 }

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>

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',

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

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>

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

src/main/angular/src/app/editor/parts/battery/battery.component.less

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

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>

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

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

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>

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

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

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>

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

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