feat(fitView): added fitViewParams prop to Control component

src/additional-components/Controls/index.tsx

@@ -10,11 +10,13 @@ import LockIcon from '../../../assets/icons/lock.svg';
 import UnlockIcon from '../../../assets/icons/unlock.svg';
 
 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;
@@ -26,6 +28,7 @@ const Controls = ({
   showZoom = true,
   showFitView = true,
   showInteractive = true,
+  fitViewParams,
   onZoomIn,
   onZoomOut,
   onFitView,
@@ -49,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/hooks/useZoomPanHelper.ts

@@ -6,12 +6,14 @@ import { clamp } from '../utils';
 import { getRectOfNodes } from '../utils/graph';
 import { FitViewParams, FlowTransform, ZoomPanHelperFunctions, Rect, Transform } from '../types';
 
+const DEFAULT_PADDING = 0.1
+
 const initialZoomPanHelper: ZoomPanHelperFunctions = {
   zoomIn: () => {},
   zoomOut: () => {},
   zoomTo: (_: number) => {},
   transform: (_: FlowTransform) => {},
-  fitView: (_: FitViewParams = { padding: 0.1, excludeHidden: false }) => {},
+  fitView: (_: FitViewParams = { padding: DEFAULT_PADDING, excludeHidden: false }) => {},
   setCenter: (_: number, __: number) => {},
   fitBounds: (_: Rect) => {},
   initialized: false,
@@ -23,7 +25,7 @@ const getTransformForBounds = (
   height: number,
   minZoom: number,
   maxZoom: number,
-  padding = 0.1
+  padding = DEFAULT_PADDING
 ): Transform => {
   const xZoom = width / (bounds.width * (1 + padding));
   const yZoom = height / (bounds.height * (1 + padding));
@@ -53,7 +55,7 @@ const useZoomPanHelper = (): ZoomPanHelperFunctions => {
 
           d3Zoom.transform(d3Selection, nextTransform);
         },
-        fitView: (options: FitViewParams = { padding: 0.1, excludeHidden: false }) => {
+        fitView: (options: FitViewParams = { padding: DEFAULT_PADDING, excludeHidden: false }) => {
           const { nodes, width, height, minZoom, maxZoom } = store.getState();
 
           if (!nodes.length) {
@@ -61,7 +63,8 @@ const useZoomPanHelper = (): ZoomPanHelperFunctions => {
           }
 
           const bounds = getRectOfNodes(options.excludeHidden ? nodes.filter(node => !node.isHidden) : nodes);
-          const [x, y, zoom] = getTransformForBounds(bounds, width, height, minZoom, maxZoom, options.padding);
+          const padding = options.padding || DEFAULT_PADDING
+          const [x, y, zoom] = getTransformForBounds(bounds, width, height, minZoom, maxZoom, padding);
           const transform = zoomIdentity.translate(x, y).scale(zoom);
 
           d3Zoom.transform(d3Selection, transform);
@@ -76,7 +79,7 @@ const useZoomPanHelper = (): ZoomPanHelperFunctions => {
 
           d3Zoom.transform(d3Selection, transform);
         },
-        fitBounds: (bounds: Rect, padding = 0.1) => {
+        fitBounds: (bounds: Rect, padding = DEFAULT_PADDING) => {
           const { width, height, minZoom, maxZoom } = store.getState();
           const [x, y, zoom] = getTransformForBounds(bounds, width, height, minZoom, maxZoom, padding);
           const transform = zoomIdentity.translate(x, y).scale(zoom);

src/types/index.ts

@@ -235,7 +235,7 @@ export interface WrapNodeProps<T = any> {
 }
 
 export type FitViewParams = {
-  padding: number;
+  padding?: number;
   excludeHidden?: boolean;
 };