Add horizontal layout engine - issue #135

__tests__/utilities/layout-engine/layout-engine-config.test.js

@@ -1,18 +1,18 @@
-
 // @flow
-import * as React from 'react';
+import * as React from "react";
 
-import { LayoutEngines } from '../../../src/utilities/layout-engine/layout-engine-config';
+import { LayoutEngines } from "../../../src/utilities/layout-engine/layout-engine-config";
 
-describe('LayoutEngineConfig', () => {
+describe("LayoutEngineConfig", () => {
   let output = null;
 
-  describe('class', () => {
-    it('is defined', () => {
+  describe("class", () => {
+    it("is defined", () => {
       expect(LayoutEngines).toBeDefined();
       expect(LayoutEngines.None).toBeDefined();
       expect(LayoutEngines.SnapToGrid).toBeDefined();
       expect(LayoutEngines.VerticalTree).toBeDefined();
+      expect(LayoutEngines.HorizontalTree).toBeDefined();
     });
   });
 });

src/utilities/layout-engine/horizontal-tree.js

@@ -0,0 +1,66 @@
+// @flow
+/*
+  Copyright(c) 2018 Uber Technologies, Inc.
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import * as dagre from "dagre";
+import { type INode } from "../../components/node";
+import SnapToGrid from "./snap-to-grid";
+
+class HorizontalTree extends SnapToGrid {
+  adjustNodes(nodes: INode[], nodesMap?: any): INode[] {
+    const { nodeKey, nodeSize } = this.graphViewProps;
+    const size = (nodeSize || 1) * 1.5;
+    const g = new dagre.graphlib.Graph();
+    g.setGraph({ rankdir: "LR" });
+    g.setDefaultEdgeLabel(() => ({}));
+
+    nodes.forEach(node => {
+      if (!nodesMap) {
+        return;
+      }
+      const nodeId = node[nodeKey];
+      const nodeKeyId = `key-${nodeId}`;
+      const nodesMapNode = nodesMap[nodeKeyId];
+
+      // prevent disconnected nodes from being part of the graph
+      if (
+        nodesMapNode.incomingEdges.length === 0 &&
+        nodesMapNode.outgoingEdges.length === 0
+      ) {
+        return;
+      }
+      g.setNode(nodeKeyId, { width: size, height: size });
+      nodesMapNode.outgoingEdges.forEach(edge => {
+        g.setEdge(nodeKeyId, `key-${edge.target}`);
+      });
+    });
+
+    dagre.layout(g);
+
+    g.nodes().forEach(gNodeId => {
+      const nodesMapNode = nodesMap[gNodeId];
+
+      // gNode is the dagre representation
+      const gNode = g.node(gNodeId);
+
+      nodesMapNode.node.x = gNode.x;
+      nodesMapNode.node.y = gNode.y;
+    });
+    return nodes;
+  }
+}
+
+export default HorizontalTree;

src/utilities/layout-engine/layout-engine-config.js

@@ -15,15 +15,16 @@
   limitations under the License.
 */
 
-import None from './none';
-import SnapToGrid from './snap-to-grid';
-import VerticalTree from './vertical-tree';
+import None from "./none";
+import SnapToGrid from "./snap-to-grid";
+import VerticalTree from "./vertical-tree";
+import HorizontalTree from "./horizontal-tree";
 
-
-export type LayoutEngine = None | SnapToGrid | VerticalTree;
+export type LayoutEngine = None | SnapToGrid | VerticalTree | HorizontalTree;
 
 export const LayoutEngines = {
   None,
   SnapToGrid,
-  VerticalTree
+  VerticalTree,
+  HorizontalTree
 };

src/utilities/layout-engine/layout-engine-types.js

@@ -1,3 +1,7 @@
 // @flow
 
-export type LayoutEngineType = 'None' | 'SnapToGrid' | 'VerticalTree';
+export type LayoutEngineType =
+  | "None"
+  | "SnapToGrid"
+  | "VerticalTree"
+  | "HorizontalTree";