Add GLCanvas

source/Page/Laboratory/Laboratory.scss

@@ -1,6 +1,10 @@
-.main {
-    div.a {
-        font-size: 2.5em;
-        background-color: rgb(175, 204, 166);
+div.main-canvas {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    
+    div.canvas {
+        width: 100%;
+        height: 100%;
     }
 }

source/Page/Laboratory/Laboratory.tsx

@@ -1,17 +1,35 @@
-import { Component, ReactNode, StrictMode } from "react";
+import { Component, ReactNode, createRef } from "react";
+import { GLCanvas } from "@GLRender/GLCanvas";
 import { Group } from "@Model/Group";
 import { Entry } from "../Entry/Entry";
 import "./Laboratory.scss";
 
-class Test extends Component {
-    render(): ReactNode {
-        return <div className="main">
-            <div className="a">it work</div>
-            <div>ok</div>
-        </div>
+class Laboratory extends Component {
+    
+    private canvasContRef = createRef<HTMLDivElement>();
+
+    public render(): ReactNode {
+        return <div ref={this.canvasContRef} className="main-canvas"></div>
+    }
+
+    public componentDidMount() {
+        if (!this.canvasContRef.current) {
+            throw new Error("Laboratory: 无法获取到 Canvas 容器节点");
+        }
+
+        if (this.canvasContRef.current.getElementsByTagName("canvas").length > 0) {
+            throw new Error("Laboratory: 重复引用 canvas 节点");
+        }
+
+        const glCanvas = new GLCanvas(undefined, {
+            autoResize: true,
+            mouseEvent: true,
+            eventLog: false
+        });
+
+        glCanvas.dom.className = "canvas";
+        this.canvasContRef.current.appendChild(glCanvas.dom);
     }
 }
 
-Entry.renderComponent(Test);
-
-console.log(new Group);
+Entry.renderComponent(Laboratory);