From 37715e31afbbdabce640b73ddd0362eb996bfd4a 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 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.
---
 .../floating-window-manager.component.ts      |  6 ++----
 .../session-iframe.component.html             |  7 +++++--
 .../session/session-viewer.service.ts         | 19 +++++++++++++++++++
 .../tiling-window-manager.component.html      |  2 +-
 .../tiling-window-manager.component.ts        |  2 ++
 5 files changed, 29 insertions(+), 7 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..9651e329b5 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,9 +10,9 @@
   ></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
     "
@@ -20,6 +20,9 @@
     [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();