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/plugins/Controls/index.tsx

@@ -1,20 +1,25 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
 import classnames from 'classnames';
 
 import { fitView, zoomIn, zoomOut } from '../../utils/graph';
-import PlusIcon from '../../../assets/icons/plus.svg';
+import PlusIcon from '../../../assets/icons/plus.svg';
 import MinusIcon from '../../../assets/icons/minus.svg';
 import FitviewIcon from '../../../assets/icons/fitview.svg';
 
-const baseStyle = {
+const baseStyle: CSSProperties = {
   position: 'absolute',
   zIndex: 5,
   bottom: 10,
   left: 10,
 };
 
-export default ({ style, className }) => {
-  const mapClasses = classnames('react-flow__controls', className);
+interface ControlProps {
+  style?: CSSProperties;
+  className?: string
+};
+
+export default ({ style, className }: ControlProps) => {
+  const mapClasses: string = classnames('react-flow__controls', className);
 
   return (
     <div
@@ -38,7 +43,7 @@ export default ({ style, className }) => {
       </div>
       <div
         className="react-flow__controls-button  react-flow__controls-fitview"
-        onClick={fitView}
+        onClick={() => fitView()}
       >
         <FitviewIcon />
       </div>

src/plugins/MiniMap/index.tsx

@@ -1,11 +1,20 @@
-import React, { useRef, useEffect } from 'react';
-import { useStoreState } from 'easy-peasy';
+import React, { useRef, useEffect, CSSProperties } from 'react';
 import classnames from 'classnames';
 
-import { isFunction } from '../../utils'
+import { useStoreState } from '../../store/hooks';
 import { getNodesInside } from '../../utils/graph';
+import { Node } from '../../types';
 
-const baseStyle = {
+type StringFunc = (node: Node) => string;
+
+interface MiniMapProps {
+  style?: CSSProperties;
+  className?: string | null;
+  bgColor?: string;
+  nodeColor?: string | StringFunc;
+};
+
+const baseStyle: CSSProperties = {
   position: 'absolute',
   zIndex: 5,
   bottom: 10,
@@ -13,23 +22,26 @@ const baseStyle = {
   width: 200
 };
 
-export default ({ style = {}, className, bgColor = '#f8f8f8', nodeColor = '#ddd' }) => {
+export default (
+  { style = {}, className, bgColor = '#f8f8f8', nodeColor = '#ddd' }: MiniMapProps
+) => {
   const canvasNode = useRef(null);
   const state = useStoreState(s => ({
     width: s.width,
     height: s.height,
     nodes: s.nodes,
     transform: s.transform,
-  }));  const mapClasses = classnames('react-flow__minimap', className);
+  }));
+  const mapClasses = classnames('react-flow__minimap', className);
   const nodePositions = state.nodes.map(n => n.__rg.position);
-  const width = style.width || baseStyle.width;
+  const width: number = +(style.width || baseStyle.width || 0);
   const height = (state.height / (state.width || 1)) * width;
   const bbox = { x: 0, y: 0, width: state.width, height: state.height };
   const scaleFactor = width / state.width;
-  const nodeColorFunc = isFunction(nodeColor) ? nodeColor : () => nodeColor;
+  const nodeColorFunc = (nodeColor instanceof Function ? nodeColor: () => nodeColor) as StringFunc;
 
   useEffect(() => {
-    if (canvasNode) {
+    if (canvasNode && canvasNode.current) {
       const ctx = canvasNode.current.getContext('2d');
       const nodesInside = getNodesInside(state.nodes, bbox, state.transform, true);
 
@@ -53,7 +65,7 @@ export default ({ style = {}, className, bgColor = '#f8f8f8', nodeColor = '#ddd'
         );
       });
     }
-  }, [nodePositions, state.transform, height])
+  }, [canvasNode.current, nodePositions, state.transform, height])
 
   return (
     <canvas