Add simulator desktop entry

config/webpack.common.js

@@ -72,6 +72,11 @@ const Entry = () => ({
         dependOn: ["Model", "GLRender"]
     },
 
+    SimulatorDesktop: {
+        import: source("./Page/SimulatorDesktop/SimulatorDesktop.tsx"),
+        dependOn: ["Model", "GLRender"]
+    },
+
     Service: {
         import: source("./Service/Service.ts")
     },

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;
+};

package.json

@@ -11,12 +11,16 @@
     "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",
-    "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/"
+    "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"
   },
   "keywords": [
     "artwork",

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);