Add draggedOver to state.events

[ackvf]

/edit Title changed from

Why is dragged item also hovered when dragging over another item?

This is not a bug per se, but still an unexpected and weird behaviour.
I am dragging an item from its former location to another location, my cursor is above another Container, but the original dragged item still remains hovered even though that doesn't really make sense.

I have discovered this weird behaviour while trying to work around the limitation in #26.
I desperately need to tell which element am I currently dragging over. I used this custom proxy hack to achieve that, maybe it's wrong and I am getting stale value there?

const BoxListItem: UserComponent<BoxListItemProps> = props => {
  const { id, connectors: { connect, drag } } = useNode();
  const { actions: { setCustom }, hovered } = useEditor(state => console.debug('hovered', state.events.hovered) || ({ hovered: state.nodes[state.events.hovered].data.type }) )

  setCustom(id, custom => custom.hovered = hovered)
 
  // return JSX

BoxListItem.craft = {
  rules: {
    canDrag: node => console.debug('node.data.custom.hovered === ', node.data.custom.hovered === BoxList, node.data.custom.hovered) || node.data.custom.hovered === BoxList
  }
}

// this is where the state keeps printing
export const PropertiesPanel = () => {
  const {  PropsPanel, name } = useEditor(state => {
    if (!state.events.selected) return;
    console.debug('state', state.events, state)
    // return collector

Even though I will work on the canDrop rule as mentioned in #26 to implement the functionality, I believe that the editor state should better reflect what events are happening.

[prevwong]

The hovered state is triggered by the mouseover listener, so of course this is different from what you're trying to do, which requires Craft to know the element on dragover.

I think this might be useful though. For example, to have a component to add a style to indicate that it's a drop target when you're dragging something over it.

Since they're not exactly the same thing, hovered should be kept as is, but there should a new property (maybe simply draggedOver ? 😆) to reference the Node that is being dragged over.

[ackvf]

Thanks for clarification. After studying the Drag and Drop API for a bit, it makes sense.
draggedOver fits the already established terminology.

[ankri]

I have started implementing a solution but ran into a problem. Can you guys give your opinion in #37 ?