Merge branch 'main' into refactor/redux

src/additional-components/Background/index.tsx

@@ -5,8 +5,6 @@ import { useStoreState } from '../../store/hooks';
 import { BackgroundVariant } from '../../types';
 import { createGridLinesPath, createGridDotsPath } from './utils';
 
-import './style.css';
-
 export interface BackgroundProps extends HTMLAttributes<SVGElement> {
   variant?: BackgroundVariant;
   gap?: number;
@@ -34,26 +32,25 @@ const Background = ({
   const xOffset = x % scaledGap;
   const yOffset = y % scaledGap;
 
-
-	const isLines = variant === BackgroundVariant.Lines;
-	const bgColor = color ? color : defaultColors[variant];
-	const path = isLines ? createGridLinesPath(scaledGap, size, bgColor) : createGridDotsPath(size, bgColor);
+  const isLines = variant === BackgroundVariant.Lines;
+  const bgColor = color ? color : defaultColors[variant];
+  const path = isLines ? createGridLinesPath(scaledGap, size, bgColor) : createGridDotsPath(size, bgColor);
 
   return (
     <svg
       className={bgClasses}
       style={{
-				...style,
-				width: "100%",
-				height: "100%"
+        ...style,
+        width: '100%',
+        height: '100%',
       }}
     >
-			<pattern id="pattern" x={xOffset} y={yOffset} width={scaledGap} height={scaledGap} patternUnits="userSpaceOnUse">
-				{path}
-			</pattern>
+      <pattern id="pattern" x={xOffset} y={yOffset} width={scaledGap} height={scaledGap} patternUnits="userSpaceOnUse">
+        {path}
+      </pattern>
 
-			<rect x="0" y="0" width="100%" height="100%" fill="url(#pattern)"></rect>
-		</svg>
+      <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern)"></rect>
+    </svg>
   );
 };
 

src/additional-components/Background/style.css

@@ -1,7 +0,0 @@
-.react-flow__background {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}

src/additional-components/Controls/index.tsx

@@ -9,13 +9,14 @@ import FitviewIcon from '../../../assets/icons/fitview.svg';
 import LockIcon from '../../../assets/icons/lock.svg';
 import UnlockIcon from '../../../assets/icons/unlock.svg';
 
-import './style.css';
 import useZoomPanHelper from '../../hooks/useZoomPanHelper';
+import { FitViewParams } from '../../types';
 
 export interface ControlProps extends React.HTMLAttributes<HTMLDivElement> {
   showZoom?: boolean;
   showFitView?: boolean;
   showInteractive?: boolean;
+  fitViewParams?: FitViewParams;
   onZoomIn?: () => void;
   onZoomOut?: () => void;
   onFitView?: () => void;
@@ -27,6 +28,7 @@ const Controls = ({
   showZoom = true,
   showFitView = true,
   showInteractive = true,
+  fitViewParams,
   onZoomIn,
   onZoomOut,
   onFitView,
@@ -50,9 +52,9 @@ const Controls = ({
   }, [zoomOut, onZoomOut]);
 
   const onFitViewHandler = useCallback(() => {
-    fitView?.();
+    fitView?.(fitViewParams);
     onFitView?.();
-  }, [fitView, onFitView]);
+  }, [fitView, fitViewParams, onFitView]);
 
   const onInteractiveChangeHandler = useCallback(() => {
     setInteractive?.(!isInteractive);

src/additional-components/Controls/style.css

@@ -1,29 +0,0 @@
-.react-flow__controls {
-  position: absolute;
-  z-index: 5;
-  bottom: 10px;
-  left: 10px;
-  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
-
-  &-button {
-    background: #fefefe;
-    border-bottom: 1px solid #eee;
-    box-sizing: content-box;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 16px;
-    height: 16px;
-    cursor: pointer;
-    user-select: none;
-    padding: 5px;
-
-    svg {
-      width: 100%;
-    }
-
-    &:hover {
-      background: #f4f4f4;
-    }
-  }
-}

src/additional-components/MiniMap/MiniMapNode.tsx

@@ -10,10 +10,22 @@ interface MiniMapNodeProps {
   className: string;
   color: string;
   strokeColor: string;
+  strokeWidth: number;
   style?: CSSProperties;
 }
 
-const MiniMapNode = ({ x, y, width, height, style, color, strokeColor, className, borderRadius }: MiniMapNodeProps) => {
+const MiniMapNode = ({
+  x,
+  y,
+  width,
+  height,
+  style,
+  color,
+  strokeColor,
+  strokeWidth,
+  className,
+  borderRadius,
+}: MiniMapNodeProps) => {
   const { background, backgroundColor } = style || {};
   const fill = (color || background || backgroundColor) as string;
 
@@ -28,7 +40,7 @@ const MiniMapNode = ({ x, y, width, height, style, color, strokeColor, className
       height={height}
       fill={fill}
       stroke={strokeColor}
-      strokeWidth={2}
+      strokeWidth={strokeWidth}
     />
   );
 };

src/additional-components/MiniMap/index.tsx

@@ -6,8 +6,6 @@ import { getRectOfNodes, getBoundsofRects, isNode } from '../../utils/graph';
 import { Node, Rect } from '../../types';
 import MiniMapNode from './MiniMapNode';
 
-import './style.css';
-
 type StringFunc = (node: Node) => string;
 
 export interface MiniMapProps extends React.HTMLAttributes<SVGSVGElement> {
@@ -15,6 +13,7 @@ export interface MiniMapProps extends React.HTMLAttributes<SVGSVGElement> {
   nodeStrokeColor?: string | StringFunc;
   nodeClassName?: string | StringFunc;
   nodeBorderRadius?: number;
+  nodeStrokeWidth?: number;
   maskColor?: string;
 }
 
@@ -28,6 +27,7 @@ const MiniMap = ({
   nodeColor = '#fff',
   nodeClassName = '',
   nodeBorderRadius = 5,
+  nodeStrokeWidth = 2,
   maskColor = 'rgb(240, 242, 243, 0.7)',
 }: MiniMapProps) => {
   const containerWidth = useStoreState((s) => s.width);
@@ -86,6 +86,7 @@ const MiniMap = ({
             color={nodeColorFunc(node)}
             borderRadius={nodeBorderRadius}
             strokeColor={nodeStrokeColorFunc(node)}
+            strokeWidth={nodeStrokeWidth}
           />
         ))}
       <path

src/additional-components/MiniMap/style.css

@@ -1,7 +0,0 @@
-.react-flow__minimap {
-  position: absolute;
-  z-index: 5;
-  bottom: 10px;
-  right: 10px;
-  background-color: #fff;
-}

src/additional-components/index.ts

@@ -1,5 +1,5 @@
 // These components are not used by React Flow directly
-// but the user can add them as a child of a React Flow component
+// but the user can add them as children of a React Flow component
 
 export { default as MiniMap } from './MiniMap';
 export { default as Controls } from './Controls';