fix(session-viewer): Disable pointer event while resizing sessions

This commit fixes a small bug that was introduced in #1150.

When the pointer events are not disabled on the iframe, some pointer events
are "stolen" by the iframe. Therefore, they can not be used by our event handlers.
This led to a "jumpy" behaviour while resizing.

frontend/src/app/sessions/session/floating-window-manager/floating-window-manager.component.ts

@@ -14,8 +14,6 @@ import { SessionViewerService, ViewerSession } from '../session-viewer.service';
 })
 @UntilDestroy()
 export class FloatingWindowManagerComponent implements OnInit {
-  draggingActive = false;
-
   constructor(public sessionViewerService: SessionViewerService) {}
 
   ngOnInit(): void {
@@ -25,11 +23,11 @@ export class FloatingWindowManagerComponent implements OnInit {
   }
 
   dragStart(): void {
-    this.draggingActive = true;
+    this.sessionViewerService.disableAllSessions();
   }
 
   dragStop(): void {
-    this.draggingActive = false;
+    this.sessionViewerService.enableAllSessions();
   }
 
   trackBySessionId(_: number, session: ViewerSession): string {

frontend/src/app/sessions/session/session-iframe/session-iframe.component.html

@@ -10,16 +10,19 @@
   ></div>
   <iframe
     [title]="
-      (session.version?.tool?.name ?? 'unknown tool name') +
-      '-' +
-      (session.version?.tool?.name ?? 'unknown tool name') +
-      '-' +
+      (session.version?.tool?.name ?? 'Unknown tool') +
+      ', version' +
+      (session.version?.name ?? 'unknown version') +
+      ', ' +
       session.type
     "
     [id]="'session-' + session.id"
     [src]="session.safeResourceURL"
     class="h-full w-full"
     allow="clipboard-read; clipboard-write"
+    [ngClass]="{
+      'pointer-events-none': session.disabled
+    }"
   >
   </iframe>
 </div>

frontend/src/app/sessions/session/session-viewer.service.ts

@@ -74,6 +74,24 @@ export class SessionViewerService {
     this._sessions.next(updatedSessions);
   }
 
+  disableAllSessions(): void {
+    this._sessions.next(
+      this._sessions.value?.map((curSession) => ({
+        ...curSession,
+        disabled: true,
+      })),
+    );
+  }
+
+  enableAllSessions(): void {
+    this._sessions.next(
+      this._sessions.value?.map((curSession) => ({
+        ...curSession,
+        disabled: false,
+      })),
+    );
+  }
+
   resizeSessions(): void {
     document.querySelectorAll('iframe').forEach((iframe) => {
       const session = this._sessions.value?.find(
@@ -137,4 +155,5 @@ export type ViewerSession = Session & {
   focused: boolean;
   reloadToResize: boolean;
   fullscreen: boolean;
+  disabled: boolean;
 };

frontend/src/app/sessions/session/tiling-window-manager/tiling-window-manager.component.html

@@ -71,7 +71,7 @@
 
     <div
       *ngIf="session.index < sessions.length - 1"
-      class="my-2 w-2 cursor-col-resize bg-gray-300"
+      class="w-2 cursor-col-resize rounded bg-gray-300"
       (mousedown)="onMouseDown($event, session.index)"
     ></div>
   </ng-container>

frontend/src/app/sessions/session/tiling-window-manager/tiling-window-manager.component.ts

@@ -59,6 +59,7 @@ export class TilingWindowManagerComponent implements OnInit {
   }
 
   onMouseDown(event: MouseEvent, index: number): void {
+    this.sessionViewerService.disableAllSessions();
     const leftSession = this.getSessionByIndex(index);
     const rightSession = this.getSessionByIndex(index + 1);
 
@@ -91,6 +92,8 @@ export class TilingWindowManagerComponent implements OnInit {
   @HostListener('window:mouseup')
   onMouseUp(): void {
     if (this.isValidResizeState(this.resizeState)) {
+      // Only trigger if resize is active
+      this.sessionViewerService.enableAllSessions();
       this.resizeState = {};
       this.sessionViewerService.resizeSessions();
     }