merge main

examples/react/src/examples/AddNodeOnEdgeDrop/index.tsx

@@ -47,7 +47,7 @@ const AddNodeOnEdgeDrop = () => {
     (event) => {
       if (!connectingNodeId.current) return;
 
-      const targetIsPane = (event.target as HTMLDivElement)?.classList.contains('react-flow__pane');
+      const targetIsPane = (event.target as Partial<Element> | null)?.classList?.contains('react-flow__pane');
 
       if (targetIsPane && 'clientX' in event && 'clientY' in event) {
         // we need to remove the wrapper bounds, in order to get the correct position

examples/react/src/examples/UseNodeConnections/MultiHandleNode.tsx

@@ -28,10 +28,11 @@ function CustomHandle({ nodeId, ...handleProps }: HandleProps & { nodeId: string
 const CustomNode: FC<NodeProps> = ({ id }) => {
   return (
     <div style={{ background: '#333', color: '#fff', padding: 10, fontSize: 12, borderRadius: 10 }}>
-      <CustomHandle nodeId={id} type="target" position={Position.Left} />
+      <CustomHandle nodeId={id} type="target" position={Position.Left} id="t1" style={{ top: 10 }} />
+      <CustomHandle nodeId={id} type="target" position={Position.Left} id="t2" style={{ top: 20 }} />
       <div>node {id}</div>
-      <CustomHandle nodeId={id} type="source" position={Position.Right} id="a" style={{ top: 10 }} />
-      <CustomHandle nodeId={id} type="source" position={Position.Right} id="b" style={{ top: 20 }} />
+      <CustomHandle nodeId={id} type="source" position={Position.Right} id="s1" style={{ top: 10 }} />
+      <CustomHandle nodeId={id} type="source" position={Position.Right} id="s2" style={{ top: 20 }} />
     </div>
   );
 };

examples/react/src/examples/UseNodeConnections/index.tsx

@@ -69,17 +69,16 @@ const initEdges = [
     source: '1',
     target: '3',
   },
-
   {
     id: 'e4a-5',
     source: '4',
-    sourceHandle: 'a',
+    sourceHandle: 's1',
     target: '5',
   },
   {
     id: 'e4b-5',
     source: '4',
-    sourceHandle: 'b',
+    sourceHandle: 's2',
     target: '6',
   },
 ];
@@ -92,6 +91,8 @@ const CustomNodeFlow = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState(initNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initEdges);
 
+  console.log(edges);
+
   const onConnect = useCallback((connection: Connection) => setEdges((eds) => addEdge(connection, eds)), [setEdges]);
 
   return (

examples/svelte/src/routes/examples/add-node-on-drop/Flow.svelte

@@ -37,7 +37,7 @@
 		if (!connectingNodeId) return;
 
 		// See of connection landed inside the flow pane
-		const targetIsPane = (event.target as HTMLDivElement)?.classList.contains('svelte-flow__pane');
+		const targetIsPane = (event.target as Partial<Element> | null)?.classList?.contains('svelte-flow__pane');
 		if (targetIsPane && 'clientX' in event && 'clientY' in event) {
 			const id = getId();
 			const position = {