Is it possible to position dynamically created Handles using css flex positioning?

[tauren]

I'm dynamically adding and removing custom source Handles from a node. The custom node renders multiple divs using flex items with space-around positioning. The handles are rendered as a child of those flex items. This allows me to nicely position the handles using flexbox instead of creating custom JS positioning logic.

However, when I dynamically add or remove Handles, the existing connection endpoint locations (SVG endpoints) sometimes don't update. I've tried using useUpdateNodeInternals, but it doesn't seem to do anything. The only way I can get it to re-render is to change a connection to a target handle.

Screen.Recording.2024-01-31.at.2.06.03.PM.mov

Here's excerpts from the code to illustrate. Any idea why I'm getting invalid intermittent behavior?

// Node
const { id } = node;
const { indexes } = node.data; // [3, 6, 9]

const connections = useHandleConnections({ type: 'source' });
const updateNodeInternals = useUpdateNodeInternals();

useEffect(() => {
  updateNodeInternals(id);
}, [connections, updateNodeInternals, id]);

return (
  <div className={`flex justify-around gap-1`}>
    {indexes.map((index, i) => (
      <CustomHandle key={i} index={index} />
    ))}
  </div>
);

// Handle
export const CustomHandle = ({ index }) => {
  return (
    <div>
      <div>#{index}</div>
      <Handle id={`index-${index}`} type="source" position={Position.Bottom} />
    </div>
  );
};

/* Standard tailwindcss classes */
.flex {
  display: flex;
}
.justify-around {
  justify-content: space-around;
}
.gap-1 {
  gap: 0.25rem;
}

[tauren]

I did want to mention I'm using v12, if that makes a difference.

I also noticed #3800 is having the same problem.

[bcakmakoglu]

I got this to work with a useEffect and useUpdateNodeInternals.

Here's a sandbox for v11.

The same seems to work in v12 as well.

Here's a sandbox for v12.

[Azim-Ahmed]

why codesandbox is not working @bcakmakoglu

[bcakmakoglu]

Recent codesandbox changes probably - they changed their pricing model and it messes up a lot of old sandboxes -.-

[Azim-Ahmed]

This is really sad,
do you have any other ways to get the code?

[moklick]

The sandboxes are private by default now.

However we need an alternative to codesandbox. It's really a mess.

[Bartel-C8]

@bcakmakoglu : Could you possibly just paste your solution here in code tags (```) in the meanwhile? Thanks!