Add super connect function

source/Context/Context.tsx

@@ -0,0 +1,59 @@
+import { Emitter, EventType } from "@Model/Emitter";
+import { Component, FunctionComponent, ReactNode, Consumer } from "react";
+
+type RenderComponent = (new (...p: any) => Component<any, any, any>) | FunctionComponent<any>;
+
+function superConnect<C extends Emitter<E>, E extends Record<EventType, any>>(
+	consumer: Consumer<C>
+) {
+	return (...events: Array<keyof E>) => {
+		return <R extends RenderComponent>(components: R): R => {
+			const C = components as any;
+			return class extends Component<R> {
+	
+				private status: C | undefined;
+				private isEventMount: boolean = false;
+	
+				private handelChange = () => {
+					this.forceUpdate();
+				}
+	
+				private mountEvent() {
+					if (this.status && !this.isEventMount) {
+						this.isEventMount = true;
+						console.log("Component dep event mount: " + events.join(", "));
+						for (let i = 0; i < events.length; i++) {
+							this.status.on(events[i], this.handelChange);
+						}
+					}
+				}
+	
+				private unmountEvent() {
+					if (this.status) {
+						for (let i = 0; i < events.length; i++) {
+							this.status.off(events[i], this.handelChange);
+						}
+					}
+				}
+	
+				public render(): ReactNode {
+					const Consumer = consumer;
+					return <Consumer>
+						{(status: C) => {
+							this.status = status;
+							this.mountEvent();
+							return <C {...this.props} status={status}></C>;
+						}}
+					</Consumer>
+				}
+	
+				public componentWillUnmount() {
+					this.unmountEvent();
+				}
+	
+			} as any;
+		}
+	}
+}
+
+export { superConnect };

source/Context/Status.tsx

@@ -1,4 +1,4 @@
-import { createContext, Component, FunctionComponent, useState, useEffect, ReactNode } from "react";
+import { createContext, Component, FunctionComponent, ReactNode } from "react";
 import { Emitter } from "@Model/Emitter";
 import { Model, ObjectID } from "@Model/Model";
 import { Label } from "@Model/Label";
@@ -9,6 +9,7 @@ import { AbstractRenderer } from "@Model/Renderer";
 import { ClassicRenderer, MouseMod } from "@GLRender/ClassicRenderer";
 import { Setting } from "./Setting";
 import { I18N } from "@Component/Localization/Localization";
+import { superConnect } from "./Context";
 
 function randomColor(unNormal: boolean = false) {
     const color = [
@@ -272,53 +273,7 @@ function useStatus<R extends RenderComponent>(components: R): R {
     }) as any;
 }
 
-function useStatusWithEvent(...events: Array<keyof IStatusEvent>) {
+const useStatusWithEvent = superConnect<Status, IStatusEvent>(StatusConsumer);
-    return <R extends RenderComponent>(components: R): R => {
-        const C = components as any;
-        return class extends Component<R> {
-
-            private status: Status | undefined;
-            private isEventMount: boolean = false;
-
-            private handelChange = () => {
-                this.forceUpdate();
-            }
-
-            private mountEvent() {
-                if (this.status && !this.isEventMount) {
-                    this.isEventMount = true;
-                    console.log("Component dep event mount: " + events.join(", "));
-                    for (let i = 0; i < events.length; i++) {
-                        this.status.on(events[i], this.handelChange);
-                    }
-                }
-            }
-
-            private unmountEvent() {
-                if (this.status) {
-                    for (let i = 0; i < events.length; i++) {
-                        this.status.off(events[i], this.handelChange);
-                    }
-                }
-            }
-
-            public render(): ReactNode {
-                return <StatusConsumer>
-                    {(status: Status) => {
-                        this.status = status;
-                        this.mountEvent();
-                        return <C {...this.props} status={status}></C>;
-                    }}
-                </StatusConsumer>
-            }
-
-            public componentWillUnmount() {
-                this.unmountEvent();
-            }
-
-        } as any;
-    }
-}
 
 export {
     Status, StatusContext, useStatus, useStatusWithEvent,

source/Model/Label.ts

@@ -46,7 +46,7 @@ class Label {
      * 判断是否为相同标签
      */
     public equal(label: Label): boolean {
-        if (this.isDeleted() || label.isDeleted()) return false;
+        // if (this.isDeleted() || label.isDeleted()) return false;
         return this === label || this.id === label.id;
     }