-
Notifications
You must be signed in to change notification settings - Fork 80
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add throttling to pointer move event (#164)
* Add throttling to pointer move event Fixes #163 Add throttling to pointer move events in the Canvas component to optimize coordinate recording. - Modify `packages/react-sketch-canvas/src/Canvas/index.tsx` to add throttling to the `handlePointerMove` function using a custom `useThrottledCallback` function. - Add `throttleTime` to `CanvasProps` in `packages/react-sketch-canvas/src/Canvas/types.ts` with a default value of 20. - Add `throttleTime` to `ReactSketchCanvasProps` in `packages/react-sketch-canvas/src/ReactSketchCanvas/types.ts` with a default value of 20. - Add `useThrottledCallback` function in `packages/react-sketch-canvas/src/Canvas/utils.tsx` to throttle a callback function. - Update `README.md` to include documentation on the new `throttleTime` configuration option. - Add tests to verify throttling behavior in `packages/tests/src/actions/throttling.spec.ts`. - Write vitest tests for `useThrottledCallback` function in `packages/react-sketch-canvas/src/Canvas/__test__/utils.test.tsx`. --- For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/vinothpandian/react-sketch-canvas/issues/163?shareId=XXXX-XXXX-XXXX-XXXX). * fix: tests * fix: set default throttleTime to 0 * chore: remove lint in ci * fix: workflow
- Loading branch information
1 parent
bcbb141
commit ef93338
Showing
15 changed files
with
8,825 additions
and
5,789 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
39 changes: 39 additions & 0 deletions
39
packages/react-sketch-canvas/src/Canvas/__test__/utils.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| import { describe, it, expect, vi } from "vitest"; | ||
| import { renderHook, act } from "@testing-library/react"; | ||
|
|
||
| import { useThrottledCallback } from "../utils"; | ||
|
|
||
| describe("useThrottledCallback", () => { | ||
| it("should call the callback immediately if delay is 0", () => { | ||
| const callback = vi.fn(); | ||
| const { result } = renderHook(() => useThrottledCallback(callback, 0, [])); | ||
|
|
||
| act(() => { | ||
| result.current(); | ||
| }); | ||
|
|
||
| expect(callback).toHaveBeenCalledTimes(1); | ||
| }); | ||
|
|
||
| it("should throttle the callback", () => { | ||
| vi.useFakeTimers(); | ||
| const callback = vi.fn(); | ||
| const { result } = renderHook(() => useThrottledCallback(callback, 20, [])); | ||
|
|
||
| act(() => { | ||
| result.current(); | ||
| result.current(); | ||
| result.current(); | ||
| }); | ||
|
|
||
| expect(callback).toHaveBeenCalledTimes(1); | ||
|
|
||
| act(() => { | ||
| vi.advanceTimersByTime(20); | ||
| }); | ||
|
|
||
| expect(callback).toHaveBeenCalledTimes(2); | ||
|
|
||
| vi.useRealTimers(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.