Internal node state __rf.handleBounds not updated after moving handle location

Hi,

I was able to programmatically move a Handle's location via CSS style, e.g. <Handle ... style={{left:'50%'}}/> to <Handle ... style={{left:'70%'}}/> inside onEdgeUpdateEnd callback; after updating the elements array, the screen refreshed and moved the Handle accordingly except the connected edge still points to the original location on the screen. Turns out the targetX and targetY values provided to the Edge component still reflects the old values. After debugging and reading the source code, I tried to force an update on the node internal states via useStoreActions((actions) => actions.updateNodeDimensions) but node.__rf.handleBound remained the same value before and after the update. Is there another way to force refresh node.__rf.handleBound?

[EdwardSalter]

I have just stumbled upon this issue as I was experiencing the same issue after my custom node rearranged handles based on some sorting. I tried using the code that @datoslabs posted here and got that working.

const onEdgeUpdateEnd = (event, edge) => { 
  calculateNewHandlePosition();
  setElements((els)=>updateHandlePosition(nodeId, handled, els));

  // need to postpone updateNodeDimensions to allow for at least 1 render cycle to pass in order to update node.__rf.handleBound correctly.
  setTimeout(function waitB4UpdateNodeDimensions() {
          const nodeElement = document.querySelector(`.react-flow__node[data-id="${nodeId}"]`);
          updateNodeDimensions([{ id:nodeId, nodeElement, forceUpdate: true }]);
  }, 100);
}

I was however not happy with the document.querySelector method of retrieving the node to update and was perusing the documentation looking to see if I could find out whether the custom node receives a ref to the HTML Element in question. Within search, I actually managed to stumble across the useUpdateNodeInternals hook that is documented here. This hook can be used in place of @datoslabs code and enables us to do force this update without having to resort to dispatching internal actions.

To get it working, I know having the following code:

import { Handle, useUpdateNodeInternals } from 'react-flow-renderer';

const MyCUstomNode= (props) => {
  const sortedItems = useMemo(() => {
    const itemsCopy= Array.from(props.items);
    items.sort();
    return items;
  }, [items]);

  const updateNodeInternals = useUpdateNodeInternals();

  // Since the Handles are rendered based on the `sortedItems` array, detect changes in this array and forcefully update the node internals.
  useEffect(() => {
    updateNodeInternals(props.id);
  }, [sortedItems]);

  return (
    // ...
    {sortedItems.map((item) => {
      <Handle id={item.id} type="source" />
    })}
    // ...
  )
}

[moklick]

as @EdwardSalter pointed out useUpdateNodeInternals is the way to go when you programatically change the handles.