refactor(General): ♻️ Use gforce layout

skupperproject · Jul 2, 2023 · ddc32f4 · ddc32f4
1 parent 74b71af
commit ddc32f4
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 27 deletions.
diff --git a/src/core/components/Graph/Graph.interfaces.ts b/src/core/components/Graph/Graph.interfaces.ts
@@ -9,8 +9,8 @@ export interface GraphNode {
     img?: string;
   };
   style?: Record<string, string>;
-  x: number | null;
-  y: number | null;
+  x: number | undefined;
+  y: number | undefined;
 }
 
 export interface GraphCombo {
@@ -62,6 +62,6 @@ export interface LocalStorageData extends LocalStorageDataSavedPayload {
 }
 
 export interface LocalStorageDataWithNullXY extends Omit<LocalStorageData, 'x' | 'y'> {
-  x: number | null;
-  y: number | null;
+  x: number | undefined;
+  y: number | undefined;
 }
diff --git a/src/core/components/Graph/GraphReactAdaptor.tsx b/src/core/components/Graph/GraphReactAdaptor.tsx
@@ -109,7 +109,7 @@ const GraphReactAdaptor: FC<GraphReactAdaptorProps> = memo(
             modes: DEFAULT_MODE,
             layout: {
               ...layout,
-              center: [Math.floor(width / 2), Math.floor(height / 2)]
+              center: [width / 2, height / 2]
             },
             defaultNode: DEFAULT_NODE_CONFIG,
             defaultCombo: DEFAULT_COMBO_CONFIG,
@@ -315,7 +315,7 @@ const GraphReactAdaptor: FC<GraphReactAdaptorProps> = memo(
             }
           });
 
-          topologyGraph.on('afterlayout', () => {
+          topologyGraph.on('afterrender', () => {
             prevNodesRef.current = nodes;
             prevEdgesRef.current = edges;
             prevCombosRef.current = combos;

diff --git a/src/core/components/Graph/config.ts b/src/core/components/Graph/config.ts
@@ -34,33 +34,21 @@ export const DEFAULT_LAYOUT_COMBO_FORCE_CONFIG: LayoutConfig = {
   nodeSpacing: NODE_SIZE / 3,
   preventOverlap: true,
   comboSpacing: 0,
-  linkDistance: 150,
-  nodeStrength: 10,
-  edgeStrength: 1,
-  collideStrength: 0.3,
-  comboCollideStrength: 0.5
+  linkDistance: 150
 };
 
 export const DEFAULT_LAYOUT_FORCE_CONFIG: LayoutConfig = {
-  type: 'force',
+  type: 'force2',
   nodeSize: NODE_SIZE,
   nodeSpacing: NODE_SIZE,
   preventOverlap: true,
-  linkDistance: 150,
-  alphaMin: 0.07,
-  alpha: 0.1
+  linkDistance: 150
 };
 
 export const DEFAULT_LAYOUT_GFORCE_CONFIG: LayoutConfig = {
   type: 'gForce',
-  nodeSize: NODE_SIZE,
-  nodeSpacing: NODE_SIZE / 3,
-  linkDistance: 150,
-  nodeStrength: 500,
-  edgeStrength: 200,
-  collideStrength: 0.3,
-  preventOverlap: true,
-  gpuEnabled: true
+  gpuEnabled: true,
+  animate: true
 };
 
 export const DEFAULT_NODE_CONFIG: ModelStyle = {

diff --git a/src/core/components/Graph/services.ts b/src/core/components/Graph/services.ts
@@ -31,8 +31,8 @@ export const GraphController = {
     const cache = JSON.parse(localStorage.getItem(prefixLocalStorageItem) || '{}');
     const positions = cache[id] as LocalStorageDataSavedPayload | undefined;
 
-    const x = positions ? positions.x : null;
-    const y = positions ? positions.y : null;
+    const x = positions ? positions.x : undefined;
+    const y = positions ? positions.y : undefined;
 
     return { id, x, y };
   },

diff --git a/src/pages/Topology/Topology.interfaces.ts b/src/pages/Topology/Topology.interfaces.ts
@@ -5,7 +5,7 @@ export interface Entity {
   comboId?: string;
   label: string;
   img: string;
-  x: number | null;
-  y: number | null;
+  x: number | undefined;
+  y: number | undefined;
   nodeConfig?: ModelStyle;
 }