Merge pull request #4951 from openhood/wasm-fix-remove-event-listeners

Fix add/remove event listeners in `core:sys/wasm`

core/sys/wasm/js/events.odin

@@ -346,13 +346,13 @@ add_event_listener :: proc(id: string, kind: Event_Kind, user_data: rawptr, call
 	return _add_event_listener(id, event_kind_string[kind], kind, user_data, callback, use_capture)
 }
 
-remove_event_listener :: proc(id: string, kind: Event_Kind, user_data: rawptr, callback: proc(e: Event)) -> bool {
+remove_event_listener :: proc(id: string, kind: Event_Kind, user_data: rawptr, callback: proc(e: Event), use_capture := false) -> bool {
 	@(default_calling_convention="contextless")
 	foreign dom_lib {
 		@(link_name="remove_event_listener")
-		_remove_event_listener :: proc(id: string, name: string, user_data: rawptr, callback: proc "odin" (Event)) -> bool ---
+		_remove_event_listener :: proc(id: string, name: string, user_data: rawptr, callback: proc "odin" (Event), use_capture: bool) -> bool ---
 	}
-	return _remove_event_listener(id, event_kind_string[kind], user_data, callback)
+	return _remove_event_listener(id, event_kind_string[kind], user_data, callback, use_capture)
 }
 
 add_window_event_listener :: proc(kind: Event_Kind, user_data: rawptr, callback: proc(e: Event), use_capture := false) -> bool {
@@ -364,20 +364,26 @@ add_window_event_listener :: proc(kind: Event_Kind, user_data: rawptr, callback:
 	return _add_window_event_listener(event_kind_string[kind], kind, user_data, callback, use_capture)
 }
 
-remove_window_event_listener :: proc(kind: Event_Kind, user_data: rawptr, callback: proc(e: Event)) -> bool {
+remove_window_event_listener :: proc(kind: Event_Kind, user_data: rawptr, callback: proc(e: Event), use_capture := false) -> bool {
 	@(default_calling_convention="contextless")
 	foreign dom_lib {
 		@(link_name="remove_window_event_listener")
-		_remove_window_event_listener :: proc(name: string, user_data: rawptr, callback: proc "odin" (Event)) -> bool ---
+		_remove_window_event_listener :: proc(name: string, user_data: rawptr, callback: proc "odin" (Event), use_capture: bool) -> bool ---
 	}
-	return _remove_window_event_listener(event_kind_string[kind], user_data, callback)
+	return _remove_window_event_listener(event_kind_string[kind], user_data, callback, use_capture)
 }
 
 remove_event_listener_from_event :: proc(e: Event) -> bool {
+  from_use_capture_false: bool
+  from_use_capture_true: bool
 	if e.id == "" {
-		return remove_window_event_listener(e.kind, e.user_data, e.callback)
-	}
-	return remove_event_listener(e.id, e.kind, e.user_data, e.callback)
+    from_use_capture_false = remove_window_event_listener(e.kind, e.user_data, e.callback, false)
+    from_use_capture_true = remove_window_event_listener(e.kind, e.user_data, e.callback, true)
+	} else {
+    from_use_capture_false = remove_event_listener(e.id, e.kind, e.user_data, e.callback, false)
+    from_use_capture_true = remove_event_listener(e.id, e.kind, e.user_data, e.callback, true)
+  }
+  return from_use_capture_false || from_use_capture_true
 }
 
 add_custom_event_listener :: proc(id: string, name: string, user_data: rawptr, callback: proc(e: Event), use_capture := false) -> bool {
@@ -388,13 +394,13 @@ add_custom_event_listener :: proc(id: string, name: string, user_data: rawptr, c
 	}
 	return _add_event_listener(id, name, .Custom, user_data, callback, use_capture)
 }
-remove_custom_event_listener :: proc(id: string, name: string, user_data: rawptr, callback: proc(e: Event)) -> bool {
+remove_custom_event_listener :: proc(id: string, name: string, user_data: rawptr, callback: proc(e: Event), use_capture := false) -> bool {
 	@(default_calling_convention="contextless")
 	foreign dom_lib {
 		@(link_name="remove_event_listener")
-		_remove_event_listener :: proc(id: string, name: string, user_data: rawptr, callback: proc "odin" (Event)) -> bool ---
+		_remove_event_listener :: proc(id: string, name: string, user_data: rawptr, callback: proc "odin" (Event), use_capture: bool) -> bool ---
 	}
-	return _remove_event_listener(id, name, user_data, callback)
+	return _remove_event_listener(id, name, user_data, callback, use_capture)
 }
 
 get_gamepad_state :: proc "contextless" (index: int, s: ^Gamepad_State) -> bool {

core/sys/wasm/js/events_all_targets.odin

@@ -263,7 +263,7 @@ add_event_listener :: proc(id: string, kind: Event_Kind, user_data: rawptr, call
 	panic("vendor:wasm/js not supported on non JS targets")
 }
 
-remove_event_listener :: proc(id: string, kind: Event_Kind, user_data: rawptr, callback: proc(e: Event)) -> bool {
+remove_event_listener :: proc(id: string, kind: Event_Kind, user_data: rawptr, callback: proc(e: Event), use_capture := false) -> bool {
 	panic("vendor:wasm/js not supported on non JS targets")
 }
 
@@ -271,7 +271,7 @@ add_window_event_listener :: proc(kind: Event_Kind, user_data: rawptr, callback:
 	panic("vendor:wasm/js not supported on non JS targets")
 }
 
-remove_window_event_listener :: proc(kind: Event_Kind, user_data: rawptr, callback: proc(e: Event)) -> bool {
+remove_window_event_listener :: proc(kind: Event_Kind, user_data: rawptr, callback: proc(e: Event), use_capture := false) -> bool {
 	panic("vendor:wasm/js not supported on non JS targets")
 }
 
@@ -282,6 +282,6 @@ remove_event_listener_from_event :: proc(e: Event) -> bool {
 add_custom_event_listener :: proc(id: string, name: string, user_data: rawptr, callback: proc(e: Event), use_capture := false) -> bool {
 	panic("vendor:wasm/js not supported on non JS targets")
 }
-remove_custom_event_listener :: proc(id: string, name: string, user_data: rawptr, callback: proc(e: Event)) -> bool {
+remove_custom_event_listener :: proc(id: string, name: string, user_data: rawptr, callback: proc(e: Event), use_capture := false) -> bool {
 	panic("vendor:wasm/js not supported on non JS targets")
-}
+}

core/sys/wasm/js/odin.js

@@ -17,7 +17,7 @@ class WasmMemoryInterface {
 	constructor() {
 		this.memory = null;
 		this.exports = null;
-		this.listenerMap = {};
+		this.listenerMap = new Map();
 
 		// Size (in bytes) of the integer type, should be 4 on `js_wasm32` and 8 on `js_wasm64p32`
 		this.intSize = 4;
@@ -1403,6 +1403,10 @@ function odinSetupDefaultImports(wasmMemoryInterface, consoleElement, memory) {
 		info.scrollTop = info.scrollHeight;
 	};
 
+	const listener_key = (id, name, data, callback, useCapture) => {
+		return `${id}-${name}-data:${data}-callback:${callback}-useCapture:${useCapture}`;
+	};
+
 	let webglContext = new WebGLInterface(wasmMemoryInterface);
 
 	const env = {};
@@ -1668,7 +1672,8 @@ function odinSetupDefaultImports(wasmMemoryInterface, consoleElement, memory) {
 
 					onEventReceived(event_data, data, callback);
 				};
-				wasmMemoryInterface.listenerMap[{data: data, callback: callback}] = listener;
+				let key = listener_key(id, name, data, callback, !!use_capture);
+				wasmMemoryInterface.listenerMap.set(key, listener);
 				element.addEventListener(name, listener, !!use_capture);
 				return true;
 			},
@@ -1685,12 +1690,13 @@ function odinSetupDefaultImports(wasmMemoryInterface, consoleElement, memory) {
 
 					onEventReceived(event_data, data, callback);
 				};
-				wasmMemoryInterface.listenerMap[{data: data, callback: callback}] = listener;
+				let key = listener_key('window', name, data, callback, !!use_capture);
+				wasmMemoryInterface.listenerMap.set(key, listener);
 				element.addEventListener(name, listener, !!use_capture);
 				return true;
 			},
 
-			remove_event_listener: (id_ptr, id_len, name_ptr, name_len, data, callback) => {
+			remove_event_listener: (id_ptr, id_len, name_ptr, name_len, data, callback, use_capture) => {
 				let id = wasmMemoryInterface.loadString(id_ptr, id_len);
 				let name = wasmMemoryInterface.loadString(name_ptr, name_len);
 				let element = getElement(id);
@@ -1698,24 +1704,28 @@ function odinSetupDefaultImports(wasmMemoryInterface, consoleElement, memory) {
 					return false;
 				}
 
-				let listener = wasmMemoryInterface.listenerMap[{data: data, callback: callback}];
-				if (listener == undefined) {
+				let key = listener_key(id, name, data, callback, !!use_capture);
+				let listener = wasmMemoryInterface.listenerMap.get(key);
+				if (listener === undefined) {
 					return false;
 				}
-				element.removeEventListener(name, listener);
+				wasmMemoryInterface.listenerMap.delete(key);
+
+				element.removeEventListener(name, listener, !!use_capture);
 				return true;
 			},
-			remove_window_event_listener: (name_ptr, name_len, data, callback) => {
+			remove_window_event_listener: (name_ptr, name_len, data, callback, use_capture) => {
 				let name = wasmMemoryInterface.loadString(name_ptr, name_len);
 				let element = window;
-				let key = {data: data, callback: callback};
-				let listener = wasmMemoryInterface.listenerMap[key];
-				if (!listener) {
+
+				let key = listener_key('window', name, data, callback, !!use_capture);
+				let listener = wasmMemoryInterface.listenerMap.get(key);
+				if (listener === undefined) {
 					return false;
 				}
-				wasmMemoryInterface.listenerMap[key] = undefined;
+				wasmMemoryInterface.listenerMap.delete(key);
 
-				element.removeEventListener(name, listener);
+				element.removeEventListener(name, listener, !!use_capture);
 				return true;
 			},