Merge pull request #226 from wbkd/develop

Develop

.npmignore

@@ -5,4 +5,6 @@
 node_modules
 examples
 cypress
-.env
+.env
+tsconfig.json
+src

src/container/GraphView/index.tsx

@@ -20,7 +20,7 @@ export interface GraphViewProps {
   onElementClick: (element: Node | Edge) => void;
   onElementsRemove: (elements: Elements) => void;
   onNodeDragStop: (node: Node) => void;
-  onConnect: (conneciton: Connection) => void;
+  onConnect: (connection: Connection | Edge) => void;
   onLoad: OnLoadFunc;
   onMove: () => void;
   selectionKeyCode: number;

src/container/ReactFlow/index.tsx

@@ -27,7 +27,7 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   onElementClick: (element: Node | Edge) => void;
   onElementsRemove: (elements: Elements) => void;
   onNodeDragStop: (node: Node) => void;
-  onConnect: (connection: Connection) => void;
+  onConnect: (connection: Edge | Connection) => void;
   onLoad: OnLoadFunc;
   onMove: () => void;
   nodeTypes: NodeTypesType;

src/index.ts

@@ -7,3 +7,5 @@ export { default as EdgeText } from './components/Edges/EdgeText';
 export { MiniMap, Controls } from './plugins';
 
 export { isNode, isEdge, removeElements, addEdge, getOutgoers } from './utils/graph';
+
+export * from './types';

src/plugins/Controls/index.tsx

@@ -23,11 +23,10 @@ interface ControlProps extends React.HTMLAttributes<HTMLDivElement> {
   showInteractive?: boolean;
 }
 
-export default ({ style, showZoom = true, showFitView = true, showInteractive = true, className }: ControlProps) => {
-  const mapClasses: string = classnames('react-flow__controls', className);
-
+const Controls = ({ style, showZoom = true, showFitView = true, showInteractive = true, className }: ControlProps) => {
   const setInteractive = useStoreActions((actions) => actions.setInteractive);
   const { isInteractive } = useStoreState(({ isInteractive }) => ({ isInteractive }));
+  const mapClasses: string = classnames('react-flow__controls', className);
 
   return (
     <div
@@ -63,3 +62,7 @@ export default ({ style, showZoom = true, showFitView = true, showInteractive =
     </div>
   );
 };
+
+Controls.displayName = 'Controls';
+
+export default Controls;

src/plugins/MiniMap/MiniMapNode.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { Node } from '../../types';
+
+interface MiniMapNodeProps {
+  node: Node;
+  color: string;
+  borderRadius: number;
+}
+
+const MiniMapNode = ({ node, color, borderRadius }: MiniMapNodeProps) => {
+  const {
+    position: { x, y },
+    width,
+    height,
+  } = node.__rg;
+  const { background, backgroundColor } = node.style || {};
+  const fill = (background || backgroundColor || color) as string;
+  return (
+    <rect
+      className="react-flow__minimap-node"
+      x={x}
+      y={y}
+      rx={borderRadius}
+      ry={borderRadius}
+      width={width}
+      height={height}
+      fill={fill}
+    />
+  );
+};
+
+MiniMapNode.displayName = 'MiniMapNode';
+
+export default MiniMapNode;

src/plugins/MiniMap/index.tsx

@@ -4,18 +4,14 @@ import classnames from 'classnames';
 import { useStoreState } from '../../store/hooks';
 import { getRectOfNodes, getBoundsofRects } from '../../utils/graph';
 import { Node, Rect } from '../../types';
+import MiniMapNode from './MiniMapNode';
 
 type StringFunc = (node: Node) => string;
 
 interface MiniMapProps extends React.HTMLAttributes<SVGSVGElement> {
-  nodeColor: string | StringFunc;
-  nodeBorderRadius: number;
-  maskColor: string;
-}
-interface MiniMapNodeProps {
-  node: Node;
-  color: string;
-  borderRadius: number;
+  nodeColor?: string | StringFunc;
+  nodeBorderRadius?: number;
+  maskColor?: string;
 }
 
 const baseStyle: CSSProperties = {
@@ -27,29 +23,7 @@ const baseStyle: CSSProperties = {
   height: 150,
 };
 
-const MiniMapNode = ({ node, color, borderRadius }: MiniMapNodeProps) => {
-  const {
-    position: { x, y },
-    width,
-    height,
-  } = node.__rg;
-  const { background, backgroundColor } = node.style || {};
-  const fill = (background || backgroundColor || color) as string;
-  return (
-    <rect
-      className="react-flow__minimap-node"
-      x={x}
-      y={y}
-      rx={borderRadius}
-      ry={borderRadius}
-      width={width}
-      height={height}
-      fill={fill}
-    />
-  );
-};
-
-export default ({
+const MiniMap = ({
   style = { backgroundColor: '#f8f8f8' },
   className,
   nodeColor = '#ddd',
@@ -105,7 +79,7 @@ export default ({
       }}
       className={mapClasses}
     >
-      {state.nodes.map(node => (
+      {state.nodes.map((node) => (
         <MiniMapNode key={node.id} node={node} color={nodeColorFunc(node)} borderRadius={nodeBorderRadius} />
       ))}
       <path
@@ -118,3 +92,7 @@ export default ({
     </svg>
   );
 };
+
+MiniMap.displayName = 'MiniMap';
+
+export default MiniMap;

src/types/index.ts

@@ -13,22 +13,11 @@ export enum Position {
   Bottom = 'bottom',
 }
 
-export type XYPosition = {
+export interface XYPosition {
   x: number;
   y: number;
-};
-
-export enum GridType {
-  Lines = 'lines',
-  Dots = 'dots',
 }
 
-export type HandleType = 'source' | 'target';
-
-export type NodeTypesType = { [key: string]: React.ReactNode };
-
-export type EdgeTypesType = NodeTypesType;
-
 export interface Dimensions {
   width: number;
   height: number;
@@ -41,12 +30,6 @@ export interface Box extends XYPosition {
   y2: number;
 }
 
-export interface SelectionRect extends Rect {
-  startX: number;
-  startY: number;
-  draw: boolean;
-}
-
 export interface Node {
   id: ElementId;
   position: XYPosition;
@@ -71,6 +54,23 @@ export interface Edge {
   animated?: boolean;
 }
 
+export enum GridType {
+  Lines = 'lines',
+  Dots = 'dots',
+}
+
+export type HandleType = 'source' | 'target';
+
+export type NodeTypesType = { [key: string]: React.ReactNode };
+
+export type EdgeTypesType = NodeTypesType;
+
+export interface SelectionRect extends Rect {
+  startX: number;
+  startY: number;
+  draw: boolean;
+}
+
 export interface EdgeProps {
   sourceX: number;
   sourceY: number;
@@ -142,10 +142,10 @@ type OnLoadParams = {
 
 export type OnLoadFunc = (params: OnLoadParams) => void;
 
-export type Connection = {
+export interface Connection {
   source: ElementId | null;
   target: ElementId | null;
-};
+}
 
 export type OnConnectFunc = (connection: Connection) => void;
 

src/utils/graph.ts

@@ -1,7 +1,7 @@
 import { zoomIdentity } from 'd3-zoom';
 
 import store from '../store';
-import { ElementId, Node, Edge, Elements, Transform, XYPosition, Rect, FitViewParams, Box } from '../types';
+import { ElementId, Node, Edge, Elements, Transform, XYPosition, Rect, FitViewParams, Box, Connection } from '../types';
 
 export const isEdge = (element: Node | Edge): boolean =>
   element.hasOwnProperty('source') && element.hasOwnProperty('target');
@@ -31,17 +31,24 @@ export const removeElements = (elementsToRemove: Elements, elements: Elements):
   });
 };
 
-const getEdgeId = ({ source, target }: Edge): ElementId => `reactflow__edge-${source}-${target}`;
+const getEdgeId = ({ source, target }: Connection): ElementId => `reactflow__edge-${source}-${target}`;
 
-export const addEdge = (edgeParams: Edge, elements: Elements): Elements => {
+export const addEdge = (edgeParams: Edge | Connection, elements: Elements): Elements => {
   if (!edgeParams.source || !edgeParams.target) {
     throw new Error('Can not create edge. An edge needs a source and a target');
   }
 
-  return elements.concat({
+  if (edgeParams.hasOwnProperty('id')) {
+    const edge = { ...edgeParams } as Edge;
+    return elements.concat(edge);
+  }
+
+  const edge = {
     ...edgeParams,
-    id: typeof edgeParams.id !== 'undefined' ? edgeParams.id : getEdgeId(edgeParams),
-  });
+    id: getEdgeId(edgeParams),
+  } as Edge;
+
+  return elements.concat(edge);
 };
 
 export const pointToRendererPoint = (