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

References:

1. https://app.grida.co/canvas

2. https://github.com/gridaco/grida/blob/main/apps/forms/grida-react-canvas/provider.tsx#L2087

3. https://github.com/gridaco/grida/blob/main/apps/forms/grida-react-canvas/provider.tsx#L2107