style(comps): dont use inline styles for minimap and edges #491

example/package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "react-flow-examples",
+  "name": "react-flow-tests",
   "version": "0.1.0",
   "lockfileVersion": 1,
   "requires": true,
@@ -3996,11 +3996,6 @@
         "type": "^1.0.1"
       }
     },
-    "d3-selection": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.4.2.tgz",
-      "integrity": "sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg=="
-    },
     "damerau-levenshtein": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.6.tgz",
@@ -10458,10 +10453,7 @@
     "react-flow-renderer": {
       "version": "file:..",
       "requires": {
-        "@welldone-software/why-did-you-render": "^4.3.2",
         "classcat": "^4.1.0",
-        "d3-selection": "^2.0.0",
-        "d3-zoom": "^2.0.0",
         "easy-peasy": "^3.3.1",
         "fast-deep-equal": "^3.1.3",
         "react-draggable": "^4.4.3",
@@ -16087,8 +16079,7 @@
           "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-1.2.4.tgz",
           "integrity": "sha512-ICPurDETFAelF1CTHdIyiUM4PsyZLaM+7oIBhmyP+cuVjze5vDZ8V//LdOFjg0jGnFIZD/Sfmk0r95PSiu78rw==",
           "requires": {
-            "d3-dispatch": "1",
+            "d3-dispatch": "1"
-            "d3-selection": "1"
           }
         },
         "d3-ease": {
@@ -16118,7 +16109,6 @@
             "d3-dispatch": "1",
             "d3-ease": "1",
             "d3-interpolate": "1",
-            "d3-selection": "^1.1.0",
             "d3-timer": "1"
           }
         },
@@ -16130,7 +16120,6 @@
             "d3-dispatch": "1",
             "d3-drag": "1",
             "d3-interpolate": "1",
-            "d3-selection": "1",
             "d3-transition": "1"
           }
         },

src/additional-components/MiniMap/index.tsx

@@ -22,7 +22,7 @@ const defaultWidth = 200;
 const defaultHeight = 150;
 
 const MiniMap = ({
-  style = { backgroundColor: '#fff' },
+  style,
   className,
   nodeStrokeColor = '#555',
   nodeColor = '#fff',
@@ -36,8 +36,8 @@ const MiniMap = ({
   const nodes = useStoreState((s) => s.nodes);
 
   const mapClasses = cc(['react-flow__minimap', className]);
-  const elementWidth = (style.width || defaultWidth)! as number;
+  const elementWidth = (style?.width || defaultWidth)! as number;
-  const elementHeight = (style.height || defaultHeight)! as number;
+  const elementHeight = (style?.height || defaultHeight)! as number;
   const nodeColorFunc = (nodeColor instanceof Function ? nodeColor : () => nodeColor) as StringFunc;
   const nodeStrokeColorFunc = (nodeStrokeColor instanceof Function
     ? nodeStrokeColor

src/additional-components/MiniMap/style.css

@@ -3,4 +3,5 @@
   z-index: 5;
   bottom: 10px;
   right: 10px;
+  background-color: #fff;
 }

src/components/Edges/wrapEdge.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useMemo, ComponentType, CSSProperties, useCallback } from 'react';
+import React, { memo, ComponentType, useCallback } from 'react';
 import cc from 'classcat';
 
 import { useStoreActions } from '../../store/hooks';
@@ -35,14 +35,13 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
   }: WrapEdgeProps) => {
     const setSelectedElements = useStoreActions((actions) => actions.setSelectedElements);
 
-    const edgeClasses = cc(['react-flow__edge', `react-flow__edge-${type}`, className, { selected, animated }]);
+    const inactive = !elementsSelectable && !onClick;
-
+    const edgeClasses = cc([
-    const edgeGroupStyle: CSSProperties = useMemo(
+      'react-flow__edge',
-      () => ({
+      `react-flow__edge-${type}`,
-        pointerEvents: elementsSelectable || onClick ? 'all' : 'none',
+      className,
-      }),
+      { selected, animated, inactive },
-      [elementsSelectable, onClick]
+    ]);
-    );
 
     const onEdgeClick = useCallback(
       (event: React.MouseEvent<SVGGElement, MouseEvent>): void => {
@@ -68,7 +67,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
     }
 
     return (
-      <g className={edgeClasses} onClick={onEdgeClick} style={edgeGroupStyle}>
+      <g className={edgeClasses} onClick={onEdgeClick}>
         <EdgeComponent
           id={id}
           source={source}

src/style.css

@@ -46,6 +46,10 @@
 .react-flow__edge {
   pointer-events: all;
 
+  &.inactive {
+    pointer-events: none;
+  }
+
   &.selected {
     .react-flow__edge-path {
       stroke: #555;