From 0390b0b32c0567645ae1e9d5d1f2f5c38f670245 Mon Sep 17 00:00:00 2001
From: MoritzWeber <kontakt@moritz-weber.net>
Date: Tue, 28 Nov 2023 08:03:28 +0100
Subject: [PATCH] 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.
---
 .../floating-window-manager.component.ts      |  6 ++----
 .../session-iframe.component.html             | 11 +++++++----
 .../session/session-viewer.service.ts         | 19 +++++++++++++++++++
 .../tiling-window-manager.component.html      |  2 +-
 .../tiling-window-manager.component.ts        |  2 ++
 5 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/frontend/src/app/sessions/session/floating-window-manager/floating-window-manager.component.ts b/frontend/src/app/sessions/session/floating-window-manager/floating-window-manager.component.ts
index debd6543e1..d3e0cb55ae 100644
--- a/frontend/src/app/sessions/session/floating-window-manager/floating-window-manager.component.ts
+++ b/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 {
diff --git a/frontend/src/app/sessions/session/session-iframe/session-iframe.component.html b/frontend/src/app/sessions/session/session-iframe/session-iframe.component.html
index c304f291f1..5e1a7283ca 100644
--- a/frontend/src/app/sessions/session/session-iframe/session-iframe.component.html
+++ b/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>
diff --git a/frontend/src/app/sessions/session/session-viewer.service.ts b/frontend/src/app/sessions/session/session-viewer.service.ts
index 8adc3df87c..ba9566e987 100644
--- a/frontend/src/app/sessions/session/session-viewer.service.ts
+++ b/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;
 };
diff --git a/frontend/src/app/sessions/session/tiling-window-manager/tiling-window-manager.component.html b/frontend/src/app/sessions/session/tiling-window-manager/tiling-window-manager.component.html
index d516f49185..9731a877b8 100644
--- a/frontend/src/app/sessions/session/tiling-window-manager/tiling-window-manager.component.html
+++ b/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>
diff --git a/frontend/src/app/sessions/session/tiling-window-manager/tiling-window-manager.component.ts b/frontend/src/app/sessions/session/tiling-window-manager/tiling-window-manager.component.ts
index a061060b8a..88d6a9fb47 100644
--- a/frontend/src/app/sessions/session/tiling-window-manager/tiling-window-manager.component.ts
+++ b/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();