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

This commit fixes a 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 leds 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') +
       '-' +
-      (session.version?.tool?.name ?? 'unknown tool name') +
+      (session.version?.tool?.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);
 
@@ -90,6 +91,7 @@ export class TilingWindowManagerComponent implements OnInit {
 
   @HostListener('window:mouseup')
   onMouseUp(): void {
+    this.sessionViewerService.enableAllSessions();
     if (this.isValidResizeState(this.resizeState)) {
       this.resizeState = {};
       this.sessionViewerService.resizeSessions();