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
2019-10-15 22:44:10 +02:00
parent 1651ed332a
commit c5632323c3
55 changed files with 4399 additions and 13047 deletions
@@ -1,84 +0,0 @@
-import React, {memo} from 'react';
-import PropTypes from 'prop-types';
-import {useStoreState} from 'easy-peasy';
-import classnames from 'classnames';
-
-const baseStyles = {
-  position: 'absolute',
-  top: 0,
-  left: 0,
-};
-
-const createGridLines = (width, height, xOffset, yOffset, gap) => {
-  const lineCountX = Math.ceil(width / gap) + 1;
-  const lineCountY = Math.ceil(height / gap) + 1;
-
-  const xValues = Array.from({length: lineCountX}, (_, i) => `M${i * gap + xOffset} 0 V${height}`);
-  const yValues = Array.from({length: lineCountY}, (_, i) => `M0 ${i * gap + yOffset} H${width}`);
-
-  return [...xValues, ...yValues].join(' ');
-};
-
-const createGridDots = (width, height, xOffset, yOffset, gap, size) => {
-  const lineCountX = Math.ceil(width / gap) + 1;
-  const lineCountY = Math.ceil(height / gap) + 1;
-
-  const values = Array.from({length: lineCountX}, (_, col) => {
-    const x = col * gap + xOffset;
-    return Array.from({length: lineCountY},(_,row)=>{
-      const y = row * gap + yOffset;
-      return `M${x} ${y-size} l${size} ${size} l${-size} ${size} l${-size} ${-size}z`
-    }).join(' ');
-  });
-
-  return values.join(' ');
-};
-
-const Grid = memo(({gap, color, size, style, className, backgroundType}) => {
-  const {
-    width,
-    height,
-    transform: [x, y, scale],
-  } = useStoreState(s => s);
-
-  const gridClasses = classnames('react-flow__grid', className);
-  const scaledGap = gap * scale;
-
-  const xOffset = x % scaledGap;
-  const yOffset = y % scaledGap;
-  const isLines = backgroundType === 'lines';
-  const path = isLines
-    ? createGridLines(width, height, xOffset, yOffset, scaledGap)
-    : createGridDots(width, height, xOffset, yOffset, scaledGap, size);
-
-  const fill = isLines ? 'none' : color;
-  const stroke = isLines ? color : 'none';
-
-  return (
-    <svg width={width} height={height} style={{...baseStyles, ...style}} className={gridClasses}>
-      <path fill={fill} stroke={stroke} strokeWidth={size} d={path} />
-    </svg>
-  );
-});
-
-Grid.displayName = 'Grid';
-
-Grid.propTypes = {
-  gap: PropTypes.number,
-  color: PropTypes.string,
-  size: PropTypes.number,
-  style: PropTypes.object,
-  className: PropTypes.string,
-  backgroundType: PropTypes.oneOf(['lines', 'dots']),
-};
-
-Grid.defaultProps = {
-  gap: 24,
-  color: '#aaa',
-  size: .5,
-  style: {},
-  className: null,
-  backgroundType: 'dots',
-};
-
-export default Grid;
@@ -1,34 +0,0 @@
-import React, { memo } from 'react';
-import PropTypes from 'prop-types';
-
-import Grid from './Grid';
-
-const bgComponents = {
-  lines: Grid,
-  dots: Grid
-};
-
-const BackgroundRenderer = memo(({
-  backgroundType, ...rest
-}) => {
-  const BackgroundComponent = bgComponents[backgroundType];
-
-  return (
-    <BackgroundComponent
-      backgroundType={backgroundType}
-      {...rest}
-    />
-  );
-});
-
-BackgroundRenderer.displayName = 'BackgroundRenderer';
-
-BackgroundRenderer.propTypes = {
-  backgroundType: PropTypes.oneOf(['lines', 'dots'])
-};
-
-BackgroundRenderer.defaultProps = {
-  backgroundType: 'dots'
-};
-
-export default BackgroundRenderer;
@@ -1,10 +1,36 @@
-import React, { memo } from 'react';
-import { useStoreState } from 'easy-peasy';
+import React, { memo, SVGAttributes } from 'react';

-import ConnectionLine from '../../components/ConnectionLine';
+import { useStoreState } from '../../store/hooks';
+import ConnectionLine from '../../components/ConnectionLine/index';
 import { isEdge } from '../../utils/graph';
+import { XYPosition, Position, Edge, Node, ElementId, Transform, HandleElement } from '../../types';

-function getHandlePosition(position, node, handle = null) {
+interface EdgeRendererProps {
+  width: number;
+  height: number;
+  edgeTypes: any;
+  connectionLineStyle?: SVGAttributes<{}>;
+  connectionLineType?: string;
+  onElementClick?: () => void;
+};
+
+interface EdgeRendererState {
+  nodes: Node[];
+  edges: Edge[];
+  transform: Transform;
+  selectedElements: any;
+  connectionSourceId: ElementId | null;
+  position: XYPosition;
+};
+
+interface EdgePositions {
+  sourceX: number;
+  sourceY: number;
+  targetX: number;
+  targetY: number;
+};
+
+function getHandlePosition(position: Position, node: Node, handle: any | null = null): XYPosition {
  if (!handle) {
    switch (position) {
      case 'top': return {
@@ -24,6 +50,8 @@ function getHandlePosition(position, node, handle = null) {
        y: node.__rg.height / 2
      };
    }
+
+    return null;
  }

  switch (position) {
@@ -46,7 +74,7 @@ function getHandlePosition(position, node, handle = null) {
  }
 }

-function getHandle(bounds, handleId) {
+function getHandle(bounds: HandleElement[], handleId: ElementId): HandleElement | null {
  let handle = null;

  if (!bounds) {
@@ -64,7 +92,10 @@ function getHandle(bounds, handleId) {
  return handle;
 }

-function getEdgePositions({ sourceNode, sourceHandle, sourcePosition, targetNode, targetHandle, targetPosition }) {
+function getEdgePositions(
+  sourceNode: Node, sourceHandle: HandleElement, sourcePosition: Position,
+  targetNode: Node, targetHandle: HandleElement, targetPosition: Position
+): EdgePositions {
  const sourceHandlePos = getHandlePosition(sourcePosition, sourceNode, sourceHandle)
  const sourceX = sourceNode.__rg.position.x + sourceHandlePos.x;
  const sourceY = sourceNode.__rg.position.y + sourceHandlePos.y;
@@ -78,17 +109,17 @@ function getEdgePositions({ sourceNode, sourceHandle, sourcePosition, targetNode
  };
 }

-function renderEdge(e, props, state) {
-  const edgeType = e.type || 'default';
+function renderEdge(edge: Edge, props: EdgeRendererProps, state: EdgeRendererState) {
+  const edgeType = edge.type || 'default';

-  const hasSourceHandleId = e.source.includes('__');
-  const hasTargetHandleId = e.target.includes('__');
+  const hasSourceHandleId = edge.source.includes('__');
+  const hasTargetHandleId = edge.target.includes('__');

-  const sourceId = hasSourceHandleId ? e.source.split('__')[0] : e.source;
-  const targetId = hasTargetHandleId ? e.target.split('__')[0] : e.target;
+  const sourceId = hasSourceHandleId ? edge.source.split('__')[0] : edge.source;
+  const targetId = hasTargetHandleId ? edge.target.split('__')[0] : edge.target;

-  const sourceHandleId = hasSourceHandleId ? e.source.split('__')[1] : null;
-  const targetHandleId = hasTargetHandleId ? e.target.split('__')[1] : null;
+  const sourceHandleId = hasSourceHandleId ? edge.source.split('__')[1] : null;
+  const targetHandleId = hasTargetHandleId ? edge.target.split('__')[1] : null;

  const sourceNode = state.nodes.find(n => n.id === sourceId);
  const targetNode = state.nodes.find(n => n.id === targetId);
@@ -107,23 +138,23 @@ function renderEdge(e, props, state) {
  const sourcePosition = sourceHandle ? sourceHandle.position : 'bottom';
  const targetPosition = targetHandle ? targetHandle.position : 'top';

-  const { sourceX, sourceY, targetX, targetY } = getEdgePositions({
+  const { sourceX, sourceY, targetX, targetY } = getEdgePositions(
    sourceNode, sourceHandle, sourcePosition,
    targetNode, targetHandle, targetPosition
-  });
+  );
  const selected = state.selectedElements
    .filter(isEdge)
-    .find(elm => elm.source === sourceId && elm.target === targetId);
+    .find((elm: Edge) => elm.source === sourceId && elm.target === targetId);

  return (
    <EdgeComponent
-      key={e.id}
-      id={e.id}
-      type={e.type}
+      key={edge.id}
+      id={edge.id}
+      type={edge.type}
      onClick={props.onElementClick}
      selected={selected}
-      animated={e.animated}
-      style={e.style}
+      animated={edge.animated}
+      style={edge.style}
      source={sourceId}
      target={targetId}
      sourceHandleId={sourceHandleId}
@@ -138,8 +169,10 @@ function renderEdge(e, props, state) {
  );
 }

-const EdgeRenderer = memo((props) => {
-  const state = useStoreState(s => ({
+const EdgeRenderer = memo(({
+  width, height, connectionLineStyle, connectionLineType, ...rest
+}: EdgeRendererProps) => {
+  const state: EdgeRendererState = useStoreState(s => ({
    nodes: s.nodes,
    edges: s.edges,
    transform: s.transform,
@@ -147,10 +180,6 @@ const EdgeRenderer = memo((props) => {
    connectionSourceId: s.connectionSourceId,
    position: s.connectionPosition
  }));
-  const {
-    width, height, connectionLineStyle, connectionLineType
-  } = props;
-
  if (!width) {
    return null;
  }
@@ -165,7 +194,7 @@ const EdgeRenderer = memo((props) => {
      className="react-flow__edges"
    >
      <g transform={transformStyle}>
-        {edges.map(e => renderEdge(e, props, state))}
+        {edges.map((e: Edge) => renderEdge(e, { width, height, connectionLineStyle, connectionLineType, ...rest }, state))}
        {connectionSourceId && (
          <ConnectionLine
            nodes={nodes}
@@ -1,24 +0,0 @@
-import StraightEdge from '../../components/Edges/StraightEdge';
-import BezierEdge from '../../components/Edges/BezierEdge';
-import wrapEdge from '../../components/Edges/wrapEdge';
-
-export function createEdgeTypes(edgeTypes) {
-  const standardTypes = {
-    default: wrapEdge(edgeTypes.default || BezierEdge),
-    straight: wrapEdge(edgeTypes.bezier || StraightEdge)
-  };
-
-  const specialTypes = Object
-    .keys(edgeTypes)
-    .filter(k => !['default', 'bezier'].includes(k))
-    .reduce((res, key) => {
-      res[key] = wrapEdge(edgeTypes[key] ||BezierEdge);
-
-      return res;
-    }, {});
-
-  return {
-    ...standardTypes,
-    ...specialTypes
-  };
-}
@@ -0,0 +1,28 @@
+import { ComponentType } from 'react';
+
+import StraightEdge from '../../components/Edges/StraightEdge';
+import BezierEdge from '../../components/Edges/BezierEdge';
+import wrapEdge from '../../components/Edges/wrapEdge';
+
+import { EdgeTypesType, EdgeWrapperProps } from '../../types';
+
+export function createEdgeTypes(edgeTypes: EdgeTypesType): EdgeTypesType{
+  const standardTypes: EdgeTypesType = {
+    default: wrapEdge((edgeTypes.default || BezierEdge) as ComponentType<EdgeWrapperProps>),
+    straight: wrapEdge((edgeTypes.bezier || StraightEdge) as ComponentType<EdgeWrapperProps>)
+  };
+
+  const specialTypes: EdgeTypesType = Object
+    .keys(edgeTypes)
+    .filter(k => !['default', 'bezier'].includes(k))
+    .reduce((res, key) => {
+      res[key] = wrapEdge((edgeTypes[key] || BezierEdge) as ComponentType<EdgeWrapperProps>);
+
+      return res;
+    }, {});
+
+  return {
+    ...standardTypes,
+    ...specialTypes
+  };
+}
@@ -1,17 +1,38 @@
-import React, { useEffect, useRef, memo } from 'react';
-import { useStoreState, useStoreActions } from 'easy-peasy';
+import React, { useEffect, useRef, memo, SVGAttributes } from 'react';

+import { useStoreState, useStoreActions } from '../../store/hooks';
 import NodeRenderer from '../NodeRenderer';
 import EdgeRenderer from '../EdgeRenderer';
-import BackgroundRenderer from '../BackgroundRenderer';
 import UserSelection from '../../components/UserSelection';
 import NodesSelection from '../../components/NodesSelection';
+import BackgroundGrid from '../../components/BackgroundGrid';
 import useKeyPress from '../../hooks/useKeyPress';
 import useD3Zoom from '../../hooks/useD3Zoom';
 import useGlobalKeyHandler from '../../hooks/useGlobalKeyHandler';
 import useElementUpdater from '../../hooks/useElementUpdater'
 import { getDimensions } from '../../utils';
 import { fitView, zoomIn, zoomOut } from '../../utils/graph';
+import { Elements, NodeTypesType, EdgeTypesType, GridType, OnLoadFunc } from '../../types'
+
+export interface GraphViewProps {
+  elements: Elements,
+  onElementClick: () => void,
+  onElementsRemove: (elements: Elements) => void,
+  onNodeDragStop: () => void,
+  onConnect: () => void,
+	onLoad: OnLoadFunc,
+  onMove: () => void,
+  selectionKeyCode: number,
+  nodeTypes: NodeTypesType,
+  edgeTypes: EdgeTypesType,
+  connectionLineType: string,
+  connectionLineStyle: SVGAttributes<{}>,
+  deleteKeyCode: number,
+  showBackground: boolean,
+  backgroundGap: number,
+  backgroundColor: string,
+  backgroundType: GridType,
+};

 const GraphView = memo(({
  nodeTypes, edgeTypes, onMove, onLoad,
@@ -19,9 +40,9 @@ const GraphView = memo(({
  selectionKeyCode, onElementsRemove, deleteKeyCode, elements,
  showBackground, backgroundGap, backgroundColor, backgroundType,
  onConnect
-}) => {
-  const zoomPane = useRef();
-  const rendererNode = useRef();
+}: GraphViewProps) => {
+  const zoomPane = useRef<HTMLDivElement>(null);
+  const rendererNode = useRef<HTMLDivElement>(null);
  const state = useStoreState(s => ({
    width: s.width,
    height: s.height,
@@ -65,12 +86,12 @@ const GraphView = memo(({
  }, [state.d3Initialised]);

  useGlobalKeyHandler({ onElementsRemove, deleteKeyCode });
-  useElementUpdater({ elements });
+  useElementUpdater(elements);

  return (
    <div className="react-flow__renderer" ref={rendererNode}>
      {showBackground && (
-        <BackgroundRenderer
+        <BackgroundGrid
          gap={backgroundGap}
          color={backgroundColor}
          backgroundType={backgroundType}
@@ -1,59 +0,0 @@
-import React, { memo } from 'react';
-import { useStoreState } from 'easy-peasy';
-
-import { isNode } from '../../utils/graph';
-
-function renderNode(d, props, state) {
-  const nodeType = d.type || 'default';
-
-  if (!props.nodeTypes[nodeType]) {
-    console.warn(`No node type found for type "${nodeType}". Using fallback type "default".`);
-  }
-
-  const NodeComponent = props.nodeTypes[nodeType] || props.nodeTypes.default;
-  const selected = state.selectedElements
-    .filter(isNode)
-    .map(e => e.id)
-    .includes(d.id);
-
-  return (
-    <NodeComponent
-      key={d.id}
-      id={d.id}
-      type={d.type}
-      data={d.data}
-      xPos={d.__rg.position.x}
-      yPos={d.__rg.position.y}
-      onClick={props.onElementClick}
-      onNodeDragStop={props.onNodeDragStop}
-      transform={state.transform}
-      selected={selected}
-      style={d.style}
-    />
-  );
-}
-
-const NodeRenderer = memo((props) => {
-  const state = useStoreState(s => ({
-    nodes: s.nodes,
-    transform: s.transform,
-    selectedElements: s.selectedElements
-  }));
-
-  const { transform, nodes } = state;
-  const transformStyle = { transform : `translate(${transform[0]}px,${transform[1]}px) scale(${transform[2]})` };
-
-  return (
-    <div
-      className="react-flow__nodes"
-      style={transformStyle}
-    >
-      {nodes.map(d => renderNode(d, props, state))}
-    </div>
-  );
-});
-
-NodeRenderer.displayName = 'NodeRenderer';
-NodeRenderer.whyDidYouRender = false;
-
-export default NodeRenderer;
@@ -0,0 +1,71 @@
+import React, { memo, ComponentType } from 'react';
+
+import { useStoreState } from '../../store/hooks';
+import { isNode } from '../../utils/graph';
+import { Node, Transform, NodeTypesType, NodeComponentProps, } from '../../types';
+
+interface NodeRendererProps {
+  nodeTypes: NodeTypesType;
+  onElementClick: () => void;
+  onNodeDragStop: () => void;
+};
+
+interface NodeRendererState {
+  nodes: Node[];
+  transform: Transform;
+  selectedElements: any;
+};
+
+function renderNode(node: Node, props: NodeRendererProps, state: NodeRendererState) {
+  const nodeType = node.type || 'default';
+
+  if (!props.nodeTypes[nodeType]) {
+    console.warn(`No node type found for type "${nodeType}". Using fallback type "default".`);
+  }
+
+  const NodeComponent = (props.nodeTypes[nodeType] || props.nodeTypes.default) as ComponentType<NodeComponentProps>;
+  const selected = state.selectedElements
+    .filter(isNode)
+    .map((e: Node) => e.id)
+    .includes(node.id);
+
+  return (
+    <NodeComponent
+      key={node.id}
+      id={node.id}
+      type={node.type}
+      data={node.data}
+      xPos={node.__rg.position.x}
+      yPos={node.__rg.position.y}
+      onClick={props.onElementClick}
+      onNodeDragStop={props.onNodeDragStop}
+      transform={state.transform}
+      selected={selected}
+      style={node.style}
+    />
+  );
+}
+
+const NodeRenderer = memo((props: NodeRendererProps) => {
+  const state: NodeRendererState = useStoreState(s => ({
+    nodes: s.nodes,
+    transform: s.transform,
+    selectedElements: s.selectedElements
+  }));
+
+  const { transform, nodes } = state;
+  const transformStyle = { transform : `translate(${transform[0]}px,${transform[1]}px) scale(${transform[2]})` };
+
+  return (
+    <div
+      className="react-flow__nodes"
+      style={transformStyle}
+    >
+      {nodes.map(node => renderNode(node, props, state))}
+    </div>
+  );
+});
+
+NodeRenderer.displayName = 'NodeRenderer';
+
+export default NodeRenderer;
@@ -1,26 +0,0 @@
-import DefaultNode from '../../components/Nodes/DefaultNode';
-import InputNode from '../../components/Nodes/InputNode';
-import OutputNode from '../../components/Nodes/OutputNode';
-import wrapNode from '../../components/Nodes/wrapNode';
-
-export function createNodeTypes(nodeTypes) {
-  const standardTypes = {
-    input: wrapNode(nodeTypes.input || InputNode),
-    default: wrapNode(nodeTypes.default || DefaultNode),
-    output: wrapNode(nodeTypes.output || OutputNode)
-  };
-
-  const specialTypes = Object
-    .keys(nodeTypes)
-    .filter(k => !['input', 'default', 'output'].includes(k))
-    .reduce((res, key) => {
-      res[key] = wrapNode(nodeTypes[key] || DefaultNode);
-
-      return res;
-    }, {});
-
-  return {
-    ...standardTypes,
-    ...specialTypes
-  };
-}
@@ -0,0 +1,29 @@
+import { ComponentType } from 'react';
+
+import DefaultNode from '../../components/Nodes/DefaultNode';
+import InputNode from '../../components/Nodes/InputNode';
+import OutputNode from '../../components/Nodes/OutputNode';
+import wrapNode from '../../components/Nodes/wrapNode';
+import { NodeTypesType, NodeComponentProps } from '../../types';
+
+export function createNodeTypes(nodeTypes: NodeTypesType): NodeTypesType {
+  const standardTypes: NodeTypesType = {
+    input: wrapNode((nodeTypes.input || InputNode) as ComponentType<NodeComponentProps>),
+    default: wrapNode((nodeTypes.default || DefaultNode) as ComponentType<NodeComponentProps>),
+    output: wrapNode((nodeTypes.output || OutputNode) as ComponentType<NodeComponentProps>)
+  };
+
+  const specialTypes: NodeTypesType = Object
+    .keys(nodeTypes)
+    .filter(k => !['input', 'default', 'output'].includes(k))
+    .reduce((res, key) => {
+      res[key] = wrapNode((nodeTypes[key] || DefaultNode) as ComponentType<NodeComponentProps>);
+
+      return res;
+    }, {});
+
+  return {
+    ...standardTypes,
+    ...specialTypes
+  };
+}
@@ -1,8 +1,9 @@
-import React, { useMemo } from 'react';
-import PropTypes from 'prop-types';
+import React, { useMemo, CSSProperties, ReactNode, SVGAttributes } from 'react';
 import { StoreProvider } from 'easy-peasy';

-if (process.env.NODE_ENV !== 'production') {
+const nodeEnv: string = (process.env.NODE_ENV as string);
+
+if (nodeEnv !== 'production') {
  const whyDidYouRender = require('@welldone-software/why-did-you-render');
  whyDidYouRender(React);
 }
@@ -17,16 +18,40 @@ import StraightEdge from '../../components/Edges/StraightEdge';
 import StepEdge from '../../components/Edges/StepEdge';
 import { createEdgeTypes } from '../EdgeRenderer/utils';
 import store from '../../store';
+import { Elements, NodeTypesType, EdgeTypesType, GridType, OnLoadFunc } from '../../types';

 import '../../style.css';

+export interface ReactFlowProps {
+  elements: Elements,
+  style?: CSSProperties,
+  className?: string,
+  children?: ReactNode[],
+  onElementClick: () => void,
+  onElementsRemove: (elements: Elements) => void,
+  onNodeDragStop: () => void,
+  onConnect: () => void,
+	onLoad: OnLoadFunc,
+  onMove: () => void,
+  nodeTypes: NodeTypesType,
+  edgeTypes: EdgeTypesType,
+  connectionLineType: string,
+  connectionLineStyle: SVGAttributes<{}>,
+  deleteKeyCode: number,
+  selectionKeyCode: number,
+  showBackground: boolean,
+  backgroundGap: number,
+  backgroundColor: string,
+  backgroundType: GridType
+};
+
 const ReactFlow = ({
  style, onElementClick, elements, children,
  nodeTypes, edgeTypes, onLoad, onMove,
  onElementsRemove, onConnect, onNodeDragStop, connectionLineType,
  connectionLineStyle, deleteKeyCode, selectionKeyCode,
  showBackground, backgroundGap, backgroundType, backgroundColor
-}) => {
+}: ReactFlowProps) => {
  const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), []);
  const edgeTypesParsed = useMemo(() => createEdgeTypes(edgeTypes), []);

@@ -60,25 +85,6 @@ const ReactFlow = ({

 ReactFlow.displayName = 'ReactFlow';

-ReactFlow.propTypes = {
-  onElementClick: PropTypes.func,
-  onElementsRemove: PropTypes.func,
-  onNodeDragStop: PropTypes.func,
-  onConnect: PropTypes.func,
-	onLoad: PropTypes.func,
-  onMove: PropTypes.func,
-  nodeTypes: PropTypes.object,
-  edgeTypes: PropTypes.object,
-  connectionLineType: PropTypes.string,
-  connectionLineStyle: PropTypes.object,
-  deleteKeyCode: PropTypes.number,
-  selectionKeyCode: PropTypes.number,
-  gridColor: PropTypes.string,
-  gridGap: PropTypes.number,
-  showBackground: PropTypes.bool,
-  backgroundType: PropTypes.oneOf(['lines', 'dots'])
-};
-
 ReactFlow.defaultProps = {
  onElementClick: () => {},
  onElementsRemove: () => {},
@@ -103,7 +109,7 @@ ReactFlow.defaultProps = {
  backgroundColor: '#eee',
  backgroundGap: 24,
  showBackground: true,
-  backgroundType: 'dots'
+  backgroundType: GridType.Dots
 };

 export default ReactFlow;