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

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 elementHeight = (style.height || defaultHeight)! as number;
+  const elementWidth = (style?.width || defaultWidth)! 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 edgeGroupStyle: CSSProperties = useMemo(
-      () => ({
-        pointerEvents: elementsSelectable || onClick ? 'all' : 'none',
-      }),
-      [elementsSelectable, onClick]
-    );
+    const inactive = !elementsSelectable && !onClick;
+    const edgeClasses = cc([
+      'react-flow__edge',
+      `react-flow__edge-${type}`,
+      className,
+      { selected, animated, inactive },
+    ]);
 
     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;