toolbar_value_to_cursormode function in Grida codebase
In this article, we will review a function named toolbar_value_to_cursormode in Grida source code.
This function is called in another function setCursorMode
<ToolsGroup
value={value}
options={[
{ value: "cursor", label: "Cursor", shortcut: "V" },
{ value: "hand", label: "Hand tool", shortcut: "H" },
]}
onValueChange={(v) => {
setCursorMode(toolbar_value_to_cursormode(v as ToolbarToolType));
}}
/>setCursorMode is used in a component called PlaygroundToolbar.
toolbar_value_cursormode
This function is defined in forms/grida-react-canvas/toolbar/index.ts.
export function toolbar_value_to_cursormode(tt: ToolbarToolType): CursorMode {
switch (tt) {
case "cursor":
return { type: "cursor" };
case "hand":
return { type: "hand" };
case "container":
case "ellipse":
case "image":
case "rectangle":
case "text":
return { type: "insert", node: tt };
case "line":
case "pencil":
return { type: "draw", tool: tt };
case "path":
return { type: "path" };
default:
return { type: "cursor" };
}
}This is a simple function using switch-case, based on the value passed as an argument, an object containing type is returned.
For example, if you click on rectangle in the toolbar:
The below object is returned
{ type: "insert", node: tt };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