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

@@ -1,7 +1,9 @@
-import React, { useEffect, useRef, useState, memo } from 'react';
-import { useStoreActions } from 'easy-peasy';
+import React, { useEffect, useRef, useState, memo, MouseEvent } from 'react';
 
-const initialRect = {
+import { useStoreActions } from '../../store/hooks';
+import { SelectionRect } from '../../types';
+
+const initialRect: SelectionRect = {
   startX: 0,
   startY: 0,
   x: 0,
@@ -11,8 +13,13 @@ const initialRect = {
   draw: false
 };
 
-function getMousePosition(evt) {
-  const containerBounds = document.querySelector('.react-flow').getBoundingClientRect();
+function getMousePosition(evt: MouseEvent) {
+  const reactFlowNode = document.querySelector('.react-flow');
+  if (!reactFlowNode) {
+    return false;
+  }
+
+  const containerBounds = reactFlowNode.getBoundingClientRect();
 
   return {
     x: evt.clientX - containerBounds.left,
@@ -28,8 +35,11 @@ export default memo(() => {
   const setNodesSelection = useStoreActions(a => a.setNodesSelection);
 
   useEffect(() => {
-    function onMouseDown(evt) {
+    function onMouseDown(evt: MouseEvent) {
       const mousePos = getMousePosition(evt);
+      if (!mousePos) {
+        return false;
+      }
 
       setRect((currentRect) => ({
         ...currentRect,
@@ -43,13 +53,17 @@ export default memo(() => {
       setSelection(true);
     }
 
-    function onMouseMove(evt) {
+    function onMouseMove(evt: MouseEvent) {
       setRect((currentRect) => {
         if (!currentRect.draw) {
           return currentRect;
         }
 
         const mousePos = getMousePosition(evt);
+        if (!mousePos) {
+          return currentRect;
+        }
+
         const negativeX = mousePos.x < currentRect.startX;
         const negativeY = mousePos.y < currentRect.startY;
         const nextRect = {
@@ -94,7 +108,7 @@ export default memo(() => {
       className="react-flow__selectionpane"
       ref={selectionPane}
     >
-      {(rect.draw || rect.fixed) && (
+      {rect.draw && (
         <div
           className="react-flow__selection"
           style={{