Develop (#35)

* refactor(ts): add ReactFlowProps

* Refactor/grid.tsx (#24)

* chore(deps-dev): bump start-server-and-test from 1.10.4 to 1.10.5

Bumps [start-server-and-test](https://github.com/bahmutov/start-server-and-test) from 1.10.4 to 1.10.5.
- [Release notes](https://github.com/bahmutov/start-server-and-test/releases)
- [Commits](https://github.com/bahmutov/start-server-and-test/compare/v1.10.4...v1.10.5)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

* chore(deps-dev): bump typescript from 3.6.3 to 3.6.4

Bumps [typescript](https://github.com/Microsoft/TypeScript) from 3.6.3 to 3.6.4.
- [Release notes](https://github.com/Microsoft/TypeScript/releases)
- [Commits](https://github.com/Microsoft/TypeScript/compare/v3.6.3...v3.6.4)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

* refactor: grid.js -> grid.tsx

* refactor(bg): remove unused renderer

* refactor(connectionline): use ts

* refactor(ts): edges

* chore(build): update

* Refactor/typescript (WIP) (#25)

* refactor(store): use ts

* refactor(edgewrapper): use ts

* fix(handle): provide onConnect default func

* refactor(nodeselection): use ts

* refactor(userselction): use ts

* refactor(plugins): use ts

* refactor(hooks): use ts

* refactor(nodes): use ts

* refactor(edgerenderer): use ts

* refactor(graphview): use ts

* refactor(utils): rename js to ts

* refactor(app): fix ts errors

* fix(ts): errors

* fix(app): ts errors

* refactor(app): ts erros

* refactor(app): ts errors

* fix(utils): removeElements

* feat(example): add empty renderer closes #34

* fix(connect): dont drag node on connect

* chore(build): update

src/hooks/useD3Zoom.ts

@@ -1,21 +1,19 @@
-import { useEffect } from 'react';
+import { useEffect, MutableRefObject } from 'react';
 import * as d3Zoom from 'd3-zoom';
 import { select, event } from 'd3-selection';
-import { useStoreState, useStoreActions } from 'easy-peasy';
+
+import { useStoreState, useStoreActions } from '../store/hooks';
 
 const d3ZoomInstance = d3Zoom
   .zoom()
   .scaleExtent([0.5, 2])
   .filter(() => !event.button);
 
-export default function useD3Zoom(zoomPane, onMove, shiftPressed) {
+export default (zoomPane: MutableRefObject<HTMLDivElement>, onMove: () => void, shiftPressed: boolean): void => {
   const state = useStoreState(s => ({
     transform: s.transform,
     d3Selection: s.d3Selection,
     d3Zoom: s.d3Zoom,
-    edges: s.edged,
-    d3Initialised: s.d3Initialised,
-    nodesSelectionActive: s.nodesSelectionActive
   }));
 
   const initD3 = useStoreActions(actions => actions.initD3);

src/hooks/useElementUpdater.ts

@@ -1,10 +1,11 @@
 import { useEffect } from 'react';
-import { useStoreState, useStoreActions } from 'easy-peasy';
 import isEqual from 'fast-deep-equal';
 
+import { useStoreState, useStoreActions } from '../store/hooks';
 import { parseElement, isNode, isEdge } from '../utils/graph';
+import { Elements, Node, Edge } from '../types';
 
-const useElementUpdater = ({ elements }) => {
+const useElementUpdater = (elements: Elements): void => {
   const state = useStoreState(s => ({
     nodes: s.nodes,
     edges: s.edges,
@@ -15,10 +16,10 @@ const useElementUpdater = ({ elements }) => {
   const setEdges = useStoreActions(a => a.setEdges);
 
   useEffect(() => {
-    const nodes = elements.filter(isNode);
-    const edges = elements.filter(isEdge).map(parseElement);
+    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) {
@@ -32,10 +33,10 @@ const useElementUpdater = ({ elements }) => {
       }
 
       return parseElement(propNode, state.transform);
-    });
+    }) as Node[];
 
-    const nodesChanged = !isEqual(state.nodes, nextNodes);
-    const edgesChanged = !isEqual(state.edges, edges);
+    const nodesChanged: boolean = !isEqual(state.nodes, nextNodes);
+    const edgesChanged: boolean = !isEqual(state.edges, edges);
 
     if (nodesChanged) {
       setNodes(nextNodes);

src/hooks/useGlobalKeyHandler.ts

@@ -1,10 +1,16 @@
 import { useEffect } from 'react';
-import { useStoreState, useStoreActions } from 'easy-peasy';
 
+import { useStoreState, useStoreActions } from '../store/hooks';
 import useKeyPress from './useKeyPress';
 import { isEdge, getConnectedEdges } from '../utils/graph';
+import { Elements, Node } from '../types';
 
-export default ({ deleteKeyCode, onElementsRemove }) => {
+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 setNodesSelection = useStoreActions(a => a.setNodesSelection);
   const deleteKeyPressed = useKeyPress(deleteKeyCode);
@@ -15,7 +21,8 @@ export default ({ deleteKeyCode, onElementsRemove }) => {
 
       // we also want to remove the edges if only one node is selected
       if (state.selectedElements.length === 1 && !isEdge(state.selectedElements[0])) {
-        const connectedEdges = getConnectedEdges(state.selectedElements, state.edges);
+        const node = state.selectedElements[0] as unknown as Node;
+        const connectedEdges = getConnectedEdges([node], state.edges);
         elementsToRemove = [...state.selectedElements, ...connectedEdges];
       }
 

src/hooks/useKeyPress.ts

@@ -1,18 +1,18 @@
 import { useState, useEffect } from 'react';
 
-import { inInputDOMNode } from '../utils';
+import { isInputDOMNode } from '../utils';
 
-export default function useKeyPress(keyCode) {
+export default (keyCode: number) => {
   const [keyPressed, setKeyPressed] = useState(false);
 
-  function downHandler(evt) {
-    if (evt.keyCode === keyCode && !inInputDOMNode(evt.target)) {
+  function downHandler(evt: KeyboardEvent) {
+    if (evt.keyCode === keyCode && !isInputDOMNode(evt)) {
       setKeyPressed(true);
     }
   }
 
-  const upHandler = (evt) => {
-    if (evt.keyCode === keyCode && !inInputDOMNode(evt.target)) {
+  const upHandler = (evt: KeyboardEvent) => {
+    if (evt.keyCode === keyCode && !isInputDOMNode(evt)) {
       setKeyPressed(false);
     }
   };
@@ -20,6 +20,7 @@ export default function useKeyPress(keyCode) {
   useEffect(() => {
     window.addEventListener('keydown', downHandler);
     window.addEventListener('keyup', upHandler);
+
     return () => {
       window.removeEventListener('keydown', downHandler);
       window.removeEventListener('keyup', upHandler);