refactor(callbacks): dont provide noops as defaults, but make cbs optional

src/hooks/useD3Zoom.ts

@@ -4,20 +4,26 @@ import { select, event } from 'd3-selection';
 
 import { useStoreState, useStoreActions } from '../store/hooks';
 
+interface UseD3ZoomParams {
+  zoomPane: MutableRefObject<Element | null>;
+  selectionKeyPressed: boolean;
+  onMove?: () => void;
+}
+
 const d3ZoomInstance = d3Zoom
   .zoom()
   .scaleExtent([0.5, 2])
   .filter(() => !event.button);
 
-export default (zoomPane: MutableRefObject<Element | null>, onMove: () => void, shiftPressed: boolean): void => {
-  const state = useStoreState(s => ({
+export default ({ zoomPane, onMove, selectionKeyPressed }: UseD3ZoomParams): void => {
+  const state = useStoreState((s) => ({
     transform: s.transform,
     d3Selection: s.d3Selection,
     d3Zoom: s.d3Zoom,
   }));
 
-  const initD3 = useStoreActions(actions => actions.initD3);
-  const updateTransform = useStoreActions(actions => actions.updateTransform);
+  const initD3 = useStoreActions((actions) => actions.initD3);
+  const updateTransform = useStoreActions((actions) => actions.updateTransform);
 
   useEffect(() => {
     if (zoomPane.current) {
@@ -27,7 +33,7 @@ export default (zoomPane: MutableRefObject<Element | null>, onMove: () => void,
   }, []);
 
   useEffect(() => {
-    if (shiftPressed) {
+    if (selectionKeyPressed) {
       d3ZoomInstance.on('zoom', null);
     } else {
       d3ZoomInstance.on('zoom', () => {
@@ -37,7 +43,9 @@ export default (zoomPane: MutableRefObject<Element | null>, onMove: () => void,
 
         updateTransform(event.transform);
 
-        onMove();
+        if (onMove) {
+          onMove();
+        }
       });
 
       if (state.d3Selection && state.d3Zoom) {
@@ -53,5 +61,5 @@ export default (zoomPane: MutableRefObject<Element | null>, onMove: () => void,
     return () => {
       d3ZoomInstance.on('zoom', null);
     };
-  }, [shiftPressed]);
+  }, [selectionKeyPressed]);
 };

src/hooks/useGlobalKeyHandler.ts

@@ -7,7 +7,7 @@ import { Elements, Node } from '../types';
 
 interface HookParams {
   deleteKeyCode: number;
-  onElementsRemove: (elements: Elements) => void;
+  onElementsRemove?: (elements: Elements) => void;
 }
 
 export default ({ deleteKeyCode, onElementsRemove }: HookParams): void => {
@@ -19,7 +19,7 @@ export default ({ deleteKeyCode, onElementsRemove }: HookParams): void => {
   const deleteKeyPressed = useKeyPress(deleteKeyCode);
 
   useEffect(() => {
-    if (deleteKeyPressed && state.selectedElements) {
+    if (onElementsRemove && deleteKeyPressed && state.selectedElements) {
       let elementsToRemove = state.selectedElements;
 
       // we also want to remove the edges if only one node is selected