React wrapper, should have a way to access designer

[travisnguyen20]

I'm using react version, I would like to set drag/drop button on control bar to be enbled by default, that required access to designer instance however there is no way to access it with react wrapper?

Would you support it? or there is other way to disable drag/drop button without touching designer instance?

Thanks

[b4rtaz]

Hello @travisnguyen20,

I would like to set drag/drop button on tool to be enbled by default

I'm not sure if I understand. Could you explain which button you are referring to? Is it a button in the control bar? Are you trying to block drag-and-drop from the toolbox?

[travisnguyen20]

I'm referring to Drag & Drop button on control bar

[b4rtaz]

Do you want to hide this? Could you provide some context for why you want to hide it?

[travisnguyen20]

not hiding but enabling it by default.
In my project, when you first open the workflow, that is usually a huge workflow; the user always wants to drag to the desired area before making changes. I know that clicking on outer space and dragging can do the job, but users usually make mistakes clicking on a node and dragging then, which messes up the workflow.

I attach a video for demo

Screen.Recording.2025-01-23.at.08.49.43.mov

[b4rtaz]

I see. You can disable dragging at the beginning by using the external control bar feature (it's available in the pro version).

Please check this demo. In it, you can see that the application, written in React, can enable or disable dragging (the control bar here is created at the application level using TSX).

How it works? The pro version provides the useExternalControlBarController() hook for React.

const externalControlBarController = useExternalControlBarController();

...

externalControlBarController.setIsDragDisabled(true /* or false */);

...

externalControlBarController.isDragDisabled(); // => true or false