Improve floating menu hover transfer behavior (#829)

frontend/src/components/layout/FloatingMenu.vue

@@ -359,22 +359,25 @@ export default defineComponent({
 			}
 		},
 		pointerMoveHandler(e: PointerEvent) {
+			// This element and the element being hovered over
+			const self = this.$el as HTMLDivElement | undefined;
 			const target = e.target as HTMLElement | undefined;
-			const pointerOverFloatingMenuKeepOpen = target?.closest("[data-hover-menu-keep-open]") as HTMLElement | undefined;
-			const pointerOverFloatingMenuSpawner = target?.closest("[data-hover-menu-spawner]") as HTMLElement | undefined;
-			const floatingMenu: HTMLDivElement | undefined = this.$el;
-			const pointerOverOwnFloatingMenuSpawner = floatingMenu && pointerOverFloatingMenuSpawner?.parentElement?.contains(floatingMenu);
 
-			// Swap this open floating menu with the one created by the floating menu spawner being hovered over
-			if (pointerOverFloatingMenuSpawner && !pointerOverOwnFloatingMenuSpawner) {
-				this.$emit("update:open", false);
-				pointerOverFloatingMenuSpawner.click();
-			}
+			// Get the spawner element (that which is clicked to spawn this floating menu)
+			// Assumes the spawner is a sibling of this FloatingMenu component
+			const ownSpawner: HTMLElement | undefined = self?.parentElement?.querySelector(":scope > [data-floating-menu-spawner]") || undefined;
+			// Get the spawner element containing whatever element the user is hovering over now, if there is one
+			const targetSpawner: HTMLElement | undefined = target?.closest("[data-floating-menu-spawner]") || undefined;
 
-			// Close the floating menu if the pointer has strayed far enough from its bounds
-			if (this.isPointerEventOutsideFloatingMenu(e, POINTER_STRAY_DISTANCE) && !pointerOverOwnFloatingMenuSpawner && !pointerOverFloatingMenuKeepOpen) {
-				// TODO: Extend this rectangle bounds check to all `data-hover-menu-keep-open` element bounds up the DOM tree since currently
-				// submenus disappear with zero stray distance if the cursor is further than the stray distance from only the top-level menu
+			// Hover transfer
+			// Transfer from this open floating menu to a sibling floating menu if the pointer hovers to a valid neighboring floating menu spawner
+			this.hoverTransfer(self, ownSpawner, targetSpawner);
+
+			// Pointer stray
+			// Close the floating menu if the pointer has strayed far enough from its bounds (and it's not hovering over its own spawner)
+			if (ownSpawner !== targetSpawner && this.isPointerEventOutsideFloatingMenu(e, POINTER_STRAY_DISTANCE)) {
+				// TODO: Extend this rectangle bounds check to all submenu bounds up the DOM tree since currently submenus disappear
+				// TODO: with zero stray distance if the cursor is further than the stray distance from only the top-level menu
 				this.$emit("update:open", false);
 			}
 
@@ -385,6 +388,72 @@ export default defineComponent({
 				window.removeEventListener("pointerup", this.pointerUpHandler);
 			}
 		},
+		hoverTransfer(self: HTMLDivElement | undefined, ownSpawner: HTMLElement | undefined, targetSpawner: HTMLElement | undefined): void {
+			// Algorithm pseudo-code to detect and transfer to hover-transferrable floating menu spawners
+			// Accompanying diagram: <https://files.keavon.com/-/SpringgreenKnownXantus/capture.png>
+			//
+			// Check our own parent for descendant spawners
+			// Filter out ourself and our children
+			// Filter out all with a different distance than our own distance from the currently-being-checked parent
+			// How many left?
+			//     None -> go up a level and repeat
+			//     Some -> is one of them the target?
+			//         Yes -> click it and terminate
+			//         No -> do nothing and terminate
+
+			// Helper function that gets used below
+			const getDepthFromAncestor = (item: Element, ancestor: Element): number | undefined => {
+				let depth = 1;
+
+				let parent = item.parentElement || undefined;
+				while (parent) {
+					if (parent === ancestor) return depth;
+
+					parent = parent.parentElement || undefined;
+					depth += 1;
+				}
+
+				return undefined;
+			};
+
+			// A list of all the descendant spawners: the spawner for this floating menu plus any spawners belonging to widgets inside this floating menu
+			const ownDescendantMenuSpawners = Array.from(self?.parentElement?.querySelectorAll("[data-floating-menu-spawner]") || []);
+
+			// Start with the parent of the spawner for this floating menu and keep widening the search for any other valid spawners that are hover-transferrable
+			let currentAncestor = (targetSpawner && ownSpawner?.parentElement) || undefined;
+			while (currentAncestor) {
+				const ownSpawnerDepthFromCurrentAncestor = ownSpawner && getDepthFromAncestor(ownSpawner, currentAncestor);
+				const currentAncestor2 = currentAncestor; // This duplicate variable avoids an ESLint warning
+
+				// Get the list of descendant spawners and filter out invalid possibilities for spawners that are hover-transferrable
+				const listOfDescendantSpawners = Array.from(currentAncestor?.querySelectorAll("[data-floating-menu-spawner]") || []);
+				const filteredListOfDescendantSpawners = listOfDescendantSpawners.filter((item: Element): boolean => {
+					// Filter away ourself and our descendants
+					const notOurself = !ownDescendantMenuSpawners.includes(item);
+					// And filter away unequal depths from the current ancestor
+					const notUnequalDepths = notOurself && getDepthFromAncestor(item, currentAncestor2) === ownSpawnerDepthFromCurrentAncestor;
+					// And filter away elements that explicitly disable hover transfer
+					return notUnequalDepths && !(item as HTMLElement).getAttribute?.("data-floating-menu-spawner")?.includes("no-hover-transfer");
+				});
+
+				// If none were found, widen the search by a level and keep trying (or stop looping if the root was reached)
+				if (filteredListOfDescendantSpawners.length === 0) {
+					currentAncestor = currentAncestor?.parentElement || undefined;
+				}
+				// Stop after the first non-empty set was found
+				else {
+					const foundTarget = filteredListOfDescendantSpawners.find((item: Element): boolean => item === targetSpawner);
+					// If the currently hovered spawner is one of the found valid hover-transferrable spawners, swap to it by clicking on it
+					if (foundTarget) {
+						this.$emit("update:open", false);
+						(foundTarget as HTMLElement).click();
+					}
+
+					// In either case, we are done searching
+					break;
+				}
+			}
+		},
 		keyDownHandler(e: KeyboardEvent) {
 			if (this.escapeCloses && e.key.toLowerCase() === "escape") {
 				this.$emit("update:open", false);