refactor(edges): only redraw moved edges

src/NodeRenderer/HandleTypes/BaseHandle.js

@@ -1,8 +1,6 @@
-import React, { memo, useContext } from 'react';
+import React, { memo } from 'react';
 import cx from 'classnames';
 
-import NodeIdContext from '../NodeIdContext'
-import { GraphContext } from '../../GraphContext';
 import { setConnecting, setConnectionPos } from '../../state/actions';
 
 function onMouseDown(evt, { nodeId, dispatch, onConnect, isTarget }) {
@@ -37,9 +35,7 @@ function onMouseDown(evt, { nodeId, dispatch, onConnect, isTarget }) {
   document.addEventListener('mouseup', onMouseUp)
 }
 
-export default memo(({ source, target, className = null, ...rest }) => {
-  const nodeId = useContext(NodeIdContext);
-  const { dispatch, onConnect } = useContext(GraphContext);
+export default memo(({ source, target, nodeId, onConnect, dispatch, className = null, ...rest }) => {
   const handleClasses = cx(
     'react-graph__handle',
     className,

src/NodeRenderer/HandleTypes/SourceHandle.js

@@ -1,5 +1,20 @@
-import React from 'react';
+import React, { memo, useContext } from 'react';
 
 import BaseHandle from './BaseHandle';
+import NodeIdContext from '../NodeIdContext'
+import { GraphContext } from '../../GraphContext';
 
-export default props => <BaseHandle source {...props} />;
+export default memo((props) => {
+  const nodeId = useContext(NodeIdContext);
+  const { dispatch, onConnect } = useContext(GraphContext);
+
+  return (
+    <BaseHandle
+      source
+      nodeId={nodeId}
+      dispatch={dispatch}
+      onConnect={onConnect}
+      {...props}
+    />
+  );
+});

src/NodeRenderer/HandleTypes/TargetHandle.js

@@ -1,6 +1,21 @@
-import React from 'react';
+import React, { memo, useContext } from 'react';
 
 import BaseHandle from './BaseHandle';
+import { GraphContext } from '../../GraphContext';
+import NodeIdContext from '../NodeIdContext'
 
-export default props => <BaseHandle target {...props} />;
+export default memo((props) => {
+  const nodeId = useContext(NodeIdContext);
+  const { dispatch, onConnect } = useContext(GraphContext);
+
+  return (
+    <BaseHandle
+      target
+      nodeId={nodeId}
+      dispatch={dispatch}
+      onConnect={onConnect}
+      {...props}
+    />
+  );
+});
 

src/NodeRenderer/index.js

@@ -32,13 +32,12 @@ function renderNode(d, props, graphContext) {
 const NodeRenderer = memo((props) => {
   const graphContext = useContext(GraphContext);
   const { transform, nodes } = graphContext.state;
+  const transformStyle = { transform : `translate(${transform[0]}px,${transform[1]}px) scale(${transform[2]})` };
 
   return (
     <div
       className="react-graph__nodes"
-      style={{
-        transform: `translate(${transform[0]}px,${transform[1]}px) scale(${transform[2]})`
-      }}
+      style={transformStyle}
     >
       {nodes.map(d => renderNode(d, props, graphContext))}
     </div>