Simplified add/remove listener logic

Author: bvaughn

lib/global/event-handlers/onGroupPointerLeave.ts

@@ -1,8 +1,19 @@
+import { read } from "../mutableState";
 import { onWindowPointerMove } from "./onWindowPointerMove";
 
 export function onGroupPointerLeave(event: PointerEvent) {
-  // The "pointerleave" event is not reliably triggered when the pointer exits a window or iframe
-  // To account for this, we listen for "pointerleave" events on the Group element itself
-  // The easiest way to handle these is to reuse the same logic as the Window "pointermove" event
-  onWindowPointerMove(event);
+  const { interactionState } = read();
+
+  switch (interactionState.state) {
+    case "active": {
+      interactionState.hitRegions.forEach((hitRegion) => {
+        if (event.currentTarget === hitRegion.group.element) {
+          // The "pointerleave" event is not reliably triggered when the pointer exits a window or iframe
+          // To account for this, we listen for "pointerleave" events on the Group element itself
+          // The easiest way to handle these is to reuse the same logic as the Window "pointermove" event
+          onWindowPointerMove(event);
+        }
+      });
+    }
+  }
 }

lib/global/event-handlers/onWindowPointerDown.ts

@@ -3,7 +3,6 @@ import type { RegisteredPanel } from "../../components/panel/types";
 import type { RegisteredSeparator } from "../../components/separator/types";
 import { read, update } from "../mutableState";
 import { findMatchingHitRegions } from "../utils/findMatchingHitRegions";
-import { onGroupPointerLeave } from "./onGroupPointerLeave";
 
 export function onWindowPointerDown(event: PointerEvent) {
   if (event.defaultPrevented) {
@@ -28,10 +27,6 @@ export function onWindowPointerDown(event: PointerEvent) {
       separators.add(current.separator);
     }
 
-    // The "pointerleave" event is not reliably triggered when the pointer exits a window or iframe
-    // To account for this, we listen for "pointerleave" events on the Group element itself
-    current.group.element.addEventListener("pointerleave", onGroupPointerLeave);
-
     const match = mountedGroups.get(current.group);
     if (match) {
       initialLayoutMap.set(current.group, match.layout);

lib/global/event-handlers/onWindowPointerMove.ts

@@ -9,7 +9,6 @@ import { read, update } from "../mutableState";
 import { adjustLayoutByDelta } from "../utils/adjustLayoutByDelta";
 import { findMatchingHitRegions } from "../utils/findMatchingHitRegions";
 import { layoutsEqual } from "../utils/layoutsEqual";
-import { onGroupPointerLeave } from "./onGroupPointerLeave";
 
 export function onWindowPointerMove(event: PointerEvent) {
   if (event.defaultPrevented) {
@@ -27,13 +26,6 @@ export function onWindowPointerMove(event: PointerEvent) {
         event.type !== "pointerleave" &&
         event.buttons === 0
       ) {
-        interactionState.hitRegions.forEach((hitRegion) => {
-          hitRegion.group.element.removeEventListener(
-            "pointerleave",
-            onGroupPointerLeave
-          );
-        });
-
         update((prevState) =>
           prevState.interactionState.state === "inactive"
             ? prevState

lib/global/event-handlers/onWindowPointerUp.ts

@@ -1,6 +1,5 @@
 import { updateCursorStyle } from "../cursor/updateCursorStyle";
 import { read, update } from "../mutableState";
-import { onGroupPointerLeave } from "./onGroupPointerLeave";
 
 export function onWindowPointerUp(event: PointerEvent) {
   if (event.defaultPrevented) {
@@ -13,13 +12,6 @@ export function onWindowPointerUp(event: PointerEvent) {
 
   switch (interactionState.state) {
     case "active": {
-      interactionState.hitRegions.forEach((hitRegion) => {
-        hitRegion.group.element.removeEventListener(
-          "pointerleave",
-          onGroupPointerLeave
-        );
-      });
-
       update({
         cursorFlags: 0,
         interactionState: {

lib/global/mountGroup.ts

@@ -102,6 +102,10 @@ export function mountGroup(group: RegisteredGroup) {
     })
   }));
 
+  // The "pointerleave" event is not reliably triggered when the pointer exits a window or iframe
+  // To account for this, we listen for "pointerleave" events on the Group element itself
+  group.element.addEventListener("pointerleave", onGroupPointerLeave);
+
   group.separators.forEach((separator) => {
     assert(
       !separatorIds.has(separator.id),
@@ -130,14 +134,12 @@ export function mountGroup(group: RegisteredGroup) {
       return { mountedGroups };
     });
 
+    group.element.removeEventListener("pointerleave", onGroupPointerLeave);
+
     group.separators.forEach((separator) => {
       separator.element.removeEventListener("keydown", onWindowKeyDown);
     });
 
-    // Edge case:
-    // In case this group is removed while a drag is in progress, clean up any temporary event listeners
-    group.element.removeEventListener("pointerleave", onGroupPointerLeave);
-
     // If this was the last group to be mounted, tear down event handlers
     if (nextState.mountedGroups.size === 0) {
       window.removeEventListener("pointerdown", onWindowPointerDown);