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/components/NodesSelection/index.tsx

@@ -1,13 +1,14 @@
 import React, { useState, memo } from 'react';
 import ReactDraggable from 'react-draggable';
-import { useStoreState, useStoreActions } from 'easy-peasy';
 
+import { useStoreState, useStoreActions } from '../../store/hooks';
 import { isNode } from '../../utils/graph';
+import { Node, Elements, XYPosition } from '../../types';
 
-function getStartPositions(elements) {
+function getStartPositions(elements: Elements) {
   return elements
     .filter(isNode)
-    .reduce((res, node) => {
+    .reduce((res, node: Node) => {
       const startPosition = {
         x: node.__rg.position.x || node.position.x,
         y: node.__rg.position.y || node.position.x
@@ -31,31 +32,33 @@ export default memo(() => {
   const [x, y, k] = state.transform;
   const position = state.selectedNodesBbox;
 
-  const onStart = (evt) => {
-    const scaledClient = {
+  const onStart = (evt: MouseEvent) => {
+    const scaledClient: XYPosition = {
       x: evt.clientX * (1 / k),
       y: evt.clientY * (1 / k)
     };
-    const offsetX = scaledClient.x - position.x - x;
-    const offsetY = scaledClient.y - position.y - y;
+    const offsetX: number = scaledClient.x - position.x - x;
+    const offsetY: number = scaledClient.y - position.y - y;
     const startPositions = getStartPositions(state.selectedElements);
 
     setOffset({ x: offsetX, y: offsetY });
     setStartPositions(startPositions);
   };
 
-  const onDrag = (evt) => {
-    const scaledClient = {
+  const onDrag = (evt: MouseEvent) => {
+    const scaledClient: XYPosition = {
       x: evt.clientX * (1 / k),
       y: evt.clientY * (1 / k)
     };
 
-    state.selectedElements.filter(isNode).forEach(node => {
-      updateNodePos({ id: node.id, pos: {
-        x: startPositions[node.id].x + scaledClient.x - position.x - offset.x - x ,
-        y: startPositions[node.id].y + scaledClient.y - position.y - offset.y - y
-      }});
-    });
+    state.selectedElements
+      .filter(isNode)
+      .forEach((node: Node) => {
+        updateNodePos({ id: node.id, pos: {
+          x: startPositions[node.id].x + scaledClient.x - position.x - offset.x - x ,
+          y: startPositions[node.id].y + scaledClient.y - position.y - offset.y - y
+        }});
+      });
   };
 
   return (
@@ -67,8 +70,8 @@ export default memo(() => {
     >
       <ReactDraggable
         scale={k}
-        onStart={onStart}
-        onDrag={onDrag}
+        onStart={(evt: MouseEvent) => onStart(evt)}
+        onDrag={(evt: MouseEvent) => onDrag(evt)}
       >
         <div
           className="react-flow__nodesselection-rect"