.drone.yml

@@ -10,19 +10,29 @@ steps:
   pull: if-not-exists
   image: node
   volumes:
-  - name: publish
+  - name: publish_lab
-    path: /drone/src/build
+    path: /drone/src/build_lab
+  - name: publish_web
+    path: /drone/src/build_web
   - name: node_modules
     path: /drone/src/node_modules
   commands:
   - npm config set registry https://registry.npm.taobao.org
   - npm ci
   - npm run release-lab
+  - rm -rf ./build_lab/*
+  - cp ./build/* ./build_lab
+  - npm run release-web
+  - rm -rf ./build_web/*
+  - cp ./build/* ./build_web
 
 volumes:
-- name: publish
+- name: publish_lab
   host:
     path: /http/living-together-lab
+- name: publish_web
+  host:
+    path: /http/living-together-web
 - name: node_modules
   host:
     path: /tmp/node_modules/living-together

config/webpack.common.js

@@ -65,6 +65,11 @@ const Entry = () => ({
     LaboratoryPage: {
         import: source("./Page/Laboratory/Laboratory.tsx"),
         dependOn: ["Model", "GLRender"]
+    },
+
+    SimulatorWeb: {
+        import: source("./Page/SimulatorWeb/SimulatorWeb.tsx"),
+        dependOn: ["Model", "GLRender"]
     }
 });
 

config/webpack.web.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,
+            SimulatorWeb: AllEntry.SimulatorWeb
+        },
+
+        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

@@ -7,7 +7,10 @@
     "clean": "rimraf ./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"
+    "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"
   },
   "keywords": [
     "artwork",

source/Model/Label.ts

@@ -1,3 +1,6 @@
+import type { Model } from "./Model";
+import { ObjectID } from "./Renderer";
+
 /**
  * 数据标签
  */
@@ -6,7 +9,7 @@ class Label {
     /**
      * 唯一标识符
      */
-    public id: string;
+    public id: ObjectID;
 
     /**
      * 用户定义的名称
@@ -18,12 +21,18 @@ class Label {
      */
     public color?: string;
 
+    /**
+     * 所属模型
+     */
+    public model: Model;
+
     /**
      * 构造器
      * @param id 标签 ID
      * @param name 用户定义的名称
      */
-    public constructor(id: string, name?: string) {
+    public constructor(model:Model, id: ObjectID, name?: string) {
+        this.model = model;
         this.id = id;
         this.name = name;
     }
@@ -34,6 +43,16 @@ class Label {
     public equal(label: Label): boolean {
         return this === label || this.id === label.id;
     }
+
+    /**
+     * 是否被删除
+     */
+    public isDeleted(): boolean {
+        for (let i = 0; i < this.model.labelPool.length; i++) {
+            if (this.model.labelPool[i].equal(this)) return false;
+        }
+        return true;
+    }
 }
 
 /**

source/Model/Model.ts

@@ -5,10 +5,14 @@ import { Range } from "./Range";
 import { Emitter, EventType, EventMixin } from "./Emitter";
 import { CtrlObject } from "./CtrlObject";
 import { ObjectID, AbstractRenderer } from "./Renderer";
+import { Label } from "./Label";
 
 type ModelEvent = {
     groupAdd: Group;
     rangeAdd: Range;
+    labelAdd: Label;
+    labelDelete: Label;
+    labelChange: Label[];
     objectAdd: CtrlObject;
     objectDelete: CtrlObject[];
     objectChange: CtrlObject[];
@@ -32,6 +36,51 @@ class Model extends Emitter<ModelEvent> {
      */
     public objectPool: CtrlObject[] = [];
 
+    /**
+     * 标签列表
+     */
+    public labelPool: Label[] = [];
+
+    /**
+     * 添加标签
+     */
+    public addLabel(name: string): Label {
+        console.log(`Model: Creat label with id ${this.idIndex}`);
+        let label = new Label(this, this.nextId, name);
+        this.labelPool.push(label);
+        this.emit("labelAdd", label);
+        this.emit("labelChange", this.labelPool);
+        return label;
+    }
+
+    /**
+     * 搜索并删除一个 Label
+     * @param name 搜索值
+     */
+    public deleteLabel(name: Label | ObjectID) {
+        let deletedLabel: Label | undefined;
+        let index = 0;
+
+        for (let i = 0; i < this.labelPool.length; i++) {
+            if (name instanceof Label) {
+                if (this.labelPool[i].equal(name)) {
+                    deletedLabel = this.labelPool[i];
+                    index = i;
+                }
+            } else if (name === this.labelPool[i].id) {
+                deletedLabel = this.labelPool[i];
+                index = i;
+            }
+        }
+
+        if (deletedLabel) {
+            this.labelPool.splice(index, 1);
+            console.log(`Model: Delete label ${deletedLabel.name ?? deletedLabel.id}`);
+            this.emit("labelDelete", deletedLabel);
+            this.emit("labelChange", this.labelPool);
+        }
+    }
+
     /**
      * 添加组
      */

source/Page/SimulatorWeb/SimulatorWeb.tsx

@@ -0,0 +1,14 @@
+import { Component, ReactNode, createRef } from "react";
+import { Entry } from "../Entry/Entry";
+import "./SimulatorWeb.scss";
+
+class SimulatorWeb extends Component {
+    
+    private canvasContRef = createRef<HTMLDivElement>();
+
+    public render(): ReactNode {
+        return <div>Web</div>
+    }
+}
+
+Entry.renderComponent(SimulatorWeb);