refactor: adjust move hooks

imtaotao · Sep 14, 2024 · d80405c · d80405c
1 parent 47c5982
commit d80405c
Show file tree

Hide file tree

Showing 17 changed files with 37 additions and 38 deletions.
diff --git a/demo/src/components/danmu/Danmaku.tsx b/demo/src/components/danmu/Danmaku.tsx
@@ -39,7 +39,7 @@ export const DanmakuComponent = ({
     resume() {
       setOpen(false);
     },
-    moveStart(dm) {
+    beforeMove(dm) {
       for (const key in manager.statuses) {
         dm.setStyle(
           key as keyof Statuses,

diff --git a/demo/src/components/sidebar/SidebarNumbers.tsx b/demo/src/components/sidebar/SidebarNumbers.tsx
@@ -27,7 +27,7 @@ export const SidebarNumbers = memo(
         push: () => update(),
         clear: () => update(),
         $destroyed: () => update(),
-        $moveStart: () => update(),
+        $beforeMove: () => update(),
       });
       return () => {
         manager.remove(name);

diff --git a/docs/en/cases/custom-danmaku.md b/docs/en/cases/custom-danmaku.md
@@ -44,7 +44,7 @@ const styles = {
 // Add hooks during initialization so that new danmaku will automatically have these styles applied when rendered
 const manager = create({
   plugin: {
-    $moveStart(danmaku) {
+    $beforeMove(danmaku) {
       for (const key in styles) {
         danmaku.setStyle(key, styles[key]);
       }

diff --git a/docs/en/cases/loop.md b/docs/en/cases/loop.md
@@ -16,12 +16,12 @@ Adding a global hook will affect all danmaku.
 ```ts {5,11}
 const manager = create<string>({
   plugin: {
-    $moveStart(danmaku) {
+    $beforeMove(danmaku) {
       // Set loop
       danmaku.setloop();
     },
 
-    $moveEnd(danmaku) {
+    $moved(danmaku) {
       // Stop loop playback after 3 looping
       if (danmaku.loops >= 3) {
         danmaku.unloop();
@@ -38,12 +38,12 @@ By adding a plugin to the danmaku itself, you can make it effective for only a s
 ```ts {5,11}
 manager.push('content', {
   plugin: {
-    moveStart(danmaku) {
+    beforeMove(danmaku) {
       // Set loop
       danmaku.setloop();
     },
 
-    moveEnd(danmaku) {
+    moved(danmaku) {
       // Stop loop playback after 3 looping
       if (danmaku.loops >= 3) {
         danmaku.unloop();

diff --git a/docs/en/guide/getting-started.md b/docs/en/guide/getting-started.md
@@ -104,8 +104,8 @@ However, when sending danmaku, you can also pass plugins specific to the danmaku
 ```ts
 manager.push('content', {
   plugin: {
-    moveStart(danmaku) {
-      // The moveStart hook is triggered just before the danmaku starts moving.
+    beforeMove(danmaku) {
+      // The beforeMove hook is triggered just before the danmaku starts moving.
       // You can change the danmaku's style here.
       danmaku.setStyle(cssKey, cssValue);
     },

diff --git a/docs/en/guide/typescript-interface.md b/docs/en/guide/typescript-interface.md
@@ -12,7 +12,7 @@ When you get the `danmaku` instance type in various hooks, the type of its **con
 import { create } from 'danmu';
 
 const manager = create<{ content: string; img: string }>({
-  $moveStart(danmaku) {
+  $beforeMove(danmaku) {
     // You can see that the `data` type is `{ content: string, img: string }`
     danmaku.data;
   },

diff --git a/docs/en/reference/danmaku-api.md b/docs/en/reference/danmaku-api.md
@@ -71,7 +71,7 @@ Destroy the current danmaku instance from the container and remove it from memor
 ```ts {4,8,14}
 const manager = create({
   plugin: {
-    $moveEnd(danmaku) {
+    $moved(danmaku) {
       danmaku.destroy('mark');
     },
 

diff --git a/docs/en/reference/danmaku-hooks.md b/docs/en/reference/danmaku-hooks.md
@@ -51,17 +51,17 @@ The `pause` hook is triggered when the danmaku is paused.
 
 The `resume` hook is triggered when the danmaku resumes from being paused.
 
-## `hooks.moveStart`
+## `hooks.beforeMove`
 
 **Type: `SyncHook<[Danmaku<T>]>`**
 
-The `moveStart` hook is triggered just before the danmaku starts moving. You can make some style changes to the danmaku at this time.
+The `beforeMove` hook is triggered just before the danmaku starts moving. You can make some style changes to the danmaku at this time.
 
-## `hooks.moveEnd`
+## `hooks.moved`
 
 **Type: `SyncHook<[Danmaku<T>]>`**
 
-The `moveEnd` hook is triggered when the danmaku finishes moving. Finishing the movement does not mean it will be destroyed immediately. For performance reasons, the kernel will batch collect and destroy them together.
+The `moved` hook is triggered when the danmaku finishes moving. Finishing the movement does not mean it will be destroyed immediately. For performance reasons, the kernel will batch collect and destroy them together.
 
 ## `hooks.appendNode`
 

diff --git a/docs/zh/cases/custom-danmaku.md b/docs/zh/cases/custom-danmaku.md
@@ -44,7 +44,7 @@ const styles = {
 // 初始化的时候添加钩子处理，这样当有新的弹幕渲染时会自动添加上这些样式
 const manager = create({
   plugin: {
-    $moveStart(danmaku) {
+    $beforeMove(danmaku) {
       for (const key in styles) {
         danmaku.setStyle(key, styles[key]);
       }

diff --git a/docs/zh/cases/loop.md b/docs/zh/cases/loop.md
@@ -16,12 +16,12 @@
 ```ts {5,11}
 const manager = create<string>({
   plugin: {
-    $moveStart(danmaku) {
+    $beforeMove(danmaku) {
       // 设置循环
       danmaku.setloop();
     },
 
-    $moveEnd(danmaku) {
+    $moved(danmaku) {
       // 循环播放 3 次后，终止循环播放
       if (danmaku.loops >= 3) {
         danmaku.unloop();
@@ -38,12 +38,12 @@ const manager = create<string>({
 ```ts {5,11}
 manager.push('弹幕内容', {
   plugin: {
-    moveStart(danmaku) {
+    beforeMove(danmaku) {
       // 设置循环
       danmaku.setloop();
     },
 
-    moveEnd(danmaku) {
+    moved(danmaku) {
       // 循环播放 3 次后，终止循环播放
       if (danmaku.loops >= 3) {
         danmaku.unloop();

diff --git a/docs/zh/guide/getting-started.md b/docs/zh/guide/getting-started.md
@@ -98,8 +98,8 @@ manager.unshift('弹幕内容');
 ```ts
 manager.push('弹幕内容', {
   plugin: {
-    moveStart(danmaku) {
-      // moveStart 钩子会在弹幕即将开始运动之前触发，你可以在这里更改弹幕的样式
+    beforeMove(danmaku) {
+      // beforeMove 钩子会在弹幕即将开始运动之前触发，你可以在这里更改弹幕的样式
       danmaku.setStyle(cssKey, cssValue);
     },
   },

diff --git a/docs/zh/guide/typescript-interface.md b/docs/zh/guide/typescript-interface.md
@@ -12,7 +12,7 @@ Danmaku 的 `TypeScript` 类型声明很齐全，所以当你在 `TypeScript`
 import { create } from 'danmu';
 
 const manager = create<{ content: string; img: string }>({
-  $moveStart(danmaku) {
+  $beforeMove(danmaku) {
     // 你可以看到 data 类型为 { content: string, img: string }
     danmaku.data;
   },

diff --git a/docs/zh/reference/danmaku-api.md b/docs/zh/reference/danmaku-api.md
@@ -71,7 +71,7 @@ manager.use({
 ```ts {4,8,14}
 const manager = create({
   plugin: {
-    $moveEnd(danmaku) {
+    $moved(danmaku) {
       danmaku.destroy('mark');
     },
 

diff --git a/docs/zh/reference/danmaku-hooks.md b/docs/zh/reference/danmaku-hooks.md
@@ -51,17 +51,17 @@ danmaku.use({
 
 `resume` 钩子会在弹幕从暂停恢复的时候触发。
 
-## `hooks.moveStart`
+## `hooks.beforeMove`
 
 **类型：`SyncHook<[Danmaku<T>]>`**
 
-`moveStart` 钩子会在弹幕即将运动的时候触发，你可以在此时对弹幕做一些样式变更操作。
+`beforeMove` 钩子会在弹幕即将运动的时候触发，你可以在此时对弹幕做一些样式变更操作。
 
-## `hooks.moveEnd`
+## `hooks.moved`
 
 **类型：`SyncHook<[Danmaku<T>]>`**
 
-`moveEnd` 钩子会在弹幕运动结束的时候触发，运动结束不代表会立即销毁，为了性能考虑，内核引擎会批量收集统一销毁。
+`moved` 钩子会在弹幕运动结束的时候触发，运动结束不代表会立即销毁，为了性能考虑，内核引擎会批量收集统一销毁。
 
 ## `hooks.appendNode`
 
@@ -98,7 +98,6 @@ manager.use({
 });
 ```
 
-
 ## `hooks.beforeDestroy`
 
 **类型：`AsyncHook<[Danmaku<T>, unknown]>`**
@@ -134,4 +133,4 @@ manager.use({
     }
   },
 });
-```
+```
diff --git a/src/danmaku/facile.ts b/src/danmaku/facile.ts
@@ -176,13 +176,13 @@ export class FacileDanmaku<T> {
       }
       this.moving = true;
       this.recorder.startTime = now();
-      this.pluginSystem.lifecycle.moveStart.emit(this);
+      this.pluginSystem.lifecycle.beforeMove.emit(this);
 
       whenTransitionEnds(this.node).then(() => {
         this.loops++;
         this.moving = false;
         this.isEnded = true;
-        this.pluginSystem.lifecycle.moveEnd.emit(this);
+        this.pluginSystem.lifecycle.moved.emit(this);
         resolve();
       });
     });

diff --git a/src/danmaku/flexible.ts b/src/danmaku/flexible.ts
@@ -48,7 +48,7 @@ export class FlexibleDanmaku<T> extends FacileDanmaku<T> {
           this.moveTimer.clear();
           this.moveTimer = null;
         }
-        this.pluginSystem.lifecycle.moveEnd.emit(this);
+        this.pluginSystem.lifecycle.moved.emit(this);
         resolve();
       };
 
@@ -57,7 +57,7 @@ export class FlexibleDanmaku<T> extends FacileDanmaku<T> {
       }
       this.moving = true;
       this.recorder.startTime = now();
-      this.pluginSystem.lifecycle.moveStart.emit(this);
+      this.pluginSystem.lifecycle.beforeMove.emit(this);
 
       if (this.direction === 'none') {
         let timer: unknown | null = setTimeout(onEnd, this.actualDuration());

diff --git a/src/lifeCycle.ts b/src/lifeCycle.ts
@@ -14,8 +14,8 @@ export function createDanmakuLifeCycle<T extends Danmaku<any>>() {
     show: new SyncHook<[T]>(),
     pause: new SyncHook<[T]>(),
     resume: new SyncHook<[T]>(),
-    moveEnd: new SyncHook<[T]>(),
-    moveStart: new SyncHook<[T]>(),
+    beforeMove: new SyncHook<[T]>(),
+    moved: new SyncHook<[T]>(),
     createNode: new SyncHook<[T]>(),
     appendNode: new SyncHook<[T]>(),
     removeNode: new SyncHook<[T]>(),
@@ -32,8 +32,8 @@ export function createManagerLifeCycle<T>() {
     $hide: lifecycle.hide,
     $pause: lifecycle.pause,
     $resume: lifecycle.resume,
-    $moveEnd: lifecycle.moveEnd,
-    $moveStart: lifecycle.moveStart,
+    $beforeMove: lifecycle.beforeMove,
+    $moved: lifecycle.moved,
     $createNode: lifecycle.createNode,
     $appendNode: lifecycle.appendNode,
     $removeNode: lifecycle.removeNode,