Is it possible to connect inner elements of node with another node

[tribal isle]

In the Reactflow program shown , nodes are dynamically created based on the currently selected node. Each new node is connected via an edge that displays the selected text used to establish the connection.

However, instead of linking the new node to the original node that contains the selected text, I’d like to link it directly to the selected text itself—as if the text were the source of the connection.

Is this kind of text-based linking possible within React Flow? If so, I’d like any suggestions for implementing it.

[gaunt mist]

Edges are made from a <Handle/> to a <Handle/>. When you select some text, you can dynamically create a <Handle/> at that particular position. You can get the flow position where the Handle should be created via

const { screenToFlowPosition } = useReactFlow();
const handlePosition = screenToFlowPosition(x:e.clientY, e.clientY);

You can add this handle position object in a handles array that can be present in the data object of the every node which would keep track of the nodes handles. For every node you can .map() the handles array to map the <Handle/> components

Once you add that <Handle/>, you can add an edge which joins the newly added node with that particular Handle.

Then you can call updateNodeInternals function to adjust the edge's position(if the edge isnt made properly since the Handle was dynamically created)

[tribal isle]

Hmm well I'm new to reactflow & just know the basics, wrote the above code just via prompting into LLMs.
Gave your advice to the LLMs and got a hell of rubbish code. (Almost via all)

Maybe I'll be able to follow your advice & experiment after learning some more about reactflow.
Anyways Thanks for your advice.

Attaching the code files of the program.

[gaunt mist]

An edge object has this particular shape

{
  id: string;  // Unique Identifier for an edge
  source: string;  // Source Node's Id
  target: string;  // Target Node's Id
  sourceHandle: string;  // Source Node's Handle Id
  targetHandle: string;  // Target Node's Handle Id
}

You will have a handles array in every node's data object of the type

{
   id: string;  // Unique Identifier of a Handle. Can assign via uuid package
   x: string;  // X coordinate of Handle
   y: string   // Y coordinate of Handle
}

Once you want to create a connection to some text(on selection), you append a handle object to the handles property of the node's data object in which it is present via updateNodeData. It would look like this

const { updateNodeData, screenToFlowPosition  } = useReactFlow();
const onTextSelect = (e) => {
// where e is MouseEvent
const handlePosition = screenToFlowPosition(x:e.clientY, e.clientY);

const newHandle = {
   id: uuid(),
   ...handlePosition
}
   updateNodeData(id, {handles:[...data.handles, newHandle ]})
}

_ _
Every node would be mapping the handles like this

{data.handles.map(handle=><Handle id={handle.id} type="target" position={Position.Top} style={{top:handle.y,left:handle.x}}/>)}

After the Handle update is done, you would create the new edge via the handle's id like this

const { addEdge } = useReactFlow();
addEdge({id:uuid(), source:selectedNodesId, target:currentNodesId, targetHandle:newHandle.id})

If for some reason the edge doesnt go properly from the node to the text, call updateNodeInternals after the edge is added via the useUpdateNodeInternals hook.

[tribal isle]

Hmm...feels a little complicated to understand..
Well could you show me a simple example.

I've this this code below [little modified version of the Quick Starter]:=> Could show me via putting an edge(initialEdge) between the Text in the Custom Node SimpleTextNode and between Node 2..

Well I get it now!!🥳...
Did some experimentations and finally got it the with this basic example..

example I used for understanding: <Attached>

This code did the trick:

  return (
    <div className="text-updater-node bg-amber-300 text-black p-2 rounded-[10px] hover:brightness-150 active:bg-blue-400 transition duration-300">
      <div className='bg-orange-400 p-1 relative'>
        Text
        <Handle
          type="source"
          position={Position.Right}
          id="text-handle"
          style={{ background: '#ff6b6b' }}
        />
      </div>
      <div className='bg-blue-400'>
        Lorem ipsum dolor sit amet consectetur
      </div>
    </div>
  );
}

const nodeTypes = {
  simpleTextNode: SimpleTextNode,
}



const initialNodes = [
  { id: 'n1', position: { x: 0, y: 0 }, data: { label: 'Node 1' } },
  { id: 'n2', position: { x: 160, y: 0 }, data: { label: 'Node 2' } },
  { id: 'textNode1', type: 'simpleTextNode', position: { x: 100, y: -150 } }
];

// Added edge from the text handle to node 2
const initialEdges = [
  { id: 'n1-n2', source: 'n1', target: 'n2' },
  { id: 'textNode1-n2', source: 'textNode1', sourceHandle: 'text-handle', target: 'n2' }
];```

reminder on <Handle> helped

@gaunt mist
Thank you

Hmm...

Still got some doubts now

I've observed that the connection only happened because text div is relative I don't understand why it effected the connection

        Text
        <Handle
          type="source"
          position={Position.Right}
          id="text-handle"
          style={{ background: '#ff6b6b' }}
        />
      </div>```

Also is there a way to bring the connection forward (above the custom text node)
Right its under the node, which is making the connection  not visible

[gaunt mist]

Handle's are absolutely positioned. So if you want the <Handle/> to position based on anything other then the node itself, you can wrap the <Handle/> with a div and give it a position: relative.

For the edge to appear on top of the node, just give all edges a big zIndex using the defaultEdgeOptions prop of ReactFlow like this

const defaultEdgeOptions = { zIndex:3000 }

<ReactFlow
  defaultEdgeOptions={defaultEdgeOptions}
/>