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/Edges/BezierEdge.tsx

@@ -1,9 +1,11 @@
 import React, { memo } from 'react';
 
+import { EdgeBezierProps } from '../../types';
+
 export default memo(({
   sourceX, sourceY, targetX, targetY,
-  sourcePosition, targetPosition, style = {}
-}) => {
+  sourcePosition = 'bottom', targetPosition = 'top', style = {}
+}: EdgeBezierProps) => {
   const yOffset = Math.abs(targetY - sourceY) / 2;
   const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
 

src/components/Edges/StepEdge.tsx

@@ -1,10 +1,10 @@
 import React, { memo } from 'react';
 
-export default memo((props) => {
-  const {
-    sourceX, sourceY, targetX, targetY, style = {}
-  } = props;
+import { EdgeProps } from '../../types';
 
+export default memo(({
+  sourceX, sourceY, targetX, targetY, style = {}
+} : EdgeProps) => {
   const yOffset = Math.abs(targetY - sourceY) / 2;
   const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
 

src/components/Edges/StraightEdge.tsx

@@ -1,10 +1,10 @@
 import React, { memo } from 'react';
 
-export default memo((props) => {
-  const {
-    sourceX, sourceY, targetX, targetY, style = {}
-  } = props;
+import { EdgeProps } from '../../types';
 
+export default memo(({
+  sourceX, sourceY, targetX, targetY, style = {}
+}: EdgeProps) => {
   return (
     <path
       {...style}

src/components/Edges/wrapEdge.js

@@ -1,37 +0,0 @@
-import React, {  memo } from 'react';
-import cx from 'classnames';
-
-import { inInputDOMNode } from '../../utils';
-import store from '../../store';
-
-export default EdgeComponent => {
-  const EdgeWrapper = memo((props) => {
-    const {
-      id, source, target, type,
-      animated, selected, onClick
-    } = props;
-    const edgeClasses = cx('react-flow__edge', { selected, animated });
-    const onEdgeClick = (evt) => {
-      if (inInputDOMNode(evt)) {
-        return false;
-      }
-
-      store.dispatch.setSelectedElements({ id, source, target });
-      onClick({ id, source, target, type });
-    };
-
-    return (
-      <g
-        className={edgeClasses}
-        onClick={onEdgeClick}
-      >
-        <EdgeComponent {...props} />
-      </g>
-    );
-  });
-
-  EdgeWrapper.displayName = 'EdgeWrapper';
-  EdgeWrapper.whyDidYouRender = false;
-
-  return EdgeWrapper;
-};

src/components/Edges/wrapEdge.tsx

@@ -0,0 +1,46 @@
+import React, { memo, MouseEvent, ComponentType } from 'react';
+import cx from 'classnames';
+
+import { isInputDOMNode } from '../../utils';
+import store from '../../store';
+import { EdgeWrapperProps } from '../../types';
+
+export default (EdgeComponent: ComponentType<EdgeWrapperProps>) => {
+  const EdgeWrapper = memo(({
+    id, source, target, type,
+    animated, selected, onClick,
+    ...rest
+  }: EdgeWrapperProps) => {
+    const edgeClasses = cx('react-flow__edge', { selected, animated });
+    const onEdgeClick = (evt: MouseEvent) => {
+      if (isInputDOMNode(evt)) {
+        return false;
+      }
+
+      store.dispatch.setSelectedElements({ id, source, target });
+      onClick({ id, source, target, type });
+    };
+
+    return (
+      <g
+        className={edgeClasses}
+        onClick={onEdgeClick}
+      >
+        <EdgeComponent
+          id={id}
+          source={source}
+          target={target}
+          type={type}
+          animated={animated}
+          selected={selected}
+          onClick={onClick}
+          {...rest}
+        />
+      </g>
+    );
+  });
+
+  EdgeWrapper.displayName = 'EdgeWrapper';
+
+  return EdgeWrapper;
+};