Merge pull request #74 from OCNS/feat-graph-concentric-restore

Feat: restore graph to initial state when clicked outside

Author: mstimberg

graph.js

@@ -5,6 +5,13 @@ var cy_layout;
 var removed = [];
 var meta_node;
 var meta_node_edges;
+const cy_pan = {
+    x: 0,
+    y: 0
+};
+const cy_zoom = {
+    level: 0
+};
 
 function selectionChanged() {
     removed.toReversed().forEach(eles => eles.restore());
@@ -212,6 +219,33 @@ function unhighlightNode(event) {
     meta_node_edges.restore();
     // Re-add the edges
     cy.elements().forEach(n => n.style("opacity", 1));
+
+    // return graph to initial state
+    const return_graph_to_init = () => {
+        cy.animate(
+            {
+                pan: cy_pan,
+                duration: 1500,
+                easing: 'ease',
+                zoom: {
+                    level: cy_zoom.level,
+                },
+                complete: () => {
+                    console.log("New pan: " + JSON.stringify(cy.pan()) + ", zoom: " + cy.zoom());
+                }
+            });
+        cy.nodes().forEach(n => n.animation({
+            position: n.initial_position,
+            duration: 1500,
+            easing: 'ease',
+            complete: () => {
+                console.log("Init pos: " + n.id() + ": " + n.initial_position.x + ", " + n.initial_position.y);
+                console.log("New pos: " + n.id() + ": " + n.position().x + ", " + n.position().y);
+            }
+        }).play());
+    };
+
+    return_graph_to_init();
     showDetails(null, null);
 }
 
@@ -269,6 +303,7 @@ function newNode(name, description) {
             urls: description["urls"]
         },
         position: position,
+        initial_position: position,
         classes: features.join(" ")
     }
 }
@@ -312,6 +347,39 @@ function create_cy_elements(data, style) {
     meta_node = cy.$("#simulators");
     meta_node_edges = meta_node.connectedEdges();
     cy.on("select tap dbltap", highlightElement);
+    //
+    // if a user drags a node, we want to remember this
+    cy.on("drag", "node", store_positions);
     cy.$("#simulators").select();
     selectionChanged();
+
+    // when the layout stops the first time, we store positions of the nodes
+    cy_layout.one('layoutstop', store_positions);
+}
+
+function store_positions(event) {
+    event_target = event.target;
+
+    // must be a dragged node
+    if (event.type === "drag")
+    {
+        n = event_target;
+        const new_pos = {x: n.renderedPosition().x, y: n.renderedPosition().y};
+        n.initial_position = new_pos;
+
+        console.log("Node was dragged");
+        console.log("New pos: " + n.id() + ": " + n.initial_position.x + ", " + n.initial_position.y);
+    }
+    else {
+        cy.nodes().forEach(n => {const init_pos = {x: n.renderedPosition().x, y: n.renderedPosition().y}; n.initial_position = init_pos;});
+        cy.nodes().forEach(n => {console.log("Init pos: " + n.id() + ": " + n.initial_position.x + ", " + n.initial_position.y);});
+        //
+        // store the initial pan values
+        cy_pan.x = cy.pan().x;
+        cy_pan.y = cy.pan().y;
+
+        // store the initial zoom values
+        cy_zoom.level = cy.zoom();
+        console.log("Initial pan: " + JSON.stringify(cy_pan) + ", zoom: " + JSON.stringify(cy_zoom));
+    }
 }