feat: circular layout

Signed-off-by: WoodenMaiden <yann.pomie@laposte.net>
WoodenMaiden · Jun 26, 2023 · 36add7d · 36add7d
1 parent 18e1af5
commit 36add7d
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 20 deletions.
diff --git a/src/App.js b/src/App.js
@@ -107,20 +107,6 @@ function App() {
     }
   )
 
-  // const layoutOptions = {
-  //   name: 'breadthfirst',
-
-  //   ready: function (e) {
-  //     e.cy.nodes().forEach(function (n) {
-  //         console.log(n)
-  //         n.position(n.position())
-  //     })
-  //   },
-
-  //   stop: function () {
-
-  //   }
-  // }
 
   /*
   | | | | __ _ _ __   __| | | ___ _ __ ___
@@ -172,6 +158,7 @@ function App() {
               data : {
                 id: "No graph found",
               },
+              position: { x: 1000, y: 250 },
               classes: ['ErrorNode']
             }
           ]
@@ -196,6 +183,7 @@ function App() {
           data : {
             id: e.toString(),
           },
+          position: { x: 1000, y: 250 },
           classes: ['ErrorNode']
         }
       ])
@@ -277,11 +265,11 @@ function App() {
                       key={elt.detailsID} detailsID={elt.detailsID}
                       rmHandler={rmHandlerDetails}/>
         )}
-        <CytoscapeComponent stylesheet={cytoscapeStyle} //layout={layoutOptions}
+        <CytoscapeComponent stylesheet={cytoscapeStyle} pan={state.pan.position}
           elements={[ ...state.nodes, ...state.edges ]} wheelSensitivity={0.3}
           style={{width: "100%", height: "100%"}} panningEnabled={true}
           userPanningEnabled={true} userZoomingEnabled={true}
-          minZoom={0.1} maxZoom={2} pan={state.pan.position}
+          minZoom={0.1} maxZoom={2}
           cy={
             (cy) => {
               cy.pan(state.pan.position)

diff --git a/src/cytoscape-style.json b/src/cytoscape-style.json
@@ -41,7 +41,6 @@
     {
       "selector": ".ErrorNode",
       "style": {
-        "background-color": "#a32222",
         "shape": "ellipse",
         "width": "100%",
         "height": "25%",
@@ -50,7 +49,8 @@
         "text-valign": "center",
         "text-halign": "center",
         "text-outline-width": 2,
-        "text-outline-color": "#a32222"
+        "text-outline-color": "#a32222",
+        "background-opacity": 0
       }
     }
   ]
diff --git a/src/lib/draw.js b/src/lib/draw.js
@@ -89,7 +89,10 @@ export default function draw(graph, isFactorized = false, entryNodes = []) {
         })
     })
 
-    return { nodes, edges }
+    return { 
+        nodes: defaultLayout(nodes),
+        edges
+    }
 }
 
 export function focusNodeAndNeighbors(target, elements) {
@@ -109,4 +112,36 @@ export function unFocusNodeAndNeighbors(elements) {
         elt.style('background-opacity', 1);
         elt.style('line-opacity', 1);
     }
-} 
+} 
+
+export function defaultLayout(nodes) {
+
+    console.log(nodes)
+
+
+
+    return [
+        ...nodes.filter(node => node.classes.includes("EntryNode")).map(
+            (node, index, arr) => {
+                const angle = ((index) / arr.length) * 2 * Math.PI
+                console.log(angle)
+                return {
+                    ...node,
+                    position: {
+                        x: Math.cos(angle) * 500 + 1000,
+                        y: Math.sin(angle) * 500 + 550
+                    }
+                }
+            }
+        ),
+        ...nodes.filter(node => !node.classes.includes("EntryNode"))
+    ].map(
+        (node, index, arr) => node.classes.includes("EntryNode")? node: {
+            ...node,
+            position: {
+                x: Math.cos((index / arr.length) * 2 * Math.PI) * 400 + 1000,
+                y: Math.sin((index / arr.length) * 2 * Math.PI) * 400 + 550
+            }
+        }
+    )
+}