0032638: Draw Harness, ViewerTest - HTML input range misbehavior in WebAssembly

ViewerTest_EventManager - added tracking of EMSCRIPTEN_EVENT_FOCUSOUT event.
onWasmMouseCallback() has been adjusted to return FALSE for EMSCRIPTEN_EVENT_TARGET_WINDOW
target to avoid misbehavior of other HTML controls.

WNT_Window::ProcessMessage() now handles WM_SETFOCUS/WM_KILLFOCUS instead of WM_ACTIVATE to track focus changes.

AIS_ViewController::ProcessFocus() now redirects to AIS_ViewController::ResetViewInput() on focus loss.
This fixes issues when key action (like WASD navigation) keep working even after releasing key if window has been switched.

samples/webgl/WasmOcctView.cpp

@@ -202,9 +202,12 @@ void WasmOcctView::initWindow()
   emscripten_set_touchmove_callback  (aTargetId, this, toUseCapture, onTouchCallback);
   emscripten_set_touchcancel_callback(aTargetId, this, toUseCapture, onTouchCallback);
 
-  //emscripten_set_keypress_callback   (EMSCRIPTEN_EVENT_TARGET_WINDOW, this, toUseCapture, onKeyCallback);
+  //emscripten_set_keypress_callback   (aTargetId, this, toUseCapture, onKeyCallback);
-  emscripten_set_keydown_callback    (EMSCRIPTEN_EVENT_TARGET_WINDOW, this, toUseCapture, onKeyDownCallback);
+  emscripten_set_keydown_callback    (aTargetId, this, toUseCapture, onKeyDownCallback);
-  emscripten_set_keyup_callback      (EMSCRIPTEN_EVENT_TARGET_WINDOW, this, toUseCapture, onKeyUpCallback);
+  emscripten_set_keyup_callback      (aTargetId, this, toUseCapture, onKeyUpCallback);
+  //emscripten_set_focus_callback    (aTargetId, this, toUseCapture, onFocusCallback);
+  //emscripten_set_focusin_callback  (aTargetId, this, toUseCapture, onFocusCallback);
+  emscripten_set_focusout_callback   (aTargetId, this, toUseCapture, onFocusCallback);
 }
 
 // ================================================================
@@ -513,7 +516,8 @@ EM_BOOL WasmOcctView::onMouseEvent (int theEventType, const EmscriptenMouseEvent
     EmscriptenMouseEvent anEvent = *theEvent;
     anEvent.targetX -= jsGetBoundingClientLeft();
     anEvent.targetY -= jsGetBoundingClientTop();
-    return aWindow->ProcessMouseEvent (*this, theEventType, &anEvent) ? EM_TRUE : EM_FALSE;
+    aWindow->ProcessMouseEvent (*this, theEventType, &anEvent);
+    return EM_FALSE;
   }
 
   return aWindow->ProcessMouseEvent (*this, theEventType, theEvent) ? EM_TRUE : EM_FALSE;
@@ -587,6 +591,24 @@ bool WasmOcctView::navigationKeyModifierSwitch (unsigned int theModifOld,
   return hasActions;
 }
 
+// ================================================================
+// Function : onFocusEvent
+// Purpose  :
+// ================================================================
+EM_BOOL WasmOcctView::onFocusEvent (int theEventType, const EmscriptenFocusEvent* theEvent)
+{
+  if (myView.IsNull()
+   || (theEventType != EMSCRIPTEN_EVENT_FOCUS
+    && theEventType != EMSCRIPTEN_EVENT_FOCUSIN // about to receive focus
+    && theEventType != EMSCRIPTEN_EVENT_FOCUSOUT))
+  {
+    return EM_FALSE;
+  }
+
+  Handle(Wasm_Window) aWindow = Handle(Wasm_Window)::DownCast (myView->Window());
+  return aWindow->ProcessFocusEvent (*this, theEventType, theEvent) ? EM_TRUE : EM_FALSE;
+}
+
 // ================================================================
 // Function : onKeyDownEvent
 // Purpose  :

samples/webgl/WasmOcctView.h

@@ -181,6 +181,9 @@ private:
   //! Key up event.
   EM_BOOL onKeyUpEvent (int theEventType, const EmscriptenKeyboardEvent* theEvent);
 
+  //! Focus change event.
+  EM_BOOL onFocusEvent (int theEventType, const EmscriptenFocusEvent* theEvent);
+
 //! @name Emscripten callbacks (static functions)
 private:
 
@@ -205,6 +208,9 @@ private:
   static EM_BOOL onKeyUpCallback (int theEventType, const EmscriptenKeyboardEvent* theEvent, void* theView)
   { return ((WasmOcctView* )theView)->onKeyUpEvent (theEventType, theEvent); }
 
+  static EM_BOOL onFocusCallback (int theEventType, const EmscriptenFocusEvent* theEvent, void* theView)
+  { return ((WasmOcctView* )theView)->onFocusEvent (theEventType, theEvent); }
+
 private:
 
   //! Register hot-keys for specified Action.

samples/webgl/occt-webgl-sample.html

@@ -42,6 +42,11 @@ function updateCanvasSize()
 window.onresize = updateCanvasSize;
 updateCanvasSize();
 
+// capture keyboard input on mouse click
+occViewerCanvas.tabIndex = -1;
+occViewerCanvas.onclick = (theEvent) => { occViewerCanvas.focus() };
+occViewerCanvas.focus();
+
 //! Check browser support.
 function isWasmSupported()
 {
@@ -78,6 +83,7 @@ fileInput.onchange = function()
     OccViewerModule.openFromMemory (aFile.name, aDataBuffer, aDataArray.length, true);
     //OccViewerModule._free (aDataBuffer); will be freed by called method
     OccViewerModule.displayGround (true);
+    occViewerCanvas.focus();
   };
   aReader.readAsArrayBuffer(aFile);
 };

src/AIS/AIS_ViewController.hxx

@@ -441,10 +441,13 @@ public: //! @name resize events
   virtual void ProcessInput() Standard_OVERRIDE {}
 
   //! Handle focus event.
-  //! Default implementation does nothing.
+  //! Default implementation resets cached input state (pressed keys).
   virtual void ProcessFocus (bool theIsActivated) Standard_OVERRIDE
   {
-    (void )theIsActivated;
+    if (!theIsActivated)
+    {
+      ResetViewInput();
+    }
   }
 
   //! Handle window close event.

src/ViewerTest/ViewerTest_EventManager.cxx

@@ -655,7 +655,8 @@ static EM_BOOL onWasmMouseCallback (int theEventType, const EmscriptenMouseEvent
       EmscriptenMouseEvent anEvent = *theEvent;
       anEvent.targetX -= occJSGetBoundingClientLeft();
       anEvent.targetY -= occJSGetBoundingClientTop();
-      return aWindow->ProcessMouseEvent (*aViewCtrl, theEventType, &anEvent) ? EM_TRUE : EM_FALSE;
+      aWindow->ProcessMouseEvent (*aViewCtrl, theEventType, &anEvent);
+      return EM_FALSE;
     }
 
     return aWindow->ProcessMouseEvent (*aViewCtrl, theEventType, theEvent) ? EM_TRUE : EM_FALSE;
@@ -702,6 +703,19 @@ static EM_BOOL onWasmKeyCallback (int theEventType, const EmscriptenKeyboardEven
   }
   return EM_FALSE;
 }
+
+//! Handle focus change event.
+static EM_BOOL onWasmFocusCallback (int theEventType, const EmscriptenFocusEvent* theEvent, void*)
+{
+  Handle(ViewerTest_EventManager) aViewCtrl = ViewerTest::CurrentEventManager();
+  if (!aViewCtrl.IsNull()
+   && !ViewerTest::CurrentView().IsNull())
+  {
+    Handle(Wasm_Window) aWindow = Handle(Wasm_Window)::DownCast (ViewerTest::CurrentView()->Window());
+    return aWindow->ProcessFocusEvent (*aViewCtrl, theEventType, theEvent) ? EM_TRUE : EM_FALSE;
+  }
+  return EM_FALSE;
+}
 #endif
 
 // ==============================================================================
@@ -777,6 +791,9 @@ void ViewerTest_EventManager::SetupWindowCallbacks (const Handle(Aspect_Window)&
   // keyboard input requires a focusable element or EMSCRIPTEN_EVENT_TARGET_WINDOW
   emscripten_set_keydown_callback    (aTargetId, anOpaque, toUseCapture, onWasmKeyCallback);
   emscripten_set_keyup_callback      (aTargetId, anOpaque, toUseCapture, onWasmKeyCallback);
+  //emscripten_set_focus_callback    (aTargetId, anOpaque, toUseCapture, onWasmFocusCallback);
+  //emscripten_set_focusin_callback  (aTargetId, anOpaque, toUseCapture, onWasmFocusCallback);
+  emscripten_set_focusout_callback   (aTargetId, anOpaque, toUseCapture, onWasmFocusCallback);
 #else
   (void )theWin;
 #endif

src/WNT/WNT_Window.cxx

@@ -815,12 +815,12 @@ bool WNT_Window::ProcessMessage (Aspect_WindowInputListener& theListener,
       }
       return false;
     }
-    case WM_ACTIVATE:
+    case WM_SETFOCUS:
+    case WM_KILLFOCUS:
     {
       if (theMsg.hwnd == (HWND )myHWindow)
       {
-        theListener.ProcessFocus (LOWORD(theMsg.wParam) == WA_CLICKACTIVE
+        theListener.ProcessFocus (theMsg.message == WM_SETFOCUS);
-                               || LOWORD(theMsg.wParam) == WA_ACTIVE);
         return true;
       }
       return false;

src/Wasm/Wasm_Window.cxx

@@ -243,6 +243,12 @@ bool Wasm_Window::ProcessMessage (Aspect_WindowInputListener& theListener,
     {
       return ProcessUiEvent (theListener, theEventType, (const EmscriptenUiEvent* )theEvent);
     }
+    case EMSCRIPTEN_EVENT_FOCUS:
+    case EMSCRIPTEN_EVENT_FOCUSIN:
+    case EMSCRIPTEN_EVENT_FOCUSOUT:
+    {
+      return ProcessFocusEvent (theListener, theEventType, (const EmscriptenFocusEvent* )theEvent);
+    }
   }
   return false;
 #else
@@ -536,6 +542,29 @@ bool Wasm_Window::ProcessUiEvent (Aspect_WindowInputListener& theListener,
   return true;
 }
 
+// =======================================================================
+// function : ProcessFocusEvent
+// purpose  :
+// =======================================================================
+bool Wasm_Window::ProcessFocusEvent (Aspect_WindowInputListener& theListener,
+                                     int theEventType, const EmscriptenFocusEvent* )
+{
+  bool isActivated = false;
+#if defined(__EMSCRIPTEN__)
+  if (theEventType != EMSCRIPTEN_EVENT_FOCUS
+   && theEventType != EMSCRIPTEN_EVENT_FOCUSIN // about to receive focus
+   && theEventType != EMSCRIPTEN_EVENT_FOCUSOUT)
+  {
+    return false;
+  }
+  isActivated = theEventType == EMSCRIPTEN_EVENT_FOCUS;
+#else
+  (void )theEventType;
+#endif
+  theListener.ProcessFocus (isActivated);
+  return true;
+}
+
 // =======================================================================
 // function : MouseButtonsFromNative
 // purpose  :

src/Wasm/Wasm_Window.hxx

@@ -28,6 +28,7 @@ struct EmscriptenWheelEvent;
 struct EmscriptenTouchEvent;
 struct EmscriptenKeyboardEvent;
 struct EmscriptenUiEvent;
+struct EmscriptenFocusEvent;
 
 //! This class defines WebAssembly window (HTML5 canvas) intended for creation of OpenGL (WebGL) context.
 //!
@@ -175,6 +176,14 @@ public:
   Standard_EXPORT virtual bool ProcessUiEvent (Aspect_WindowInputListener& theListener,
                                                int theEventType, const EmscriptenUiEvent* theEvent);
 
+  //! Process a focus input change message.
+  //! @param[in,out] theListener listener to redirect message
+  //! @param[in] theEventType message type to process
+  //! @param[in] theEvent message to process
+  //! @return TRUE if message has been processed
+  Standard_EXPORT virtual bool ProcessFocusEvent (Aspect_WindowInputListener& theListener,
+                                                  int theEventType, const EmscriptenFocusEvent* theEvent);
+
 protected:
 
   TCollection_AsciiString  myCanvasId;