[Example Request]: How to change the size of the draw tool in the Custom UI

[mochizuki-pg]

What's the example?

Custom UI is creating using SDK I need to know how to call the resize button in the Custom UI when the draw tool (pen) is selected

Sorry for the rudimentary question

The image looks like this I want to know which method to call in the SDK

function ExternalToolbar({ currentToolId, editor }: { currentToolId: string | undefined; editor: Editor | null }) {
 const tools = ['select', 'eraser', 'text', 'draw']

 const handleChangePenSize = (size: "s" | "m" | "l" | "xl") => {

   ~~~~~~~~~
  }
};
};
 return (
   <div className="flex items-center">
     {tools.map((toolId) => (
       <button
         key={toolId}
         className={`px-3 py-2 rounded-md ${
           currentToolId === toolId ? 'bg-gray-200' : 'bg-white'
         }`}
         onClick={() => editor?.setCurrentTool(toolId)}
       >
         {toolId}
       </button>
     ))}
     {currentToolId === 'draw' && (
       <div>
         <button onClick={() => handleChangePenSize("s")}>Small</button>
         <button onClick={() => handleChangePenSize("m")}>Medium</button>
         <button onClick={() => handleChangePenSize("l")}>Large</button>
         <button onClick={() => handleChangePenSize("xl")}>Extra Large</button>
       </div>
     )}
     <MakeLiveButton />
   </div>

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[linear[bot]]

TLD-2490 [Example Request]: How to change the size of the draw tool in the Custom UI

[steveruizok]

import { DefaultSizeStyle } from "tldraw"

editor.setStyleForSelectedShapes(DefaultSizeStyle, 's')
editor.setStyleForNextShapes(DefaultSizeStyle, 'm')