Fix empty position setting and Orbits placement strategy bug (#84)

* Fix empty position setting and Orbits placement strategy bug

* Fix padding between disconnected graph parts

---------

Co-authored-by: Mateusz Łopaciński <lop.mateusz.2001@gmail.com>

Author: kacperklusek

src/components/graphs/GraphComponent.tsx

@@ -1,14 +1,21 @@
-import { Group, Vector } from '@shopify/react-native-skia';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useAnimatedReaction } from 'react-native-reanimated';
-
+import DefaultEdgeArrowRenderer from './arrows/renderers/DefaultEdgeArrowRenderer';
+import EdgeComponent from './edges/EdgeComponent';
+import DefaultCurvedEdgeRenderer from './edges/curved/renderers/DefaultCurvedEdgeRenderer';
+import DefaultStraightEdgeRenderer from './edges/straight/renderers/DefaultStraightEdgeRenderer';
+import VertexComponent from './vertices/VertexComponent';
+import DefaultVertexRenderer from './vertices/renderers/DefaultVertexRenderer';
 import {
   ARROW_COMPONENT_SETTINGS,
   CURVED_EDGE_COMPONENT_SETTINGS,
   LABEL_COMPONENT_SETTINGS,
   STRAIGHT_EDGE_COMPONENT_SETTINGS,
   VERTEX_COMPONENT_SETTINGS
 } from '@/constants/components';
+import {
+  RANDOM_PLACEMENT_SETTING,
+  SHARED_PLACEMENT_SETTINGS,
+  TRIANGLES_PLACEMENT_SETTING
+} from '@/constants/placement';
 import { GraphEventsContextType } from '@/context/graphEvents';
 import { useGraphObserver } from '@/hooks';
 import { EdgeComponentProps } from '@/types/components';
@@ -24,17 +31,14 @@ import {
   DirectedEdgeSettings,
   GraphLayout,
   GraphSettings,
-  GraphSettingsWithDefaults
+  GraphSettingsWithDefaults,
+  RandomPlacementSettings
 } from '@/types/settings';
 import { animateVerticesToFinalPositions } from '@/utils/animations';
 import { placeVertices } from '@/utils/placement';
-
-import DefaultEdgeArrowRenderer from './arrows/renderers/DefaultEdgeArrowRenderer';
-import DefaultCurvedEdgeRenderer from './edges/curved/renderers/DefaultCurvedEdgeRenderer';
-import EdgeComponent from './edges/EdgeComponent';
-import DefaultStraightEdgeRenderer from './edges/straight/renderers/DefaultStraightEdgeRenderer';
-import DefaultVertexRenderer from './vertices/renderers/DefaultVertexRenderer';
-import VertexComponent from './vertices/VertexComponent';
+import { Group, Vector } from '@shopify/react-native-skia';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useAnimatedReaction } from 'react-native-reanimated';
 
 export type GraphComponentPrivateProps<V, E> = {
   boundingRect: AnimatedBoundingRect;
@@ -111,6 +115,10 @@ export default function GraphComponent<
   const memoSettings = useMemo(() => {
     const newSettings: GraphSettingsWithDefaults<V, E> = {
       ...settings,
+      placement: {
+        ...RANDOM_PLACEMENT_SETTING as RandomPlacementSettings,
+        ...settings?.placement
+      },
       components: {
         ...settings?.components,
         vertex: {

src/constants/placement.ts

@@ -5,6 +5,7 @@ export const SHARED_PLACEMENT_SETTINGS = {
 };
 
 export const RANDOM_PLACEMENT_SETTING = {
+  strategy: 'random',
   layoutType: 'triangles' as RandomLayoutType,
   density: 0.5
 };

src/examples/Development.tsx

@@ -2,9 +2,9 @@ import { useEffect } from 'react';
 import { SafeAreaView, StyleSheet, View } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
-import DirectedGraphComponent from '@/components/graphs/DirectedGraphComponent';
 import DefaultEdgeLabelRenderer from '@/components/graphs/labels/renderers/DefaultEdgeLabelRenderer';
-import { DirectedGraph } from '@/models/graphs';
+import UndirectedGraphComponent from '@/components/graphs/UndirectedGraphComponent';
+import { UndirectedGraph } from '@/models/graphs';
 import PannableScalableView from '@/views/PannableScalableView';
 
 const ADDED_COMPONENTS = [
@@ -94,7 +94,9 @@ let idx = 0;
 let mode = 0;
 
 export default function App() {
-  const graph = DirectedGraph.fromData({ vertices: [{ key: 'A', data: 'A' }] });
+  const graph = new UndirectedGraph({
+    vertices: [{ key: 'A', data: 'A' }]
+  });
 
   // TODO - remove this useEffect after testing
   useEffect(() => {
@@ -132,7 +134,7 @@ export default function App() {
         console.error(e);
         return;
       }
-    }, 250);
+    }, 500);
 
     return () => clearInterval(interval);
   }, []);
@@ -142,11 +144,11 @@ export default function App() {
       <GestureHandlerRootView style={styles.gestureHandler}>
         <View style={styles.background}>
           <PannableScalableView objectFit='contain' controls>
-            <DirectedGraphComponent
+            <UndirectedGraphComponent
               graph={graph}
               settings={{
                 placement: {
-                  strategy: 'trees',
+                  strategy: 'orbits',
                   minVertexSpacing: 100
                 },
                 components: {

src/models/graphs/DirectedGraph.ts

@@ -11,14 +11,12 @@ export default class DirectedGraph<V, E> extends Graph<
   DirectedEdge<E, V>,
   DirectedEdgeData<E>
 > {
-  // eslint-disable-next-line no-shadow
-  static fromData<V, E>(data: {
+  constructor(data: {
     vertices: Array<VertexData<V>>;
     edges?: Array<DirectedEdgeData<E>>;
-  }): DirectedGraph<V, E> {
-    const instance = new DirectedGraph<V, E>();
-    instance.insertBatch(data);
-    return instance;
+  }) {
+    super();
+    this.insertBatch(data);
   }
 
   override isDirected(): this is DirectedGraph<V, E> {

src/models/graphs/UndirectedGraph.ts

@@ -11,14 +11,12 @@ export default class UndirectedGraph<V, E> extends Graph<
   UndirectedEdge<E, V>,
   UndirectedEdgeData<E>
 > {
-  // eslint-disable-next-line no-shadow
-  static fromData<V, E>(data: {
+  constructor(data: {
     vertices: Array<VertexData<V>>;
     edges?: Array<UndirectedEdgeData<E>>;
-  }): UndirectedGraph<V, E> {
-    const instance = new UndirectedGraph<V, E>();
-    instance.insertBatch(data);
-    return instance;
+  }) {
+    super();
+    this.insertBatch(data);
   }
 
   override isDirected() {

src/utils/algorithms/graphs.ts

@@ -76,7 +76,7 @@ export const findGraphDiameter = <V, E>(
 
   // Find the farthest vertex from the start vertex and the path
   // between them
-  let farthestDistance = 0;
+  let farthestDistance = -1;
   let farthestVertex: Vertex<V, E> | null = null;
 
   const parents = bfs([startVertex], ({ vertex, depth }) => {

src/utils/placement/shared.ts

@@ -9,6 +9,7 @@ import {
 
 export const calcContainerDimensions = (
   placedVertices: PlacedVerticesPositions,
+  minVertexSpacing: number,
   vertexRadius: number
 ): Dimensions => {
   let minX = 0;
@@ -24,8 +25,8 @@ export const calcContainerDimensions = (
   }
 
   return {
-    width: maxX - minX + 2 * vertexRadius,
-    height: maxY - minY + 2 * vertexRadius
+    width: maxX - minX + 2 * vertexRadius + minVertexSpacing,
+    height: maxY - minY + 2 * vertexRadius + minVertexSpacing
   };
 };
 

src/utils/placement/strategies/orbits.placement.ts

@@ -40,9 +40,11 @@ const placeVerticesOnOrbits = <V, E>(
     // Arrange vertices in sectors
     const arrangedVertices = arrangeVertices(rootVertex);
     // Calculate the layout of the component
+    const minVertexSpacing =
+      settings.minVertexSpacing ?? SHARED_PLACEMENT_SETTINGS.minVertexSpacing;
     const layerRadiuses = calcLayerRadiuses(
       arrangedVertices,
-      settings.minVertexSpacing ?? SHARED_PLACEMENT_SETTINGS.minVertexSpacing,
+      minVertexSpacing,
       vertexRadius,
       settings
     );
@@ -54,6 +56,7 @@ const placeVerticesOnOrbits = <V, E>(
     // Calc container dimensions
     const containerDimensions = calcContainerDimensions(
       placedVerticesPositions,
+      minVertexSpacing,
       vertexRadius
     );
     componentsLayouts.push({

src/utils/placement/strategies/trees.placement.ts

@@ -40,6 +40,7 @@ const placeVerticesOnTrees = <V, E>(
     // Calculate container dimensions
     const containerDimensions = calcContainerDimensions(
       placedVerticesPositions,
+      minVertexSpacing,
       vertexRadius
     );
     componentsLayouts.push({