Fix WASD navigation in IFC viewer (#9722)

When the IFC was focussed and the S key was pressed,
the global search input was opened and further key inputs went
into the search field instead of the expected zooming out
in the viewer.

Author: wielinde

frontend/src/app/modules/a11y/keyboard-shortcut-service.ts

@@ -91,7 +91,15 @@ export class KeyboardShortcutService {
 
   public accessKey(keyName:'preview'|'newWorkPackage'|'edit'|'quickSearch'|'projectSearch'|'help'|'moreMenu'|'details') {
     var key = accessKeys[keyName];
+
     return () => {
+      // Guard: When the focus is on the IFC viewer, pressing the key "S" shall control the viewer as part of its
+      //        WASD navigation. So dismiss that shortcuts and let the event pass on to the IFC viewer.
+      if (key === 4 &&
+        document.activeElement?.getAttribute('data-qa-selector') === 'op-ifc-viewer--model-canvas') {
+        return;
+      }
+
       var elem = jQuery('[accesskey=' + key + ']:first');
       if (elem.is('input') || elem.attr('id') === 'global-search-input') {
         // timeout with delay so that the key is not

frontend/src/app/modules/bim/ifc_models/ifc-viewer/ifc-viewer.component.ts

@@ -72,10 +72,10 @@ export class IFCViewerComponent implements OnInit, OnDestroy {
   constructor(private I18n:I18nService,
               private elementRef:ElementRef,
               public ifcData:IfcModelsDataService,
-              private ifcViewer:IFCViewerService,
+              private ifcViewerService:IFCViewerService,
               private currentUserService:CurrentUserService,
               private currentProjectService:CurrentProjectService) {
-    this.inspectorVisible$ = this.ifcViewer.inspectorVisible$;
+    this.inspectorVisible$ = this.ifcViewerService.inspectorVisible$;
   }
 
   ngOnInit():void {
@@ -97,9 +97,9 @@ export class IFCViewerComponent implements OnInit, OnDestroy {
         this.currentProjectService.id as string,
       )
       .subscribe((manageIfcModelsAllowed) => {
-        this.ifcViewer.newViewer(
+        this.ifcViewerService.newViewer(
           {
-            canvasElement: element.find('[data-qa-selector="op-ifc-viewer--model-canvas"]')[0], // WebGL canvas
+            canvasElement: this.modelCanvas.nativeElement, // WebGL canvas
             explorerElement: jQuery('.op-ifc-viewer--tree-panel')[0], // Left panel
             toolbarElement: element.find('[data-qa-selector="op-ifc-viewer--toolbar-container"]')[0], // Toolbar
             inspectorElement: element.find('[data-qa-selector="op-ifc-viewer--inspector-container"]')[0], // Toolbar
@@ -110,29 +110,30 @@ export class IFCViewerComponent implements OnInit, OnDestroy {
           this.ifcData.projects,
         );
       });
+
   }
 
   ngOnDestroy():void {
-    this.ifcViewer.destroy();
+    this.ifcViewerService.destroy();
   }
 
   toggleInspector() {
-    this.ifcViewer.inspectorVisible$.next(!this.inspectorVisible$.getValue());
+    this.ifcViewerService.inspectorVisible$.next(!this.inspectorVisible$.getValue());
   }
 
   @HostListener('mousedown')
   enableKeyBoard() {
     if (this.modelCount) {
       this.keyboardEnabled = true;
-      this.ifcViewer.setKeyboardEnabled(true);
+      this.ifcViewerService.setKeyboardEnabled(true);
     }
   }
 
   @HostListener('window:mousedown', ['$event.target'])
   disableKeyboard(target:Element) {
-    if (this.modelCount && !this.outerContainer.nativeElement!.contains(target)) {
+    if (this.modelCount && !this.outerContainer.nativeElement?.contains(target)) {
       this.keyboardEnabled = false;
-      this.ifcViewer.setKeyboardEnabled(false);
+      this.ifcViewerService.setKeyboardEnabled(false);
     }
   }