Prototype: Interactive SVG map

src/app/components/map/map.component.less

@@ -5,3 +5,9 @@
 .fade-soft {
   opacity: 0.50;
 }
+
+// indicate that the element is clickable
+.dv-map use, 
+text.dv-map {
+  cursor: pointer;
+}

src/app/components/map/map.component.ts

@@ -5,8 +5,10 @@ import { Subject } from 'rxjs';
 
 import { AstroPathService } from '../../services/astro-path.service';
 import { StepSelectionService } from '../../services/step-selection.service';
-import { AstroPath } from '../../models/planet.model';
+import { AstroPath, AstroBody } from '../../models/planet.model';
 import { Step, StepType } from '../../models/step.model';
+import { BodiesService } from '../../services/bodies.service';
+import { Kerbin } from 'src/app/models/data/kerbin';
 
 @Component({
   selector: 'ksp-map',
@@ -25,7 +27,8 @@ export class MapComponent implements OnInit, OnDestroy {
   private readonly suffixStepLow: string[];
 
   constructor(private readonly astroPathService: AstroPathService,
-              private readonly stepSelectionService: StepSelectionService) {
+              private readonly stepSelectionService: StepSelectionService,
+              private readonly bodiesService: BodiesService) {
     this.suffixHub = ['transit', 'hub', 'com'];
     this.suffixLow = this.suffixHub.concat(['transit-low', 'low']);
     this.suffixLanding = this.suffixLow.concat(['ground']);
@@ -35,8 +38,47 @@ export class MapComponent implements OnInit, OnDestroy {
     this.suffixStepLow = this.suffixStepSOI.concat(['transit-low', 'low']);
   }
 
+  get kerbin(): Kerbin {
+    return this.bodiesService.kerbin;
+  }
+
+  private destinationSvgElementClicked(selection: AstroBody): void {
+    this.path.to = selection;  
+    if (this.path.to.name !== 'Kerbin') {
+      this.path.from = this.kerbin;
+    }
+    this.astroPathService.pathChanged(this.path);
+  }
+
+
+  /**
+   * Makes the SVG itself interactive.
+   * Click on a planet or moon will set the destination.
+   * Prototype status.
+   **/
+  addEventlistenersToAstroBodies() {
+    this.bodiesService.bodies.forEach(body => {
+      let bodyName = body.name
+      let lowerCaseBodyName = bodyName.toLowerCase()
+
+      let circleSelector = `#${lowerCaseBodyName}-ground use`
+      let bodyCircle = this.svg.select(circleSelector)
+      bodyCircle.on('click', () => {
+        this.destinationSvgElementClicked(body)
+      })
+
+      let labelSelector = `#${lowerCaseBodyName}`
+      let bodyLable = this.svg.select(labelSelector)
+      bodyLable.on('click', () => {
+        this.destinationSvgElementClicked(body)
+      })
+    })
+
+  }
+
   ngOnInit(): void {
     this.svg = d3.select('svg');
+    this.addEventlistenersToAstroBodies()
     this.astroPathService.getPath()
       .pipe(takeUntil(this.unsubscribe))
       .subscribe((p) => {

src/app/components/panel/panel.component.html

@@ -24,7 +24,7 @@ <h2 class="text-white">KSP Delta-V Planner</h2>
     </a>
   </div>
 
-  <div>
+  <!-- <div>
     <label for="fromBody" class="text-white">From:</label>
   </div>
 
@@ -50,7 +50,7 @@ <h2 class="text-white">KSP Delta-V Planner</h2>
         </button>
       </div>
     </div>
-  </div>
+  </div> -->
 
   <div class="d-flex justify-content-center mt-3 text-white">
     <div>
@@ -61,7 +61,7 @@ <h2 class="text-white">KSP Delta-V Planner</h2>
     </div>
   </div>
 
-  <div>
+  <!-- <div>
     <label for="toBody" class="text-white">To:</label>
   </div>
 
@@ -86,7 +86,7 @@ <h2 class="text-white">KSP Delta-V Planner</h2>
         </button>
       </div>
     </div>
-  </div>
+  </div> -->
 
   <div class="d-flex justify-content-center text-white my-3">
     <div class="mx-2">
@@ -136,14 +136,14 @@ <h2 class="text-white">KSP Delta-V Planner</h2>
           (mouseenter)="stepSelectionService.selectionChanged(step)"
           (mouseleave)="stepSelectionService.selectionChanged(null)">
         <ksp-step-message [step]="step"></ksp-step-message>
-        <div *ngIf="landingInAtmosphere(step)"
-             class="badge badge-dv"
-             [class.badge-secondary]="path.to.canLand"
-             [class.badge-danger]="!path.to.canLand"
-             [popoverTitle]="!path.to.canLand ? 'Landing here might not a good idea...': ''"
-             ngbPopover="Aerobraking is possible"
-             triggers="mouseenter:mouseleave"
-             placement="top-right">
+          <div *ngIf="landingInAtmosphere(step)"
+              class="badge badge-dv"
+              [class.badge-secondary]="path.to.canLand"
+              [class.badge-danger]="!path.to.canLand"
+              [popoverTitle]="!path.to.canLand ? 'Landing here might not a good idea...': ''"
+              ngbPopover="Aerobraking is possible"
+              triggers="mouseenter:mouseleave"
+              placement="top-right">
           <i *ngIf="!path.to.canLand" class="fas fa-ban mr-2"></i>
           <i class="fas fa-cloud-download-alt mr-2"></i>
           <ksp-dv-pill [step]="step"></ksp-dv-pill>