/* Copyright 2024 New Vector Ltd. Copyright 2021 The Matrix.org Foundation C.I.C. SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only Please see LICENSE files in the repository root for full details. */ import { Direction, mouseWithinRegion } from "../../../../src/components/views/elements/InteractiveTooltip"; describe("InteractiveTooltip", () => { describe("mouseWithinRegion", () => { it("direction=left", () => { const targetRect = { width: 20, height: 20, top: 300, right: 370, bottom: 320, left: 350, } as DOMRect; const contentRect = { width: 100, height: 400, top: 100, right: 200, bottom: 500, left: 100, } as DOMRect; // just within top left corner of contentRect expect(mouseWithinRegion(101, 101, Direction.Left, targetRect, contentRect)).toBe(true); // just outside top left corner of contentRect, within buffer expect(mouseWithinRegion(101, 90, Direction.Left, targetRect, contentRect)).toBe(true); // just within top right corner of targetRect expect(mouseWithinRegion(369, 301, Direction.Left, targetRect, contentRect)).toBe(true); // within the top triangular portion of the trapezoid expect(mouseWithinRegion(300, 200, Direction.Left, targetRect, contentRect)).toBe(true); // within the bottom triangular portion of the trapezoid expect(mouseWithinRegion(300, 350, Direction.Left, targetRect, contentRect)).toBe(true); // outside the top triangular portion of the trapezoid expect(mouseWithinRegion(300, 140, Direction.Left, targetRect, contentRect)).toBe(false); // outside the bottom triangular portion of the trapezoid expect(mouseWithinRegion(300, 460, Direction.Left, targetRect, contentRect)).toBe(false); }); it("direction=right", () => { const targetRect = { width: 20, height: 20, top: 300, right: 370, bottom: 320, left: 350, } as DOMRect; const contentRect = { width: 100, height: 400, top: 100, right: 620, bottom: 500, left: 520, } as DOMRect; // just within top right corner of contentRect expect(mouseWithinRegion(619, 101, Direction.Right, targetRect, contentRect)).toBe(true); // just outside top right corner of contentRect, within buffer expect(mouseWithinRegion(619, 90, Direction.Right, targetRect, contentRect)).toBe(true); // just within top left corner of targetRect expect(mouseWithinRegion(351, 301, Direction.Right, targetRect, contentRect)).toBe(true); // within the top triangular portion of the trapezoid expect(mouseWithinRegion(420, 200, Direction.Right, targetRect, contentRect)).toBe(true); // within the bottom triangular portion of the trapezoid expect(mouseWithinRegion(420, 350, Direction.Right, targetRect, contentRect)).toBe(true); // outside the top triangular portion of the trapezoid expect(mouseWithinRegion(420, 140, Direction.Right, targetRect, contentRect)).toBe(false); // outside the bottom triangular portion of the trapezoid expect(mouseWithinRegion(420, 460, Direction.Right, targetRect, contentRect)).toBe(false); }); it("direction=top", () => { const targetRect = { width: 20, height: 20, top: 300, right: 370, bottom: 320, left: 350, } as DOMRect; const contentRect = { width: 400, height: 100, top: 100, right: 550, bottom: 200, left: 150, } as DOMRect; // just within top right corner of contentRect expect(mouseWithinRegion(549, 101, Direction.Top, targetRect, contentRect)).toBe(true); // just outside top right corner of contentRect, within buffer expect(mouseWithinRegion(549, 99, Direction.Top, targetRect, contentRect)).toBe(true); // just within bottom left corner of targetRect expect(mouseWithinRegion(351, 319, Direction.Top, targetRect, contentRect)).toBe(true); // within the left triangular portion of the trapezoid expect(mouseWithinRegion(240, 260, Direction.Top, targetRect, contentRect)).toBe(true); // within the right triangular portion of the trapezoid expect(mouseWithinRegion(480, 260, Direction.Top, targetRect, contentRect)).toBe(true); // outside the left triangular portion of the trapezoid expect(mouseWithinRegion(220, 260, Direction.Top, targetRect, contentRect)).toBe(false); // outside the right triangular portion of the trapezoid expect(mouseWithinRegion(500, 260, Direction.Top, targetRect, contentRect)).toBe(false); }); it("direction=bottom", () => { const targetRect = { width: 20, height: 20, top: 300, right: 370, bottom: 320, left: 350, } as DOMRect; const contentRect = { width: 400, height: 100, top: 420, right: 550, bottom: 520, left: 150, } as DOMRect; // just within bottom left corner of contentRect expect(mouseWithinRegion(101, 519, Direction.Bottom, targetRect, contentRect)).toBe(true); // just outside bottom left corner of contentRect, within buffer expect(mouseWithinRegion(101, 521, Direction.Bottom, targetRect, contentRect)).toBe(true); // just within top left corner of targetRect expect(mouseWithinRegion(351, 301, Direction.Bottom, targetRect, contentRect)).toBe(true); // within the left triangular portion of the trapezoid expect(mouseWithinRegion(240, 360, Direction.Bottom, targetRect, contentRect)).toBe(true); // within the right triangular portion of the trapezoid expect(mouseWithinRegion(480, 360, Direction.Bottom, targetRect, contentRect)).toBe(true); // outside the left triangular portion of the trapezoid expect(mouseWithinRegion(220, 360, Direction.Bottom, targetRect, contentRect)).toBe(false); // outside the right triangular portion of the trapezoid expect(mouseWithinRegion(500, 360, Direction.Bottom, targetRect, contentRect)).toBe(false); }); }); });