Toolbar’s setCursorMode in Grida codebase explained.
In this article, we will review a function called setCursorMode in Grida source code. To provide more context, you will see this function in Toolbar component on the Grida Canvas page.
Toolbar is used to draw elements on the canvas. This below code snippet is picked from Toolbar.tsx
<ToolsGroup
value={value}
options={[
{ value: "rectangle", label: "Rectangle", shortcut: "R" },
{ value: "ellipse", label: "Ellipse", shortcut: "O" },
{ value: "line", label: "Line", shortcut: "L" },
{ value: "image", label: "Image" },
]}
onValueChange={(v) => {
setCursorMode(toolbar_value_to_cursormode(v as ToolbarToolType));
}}
/>
setCursorMode is called in the onValueChange function. At this point, we need to understand:
- What does setCursorMode do?
What does setCursorMode do?
To understand what setCursorMode does, we first need to look at where this function is imported from. The below code is picked from line 140 in toolbar.tsx
const { setCursorMode, cursor_mode } = useEventTarget();
useEventTarget is a hook in provider.tsx. Below code is picked from line 2107 in provider.tsx
const setCursorMode = useCallback(
(cursor_mode: CursorMode) => {
dispatch({
type: "surface/cursor-mode",
cursor_mode,
});
},
[dispatch]
);
setCursorMode does one thing, that is to call dispatch function with a object containing type and cursor mode.
dispatch is a function destructured from _useInternal.
const [state, dispatch] = __useInternal();
In the upcoming articles, we will review this __useInternal and the function toolbar_value_to_cursormode.
About me:
Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.
I am open to work on interesting projects. Send me an email at ramu.narasinga@gmail.com
My Github — https://github.com/ramu-narasinga
My website — https://ramunarasinga.com
My Youtube channel — https://www.youtube.com/@thinkthroo
Learning platform — https://thinkthroo.com
Codebase Architecture — https://app.thinkthroo.com/architecture
Best practices — https://app.thinkthroo.com/best-practices
Production-grade projects — https://app.thinkthroo.com/production-grade-projects