Added fitViewWithDimensions

dist/types/index.d.ts

@@ -1,5 +1,5 @@
-import React, { CSSProperties, MouseEvent as ReactMouseEvent, HTMLAttributes, ReactNode } from 'react';
 import { Selection as D3Selection, ZoomBehavior } from 'd3';
+import React, { CSSProperties, HTMLAttributes, MouseEvent as ReactMouseEvent, ReactNode } from 'react';
 export declare type ElementId = string;
 export declare type FlowElement<T = any> = Node<T> | Edge<T>;
 export declare type Elements<T = any> = Array<FlowElement<T>>;
@@ -229,6 +229,14 @@ export declare type FitViewParams = {
     minZoom?: number;
     maxZoom?: number;
 };
+export declare type FitViewToDimensionsParams = {
+    width: number;
+    height: number;
+    padding?: number;
+    includeHiddenNodes?: boolean;
+    minZoom?: number;
+    maxZoom?: number;
+};
 export declare type FlowExportObject<T = any> = {
     elements: Elements<T>;
     position: [number, number];

src/hooks/useResizeHandler.ts

@@ -1,8 +1,8 @@
-import { useEffect, MutableRefObject } from 'react';
+import { MutableRefObject, useEffect } from 'react';
 import { useStoreActions } from '../store/hooks';
-
 import { getDimensions } from '../utils';
 
+
 export default (rendererNode: MutableRefObject<HTMLDivElement | null>) => {
   const updateSize = useStoreActions((actions) => actions.updateSize);
 

src/hooks/useZoomPanHelper.ts

@@ -1,7 +1,7 @@
 import { zoomIdentity } from 'd3-zoom';
 import { useMemo } from 'react';
 import { useStore, useStoreState } from '../store/hooks';
-import { FitViewParams, FlowTransform, Rect, XYPosition, ZoomPanHelperFunctions } from '../types';
+import { FitViewParams, FitViewToDimensionsParams, FlowTransform, Rect, XYPosition, ZoomPanHelperFunctions } from '../types';
 import { getRectOfNodes, getTransformForBounds, pointToRendererPoint } from '../utils/graph';
 
 
@@ -37,7 +37,6 @@ const useZoomPanHelper = (): ZoomPanHelperFunctions => {
         },
         fitView: (options: FitViewParams = { padding: DEFAULT_PADDING, includeHiddenNodes: false }) => {
           const { nodes, width, height, minZoom, maxZoom } = store.getState();
-          console.log('fitView gets from store:',{height, width})
 
           if (!nodes.length) {
             return;
@@ -56,6 +55,26 @@ const useZoomPanHelper = (): ZoomPanHelperFunctions => {
 
           d3Zoom.transform(d3Selection, transform);
         },
+        fitViewToDimensions: (options: FitViewToDimensionsParams = { height: 0, width: 0, padding: DEFAULT_PADDING, includeHiddenNodes: false }) => {
+          const { nodes, minZoom, maxZoom } = store.getState();
+
+          if (!nodes.length) {
+            return;
+          }
+
+          const bounds = getRectOfNodes(options.includeHiddenNodes ? nodes : nodes.filter((node) => !node.isHidden));
+          const [x, y, zoom] = getTransformForBounds(
+            bounds,
+            options.width,
+            options.height,
+            options.minZoom ?? minZoom,
+            options.maxZoom ?? maxZoom,
+            options.padding ?? DEFAULT_PADDING
+          );
+          const transform = zoomIdentity.translate(x, y).scale(zoom);
+
+          d3Zoom.transform(d3Selection, transform);
+        },
         setCenter: (x: number, y: number, zoom?: number) => {
           const { width, height, maxZoom } = store.getState();
 

src/types/index.ts

@@ -1,5 +1,5 @@
-import React, { CSSProperties, MouseEvent as ReactMouseEvent, HTMLAttributes, ReactNode } from 'react';
 import { Selection as D3Selection, ZoomBehavior } from 'd3';
+import React, { CSSProperties, HTMLAttributes, MouseEvent as ReactMouseEvent, ReactNode } from 'react';
 
 export type ElementId = string;
 
@@ -252,6 +252,15 @@ export type FitViewParams = {
   maxZoom?: number;
 };
 
+export type FitViewToDimensionsParams = {
+  width: number,
+  height: number,
+  padding?: number;
+  includeHiddenNodes?: boolean;
+  minZoom?: number;
+  maxZoom?: number;
+};
+
 export type FlowExportObject<T = any> = {
   elements: Elements<T>;
   position: [number, number];

src/utils/index.ts

@@ -12,7 +12,10 @@ export const isInputDOMNode = (e: ReactMouseEvent | DraggableEvent | KeyboardEve
 };
 
 export const getDimensions = (node: HTMLDivElement): Dimensions => {
-  const rect = node.getBoundingClientRect();
+  const rect = {
+      width: node.offsetWidth,
+      height: node.offsetHeight,
+    };
   console.log('getDimensions returns:',{width: rect.width, height: rect.height})
   return { height: rect.height, width: rect.width}
 }