Add popup model

source/Component/Message/Message.tsx

@@ -1,5 +1,5 @@
 import { AllI18nKeys, I18N } from "@Component/Localization/Localization";
-import { useStatusWithEvent, IMixinSettingProps, Themes, Language } from "@Context/Setting";
+import { useSettingWithEvent, IMixinSettingProps, Themes, Language } from "@Context/Setting";
 import { FunctionComponent } from "react";
 import "./Message.scss";
 
@@ -38,5 +38,5 @@ const MessageView: FunctionComponent<IMessageProps & IMixinSettingProps> = (prop
     </div>
 }
 
-const Message = useStatusWithEvent("language", "themes")(MessageView);
+const Message = useSettingWithEvent("language", "themes")(MessageView);
 export { Message };

source/Context/Popups.ts

@@ -36,18 +36,27 @@ class Popup {
     /**
      * 渲染函数
      */
-    public rendererFunction: undefined | ((p: Popup) => ReactNode);
+    public onRender(p: Popup): ReactNode {
+        return null;
+    }
+
+    /**
+     * 关闭回调
+     */
+    public onClose(): void {};
 
     /**
      * 渲染节点
      */
     public render(): ReactNode {
-        if (this.rendererFunction) {
-            this.reactNode = this.rendererFunction(this);
-        }
+        this.reactNode = this.onRender(this);
         return this.reactNode;
     };
 
+    public close() {
+        return this.controller.closePopup(this);
+    }
+
     public constructor(controller: PopupController, id: string) {
         this.controller = controller;
         this.id = id;
@@ -82,6 +91,7 @@ class PopupController extends Emitter<IPopupControllerEvent> {
             popup.index = (index + 1);
             return popup;
         });
+        this.emit("popupChange");
     }
 
     /**
@@ -90,7 +100,7 @@ class PopupController extends Emitter<IPopupControllerEvent> {
     public showPopup<P extends IPopupConstructor>(popup?: P): Popup {
         let newPopup = new (popup ?? Popup)(this, `P-${this.idIndex ++}`);
         this.popups.push(newPopup);
-        this.emit("popupChange");
+        this.sortPopup();
         return newPopup;
     }
 
@@ -110,6 +120,8 @@ class PopupController extends Emitter<IPopupControllerEvent> {
                 let isDelete = currentPopup.id === id;
                 if (isDelete) {
                     closePopup = currentPopup;
+                    currentPopup.isClose = true;
+                    currentPopup.onClose();
                     return false;
                 } else {
                     return true;
@@ -117,6 +129,7 @@ class PopupController extends Emitter<IPopupControllerEvent> {
             }
         );
         if (closePopup) {
+            this.sortPopup();
             this.emit("popupChange");
         }
         return closePopup;

source/Context/Setting.tsx

@@ -14,7 +14,7 @@ enum Themes {
 type Language = "ZH_CN" | "EN_US";
 
 interface ISettingEvents extends Setting {
-    change: keyof Setting;
+    attrChange: keyof Setting;
 }
 
 class Setting extends Emitter<ISettingEvents> {
@@ -39,7 +39,7 @@ class Setting extends Emitter<ISettingEvents> {
      */
     public setProps<P extends keyof Setting>(key: P, value: Setting[P]) {
         this[key] = value as any;
-        this.emit("change", key);
+        this.emit("attrChange", key);
         this.emit(key as any, value as any);
     }
 }
@@ -59,9 +59,9 @@ const SettingConsumer = SettingContext.Consumer;
  */
 const useSetting = superConnect<Setting>(SettingConsumer, "setting");
 
-const useStatusWithEvent = superConnectWithEvent<Setting, ISettingEvents>(SettingConsumer, "setting");
+const useSettingWithEvent = superConnectWithEvent<Setting, ISettingEvents>(SettingConsumer, "setting");
 
 export {
-    Themes, Setting, SettingContext, useSetting, Language, useStatusWithEvent,
+    Themes, Setting, SettingContext, useSetting, Language, useSettingWithEvent,
     IMixinSettingProps, SettingProvider, SettingConsumer
 };

source/Context/Status.tsx

@@ -1,4 +1,4 @@
-import { createContext, Component, FunctionComponent, ReactNode } from "react";
+import { createContext } from "react";
 import { Emitter } from "@Model/Emitter";
 import { Model, ObjectID } from "@Model/Model";
 import { Label } from "@Model/Label";
@@ -10,6 +10,7 @@ import { ClassicRenderer, MouseMod } from "@GLRender/ClassicRenderer";
 import { Setting } from "./Setting";
 import { I18N } from "@Component/Localization/Localization";
 import { superConnectWithEvent, superConnect } from "./Context";
+import { PopupController } from "./Popups";
 
 function randomColor(unNormal: boolean = false) {
     const color = [
@@ -39,6 +40,7 @@ interface IStatusEvent {
     labelAttrChange: void;
     groupAttrChange: void;
     individualChange: void;
+    popupChange: void;
 }
 
 class Status extends Emitter<IStatusEvent> {
@@ -66,6 +68,11 @@ class Status extends Emitter<IStatusEvent> {
      */
     public model: Model = new Model();
 
+    /**
+     * 弹窗
+     */
+    public popup: PopupController = new PopupController();
+
     /**
      * 焦点对象
      */
@@ -96,6 +103,9 @@ class Status extends Emitter<IStatusEvent> {
         this.model.on("objectChange", () => this.emit("objectChange"));
         this.model.on("labelChange", () => this.emit("labelChange"));
 
+        // 弹窗事件
+        this.popup.on("popupChange", () => this.emit("popupChange"));
+
         // 对象变换时执行渲染，更新渲染器数据
         this.on("objectChange", this.delayDraw);
         this.model.on("individualChange", this.delayDraw);