ux imrovoements (#243)

Author: aidenybai

packages/react-grab/e2e/api-methods.spec.ts

@@ -212,7 +212,7 @@ test.describe("API Methods", () => {
     }) => {
       await reactGrab.updateOptions({ theme: { hue: 45 } });
       await reactGrab.updateOptions({
-        theme: { crosshair: { enabled: false } },
+        theme: { elementLabel: { enabled: false } },
       });
       await reactGrab.activate();
 

packages/react-grab/e2e/event-callbacks.spec.ts

@@ -361,23 +361,6 @@ test.describe("Event Callbacks", () => {
       expect(dragBoxCalls.length).toBeGreaterThan(0);
     });
 
-    test("onCrosshair should fire when crosshair moves", async ({
-      reactGrab,
-    }) => {
-      await reactGrab.activate();
-      await reactGrab.clearCallbackHistory();
-
-      await reactGrab.page.mouse.move(200, 200);
-      await reactGrab.page.waitForTimeout(50);
-      await reactGrab.page.mouse.move(300, 300);
-      await reactGrab.page.waitForTimeout(100);
-
-      const history = await reactGrab.getCallbackHistory();
-      const crosshairCalls = history.filter((c) => c.name === "onCrosshair");
-
-      expect(crosshairCalls.length).toBeGreaterThan(0);
-    });
-
     test("onGrabbedBox should fire when element is grabbed", async ({
       reactGrab,
     }) => {

packages/react-grab/e2e/fixtures.ts

@@ -70,11 +70,6 @@ interface ReactGrabState {
   labelInstances: LabelInstanceInfo[];
 }
 
-interface CrosshairInfo {
-  isVisible: boolean;
-  position: { x: number; y: number } | null;
-}
-
 interface GrabbedBoxInfo {
   count: number;
   boxes: Array<{
@@ -184,8 +179,6 @@ export interface ReactGrabPageObject {
   waitForSelectionLabel: () => Promise<void>;
   getLabelStatusText: () => Promise<string | null>;
 
-  getCrosshairInfo: () => Promise<CrosshairInfo>;
-  isCrosshairVisible: () => Promise<boolean>;
   getGrabbedBoxInfo: () => Promise<GrabbedBoxInfo>;
   getLabelInstancesInfo: () => Promise<LabelInstanceInfo[]>;
   isGrabbedBoxVisible: () => Promise<boolean>;
@@ -1531,57 +1524,6 @@ const createReactGrabPageObject = (page: Page): ReactGrabPageObject => {
     }, ATTRIBUTE_NAME);
   };
 
-  const getCrosshairInfo = async (): Promise<CrosshairInfo> => {
-    return page.evaluate((attrName) => {
-      const host = document.querySelector(`[${attrName}]`);
-      const shadowRoot = host?.shadowRoot;
-      if (!shadowRoot) return { isVisible: false, position: null };
-      const root = shadowRoot.querySelector(`[${attrName}]`);
-      if (!root) return { isVisible: false, position: null };
-
-      const crosshairElements = Array.from(
-        root.querySelectorAll("div[style*='pointer-events: none']"),
-      );
-      for (let i = 0; i < crosshairElements.length; i++) {
-        const element = crosshairElements[i] as HTMLElement;
-        const style = element.style;
-        if (
-          style.position === "fixed" &&
-          (style.width === "1px" ||
-            style.height === "1px" ||
-            style.width === "100%" ||
-            style.height === "100%")
-        ) {
-          const transform = style.transform;
-          const match = transform?.match(/translate\(([^,]+)px,\s*([^)]+)px\)/);
-          if (match) {
-            return {
-              isVisible: true,
-              position: { x: parseFloat(match[1]), y: parseFloat(match[2]) },
-            };
-          }
-        }
-      }
-      return { isVisible: false, position: null };
-    }, ATTRIBUTE_NAME);
-  };
-
-  const isCrosshairVisible = async (): Promise<boolean> => {
-    return page.evaluate(() => {
-      const api = (
-        window as {
-          __REACT_GRAB__?: {
-            getState: () => {
-              isCrosshairVisible: boolean;
-            };
-          };
-        }
-      ).__REACT_GRAB__;
-
-      return api?.getState()?.isCrosshairVisible ?? false;
-    });
-  };
-
   const getGrabbedBoxInfo = async (): Promise<GrabbedBoxInfo> => {
     return page.evaluate(() => {
       const api = (
@@ -1826,7 +1768,6 @@ const createReactGrabPageObject = (page: Page): ReactGrabPageObject => {
         "onPromptModeChange",
         "onSelectionBox",
         "onDragBox",
-        "onCrosshair",
         "onGrabbedBox",
         "onContextMenu",
         "onOpenFile",
@@ -2353,7 +2294,6 @@ const createReactGrabPageObject = (page: Page): ReactGrabPageObject => {
           onPromptModeChange: trackCallback("onPromptModeChange"),
           onSelectionBox: trackCallback("onSelectionBox"),
           onDragBox: trackCallback("onDragBox"),
-          onCrosshair: trackCallback("onCrosshair"),
           onGrabbedBox: trackCallback("onGrabbedBox"),
           onContextMenu: trackCallback("onContextMenu"),
           onOpenFile: trackCallback("onOpenFile"),
@@ -2496,8 +2436,6 @@ const createReactGrabPageObject = (page: Page): ReactGrabPageObject => {
     waitForSelectionLabel,
     getLabelStatusText,
 
-    getCrosshairInfo,
-    isCrosshairVisible,
     getGrabbedBoxInfo,
     getLabelInstancesInfo,
     isGrabbedBoxVisible,