diff --git a/src/hooks/useZoomPanHelper.ts b/src/hooks/useZoomPanHelper.ts index 06281fb3..ff7ae0dc 100644 --- a/src/hooks/useZoomPanHelper.ts +++ b/src/hooks/useZoomPanHelper.ts @@ -2,9 +2,8 @@ import { useMemo } from 'react'; import { zoomIdentity } from 'd3-zoom'; import { useStoreState, useStore } from '../store/hooks'; -import { clamp } from '../utils'; -import { getRectOfNodes, pointToRendererPoint } from '../utils/graph'; -import { FitViewParams, FlowTransform, ZoomPanHelperFunctions, Rect, Transform, XYPosition } from '../types'; +import { getRectOfNodes, pointToRendererPoint, getTransformForBounds } from '../utils/graph'; +import { FitViewParams, FlowTransform, ZoomPanHelperFunctions, Rect, XYPosition } from '../types'; const DEFAULT_PADDING = 0.1; @@ -20,26 +19,6 @@ const initialZoomPanHelper: ZoomPanHelperFunctions = { initialized: false, }; -const getTransformForBounds = ( - bounds: Rect, - width: number, - height: number, - minZoom: number, - maxZoom: number, - padding = DEFAULT_PADDING -): Transform => { - const xZoom = width / (bounds.width * (1 + padding)); - const yZoom = height / (bounds.height * (1 + padding)); - const zoom = Math.min(xZoom, yZoom); - const clampedZoom = clamp(zoom, minZoom, maxZoom); - const boundsCenterX = bounds.x + bounds.width / 2; - const boundsCenterY = bounds.y + bounds.height / 2; - const x = width / 2 - boundsCenterX * clampedZoom; - const y = height / 2 - boundsCenterY * clampedZoom; - - return [x, y, clampedZoom]; -}; - const useZoomPanHelper = (): ZoomPanHelperFunctions => { const store = useStore(); const d3Zoom = useStoreState((s) => s.d3Zoom); @@ -64,8 +43,14 @@ const useZoomPanHelper = (): ZoomPanHelperFunctions => { } const bounds = getRectOfNodes(options.includeHiddenNodes ? nodes : nodes.filter((node) => !node.isHidden)); - const padding = options.padding ?? DEFAULT_PADDING; - const [x, y, zoom] = getTransformForBounds(bounds, width, height, minZoom, maxZoom, padding); + const [x, y, zoom] = getTransformForBounds( + bounds, + width, + height, + minZoom, + maxZoom, + options.padding ?? DEFAULT_PADDING + ); const transform = zoomIdentity.translate(x, y).scale(zoom); d3Zoom.transform(d3Selection, transform); diff --git a/src/index.ts b/src/index.ts index b8555409..52ecf562 100644 --- a/src/index.ts +++ b/src/index.ts @@ -17,6 +17,7 @@ export { getIncomers, getConnectedEdges, updateEdge, + getTransformForBounds, } from './utils/graph'; export { default as useZoomPanHelper } from './hooks/useZoomPanHelper'; diff --git a/src/utils/graph.ts b/src/utils/graph.ts index 41a7d9f9..ad486fd2 100644 --- a/src/utils/graph.ts +++ b/src/utils/graph.ts @@ -1,6 +1,6 @@ import { Store } from 'redux'; -import { clampPosition } from '../utils'; +import { clampPosition, clamp } from '../utils'; import { ElementId, @@ -285,3 +285,23 @@ export const onLoadToObject = (currentStore: Store) => { }; }; }; + +export const getTransformForBounds = ( + bounds: Rect, + width: number, + height: number, + minZoom: number, + maxZoom: number, + padding: number = 0.1 +): Transform => { + const xZoom = width / (bounds.width * (1 + padding)); + const yZoom = height / (bounds.height * (1 + padding)); + const zoom = Math.min(xZoom, yZoom); + const clampedZoom = clamp(zoom, minZoom, maxZoom); + const boundsCenterX = bounds.x + bounds.width / 2; + const boundsCenterY = bounds.y + bounds.height / 2; + const x = width / 2 - boundsCenterX * clampedZoom; + const y = height / 2 - boundsCenterY * clampedZoom; + + return [x, y, clampedZoom]; +};