feat(app): added button to close/open the VP

packages/phoenix-ng/projects/phoenix-app/src/app/app.module.ts

@@ -7,6 +7,7 @@ import { HomeComponent } from './home/home.component';
 import { GeometryComponent } from './sections/geometry/geometry.component';
 import { AtlasComponent } from './sections/atlas/atlas.component';
 import { LHCbComponent } from './sections/lhcb/lhcb.component';
+import { VPToggleComponent } from './sections/lhcb/vp-toggle/vp-toggle.component';
 import { CMSComponent } from './sections/cms/cms.component';
 import { TrackmlComponent } from './sections/trackml/trackml.component';
 import { PhoenixUIModule } from 'phoenix-ui-components';
@@ -39,6 +40,7 @@ if (environment?.singleEvent) {
     GeometryComponent,
     AtlasComponent,
     LHCbComponent,
+    VPToggleComponent,
     CMSComponent,
     TrackmlComponent,
     PlaygroundComponent,

packages/phoenix-ng/projects/phoenix-app/src/app/sections/lhcb/lhcb.component.html

@@ -22,6 +22,7 @@
     [eventDataImportOptions]="eventDataImportOptions"
   ></app-io-options>
   <app-share-link></app-share-link>
+  <app-vp-toggle></app-vp-toggle>
 </app-ui-menu-wrapper>
 <app-embed-menu></app-embed-menu>
 <app-experiment-info

packages/phoenix-ng/projects/phoenix-app/src/app/sections/lhcb/vp-toggle/vp-toggle.component.html

@@ -0,0 +1,6 @@
+<app-menu-toggle
+  [tooltip]="(open ? 'Close' : 'Open') + 'VP'"
+  [icon]="open ? 'closevp' : 'openvp'"
+  (click)="toggleVP()"
+>
+</app-menu-toggle>

packages/phoenix-ng/projects/phoenix-app/src/app/sections/lhcb/vp-toggle/vp-toggle.component.spec.ts

@@ -0,0 +1,30 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { VPToggleComponent } from './vp-toggle.component';
+
+describe('VPToggleComponent', () => {
+  let component: VPToggleComponent;
+  let fixture: ComponentFixture<VPToggleComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [VPToggleComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(VPToggleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should toggle VP opening/closing', () => {
+    expect(component.open).toBe(false);
+    component.toggleVP();
+    expect(component.open).toBe(true);
+  });
+});

packages/phoenix-ng/projects/phoenix-app/src/app/sections/lhcb/vp-toggle/vp-toggle.component.ts

@@ -0,0 +1,33 @@
+import { Component, ComponentRef, OnDestroy, OnInit } from '@angular/core';
+import { EventDisplayService } from 'phoenix-ui-components';
+
+@Component({
+  selector: 'app-vp-toggle',
+  templateUrl: './vp-toggle.component.html',
+  styleUrls: ['./vp-toggle.component.scss'],
+})
+export class VPToggleComponent {
+  open = false;
+
+  constructor(private eventDisplay: EventDisplayService) {}
+
+  moveVP(sceneManager, pos) {
+    // changes Velo position symetrically by the given amount
+    for (const item of ['Modules', 'Support', 'RFFoil', 'DeliveryPipes']) {
+      sceneManager
+        .getObjectByName('VP > Left > ' + item)
+        .position.setComponent(0, pos);
+      sceneManager
+        .getObjectByName('VP > Right > ' + item)
+        .position.setComponent(0, -pos);
+    }
+  }
+
+  toggleVP() {
+    this.open = !this.open;
+    this.moveVP(
+      this.eventDisplay.getThreeManager().getSceneManager(),
+      this.open ? 30 : 0
+    );
+  }
+}