Skip to content

ux imrovoements #243

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
aidenybai wants to merge 5 commits into
base: main
Choose a base branch
from
Open

ux imrovoements #243

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e7a1c0e
www
aidenybai Mar 15, 2026
d615813
www
aidenybai Mar 15, 2026
876eed6
vite+
aidenybai Mar 15, 2026
685ac72
fix
aidenybai Mar 15, 2026
0c67391
fix
aidenybai Mar 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/react-grab/e2e/api-methods.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand Down
17 changes: 0 additions & 17 deletions packages/react-grab/e2e/event-callbacks.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
}) => {
Expand Down
62 changes: 0 additions & 62 deletions packages/react-grab/e2e/fixtures.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,11 +70,6 @@ interface ReactGrabState {
labelInstances: LabelInstanceInfo[];
}

interface CrosshairInfo {
isVisible: boolean;
position: { x: number; y: number } | null;
}

interface GrabbedBoxInfo {
count: number;
boxes: Array<{
Expand Down Expand Up @@ -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>;
Expand Down Expand Up @@ -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 = (
Expand Down Expand Up @@ -1826,7 +1768,6 @@ const createReactGrabPageObject = (page: Page): ReactGrabPageObject => {
"onPromptModeChange",
"onSelectionBox",
"onDragBox",
"onCrosshair",
"onGrabbedBox",
"onContextMenu",
"onOpenFile",
Expand Down Expand Up @@ -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"),
Expand Down Expand Up @@ -2496,8 +2436,6 @@ const createReactGrabPageObject = (page: Page): ReactGrabPageObject => {
waitForSelectionLabel,
getLabelStatusText,

getCrosshairInfo,
isCrosshairVisible,
getGrabbedBoxInfo,
getLabelInstancesInfo,
isGrabbedBoxVisible,
Expand Down
88 changes: 0 additions & 88 deletions packages/react-grab/e2e/theme-customization.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,29 +160,6 @@ test.describe("Theme Customization", () => {
});
});

test.describe("Crosshair", () => {
test("should show crosshair by default", async ({ reactGrab }) => {
await reactGrab.activate();
await reactGrab.page.mouse.move(400, 400);
await reactGrab.page.waitForTimeout(100);

const isVisible = await reactGrab.isCrosshairVisible();
expect(isVisible).toBe(true);
});

test("should hide crosshair when disabled", async ({ reactGrab }) => {
await reactGrab.updateOptions({
theme: { crosshair: { enabled: false } },
});
await reactGrab.activate();
await reactGrab.page.mouse.move(400, 400);
await reactGrab.page.waitForTimeout(100);

const isVisible = await reactGrab.isCrosshairVisible();
expect(isVisible).toBe(false);
});
});

test.describe("Toolbar", () => {
test("should show toolbar by default", async ({ reactGrab }) => {
await reactGrab.page.waitForTimeout(600);
Expand Down Expand Up @@ -215,56 +192,6 @@ test.describe("Theme Customization", () => {
});
});

test.describe("Multiple Feature Toggles", () => {
test("should apply multiple theme settings", async ({ reactGrab }) => {
await reactGrab.updateOptions({
theme: {
hue: 45,
crosshair: { enabled: false },
elementLabel: { enabled: false },
},
});

await reactGrab.activate();
await reactGrab.page.mouse.move(400, 400);
await reactGrab.page.waitForTimeout(100);

const hasFilter = await reactGrab.page.evaluate(() => {
const host = document.querySelector("[data-react-grab]");
const shadowRoot = host?.shadowRoot;
const root = shadowRoot?.querySelector(
"[data-react-grab]",
) as HTMLElement;
return root?.style.filter?.includes("hue-rotate(45deg)") ?? false;
});
expect(hasFilter).toBe(true);

const isCrosshairVisible = await reactGrab.isCrosshairVisible();
expect(isCrosshairVisible).toBe(false);
});

test("should allow re-enabling disabled features", async ({
reactGrab,
}) => {
await reactGrab.updateOptions({
theme: { crosshair: { enabled: false } },
});
await reactGrab.activate();

const isDisabled = await reactGrab.isCrosshairVisible();
expect(isDisabled).toBe(false);

await reactGrab.updateOptions({
theme: { crosshair: { enabled: true } },
});
await reactGrab.page.mouse.move(400, 400);
await reactGrab.page.waitForTimeout(100);

const isEnabled = await reactGrab.isCrosshairVisible();
expect(isEnabled).toBe(true);
});
});

test.describe("Theme Persistence", () => {
test("theme should persist across activation cycles", async ({
reactGrab,
Expand All @@ -286,20 +213,5 @@ test.describe("Theme Customization", () => {
expect(hasFilter).toBe(true);
});

test("theme updates should be immediate", async ({ reactGrab }) => {
await reactGrab.activate();
await reactGrab.page.mouse.move(400, 400);
await reactGrab.page.waitForTimeout(100);

const isVisibleBefore = await reactGrab.isCrosshairVisible();
expect(isVisibleBefore).toBe(true);

await reactGrab.updateOptions({
theme: { crosshair: { enabled: false } },
});

const isVisibleAfter = await reactGrab.isCrosshairVisible();
expect(isVisibleAfter).toBe(false);
});
});
});
17 changes: 0 additions & 17 deletions packages/react-grab/e2e/toolbar-selection-hover.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,23 +89,6 @@ test.describe("Toolbar Selection Hover", () => {
.toBe(true);
});

test("should hide crosshair when hovering toolbar", async ({
reactGrab,
}) => {
await reactGrab.activate();
await reactGrab.hoverElement("li");
await reactGrab.waitForSelectionBox();

await expect
.poll(() => reactGrab.isCrosshairVisible(), { timeout: 2000 })
.toBe(true);

await hoverToolbar(reactGrab.page);

await expect
.poll(() => reactGrab.isCrosshairVisible(), { timeout: 2000 })
.toBe(false);
});
});

test.describe("Frozen Mode", () => {
Expand Down
20 changes: 0 additions & 20 deletions packages/react-grab/e2e/touch-mode.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,26 +55,6 @@ test.describe("Touch Mode", () => {
});

test.describe("Touch Mode Behavior", () => {
test("crosshair should be hidden in touch mode", async ({ reactGrab }) => {
await reactGrab.updateOptions({
theme: { crosshair: { enabled: true } },
});
await reactGrab.activate();

const listItem = reactGrab.page.locator("li").first();
const box = await listItem.boundingBox();
if (!box) throw new Error("Could not get bounding box");

await reactGrab.page.touchscreen.tap(
box.x + box.width / 2,
box.y + box.height / 2,
);
await reactGrab.page.waitForTimeout(100);

const isCrosshairVisible = await reactGrab.isCrosshairVisible();
expect(isCrosshairVisible).toBe(false);
});

test("touch events should update pointer position", async ({
reactGrab,
}) => {
Expand Down
45 changes: 0 additions & 45 deletions packages/react-grab/e2e/visual-feedback.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,51 +154,6 @@ test.describe("Visual Feedback", () => {
});
});

test.describe("Crosshair", () => {
test("crosshair should be visible when active", async ({ reactGrab }) => {
await reactGrab.activate();
await reactGrab.page.mouse.move(400, 400);
await reactGrab.page.waitForTimeout(100);

const isVisible = await reactGrab.isCrosshairVisible();
expect(isVisible).toBe(true);
});

test("crosshair should follow cursor", async ({ reactGrab }) => {
await reactGrab.activate();

await reactGrab.page.mouse.move(200, 200);
await reactGrab.page.waitForTimeout(100);
const info1 = await reactGrab.getCrosshairInfo();

await reactGrab.page.mouse.move(500, 400);
await reactGrab.page.waitForTimeout(100);
const info2 = await reactGrab.getCrosshairInfo();

if (info1.position && info2.position) {
expect(info1.position.x).not.toBe(info2.position.x);
expect(info1.position.y).not.toBe(info2.position.y);
}
});

test("crosshair should be hidden during drag", async ({ reactGrab }) => {
await reactGrab.activate();

const listItem = reactGrab.page.locator("li").first();
const box = await listItem.boundingBox();
if (!box) throw new Error("Could not get bounding box");

await reactGrab.page.mouse.move(box.x, box.y);
await reactGrab.page.mouse.down();
await reactGrab.page.mouse.move(box.x + 100, box.y + 100, { steps: 5 });

const state = await reactGrab.getState();
expect(state.isDragging).toBe(true);

await reactGrab.page.mouse.up();
});
});

test.describe("Selection Label", () => {
test("label should show tag name", async ({ reactGrab }) => {
await reactGrab.activate();
Expand Down
Loading
Loading