feat: merge screenshot mode into make picture menu (#540)

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

@@ -17,7 +17,6 @@
   <app-performance-toggle></app-performance-toggle>
   <app-vr-toggle></app-vr-toggle>
   <app-ar-toggle></app-ar-toggle>
-  <app-ss-mode></app-ss-mode>
   <app-make-picture></app-make-picture>
   <app-io-options
     [eventDataImportOptions]="eventDataImportOptions"

packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/make-picture/make-picture.component.html

@@ -1,4 +1,7 @@
 <mat-menu class="mat-menu" #menu>
+  <button mat-menu-item class="screenshot-mode" (click)="toggleSSMode()">
+    {{ ssMode ? 'Exit screenshot mode' : 'Enter screenshot mode' }}
+  </button>
   <button mat-menu-item (click)="$event.stopPropagation()" class="size-input">
     <label>width</label>
     <input
@@ -41,8 +44,9 @@
 </mat-menu>
 <app-menu-toggle
   [matMenuTriggerFor]="menu"
-  tooltip="Creates a picture from the current view: directly saves a png of arbitrary size from the current view"
-  icon="png"
+  [active]="ssMode"
+  tooltip="Screenshot options: enter screenshot mode or save a picture from the current view"
+  icon="ss-mode"
 >
 </app-menu-toggle>
 <div>

packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/make-picture/make-picture.component.scss

@@ -23,8 +23,32 @@
   display: block;
 }
 
+.screenshot-mode span {
+  padding: 4px 8px;
+  border: 2px solid var(--phoenix-text-color);
+  border-radius: 8px;
+  display: inline-block;
+}
+
 .make-picture span {
   padding: 5px 25px;
   border: 2px solid var(--phoenix-text-color);
   border-radius: 8px;
 }
+
+#uiMenu,
+#phoenixMenu,
+#mainLogo,
+#statsElement {
+  transition: opacity 0.4s;
+}
+
+.ss-mode {
+  #uiMenu,
+  #phoenixMenu,
+  #mainLogo,
+  #statsElement {
+    visibility: hidden;
+    opacity: 0;
+  }
+}

packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/make-picture/make-picture.component.test.ts

@@ -31,6 +31,10 @@ describe('MakePictureComponent', () => {
     component.ngOnInit();
   });
 
+  afterEach(() => {
+    document.body.classList.remove('ss-mode');
+  });
+
   it('should create', () => {
     expect(component).toBeTruthy();
   });
@@ -49,4 +53,12 @@ describe('MakePictureComponent', () => {
     component.makePicture();
     expect(mockEventDisplay.makeScreenShot).toHaveBeenCalled();
   });
+
+  it('should toggle screenshot mode', () => {
+    component.toggleSSMode();
+    expect(component.ssMode).toBe(true);
+    expect(document.body.classList.contains('ss-mode')).toBe(true);
+    component.toggleSSMode();
+    expect(component.ssMode).toBe(false);
+  });
 });

packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/make-picture/make-picture.component.ts

@@ -19,8 +19,15 @@ export class MakePictureComponent implements OnInit {
   width: number = 3840;
   height: number = 2160;
   disabled: boolean = false;
+  ssMode: boolean = false;
   constructor(private eventDisplay: EventDisplayService) {}
-  ngOnInit() {}
+  ngOnInit() {
+    document.onfullscreenchange = () => {
+      if (!document.fullscreenElement && this.ssMode) {
+        this.toggleSSMode();
+      }
+    };
+  }
 
   setWidth(value) {
     this.width = value;
@@ -33,9 +40,28 @@ export class MakePictureComponent implements OnInit {
   buttonText() {
     return 'Create picture';
   }
+  toggleSSMode() {
+    this.ssMode = !this.ssMode;
+    document.body.classList.toggle('ss-mode');
+    if (this.ssMode) {
+      // WORKAROUND - Adding the event listener directly somehow calls it on the first click
+      setTimeout(() => {
+        document.addEventListener('click', this.onDocumentClick);
+        document.addEventListener('touchstart', this.onDocumentClick);
+      }, 1);
+      document.documentElement.requestFullscreen?.();
+    } else {
+      document.removeEventListener('click', this.onDocumentClick);
+      document.removeEventListener('touchstart', this.onDocumentClick);
+    }
+  }
   makePicture() {
     this.eventDisplay
       .getThreeManager()
       .makeScreenShot(this.width, this.height, this.fitting);
   }
+
+  private onDocumentClick = () => {
+    document.exitFullscreen?.();
+  };
 }

packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/ui-menu.component.html

@@ -50,9 +50,6 @@
   <!-- Toggle for AR -->
   <app-ar-toggle></app-ar-toggle>
 
-  <!-- Toggle for screenshot mode -->
-  <app-ss-mode></app-ss-mode>
-
   <!-- Make pictures from scene -->
   <app-make-picture></app-make-picture>