Part.rotate + mouse-middle-click to execute part action

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

@@ -46,6 +46,11 @@ export class Parts {
     }
   }
 
+  rotate(part: Part) {
+    part.rotate = (part.rotate + 1) % 4;
+    setTimeout(() => part.updateJunctionPositions(), 0);
+  }
+
   private reset() {
     this.part = null;
     this.partStart = null;

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

@@ -12,6 +12,8 @@ export abstract class Part {
 
   y: number;
 
+  rotate: number = 0;
+
   protected constructor(
     readonly circuit: Circuit,
     readonly type: PartType,
@@ -40,6 +42,10 @@ export abstract class Part {
     this.resetCalculations2();
   }
 
+  transform(): string {
+    return `rotate(${this.rotate % 4 * 90} ${RASTER * 1.5} ${RASTER * 1.5})`;
+  }
+
   resetCalculations2(): void {
     //
   }

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

@@ -7,18 +7,23 @@
   [attr.height]="RASTER * 3 + 'px'"
   [class.partDrag]="parts.isDragged(part)"
   (mousedown)="parts.mouseDown(part, $event)"
+  (contextmenu)="parts.rotate(part); $event.preventDefault()"
 >
 
-  <rect class="background" height="100%" width="100%" x="0" y="0" (mousedown)="part.mouseDown()" (mouseup)="part.mouseUp()"></rect>
+  <g [attr.transform]="part.transform()">
 
-  <g inner-part-battery *ngIf="isBattery(part)" [battery]="asBattery(part)"></g>
+  <rect class="background" height="100%" width="100%" x="0" y="0" (mousedown)="$event.button === 1 && part.mouseDown()" (mouseup)="$event.button === 1 && part.mouseUp()"></rect>
 
-  <g inner-part-light *ngIf="isLight(part)" [light]="asLight(part)"></g>
+    <g inner-part-battery *ngIf="isBattery(part)" [battery]="asBattery(part)"></g>
 
-  <g inner-part-relay *ngIf="isRelay(part)" [relay]="asRelay(part)"></g>
+    <g inner-part-light *ngIf="isLight(part)" [light]="asLight(part)"></g>
 
-  <g inner-part-switch *ngIf="isSwitch(part)" [switch]="asSwitch(part)"></g>
+    <g inner-part-relay *ngIf="isRelay(part)" [relay]="asRelay(part)"></g>
 
-  <g inner-junction *ngFor="let junction of part.junctions" [junction]="junction" [wires]="wires"></g>
+    <g inner-part-switch *ngIf="isSwitch(part)" [switch]="asSwitch(part)"></g>
+
+    <g inner-junction *ngFor="let junction of part.junctions" [junction]="junction" [wires]="wires"></g>
+
+  </g>
 
 </svg>

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

@@ -71,4 +71,5 @@ export class PartComponent {
   }
 
   protected readonly RASTER = RASTER;
+
 }

src/main/angular/src/app/editor/wire/wire.component.svg

@@ -1,6 +1,6 @@
 <svg width="100%" height="100%">
 
-  <line class="wireBack {{extraClassesBack}}" [attr.x1]="x1" [attr.y1]="y1" [attr.x2]="x2" [attr.y2]="y2" (contextmenu)="click($event)">
+  <line class="wireBack {{extraClassesBack}}" [attr.x1]="x1" [attr.y1]="y1" [attr.x2]="x2" [attr.y2]="y2" (contextmenu)="rightclick($event)">
     <!-- nothing -->
   </line>
 

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

@@ -169,8 +169,7 @@ export class WireComponent {
     return fadeColor((ratio - 0.5) * 2, 'magenta', 'red');
   }
 
-  click($event: MouseEvent) {
-    console.log($event);
+  rightclick($event: MouseEvent) {
     $event.preventDefault();
     if ($event.button === 2 && this.wire) {
       this.wire.disconnect();