[Emscripten, ImGui]: Fixed resizing of canvas

Author: MikhailGorobets

Imgui/src/ImGuiImplEmscripten.cpp

@@ -90,8 +90,10 @@ void ImGuiImplEmscripten::Render(IDeviceContext* pCtx)
 
 bool ImGuiImplEmscripten::OnMouseEvent(int32_t EventType, const EmscriptenMouseEvent* Event)
 {
+    auto DevicePixelRatio = emscripten_get_device_pixel_ratio();
+
     auto& io        = ImGui::GetIO();
-    io.MousePos     = ImVec2(Event->targetX, Event->targetY);
+    io.MousePos     = ImVec2(Event->targetX * DevicePixelRatio, Event->targetY * DevicePixelRatio);
     io.MouseDown[0] = Event->buttons & 1;
     io.MouseDown[1] = Event->buttons & 2;
     io.MouseDown[2] = Event->buttons & 4;

NativeApp/CMakeLists.txt

@@ -391,6 +391,7 @@ elseif(PLATFORM_TVOS)
 
 elseif(PLATFORM_EMSCRIPTEN)
     set(SOURCE 
+        src/Emscripten/EmscriptenAppBase.cpp
         src/Emscripten/EmscriptenMain.cpp
     )
     set(INCLUDE

NativeApp/include/Emscripten/EmscriptenAppBase.hpp

@@ -1,5 +1,5 @@
 /*
- *  Copyright 2019-2022 Diligent Graphics LLC
+ *  Copyright 2019-2024 Diligent Graphics LLC
  *
  *  Licensed under the Apache License, Version 2.0 (the "License");
  *  you may not use this file except in compliance with the License.
@@ -40,6 +40,8 @@ class EmscriptenAppBase : public AppBase
 public:
     using AppBase::Update;
 
+    void Update();
+
     virtual void OnMouseEvent(int32_t EventType, const EmscriptenMouseEvent* Event) = 0;
 
     virtual void OnWheelEvent(int32_t EventType, const EmscriptenWheelEvent* Event) = 0;
@@ -49,6 +51,10 @@ class EmscriptenAppBase : public AppBase
     virtual void OnWindowCreated(const char* pCanvasID,
                                  int32_t     WindowWidth,
                                  int32_t     WindowHeight) = 0;
+
+protected:
+    Timer  m_Timer;
+    double m_PrevTime = 0.0;
 };
 
 } // namespace Diligent

NativeApp/src/Emscripten/EmscriptenAppBase.cpp

@@ -0,0 +1,38 @@
+/*
+ *  Copyright 2024 Diligent Graphics LLC
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ *  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ *  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF ANY PROPRIETARY RIGHTS.
+ *
+ *  In no event and under no legal theory, whether in tort (including negligence), 
+ *  contract, or otherwise, unless required by applicable law (such as deliberate 
+ *  and grossly negligent acts) or agreed to in writing, shall any Contributor be
+ *  liable for any damages, including any direct, indirect, special, incidental, 
+ *  or consequential damages of any character arising as a result of this License or 
+ *  out of the use or inability to use the software (including but not limited to damages 
+ *  for loss of goodwill, work stoppage, computer failure or malfunction, or any and 
+ *  all other commercial damages or losses), even if such Contributor has been advised 
+ *  of the possibility of such damages.
+ */
+
+#include "EmscriptenAppBase.hpp"
+
+void Diligent::EmscriptenAppBase::Update()
+{
+    auto CurrTime    = m_Timer.GetElapsedTime();
+    auto ElapsedTime = CurrTime - m_PrevTime;
+    m_PrevTime       = CurrTime;
+
+    if (IsReady())
+    {
+        Update(CurrTime, ElapsedTime);
+        Render();
+    }
+}

NativeApp/src/Emscripten/EmscriptenMain.cpp

@@ -1,5 +1,5 @@
 /*
- *  Copyright 2019-2022 Diligent Graphics LLC
+ *  Copyright 2019-2024 Diligent Graphics LLC
  *
  *  Licensed under the Apache License, Version 2.0 (the "License");
  *  you may not use this file except in compliance with the License.
@@ -31,69 +31,75 @@
 #include "NativeAppBase.hpp"
 #include "Timer.hpp"
 
-std::unique_ptr<Diligent::NativeAppBase> g_pTheApp  = nullptr;
-Diligent::Timer                          g_Timer    = {};
-double                                   g_PrevTime = 0.0;
 
-void EventLoopCallback()
+struct NativeAppCallbackData
 {
-    auto CurrTime    = g_Timer.GetElapsedTime();
-    auto ElapsedTime = CurrTime - g_PrevTime;
-    g_PrevTime       = CurrTime;
+    Diligent::NativeAppBase* pApplication = nullptr;
+    const char*              CanvasID     = nullptr;
+};
 
-    if (g_pTheApp->IsReady())
+void EventLoopCallback(void* pUserData)
+{
+    auto pAppUserData = static_cast<NativeAppCallbackData*>(pUserData);
+
+    if (pAppUserData->pApplication->IsReady())
     {
-        g_pTheApp->Update(CurrTime, ElapsedTime);
-        g_pTheApp->Render();
+        pAppUserData->pApplication->Update();
+        pAppUserData->pApplication->Render();
     }
 }
 
 EM_BOOL EventResizeCallback(int32_t EventType, const EmscriptenUiEvent* Event, void* pUserData)
 {
-    if (g_pTheApp->IsReady())
-        g_pTheApp->WindowResize(Event->documentBodyClientWidth, Event->documentBodyClientHeight);
+    auto pAppUserData = static_cast<NativeAppCallbackData*>(pUserData);
+
+    int32_t CanvasWidth  = 0;
+    int32_t CanvasHeight = 0;
+    emscripten_get_canvas_element_size(pAppUserData->CanvasID, &CanvasWidth, &CanvasHeight);
+    if (pAppUserData->pApplication->IsReady())
+        pAppUserData->pApplication->WindowResize(CanvasWidth, CanvasHeight);
     return true;
 }
 
 EM_BOOL EventMouseCallback(int32_t EventType, const EmscriptenMouseEvent* Event, void* pUserData)
 {
-    g_pTheApp->OnMouseEvent(EventType, Event);
+    auto pAppUserData = static_cast<NativeAppCallbackData*>(pUserData);
+    pAppUserData->pApplication->OnMouseEvent(EventType, Event);
     return true;
 }
 
 EM_BOOL EventWheelCallback(int32_t EventType, const EmscriptenWheelEvent* Event, void* pUserData)
 {
-    g_pTheApp->OnWheelEvent(EventType, Event);
+    auto pAppUserData = static_cast<NativeAppCallbackData*>(pUserData);
+    pAppUserData->pApplication->OnWheelEvent(EventType, Event);
     return true;
 }
 
 EM_BOOL EventKeyCallback(int32_t EventType, const EmscriptenKeyboardEvent* Event, void* pUserData)
 {
-    g_pTheApp->OnKeyEvent(EventType, Event);
+    auto pAppUserData = static_cast<NativeAppCallbackData*>(pUserData);
+    pAppUserData->pApplication->OnKeyEvent(EventType, Event);
     return true;
 }
 
-
 int main(int argc, char* argv[])
 {
-    g_pTheApp.reset(Diligent::CreateApplication());
-
-    int32_t     CanvasWidth  = 0;
-    int32_t     CanvasHeight = 0;
-    const char* CanvasID     = "#canvas";
-
-    emscripten_get_canvas_element_size(CanvasID, &CanvasWidth, &CanvasHeight);
-    emscripten_set_mousedown_callback(CanvasID, nullptr, true, EventMouseCallback);
-    emscripten_set_mouseup_callback(CanvasID, nullptr, true, EventMouseCallback);
-    emscripten_set_mousemove_callback(CanvasID, nullptr, true, EventMouseCallback);
-    emscripten_set_wheel_callback(CanvasID, nullptr, true, EventWheelCallback);
-    emscripten_set_keydown_callback(CanvasID, nullptr, true, EventKeyCallback);
-    emscripten_set_keyup_callback(CanvasID, nullptr, true, EventKeyCallback);
-    emscripten_set_keypress_callback(CanvasID, nullptr, true, EventKeyCallback);
-    emscripten_set_resize_callback(CanvasID, nullptr, true, EventResizeCallback);
-
-    g_pTheApp->OnWindowCreated(CanvasID, CanvasWidth, CanvasHeight);
-    emscripten_set_main_loop(EventLoopCallback, 0, true);
-
-    g_pTheApp.reset();
+    std::unique_ptr<Diligent::NativeAppBase> pApplication{Diligent::CreateApplication()};
+
+    NativeAppCallbackData AppUserData{pApplication.get(), "#canvas"};
+
+    int32_t CanvasWidth  = 0;
+    int32_t CanvasHeight = 0;
+    emscripten_get_canvas_element_size(AppUserData.CanvasID, &CanvasWidth, &CanvasHeight);
+    emscripten_set_mousedown_callback(AppUserData.CanvasID, &AppUserData, true, EventMouseCallback);
+    emscripten_set_mouseup_callback(AppUserData.CanvasID, &AppUserData, true, EventMouseCallback);
+    emscripten_set_mousemove_callback(AppUserData.CanvasID, &AppUserData, true, EventMouseCallback);
+    emscripten_set_wheel_callback(AppUserData.CanvasID, &AppUserData, true, EventWheelCallback);
+    emscripten_set_keydown_callback(AppUserData.CanvasID, &AppUserData, true, EventKeyCallback);
+    emscripten_set_keyup_callback(AppUserData.CanvasID, &AppUserData, true, EventKeyCallback);
+    emscripten_set_keypress_callback(AppUserData.CanvasID, &AppUserData, true, EventKeyCallback);
+    emscripten_set_resize_callback(EMSCRIPTEN_EVENT_TARGET_WINDOW, &AppUserData, true, EventResizeCallback);
+    pApplication->OnWindowCreated(AppUserData.CanvasID, CanvasWidth, CanvasHeight);
+
+    emscripten_set_main_loop_arg(EventLoopCallback, &AppUserData, 0, true);
 }