refactor(renderer): dont rerender nodes when selcting element

src/EdgeRenderer/EdgeTypes/wrapEdge.js

@@ -2,7 +2,6 @@ import React, {  memo } from 'react';
 import cx from 'classnames';
 
 import { setSelectedElements } from '../../state/actions';
-import { isEdge } from '../../graph-utils';
 
 const isInput = e => ['INPUT', 'SELECT', 'TEXTAREA'].includes(e.target.nodeName);
 
@@ -10,11 +9,8 @@ export default EdgeComponent => {
   const WrappedEdge = memo((props) => {
     const {
       source, target, animated, type,
-      dispatch, selectedElements, onClick
+      dispatch, selected, onClick
     } = props;
-    const selected = selectedElements
-      .filter(e => isEdge(e))
-      .find(e => e.source === source && e.target === target);
     const edgeClasses = cx('react-graph__edge', { selected, animated: animated });
 
     return (

src/EdgeRenderer/index.js

@@ -3,6 +3,7 @@ import React, { memo, useContext } from 'react';
 import { GraphContext } from '../GraphContext';
 import { ConnectionContext } from '../ConnectionContext';
 import ConnectionLine from '../ConnectionLine';
+import { isEdge } from '../graph-utils';
 
 function getEdgePositions(sourceNode, targetNode) {
   const hasSourceHandle = !!sourceNode.__rg.handleBounds.source;
@@ -50,6 +51,9 @@ function renderEdge(e, props, graphContext) {
 
   const EdgeComponent = props.edgeTypes[edgeType] || props.edgeTypes.default;
   const { sourceX, sourceY, targetX, targetY } = getEdgePositions(sourceNode, targetNode);
+  const selected = graphContext.state.selectedElements
+    .filter(isEdge)
+    .find(elm => elm.source === e.source && elm.target === e.target);
 
   return (
     <EdgeComponent
@@ -57,7 +61,7 @@ function renderEdge(e, props, graphContext) {
       id={e.id}
       type={e.type}
       onClick={props.onElementClick}
-      selectedElements={graphContext.state.selectedElements}
+      selected={selected}
       dispatch={graphContext.dispatch}
       animated={e.animated}
       style={e.style}

src/NodeRenderer/NodeTypes/wrapNode.js

@@ -3,7 +3,6 @@ import ReactDraggable from 'react-draggable';
 import cx from 'classnames';
 
 import { updateNodeData, updateNodePos, setSelectedElements } from '../../state/actions';
-import { isNode } from '../../graph-utils';
 import { Provider } from '../NodeIdContext';
 
 const isInput = e => ['INPUT', 'SELECT', 'TEXTAREA'].includes(e.target.nodeName);
@@ -88,13 +87,12 @@ export default NodeComponent => {
     const [offset, setOffset] = useState({ x: 0, y: 0 });
     const [isDragging, setDragging] = useState(false);
     const {
-      id, type, data, transform, xPos, yPos, selectedElements,
+      id, type, data, transform, xPos, yPos, selected,
       dispatch, getNodeById, onClick, onNodeDragStop
     } = props;
 
     const position = { x: xPos, y: yPos };
     const [ x, y, k ] = transform;
-    const selected = selectedElements.filter(isNode).map(e => e.id).includes(id);
     const nodeClasses = cx('react-graph__node', { selected });
     const nodeStyle = { zIndex: selected ? 10 : 3, transform: `translate(${xPos}px,${yPos}px)` };
 

src/NodeRenderer/index.js

@@ -1,6 +1,7 @@
 import React, { memo, useContext } from 'react';
 
 import { GraphContext } from '../GraphContext';
+import { isNode } from '../graph-utils';
 
 function renderNode(d, props, graphContext) {
   const nodeType = d.type || 'default';
@@ -10,6 +11,10 @@ function renderNode(d, props, graphContext) {
   }
 
   const NodeComponent = props.nodeTypes[nodeType] || props.nodeTypes.default;
+  const selected = graphContext.state.selectedElements
+    .filter(isNode)
+    .map(e => e.id)
+    .includes(d.id);
 
   return (
     <NodeComponent
@@ -24,7 +29,7 @@ function renderNode(d, props, graphContext) {
       dispatch={graphContext.dispatch}
       transform={graphContext.state.transform}
       getNodeById={graphContext.getNodeById}
-      selectedElements={graphContext.state.selectedElements}
+      selected={selected}
       style={d.style}
     />
   );