search

lukasbach / react-complex-tree

Unopinionated Accessible Tree Component with Multi-Select and Drag-And-Drop
https://rct.lukasbach.com
MIT License
944 stars 74 forks source link

Customize Cursor when Dragging #268

Open weston-sankey-mark43 opened 1 year ago

weston-sankey-mark43 commented 1 year ago

When dragging a tree node, the cursor is set to the copy value, which doesn't accurately represent the action I'm performing when moving a node from one section to another. I'd like to customize this value and set it to grabbing, but can't find anywhere in the source code where the value is being set to copy.

Overriding the renderDraggingItem prop on ControlledTreeEnvironment seemed to have no effect.

lukasbach commented 1 year ago

The icon is not explicitly defined by RTC, instead, the dataTransfer.dropEffect attribute is set when the user starts dragging, and is set to "move": https://github.com/lukasbach/react-complex-tree/blob/main/packages/core/src/interactionMode/ClickItemToExpandInteractionManager.ts#L56

The cursor that is shown in this case depends on the browser I guess, the docs for the property are here: https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/dropEffect

You can probably overwrite this cursor yourself with CSS, or expand the interaction manager you are using (probably ClickToExpandInteractionManager) with a new default drop effect, see https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/dropEffect on that. There, you can overwrite the "onDragStart" method with something like

onDragStart: e => {
        e.dataTransfer.dropEffect = 'other-dropeffect';
        actions.startDragging();
},