source/Context/Popups.ts

@@ -1,7 +1,7 @@
 import { ReactNode, createElement } from "react";
 import { Emitter } from "@Model/Emitter";
 import { Localization } from "@Component/Localization/Localization";
-import { IAnyObject } from "@Model/Model";
+import { IAnyObject } from "@Model/Renderer";
 
 enum ResizeDragDirection {
     top = 1,

source/GLRender/BasicGroup.ts

@@ -44,11 +44,6 @@ class BasicGroup extends DisplayObject<GroupShader> {
      */
     public color = [1, 1, 1];
 
-    /**
-     * 形状
-     */
-    public shape: number = 0;
-
     /**
      * 绘制立方体
      */
@@ -71,9 +66,6 @@ class BasicGroup extends DisplayObject<GroupShader> {
         // 半径传递
         this.shader.radius(this.size);
 
-        // 形状传递
-        this.shader.shape(this.shape);
-
         // 指定颜色
         this.shader.color(this.color);
 

source/GLRender/BasicRenderer.ts

@@ -1,4 +1,4 @@
-import { AbstractRenderer, IRendererParam } from "@Model/Renderer";
+import { AbstractRenderer, IRendererParam, IAnyObject } from "@Model/Renderer";
 import { EventType } from "@Model/Emitter";
 import { GLCanvas, GLCanvasOption } from "./GLCanvas";
 import { GLContext } from "./GLContext";
@@ -16,13 +16,19 @@ type IRendererParams = IRendererOwnParams & GLCanvasOption;
 
 abstract class BasicRenderer<
     P extends IRendererParam = {},
+    M extends IAnyObject = {},
     E extends Record<EventType, any> = {}
-> extends AbstractRenderer<P, E & {loop: number}> {
+> extends AbstractRenderer<P, M & IRendererParams, E & {loop: number}> {
 
     public get dom() {
         return this.canvas.dom
     }
 
+    /**
+	 * 渲染器参数
+	 */
+	public param: Partial<M & IRendererParams> = {};
+
     /**
 	 * 使用的画布
 	 */
@@ -38,16 +44,19 @@ abstract class BasicRenderer<
      */
     protected clock: Clock;
 
-    public constructor() {
+    public constructor(param: Partial<M & IRendererParams> = {}) {
 		super();
 
+		// 初始化参数
+		this.param = {
+			autoResize: param.autoResize ?? true,
+			mouseEvent: param.autoResize ?? true,
+			eventLog: param.eventLog ?? false,
+			className: param.className ?? ""
+		} as M & IRendererParams;
+		
 		// 实例化画布对象
-		this.canvas = new GLCanvas(undefined, {
+		this.canvas = new GLCanvas(param.canvas, this.param);
-			autoResize: true,
-			mouseEvent: true,
-			eventLog: false,
-			className: "canvas"
-		});
 
         // 实例化摄像机
         this.camera = new Camera(this.canvas);

source/GLRender/ClassicRenderer.ts

@@ -1,49 +1,27 @@
-import { ObjectData } from "@Model/Renderer";
+import { ObjectID, ObjectData, ICommonParam } from "@Model/Renderer";
-import { ObjectID } from "@Model/Model";
-import { IParameterValue, getDefaultValue } from "@Model/Parameter";
 import { BasicRenderer } from "./BasicRenderer";
 import { BasicsShader } from "./BasicShader";
 import { Axis } from "./Axis";
 import { BasicCube } from "./BasicCube";
 import { GroupShader } from "./GroupShader";
 import { BasicGroup } from "./BasicGroup";
-import { DisplayObject } from "./DisplayObject";
+import DisplayObject from "./DisplayObject";
+
+interface IClassicRendererParams {
+    point: {
+        size: number;
+    }
+    cube: {
+        radius: number[];
+    }
+}
 
 enum MouseMod {
     Drag = 1,
     click = 2
 }
 
-type IClassicRendererParameter = {
+class ClassicRenderer extends BasicRenderer<{}, IClassicRendererParams> {
-	renderer: {};
-	points: {
-        color: "color",
-        size: "number",
-        shape: "option"
-    };
-	cube: {
-        color: "color"
-    };
-}
-
-class ClassicRenderer extends BasicRenderer<IClassicRendererParameter> {
-
-    public override rendererParameterOption = {};
-	public override pointsParameterOption = {
-        color: { type: "color", name: "", defaultValue: [0, 0, 0] },
-        size: { type: "number", name: "Common.Attr.Key.Size", defaultValue: 60, numberStep: 10, numberMin: 0 },
-        shape: { type: "option", name: "Common.Render.Attr.Key.Display.Shape", defaultValue: "0", allOption: [
-            { key: "0", name: "Common.Render.Attr.Key.Display.Shape.Square" },
-            { key: "1", name: "Common.Render.Attr.Key.Display.Shape.Hollow.Square" },
-            { key: "2", name: "Common.Render.Attr.Key.Display.Shape.Hollow.Plus" },
-            { key: "3", name: "Common.Render.Attr.Key.Display.Shape.Hollow.Reduce" },
-            { key: "4", name: "Common.Render.Attr.Key.Display.Shape.Hollow.Cross" },
-            { key: "5", name: "Common.Render.Attr.Key.Display.Shape.Hollow.Checkerboard" }
-        ]}
-    };
-	public override cubeParameterOption = {
-        color: { type: "color", name: "", defaultValue: [0, 0, 0] },
-    };
 
     private basicShader: BasicsShader = undefined as any;
     private axisObject: Axis = undefined as any;
@@ -74,8 +52,6 @@ class ClassicRenderer extends BasicRenderer<IClassicRendererParameter> {
 
     public onLoad(): this {
         
-        this.rendererParameter = getDefaultValue(this.rendererParameterOption);
-        
         // 自动调节分辨率
         this.autoResize();
 
@@ -211,7 +187,7 @@ class ClassicRenderer extends BasicRenderer<IClassicRendererParameter> {
 
     points(
         id: ObjectID, position?: ObjectData,
-        param?: Readonly<IParameterValue<IClassicRendererParameter["points"]>>
+        param?: Readonly<Partial<ICommonParam & IClassicRendererParams["point"]>>
     ): this {
         let object = this.objectPool.get(id);
         let group: BasicGroup;
@@ -253,19 +229,14 @@ class ClassicRenderer extends BasicRenderer<IClassicRendererParameter> {
             if (param.size) {
                 group.size = param.size;
             }
-
-            // 半径数据
-            if (param.shape) {
-                group.shape = parseInt(param.shape);
-            }
         }
 
         return this;
     }
 
     cube(
-        id: ObjectID, position?: ObjectData, radius?: ObjectData,
+        id: ObjectID, position?: ObjectData,
-        param?: Readonly<IParameterValue<IClassicRendererParameter["cube"]>>
+        param?: Readonly<Partial<ICommonParam & IClassicRendererParams["cube"]>>
     ): this {
         let object = this.objectPool.get(id);
         let cube: BasicCube;
@@ -279,13 +250,6 @@ class ClassicRenderer extends BasicRenderer<IClassicRendererParameter> {
                     cube.position[1] = position[1] ?? cube.position[1];
                     cube.position[2] = position[2] ?? cube.position[2];
                 }
-
-                if (radius) {
-                    cube.r[0] = radius[0] ?? cube.r[0];
-                    cube.r[1] = radius[1] ?? cube.r[1];
-                    cube.r[2] = radius[2] ?? cube.r[2];
-                }
-
             } else {
                 throw new Error("Renderer: Use duplicate ObjectID when drawing different types of objects");
             }
@@ -299,12 +263,6 @@ class ClassicRenderer extends BasicRenderer<IClassicRendererParameter> {
                 cube.position[2] = position[2] ?? cube.position[2];
             }
 
-            if (radius) {
-                cube.r[0] = radius[0] ?? cube.r[0];
-                cube.r[1] = radius[1] ?? cube.r[1];
-                cube.r[2] = radius[2] ?? cube.r[2];
-            }
-
             this.objectPool.set(id, cube);
             console.log(`Renderer: Create new cube object with id ${id}`);
         }
@@ -313,11 +271,21 @@ class ClassicRenderer extends BasicRenderer<IClassicRendererParameter> {
         cube.isDraw = true;
 
         // 参数传递
-        if (param && param.color) {
+        if (param) {
 
-            cube.color[0] = param.color[0] ?? cube.color[0];
+            // 颜色数据
-            cube.color[1] = param.color[1] ?? cube.color[1];
+            if (param.color) {
-            cube.color[2] = param.color[2] ?? cube.color[2];
+                cube.color[0] = param.color[0] ?? cube.color[0]
+                cube.color[1] = param.color[1] ?? cube.color[1]
+                cube.color[2] = param.color[2] ?? cube.color[2]
+            }
+
+            // 半径数据
+            if (param.radius) {
+                cube.r[0] = param.radius[0] ?? cube.r[0];
+                cube.r[1] = param.radius[1] ?? cube.r[1];
+                cube.r[2] = param.radius[2] ?? cube.r[2];
+            }
         }
 
         return this;

source/GLRender/GroupShader.ts

@@ -10,7 +10,6 @@ interface IGroupShaderAttribute {
 
 interface IGroupShaderUniform {
     uRadius: number,
-    uShape: number,
     uMvp: ObjectData,
     uColor: ObjectData,
     uFogColor: ObjectData,
@@ -51,42 +50,10 @@ class GroupShader extends GLShader<IGroupShaderAttribute, IGroupShaderUniform>{
             
             uniform vec3 uColor;
             uniform vec3 uFogColor;
-            uniform int uShape;
 
             varying float vFogPower;
         
             void main(){
-
-                float dist = distance(gl_PointCoord, vec2(0.5, 0.5));
-                vec2 normalPos = (gl_PointCoord - vec2(0.5, 0.5)) * 2.;
-                
-                if ( uShape == 1 && abs(normalPos.x) < .6 && abs(normalPos.y) < .6) {
-                    discard;
-                }
-
-                if ( uShape == 2 && abs(normalPos.x) > .3 && abs(normalPos.y) > .3) {
-                    discard;
-                }
-
-                if ( uShape == 3 && abs(normalPos.y) > .3) {
-                    discard;
-                }
-
-                if ( uShape == 4 &&
-                    (abs(normalPos.x) < .4 || abs(normalPos.y) < .4) &&
-                    (abs(normalPos.x) > .4 || abs(normalPos.y) > .4)
-                ) {
-                    discard;
-                }
-
-                if ( uShape == 5 &&
-                    (abs(normalPos.x) < .75 && abs(normalPos.y) < .75) &&
-                    (abs(normalPos.x) < .28 || abs(normalPos.y) < .28) &&
-                    (abs(normalPos.x) > .28 || abs(normalPos.y) > .28)
-                ) {
-                    discard;
-                }
-
                 gl_FragColor = vec4(mix(uColor, uFogColor, vFogPower), 1.);
             }
         `;
@@ -144,13 +111,4 @@ class GroupShader extends GLShader<IGroupShaderAttribute, IGroupShaderUniform>{
             this.uniformLocate("uFogDensity"), rgb
         )
     }
-
-    /**
-     * 形状
-     */
-    public shape(shape: number) {
-        this.gl.uniform1i(
-            this.uniformLocate("uShape"), shape
-        )
-    }
 }

source/Input/AttrInput/AttrInput.tsx

@@ -1,7 +1,7 @@
 import { Component, ReactNode } from "react";
 import { Icon } from "@fluentui/react";
 import { AllI18nKeys } from "@Component/Localization/Localization";
-import { ObjectID } from "@Model/Model";
+import { ObjectID } from "@Model/Renderer";
 import { TextField, ITextFieldProps } from "@Input/TextField/TextField";
 import "./AttrInput.scss";
 

source/Input/Parameter/Parameter.tsx

@@ -1,7 +1,7 @@
 import { Component, Fragment, ReactNode } from "react";
 import { useSettingWithEvent, IMixinSettingProps, Language } from "@Context/Setting";
 import { AttrInput } from "@Input/AttrInput/AttrInput";
-import { ObjectID } from "@Model/Model";
+import { ObjectID } from "@Model/Renderer";
 import { TogglesInput } from "@Input/TogglesInput/TogglesInput";
 import { ObjectPicker } from "@Input/ObjectPicker/ObjectPicker";
 import { AllI18nKeys, I18N } from "@Component/Localization/Localization";
@@ -10,7 +10,7 @@ import { ColorInput } from "@Input/ColorInput/ColorInput";
 import { ComboInput, IDisplayItem } from "@Input/ComboInput/ComboInput";
 import {
     IParameter, IParameterOption, IParameterOptionItem,
-    IParameterValue, IParamValue, isObjectType
+    IParameterValue, IParamValue, isObjectType, isVectorType
 } from "@Model/Parameter";
 import "./Parameter.scss";
 
@@ -20,7 +20,6 @@ interface IParameterProps<P extends IParameter = {}> {
     key: ObjectID;
     change: <K extends keyof P>(key: K, val: IParamValue<P[K]>) => any;
     i18n?: (key: string, language: Language) => string;
-    renderKey?: Array<keyof P>;
     title?: AllI18nKeys;
     titleOption?: Record<string, string>;
     isFirst?: boolean;
@@ -250,18 +249,12 @@ class Parameter<P extends IParameter> extends Component<IParameterProps<P> & IMi
     }
     
     public render(): ReactNode {
-        
+        const allOptionKeys: Array<keyof P> = Object.getOwnPropertyNames(this.props.option);
-        let allOptionKeys: Array<keyof P>;
-        if (this.props.renderKey) {
-            allOptionKeys = this.props.renderKey;
-        } else {
-            allOptionKeys = Object.getOwnPropertyNames(this.props.option);
-        }
         
         return <>
         
             {
-                allOptionKeys.length > 0 && this.props.title ?
+                allOptionKeys.length <= 0 && this.props.title ?
                     <Message
                         isTitle
                         first={this.props.isFirst}

source/Localization/EN-US.ts

@@ -76,7 +76,6 @@ const EN_US = {
     "Common.Attr.Title.Individual.Generation": "Individual generation",
     "Common.Attr.Title.Behaviors": "Behaviors list",
     "Common.Attr.Title.Individual.kill": "Individual kill",
-    "Common.Attr.Title.Render.Parameter": "Render parameters",
     "Common.Attr.Key.Display.Name": "Display name",
     "Common.Attr.Key.Position.X": "Position X",
     "Common.Attr.Key.Position.Y": "Position Y",
@@ -107,13 +106,6 @@ const EN_US = {
     "Common.Attr.Key.Generation.Error.Invalid.Label": "The specified label has expired",
     "Common.Attr.Key.Kill.Random": "Random kill",
     "Common.Attr.Key.Kill.Count": "Kill count",
-    "Common.Render.Attr.Key.Display.Shape": "Display Shape",
-    "Common.Render.Attr.Key.Display.Shape.Square": "Square",
-    "Common.Render.Attr.Key.Display.Shape.Hollow.Square": "Hollow square",
-    "Common.Render.Attr.Key.Display.Shape.Hollow.Plus": "Plus",
-    "Common.Render.Attr.Key.Display.Shape.Hollow.Reduce": "Reduce",
-    "Common.Render.Attr.Key.Display.Shape.Hollow.Cross": "Cross",
-    "Common.Render.Attr.Key.Display.Shape.Hollow.Checkerboard": "Checkerboard",
     "Panel.Info.Range.Details.Attr.Error.Not.Range": "Object is not a Range",
     "Panel.Info.Range.Details.Attr.Error.Unspecified": "Unspecified range object",
     "Panel.Info.Group.Details.Attr.Error.Not.Group": "Object is not a Group",

source/Localization/ZH-CN.ts

@@ -76,7 +76,6 @@ const ZH_CN = {
     "Common.Attr.Title.Individual.Generation": "生成个体",
     "Common.Attr.Title.Behaviors": "行为列表",
     "Common.Attr.Title.Individual.kill": "消除个体",
-    "Common.Attr.Title.Render.Parameter": "渲染参数",
     "Common.Attr.Key.Display.Name": "显示名称",
     "Common.Attr.Key.Position.X": "X 坐标",
     "Common.Attr.Key.Position.Y": "Y 坐标",
@@ -107,13 +106,6 @@ const ZH_CN = {
     "Common.Attr.Key.Generation.Error.Invalid.Label": "指定的标签已失效",
     "Common.Attr.Key.Kill.Random": "随机消除",
     "Common.Attr.Key.Kill.Count": "消除数量",
-    "Common.Render.Attr.Key.Display.Shape": "显示形状",
-    "Common.Render.Attr.Key.Display.Shape.Square": "方形",
-    "Common.Render.Attr.Key.Display.Shape.Hollow.Square": "空心方形",
-    "Common.Render.Attr.Key.Display.Shape.Hollow.Plus": "加号",
-    "Common.Render.Attr.Key.Display.Shape.Hollow.Reduce": "减号",
-    "Common.Render.Attr.Key.Display.Shape.Hollow.Cross": "叉号",
-    "Common.Render.Attr.Key.Display.Shape.Hollow.Checkerboard": "棋盘",
     "Panel.Info.Range.Details.Attr.Error.Not.Range": "对象不是一个范围",
     "Panel.Info.Range.Details.Attr.Error.Unspecified": "未指定范围对象",
     "Panel.Info.Group.Details.Attr.Error.Not.Group": "对象不是一个群",

source/Model/CtrlObject.ts

@@ -1,6 +1,6 @@
 import { LabelObject } from "@Model/Label"
-import type { IAnyObject, Model } from "@Model/Model";
+import type { Model } from "@Model/Model";
-import type { ObjectID } from "@Model/Model";
+import type { ObjectID } from "@Model/Renderer";
 
 /**
  * 可控对象
@@ -37,11 +37,6 @@ class CtrlObject extends LabelObject {
      */
     protected model: Model;
 
-    /**
-     * 渲染数据
-     */
-    public renderParameter: IAnyObject = {};
-
     /**
      * 构造器
      */

source/Model/Group.ts

@@ -3,8 +3,6 @@ import { CtrlObject } from "@Model/CtrlObject";
 import type { Behavior } from "@Model/Behavior"; 
 import { Label } from "@Model/Label";
 import { Range } from "@Model/Range";
-import { Model, ObjectID } from "@Model/Model";
-import { getDefaultValue } from "@Model/Parameter";
 
 enum GenMod {
     Point = "p",
@@ -383,14 +381,10 @@ class Group extends CtrlObject {
         return dataBuffer;
     }
 
-    public constructor(model: Model, id: ObjectID) {
+    /**
-
+     * 绘制大小 
-        super(model, id);
+     */
-        
+    public size: number = 60;
-        if (model.renderer) {
-            this.renderParameter = getDefaultValue(model.renderer.pointsParameterOption);
-        }
-    }
 }
 
 export default Group;

source/Model/Individual.ts

@@ -1,5 +1,5 @@
 import type { Group } from "@Model/Group";
-import { ObjectID } from "@Model/Model";
+import { ObjectID } from "@Model/Renderer";
 
 /**
  * 群中的个体类型

source/Model/Label.ts

@@ -1,4 +1,5 @@
-import type { Model, ObjectID } from "@Model/Model";
+import type { Model } from "@Model/Model";
+import { ObjectID } from "@Model/Renderer";
 
 /**
  * 数据标签

source/Model/Model.ts

@@ -5,19 +5,9 @@ import { IParamValue } from "@Model/Parameter";
 import { Individual } from "@Model/Individual";
 import { CtrlObject } from "@Model/CtrlObject";
 import { Emitter, EventType, EventMixin } from "@Model/Emitter";
-import { AbstractRenderer } from "@Model/Renderer";
+import { ObjectID, AbstractRenderer } from "@Model/Renderer";
 import { Behavior, IAnyBehavior, IAnyBehaviorRecorder } from "@Model/Behavior";
 
-/**
- * 对象标识符
- */
-type ObjectID = string;
-
-/**
- * 任意类型对象
- */
-type IAnyObject = Record<string, any>;
-
 type ModelEvent = {
     labelChange: Label[];
     objectChange: CtrlObject[];
@@ -362,12 +352,17 @@ class Model extends Emitter<ModelEvent> {
         // 渲染
         for (let i = 0; i < this.objectPool.length; i++) {
             let object = this.objectPool[i];
-            object.renderParameter.color = object.color;
             if (object.display && object instanceof Group) {
-                this.renderer.points(object.id, object.exportPositionData(), object.renderParameter);
+                this.renderer.points(object.id, object.exportPositionData(), {
+                    color: object.color,
+                    size: object.size
+                } as any);
             }
             if (object.display && object instanceof Range) {
-                this.renderer.cube(object.id, object.position, object.radius, object.renderParameter);
+                this.renderer.cube(object.id, object.position, {
+                    color: object.color,
+                    radius: object.radius
+                } as any);
             }
         }
     }
@@ -381,6 +376,5 @@ export {
     EventMixin,
     Model,
     CtrlObject,
-    ObjectID,
+    ObjectID
-    IAnyObject
 }

source/Model/Range.ts

@@ -1,6 +1,4 @@
 import { CtrlObject } from "@Model/CtrlObject";
-import { Model, ObjectID } from "@Model/Model";
-import { getDefaultValue } from "@Model/Parameter";
 
 /**
  * 范围
@@ -17,15 +15,6 @@ class Range extends CtrlObject {
      */
     public radius: number[] = [1, 1, 1];
 
-    public constructor(model: Model, id: ObjectID) {
-
-        super(model, id);
-        
-        if (model.renderer) {
-            this.renderParameter = getDefaultValue(model.renderer.cubeParameterOption);
-        }
-    }
-
 }
 
 export default Range;

source/Model/Renderer.ts

@@ -1,31 +1,24 @@
 import { Emitter, EventType } from "@Model/Emitter";
-import { IAnyObject, ObjectID } from "@Model/Model"; 
-import { IParameter, IParameterOption, IParameterValue } from "@Model/Parameter";
 
 /**
- * 默认类型
+ * 任意类型对象
  */
-type IDefaultType<T, D> = T extends undefined ? D : T;
+type IAnyObject = Record<string, any>;
 
 /**
  * 渲染器参数
  */
 interface IRendererParam {
 
-	/**
-	 * 渲染器参数
-	 */
-	renderer?: IParameter;
-
 	/**
 	 * 绘制点需要的参数
 	 */
-	points?: IParameter;
+	points?: IAnyObject
 
 	/**
 	 * 绘制立方体需要的参数
 	 */
-	cube?: IParameter;
+	cube?: IAnyObject
 }
 
 /**
@@ -39,15 +32,22 @@ interface ICommonParam {
 	color?: ObjectData;
 }
 
-
+/**
+ * 对象标识符
+ */
+type ObjectID = string;
 
 /**
  * 接收的数据类型
  */
 type ObjectData = Array<number> | Float32Array;
 
-interface IRendererConstructor {
+interface IRendererConstructor<
-	new (): AbstractRenderer<IRendererParam, AbstractRendererEvent>
+	M extends IAnyObject = {}
+> {
+	new (canvas: HTMLCanvasElement, param?: M): AbstractRenderer<
+		IRendererParam, IAnyObject, AbstractRendererEvent
+	>
 }
 
 type AbstractRendererEvent = {
@@ -63,6 +63,7 @@ type AbstractRendererEvent = {
  */
 abstract class AbstractRenderer<
 	P extends IRendererParam = {},
+	M extends IAnyObject = {},
 	E extends AbstractRendererEvent = {loop: number}
 > extends Emitter<E> {
 
@@ -71,17 +72,28 @@ abstract class AbstractRenderer<
 	/**
 	 * 渲染器参数
 	 */
-	public rendererParameterOption: IParameterOption<IDefaultType<P["renderer"], {}>> = {} as any;
+	abstract param: Partial<M>;
-	public pointsParameterOption: IParameterOption<IDefaultType<P["points"], {}>> = {} as any;
-	public cubeParameterOption: IParameterOption<IDefaultType<P["cube"], {}>> = {} as any;
 
 	/**
-	 * 渲染器参数
+	 * 类型断言
 	 */
-	public rendererParameter: IParameterValue<IDefaultType<P["renderer"], {}>> = {} as any;
+	get isRenderer() {
+		return true;
+	}
 
 	/**
-	 * @function clean 
+	 * 断言对象是否是渲染器
+	 */
+	public static isRenderer(render: any): render is AbstractRenderer {
+		if (render instanceof Object) {
+			return !!(render as AbstractRenderer).isRenderer;
+		} else {
+			return false;
+		}
+	};
+
+	/**
+	 * @function start 
 	 * 开始一次数据更新 \
 	 * 此函数将清除固定对象的绘制状态 \
 	 * 在每次数据更新前调用 \
@@ -98,9 +110,7 @@ abstract class AbstractRenderer<
 	 * @param id 使用的标识符
 	 * @param position 做标集合
 	 */
-	abstract points(id: ObjectID, position?: ObjectData, param?: 
+	abstract points(id: ObjectID, position?: ObjectData, param?: Readonly<P["points"] & ICommonParam>): this;
-		Readonly<IParameterValue<IDefaultType<P["points"], {}>>>
-	): this;
 
 	/**
 	 * @function cube 绘制立方体
@@ -110,13 +120,12 @@ abstract class AbstractRenderer<
 	 * 
 	 * 注意: 这里的半径指的是立方体重心与立方体任意一面几何中心的距离
 	 */
-	abstract cube(id: ObjectID, position?: ObjectData, radius?: ObjectData, param?:
+	abstract cube(id: ObjectID, position?: ObjectData, param?: Readonly<P["cube"] & ICommonParam>): this;
-		Readonly<IParameterValue<IDefaultType<P["cube"], {}>>>
-	): this;
 }
 
 export default AbstractRenderer;
 export { 
-    AbstractRenderer, ICommonParam, IRendererParam, 
+    AbstractRenderer, ObjectID, IAnyObject,
+    ICommonParam, IRendererParam, 
     ObjectData, IRendererConstructor 
 };

source/Page/Laboratory/Laboratory.tsx

@@ -21,7 +21,7 @@ class Laboratory extends Component {
             throw new Error("Laboratory: 重复引用 canvas 节点");
         }
 
-        const renderer = new ClassicRenderer().onLoad();
+        const renderer = new ClassicRenderer({ className: "canvas" }).onLoad();
         this.canvasContRef.current.appendChild(renderer.canvas.dom);
 
         let model = new Model().bindRenderer(renderer);
@@ -39,24 +39,22 @@ class Laboratory extends Component {
 
         // 测试渲染器
         if (false) {
-            // renderer.points("0");
+            renderer.points("0");
-            // renderer.points("1", new Array(100 * 3).fill(0).map(() => (Math.random() - .5) * 2));
+            renderer.points("1", new Array(100 * 3).fill(0).map(() => (Math.random() - .5) * 2));
-            // renderer.points("2", new Array(100 * 3).fill(0).map(() => (Math.random() - .5) * 2), {
+            renderer.points("2", new Array(100 * 3).fill(0).map(() => (Math.random() - .5) * 2), {
-            //     size: 100,
+                size: 100,
-            //     color: [1, 0, 1]
+                color: [1, 0, 1]
-            // });
+            });
-            // renderer.points("3", new Array(100 * 3).fill(0).map(() => (Math.random() - .5) * 2), {
+            renderer.points("3", new Array(100 * 3).fill(0).map(() => (Math.random() - .5) * 2), {
-            //     size: 80,
+                size: 80,
-            //     color: [0, 1, 1]
+                color: [0, 1, 1]
-            // });
+            });
-            // renderer.points("2");
+            renderer.points("2");
-            // renderer.cube("4");
+            renderer.cube("4");
-            // renderer.cube("5",
+            renderer.cube("5", new Array(3).fill(0).map(() => (Math.random() - .5) * 2), {
-            //     new Array(3).fill(0).map(() => (Math.random() - .5) * 2),
+                radius: new Array(3).fill(0).map(() => Math.random() * 1.2),
-            //     new Array(3).fill(0).map(() => Math.random() * 1.2), {
+                color: [1, 1, 0]
-            //         color: [1, 1, 0]
+            })
-            //     }
-            // )
         }
 
         (window as any).renderer = renderer;

source/Page/SimulatorWeb/SimulatorWeb.tsx

@@ -35,9 +35,9 @@ class SimulatorWeb extends Component {
         (window as any).setting = (this.setting as any);
 
         // TODO: 这里要读取存档
-        const classicRender = new ClassicRenderer().onLoad();
         this.status = new Status();
-        this.status.bindRenderer(classicRender);
+        this.status.renderer = new ClassicRenderer({ className: "canvas" }).onLoad();
+        this.status.bindRenderer(this.status.renderer);
         this.status.setting = this.setting;
 
         // 测试代码

source/Panel/GroupDetails/GroupDetails.tsx

@@ -4,7 +4,7 @@ import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
 import { useSetting, IMixinSettingProps } from "@Context/Setting";
 import { ComboInput, IDisplayItem } from "@Input/ComboInput/ComboInput";
 import { Message } from "@Input/Message/Message";
-import { ObjectID } from "@Model/Model";
+import { ObjectID } from "@Model/Renderer";
 import { ColorInput } from "@Input/ColorInput/ColorInput";
 import { TogglesInput } from "@Input/TogglesInput/TogglesInput";
 import { LabelPicker } from "@Input/LabelPicker/LabelPicker";
@@ -13,7 +13,6 @@ import { AllI18nKeys } from "@Component/Localization/Localization";
 import { ObjectPicker } from "@Input/ObjectPicker/ObjectPicker";
 import { ConfirmPopup } from "@Component/ConfirmPopup/ConfirmPopup";
 import { BehaviorPicker } from "@Input/BehaviorPicker/BehaviorPicker";
-import { Parameter } from "@Input/Parameter/Parameter";
 import "./GroupDetails.scss";
 
 interface IGroupDetailsProps {}
@@ -55,6 +54,14 @@ class GroupDetails extends Component<IGroupDetailsProps & IMixinStatusProps & IM
                 }}
             />
 
+            <AttrInput
+                id={group.id} isNumber={true} step={10} keyI18n="Common.Attr.Key.Size"
+                value={group.size} min={0}
+                valueChange={(val) => {
+                    this.props.status?.changeGroupAttrib(group.id, "size", (val as any) / 1);
+                }}
+            />
+
             <LabelPicker
                 keyI18n="Common.Attr.Key.Label"
                 labels={group.allLabels()}
@@ -108,23 +115,6 @@ class GroupDetails extends Component<IGroupDetailsProps & IMixinStatusProps & IM
 				}}
 			/>
             
-            <Parameter
-                key={group.id}
-                option={this.props.status?.renderer.pointsParameterOption ?? {}}
-                title={"Common.Attr.Title.Render.Parameter"}
-                value={group.renderParameter}
-                renderKey={
-                    Object.getOwnPropertyNames(this.props.status?.renderer.pointsParameterOption ?? {})
-                    .filter((key) => key !== "color")
-                }
-                change={(key, value) => {
-                    group.renderParameter[key as any] = value;
-                    this.props.status?.changeGroupAttrib(
-                        group.id, "renderParameter", group.renderParameter
-                    );
-                }}
-            />
-            
             <Message i18nKey="Common.Attr.Title.Behaviors" isTitle/>
 
             <BehaviorPicker

source/Panel/ObjectList/ObjectCommand.tsx

@@ -2,7 +2,7 @@ import { Component, ReactNode } from "react";
 import { BackgroundLevel, FontLevel, Theme } from "@Component/Theme/Theme";
 import { useStatus, IMixinStatusProps } from "@Context/Status";
 import { ConfirmPopup } from "@Component/ConfirmPopup/ConfirmPopup";
-import { ObjectID } from "@Model/Model";
+import { ObjectID } from "@Model/Renderer";
 import { Icon } from "@fluentui/react";
 import "./ObjectList.scss";
 

source/Panel/ObjectList/ObjectList.tsx

@@ -3,7 +3,7 @@ import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
 import { useSetting, IMixinSettingProps } from "@Context/Setting";
 import { Localization } from "@Component/Localization/Localization";
 import { DetailsList } from "@Component/DetailsList/DetailsList";
-import { ObjectID } from "@Model/Model";
+import { ObjectID } from "@Model/Renderer";
 import { Icon } from "@fluentui/react";
 import "./ObjectList.scss";
 

source/Panel/RangeDetails/RangeDetails.tsx

@@ -3,12 +3,11 @@ import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
 import { AttrInput } from "@Input/AttrInput/AttrInput";
 import { Message } from "@Input/Message/Message";
 import { Range } from "@Model/Range";
-import { ObjectID } from "@Model/Model";
+import { ObjectID } from "@Model/Renderer";
 import { ColorInput } from "@Input/ColorInput/ColorInput";
 import { TogglesInput } from "@Input/TogglesInput/TogglesInput";
 import { LabelPicker } from "@Input/LabelPicker/LabelPicker";
 import { ConfirmPopup } from "@Component/ConfirmPopup/ConfirmPopup";
-import { Parameter } from "@Input/Parameter/Parameter";
 import "./RangeDetails.scss";
 
 @useStatusWithEvent("rangeAttrChange", "focusObjectChange", "rangeLabelChange")
@@ -73,23 +72,6 @@ class RangeDetails extends Component<IMixinStatusProps> {
 				}}
 			/>
 
-            <Parameter
-                key={range.id}
-                option={this.props.status?.renderer.cubeParameterOption ?? {}}
-                title={"Common.Attr.Title.Render.Parameter"}
-                value={range.renderParameter}
-                renderKey={
-                    Object.getOwnPropertyNames(this.props.status?.renderer.cubeParameterOption ?? {})
-                    .filter((key) => key !== "color")
-                }
-                change={(key, value) => {
-                    range.renderParameter[key as any] = value;
-                    this.props.status?.changeRangeAttrib(
-                        range.id, "renderParameter", range.renderParameter
-                    );
-                }}
-            />
-
             <Message i18nKey="Common.Attr.Title.Spatial" isTitle/>
 
             <AttrInput