Add classic renderer

source/GLRender/ClassicRenderer.ts

@@ -0,0 +1,50 @@
+import { AbstractRenderer, ObjectID, ObjectData, ICommonParam } from "@Model/Renderer";
+import { GLCanvas, GLCanvasOption } from "./GLCanvas";
+
+interface IRendererOwnParams {}
+
+/**
+ * 渲染器参数
+ */
+type IRendererParams = IRendererOwnParams & GLCanvasOption;
+
+class ClassicRenderer extends AbstractRenderer<{}, IRendererParams> {
+
+	/**
+	 * 渲染器参数
+	 */
+	public param: IRendererParams;
+
+	/**
+	 * 使用的画布
+	 */
+	public canvas: GLCanvas;
+
+	public constructor(canvas: HTMLCanvasElement, param: IRendererParams = {}) {
+		super();
+
+		// 初始化参数
+		this.param = {
+			autoResize: param.autoResize ?? true,
+			mouseEvent: param.autoResize ?? true,
+			eventLog: param.eventLog ?? false,
+			clasName: param.clasName ?? ""
+		}
+		
+		// 实例化画布对象
+		this.canvas = new GLCanvas(canvas, this.param);
+	}
+
+	clean(id?: ObjectID | ObjectID[]): this {
+		throw new Error("Method not implemented.");
+	}
+	points(id: ObjectID, position: ObjectData, param?: ICommonParam): this {
+		throw new Error("Method not implemented.");
+	}
+	cube(id: ObjectID, position: ObjectData, param?: ICommonParam): this {
+		throw new Error("Method not implemented.");
+	}
+}
+
+export default ClassicRenderer;
+export { ClassicRenderer };

source/GLRender/GLCanvas.ts

@@ -22,7 +22,12 @@ interface GLCanvasOption {
      * 调试时使用
      * 打印事件
      */
-    eventLog?: boolean
+    eventLog?: boolean,
+
+    /**
+     * 节点类名
+     */
+    clasName?: string
 }
 
 type GLCanvasEvent = {
@@ -265,6 +270,7 @@ class GLCanvas extends Emitter<GLCanvasEvent> {
         this.canvas = ele ?? document.createElement("canvas");
         
         this.div = document.createElement("div");
+        this.div.className = opt.clasName ?? "";
         this.div.appendChild(this.canvas);
 
         this.canvas.style.width = "100%";

source/Model/Renderer.ts

@@ -47,14 +47,46 @@ type ObjectID = Symbol | string | number;
  */
 type ObjectData = Array<number> | Float32Array | Float64Array;
 
+interface IRendererConstructor<
+	M extends IAnyObject = {}
+> {
+	new (canvas: HTMLCanvasElement, param?: M): AbstractRenderer<
+		IRendererParam, IAnyObject, Record<EventType, any>
+	>
+}
+
 /**
  * 渲染器 API
  */
 abstract class AbstractRenderer<
-	P extends IRendererParam,
+	P extends IRendererParam = {},
+	M extends IAnyObject = {},
 	E extends Record<EventType, any> = {}
 > extends Emitter<E> {
 
+	/**
+	 * 渲染器参数
+	 */
+	abstract param: M;
+
+	/**
+	 * 类型断言
+	 */
+	get isRenderer() {
+		return true;
+	}
+
+	/**
+	 * 断言对象是否是渲染器
+	 */
+	public static isRenderer(render: any): render is AbstractRenderer {
+		if (render instanceof Object) {
+			return !!(render as AbstractRenderer).isRenderer;
+		} else {
+			return false;
+		}
+	};
+
 	/**
 	 * @function start 
 	 * 开始一次数据更新 \
@@ -87,4 +119,4 @@ abstract class AbstractRenderer<
 }
 
 export default AbstractRenderer;
-export { AbstractRenderer };
+export { AbstractRenderer, ObjectID, ICommonParam, ObjectData, IRendererConstructor };

source/Page/Laboratory/Laboratory.tsx

@@ -1,6 +1,5 @@
 import { Component, ReactNode, createRef } from "react";
-import { GLCanvas } from "@GLRender/GLCanvas";
+import { ClassicRenderer } from "@GLRender/ClassicRenderer";
-import { Group } from "@Model/Group";
 import { Entry } from "../Entry/Entry";
 import "./Laboratory.scss";
 
@@ -17,18 +16,19 @@ class Laboratory extends Component {
             throw new Error("Laboratory: 无法获取到 Canvas 容器节点");
         }
 
-        if (this.canvasContRef.current.getElementsByTagName("canvas").length > 0) {
+        if (this.canvasContRef.current.querySelector("*")) {
             throw new Error("Laboratory: 重复引用 canvas 节点");
         }
 
-        const glCanvas = new GLCanvas(undefined, {
+        const canvas = document.createElement("canvas");
-            autoResize: true,
+
-            mouseEvent: true,
+        const renderer = new ClassicRenderer(canvas, {
-            eventLog: false
+            clasName: "canvas"
         });
 
-        glCanvas.dom.className = "canvas";
+        console.log(renderer);
-        this.canvasContRef.current.appendChild(glCanvas.dom);
+
+        this.canvasContRef.current.appendChild(renderer.canvas.dom);
     }
 }