Edge case bug fix: Account for pointer resize events near edge of window/iframe (#530)

Resolves #368

Author: bvaughn

integrations/vite/src/index.css

@@ -17,3 +17,7 @@
     @apply text-blue-600 hover:text-pink-400 visited:text-blue-900;
   }
 }
+
+#root {
+  height: 100vh;
+}

integrations/vite/src/main.tsx

@@ -1,18 +1,20 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import { BrowserRouter, Routes, Route } from "react-router";
-import { Home } from "./routes/Home";
-import { Encoder } from "./routes/Encoder";
+import { BrowserRouter, Route, Routes } from "react-router";
 import "./index.css";
 import { Decoder } from "./routes/Decoder";
+import { Edges } from "./routes/Edges";
+import { Encoder } from "./routes/Encoder";
+import { Home } from "./routes/Home";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<Home />} />
-        <Route path="/e2e/encoder" element={<Encoder />} />
         <Route path="/e2e/decoder/:encoded" element={<Decoder />} />
+        <Route path="/e2e/edges" element={<Edges />} />
+        <Route path="/e2e/encoder" element={<Encoder />} />
       </Routes>
     </BrowserRouter>
   </StrictMode>

integrations/vite/src/routes/Edges.tsx

@@ -0,0 +1,30 @@
+import { useSearchParams } from "react-router";
+import { Group } from "../components/Group";
+import { Panel } from "../components/Panel";
+import { Separator } from "../components/Separator";
+import { Box } from "../../../../src/components/Box";
+
+export function Edges() {
+  const [params] = useSearchParams();
+
+  if (params.has("iframe")) {
+    return (
+      <Group className="h-full bg-slate-900">
+        <Panel />
+        <Separator />
+        <Panel />
+      </Group>
+    );
+  }
+
+  return (
+    <Box className="h-full" direction="row">
+      <div className="w-[50%]">Left</div>
+      <iframe
+        className="w-[50%]"
+        sandbox="allow-scripts"
+        src="http://localhost:3012/e2e/edges?iframe"
+      />
+    </Box>
+  );
+}

integrations/vite/src/routes/Home.tsx

@@ -9,6 +9,9 @@ export function Home() {
       <li>
         <Link to="/e2e/dynamic">e2e: dynamic</Link>
       </li>
+      <li>
+        <Link to="/e2e/edges">e2e: edges</Link>
+      </li>
     </ul>
   );
 }

integrations/vite/vite.config.ts

@@ -4,5 +4,8 @@ import react from "@vitejs/plugin-react";
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react(), tailwindcss()]
+  plugins: [react(), tailwindcss()],
+  server: {
+    cors: true
+  }
 });

lib/global/event-handlers/onGroupPointerLeave.ts

@@ -0,0 +1,29 @@
+import { read } from "../mutableState";
+import { updateActiveHitRegions } from "../utils/updateActiveHitRegion";
+
+export function onGroupPointerLeave(event: PointerEvent) {
+  if (event.defaultPrevented) {
+    return;
+  } else if (event.relatedTarget !== null) {
+    return;
+  }
+
+  const { interactionState, mountedGroups } = read();
+
+  // 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
+  switch (interactionState.state) {
+    case "active": {
+      interactionState.hitRegions.forEach((hitRegion) => {
+        if (event.currentTarget === hitRegion.group.element) {
+          updateActiveHitRegions({
+            event,
+            hitRegions: interactionState.hitRegions,
+            initialLayoutMap: interactionState.initialLayoutMap,
+            mountedGroups
+          });
+        }
+      });
+    }
+  }
+}

lib/global/event-handlers/onPointerMove.ts

@@ -3,7 +3,7 @@ import { adjustLayoutForSeparator } from "../utils/adjustLayoutForSeparator";
 import { findSeparatorGroup } from "../utils/findSeparatorGroup";
 import { getMountedGroup } from "../utils/getMountedGroup";
 
-export function onKeyDown(event: KeyboardEvent) {
+export function onWindowKeyDown(event: KeyboardEvent) {
   if (event.defaultPrevented) {
     return;
   }

lib/global/event-handlers/onKeyDown.ts …global/event-handlers/onWindowKeyDown.tslib/global/event-handlers/onKeyDown.ts renamed to lib/global/event-handlers/onWindowKeyDown.ts lib/global/event-handlers/onKeyDown.ts renamed to lib/global/event-handlers/onWindowKeyDown.ts

@@ -4,7 +4,7 @@ import type { RegisteredSeparator } from "../../components/separator/types";
 import { read, update } from "../mutableState";
 import { findMatchingHitRegions } from "../utils/findMatchingHitRegions";
 
-export function onPointerDown(event: PointerEvent) {
+export function onWindowPointerDown(event: PointerEvent) {
   if (event.defaultPrevented) {
     return;
   }

…b/global/event-handlers/onPointerDown.ts …al/event-handlers/onWindowPointerDown.tslib/global/event-handlers/onPointerDown.ts renamed to lib/global/event-handlers/onWindowPointerDown.ts lib/global/event-handlers/onPointerDown.ts renamed to lib/global/event-handlers/onWindowPointerDown.ts

@@ -0,0 +1,68 @@
+import { updateCursorStyle } from "../cursor/updateCursorStyle";
+import { read, update } from "../mutableState";
+import { findMatchingHitRegions } from "../utils/findMatchingHitRegions";
+import { updateActiveHitRegions } from "../utils/updateActiveHitRegion";
+
+export function onWindowPointerMove(event: PointerEvent) {
+  if (event.defaultPrevented) {
+    return;
+  }
+
+  const { interactionState, mountedGroups } = read();
+
+  switch (interactionState.state) {
+    case "active": {
+      // Edge case (see #340)
+      // Detect when the pointer has been released outside an iframe on a different domain
+      if (
+        // Skip this check for "pointerleave" events, else Firefox triggers a false positive (see #514)
+        event.type !== "pointerleave" &&
+        event.buttons === 0
+      ) {
+        update((prevState) =>
+          prevState.interactionState.state === "inactive"
+            ? prevState
+            : {
+                cursorFlags: 0,
+                interactionState: {
+                  state: "inactive"
+                }
+              }
+        );
+
+        return;
+      }
+
+      updateActiveHitRegions({
+        event,
+        hitRegions: interactionState.hitRegions,
+        initialLayoutMap: interactionState.initialLayoutMap,
+        mountedGroups,
+        pointerDownAtPoint: interactionState.pointerDownAtPoint
+      });
+      break;
+    }
+    default: {
+      // Update HitRegions if a drag has not been started
+      const hitRegions = findMatchingHitRegions(event, mountedGroups);
+
+      if (hitRegions.length === 0) {
+        if (interactionState.state !== "inactive") {
+          update({
+            interactionState: { state: "inactive" }
+          });
+        }
+      } else {
+        update({
+          interactionState: {
+            hitRegions,
+            state: "hover"
+          }
+        });
+      }
+
+      updateCursorStyle();
+      break;
+    }
+  }
+}