From a3798b8bfae35cbb42cf400d78c21f1567a8f120 Mon Sep 17 00:00:00 2001
From: Jayasanka <jayasanka.sack@gmail.com>
Date: Mon, 6 May 2019 14:57:53 +0530
Subject: [PATCH] created util to auto arrange nodes in LifeCycle

---
 .../react-app/package.json                    |  1 +
 .../src/components/apps/release/LifeCycle.js  | 38 ++++++++++++-
 .../react-app/src/js/utils/dagre-utils.ts     | 56 +++++++++++++++++++
 3 files changed, 94 insertions(+), 1 deletion(-)
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/utils/dagre-utils.ts

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json
index c8a73873f2b..469943d5b72 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json
@@ -13,6 +13,7 @@
     "acorn": "^6.1.1",
     "antd": "^3.15.0",
     "axios": "^0.18.0",
+    "dagre": "^0.8.4",
     "keymirror": "^0.1.1",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycle.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycle.js
index 55d9140a3b7..fcecc41a771 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycle.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycle.js
@@ -2,9 +2,13 @@ import React from "react";
 import * as SRD from "storm-react-diagrams";
 import "storm-react-diagrams/dist/style.min.css";
 import "./LifeCycle.css";
+import {distributeElements} from "../../../js/utils/dagre-utils.ts";
+
 
 class LifeCycle extends React.Component {
     render() {
+        const nodes = [];
+
         const engine = new SRD.DiagramEngine();
         engine.installDefaultFactories();
 
@@ -24,9 +28,17 @@ class LifeCycle extends React.Component {
         const link1 = port1.link(port2);
         const link2 = port1.link(port3);
 
+
+        nodes.push(createNode("hi"));
+
+        nodes.forEach((node)=>{
+           model.addNode(node);
+        });
+
         model.addAll(node1, node2, node3, link1, link2);
 
-        engine.setDiagramModel(model);
+        let distributedModel = getDistributedModel(engine, model);
+        engine.setDiagramModel(distributedModel);
 
         return (
             <div >
@@ -36,4 +48,28 @@ class LifeCycle extends React.Component {
     }
 }
 
+function getDistributedModel(engine, model) {
+    const serialized = model.serializeDiagram();
+    const distributedSerializedDiagram = distributeElements(serialized);
+
+    //deserialize the model
+    let deSerializedModel = new SRD.DiagramModel();
+    deSerializedModel.deSerializeDiagram(distributedSerializedDiagram, engine);
+    return deSerializedModel;
+}
+
+function createNode(name) {
+    return new SRD.DefaultNodeModel(name, "rgb(0,192,255)");
+}
+
+let count = 0;
+
+function connectNodes(nodeFrom, nodeTo) {
+    //just to get id-like structure
+    count++;
+    const portOut = nodeFrom.addPort(new SRD.DefaultPortModel(true, `${nodeFrom.name}-out-${count}`, "Out"));
+    const portTo = nodeTo.addPort(new SRD.DefaultPortModel(false, `${nodeFrom.name}-to-${count}`, "IN"));
+    return portOut.link(portTo);
+}
+
 export default LifeCycle;
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/utils/dagre-utils.ts b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/utils/dagre-utils.ts
new file mode 100644
index 00000000000..58a006f9a93
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/utils/dagre-utils.ts
@@ -0,0 +1,56 @@
+import * as dagre from "dagre";
+import * as _ from "lodash";
+
+const size = {
+    width: 60,
+    height: 60
+};
+
+export function distributeElements(model) {
+    let clonedModel = _.cloneDeep(model);
+    let nodes = distributeGraph(clonedModel);
+    nodes.forEach(node => {
+        let modelNode = clonedModel.nodes.find(item => item.id === node.id);
+        modelNode.x = node.x - node.width / 2;
+        modelNode.y = node.y - node.height / 2;
+    });
+    return clonedModel;
+}
+
+function distributeGraph(model) {
+    let nodes = mapElements(model);
+    let edges = mapEdges(model);
+    let graph = new dagre.graphlib.Graph();
+    graph.setGraph({});
+    graph.setDefaultEdgeLabel(() => ({}));
+    //add elements to dagre graph
+    nodes.forEach(node => {
+        graph.setNode(node.id, node.metadata);
+    });
+    edges.forEach(edge => {
+        if (edge.from && edge.to) {
+            graph.setEdge(edge.from, edge.to);
+        }
+    });
+    //auto-distribute
+    dagre.layout(graph);
+    return graph.nodes().map(node => graph.node(node));
+}
+
+function mapElements(model) {
+    // dagre compatible format
+    return model.nodes.map(node => ({ id: node.id, metadata: { ...size, id: node.id } }));
+}
+
+function mapEdges(model) {
+    // returns links which connects nodes
+    // we check are there both from and to nodes in the model. Sometimes links can be detached
+    return model.links
+        .map(link => ({
+            from: link.source,
+            to: link.target
+        }))
+        .filter(
+            item => model.nodes.find(node => node.id === item.from) && model.nodes.find(node => node.id === item.to)
+        );
+}
\ No newline at end of file