Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Nov 28, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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.
  • Loading branch information
MoritzWeber0 committed Nov 28, 2023

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
commit 7fdc3b72483888fd16092b02af354b46cae6092b
Original file line number Diff line number Diff line change
@@ -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 {
Original file line number Diff line number Diff line change
@@ -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>
19 changes: 19 additions & 0 deletions frontend/src/app/sessions/session/session-viewer.service.ts
Original file line number Diff line number Diff line change
@@ -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;
};
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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();
}