feat(nodes): add nodeOrigin prop

examples/nextjs/pages/CustomNode/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, MouseEvent, ChangeEvent } from 'react';
+import React, { useState, useEffect, MouseEvent, ChangeEvent, useCallback } from 'react';
 import {
   ReactFlow,
   MiniMap,
@@ -118,8 +118,11 @@ const CustomNodeFlow = () => {
     ]);
   }, []);
 
-  const onConnect = (connection: Connection) =>
-    setEdges((eds) => addEdge({ ...connection, animated: true, style: { stroke: '#fff' } }, eds));
+  const onConnect = useCallback(
+    (connection: Connection) =>
+      setEdges((eds) => addEdge({ ...connection, animated: true, style: { stroke: '#fff' } }, eds)),
+    [setEdges]
+  );
 
   return (
     <ReactFlow

examples/nextjs/pages/DragNDrop/index.tsx

@@ -10,6 +10,7 @@ import {
   useNodesState,
   useEdgesState,
   Controls,
+  NodeOrigin,
 } from '@react-flow/bundle';
 
 import Sidebar from './Sidebar';
@@ -33,6 +34,8 @@ const onDragOver = (event: DragEvent) => {
 let id = 0;
 const getId = () => `dndnode_${id++}`;
 
+const nodeOrigin: NodeOrigin = [0.5, 0.5];
+
 const DnDFlow = () => {
   const [reactFlowInstance, setReactFlowInstance] = useState<ReactFlowInstance>();
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
@@ -74,6 +77,7 @@ const DnDFlow = () => {
             onInit={onInit}
             onDrop={onDrop}
             onDragOver={onDragOver}
+            nodeOrigin={nodeOrigin}
           >
             <Controls />
           </ReactFlow>