Merge branch 'git-graph' into hackape/codestyle-fix

# Conflicts:
#	app/components/Git/GitGraph/actions.js
#	app/components/Git/GitGraph/helpers/hex2rgb.js
#	app/components/Git/GitGraph/state.js

Author: hackape

app/components/Git/GitGraph/GitGraph.jsx

@@ -1,109 +1,161 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import roundVertices from './helpers/roundVertices'
 
-const pathData = () => {
-  return {
+const pdFactory = halfRowHeight => () => {
+  const obj = {
     data: [],
-    moveTo (x, y) {
-      this.data.push(`M${x},${y}`)
-      return this
-    },
-    lineTo (x, y) {
-      this.data.push(`L${x},${y}`)
+    push (x, y, isMerged) {
+      if (this.data.length === 0) {
+        this.data.push([x, y])
+        return this
+      }
+
+      const lastPos = this.data[this.data.length - 1]
+      if (lastPos[0] !== x) {
+        if (isMerged) { // prefer go straight first, then switch lane
+          this.data.push([lastPos[0], lastPos[1] - halfRowHeight])
+          this.data.push([x, y])
+        } else { // prefer switch lane first, then go straight
+          this.data.push([x, lastPos[1] - halfRowHeight])
+          this.data.push([x, y])
+        }
+      } else {
+        this.data.push([x, y])
+      }
+
+      const length = this.data.length
+
+      if (length >= 3 && this.data[length - 1][0] === this.data[length - 2][0] === this.data[length - 3][0]) {
+        const last = this.data.pop()
+        this.data.pop()  // pluck the second to last pos, it's useless
+        this.data.push(last)
+      }
       return this
     },
+
     value () {
-      return this.data.join('')
+      return roundVertices(this.data).reduce((acc, point, index) => {
+        if (index === 0) {
+          acc += `M${point[0]},${point[1]}`
+        } else if (point.length === 2) {
+          acc += `L${point[0]},${point[1]}`
+        } else {
+          const [x_s, y_s] = point[0] // startPoint
+          const [x_c, y_c] = point[1] // ctrlPoint
+          const [x_e, y_e] = point[2] // endPoint
+
+          acc += `L${x_s},${y_s}`
+          acc += `C${x_c},${y_c},${x_e},${y_e},${x_e},${y_e}`
+        }
+
+        return acc
+      }, '')
     }
   }
+
+  return obj
 }
 
 class GitGraph extends Component {
-  constructor (props) {
-    super(props)
-    this.commitsCount = 0
-    if (props.commits && props.commits.length) {
-      this.commitsCount = props.commits.length
-    }
+  shouldComponentUpdate (nextProps) {
+    return (
+      !this.props.commitsState ||
+      this.props.commitsState !== nextProps.commitsState ||
+      this.props.rowHeight !== nextProps.rowHeight ||
+      this.props.colWidth !== nextProps.colWidth
+    )
   }
 
-  shouldComponentUpdate () {
-    if (this.commitsCount === this.props.commits.length) {
-      return false
-    } else {
-      this.commitsCount = this.props.commits.length
-      return true
-    }
-  }
+  posX = (col) => (col + 1) * this.props.colWidth
+  posY = (row) => (row + 0.5) * this.props.rowHeight
 
   render () {
-    const { commits, circleRadius, colWidth, rowHeight } = this.props
-    const posX = col => (col + 1) * colWidth
-    const posY = row => (row + 1) * rowHeight - rowHeight / 2
-    const pathProps = { strokeWidth: 2, fill: 'none' }
+    const orphanage = new Map() // a place to shelter children who haven't found their parents yet
+
+    const state = this.props.commitsState
+    const getCol = state.getCol
+
+    const commits = Array.from(state.commits.values())
+    const { circleRadius, colWidth, rowHeight } = this.props
+    const { posX, posY } = this
+
+    const pd = pdFactory(rowHeight / 2)
 
     let pathsList = []
     let circlesList = []
     let maxCol = 0
+
     commits.forEach((commit, commitIndex) => {
+      if (!commit.isRoot) {
+        // register parent count of this commit
+        orphanage.set(commit.id, commit.parentIds.length)
+      }
       maxCol = Math.max(maxCol, commit.col)
 
       const x = posX(commit.col)
       const y = posY(commitIndex)
 
       // draw path from current commit to its children
       const paths = commit.children.map((child) => {
-        const childIndex = commits.indexOf(child)
-        const pathKey = `p_${commit.id}_${child.id}`
-
-        let d, strokeColor
-        // case 1: child on the same col, draw a straight line
-        if (child.col === commit.col) {
-          d = pathData()
-            .moveTo(x, y)
-            .lineTo(posX(child.col), posY(childIndex))
-            .value()
-          strokeColor = child.branch.color
+        if (orphanage.has(child.id)) {
+          const parentCount = orphanage.get(child.id) - 1
+          if (parentCount <= 0) {
+            orphanage.delete(child.id)
+          } else {
+            orphanage.set(child.id, parentCount)
+          }
         }
-        // case 2: child has one parent, that's a branch out
-        else if (child.parentIds.length === 1) {
-          d = pathData()
-            .moveTo(x, y)
-            .lineTo(posX(child.col), y - rowHeight/2)
-            .lineTo(posX(child.col), posY(childIndex))
-            .value()
-          strokeColor = child.branch.color
+
+        const childIndex = commits.indexOf(child)
+        const pathKey = `p_${commit.shortId}_${child.shortId}`
+
+        let d, strokeColor, pathLaneId, isMerged = false
+        switch (commit.relationToChild(child)) {
+          case 'NORMAL':
+            strokeColor = child.lane.color
+            pathLaneId = child.laneId
+            break
+          case 'DIVERGED':
+            strokeColor = child.lane.color
+            pathLaneId = child.laneId
+            break
+          case 'MERGED':
+            strokeColor = commit.lane.color
+            pathLaneId = commit.laneId
+            isMerged = true
+            break
         }
-        // case 3: child has more than one parent
-        else {
-          // case 3-1: if current commit is base of merge, that's a branch out, too
-          if (commit.isBaseOfMerge(child)) {
-            d = pathData()
-              .moveTo(x, y)
-              .lineTo(posX(child.col), y - rowHeight/2)
-              .lineTo(posX(child.col), posY(childIndex))
-              .value()
-            strokeColor = child.branch.color
-          }
-          // case 3-2: other than that, it's a merge
-          else {
-            d = pathData()
-              .moveTo(x, y)
-              .lineTo(x, posY(childIndex) + rowHeight/2)
-              .lineTo(posX(child.col), posY(childIndex))
-              .value()
-            strokeColor = commit.branch.color
+
+        d = pd().push(x, y)
+
+        for (let i = commitIndex - 1; i >= childIndex; i--) {
+          let colAtIndex = getCol(i, pathLaneId)
+          if (i > childIndex) {
+            d.push(posX(colAtIndex), posY(i))
+          } else {
+            d.push(posX(child.col), posY(childIndex), isMerged)
           }
         }
 
-        return <path d={d} id={pathKey} key={pathKey} stroke={strokeColor} {...pathProps} />
+        d = d.value()
+
+        return (
+          <path d={d}
+            stroke={strokeColor}
+            id={pathKey}
+            key={pathKey}
+            strokeWidth='2'
+            fill='none'
+          />
+        )
       })
 
       const circle = (
         <circle
           key={`c_${commit.id}`}
           cx={x} cy={y} r={circleRadius}
-          fill={commit.branch.color}
+          fill={commit.lane.color}
           strokeWidth='1'
           stroke='#fff'
         />)
@@ -112,6 +164,27 @@ class GitGraph extends Component {
       circlesList = circlesList.concat(circle)
     })
 
+    // render orphan pathes
+    const orphans = Array.from(orphanage.keys()).map(id => state.commits.get(id))
+    const lastIndex = commits.length
+    const orphanPaths = orphans.map((orphan) => {
+      const strokeColor = orphan.lane.color
+      const pathLaneId = orphan.laneId
+      const orphanIndex = orphan.index
+
+      let d = pd()
+      d.push(posX(getCol(lastIndex - 1, pathLaneId)), posY(lastIndex))
+      for (let i = lastIndex - 1; i >= orphanIndex; i--) {
+        d.push(posX(getCol(i, pathLaneId)), posY(i))
+      }
+
+      d = d.value()
+      const pathKey = `future_${orphan.id}`
+      return <path id={pathKey} key={pathKey} d={d} stroke={strokeColor} strokeWidth='2' fill='none' />
+    })
+
+    // end render orphan pathes
+    pathsList = pathsList.concat(orphanPaths)
     const width = colWidth * (maxCol + 2)
     if (typeof this.props.onWidthChange === 'function') this.props.onWidthChange(width)
 
@@ -124,13 +197,12 @@ class GitGraph extends Component {
 }
 
 
-const { string, number, arrayOf, shape, } = PropTypes
-const branchType = shape({ color: string.isRequired })
+const { string, number, arrayOf, shape, object } = PropTypes
+const laneType = shape({ color: string.isRequired })
 
 const commitShapeConfig = {
   id: string.isRequired,
-  col: number.isRequired,
-  branch: branchType,
+  lane: laneType,
 }
 
 const commitType = shape({
@@ -139,7 +211,7 @@ const commitType = shape({
 })
 
 GitGraph.propTypes = {
-  commits: arrayOf(commitType).isRequired,
+  commitsState: object.isRequired,
   circleRadius: number.isRequired,
   colWidth: number.isRequired,
   rowHeight: number.isRequired,