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

Add preview ref api for Node #133

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

spellforce
Copy link

Issues

One of the phenomena of Chrome browsers on Mac is that outside the DND range, the Drag or Drop event will be delayed by 250ms, because to play the animation, react-DND uses preview(getEmptyImage()); . Going to overlay causes a problem: it looks stuttering

20230321095759

So the default preview was removed, the default preview was changed to react-dnd's preview, and the preview interface was exposed

20230321100313

This feature only affects the default effect

@spellforce spellforce force-pushed the addMoreApi branch 2 times, most recently from 019947c to a342e61 Compare March 21, 2023 09:21
@jameskerr
Copy link
Member

This does look much better! I'm not as familiar with the drag and drop api. How would you style the drag preview?

@@ -9,6 +9,7 @@ export type NodeRendererProps<T> = {
node: NodeApi<T>;
tree: TreeApi<T>;
dragHandle?: (el: HTMLDivElement | null) => void;
previewHandle?: (el: HTMLDivElement | null) => void;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How does this previewHandle get used?

Copy link
Author

@spellforce spellforce May 12, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it will be used in nodeRender, if user need. They can custom preview div ref.
such as :

<div ref={previewHandle}><dragImg ref={dragHandle} />im a test</div>

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh ok, I see.

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

Successfully merging this pull request may close these issues.

2 participants