fix: remove toolbar when mouse leaves the canvas

Author: hitesh-shetty-cstk

src/visualBuilder/listeners/__test__/index.test.ts

@@ -0,0 +1,145 @@
+import { describe, test, expect, beforeEach, afterEach, vi } from "vitest";
+import { addEventListeners, removeEventListeners } from "../index";
+import * as mouseHoverModule from "../mouseHover";
+import * as generateToolbarModule from "../../generators/generateToolbar";
+import { VisualBuilder } from "../../index";
+
+// Mock dependencies
+vi.mock("../mouseClick", () => ({
+    default: vi.fn(),
+}));
+
+vi.mock("../mouseHover", () => ({
+    default: vi.fn(),
+    cancelPendingMouseHover: vi.fn(),
+    cancelPendingHoverToolbar: vi.fn(),
+    cancelPendingAddOutline: vi.fn(),
+    hideCustomCursor: vi.fn(),
+    hideHoverOutline: vi.fn(),
+    showCustomCursor: vi.fn(),
+}));
+
+vi.mock("../../generators/generateToolbar", () => ({
+    removeFieldToolbar: vi.fn(),
+}));
+
+vi.mock("../../index", () => ({
+    VisualBuilder: {
+        VisualBuilderGlobalState: {
+            value: {
+                previousSelectedEditableDOM: null,
+                isFocussed: false,
+            },
+        },
+    },
+}));
+
+vi.mock("lodash-es", async () => ({
+    ...(await import("lodash-es")),
+    throttle: vi.fn((fn) => fn),
+    debounce: vi.fn((fn) => fn),
+}));
+
+describe("mouseleave handler changes", () => {
+    let overlayWrapper: HTMLDivElement;
+    let visualBuilderContainer: HTMLDivElement;
+    let focusedToolbar: HTMLDivElement;
+    let customCursor: HTMLDivElement;
+    let resizeObserver: ResizeObserver;
+
+    beforeEach(() => {
+        overlayWrapper = document.createElement("div");
+        visualBuilderContainer = document.createElement("div");
+        focusedToolbar = document.createElement("div");
+        customCursor = document.createElement("div");
+        resizeObserver = new ResizeObserver(() => {});
+
+        vi.clearAllMocks();
+    });
+
+    afterEach(() => {
+        removeEventListeners({
+            overlayWrapper,
+            visualBuilderContainer,
+            previousSelectedEditableDOM: null,
+            focusedToolbar,
+            resizeObserver,
+            customCursor,
+        });
+        vi.clearAllMocks();
+    });
+
+    test("should cancel pending operations on mouseleave", () => {
+        addEventListeners({
+            overlayWrapper,
+            visualBuilderContainer,
+            previousSelectedEditableDOM: null,
+            focusedToolbar,
+            resizeObserver,
+            customCursor,
+        });
+
+        const mouseleaveEvent = new Event("mouseleave", { bubbles: true });
+        document.documentElement.dispatchEvent(mouseleaveEvent);
+
+        expect(mouseHoverModule.cancelPendingMouseHover).toHaveBeenCalled();
+        expect(mouseHoverModule.cancelPendingHoverToolbar).toHaveBeenCalled();
+        expect(mouseHoverModule.cancelPendingAddOutline).toHaveBeenCalled();
+    });
+
+    test("should remove field toolbar on mouseleave when not focused", () => {
+        VisualBuilder.VisualBuilderGlobalState.value.isFocussed = false;
+
+        addEventListeners({
+            overlayWrapper,
+            visualBuilderContainer,
+            previousSelectedEditableDOM: null,
+            focusedToolbar,
+            resizeObserver,
+            customCursor,
+        });
+
+        const mouseleaveEvent = new Event("mouseleave", { bubbles: true });
+        document.documentElement.dispatchEvent(mouseleaveEvent);
+
+        expect(generateToolbarModule.removeFieldToolbar).toHaveBeenCalledWith(
+            focusedToolbar
+        );
+    });
+
+    test("should not remove field toolbar on mouseleave when focused", () => {
+        VisualBuilder.VisualBuilderGlobalState.value.isFocussed = true;
+
+        addEventListeners({
+            overlayWrapper,
+            visualBuilderContainer,
+            previousSelectedEditableDOM: null,
+            focusedToolbar,
+            resizeObserver,
+            customCursor,
+        });
+
+        const mouseleaveEvent = new Event("mouseleave", { bubbles: true });
+        document.documentElement.dispatchEvent(mouseleaveEvent);
+
+        expect(generateToolbarModule.removeFieldToolbar).not.toHaveBeenCalled();
+    });
+
+    test("should not remove field toolbar when focusedToolbar is null", () => {
+        VisualBuilder.VisualBuilderGlobalState.value.isFocussed = false;
+
+        addEventListeners({
+            overlayWrapper,
+            visualBuilderContainer,
+            previousSelectedEditableDOM: null,
+            focusedToolbar: null,
+            resizeObserver,
+            customCursor,
+        });
+
+        const mouseleaveEvent = new Event("mouseleave", { bubbles: true });
+        document.documentElement.dispatchEvent(mouseleaveEvent);
+
+        expect(generateToolbarModule.removeFieldToolbar).not.toHaveBeenCalled();
+    });
+});

src/visualBuilder/listeners/index.ts

@@ -1,10 +1,13 @@
 import { VisualBuilder } from "..";
+import { removeFieldToolbar } from "../generators/generateToolbar";
 import handleBuilderInteraction from "./mouseClick";
 import handleMouseHover, {
+    cancelPendingAddOutline,
+    cancelPendingHoverToolbar,
+    cancelPendingMouseHover,
     hideCustomCursor,
     hideHoverOutline,
     showCustomCursor,
-    showHoverToolbar,
 } from "./mouseHover";
 import EventListenerHandlerParams from "./types";
 
@@ -41,8 +44,15 @@ const eventHandlers = {
         });
     },
     mouseleave: (params: AddEventListenersParams) => () => {
+        cancelPendingMouseHover();
+        cancelPendingHoverToolbar();
+        cancelPendingAddOutline();
+        
         hideCustomCursor(params.customCursor);
         hideHoverOutline(params.visualBuilderContainer);
+        if(!VisualBuilder?.VisualBuilderGlobalState?.value?.isFocussed && params?.focusedToolbar) {
+            removeFieldToolbar(params.focusedToolbar);
+        }
     },
     mouseenter: (params: AddEventListenersParams) => () => {
         showCustomCursor(params.customCursor);

src/visualBuilder/listeners/mouseHover.ts

@@ -105,6 +105,7 @@ async function addOutline(params?: AddOutlineParams): Promise<void> {
 }
 
 const debouncedAddOutline = debounce(addOutline, 50, { trailing: true });
+export const cancelPendingAddOutline = () => debouncedAddOutline.cancel();
 const showOutline = (params?: AddOutlineParams): Promise<void> | undefined => debouncedAddOutline(params);
 
 function hideDefaultCursor(): void {
@@ -181,6 +182,8 @@ const debouncedRenderHoverToolbar = debounce(async (params: HandleBuilderInterac
 
 export const showHoverToolbar = async (params: HandleBuilderInteractionParams) => await debouncedRenderHoverToolbar(params);
 
+export const cancelPendingHoverToolbar = () => debouncedRenderHoverToolbar.cancel();
+
 function isOverlay(target: HTMLElement): boolean {
     return target.classList.contains("visual-builder__overlay");
 }
@@ -222,7 +225,9 @@ const throttledMouseHover = throttle(async (params: HandleMouseHoverParams) => {
             eventTarget &&
             (isFieldPathDropdown(eventTarget) || isFieldPathParent(eventTarget))
         ) {
-            params.customCursor && hideCustomCursor(params.customCursor);
+            if (params.customCursor) {
+                hideCustomCursor(params.customCursor);
+            }
             showOutline();
             showHoverToolbar({
                 event: params.event,
@@ -399,4 +404,6 @@ const handleMouseHover = async (
     params: HandleMouseHoverParams
 ): Promise<void> => await throttledMouseHover(params);
 
+export const cancelPendingMouseHover = () => throttledMouseHover.cancel();
+
 export default handleMouseHover;