Refactoring structure

src/App.js

@@ -2,7 +2,6 @@ import './css/App.css';
 
 import React, { Component } from 'react';
 import Container from './components/Container';
-import Positioning from './services/Positioning';
 
 
 import mockEntities from './fixtures/EntitiesMock';
@@ -22,7 +21,6 @@ class App extends Component {
 
  componentWillMount() {
  this.fetchEntity()
- .then(root => Positioning.tree(root))
  .then(root => this.hydrateObjectives(root));
  }
 

src/components/Container.js

@@ -1,152 +1,46 @@
 import React, { Component } from 'react';
 import Viewport from './Viewport';
+import Positioning from '../services/Positioning';
 
 class Container extends Component {
  constructor(props) {
  super(props);
 
  this.state = {
- nodes: [],
- edges: [],
- depthMap: {},
- bounds: { x: 0, y: 0 },
- offset: { x: 0, y: 0 }
+ style: {
+ width: window.innerWidth,
+ height: window.innerHeight
+ },
+ viewportStyle: {
+ width: window.innerHeight - 400,
+ height: window.innerHeight - 400 
+ },
+ nodes: []
  };
  }
 
- componentDidMount() {
- this.updateBounds();
- this.updateGraph();
- }
-
- updateBounds() {
- this.setState({
- bounds: {
- x: window.innerWidth,
- y: window.innerHeight
- }
- });
- }
-
- updateGraph() {
- const root = this.props.root;
-
- this.hydrateNodes(root, null, 0);
-
- const depthMap = this.getDepthMap();
- const edges = this.getEdges(depthMap);
-
- this.setState({ edges, depthMap });
-
- /*
- root.objectives.forEach( objective => {
- nodes.push({
- id: `objective__${objective.id}`,
- label: objective.title
- type: 'objective',
- depth: depth
- });
- });
- */
- }
-
- hydrateNodes(root, parentId, depth) {
- const nodeId = `${root.name}__${root.id}`;
-
- this.pushNode({
- id: nodeId,
- parentId: parentId,
- label: root.name,
- type: root.name,
- depth: depth,
- position: root.position
- });
-
- if (! root.child_entities) root.child_entities = [];
- root.child_entities.forEach(child => this.hydrateNodes(child, nodeId, depth + 1));
- }
-
- getEdges(depthMap = null) {
- if( ! depthMap )
- depthMap = this.state;
-
- const edges = [];
- Object.keys(depthMap).forEach(depth => {
- // eslint-disable-next-line
- depth = parseInt(depth); 
-
- if( depth === 0 )
- return;
-
- const parentLevel = depthMap[depth - 1];
- const currentLevel = depthMap[depth];
-
- currentLevel.forEach( currentLevelNode => {
- const matchedNodes = parentLevel.filter( parentLevelNode => parentLevelNode.id === currentLevelNode.parentId );
-
- matchedNodes.forEach( parentMatch => {
- edges.push({
- parent: parentMatch.id,
- child: currentLevelNode.id
- });
- });
- });
- });
-
- return edges;
- }
-
- pushNode(node) {
- const nodes = this.state.nodes;
- nodes.push(node);
+ componentWillMount() {
+ let nodes = this.hydrateNodes(this.props.root, null);
+ nodes = [Positioning.tree(nodes, this.state.viewportStyle)];
  this.setState({ nodes });
  }
 
- pushEdge(edge) {
- const edges = this.state.edges;
- edges.push(edge);
- this.setState({ edges });
- }
+ hydrateNodes(root, depth, removeId) {
+ root.depth = depth;
+ root.children = root.child_entities || [];
 
- updateOffset(x, y) {
- this.setState({
- offsets: { x, y }
- });
- }
-
- getDepthMap() {
- const { nodes } = this.state;
-
- const nodesSorted = nodes.sort((a, b) => a.depth - b.depth);
- const depthMap = nodesSorted.reduce((depthMap, node) => {
- if( ! depthMap[node.depth] )
- depthMap[node.depth] = [];
-
- depthMap[node.depth].push(node);
+ root.children.forEach(child => this.hydrateNodes(child, depth + 1));
 
- return depthMap;
- }, {} );
-
- return depthMap;
+ return root;
  }
 
  render() {
- const { bounds, offset, nodes, edges, depthMap } = this.state;
-
- const style = {
- width: bounds.x,
- height: bounds.y,
- left: offset.x,
- top: offset.y
- };
 
  return (
- <div className="container" style={style}>
+ <div className="container" style={this.state.style}>
  <Viewport
- nodes={nodes}
- edges={edges}
- depthMap={depthMap}
- updateOffset={this.updateOffset.bind(this)}
+ nodes={this.state.nodes}
+ style={this.state.viewportStyle}
  />
  </div>
  );

src/components/Viewport.js

@@ -6,62 +6,45 @@ class Viewport extends Component {
 
  this.state = { domNodes: [] };
  }
-
- componentDidUpdate(prevProps) {
- if( ! prevProps.edges.length )
-  this.createNodesForDom();
+ 
+ componentWillMount(prevProps) {
+ const domNodes = this.createNodesForDom(this.props.nodes);
+ this.setState({ domNodes });
  }
 
- createNodesForDom() {
- const domNodes = [];
- const { depthMap, edges } = this.props;
-console.log(this.props);
- const rows = {};
-
- Object.keys(depthMap).forEach(depth => {
- let rowWidth = 0;
- let rowHeight = 0;
-
- depthMap[depth].forEach((node, xDepth) => {
- const style = {
- top: depth * 100,
- left: rowWidth + xDepth * 100
- };
+ createNodesForDom(nodes) {
+ if (nodes.length == 0) return [];
+ console.log(nodes)
 
- rowWidth += node.label.length * 6;
+ let node = nodes.shift();
+ let colors = [
+ 'white',
+ 'blue',
+ 'red'
+ ]
 
- domNodes.push({
- style: style,
- node: node,
- width: node.label.length * 6
- });
- });
+ node.style = {
+ top: node.position.offsetY,
+ left: node.position.offsetX,
+ 'background-color': colors[node.position.depth]
+ };
 
- rows[depth] = {
- width: rowWidth,
- nodeCount: depthMap[depth].length
- };
- });
-
- domNodes[0].style.left = (rows[1].nodeCount * 100 + rows[1].width) / 2 - domNodes[0].width;
-
-
- this.setState({ domNodes });
+ return [node, ...this.createNodesForDom(nodes), ...this.createNodesForDom(node.children)];
  }
 
  render() {
- // const nodes = this.createNodesForDom();
  const { domNodes } = this.state;
+ const viewportStyle = this.props.style;
 
  return (
- <div className="viewport">
- { domNodes.map( o => 
+ <div className="viewport" style={viewportStyle}>
+ { domNodes.map( (o,i) => 
  <div 
- className={`node node--${o.node.type}`}
+ className={`node node--${o.type}`}
  style={o.style}
- key={o.node.id}
+ key={o.id}
  >
- { o.node.label }
+ { o.name || o.title }
  </div>
  ) }
  </div>

src/css/App.css

@@ -1,15 +1,23 @@
 .container {
- position: absolute;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.viewport {
+ position: relative;
 }
 
 .node {
- border-radius: 500px;
- width: auto;
- height: auto;
- max-width: 100px;
+ border-radius: 100%;
+ width: 100px;
+ height: 100px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
  border: 1px solid #000;
  position: absolute;
- text-align: center;
  padding: 5px;
  font-family: monospace;
  font-size: 12px;

src/services/Positioning.js

@@ -1,34 +1,63 @@
-const DEFAULTS = {
- canvas: {
- height: 1000,
- width: 1000
- },
- nodes: {
- width: 100,
- height: 100,
- }
-}
-
 class Positioning {
 
- updateTreePosition(root, levelNodesCount = 1) {
- let nodes_width = DEFAULTS.nodes.width * levelNodesCount;
- let in_between = Math.floor((DEFAULTS.canvas.height - nodes_width) / levelNodesCount);
-
+ updateTreePosition(root, parent, depthNodesCount = 0, index = 0, depth = 0) {
  root.position = {
- width: DEFAULTS.nodes.width,
- in_between: in_between
+ offsetX: (!depth) ? this.canvas.width / 2 : this.getOffsetX(parent, this.canvas.width, depthNodesCount, index),
+ offsetY: (!depth) ? this.canvas.height / 2 : this.getOffsetY(parent, this.canvas.height, depthNodesCount, index),
+ depth: depth
  }
 
  if (! root.child_entities) return root;
 
- levelNodesCount = root.child_entities.length;
- root.child_entities.forEach(child => this.updateTreePosition(child, levelNodesCount));
+ depthNodesCount = root.child_entities.length;
+ depth++;
+
+ root.child_entities.map( (child, index) => this.updateTreePosition(child, root, depthNodesCount, index, depth));
 
  return root;
  }
+
+
+ getOffsetX(parent, canvasWidth, depthNodesCount, index) {
+ const { startRange, endRange } = this.getRanges(parent, index);
+ let pos = 360 / depthNodesCount * index;
+ let angle = Math.cos(pos / 180 * Math.PI);
+
+ return parent.position.offsetX + ( Math.cos((startRange + index * angle) * (Math.PI / 180)) * this.edgeLength );
+
+ return (angle * this.edgeLength) + parent.position.offsetX;
+ }
+
+ getOffsetY(parent, canvasHeight, depthNodesCount, index) {
+ const { startRange, endRange } = this.getRanges(parent, index);
+ let pos = 360 / depthNodesCount * index;
+ let angle = Math.sin(pos / 180 * Math.PI)
+
+ return parent.position.offsetX + ( Math.sin((startRange + index * angle) * (Math.PI / 180)) * this.edgeLength );
+
+ return (angle * this.edgeLength) + parent.position.offsetY;
+ }
+
+ getRanges(parent, index) {
+ const childLength = parent.child_entities.length;
+ const chunk = 360 / childLength;
+ let range = chunk * 2;
+
+ const t = (index + 1) / childLength;
+ let startRange = (1 - t) * 360;
+ let endRange = t * 360;
+
+ if( startRange === endRange )
+ startRange = startRange - range;
+
+ range = Math.abs(endRange - startRange);
+
+ return { startRange, endRange, range };
+ }
 
- tree(root) {
+ tree(root, canvas) {
+ this.canvas = canvas;
+ this.edgeLength = 300;
  return this.updateTreePosition(root);
  }
 }