refactor(useZoomPanHelper): add getTransform, getZoom, rename transform to getTransform closes #1746

src/hooks/useZoomPanHelper.ts

@@ -13,7 +13,9 @@ const initialZoomPanHelper: ZoomPanHelperFunctions = {
   zoomIn: () => {},
   zoomOut: () => {},
   zoomTo: (_: number) => {},
-  transform: (_: FlowTransform) => {},
+  getZoom: () => 1,
+  setTransform: (_: FlowTransform) => {},
+  getTransform: () => ({ x: 0, y: 0, zoom: 1 }),
   fitView: (_: FitViewParams = { padding: DEFAULT_PADDING, includeHiddenNodes: false }) => {},
   setCenter: (_: number, __: number) => {},
   fitBounds: (_: Rect) => {},
@@ -39,12 +41,18 @@ const useZoomPanHelper = (): ZoomPanHelperFunctions => {
       return {
         zoomIn: (options) => d3Zoom.scaleBy(getTransition(d3Selection, options?.duration), 1.2),
         zoomOut: (options) => d3Zoom.scaleBy(getTransition(d3Selection, options?.duration), 1 / 1.2),
-        zoomTo: (zoomLevel, options) =>
+        zoomTo: (zoomLevel, options) => d3Zoom.scaleTo(getTransition(d3Selection, options?.duration), zoomLevel),
-          d3Zoom.scaleTo(getTransition(d3Selection, options?.duration), zoomLevel),
+        getZoom: () => {
-        transform: (transform: FlowTransform) => {
+          const [, , zoom] = store.getState().transform;
+          return zoom;
+        },
+        setTransform: (transform, options) => {
           const nextTransform = zoomIdentity.translate(transform.x, transform.y).scale(transform.zoom);
-
+          d3Zoom.transform(getTransition(d3Selection, options?.duration), nextTransform);
-          d3Zoom.transform(getTransition(d3Selection), nextTransform);
+        },
+        getTransform: () => {
+          const [x, y, zoom] = store.getState().transform;
+          return { x, y, zoom };
         },
         fitView: (options) => {
           const { nodeInternals, width, height, minZoom, maxZoom } = store.getState();
@@ -81,7 +89,14 @@ const useZoomPanHelper = (): ZoomPanHelperFunctions => {
         },
         fitBounds: (bounds, options) => {
           const { width, height, minZoom, maxZoom } = store.getState();
-          const [x, y, zoom] = getTransformForBounds(bounds, width, height, minZoom, maxZoom, options?.padding ?? DEFAULT_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(getTransition(d3Selection, options?.duration), transform);

src/types/general.ts

@@ -121,7 +121,9 @@ export interface ZoomPanHelperFunctions {
   zoomIn: (options?: ZoomPanHelperFunctionOptions) => void;
   zoomOut: (options?: ZoomPanHelperFunctionOptions) => void;
   zoomTo: (zoomLevel: number, options?: ZoomPanHelperFunctionOptions) => void;
-  transform: (transform: FlowTransform, options?: ZoomPanHelperFunctionOptions) => void;
+  getZoom: () => number;
+  setTransform: (transform: FlowTransform, options?: ZoomPanHelperFunctionOptions) => void;
+  getTransform: () => FlowTransform;
   fitView: FitView;
   setCenter: (x: number, y: number, options?: SetCenterOptions) => void;
   fitBounds: (bounds: Rect, options?: FitBoundsOptions) => void;

src/types/nodes.ts

@@ -104,6 +104,8 @@ export type NodeDimensionUpdate = {
 };
 
 export type NodeInternalsItem = Node & {
+  width: number;
+  height: number;
   positionAbsolute: XYPosition;
   z: number;
   handleBounds?: NodeHandleBounds;