Blog
toolbar_value_to_cursormode function in Grida codebase

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

References:

  1. apps/forms/scaffolds/playground-canvas/toolbar.tsx#L165

  2. apps/forms/scaffolds/playground-canvas/toolbar.tsx#L135