fix #50 (#55)

tulipjs · Jun 21, 2024 · 18b6d7d · 18b6d7d
1 parent 0c43859
commit 18b6d7d
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 12 deletions.
diff --git a/examples/example/src/player.component.ts b/examples/example/src/player.component.ts
@@ -6,6 +6,7 @@ import {
   ContainerProps,
   DisplayObjectEvent,
   DisplayObjectMutable,
+  Event,
   EventMode,
   global,
   PlayStatus,
@@ -67,13 +68,8 @@ export const playerComponent: AsyncComponent<Props, Mutable> = async (
     currentKeyList = currentKeyList.filter((cKey) => cKey != key);
   };
 
-  document.addEventListener("keydown", onKeyDown);
-  document.addEventListener("keyup", onKeyUp);
-
-  $player.on(DisplayObjectEvent.REMOVED, () => {
-    document.removeEventListener("keydown", onKeyDown);
-    document.removeEventListener("keyup", onKeyUp);
-  });
+  global.events.on(Event.KEY_DOWN, onKeyDown, $player);
+  global.events.on(Event.KEY_UP, onKeyUp, $player);
 
   return $player.getComponent(playerComponent);
 };
diff --git a/src/application.ts b/src/application.ts
@@ -66,6 +66,15 @@ export const application = async ({
   document.body.appendChild(application.canvas);
   global.$setApplication(application);
 
+  //### DOCUMENT #####################################################################################################//
+
+  document.addEventListener("keydown", (event: KeyboardEvent) =>
+    global.events.$emit(Event.KEY_DOWN, event),
+  );
+  document.addEventListener("keyup", (event: KeyboardEvent) =>
+    global.events.$emit(Event.KEY_UP, event),
+  );
+
   //### DEVELOPMENT ##################################################################################################//
   if (importMetaEnv?.DEV) {
     //@ts-ignore

diff --git a/src/enums/events.enum.ts b/src/enums/events.enum.ts
@@ -1,5 +1,7 @@
 export enum Event {
   TICK,
+  KEY_DOWN,
+  KEY_UP,
 }
 
 export enum DisplayObjectEvent {

diff --git a/src/global/events.ts b/src/global/events.ts
@@ -1,16 +1,41 @@
-import { Event } from "../enums";
+import { DisplayObjectEvent, Event } from "../enums";
+import { DisplayObjectMutable } from "../types";
 
 export const events = () => {
-  let $eventMap: Record<Event, any[]> = {
+  let $eventMap: Record<Event, ((data?: any) => void)[]> = {
     [Event.TICK]: [],
+    [Event.KEY_DOWN]: [],
+    [Event.KEY_UP]: [],
   };
 
+  /**
+   * Usage
+   * ```
+   * const removeTick = global.events.on(Event.TICK, () => {});
+   * // Remove the event
+   * removeTick()
+   * ```
+   * or with displayObject
+   * ```
+   * global.events.on(Event.TICK, () => {}, displayObject);
+   * ```
+   * @param event
+   * @param callback
+   * @param displayObjectComponent
+   */
   const on = (
     event: Event,
     callback: (data?: any) => void | Promise<void>,
-  ): number => $eventMap[event].push(callback) - 1;
+    displayObjectComponent?: DisplayObjectMutable<any>,
+  ): (() => void) => {
+    const callbackId = $eventMap[event].push(callback) - 1;
+    displayObjectComponent?.on(DisplayObjectEvent.REMOVED, () => {
+      $remove(event, callbackId);
+    });
+    return () => $remove(event, callbackId);
+  };
 
-  const remove = (event: Event, callbackId: number) =>
+  const $remove = (event: Event, callbackId: number) =>
     ($eventMap[event] = $eventMap[event].map((callback, $callbackId) =>
       callbackId === $callbackId ? undefined : callback,
     ));
@@ -21,7 +46,7 @@ export const events = () => {
 
   return {
     on,
-    remove,
+    remove: $remove,
 
     $emit,
   };