refactored Parts out of BreadboardComponent

src/main/angular/src/app/editor/Point.ts

@@ -1,4 +1,5 @@
 import {Junction} from "./junction/Junction";
+import {Part} from './parts/Part';
 
 export class Point {
 
@@ -17,4 +18,8 @@ export class Point {
     return new Point(junction.pixelX, junction.pixelY);
   }
 
+  static fromPart(part: Part) {
+    return new Point(part.x, part.y);
+  }
+
 }

src/main/angular/src/app/editor/breadboard/Parts.ts

@@ -0,0 +1,47 @@
+import {Point} from '../Point';
+import {Part, RASTER} from '../parts/Part';
+import {MessageService} from '../message/message.service';
+
+export class Parts {
+
+  readonly list: Part[] = [];
+
+  dragStart: Point | null = null;
+
+  dragStartPart: Part | null = null;
+
+  dragCursor: Point | null = null;
+
+  constructor(
+    protected messageService: MessageService,
+  ) {
+    //
+  }
+
+  mouseDown(part: Part, $event: MouseEvent) {
+    if ($event.button === 0) {
+      this.dragStartPart = part;
+      this.dragStart = Point.fromPart(part);
+    }
+  }
+
+  mouseMove($event: MouseEvent) {
+    this.updateDragCursor($event);
+    if (this.dragStartPart !== null && this.dragCursor !== null) {
+      this.dragStartPart.rasterCenterX = Math.floor(this.dragCursor.x / RASTER);
+      this.dragStartPart.rasterCenterY = Math.floor(this.dragCursor.y / RASTER);
+    }
+  }
+
+  mouseUp($event: MouseEvent) {
+    this.updateDragCursor($event);
+    if ($event.button === 0) {
+      this.dragStartPart = null;
+    }
+  }
+
+  private updateDragCursor($event: MouseEvent) {
+    this.dragCursor = Point.fromEvent($event);
+  }
+
+}

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

@@ -1,6 +1,6 @@
 <svg class="breadboard" (mousemove)="mouseMove($event)" (mouseup)="mouseUp($event)">
 
-  <svg *ngFor="let part of parts" [attr.height]="part.hP" [attr.width]="part.wP" [attr.x]="part.xP" [attr.y]="part.yP" [ngClass]="part.ngClass()">
+  <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>
 

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

@@ -19,17 +19,21 @@ import {Parts} from './Parts';
 })
 export class BreadboardComponent {
 
+  protected readonly parts: Parts;
+
   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];
-
   constructor(
     protected readonly messageService: MessageService,
   ) {
+    this.parts = new Parts(messageService);
+    this.parts.list.push(this.battery);
+    this.parts.list.push(this.light);
+
     this.wires = new Wires(messageService);
     this.wires.connect(this.battery.minus, this.light.a);
     this.wires.connect(this.battery.plus, this.light.b);
@@ -37,10 +41,12 @@ export class BreadboardComponent {
 
   mouseMove($event: MouseEvent) {
     this.wires.mouseMove($event);
+    this.parts.mouseMove($event);
   }
 
   mouseUp($event: MouseEvent) {
     this.wires.breadboardMouseUp($event);
+    this.parts.mouseUp($event);
   }
 
   asBattery(part: Part): Battery {

src/main/angular/src/app/editor/parts/Part.ts

@@ -5,56 +5,43 @@ export const RASTER = 50;
 
 export abstract class Part {
 
+  x: number;
+
+  y: number;
+
+  w: number;
+
+  h: number;
+
   protected constructor(
     readonly type: PartType,
-    readonly rasterX: number,
-    readonly rasterY: number,
-    readonly rasterW: number = 3,
-    readonly rasterH: number = 3,
+    rasterX: number,
+    rasterY: number,
+    rasterW: number = 3,
+    rasterH: number = 3,
   ) {
-    //
+    this.x = rasterX * RASTER;
+    this.y = rasterY * RASTER;
+    this.w = rasterW * RASTER;
+    this.h = rasterH * RASTER;
   }
 
   abstract get junctions(): Junction[];
 
-  get x(): number {
-    return this.rasterX * RASTER;
+  getClasses(): string[] {
+    return ['part', 'part' + this.type, ...this.getClasses2()];
   }
 
-  get y(): number {
-    return this.rasterY * RASTER;
-  }
-
-  get w(): number {
-    return this.rasterW * RASTER;
-  }
-
-  get h(): number {
-    return this.rasterH * RASTER;
-  }
-
-  get xP(): string {
-    return this.x + 'px';
-  }
-
-  get yP(): string {
-    return this.y + 'px';
-  }
-
-  get wP(): string {
-    return this.w + 'px';
-  }
-
-  get hP(): string {
-    return this.h + 'px';
-  }
-
-  ngClass(): string[] {
-    return ['part', 'part' + this.type, ...this.ngClass2()];
-  }
-
-  protected ngClass2(): string[] {
+  protected getClasses2(): string[] {
     return [];
   }
 
+  set rasterCenterX(rx: number) {
+    this.x = rx * RASTER - this.w / 2;
+  }
+
+  set rasterCenterY(ry: number) {
+    this.y = ry * RASTER - this.h / 2;
+  }
+
 }