Support Dragging External Items

[rossmeredith]

I attempted dragging an external item onto a controlled tree but it does not trigger the onDrop handler. I tried an external drag item both external and internal to the controlled environment but neither worked.

Can dragging items outside the controlled environment be supported? I can't think of any reason why this would be difficult to implement but then again I know nothing about the internals of this library haha. So I would expect the first parameter, to be undefined, since I'm in control of this, and the second parameter, would be based on logic already written I'm guessing.

[rossmeredith]

Did I ask a dumb question? Still no response after two weeks ...

[lukasbach]

Hey, not at all, just didn't have the time to look into this yet.

With some workarounds, this is kinda achievable already by just adding custom drop handlers to tree items, this can be done pretty quickly with a custom interaction mode: https://codesandbox.io/s/react-complex-tree-external-dragging-fkf88e?file=/src/App.tsx

It's probably not quite everything you want, since it doesn't show any drag effects, but maybe it's a good-enough workaround for you for now.

Right now, RCT internally keeps track of the drag state (list of dragging items and drag position), so to implement this feature properly, I could imagine using an empty list for dragging items for cases where custom elements are dragged in. The drop handler provided by the consumer is called in

react-complex-tree/packages/core/src/controlledEnvironment/DragAndDropProvider.tsx

Lines 170 to 179 in 450e874

	const onDropHandler = useStableHandler(() => {
	if (draggingItems && draggingPosition && environment.onDrop) {
	environment.onDrop(draggingItems, draggingPosition);
	callSoon(() => {
	environment.onFocusItem?.(draggingItems[0], draggingPosition.treeId);
	resetState();
	});
	}
	});

so I suppose only the onFocusItem call would have to be adjusted to not fire. However, RCT also needs to be informed that a drag has started, so it can react to the drag event. Since this starts outside of RCT, the only good way I can think of, is doing that through an imperative ref on the environment. If there are better suggestions, I'm open. Right now, this is possible through [treeEnvRef.current.dragAndDropContext.onStartDraggingItems(items, treeId). But since this would become a consumer-oriented feature, a more convenient interface should probably be pulled up from the dragAndDropContext subprop to the environment ref, maybe something like treeEnvRef.current.startCustomDrag(treeId: string).

I haven't tested this, so not completely sure if this works how I imagine it right now. I'm open for other suggestions for how the interface could look like, and also contributions if anyone is interested.

[rossmeredith]

Hi. Thanks for getting back to me. I'll look into what you suggest some time this week.