Centering on canvas done. Added more proptypes

Author: mehulmpt

frontend/source/Edge.js

@@ -5,17 +5,24 @@ import PropTypes from 'prop-types'
 export default class Edge extends React.Component {
 	render() {
 
-		const { points } = this.props
+		const { points, edgeStroke, edgeWidth } = this.props
 
 		return <Line
 					points={points}
-					stroke="#ebb2b2"
+					stroke={edgeStroke}
 					tension={1}
-					strokeWidth={3}
+					strokeWidth={edgeWidth}
 				/>
 	}
 }
 
 Edge.propTypes = {
-	points: PropTypes.array.isRequired
+	points: PropTypes.array.isRequired,
+	edgeStroke: PropTypes.string.isRequired,
+	edgeWidth: PropTypes.number.isRequired
+}
+
+Edge.defaultProps = {
+	edgeStroke: "#ebb2b2",
+	edgeWidth: 3
 }

frontend/source/Graph.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import "./styles.css"
-import { Stage, Layer } from 'react-konva'
+import { Stage, Layer, Group } from 'react-konva'
 import Vertex from './Vertex'
 import Edge from './Edge'
 import PropTypes from 'prop-types'
@@ -30,11 +30,11 @@ export default class Graph extends React.Component {
 
 		let mainIndex = 1
 
-		let yCenter = 100
-		let totalYAllowed = yCenter*2
-		let vertexGap = this.props.orientation === 'horizontal' ? 100 : 70
+		let totalYAllowed = props.height
+		let vertexGap = props.orientation === 'horizontal' ? 100 : 70
 
-		console.log(this.state.list)
+		let horizontalMin = 0, horizontalMax = 0
+		let verticalMin = props.height/2, verticalMax = props.height/2
 
 		this.state.list.map(mainVertex => {
 
@@ -45,14 +45,12 @@ export default class Graph extends React.Component {
 			const mainVertexCoordinates = this.state.vertexCoordinates[mainVertex.name]
 
 
-			let childX = 100 + vertexGap*mainIndex
-
-			debugger
+			let childX = vertexGap*mainIndex
 
 			if(mainVertexCoordinates) {
 				// if mainVertex is already set, take partitionLength from it (to keep it at same Y coordinate)
 				// also take x coordinate from the same and add the standard center gap
-				if(this.props.orientation === 'horizontal') {
+				if(props.orientation === 'horizontal') {
 					partitionLength = mainVertexCoordinates.y * 2/(edgesTo.length + 1)
 					childX = mainVertexCoordinates.x + vertexGap
 				} else {
@@ -65,23 +63,31 @@ export default class Graph extends React.Component {
 
 				const childVertex = edgesTo[i]
 
+				const childY = (i + 1)*partitionLength
+
 				if(childVertex in this.state.vertexCoordinates) {
 					// this vertex is already set
 					continue
 				}
 
-				if(this.props.orientation === 'horizontal') {
+				if(props.orientation === 'horizontal') {
+					
 					this.state.vertexCoordinates[childVertex] = {
 						x: childX,
-						y: (i + 1)*partitionLength // move the vertex down as i increases
+						y: childY // move the vertex down as i increases
 					}
 				} else {
 					this.state.vertexCoordinates[childVertex] = {
-						x: (i + 1)*partitionLength, // move the vertex down as i increases
+						x: childY, // move the vertex down as i increases
 						y: childX// move the vertex down as i increases
 					}
 				}
-				
+				verticalMin = childY < verticalMin ? childY : verticalMin
+				verticalMax = childY > verticalMax ? childY : verticalMax
+
+				horizontalMin = childX < horizontalMin ? childX : horizontalMin
+				horizontalMax = childX > horizontalMax ? childX : horizontalMax
+
 			}
 
 			if(edgesTo.length > 1) {
@@ -102,22 +108,30 @@ export default class Graph extends React.Component {
 				flag = true
 				if(this.props.orientation === 'horizontal') {
 					this.state.vertexCoordinates[vertex] = {
-						x: 100,
-						y: yCenter
+						x: 0,
+						y: totalYAllowed/2
 					}
 				} else {
 					this.state.vertexCoordinates[vertex] = {
-						x: yCenter,
-						y: 100
+						x: totalYAllowed/2,
+						y: 0
 					}
 				}
 			}
 		})
 
-		console.log('Coordinates', this.state.vertexCoordinates)
+		console.log(this.state.vertexCoordinates)
+
+		console.log(verticalMin, verticalMax)
+		console.log(horizontalMin, horizontalMax)
+
+		//this.state.horizontalShift = -(horizontalMin + horizontalMax)/2
+		this.state.verticalShift = ((verticalMin + verticalMax) - (props.height))/2
+		this.state.horizontalShift = ((horizontalMin + horizontalMax) - (props.width))/2
+
 	}
 
-	getEdges() {
+	getEdges(edgeProps) {
 		const list = this.state.list
 		const vertexCoordinates = this.state.vertexCoordinates
 
@@ -131,39 +145,44 @@ export default class Graph extends React.Component {
 			for(let i=0;i<edgesTo.length;i++) {
 				const { x, y } = vertexCoordinates[edgesTo[i]]
 				elems.push(<Edge
+							key={vertex + edgesTo[i]}
 							points={[parentX, parentY, (parentX + x)/2, (parentY + y + (Math.floor(Math.random()*20) - 10))/2, x, y]}
+							{...edgeProps}
 						/>)
 			}
 		})
 		return elems
 	}
 
 	render() {
-
+		const { vertexCoordinates, horizontalShift, verticalShift } = this.state
+		
+		const { vertexStroke, vertexStrokeWidth, inactiveVertexFill, activeVertexFill, vertexRadius } = this.props
+		const vertexProps = { vertexStroke, vertexStrokeWidth, inactiveVertexFill, activeVertexFill, vertexRadius }
+		
+		const { edgeStroke, edgeWidth } = this.props
+		const edgeProps = { edgeStroke, edgeWidth }
+		
 		const { vertices, width, height } = this.props
 
-		const vertexCoordinates = this.state.vertexCoordinates
-
 		return (
 		<Stage width={width} height={height}>
 			<Layer>
-				{
-					this.getEdges()
-				}
-			</Layer>
-			<Layer>
-				{vertices.map((vertex, index) => {
-					return <Vertex
-								key={index}
-								x={vertexCoordinates[vertex].x}
-								y={vertexCoordinates[vertex].y}
-								label={vertex}
-								onClick={_ => alert(vertex)}
-							/>
-					})
-				}
-			</Layer>
-			
+				<Group ref={k => this.group = k} offsetX={horizontalShift} offsetY={verticalShift}>
+					{this.getEdges(edgeProps)}
+					{vertices.map((vertex, index) => {
+						return <Vertex
+									key={index}
+									x={vertexCoordinates[vertex].x}
+									y={vertexCoordinates[vertex].y}
+									label={vertex}
+									onClick={_ => alert(vertex)}
+									{...vertexProps}
+								/>
+						})
+					}
+				</Group>
+			</Layer>			
 		</Stage>
 		)
 	}

frontend/source/Vertex.js

@@ -5,12 +5,12 @@ import PropTypes from 'prop-types'
 
 export default class Vertex extends React.Component {
 
-	constructor() {
-		super()
+	constructor(props) {
+		super(props)
 		this.mouseInVertex = this.mouseInVertex.bind(this)
 		this.mouseOutVertex = this.mouseOutVertex.bind(this)
 		this.state = {
-			vertexFill: "white",
+			vertexFill: props.inactiveVertexFill,
 			textOffsetX: 0
 		}
 	}
@@ -24,20 +24,20 @@ export default class Vertex extends React.Component {
 	mouseOutVertex() {
 		document.body.style.cursor = 'default'
 		this.setState({
-			vertexFill: "white"
+			vertexFill: this.props.inactiveVertexFill
 		})
 	}
 
 	mouseInVertex() {
 		document.body.style.cursor = 'pointer'
 		this.setState({
-			vertexFill: "#df6766"
+			vertexFill: this.props.activeVertexFill
 		})
 	}
 
 	render() {
 
-		const { x, y, label, onClick } = this.props
+		const { x, y, label, onClick, vertexStroke, vertexStrokeWidth, vertexRadius  } = this.props
 		const { vertexFill, textOffsetX } = this.state
 
 		return (
@@ -54,10 +54,10 @@ export default class Vertex extends React.Component {
 					onMouseEnter={this.mouseInVertex}
 					onMouseLeave={this.mouseOutVertex}
 					y={y}
-					stroke="#df6766"
-					strokeWidth={3}
+					stroke={vertexStroke}
+					strokeWidth={vertexStrokeWidth}
 					fill={vertexFill}
-					radius={10}
+					radius={vertexRadius}
 				/>
 			</>
 		)
@@ -66,5 +66,18 @@ export default class Vertex extends React.Component {
 
 Vertex.propTypes = {
 	x: PropTypes.number.isRequired,
-	y: PropTypes.number.isRequired
+	y: PropTypes.number.isRequired,
+	vertexStroke: PropTypes.string.isRequired,
+	vertexStrokeWidth: PropTypes.number.isRequired,
+	inactiveVertexFill: PropTypes.string.isRequired,
+	activeVertexFill: PropTypes.string.isRequired,
+	vertexRadius: PropTypes.number.isRequired
+}
+
+Vertex.defaultProps ={
+	vertexStroke: "#df6766",
+	vertexStrokeWidth: 3,
+	inactiveVertexFill: "white",
+	activeVertexFill: "#df6766",
+	vertexRadius: 10
 }

frontend/source/index.js

@@ -24,5 +24,9 @@ ReactDOM.render(<Graph
 	]}
 	orientation="horizontal"
 	width={window.innerWidth}
-	height={500}
+	height={167}
+	vertexStroke="#df6766"
+	edgeStroke="#ebb2b2"
+	edgeWidth={2}
+	vertexRadius={10}
 />, document.getElementById('root'))

frontend/source/styles.css

@@ -1,8 +1,3 @@
-* {
-	margin: 0;
-	padding: 0;
-}
-
 .canvas, .vertices {
 	position: relative
 }