[Example Request]: How to change the size of the draw tool in the Custom UI
mochizuki-pg opened this issue · comments
mochizuki-pg commented
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
- I agree to follow this project's Code of Conduct
linear commented
Steve Ruiz commented
import { DefaultSizeStyle } from "tldraw"
editor.setStyleForSelectedShapes(DefaultSizeStyle, 's')
editor.setStyleForNextShapes(DefaultSizeStyle, 'm')