Skip to content

Feat: New Web Based UI Framework #397

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

Merged
merged 20 commits into from
Aug 10, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
6 changes: 1 addition & 5 deletions CMake/Common.cmake
Original file line number Diff line number Diff line change
Expand Up @@ -31,13 +31,9 @@ add_definitions(-DCOMPILER_GCC=$<IF:$<CXX_COMPILER_ID:GNU>,1,0>)

add_definitions(-DBUILD_EDITOR=$<BOOL:BUILD_EDITOR>)

if (${CMAKE_SYSTEM_NAME} STREQUAL "Darwin")
string(REGEX REPLACE ".*MacOSX([0-9]+\\.[0-9]+).*" "\\1" MACOS_SDK_VERSION ${CMAKE_OSX_SYSROOT})
add_definitions(-DMACOS_SDK_VERSION=${MACOS_SDK_VERSION})
endif ()

if (${MSVC})
add_compile_options(/bigobj)
add_definitions(-D_SILENCE_ALL_MS_EXT_DEPRECATION_WARNINGS=1)
add_definitions(-DWIN32_LEAN_AND_MEAN)
add_definitions(-DNOMINMAX=1)
endif ()
118 changes: 83 additions & 35 deletions Editor/CMakeLists.txt
Original file line number Diff line number Diff line change
@@ -1,16 +1,21 @@
set(CMAKE_PREFIX_PATH ${QT_LIB_PREFIX})
find_package(
Qt6 ${QT_VERSION}
COMPONENTS Core Gui Widgets Quick
COMPONENTS Core Gui Widgets Quick WebEngineWidgets
REQUIRED
)

qt_standard_project_setup(REQUIRES ${QT_VERSION})

if (${CMAKE_SYSTEM_NAME} STREQUAL "Darwin")
set(PLATFORM_EXECUTABLE_HINT MACOSX_BUNDLE)
endif ()

file(GLOB_RECURSE SOURCES Src/*.cpp)
qt_add_executable(Editor ${SOURCES})
qt_add_executable(Editor ${PLATFORM_EXECUTABLE_HINT} ${SOURCES})
target_include_directories(Editor PRIVATE Include)
target_link_libraries(Editor PRIVATE Core RHI Runtime Qt6::Core Qt6::Gui Qt6::Widgets Qt6::Quick)
target_include_directories(Editor PRIVATE ${CPP_HTTP_LIB_SOURCE_DIR})
target_link_libraries(Editor PRIVATE Core RHI Runtime Qt6::Core Qt6::Gui Qt6::Widgets Qt6::Quick Qt6::WebEngineWidgets)

if (${CMAKE_SYSTEM_NAME} STREQUAL "Windows")
set(PLATFORM_DEP_TARGET RHI-DirectX12 RHI-Vulkan)
Expand All @@ -21,10 +26,26 @@ add_dependencies(Editor ${PLATFORM_DEP_TARGET})

if (${CMAKE_SYSTEM_NAME} STREQUAL "Windows")
set(QT_WIN_DEPLOY_EXECUTABLE ${QT_LIB_PREFIX}/bin/windeployqt.exe)
set(QT_BUILDIN_QML_DIRECTORY ${QT_LIB_PREFIX}/qml)
add_custom_command(
TARGET Editor POST_BUILD
COMMAND ${QT_WIN_DEPLOY_EXECUTABLE} $<TARGET_FILE:Editor> --qmldir ${QT_BUILDIN_QML_DIRECTORY} --verbose 0
# ++ QT 6.9.1 Temporal Fix Start
# #see https://bugreports.qt.io/browse/QTBUG-137542
COMMAND ${CMAKE_COMMAND} -E copy_if_different ${QT_LIB_PREFIX}/resources/qtwebengine_devtools_resources.pak ${QT_LIB_PREFIX}/resources/qtwebengine_devtools_resources.debug.pak
COMMAND ${CMAKE_COMMAND} -E copy_if_different ${QT_LIB_PREFIX}/resources/qtwebengine_resources.pak ${QT_LIB_PREFIX}/resources/qtwebengine_resources.debug.pak
COMMAND ${CMAKE_COMMAND} -E copy_if_different ${QT_LIB_PREFIX}/resources/qtwebengine_resources_100p.pak ${QT_LIB_PREFIX}/resources/qtwebengine_resources_100p.debug.pak
COMMAND ${CMAKE_COMMAND} -E copy_if_different ${QT_LIB_PREFIX}/resources/qtwebengine_resources_200p.pak ${QT_LIB_PREFIX}/resources/qtwebengine_resources_200p.debug.pak
COMMAND ${CMAKE_COMMAND} -E copy_if_different ${QT_LIB_PREFIX}/resources/qtwebengine_devtools_resources.pak ${CMAKE_RUNTIME_OUTPUT_DIRECTORY}/resources/qtwebengine_devtools_resources.pak
COMMAND ${CMAKE_COMMAND} -E copy_if_different ${QT_LIB_PREFIX}/resources/qtwebengine_resources.pak ${CMAKE_RUNTIME_OUTPUT_DIRECTORY}/resources/qtwebengine_resources.pak
COMMAND ${CMAKE_COMMAND} -E copy_if_different ${QT_LIB_PREFIX}/resources/qtwebengine_resources_100p.pak ${CMAKE_RUNTIME_OUTPUT_DIRECTORY}/resources/qtwebengine_resources_100p.pak
COMMAND ${CMAKE_COMMAND} -E copy_if_different ${QT_LIB_PREFIX}/resources/qtwebengine_resources_200p.pak ${CMAKE_RUNTIME_OUTPUT_DIRECTORY}/resources/qtwebengine_resources_200p.pak
# -- QT 6.9.1 Temporal Fix End
COMMAND ${QT_WIN_DEPLOY_EXECUTABLE} $<TARGET_FILE:Editor>
)
elseif (${CMAKE_SYSTEM_NAME} STREQUAL "Darwin")
set(QT_MAC_DEPLOY_EXECUTABLE ${QT_LIB_PREFIX}/bin/macdeployqt)
add_custom_command(
TARGET Editor POST_BUILD
COMMAND ${QT_MAC_DEPLOY_EXECUTABLE} ${CMAKE_RUNTIME_OUTPUT_DIRECTORY}/Editor.app $<IF:$<CONFIG:Debug>,-no-strip,>
)
endif ()

Expand All @@ -47,38 +68,65 @@ AddResourcesCopyCommand(
)
# ---- end shaders -----------------------------------------------------------------------------------

# ---- begin web project -----------------------------------------------------------------------------
set(NODEJS_HOME ${3RD_SOURCE_DIR}/Nodejs-${CMAKE_SYSTEM_NAME}-${NODEJS_VERSION})
if (${CMAKE_SYSTEM_NAME} STREQUAL "Windows")
set(NODEJS_PATH ${NODEJS_HOME})
set(NPM_EXECUTABLE npm.cmd)
elseif (${CMAKE_SYSTEM_NAME} STREQUAL "Darwin")
set(NODEJS_BIN_PATH ${NODEJS_HOME}/bin)
set(NODEJS_MODULES_PATH ${NODEJS_HOME}/lib/node_modules)
file(REMOVE ${NODEJS_BIN_PATH}/corepack)
file(REMOVE ${NODEJS_BIN_PATH}/npm)
file(REMOVE ${NODEJS_BIN_PATH}/npx)
execute_process(
COMMAND ln -s ${NODEJS_MODULES_PATH} ${NODEJS_BIN_PATH}/node_modules
RESULT_VARIABLE LINK_RESULT
OUTPUT_VARIABLE LINK_OUTPUT
ERROR_VARIABLE LINK_ERROR
)
execute_process(
COMMAND ln -s ${NODEJS_MODULES_PATH}/npm/bin/npm ${NODEJS_BIN_PATH}/npm
RESULT_VARIABLE LINK_RESULT
OUTPUT_VARIABLE LINK_OUTPUT
ERROR_VARIABLE LINK_ERROR
)
execute_process(
COMMAND ln -s ${NODEJS_MODULES_PATH}/npm/bin/npx ${NODEJS_BIN_PATH}/npx
RESULT_VARIABLE LINK_RESULT
OUTPUT_VARIABLE LINK_OUTPUT
ERROR_VARIABLE LINK_ERROR
)
set(NODEJS_PATH "$ENV{PATH}:${NODEJS_BIN_PATH}")
set(NPM_EXECUTABLE npm)
else ()
message(FATAL_ERROR "Unsupported OS")
endif ()

# ---- begin qml -------------------------------------------------------------------------------------
set(EDITOR_QML_ROOT ${CMAKE_CURRENT_SOURCE_DIR}/Qml)
set(EDITOR_RESOURCE_ROOT ${CMAKE_CURRENT_SOURCE_DIR}/Resource)
get_filename_component(EDITOR_RESOURCE_ROOT_ABSOLUTE ${EDITOR_RESOURCE_ROOT} ABSOLUTE)

file(GLOB QML_SOURCES ${EDITOR_QML_ROOT}/*.qml)

list(
APPEND SINGLETON_QML_SOURCES
ETheme.qml)
target_compile_definitions(Editor PRIVATE -DSINGLETON_QML_SOURCES="${SINGLETON_QML_SOURCES}")

# QML only support placed in root dir
foreach (QML_SOURCE ${QML_SOURCES})
get_filename_component(ALIAS ${QML_SOURCE} NAME)
set_source_files_properties(${QML_SOURCE} PROPERTIES QT_RESOURCE_ALIAS ${ALIAS})
if (${ALIAS} IN_LIST SINGLETON_QML_SOURCES)
set_source_files_properties(${QML_SOURCE} PROPERTIES QT_QML_SINGLETON_TYPE true)
endif ()
endforeach ()
message("Perform web project npm install......")
execute_process(
COMMAND ${CMAKE_COMMAND} -E env PATH=${NODEJS_PATH} ${NPM_EXECUTABLE} install --no-fund --registry=https://registry.npmmirror.com
WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}/Web
RESULT_VARIABLE NPM_INSTALL_RESULT
OUTPUT_VARIABLE NPM_INSTALL_OUTPUT
ERROR_VARIABLE NPM_INSTALL_ERROR
)
if (${NPM_INSTALL_RESULT} STREQUAL "0")
message(${NPM_INSTALL_OUTPUT})
else ()
message(FATAL_ERROR ${NPM_INSTALL_ERROR})
endif ()

add_custom_command(
TARGET Editor POST_BUILD
COMMAND ${CMAKE_COMMAND} -E copy_directory_if_different ${EDITOR_RESOURCE_ROOT_ABSOLUTE} ${CMAKE_RUNTIME_OUTPUT_DIRECTORY}/../Resource
add_custom_target(
Editor.Web
COMMAND ${CMAKE_COMMAND} -E env PATH=${NODEJS_PATH} ${NPM_EXECUTABLE} run build
WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}/Web
VERBATIM
)
add_dependencies(Editor Editor.Web)

qt_add_qml_module(
Editor
NO_CACHEGEN
URI editor
QML_FILES ${QML_SOURCES}
OUTPUT_DIRECTORY ${CMAKE_BINARY_DIR}/Generated/QmlModule
add_custom_command(
TARGET Editor.Web POST_BUILD
COMMAND ${CMAKE_COMMAND} -E copy_directory_if_different ${CMAKE_CURRENT_SOURCE_DIR}/Web/dist $<TARGET_FILE_DIR:Editor>/Web
)
# ---- end qml ---------------------------------------------------------------------------------------
# ---- end web project -------------------------------------------------------------------------------
37 changes: 0 additions & 37 deletions Editor/Include/Editor/QmlEngine.h

This file was deleted.

24 changes: 24 additions & 0 deletions Editor/Include/Editor/WebUIServer.h
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
//
// Created by johnk on 2025/8/8.
//

#pragma once

#include <httplib.h>

#include <Common/Concurrent.h>
#include <Common/Memory.h>

namespace Editor {
class WebUIServer {
public:
static WebUIServer& Get();

void Start();
void Stop();

private:
Common::UniquePtr<Common::NamedThread> serverThread;
Common::UniquePtr<httplib::Server> server;
};
}
8 changes: 4 additions & 4 deletions Editor/Include/Editor/Widget/ProjectHub.h
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
//
// Created by johnk on 2024/6/23.
// Created by johnk on 2025/8/3.
//

#pragma once

#include <Editor/Widget/QmlWidget.h>
#include <Editor/Widget/WebWidget.h>

namespace Editor {
class ProjectHub final : public QmlWidget {
class ProjectHub final : public WebWidget {
Q_OBJECT

public:
ProjectHub();
explicit ProjectHub(QWidget* inParent = nullptr);
};
}
29 changes: 0 additions & 29 deletions Editor/Include/Editor/Widget/QmlWidget.h

This file was deleted.

19 changes: 19 additions & 0 deletions Editor/Include/Editor/Widget/WebWidget.h
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
//
// Created by johnk on 2025/8/9.
//

#pragma once

#include <QWebEngineView>

namespace Editor {
class WebWidget : public QWebEngineView {
Q_OBJECT

public:
explicit WebWidget(QWidget* inParent = nullptr);
~WebWidget() override;

void Load(const std::string& inUrl);
};
}
16 changes: 0 additions & 16 deletions Editor/Include/Editor/Widget/WidgetSamples.h

This file was deleted.

81 changes: 0 additions & 81 deletions Editor/Qml/EButton.qml

This file was deleted.

Loading
Loading