develop (#43)

* fix(ts): use strict mode strictNullChecks etc

* chore: Use extended React.HTMLAttributes<> (#41)

* refactor(code-format): add prettier closes #42

* feat(renderer): add snap to grid option closes #20

* chore(dependabot): use develop as target branch

src/hooks/useD3Zoom.ts

@@ -9,7 +9,11 @@ const d3ZoomInstance = d3Zoom
   .scaleExtent([0.5, 2])
   .filter(() => !event.button);
 
-export default (zoomPane: MutableRefObject<HTMLDivElement>, onMove: () => void, shiftPressed: boolean): void => {
+export default (
+  zoomPane: MutableRefObject<Element | null>,
+  onMove: () => void,
+  shiftPressed: boolean
+): void => {
   const state = useStoreState(s => ({
     transform: s.transform,
     d3Selection: s.d3Selection,
@@ -20,8 +24,10 @@ export default (zoomPane: MutableRefObject<HTMLDivElement>, onMove: () => void,
   const updateTransform = useStoreActions(actions => actions.updateTransform);
 
   useEffect(() => {
-    const selection = select(zoomPane.current).call(d3ZoomInstance);
-    initD3({ zoom: d3ZoomInstance, selection });
+    if (zoomPane.current) {
+      const selection = select(zoomPane.current).call(d3ZoomInstance);
+      initD3({ zoom: d3ZoomInstance, selection });
+    }
   }, []);
 
   useEffect(() => {
@@ -29,8 +35,11 @@ export default (zoomPane: MutableRefObject<HTMLDivElement>, onMove: () => void,
       d3ZoomInstance.on('zoom', null);
     } else {
       d3ZoomInstance.on('zoom', () => {
-        if (event.sourceEvent && event.sourceEvent.target !== zoomPane.current) {
-          return false;
+        if (
+          event.sourceEvent &&
+          event.sourceEvent.target !== zoomPane.current
+        ) {
+          return;
         }
 
         updateTransform(event.transform);
@@ -38,11 +47,11 @@ export default (zoomPane: MutableRefObject<HTMLDivElement>, onMove: () => void,
         onMove();
       });
 
-      if (state.d3Selection) {
+      if (state.d3Selection && state.d3Zoom) {
         // we need to restore the graph transform otherwise d3 zoom transform and graph transform are not synced
         const graphTransform = d3Zoom.zoomIdentity
-            .translate(state.transform[0], state.transform[1])
-            .scale(state.transform[2]);
+          .translate(state.transform[0], state.transform[1])
+          .scale(state.transform[2]);
 
         state.d3Selection.call(state.d3Zoom.transform, graphTransform);
       }
@@ -52,4 +61,4 @@ export default (zoomPane: MutableRefObject<HTMLDivElement>, onMove: () => void,
       d3ZoomInstance.on('zoom', null);
     };
   }, [shiftPressed]);
-}
+};

src/hooks/useElementUpdater.ts

@@ -9,7 +9,7 @@ const useElementUpdater = (elements: Elements): void => {
   const state = useStoreState(s => ({
     nodes: s.nodes,
     edges: s.edges,
-    transform: s.transform
+    transform: s.transform,
   }));
 
   const setNodes = useStoreActions(a => a.setNodes);
@@ -19,16 +19,17 @@ const useElementUpdater = (elements: Elements): void => {
     const nodes = elements.filter(isNode) as Node[];
     const edges = elements.filter(isEdge).map(e => parseElement(e)) as Edge[];
 
-    const nextNodes = nodes.map((propNode) => {
+    const nextNodes = nodes.map(propNode => {
       const existingNode = state.nodes.find(n => n.id === propNode.id);
 
       if (existingNode) {
-        const data = !isEqual(existingNode.data, propNode.data) ?
-          { ...existingNode.data, ...propNode.data } : existingNode.data;
+        const data = !isEqual(existingNode.data, propNode.data)
+          ? { ...existingNode.data, ...propNode.data }
+          : existingNode.data;
 
         return {
           ...existingNode,
-          data
+          data,
         };
       }
 
@@ -46,8 +47,6 @@ const useElementUpdater = (elements: Elements): void => {
       setEdges(edges);
     }
   });
-
-  return null;
 };
 
 export default useElementUpdater;

src/hooks/useGlobalKeyHandler.ts

@@ -8,10 +8,13 @@ import { Elements, Node } from '../types';
 interface HookParams {
   deleteKeyCode: number;
   onElementsRemove: (elements: Elements) => void;
-};
+}
 
 export default ({ deleteKeyCode, onElementsRemove }: HookParams): void => {
-  const state = useStoreState(s => ({ selectedElements: s.selectedElements, edges: s.edges }))
+  const state = useStoreState(s => ({
+    selectedElements: s.selectedElements,
+    edges: s.edges,
+  }));
   const setNodesSelection = useStoreActions(a => a.setNodesSelection);
   const deleteKeyPressed = useKeyPress(deleteKeyCode);
 
@@ -20,8 +23,11 @@ export default ({ deleteKeyCode, onElementsRemove }: HookParams): void => {
       let elementsToRemove = state.selectedElements;
 
       // we also want to remove the edges if only one node is selected
-      if (state.selectedElements.length === 1 && !isEdge(state.selectedElements[0])) {
-        const node = state.selectedElements[0] as unknown as Node;
+      if (
+        state.selectedElements.length === 1 &&
+        !isEdge(state.selectedElements[0])
+      ) {
+        const node = (state.selectedElements[0] as unknown) as Node;
         const connectedEdges = getConnectedEdges([node], state.edges);
         elementsToRemove = [...state.selectedElements, ...connectedEdges];
       }
@@ -29,7 +35,5 @@ export default ({ deleteKeyCode, onElementsRemove }: HookParams): void => {
       onElementsRemove(elementsToRemove);
       setNodesSelection({ isActive: false });
     }
-  }, [deleteKeyPressed])
-
-  return null;
+  }, [deleteKeyPressed]);
 };

src/hooks/useKeyPress.ts

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 
 import { isInputDOMNode } from '../utils';
 
-export default (keyCode: number) => {
+export default (keyCode: number): boolean => {
   const [keyPressed, setKeyPressed] = useState(false);
 
   function downHandler(evt: KeyboardEvent) {
@@ -28,4 +28,4 @@ export default (keyCode: number) => {
   }, []);
 
   return keyPressed;
-}
+};