Update use status api with mount event

source/Component/CommandBar/CommandBar.tsx

@@ -2,7 +2,7 @@ import { BackgroundLevel, Theme } from "@Component/Theme/Theme";
 import { DirectionalHint, IconButton } from "@fluentui/react";
 import { LocalizationTooltipHost } from "../Localization/LocalizationTooltipHost";
 import { useSetting, IMixinSettingProps } from "@Context/Setting";
-import { useStatus, IMixinStatusProps } from "@Context/Status";
+import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
 import { AllI18nKeys } from "../Localization/Localization";
 import { Component, ReactNode } from "react";
 import { MouseMod } from "@GLRender/ClassicRenderer";
@@ -12,26 +12,10 @@ interface ICommandBarProps {
     width: number;
 }
 
-@useStatus
 @useSetting
+@useStatusWithEvent("mouseModChange")
 class CommandBar extends Component<ICommandBarProps & IMixinSettingProps & IMixinStatusProps> {
 
-    private handelChange = () => {
-        this.forceUpdate();
-    }
-
-    componentDidMount() {
-        if (this.props.status) {
-            this.props.status.on("mouseModChange", this.handelChange)
-        }
-    }
-
-    componentWillUnmount() {
-        if (this.props.status) {
-            this.props.status.off("mouseModChange", this.handelChange)
-        }
-    }
-
     render(): ReactNode {
 
         const mouseMod = this.props.status?.mouseMod ?? MouseMod.Drag;
@@ -64,7 +48,6 @@ class CommandBar extends Component<ICommandBarProps & IMixinSettingProps & IMixi
                     i18NKey: "Command.Bar.Add.Group.Info",
                     click: () => {
                         this.props.status ? this.props.status.newGroup() : undefined;
-                        this.props.status ? this.props.status.model.draw() : undefined;
                     }
                 })}
                 {this.getRenderButton({
@@ -72,7 +55,6 @@ class CommandBar extends Component<ICommandBarProps & IMixinSettingProps & IMixi
                     i18NKey: "Command.Bar.Add.Range.Info",
                     click: () => {
                         this.props.status ? this.props.status.newRange() : undefined;
-                        this.props.status ? this.props.status.model.draw() : undefined;
                     }
                 })}
                 {this.getRenderButton({ iconName: "StepSharedAdd", i18NKey: "Command.Bar.Add.Behavior.Info" })}

source/Component/HeaderBar/HeaderBar.tsx

@@ -62,8 +62,8 @@ class HeaderBar extends Component<
         }
         if (status) {
             status.archive.on("save", this.changeListener);
-            status.model.on("loop", this.physicsFpsCalc);
-            status.renderer.on("loop", this.renderFpsCalc);
+            status.on("physicsLoop", this.physicsFpsCalc);
+            status.on("renderLoop", this.renderFpsCalc);
         }
     }
 
@@ -74,8 +74,8 @@ class HeaderBar extends Component<
         }
         if (status) {
             status.archive.off("save", this.changeListener);
-            status.model.off("loop", this.physicsFpsCalc);
-            status.renderer.off("loop", this.renderFpsCalc);
+            status.off("physicsLoop", this.physicsFpsCalc);
+            status.off("renderLoop", this.renderFpsCalc);
         }
     }