FIX: Part dragging

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

@@ -22,4 +22,8 @@ export class Point {
     return new Point(part.x, part.y);
   }
 
+  minus(start: Point): Point {
+    return new Point(this.x - start.x, this.y - start.y);
+  }
+
 }

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

@@ -1,42 +1,59 @@
-import {Point} from '../Point';
 import {Part, RASTER} from '../parts/Part';
 import {Circuit} from './Circuit';
+import {Point} from '../Point';
 
 export class Parts {
 
-  circuit!: Circuit;
+  private _circuit!: Circuit;
 
-  dragStart: Point | null = null;
+  set circuit(circuit: Circuit) {
+    this._circuit = circuit;
+    this.reset();
+  }
 
-  dragStartPart: Part | null = null;
+  get circuit(): Circuit {
+    return this._circuit;
+  }
 
-  dragCursor: Point | null = null;
+  private part: Part | null = null;
+
+  private partStart: Point | null = null;
+
+  private mouseStart: Point | null = null;
 
   mouseDown(part: Part, $event: MouseEvent) {
     if ($event.button === 0) {
-      this.dragStartPart = part;
-      this.dragStart = Point.fromPart(part);
+      this.part = part;
+      this.partStart = Point.fromPart(part);
+      this.mouseStart = Point.fromEvent($event);
+      this.mouseMove($event);
     }
   }
 
   mouseMove($event: MouseEvent) {
-    this.updateDragCursor($event);
-    if (this.dragStartPart !== null && this.dragCursor !== null) {
-      this.dragStartPart.rasterCenterX = Math.floor(this.dragCursor.x / RASTER) + 0.5;
-      this.dragStartPart.rasterCenterY = Math.floor(this.dragCursor.y / RASTER) + 0.5;
-      this.dragStartPart.updateJunctionPositions();
+    if ($event.button === 0 && this.part !== null && this.partStart !== null && this.mouseStart !== null) {
+      const diff = Point.fromEvent($event).minus(this.mouseStart);
+      this.part.x = Math.floor((this.partStart.x + diff.x) / RASTER + 0.5) * RASTER;
+      this.part.y = Math.floor((this.partStart.y + diff.y) / RASTER + 0.5) * RASTER;
+      this.part.updateJunctionPositions();
     }
   }
 
   mouseUp($event: MouseEvent) {
-    this.updateDragCursor($event);
+    this.mouseMove($event);
     if ($event.button === 0) {
-      this.dragStartPart = null;
+      this.reset();
     }
   }
 
-  private updateDragCursor($event: MouseEvent) {
-    this.dragCursor = Point.fromEvent($event);
+  private reset() {
+    this.part = null;
+    this.partStart = null;
+    this.mouseStart = null;
+  }
+
+  isDragged(part: Part) {
+    return this.part === part;
   }
 
 }

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

@@ -8,13 +8,13 @@ export abstract class Part {
 
   readonly uuid: string = self.crypto.randomUUID();
 
-  private _x: number;
+  x: number;
 
-  private _y: number;
+  y: number;
 
-  private readonly _w: number;
+  readonly w: number;
 
-  private readonly _h: number;
+  readonly h: number;
 
   protected constructor(
     readonly circuit: Circuit,
@@ -25,34 +25,10 @@ export abstract class Part {
     rasterW: number = 1,
     rasterH: number = 1,
   ) {
-    this._x = rasterX * 3 * RASTER;
-    this._y = rasterY * 3 * RASTER;
-    this._w = rasterW * 3 * RASTER;
-    this._h = rasterH * 3 * RASTER;
-  }
-
-  get x(): number {
-    return this._x;
-  }
-
-  get y(): number {
-    return this._y;
-  }
-
-  get w(): number {
-    return this._w;
-  }
-
-  get h(): number {
-    return this._h;
-  }
-
-  set rasterCenterX(rx: number) {
-    this._x = rx * RASTER - this._w / 2;
-  }
-
-  set rasterCenterY(ry: number) {
-    this._y = ry * RASTER - this._h / 2;
+    this.x = rasterX * 3 * RASTER;
+    this.y = rasterY * 3 * RASTER;
+    this.w = rasterW * 3 * RASTER;
+    this.h = rasterH * 3 * RASTER;
   }
 
   toString(): string {

src/main/angular/src/app/editor/parts/part.component.svg

@@ -5,7 +5,7 @@
   [attr.y]="part.y + 'px'"
   [attr.width]="part.w + 'px'"
   [attr.height]="part.h + 'px'"
-  [class.partDrag]="parts.dragStartPart === part"
+  [class.partDrag]="parts.isDragged(part)"
   (mousedown)="parts.mouseDown(part, $event)"
 >