Add electron minthread

config/webpack.common.js

@@ -58,10 +58,6 @@ const Entry = () => ({
         import: source("./GLRender/ClassicRenderer.ts")
     },
 
-    livingTogether: {
-        import: source("./livingTogether.ts")
-    },
-
     LaboratoryPage: {
         import: source("./Page/Laboratory/Laboratory.tsx"),
         dependOn: ["Model", "GLRender"]
@@ -72,6 +68,11 @@ const Entry = () => ({
         dependOn: ["Model", "GLRender"]
     },
 
+    SimulatorDesktop: {
+        import: source("./Page/SimulatorDesktop/SimulatorDesktop.tsx"),
+        dependOn: ["Model", "GLRender"]
+    },
+
     Service: {
         import: source("./Service/Service.ts")
     },
@@ -79,7 +80,12 @@ const Entry = () => ({
     ServiceRunner: {
         import: source("./Service/Runner.ts"),
         dependOn: ["Service"]
-    }
+    },
+
+    Electron: {
+        import: source("./Electron/Electron.ts"),
+        dependOn: ["Service"]
+    },
 });
 
 /**

config/webpack.desktop.js

@@ -0,0 +1,56 @@
+const { 
+    Entry, Output, resolve, build,
+    TypeScriptRules, ScssRules,
+    HTMLPage, CssPlugin, AutoFixCssPlugin
+} = require("./webpack.common");
+
+const AllEntry = Entry();
+
+module.exports = (env) => {
+    
+    const config = {
+
+        entry: {
+            GLRender: AllEntry.GLRender,
+            Model: AllEntry.Model,
+            SimulatorDesktop: AllEntry.SimulatorDesktop
+        },
+
+        output: Output("[name].[contenthash].js"),
+        devtool: 'source-map',
+        mode: "development",
+        resolve: resolve(),
+
+        optimization: {
+            runtimeChunk: 'single',
+            chunkIds: 'named',
+            moduleIds: 'named',
+            splitChunks: {
+                chunks: 'all',
+                minSize: 1000
+            }
+        },
+
+        module: {
+            rules: [
+                TypeScriptRules(),
+                ScssRules()
+            ]
+        },
+        
+        plugins: [
+            HTMLPage("index.html", "Living Together | Simulator"),
+            CssPlugin(),
+            AutoFixCssPlugin()
+        ],
+        
+        devServer: {
+            static: {
+                directory: build("./"),
+            },
+            port: 12000,
+        }
+    };
+
+    return config;
+};

config/webpack.electron.js

@@ -0,0 +1,44 @@
+const { Entry, Output, resolve, TypeScriptRules } = require("./webpack.common");
+const nodeExternals = require("webpack-node-externals");
+
+const AllEntry = Entry();
+
+module.exports = (env) => {
+    
+    const config = {
+
+        entry: {
+            Service: AllEntry.Service,
+			Electron: AllEntry.Electron,
+        },
+
+        output: Output("[name].js"),
+        devtool: 'source-map',
+        mode: "development",
+        resolve: resolve(),
+
+        optimization: {
+            splitChunks: {
+                chunks: 'all',
+                minSize: 1000
+            }
+        },
+
+        externals: [nodeExternals()],
+
+        module: {
+            rules: [
+                TypeScriptRules()
+            ]
+        },
+
+		node: {
+			__filename: false,
+			__dirname: false
+		},
+
+		target: 'node'
+    };
+
+    return config;
+};

package.json

@@ -4,18 +4,30 @@
   "description": "An art interactive works for graduation design.",
   "main": "./source/LivingTogether.ts",
   "scripts": {
-    "clean": "rimraf ./build/*",
+    "clean": "fse emptyDir ./build/",
     "hmr-lab": "webpack serve --open --config ./config/webpack.lab.js",
     "build-lab": "npm run clean & webpack --mode development --config ./config/webpack.lab.js",
     "release-lab": "npm run clean & webpack --mode production --no-devtool --config ./config/webpack.lab.js",
     "hmr-web": "webpack serve --open --config ./config/webpack.web.js",
     "build-web": "npm run clean & webpack --mode development --config ./config/webpack.web.js",
     "release-web": "npm run clean & webpack --mode production --no-devtool --config ./config/webpack.web.js",
+    "build-desktop-web": "npm run clean & webpack --mode development --config ./config/webpack.desktop.js",
+    "release-desktop-web": "npm run clean & webpack --mode production --no-devtool --config ./config/webpack.desktop.js",
     "build-service": "webpack --mode development --config ./config/webpack.service.js",
     "release-service": "webpack --mode production --no-devtool --config ./config/webpack.service.js",
     "run-service": "node ./build/ServiceRunner.js --run --path ./build --port 12000",
     "build-run-web": "npm run build-web & npm run build-service & npm run run-service",
-    "release-run-web": "npm run release-web & npm run release-service & npm run run-service"
+    "release-run-web": "npm run release-web & npm run release-service & npm run run-service",
+    "copy-fluent-icon": "fse mkdirp ./build/font-icon/ && fse emptyDir ./build/font-icon/ && fse copy ./node_modules/@fluentui/font-icons-mdl2/fonts/ ./build/font-icon/",
+    "build-run-desktop-web": "npm run build-desktop-web & npm run copy-fluent-icon & npm run build-service & npm run run-service",
+    "release-run-desktop-web": "npm run release-desktop-web & npm run copy-fluent-icon & npm run release-service & npm run run-service",
+    "skip-electron-ci": "set ELECTRON_SKIP_BINARY_DOWNLOAD=1& npm ci",
+    "build-electron": "webpack --mode development --config ./config/webpack.electron.js",
+    "release-electron": "webpack --mode production --no-devtool --config ./config/webpack.electron.js",
+    "electron-cache": "set ELECTRON_SKIP_BINARY_DOWNLOAD=& set ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/& set ELECTRON_CUSTOM_DIR={{ version }}& node ./node_modules/electron/install.js",
+    "electron": "set LIVING_TOGETHER_BASE_PATH=./build& npx electron ./build/Electron.js",
+    "build-run-electron": "npm run build-desktop-web & npm run copy-fluent-icon & npm run build-electron & npm run electron",
+    "release-run-electron": "npm run release-desktop-web & npm run copy-fluent-icon & npm run release-electron & npm run electron"
   },
   "keywords": [
     "artwork",
@@ -26,23 +38,25 @@
   "author": "MrKBear",
   "license": "GPL",
   "devDependencies": {
+    "@atao60/fse-cli": "^0.1.7",
     "@types/detect-port": "^1.3.2",
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",
     "autoprefixer": "^10.4.2",
     "css-loader": "^6.5.1",
+    "electron": "^18.0.4",
     "html-webpack-plugin": "^5.5.0",
     "mini-css-extract-plugin": "^2.4.6",
     "node-sass": "^7.0.1",
     "postcss-loader": "^6.2.1",
-    "rimraf": "^3.0.2",
     "sass-loader": "^12.4.0",
     "ts-loader": "^9.2.6",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
     "typescript": "^4.5.4",
     "webpack": "^5.65.0",
     "webpack-cli": "^4.9.1",
-    "webpack-dev-server": "^4.7.2"
+    "webpack-dev-server": "^4.7.2",
+    "webpack-node-externals": "^3.0.0"
   },
   "dependencies": {
     "@fluentui/react": "^8.56.0",

source/Component/HeaderBar/HeaderBar.scss

@@ -7,6 +7,9 @@ div.header-bar {
     justify-content: space-between;
     user-select: none;
 
+    // 在 Electron 中用于拖拽窗口
+    -webkit-app-region: drag;
+
     div.title {
         padding-left: 3px;
     }
@@ -36,6 +39,9 @@ div.header-bar {
         min-width: 135px;
         display: flex;
 
+        // 在 Electron 中用于拖拽窗口
+        -webkit-app-region: no-drag;
+
         div.action-button {
             width: 45px;
             height: 45px;

source/Electron/Electron.ts

@@ -0,0 +1,44 @@
+import { app, BrowserWindow } from "electron";
+import { Service } from "@Service/Service";
+const ENV = process.env ?? {};
+
+class ElectronApp {
+
+	public service: Service;
+
+	public serviceUrl: string = "http://127.0.0.1";
+
+	public constructor() {
+		this.service = new Service();
+	}
+
+	public async runService() {
+
+		let defaultPort: number | undefined = parseInt(ENV.LIVING_TOGETHER_DEFAULT_PORT ?? "");
+		if (isNaN(defaultPort)) defaultPort = undefined;
+
+		this.serviceUrl = await this.service.run(
+			ENV.LIVING_TOGETHER_BASE_PATH, defaultPort
+		);
+	}
+
+	public mainWindows?: BrowserWindow;
+
+	public async runMainThread() {
+
+		await app.whenReady();
+
+		await this.runService();
+
+		this.mainWindows = new BrowserWindow({
+			width: 800,
+			height: 600,
+			titleBarStyle: 'hidden',
+			frame: false,
+		});
+
+		this.mainWindows.loadURL(this.serviceUrl);
+	}
+}
+
+new ElectronApp().runMainThread();

source/LivingTogether.ts

@@ -1 +0,0 @@
-export * from "@Model/Model";

source/Page/SimulatorDesktop/SimulatorDesktop.scss

@@ -0,0 +1,11 @@
+div.app-root {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    overflow: hidden;
+
+    div.app-root-space {
+        height: 100%;
+        display: flex;
+    }
+}

source/Page/SimulatorDesktop/SimulatorDesktop.tsx

@@ -0,0 +1,108 @@
+import { Component, ReactNode } from "react";
+import { SettingProvider, Setting, Platform } from "@Context/Setting";
+import { Theme, BackgroundLevel, FontLevel } from "@Component/Theme/Theme";
+import { StatusProvider, Status } from "@Context/Status";
+import { ClassicRenderer } from "@GLRender/ClassicRenderer";
+import { initializeIcons } from '@fluentui/font-icons-mdl2';
+import { RootContainer } from "@Component/Container/RootContainer";
+import { LayoutDirection } from "@Context/Layout";
+import { CommandBar } from "@Component/CommandBar/CommandBar";
+import { HeaderBar } from "@Component/HeaderBar/HeaderBar";
+import { Popup } from "@Component/Popup/Popup";
+import { Entry } from "../Entry/Entry";
+import { Group } from "@Model/Group";
+import "./SimulatorDesktop.scss";
+
+initializeIcons("./font-icon/");
+
+class SimulatorDesktop extends Component {
+    
+    /**
+     * 全局设置
+     */
+    private setting: Setting;
+
+    /**
+     * 全局状态
+     */
+    private status: Status;
+
+    public constructor(props: any) {
+        super(props);
+
+        // TODO: 这里要读取设置
+        this.setting = new Setting();
+        this.setting.platform = Platform.desktop;
+
+        // TODO: 这里要读取存档
+        const classicRender = new ClassicRenderer().onLoad();
+        this.status = new Status();
+        this.status.bindRenderer(classicRender);
+        this.status.setting = this.setting;
+
+        const randomPosition = (group: Group) => {
+            group.individuals.forEach((individual) => {
+                individual.position[0] = (Math.random() - .5) * 2;
+                individual.position[1] = (Math.random() - .5) * 2;
+                individual.position[2] = (Math.random() - .5) * 2;
+            })
+        };
+    }
+
+    public componentDidMount() {
+        this.setting.layout.setData({
+            items: [
+                {
+                    items: [
+                        {panels: ["RenderView"]},
+                        {
+                            items: [{panels: ["BehaviorList"]}, {panels: ["LabelList"]}],
+                            scale: 80,
+                            layout: LayoutDirection.X
+                        }
+                    ],
+                    scale: 60,
+                    layout: LayoutDirection.Y
+                },
+                {
+                    items: [{
+                        panels: ["ObjectList"]
+                    }, {
+                        panels: ["GroupDetails", "RangeDetails", "LabelDetails", "BehaviorDetails"]
+                    }],
+                    scale: 30,
+                    layout: LayoutDirection.Y
+                }
+            ],
+            scale: 60,
+            layout: LayoutDirection.X
+        })
+    }
+
+    public render(): ReactNode {
+        return <SettingProvider value={this.setting}>
+            <StatusProvider value={this.status}>
+                {this.renderContent()}
+            </StatusProvider>
+        </SettingProvider>
+    }
+
+    private renderContent(): ReactNode {
+        return <Theme 
+            className="app-root"
+            backgroundLevel={BackgroundLevel.Level5}
+            fontLevel={FontLevel.Level3}
+        >
+            <Popup/>
+            <HeaderBar height={45}/>
+            <div className="app-root-space" style={{
+                height: `calc( 100% - ${45}px)`
+            }}>
+                <CommandBar width={45}/>
+                <RootContainer />
+            </div>
+        </Theme>
+    }
+}
+
+Entry.renderComponent(SimulatorDesktop);

source/Service/Service.ts

@@ -41,6 +41,8 @@ class Service {
 		this.app.listen(this.servicePort);
 
 		console.log("Service: service run in port " + this.servicePort);
+
+		return "http://127.0.0.1:" + this.servicePort + "/";
 	}
 }
 

tsconfig.json

@@ -43,7 +43,10 @@
             ],
             "@Service/*": [
                 "./source/Service/*"
-            ]
+            ],
+            "@Electron/*": [
+                "./source/Electron/*"
+            ],
         }
     },
     "include": [