Merge pull request #411 from FlyAndNotDown/master

Feat: Misc Update

Author: FlyAndNotDown

Editor/Include/Editor/Widget/WebWidget.h

@@ -6,8 +6,20 @@
 
 #include <QWebChannel>
 #include <QWebEngineView>
+#include <QWebEnginePage>
 
 namespace Editor {
+    class WebPage : public QWebEnginePage {
+        Q_OBJECT
+
+    public:
+        explicit WebPage(QWidget* inParent = nullptr);
+        ~WebPage() override;
+
+    protected:
+        void javaScriptConsoleMessage(JavaScriptConsoleMessageLevel level, const QString& message, int lineNumber, const QString& sourceID) override;
+    };
+
     class WebWidget : public QWebEngineView {
         Q_OBJECT
 

Editor/Resource/ProjectTemplates/3D/CMakeLists.txt

@@ -2,6 +2,9 @@
 // Created by johnk on 2025/8/8.
 //
 
+#include <QtEnvironmentVariables>
+#include <QByteArrayView>
+
 #include <Core/Cmdline.h>
 #include <Core/Log.h>
 #include <Core/Paths.h>
@@ -19,6 +22,14 @@ static Core::CmdlineArgValue<uint32_t> caWebUIDevServerPort(
     "webUIDevServerPort", "-webUIDevServerPort", 5173,
     "Port of web ui dev server, which works only when dev mode enabled");
 
+static Core::CmdlineArgValue<bool> caWebUIDebug(
+    "webUIDebug", "-webUIDebug", false,
+    "Whether to enable web ui debug (you can attach debugger to qt web engine process).");
+
+static Core::CmdlineArgValue<uint32_t> caWebUIRemoteDebugPort(
+    "webUIRemoveDebugPort", "-webUIRemoveDebugPort", 5174,
+    "Port of web ui debug port, you can attach to the url printed in log to create debug process.");
+
 namespace Editor {
     WebUIServer& WebUIServer::Get()
     {
@@ -60,6 +71,11 @@ namespace Editor {
 
         baseUrl = std::format("http://localhost:{}", serverPort);
         LogInfo(WebUI, "{} web ui server listening on {}", serverMode, baseUrl);
+
+        if (caWebUIDebug.GetValue()) {
+            const auto flags = std::format("--remote-debugging-port={}", caWebUIRemoteDebugPort.GetValue());
+            qputenv("QTWEBENGINE_CHROMIUM_FLAGS", QByteArrayView(flags.c_str(), static_cast<qsizetype>(flags.length())));
+        }
     }
 
     void WebUIServer::Stop()

…ource/ProjectTemplates/2D/CMakeLists.txt …/ProjectTemplates/Default/CMakeLists.txtEditor/Resource/ProjectTemplates/2D/CMakeLists.txt renamed to Editor/Resource/ProjectTemplates/Default/CMakeLists.txt Editor/Resource/ProjectTemplates/2D/CMakeLists.txt renamed to Editor/Resource/ProjectTemplates/Default/CMakeLists.txt

@@ -5,13 +5,38 @@
 #include <Editor/Widget/WebWidget.h>
 #include <Editor/Widget/moc_WebWidget.cpp>
 #include <Core/Cmdline.h>
+#include <Core/Log.h>
 #include <Editor/WebUIServer.h>
 
 namespace Editor {
+    WebPage::WebPage(QWidget* inParent)
+        : QWebEnginePage(inParent)
+    {
+    }
+
+    WebPage::~WebPage() = default;
+
+    void WebPage::javaScriptConsoleMessage(JavaScriptConsoleMessageLevel level, const QString& message, int lineNumber, const QString& sourceID)
+    {
+        if (level == InfoMessageLevel)
+        {
+            LogInfo(WebUIJavaScript, "{}", message.toStdString());
+        }
+        else if (level == WarningMessageLevel)
+        {
+            LogWarning(WebUIJavaScript, "{}", message.toStdString());
+        }
+        else if (level == ErrorMessageLevel)
+        {
+            LogError(WebUIJavaScript, "{}", message.toStdString());
+        }
+    }
+
     WebWidget::WebWidget(QWidget* inParent)
         : QWebEngineView(inParent)
     {
         webChannel = new QWebChannel(this);
+        setPage(new WebPage(this));
         page()->setWebChannel(webChannel);
     }
 

Editor/Src/WebUIServer.cpp

@@ -100,11 +100,25 @@ export default defineConfig([
       "react-hooks/exhaustive-deps": "off",
       "jsx-a11y/click-events-have-key-events": "warn",
       "jsx-a11y/interactive-supports-focus": "warn",
-      "prettier/prettier": "warn",
+      "prettier/prettier": [
+        "warn",
+        {
+          "endOfLine": "auto",
+          "singleQuote": true,
+          "jsxSingleQuote": true,
+          "semi": true,
+          "printWidth": 200,
+          "tabWidth": 2,
+          "useTabs": false,
+          "objectWrap": "collapse",
+          "bracketSameLine": true,
+          "arrowParens": "always",
+          "singleAttributePerLine": false,
+        }
+      ],
       "no-unused-vars": "off",
       "unused-imports/no-unused-vars": "off",
       "unused-imports/no-unused-imports": "warn",
-
       "@typescript-eslint/no-unused-vars": [
         "warn",
         {
@@ -113,7 +127,6 @@ export default defineConfig([
           argsIgnorePattern: "^_.*?$",
         },
       ],
-
       "import/order": [
         "warn",
         {
@@ -136,12 +149,10 @@ export default defineConfig([
             },
           ],
 
-          "newlines-between": "always",
+          "newlines-between": "never",
         },
       ],
-
       "react/self-closing-comp": "warn",
-
       "react/jsx-sort-props": [
         "warn",
         {
@@ -150,26 +161,7 @@ export default defineConfig([
           noSortAlphabetically: false,
           reservedFirst: true,
         },
-      ],
-
-      "padding-line-between-statements": [
-        "warn",
-        {
-          blankLine: "always",
-          prev: "*",
-          next: "return",
-        },
-        {
-          blankLine: "always",
-          prev: ["const", "let", "var"],
-          next: "*",
-        },
-        {
-          blankLine: "any",
-          prev: ["const", "let", "var"],
-          next: ["const", "let", "var"],
-        },
-      ],
+      ]
     },
   },
 ]);

Editor/Src/Widget/WebWidget.cpp

@@ -4,7 +4,7 @@ import ProjectHubPage from '@/pages/project-hub';
 function App() {
   return (
     <Routes>
-      <Route element={<ProjectHubPage/>} path='/project-hub'/>
+      <Route element={<ProjectHubPage />} path='/project-hub' />
     </Routes>
   );
 }

Editor/Web/eslint.config.mjs

@@ -1,9 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
-
-import App from './App.tsx';
 import { Provider } from './provider.tsx';
+import App from './App.tsx';
 import '@/styles/globals.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(

Editor/Web/src/App.tsx

@@ -1,15 +1,15 @@
 import { useEffect, useState } from 'react';
-import { QWebChannel } from '@/qwebchannel'
 import { Tabs, Tab } from '@heroui/tabs';
 import { User } from '@heroui/user';
 import { Form } from '@heroui/form';
-import {Button, PressEvent} from '@heroui/button';
+import { Button, PressEvent } from '@heroui/button';
 import { Input } from '@heroui/input';
 import { Chip } from '@heroui/chip';
 import { Listbox, ListboxItem } from '@heroui/listbox';
 import { Avatar } from '@heroui/avatar';
-import { ScrollShadow } from "@heroui/scroll-shadow";
+import { ScrollShadow } from '@heroui/scroll-shadow';
 import { Select, SelectItem } from '@heroui/react';
+import { QWebChannel } from '@/qwebchannel';
 
 interface RecentProjectInfo {
   name: string;
@@ -27,78 +27,86 @@ export default function ProjectHubPage() {
   const [projectTemplates, setProjectTemplates] = useState(Array<ProjectTemplateInfo>);
 
   useEffect(() => {
-    new QWebChannel(window.qt.webChannelTransport, (channel: QWebChannel) : void => {
+    new QWebChannel(window.qt.webChannelTransport, (channel: QWebChannel): void => {
       window.backend = channel.objects.backend;
       setEngineVersion(window.backend.engineVersion);
       setRecentProjects(window.backend.recentProjects);
       setProjectTemplates(window.backend.projectTemplates);
-    })
+    });
   }, []);
 
-  function onCreateProject() : void
-  {
+  function onCreateProject(): void {
+    // TODO
+    console.error("onCreateProject()");
     window.backend.CreateProject();
   }
 
-  function onOpenProject(e: PressEvent) : void
-  {
+  function onOpenProject(e: PressEvent): void {
     // TODO
     const index = parseInt(e.target.getAttribute('data-key') as string);
     console.error('onOpenProject:', index);
   }
 
+  async function onBrowseProjectPath(): Promise<void> {
+    // TODO
+    const dirHandle = await window.showDirectoryPicker({ startIn: 'desktop' });
+    console.error(dirHandle);
+  }
+
   return (
     <div className='h-screen p-6'>
       <div className='mb-4'>
         <User
-          avatarProps={{
-            src: '/logo.png'
-          }}
+          avatarProps={{ src: '/logo.png' }}
           description={
             <div className='mt-1'>
-              <Chip className='ml-1' size='sm' color='secondary' variant='flat'>{engineVersion}</Chip>
+              <Chip className='ml-1' color='secondary' size='sm' variant='flat'>
+                {engineVersion}
+              </Chip>
             </div>
           }
-          name='Explosion Game Engine'/>
+          name='Explosion Game Engine'
+        />
       </div>
 
       <Tabs isVertical={true}>
-        <Tab title='Recently Projects' className='w-full pr-6'>
-          <ScrollShadow
-            hideScrollBar
-            className='h-[450px]'
-            size={60}>
-            <Listbox
-              items={recentProjects}
-              variant='flat'>
+        <Tab className='w-full pr-6' title='Recently Projects'>
+          <ScrollShadow hideScrollBar className='h-[450px]' size={60}>
+            <Listbox items={recentProjects} variant='flat'>
               {recentProjects.map((item, i) => (
-                  <ListboxItem key={i} onPress={onOpenProject} textValue={item.name}>
-                    <div className='flex gap-2 items-center'>
-                      <Avatar alt={item.name} className='shrink-0' size='sm' name={item.name} />
-                      <div className='flex flex-col'>
-                        <span className='text-small'>{item.name}</span>
-                        <span className='text-tiny text-default-400'>{item.path}</span>
-                      </div>
+                <ListboxItem key={i} textValue={item.name} onPress={onOpenProject}>
+                  <div className='flex gap-2 items-center'>
+                    <Avatar alt={item.name} className='shrink-0' name={item.name} size='sm' />
+                    <div className='flex flex-col'>
+                      <span className='text-small'>{item.name}</span>
+                      <span className='text-tiny text-default-400'>{item.path}</span>
                     </div>
-                  </ListboxItem>
+                  </div>
+                </ListboxItem>
               ))}
             </Listbox>
           </ScrollShadow>
         </Tab>
-        <Tab title='New Project' className='w-full pr-6'>
+        <Tab className='w-full pr-6' title='New Project'>
           <Form className='w-full ml-4'>
-            <Input fullWidth isRequired label='Project Name' labelPlacement='outside' placeholder='HelloExplosion'/>
-            <Input fullWidth isRequired label='Project Description' labelPlacement='outside' placeholder='A simple explosion game project.'/>
-            <Input fullWidth isRequired label='Project Path' labelPlacement='outside' placeholder='/path/to/your/project'/>
-            <Select fullWidth isRequired label='Project Template' labelPlacement='outside' defaultSelectedKeys={['0']}>
+            <Input fullWidth isRequired label='Project Name' labelPlacement='outside' placeholder='HelloExplosion' />
+            <div className='flex w-full'>
+              <Input isRequired label='Project Path' labelPlacement='outside' placeholder='/path/to/your/project' />
+              <Button className='ml-2 mt-6' onPress={() => onBrowseProjectPath()}>
+                Browse
+              </Button>
+            </div>
+            <Select fullWidth isRequired defaultSelectedKeys={['0']} label='Project Template' labelPlacement='outside'>
               {projectTemplates.map((item, i) => (
                 <SelectItem key={i}>{item.name}</SelectItem>
               ))}
             </Select>
-            <Button color='primary' onPress={onCreateProject}>Create</Button>
+            <Button color='primary' onPress={onCreateProject}>
+              Create
+            </Button>
           </Form>
         </Tab>
       </Tabs>
     </div>
   );
-};
+}

Editor/Web/src/main.tsx

@@ -1,5 +1,4 @@
 import type { NavigateOptions } from 'react-router-dom';
-
 import { HeroUIProvider } from '@heroui/system';
 import { useHref, useNavigate } from 'react-router-dom';