Merge branch 'main' into refactor/redux

src/hooks/useKeyPress.ts

@@ -3,35 +3,37 @@ import { useState, useEffect } from 'react';
 import { isInputDOMNode } from '../utils';
 import { KeyCode } from '../types';
 
-export default (keyCode: KeyCode): boolean => {
+export default (keyCode?: KeyCode): boolean => {
   const [keyPressed, setKeyPressed] = useState(false);
 
   useEffect(() => {
-    const downHandler = (event: KeyboardEvent) => {
-      if (!isInputDOMNode(event) && (event.key === keyCode || event.keyCode === keyCode)) {
-        event.preventDefault();
+    if (typeof keyCode !== 'undefined') {
+      const downHandler = (event: KeyboardEvent) => {
+        if (!isInputDOMNode(event) && (event.key === keyCode || event.keyCode === keyCode)) {
+          event.preventDefault();
 
-        setKeyPressed(true);
-      }
-    };
+          setKeyPressed(true);
+        }
+      };
 
-    const upHandler = (event: KeyboardEvent) => {
-      if (!isInputDOMNode(event) && (event.key === keyCode || event.keyCode === keyCode)) {
-        setKeyPressed(false);
-      }
-    };
+      const upHandler = (event: KeyboardEvent) => {
+        if (!isInputDOMNode(event) && (event.key === keyCode || event.keyCode === keyCode)) {
+          setKeyPressed(false);
+        }
+      };
 
-    const resetHandler = () => setKeyPressed(false);
+      const resetHandler = () => setKeyPressed(false);
 
-    window.addEventListener('keydown', downHandler);
-    window.addEventListener('keyup', upHandler);
-    window.addEventListener('blur', resetHandler);
+      window.addEventListener('keydown', downHandler);
+      window.addEventListener('keyup', upHandler);
+      window.addEventListener('blur', resetHandler);
 
-    return () => {
-      window.removeEventListener('keydown', downHandler);
-      window.removeEventListener('keyup', upHandler);
-      window.removeEventListener('blur', resetHandler);
-    };
+      return () => {
+        window.removeEventListener('keydown', downHandler);
+        window.removeEventListener('keyup', upHandler);
+        window.removeEventListener('blur', resetHandler);
+      };
+    }
   }, [keyCode, setKeyPressed]);
 
   return keyPressed;

src/hooks/useZoomPanHelper.ts

@@ -6,12 +6,14 @@ import { clamp } from '../utils';
 import { getRectOfNodes, isNode } 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 }) => {},
+  fitView: (_: FitViewParams = { padding: DEFAULT_PADDING, includeHiddenNodes: 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));
@@ -37,7 +39,7 @@ const getTransformForBounds = (
   return [x, y, clampedZoom];
 };
 
-const usePanZoomHelper = (): ZoomPanHelperFunctions => {
+const useZoomPanHelper = (): ZoomPanHelperFunctions => {
   const store = useStore();
   const d3Zoom = useStoreState((s) => s.d3Zoom);
   const d3Selection = useStoreState((s) => s.d3Selection);
@@ -53,7 +55,7 @@ const usePanZoomHelper = (): ZoomPanHelperFunctions => {
 
           d3Zoom.transform(d3Selection, nextTransform);
         },
-        fitView: (options: FitViewParams = { padding: 0.1 }) => {
+        fitView: (options: FitViewParams = { padding: DEFAULT_PADDING, includeHiddenNodes: false }) => {
           const { elements, width, height, minZoom, maxZoom } = store.getState();
           const nodes = elements.filter(isNode);
 
@@ -61,8 +63,9 @@ const usePanZoomHelper = (): ZoomPanHelperFunctions => {
             return;
           }
 
-          const bounds = getRectOfNodes(nodes);
-          const [x, y, zoom] = getTransformForBounds(bounds, width, height, minZoom, maxZoom, options.padding);
+          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 transform = zoomIdentity.translate(x, y).scale(zoom);
 
           d3Zoom.transform(d3Selection, transform);
@@ -77,7 +80,7 @@ const usePanZoomHelper = (): 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);
@@ -94,4 +97,4 @@ const usePanZoomHelper = (): ZoomPanHelperFunctions => {
   return zoomPanHelperFunctions;
 };
 
-export default usePanZoomHelper;
+export default useZoomPanHelper;