refactor(connectionline): use abs pos

src/components/ConnectionLine/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, CSSProperties } from 'react';
+import React, { useRef, CSSProperties } from 'react';
 import shallow from 'zustand/shallow';
 
 import { useStore } from '../../store';
@@ -28,7 +28,7 @@ interface ConnectionLineProps {
   CustomConnectionLineComponent?: ConnectionLineComponent;
 }
 
-const selector = (s: ReactFlowState) => ({ nodeLookup: s.nodeLookup, transform: s.transform });
+const selector = (s: ReactFlowState) => ({ nodeLookup: s.nodeLookup, nodes: s.nodes, transform: s.transform });
 
 export default ({
   connectionNodeId,
@@ -41,27 +41,29 @@ export default ({
   isConnectable,
   CustomConnectionLineComponent,
 }: ConnectionLineProps) => {
-  const { nodeLookup, transform } = useStore(selector, shallow);
-  const [sourceNode, setSourceNode] = useState<NodeLookupItem | null>(null);
   const nodeId = connectionNodeId;
   const handleId = connectionHandleId;
 
-  useEffect(() => {
+  const { nodeLookup, nodes, transform } = useStore(selector, shallow);
-    const nextSourceNode = nodeLookup.get(nodeId) || null;
+  const sourceNodeInternals = useRef<NodeLookupItem | undefined>(nodeLookup.get(nodeId));
-    setSourceNode(nextSourceNode);
+  const sourceNode = useRef<Node | undefined>(nodes.find((n) => n.id === nodeId));
-  }, []);
 
-  if (!sourceNode || !isConnectable || !sourceNode.handleBounds?.[connectionHandleType]) {
+  if (
+    !sourceNode.current ||
+    !sourceNodeInternals.current ||
+    !isConnectable ||
+    !sourceNodeInternals.current.handleBounds?.[connectionHandleType]
+  ) {
     return null;
   }
 
   const sourceHandle = handleId
-    ? sourceNode.handleBounds[connectionHandleType]!.find((d: HandleElement) => d.id === handleId)
+    ? sourceNodeInternals.current.handleBounds[connectionHandleType]!.find((d: HandleElement) => d.id === handleId)
-    : sourceNode.handleBounds[connectionHandleType]![0];
+    : sourceNodeInternals.current.handleBounds[connectionHandleType]![0];
-  const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : sourceNode.width! / 2;
+  const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : sourceNodeInternals.current.width! / 2;
-  const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : sourceNode.height!;
+  const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : sourceNodeInternals.current.height!;
-  const sourceX = sourceNode.position!.x + sourceHandleX;
+  const sourceX = sourceNodeInternals.current.positionAbsolute!.x + sourceHandleX;
-  const sourceY = sourceNode.position!.y + sourceHandleY;
+  const sourceY = sourceNodeInternals.current.positionAbsolute!.y + sourceHandleY;
 
   const targetX = (connectionPositionX - transform[0]) / transform[2];
   const targetY = (connectionPositionY - transform[1]) / transform[2];
@@ -81,7 +83,7 @@ export default ({
           targetPosition={targetPosition}
           connectionLineType={connectionLineType}
           connectionLineStyle={connectionLineStyle}
-          sourceNode={sourceNode as Node}
+          sourceNode={sourceNode.current as Node}
           sourceHandle={sourceHandle}
         />
       </g>

src/container/NodeRenderer/index.tsx

@@ -74,6 +74,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
 
         return (
           <NodeComponent
+            key={node.id}
             id={node.id}
             className={node.className}
             style={node.style}

src/container/ZoomPane/index.tsx

@@ -278,7 +278,7 @@ const ZoomPane = ({
   ]);
 
   return (
-    <div className="react-flow__renderer react-flow__zoompane" ref={zoomPane}>
+    <div className="react-flow__renderer react-flow__container" ref={zoomPane}>
       {children}
     </div>
   );

src/hooks/useResizeHandler.ts

@@ -6,7 +6,7 @@ import { ReactFlowState } from '../types';
 
 const updateSizeSelector = (state: ReactFlowState) => state.updateSize;
 
-export default (rendererNode: MutableRefObject<HTMLDivElement | null>) => {
+function useResizeHandler(rendererNode: MutableRefObject<HTMLDivElement | null>) {
   const updateSize = useStore(updateSizeSelector);
 
   useEffect(() => {
@@ -42,4 +42,6 @@ export default (rendererNode: MutableRefObject<HTMLDivElement | null>) => {
       }
     };
   }, []);
-};
+}
+
+export default useResizeHandler;