Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Customize Cursor when Dragging #268

Open
weston-sankey-mark43 opened this issue May 22, 2023 · 1 comment
Open

Customize Cursor when Dragging #268

weston-sankey-mark43 opened this issue May 22, 2023 · 1 comment
Assignees

Comments

@weston-sankey-mark43
Copy link

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
Copy link
Owner

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();
},

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants