flow chart demo

.vscode/settings.json

@@ -0,0 +1,24 @@
+{
+    "editor.formatOnSave": false,
+    "editor.tabSize": 2,
+    "editor.detectIndentation": true,
+    "eslint.alwaysShowStatus": true,
+    "eslint.format.enable": true,
+    "files.trimFinalNewlines": true,
+    "[javascript]": {
+        "editor.formatOnSave": true
+    },
+    "[javascriptreact]": {
+        "editor.formatOnSave": true
+    },
+    "[typescript]": {
+        "editor.formatOnType": true,
+        "editor.insertSpaces": true,
+        "editor.tabSize": 2
+    },
+    "[typescriptreact]": {
+        "editor.formatOnType": true,
+        "editor.insertSpaces": true,
+        "editor.tabSize": 2
+    },
+}

package.json

@@ -2,55 +2,59 @@
   "name": "@mrblenny/react-flow-chart",
   "version": "0.0.11",
   "description": "A flexible, stateless flow chart library for react.",
-  "main": "src/index.js",
+  "main": "src/index",
   "repository": "git@github.com:MrBlenny/react-flow-chart.git",
   "author": "David Revay <daverevay@gmail.com>",
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "^7.1.2",
-    "@storybook/addon-centered": "^5.3.2",
-    "@storybook/addon-options": "5.3.2",
-    "@storybook/addon-viewport": "5.3.2",
-    "@storybook/react": "5.3.2",
-    "@types/lodash": "^4.14.118",
-    "@types/node": "10.12.0",
+    "@babel/core": "^7.8.7",
+    "@storybook/addon-centered": "^5.3.17",
+    "@storybook/addon-options": "5.3.17",
+    "@storybook/addon-viewport": "5.3.17",
+    "@storybook/react": "5.3.17",
+    "@types/lodash": "^4.14.149",
+    "@types/node": "13.9.1",
     "@types/pathfinding": "0.0.4",
-    "@types/react": "^16.8.8",
-    "@types/react-dom": "^16.8.4",
-    "@types/styled-components": "^4.1.19",
-    "@types/uuid": "^3.4.4",
-    "@types/webpack": "4.4.17",
-    "babel-loader": "^8.0.4",
+    "@types/react": "^16.9.23",
+    "@types/react-dom": "^16.9.5",
+    "@types/styled-components": "^5.0.1",
+    "@types/uuid": "^7.0.2",
+    "@types/webpack": "4.41.7",
+    "babel-loader": "^8.0.6",
     "lodash": "^4.17.15",
-    "np": "^3.0.4",
-    "react": "^16.8.4",
+    "np": "^6.2.0",
+    "react": "^16.13.0",
     "react-dom": "^16.8.5",
     "react-json-view": "^1.19.1",
-    "ts-loader": "^5.2.2",
-    "ts-node": "^7.0.1",
-    "tslint": "^5.11.0",
-    "tslint-config-standard": "^8.0.1",
-    "tslint-react": "^3.6.0",
-    "typescript": "^3.4.1",
-    "webpack": "^4.21.0",
-    "webpack-cli": "^3.1.2"
+    "ts-loader": "^6.2.1",
+    "ts-node": "^8.6.2",
+    "tslint": "^6.1.0",
+    "tslint-config-standard": "^9.0.0",
+    "tslint-react": "^4.2.0",
+    "typescript": "^3.8.3",
+    "webpack": "^4.42.0",
+    "webpack-cli": "^3.3.11"
   },
   "dependencies": {
+    "@material-ui/core": "^4.9.5",
     "pathfinding": "^0.4.18",
-    "react-draggable": "^3.0.5",
+    "react-color": "^2.18.0",
+    "react-draggable": "^4.2.0",
     "react-resize-observer": "^1.1.1",
-    "styled-components": "^5.0.0",
-    "uuid": "^3.3.2"
+    "styled-components": "^5.0.1",
+    "typeface-roboto": "0.0.75",
+    "uuid": "^7.0.2"
   },
   "peerDependencies": {
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4"
+    "react": "^16.13.0",
+    "react-dom": "^16.13.0"
   },
   "scripts": {
     "start:storybook": "start-storybook -p 6006 -c config/storybook",
     "build:storybook": "build-storybook -c config/storybook -o docs",
     "build": "tsc && cp package.json dist/ && cp README.md ./dist",
     "test": "npm run lint",
-    "lint": "tslint -p tsconfig.json -c tslint.json"
+    "lint": "tslint -p tsconfig.json -c tslint.json",
+    "lint:fix": "npm run lint -- --fix"
   }
 }

src/components/Canvas/Canvas.wrapper.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import Draggable from 'react-draggable'
-import { IConfig, IOnCanvasClick, IOnCanvasDrop, IOnDeleteKey, IOnDragCanvas, IOnDragCanvasStop, REACT_FLOW_CHART } from '../../'
+import { IConfig, IOnCanvasClick, IOnCanvasDoubleClick, IOnCanvasDrop, IOnDeleteKey, IOnDragCanvas, IOnDragCanvasStop, REACT_FLOW_CHART } from '../../'
 import CanvasContext from './CanvasContext'
 import { ICanvasInnerDefaultProps } from './CanvasInner.default'
 import { ICanvasOuterDefaultProps } from './CanvasOuter.default'
@@ -15,6 +15,7 @@ export interface ICanvasWrapperProps {
   onDragCanvasStop: IOnDragCanvasStop
   onDeleteKey: IOnDeleteKey
   onCanvasClick: IOnCanvasClick
+  onCanvasDoubleClick: IOnCanvasDoubleClick
   onCanvasDrop: IOnCanvasDrop
   ComponentInner: React.FunctionComponent<ICanvasInnerDefaultProps>
   ComponentOuter: React.FunctionComponent<ICanvasOuterDefaultProps>
@@ -72,6 +73,7 @@ export class CanvasWrapper extends React.Component<ICanvasWrapperProps, IState>
       onDragCanvasStop,
       children,
       onCanvasClick,
+      onCanvasDoubleClick,
       onDeleteKey,
       onCanvasDrop,
     } = this.props
@@ -94,22 +96,25 @@ export class CanvasWrapper extends React.Component<ICanvasWrapperProps, IState>
               config={config}
               children={children}
               onClick={onCanvasClick}
+              onDoubleClick={onCanvasDoubleClick}
               tabIndex={0}
-              onKeyDown={ (e: React.KeyboardEvent) => {
+              onKeyDown={(e: React.KeyboardEvent) => {
                 // delete or backspace keys
-                if (e.keyCode === 46 || e.keyCode === 8) {
+                if (e.keyCode === 46) {
                   onDeleteKey({ config })
                 }
               }}
-              onDrop={ (e) => {
+              onDrop={(e) => {
                 const data = JSON.parse(e.dataTransfer.getData(REACT_FLOW_CHART))
                 if (data) {
-                  onCanvasDrop({ data, position: {
-                    x: e.clientX - (position.x + offsetX),
-                    y: e.clientY - (position.y + offsetY),
-                  }})
+                  onCanvasDrop({
+                    data, position: {
+                      x: e.clientX - (position.x + offsetX),
+                      y: e.clientY - (position.y + offsetY),
+                    }
+                  })
                 }
-              } }
+              }}
               onDragOver={(e) => e.preventDefault()}
             />
           </Draggable>

src/components/Canvas/CanvasInner.default.tsx

@@ -1,10 +1,11 @@
 import styled from 'styled-components'
-import { IConfig, IOnCanvasClick } from '../../'
+import { IConfig, IOnCanvasClick, IOnCanvasDoubleClick } from '../../index'
 
 export interface ICanvasInnerDefaultProps {
   config: IConfig
   children: any
   onClick: IOnCanvasClick
+  onDoubleClick: IOnCanvasDoubleClick
   tabIndex: number
   onKeyDown: (e: React.KeyboardEvent) => void
   onDrop: (e: React.DragEvent<HTMLDivElement>) => void

src/components/FlowChart/FlowChart.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import {
   CanvasInnerDefault, CanvasOuterDefault, CanvasWrapper, ICanvasInnerDefaultProps, ICanvasOuterDefaultProps, IChart, IConfig, ILink,
-  ILinkDefaultProps, INodeDefaultProps, INodeInnerDefaultProps, IOnCanvasClick, IOnCanvasDrop, IOnDeleteKey, IOnDragCanvas,
+  ILinkDefaultProps, INodeDefaultProps, INodeInnerDefaultProps, IOnCanvasClick, IOnCanvasDoubleClick, IOnCanvasDrop, IOnDeleteKey, IOnDragCanvas,
   IOnDragCanvasStop, IOnDragNode, IOnDragNodeStop, IOnLinkCancel, IOnLinkClick, IOnLinkComplete, IOnLinkMouseEnter,
   IOnLinkMouseLeave, IOnLinkMove, IOnLinkStart, IOnNodeClick, IOnNodeMouseEnter, IOnNodeMouseLeave, IOnNodeSizeChange,
   IOnPortPositionChange, IPortDefaultProps, IPortsDefaultProps, ISelectedOrHovered, LinkDefault, LinkWrapper, NodeDefault, NodeInnerDefault, NodeWrapper, PortDefault, PortsDefault,
@@ -23,6 +23,7 @@ export interface IFlowChartCallbacks {
   onLinkMouseLeave: IOnLinkMouseLeave
   onLinkClick: IOnLinkClick
   onCanvasClick: IOnCanvasClick
+  onCanvasDoubleClick: IOnCanvasDoubleClick
   onDeleteKey: IOnDeleteKey
   onNodeClick: IOnNodeClick
   onNodeMouseEnter: IOnNodeMouseEnter
@@ -81,6 +82,7 @@ export const FlowChart = (props: IFlowChartProps) => {
       onLinkMouseLeave,
       onLinkClick,
       onCanvasClick,
+      onCanvasDoubleClick,
       onDeleteKey,
       onNodeClick,
       onNodeMouseEnter,
@@ -100,7 +102,7 @@ export const FlowChart = (props: IFlowChartProps) => {
   } = props
   const { links, nodes, selected, hovered, offset } = chart
 
-  const canvasCallbacks = { onDragCanvas, onDragCanvasStop, onCanvasClick, onDeleteKey, onCanvasDrop }
+  const canvasCallbacks = { onDragCanvas, onDragCanvasStop, onCanvasClick, onCanvasDoubleClick, onDeleteKey, onCanvasDrop }
   const linkCallbacks = { onLinkMouseEnter, onLinkMouseLeave, onLinkClick }
   const nodeCallbacks = { onDragNode, onNodeClick, onDragNodeStop, onNodeMouseEnter, onNodeMouseLeave, onNodeSizeChange }
   const portCallbacks = { onPortPositionChange, onLinkStart, onLinkMove, onLinkComplete, onLinkCancel }

src/components/FlowChart/utils/grid.ts

@@ -10,6 +10,7 @@ const getEmptyMatrix = (width: number, height: number): number[][] => {
   const matrix = []
 
   for (let i = 0; i < adjustedHeight; i++) {
+    // @ts-ignore
     matrix.push(new Array(adjustedWidth).fill(0))
   }
 

src/components/Link/Link.default.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { generateCurvePath, generateRightAnglePath, generateSmartPath, IConfig, ILink, IOnLinkClick, IOnLinkMouseEnter, IOnLinkMouseLeave, IPort, IPosition } from '../../'
+import { generateCurvePath, generateRightAnglePath, generateSmartPath, IConfig, ILink, IOnLinkClick, IOnLinkMouseEnter, IOnLinkMouseLeave, IPort, IPosition, generateStraightPath, generateLoopBackPath } from '../../'
 
 export interface ILinkDefaultProps {
   config: IConfig
@@ -14,9 +14,10 @@ export interface ILinkDefaultProps {
   isHovered: boolean
   isSelected: boolean
   matrix?: number[][]
+  className?: string
 }
 
-export const LinkDefault = ({
+export function LinkDefault({
   config,
   link,
   startPos,
@@ -29,31 +30,57 @@ export const LinkDefault = ({
   isHovered,
   isSelected,
   matrix,
-}: ILinkDefaultProps) => {
+  className = '',
+}: ILinkDefaultProps) {
 
-  const points = config.smartRouting ?
-    !!toPort && !!matrix ? generateSmartPath(matrix, startPos, endPos, fromPort, toPort) : generateRightAnglePath(startPos, endPos)
-    : generateCurvePath(startPos, endPos)
+  // const points = config.smartRouting ?
+  //   !!toPort && !!matrix ? generateSmartPath(matrix, startPos, endPos, fromPort, toPort) : generateRightAnglePath(startPos, endPos)
+  //   : generateCurvePath(startPos, endPos)
+
+  let points
+  if (link.from.nodeId === link.to.nodeId) {
+    points = generateLoopBackPath(startPos, endPos)
+  } else {
+    points = generateStraightPath(startPos, endPos)
+  }
+
+  const linkColor: string = (fromPort.properties && fromPort.properties.linkColor) || 'cornflowerblue'
 
   return (
-    <svg style={{ overflow: 'visible', position: 'absolute', cursor: 'pointer', left: 0, right: 0 }}>
-      <circle
+    <svg className={className} style={{ overflow: 'visible', position: 'absolute', cursor: 'pointer', left: 0, right: 0 }}>
+      <defs>
+        <marker
+          id="arrow"
+          viewBox="0 0 10 10"
+          refX="9"
+          refY="3"
+          markerWidth="20"
+          markerHeight="20"
+          fill={linkColor}
+          markerUnits="userSpaceOnUse"
+          orient="auto"
+        >
+          <path d="M 0 0 L 10 3 L 0 6 z" />
+        </marker>
+      </defs>
+      {/*<circle
         r="4"
         cx={startPos.x}
         cy={startPos.y}
-        fill="cornflowerblue"
-      />
+        fill={linkColor}
+      />*/}
       {/* Main line */}
       <path
         d={points}
-        stroke="cornflowerblue"
+        stroke={linkColor}
         strokeWidth="3"
         fill="none"
+        markerEnd="url(#arrow)"
       />
       {/* Thick line to make selection easier */}
       <path
         d={points}
-        stroke="cornflowerblue"
+        stroke={linkColor}
         strokeWidth="20"
         fill="none"
         strokeLinecap="round"
@@ -63,14 +90,14 @@ export const LinkDefault = ({
         onClick={(e) => {
           onLinkClick({ config, linkId: link.id })
           e.stopPropagation()
-        } }
+        }}
       />
-      <circle
+      {/*<circle
         r="4"
         cx={endPos.x}
         cy={endPos.y}
-        fill="cornflowerblue"
-      />
+        fill={linkColor}
+      />*/}
     </svg>
   )
 }

src/components/Link/Link.wrapper.tsx

@@ -18,7 +18,7 @@ export interface ILinkWrapperProps {
   matrix?: number[][]
 }
 
-export const LinkWrapper = React.memo(({
+export const LinkWrapper = React.memo(function _LinkWrapper ({
   config,
   Component = LinkDefault,
   link,
@@ -30,7 +30,7 @@ export const LinkWrapper = React.memo(({
   fromNode,
   toNode,
   matrix,
-}: ILinkWrapperProps) => {
+}: ILinkWrapperProps) {
   const startPos = getLinkPosition(fromNode, link.from.portId)
   const fromPort = fromNode.ports[link.from.portId]
 

src/components/Link/utils/generateCurvePath.ts

@@ -2,22 +2,38 @@ import * as PF from 'pathfinding'
 import { IPort, IPosition } from '../../../'
 import { MATRIX_PADDING } from '../../FlowChart/utils/grid'
 
+export const generateStraightPath = (startPos: IPosition, endPos: IPosition): string => {
+  return `M ${startPos.x} ${startPos.y} L ${endPos.x} ${endPos.y}`
+}
+
+const scalar = 200;
+export const generateLoopBackPath = (startPos: IPosition, endPos: IPosition): string => {
+  // working for top to right port
+  // need to generalize
+  return `
+    M ${startPos.x} ${startPos.y}
+    C ${(startPos.x < endPos.x) ? (startPos.x - scalar) : (startPos.x)},${(startPos.y < endPos.y) ? (startPos.y - scalar) : (startPos.y + scalar)}
+      ${endPos.x + scalar},${endPos.y}
+    ${endPos.x},${endPos.y}
+  `
+}
+
 export const generateCurvePath = (startPos: IPosition, endPos: IPosition): string => {
   const width = Math.abs(startPos.x - endPos.x)
   const height = Math.abs(startPos.y - endPos.y)
   const leftToRight = startPos.x < endPos.x
   const topToBottom = startPos.y < endPos.y
   const isHorizontal = width > height
 
-  let start: IPosition
-  let end: IPosition
-  if (isHorizontal) {
-    start = leftToRight ? startPos : endPos
-    end = leftToRight ? endPos : startPos
-  } else {
-    start = topToBottom ? startPos : endPos
-    end = topToBottom ? endPos : startPos
-  }
+  let start: IPosition = startPos
+  let end: IPosition = endPos
+  // if (isHorizontal) {
+  //   start = leftToRight ? startPos : endPos
+  //   end = leftToRight ? endPos : startPos
+  // } else {
+  //   start = topToBottom ? startPos : endPos
+  //   end = topToBottom ? endPos : startPos
+  // }
 
   const curve = isHorizontal ? width / 3 : height / 3
   const curveX = isHorizontal ? curve : 0