diff --git a/src/additional-components/Controls/index.tsx b/src/additional-components/Controls/index.tsx index 84b9efb8..a3c27624 100644 --- a/src/additional-components/Controls/index.tsx +++ b/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 { 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); diff --git a/src/hooks/useZoomPanHelper.ts b/src/hooks/useZoomPanHelper.ts index b254f434..7fd54891 100644 --- a/src/hooks/useZoomPanHelper.ts +++ b/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); diff --git a/src/types/index.ts b/src/types/index.ts index 32150248..e3a602a5 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -235,7 +235,7 @@ export interface WrapNodeProps { } export type FitViewParams = { - padding: number; + padding?: number; excludeHidden?: boolean; };