feat: add unmount method

imtaotao · Jul 10, 2024 · e42e5ca · e42e5ca
1 parent 0b54808
commit e42e5ca
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 8 deletions.
diff --git a/demo/src/App.tsx b/demo/src/App.tsx
@@ -9,9 +9,13 @@ import { Transmitter } from '@/components/danmu/transmitter';
 export function App({ manager }: { manager: Manager<BarrageValue> }) {
   return (
     <div className="w-full bg-slate-200">
-      <div className="mx-auto aspect-[4/2] p-3 h-screen flex text-slate-600">
+      <div className="p-3 h-screen flex text-slate-600">
         <div className="min-w-96 w-96 mr-2 px-4 py-3 border-slate-400 border-indigo-500/50 rounded-sm bg-slate-300">
-          <a target="_blank" href="https://github.com/imtaotao/danmu">
+          <a
+            className="block w-[30px]"
+            target="_blank"
+            href="https://github.com/imtaotao/danmu"
+          >
             <img
               src={githubLogo}
               alt="github logo"

diff --git a/demo/src/components/danmu/area.tsx b/demo/src/components/danmu/area.tsx
@@ -7,7 +7,9 @@ export const Area = memo(({ manager }: { manager: Manager<BarrageValue> }) => {
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    const format = () => manager.format();
+    const format = () => {
+      manager.nextFrame(() => manager.format());
+    };
     if (ref.current) {
       manager.mount(ref.current).startPlaying();
       document.addEventListener('fullscreenchange', format);

diff --git a/demo/src/components/danmu/transmitter.tsx b/demo/src/components/danmu/transmitter.tsx
@@ -41,7 +41,7 @@ export const Transmitter = ({
   const tip = (msg?: string) => {
     toast({
       duration: 800,
-      title: '发送失败',
+      variant: 'destructive',
       description: msg || '弹幕值不能为空',
     });
   };
@@ -152,7 +152,6 @@ export const Transmitter = ({
             </div>
             <SheetFooter>
               <Button
-                className="mb-[5px]"
                 onClick={() => {
                   if (manager.isFreeze()) {
                     return tip('当前处于冻结状态');

diff --git a/demo/src/components/sidebar/sidebarNumbers.tsx b/demo/src/components/sidebar/sidebarNumbers.tsx
@@ -47,7 +47,7 @@ export const SidebarNumbers = memo(
           </Label>
           <Badge>{stashNumber}</Badge>
         </div>
-        <div className="flex h-8 mb-8 items-center justify-between">
+        <div className="flex h-8 mb-5 items-center justify-between">
           <Label className="shrink-0 mr-3 h-full text-base font-bold leading-8 flex items-center">
             <Asterisk />
             <span className="ml-3">弹幕总量（包含暂存区）</span>

diff --git a/src/box.ts b/src/box.ts
@@ -25,10 +25,14 @@ export class Box {
   }
 
   public mount(c: HTMLElement) {
+    this.unmount();
+    c.appendChild(this.node);
+  }
+
+  public unmount() {
     if (this.node.parentNode) {
       this.node.parentNode.removeChild(this.node);
     }
-    c.appendChild(this.node);
   }
 
   public updateSize({ x, y }: Partial<Box['size']>) {

diff --git a/src/lifeCycle.ts b/src/lifeCycle.ts
@@ -33,12 +33,13 @@ export function createManagerLifeCycle<T>() {
     $appendNode: lifecycle.appendNode,
     $removeNode: lifecycle.removeNode,
     // Global hooks
-    mount: new SyncHook<[]>(),
     format: new SyncHook<[]>(),
     start: new SyncHook<[]>(),
     stop: new SyncHook<[]>(),
     show: new SyncHook<[]>(),
     hide: new SyncHook<[]>(),
+    mount: new SyncHook<[]>(),
+    unmount: new SyncHook<[]>(),
     clear: new SyncHook<[]>(),
     freeze: new SyncHook<[]>(),
     unfreeze: new SyncHook<[]>(),

diff --git a/src/manager.ts b/src/manager.ts
@@ -113,6 +113,13 @@ export class Manager<T extends unknown> {
     return this;
   }
 
+  public unmount() {
+    this.box.unmount();
+    this._container = null;
+    this.plSys.lifecycle.unmount.emit();
+    return this;
+  }
+
   public clear(_flag?: Symbol) {
     // No need to use `destroy` to save loop times
     this.each((b) => b.removeNode());