Added events.draggedOver

[ankri]

This is a first attempt to solve #28. But is a draft only.

I started implementing a solution and added events.draggedOver. useNode now provides a selector for events.draggedOver: boolean and useEditor now provides a selector for events.draggedOver: NodeId | null. Currently this is implementation and example only. I have not added documentation yet because I ran into a problem:

Currently I implemented draggedOver like this:

craft.js/packages/core/src/events/EventManager.tsx

Lines 103 to 107 in 39350e5

	if (query.node(id).isCanvas()) {
	setNodeEvent("draggedOver", id);
	} else {
	setNodeEvent("draggedOver", query.node(id).get().data.parent);
	}

It works great for my use case: Adding an outline to the Canvas that the Node will be dropped in. The problem is that draggedOver will either be the id of the Component the Node is being dragged over if the node is a Canvas or it will be the id of the parent Canvas if the node is not a Canvas.
It could break the developer's expectation because draggedOver will never be true for the component the node is being dragged over if the component is not a Canvas.

I couldn't come up with a good solution that set draggedOver to the dragged over NodeId while still being able to only add a CSS rule to the parent Canvas.

What do you think @prevwong ? Should we continue with draggedOver being either the NodeId or the NodeId of the parent canvas? Or go with draggedOver always being the NodeId of the node that is being dragged over?

---

Example Usage in the landing example Container
Example Usage in the landing example OnlyButtons

[prevwong]

Hey @ankri, what if we kept draggedOver to be the id of the Node, and let the developer to decide what they want to do with it?

Let's use your example of adding an outline to the immediate Canvas of the Node that is being dragged over:

export const MyCanvas = () => {
    const {id} = useNode();
    const {isDraggedOver} = useEditor((state, query) => {
        let isDraggedOver = false;
        const { events: {draggedOver} } = state;
        if ( draggedOver ) {

           // Get all ancestor ids of the Node that is being dragged over
            const ancestors = query.node(draggedOver).ancestors();

            for ( let i = 0; i < ancestors.length; i++ ) {
                const ancestorId = ancestors[i];
                const isAncestorCanvas = query.isCanvas(ancestorId);
                if ( isAncestorCanvas ) {

                    // If the first Canvas ancestor is the current Canvas
                    if ( ancestorId == id ) {
                        isDraggedOver = true;
                    }
                    break;
                }
            }
        }
       return {
         isDraggedOver
       }
    });

    return (
        <div className={isDraggedOver ? 'outline' : ''}>
            ...
        </div>
    )
}

But yea, if this is a common use case then it might be a lot of code and not so convenient. Alternatively, maybe we can convert the example I wrote into a NodeHelper, so we can then easily do something like query.node(id).hasChildNodeDraggedOver():

export const MyCanvas = () => {
    const {id} = useNode();
    const {isDraggedOver} = useEditor((state, query) => ({
        isDraggedOver: query.node(id).hasChildNodeDraggedOver()
    }));

    return (
        <div className={isDraggedOver ? 'outline' : ''}>
            ...
        </div>
    )
}

[ankri]

Closing in favor of #186