10 changed files with 15 additions and 248 deletions
--- a/source/Component/CommandBar/CommandBar.tsx
+++ b/source/Component/CommandBar/CommandBar.tsx
@ -68,13 +68,7 @@ class CommandBar extends Component<ICommandBarProps & IMixinSettingProps & IMixi
                {this.getRenderButton({ iconName: "Camera", i18NKey: "Command.Bar.Camera.Info" })}
            </div>
            <div>
-                {this.getRenderButton({
-                    iconName: "Settings",
-                    i18NKey: "Command.Bar.Setting.Info",
-                    click: () => {
-                        this.props.status ? this.props.status.popup.showPopup() : undefined;
-                    }
-                })}
+                {this.getRenderButton({ iconName: "Settings", i18NKey: "Command.Bar.Setting.Info" })}
            </div>
        </Theme>
    }
--- a/source/Component/Localization/Localization.tsx
+++ b/source/Component/Localization/Localization.tsx
@ -2,8 +2,8 @@ import { Component, ReactNode, DetailedHTMLProps, HTMLAttributes } from "react";
 import { useSetting, IMixinSettingProps, Language } from "@Context/Setting";
 import "./Localization.scss";

-import EN_US from "@Localization/EN-US";
-import ZH_CN from "@Localization/ZH-CN";
+import EN_US from "../../Localization/EN-US";
+import ZH_CN from "../../Localization/ZH-CN";

 const LanguageDataBase = {
    EN_US, ZH_CN
--- a/source/Component/Message/Message.tsx
+++ b/source/Component/Message/Message.tsx
@ -1,5 +1,5 @@
 import { AllI18nKeys, I18N } from "@Component/Localization/Localization";
-import { useSettingWithEvent, IMixinSettingProps, Themes, Language } from "@Context/Setting";
+import { useStatusWithEvent, 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 = useSettingWithEvent("language", "themes")(MessageView);
+const Message = useStatusWithEvent("language", "themes")(MessageView);
 export { Message };
--- a/source/Component/Popup/Popup.scss
+++ b/source/Component/Popup/Popup.scss
@ -1,71 +0,0 @@
-@import "../Theme/Theme.scss";
-
-@keyframes show-scale{
-    from {
-        transform: scale3d(1.15, 1.15, 1);
-    }
-    to {
-        transform: scale3d(1, 1, 1);
-    }
-}
-
-@keyframes show-fade{
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
-}
-
-div.popup-mask.show-fade {
-    animation: show-fade .1s cubic-bezier(0, 0, 1, 1) both;
-    opacity: 1;
-}
-
-div.popup-layer.show-scale {
-    animation: show-scale .3s cubic-bezier(.1, .9, .2, 1) both,
-    show-fade .1s cubic-bezier(0, 0, 1, 1) both;
-    transform: scale3d(1, 1, 1);
-    opacity: 1;
-}
-
-div.popup-mask {
-    position: absolute;
-    cursor: pointer;
-    width: 100%;
-    height: 100%;
-}
-
-div.popup-layer {
-    position: absolute;
-    border-radius: 3px;
-    overflow: hidden;
-
-    div.popup-layer-header {
-        min-height: 32px;
-        max-height: 32px;
-    }
-}
-
-div.popup-layer.dark {
-
-    div.popup-layer-header {
-        background-color: $lt-bg-color-lvl3-dark;
-    }
-}
-
-div.popup-layer.light {
-
-    div.popup-layer-header {
-        background-color: $lt-bg-color-lvl3-light;
-    }
-}
-
-div.dark.popup-mask {
-    background-color: rgba(0, 0, 0, 0.55);
-}
-
-div.light.popup-mask {
-    background-color: rgba(0, 0, 0, 0.15);
-}
--- a/source/Component/Popup/Popup.tsx
+++ b/source/Component/Popup/Popup.tsx
@ -1,97 +0,0 @@
-import { Component, ReactNode } from "react";
-import { IMixinStatusProps, useStatusWithEvent } from "@Context/Status";
-import { BackgroundLevel, Theme } from "@Component/Theme/Theme";
-import { Popup as PopupModel } from "@Context/Popups";
-import "./Popup.scss";
-
-interface IPopupProps {}
-
-@useStatusWithEvent("popupChange")
-class Popup extends Component<IPopupProps & IMixinStatusProps> {
-
-    public renderMask(index?: number, click?: () => void, key?: string): ReactNode {
-        const classList: string[] = ["popup-mask", "show-fade"];
-        return <Theme
-            key={key}
-            onClick={click}
-            className={classList.join(" ")}
-            style={{
-                zIndex: index,
-            }}
-        />
-    }
-
-    public renderRootMask(): ReactNode {
-        if (this.props.status) {
-            const needMask = this.props.status.popup.popups.some(popup => popup.needMask);
-            if (!needMask) return null;
-            return this.renderMask(this.props.status.popup.zIndex,
-                () => {
-                    this.props.status?.popup.popups.forEach(
-                        popup => popup.onClose()
-                    )
-                }
-            );
-        } else {
-            return null;
-        }
-    }
-
-    public renderMaskList(): ReactNode {
-        if (this.props.status) {
-            return this.props.status.popup.popups
-            .filter((popup) => {
-                return popup.needMask && popup.maskForSelf;
-            })
-            .filter((_, index) => {
-                if (index === 0) return false;
-                return true;
-            })
-            .map((popup) => {
-                return this.renderMask(popup.zIndex() - 1,
-                    () => {
-                        popup.onClose();
-                    }, popup.id
-                );
-            })
-        } else {
-            return null;
-        }
-    }
-
-    public renderLayer(popup: PopupModel) {
-        const pageWidth = document.documentElement.clientWidth;
-        const pageHeight = document.documentElement.clientHeight;
-        const top = (pageHeight - popup.height) / 2;
-        const left = (pageWidth - popup.width) / 2;
-
-        return <Theme
-            style={{
-                width: popup.width,
-                height: popup.height,
-                zIndex: popup.zIndex(),
-                top: top,
-                left: left
-            }}
-            key={popup.id}
-            backgroundLevel={BackgroundLevel.Level4}
-            className="popup-layer show-scale"
-        >
-            <div className="popup-layer-header">
-                
-            </div>
-        </Theme>
-    }
-
-    public render(): ReactNode {
-        return <>
-            {this.renderRootMask()}
-            {this.renderMaskList()}
-            {this.props.status?.popup.popups.map((popup) => {
-                return this.renderLayer(popup);
-            })}
-        </>;
-    }
-}
-
-export { Popup };
--- a/source/Context/Popups.ts
+++ b/source/Context/Popups.ts
@ -8,33 +8,11 @@ type IPopupConstructor = new (controller: PopupController, id: string) => Popup;
 */
 class Popup {

-    public zIndex() {
-        return this.index * 2 + this.controller.zIndex;
-    }
-
-    public width: number = 300;
-
-    public height: number = 200;
-
-    public top: number = 0;
-
-    public left: number = 0;
-
    /**
     * 是否关闭
     */
    public isClose: boolean = false;

-    /**
-     * 需要蒙版
-     */
-    public needMask: boolean = true;
-
-    /**
-     * 单独遮挡下层的蒙版
-     */
-    public maskForSelf: boolean = false;
-
    /**
     * 唯一标识符
     */
@ -58,29 +36,18 @@ class Popup {
    /**
     * 渲染函数
     */
-    public onRender(p: Popup): ReactNode {
-        return null;
-    }
-
-    /**
-     * 关闭回调
-     */
-    public onClose(): void {
-        this.close();
-    };
+    public rendererFunction: undefined | ((p: Popup) => ReactNode);

    /**
     * 渲染节点
     */
    public render(): ReactNode {
-        this.reactNode = this.onRender(this);
+        if (this.rendererFunction) {
+            this.reactNode = this.rendererFunction(this);
+        }
        return this.reactNode;
    };

-    public close() {
-        return this.controller.closePopup(this);
-    }
-
    public constructor(controller: PopupController, id: string) {
        this.controller = controller;
        this.id = id;
@ -101,11 +68,6 @@ class PopupController extends Emitter<IPopupControllerEvent> {
     */
    private idIndex = 0;

-    /**
-     * 最小弹窗 Index
-     */
-    public zIndex = 100;
-
    /**
     * 弹窗列表
     */
@ -120,7 +82,6 @@ class PopupController extends Emitter<IPopupControllerEvent> {
            popup.index = (index + 1);
            return popup;
        });
-        this.emit("popupChange");
    }

    /**
@ -129,7 +90,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.sortPopup();
+        this.emit("popupChange");
        return newPopup;
    }

@ -149,7 +110,6 @@ class PopupController extends Emitter<IPopupControllerEvent> {
                let isDelete = currentPopup.id === id;
                if (isDelete) {
                    closePopup = currentPopup;
-                    currentPopup.isClose = true;
                    return false;
                } else {
                    return true;
@ -157,7 +117,6 @@ class PopupController extends Emitter<IPopupControllerEvent> {
            }
        );
        if (closePopup) {
-            this.sortPopup();
            this.emit("popupChange");
        }
        return closePopup;
--- a/source/Context/Setting.tsx
+++ b/source/Context/Setting.tsx
@ -14,7 +14,7 @@ enum Themes {
 type Language = "ZH_CN" | "EN_US";

 interface ISettingEvents extends Setting {
-    attrChange: keyof Setting;
+    change: 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("attrChange", key);
+        this.emit("change", key);
        this.emit(key as any, value as any);
    }
 }
@ -59,9 +59,9 @@ const SettingConsumer = SettingContext.Consumer;
 */
 const useSetting = superConnect<Setting>(SettingConsumer, "setting");

-const useSettingWithEvent = superConnectWithEvent<Setting, ISettingEvents>(SettingConsumer, "setting");
+const useStatusWithEvent = superConnectWithEvent<Setting, ISettingEvents>(SettingConsumer, "setting");

 export {
-    Themes, Setting, SettingContext, useSetting, Language, useSettingWithEvent,
+    Themes, Setting, SettingContext, useSetting, Language, useStatusWithEvent,
    IMixinSettingProps, SettingProvider, SettingConsumer
 };
--- a/source/Context/Status.tsx
+++ b/source/Context/Status.tsx
@ -1,4 +1,4 @@
-import { createContext } 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";
@ -10,7 +10,6 @@ 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 = [
@ -40,7 +39,6 @@ interface IStatusEvent {
    labelAttrChange: void;
    groupAttrChange: void;
    individualChange: void;
-    popupChange: void;
 }

 class Status extends Emitter<IStatusEvent> {
@ -68,11 +66,6 @@ class Status extends Emitter<IStatusEvent> {
     */
    public model: Model = new Model();

-    /**
-     * 弹窗
-     */
-    public popup: PopupController = new PopupController();
-
    /**
     * 焦点对象
     */
@ -103,9 +96,6 @@ 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);
--- a/source/Page/SimulatorWeb/SimulatorWeb.tsx
+++ b/source/Page/SimulatorWeb/SimulatorWeb.tsx
@ -9,7 +9,6 @@ import { initializeIcons } from '@fluentui/font-icons-mdl2';
 import { RootContainer } from "@Component/Container/RootContainer";
 import { LayoutDirection } from "@Context/Layout";
 import { CommandBar } from "@Component/CommandBar/CommandBar";
-import { Popup } from "@Component/Popup/Popup";
 import "./SimulatorWeb.scss";

 initializeIcons("https://img.mrkbear.com/fabric-cdn-prod_20210407.001/");
@ -102,7 +101,6 @@ class SimulatorWeb extends Component {
            backgroundLevel={BackgroundLevel.Level5}
            fontLevel={FontLevel.Level3}
        >
-            <Popup/>
            <HeaderBar height={45}/>
            <div className="app-root-space" style={{
                height: `calc( 100% - ${45}px)`
--- a/tsconfig.json
+++ b/tsconfig.json
@ -31,12 +31,6 @@
            ],
            "@Component/*": [
                "./source/Component/*"
-            ],
-            "@Localization/*": [
-                "./source/Localization/*"
-            ],
-            "@Panel/*": [
-                "./source/Panel/*"
            ]
        }
    },