refactor(markers): cleanup

packages/react/src/container/EdgeRenderer/MarkerDefinitions.tsx

@@ -51,32 +51,38 @@ const markerSelector =
     return markers;
   };
 
+const markersEqual = (a: MarkerProps[], b: MarkerProps[]) =>
+  // the id includes all marker options, so we just need to look at that part of the marker
+  !(a.length !== b.length || a.some((m, i) => m.id !== b[i].id));
+
 // when you have multiple flows on a page and you hide the first one, the other ones have no markers anymore
 // when they do have markers with the same ids. To prevent this the user can pass a unique id to the react flow wrapper
 // that we can then use for creating our unique marker ids
 const MarkerDefinitions = ({ defaultColor, rfId }: MarkerDefinitionsProps) => {
-  const markers = useStore(
+  const markers = useStore(useCallback(markerSelector({ defaultColor, rfId }), [defaultColor, rfId]), markersEqual);
-    useCallback(markerSelector({ defaultColor, rfId }), [defaultColor, rfId]),
+
-    // the id includes all marker options, so we just need to look at that part of the marker
+  if (!markers.length) {
-    (a, b) => !(a.length !== b.length || a.some((m, i) => m.id !== b[i].id))
+    return null;
-  );
+  }
 
   return (
-    <defs>
+    <svg className="react-flow__marker">
-      {markers.map((marker: MarkerProps) => (
+      <defs>
-        <Marker
+        {markers.map((marker: MarkerProps) => (
-          id={marker.id}
+          <Marker
-          key={marker.id}
+            id={marker.id}
-          type={marker.type}
+            key={marker.id}
-          color={marker.color}
+            type={marker.type}
-          width={marker.width}
+            color={marker.color}
-          height={marker.height}
+            width={marker.width}
-          markerUnits={marker.markerUnits}
+            height={marker.height}
-          strokeWidth={marker.strokeWidth}
+            markerUnits={marker.markerUnits}
-          orient={marker.orient}
+            strokeWidth={marker.strokeWidth}
-        />
+            orient={marker.orient}
-      ))}
+          />
-    </defs>
+        ))}
+      </defs>
+    </svg>
   );
 };
 

packages/react/src/container/EdgeRenderer/index.tsx

@@ -28,7 +28,6 @@ type EdgeRendererProps = Pick<
   | 'disableKeyboardA11y'
   | 'edgeTypes'
 > & {
-  elevateEdgesOnSelect: boolean;
   children: ReactNode;
 };
 
@@ -66,9 +65,7 @@ const EdgeRenderer = ({
 
   return (
     <div className="react-flow__edges">
-      <svg className="react-flow__marker">
+      <MarkerDefinitions defaultColor={defaultMarkerColor} rfId={rfId} />
-        <MarkerDefinitions defaultColor={defaultMarkerColor} rfId={rfId} />
-      </svg>
 
       {edgeIds.map((id) => {
         return (