New: Enable layout node add/remove

Author: AlexIchenskiy

src/models/graph.ts

@@ -293,6 +293,10 @@ export class Graph<N extends INodeBase, E extends IEdgeBase> extends Subject imp
     this._applyEdgeOffsets();
     this._applyStyle();
 
+    if (this._layout) {
+      this.setNodePositions(this._layout.getPositions(this.getNodes()));
+    }
+
     this._settings?.onMergeData?.(data);
   }
 
@@ -306,6 +310,10 @@ export class Graph<N extends INodeBase, E extends IEdgeBase> extends Subject imp
     this._applyEdgeOffsets();
     this._applyStyle();
 
+    if (this._layout) {
+      this.setNodePositions(this._layout.getPositions(this.getNodes()));
+    }
+
     if (this._settings && this._settings.onRemoveData) {
       const removedData: IGraphObjectsIds = {
         nodeIds: dedupArrays(removedNodesData.nodeIds, removedEdgesData.nodeIds),

src/simulator/layout/layout.ts

@@ -34,7 +34,7 @@ export class LayoutFactory {
       case 'hierarchical':
         return new HierarchicalLayout<N, E>(settings.options as IHierarchicalLayoutOptions);
       default:
-        return null;
+        throw new Error('Incorrect layout type.');
     }
   }
 }

src/simulator/layout/layouts/circular.ts

@@ -29,12 +29,14 @@ export class CircularLayout<N extends INodeBase, E extends IEdgeBase> implements
   getPositions(nodes: INode<N, E>[]): INodePosition[] {
     const angleStep = (2 * Math.PI) / nodes.length;
 
-    return nodes.map((node) => {
+    const positions = nodes.map((node, index) => {
       return {
-        id: node.getId(),
-        x: this._centerX + this._radius * Math.cos(angleStep * node.getId()),
-        y: this._centerY + this._radius * Math.sin(angleStep * node.getId()),
+        id: node.id,
+        x: this._centerX + this._radius * Math.cos(angleStep * index),
+        y: this._centerY + this._radius * Math.sin(angleStep * index),
       };
     });
+
+    return positions;
   }
 }

src/simulator/layout/layouts/grid.ts

@@ -3,40 +3,28 @@ import { INode, INodeBase, INodePosition } from '../../../models/node';
 import { ILayout } from '../layout';
 
 export interface IGridLayoutOptions {
-  fit?: boolean;
-  rows?: number;
-  cols?: number;
   rowGap?: number;
   colGap?: number;
 }
 
 export const DEFAULT_GRID_LAYOUT_OPTIONS: IGridLayoutOptions = {
-  fit: true,
-  rows: 1,
-  cols: 1,
   rowGap: 50,
   colGap: 50,
 };
 
 export class GridLayout<N extends INodeBase, E extends IEdgeBase> implements ILayout<N, E> {
-  private _fit: boolean;
-  private _rows: number;
-  private _cols: number;
   private _rowGap: number;
   private _colGap: number;
 
   constructor(options?: IGridLayoutOptions) {
     const _options = { ...DEFAULT_GRID_LAYOUT_OPTIONS, ...options } as Required<IGridLayoutOptions>;
-    this._fit = _options.fit;
-    this._rows = _options.rows;
-    this._cols = _options.cols;
     this._rowGap = _options.rowGap;
     this._colGap = _options.colGap;
   }
 
   getPositions(nodes: INode<N, E>[]): INodePosition[] {
-    const rows = this._fit ? Math.ceil(Math.sqrt(nodes.length)) : this._rows;
-    const cols = this._fit ? Math.ceil(nodes.length / rows) : this._cols;
+    const rows = Math.ceil(Math.sqrt(nodes.length));
+    const cols = Math.ceil(nodes.length / rows);
 
     const positions: INodePosition[] = [];
     nodes.forEach((node, index) => {

src/views/orb-view.ts

@@ -75,6 +75,7 @@ export class OrbView<N extends INodeBase, E extends IEdgeBase> implements IOrbVi
         ...settings?.simulation,
       },
       layout: {
+        type: 'force',
         ...settings?.layout,
       },
       render: {
@@ -154,37 +155,40 @@ export class OrbView<N extends INodeBase, E extends IEdgeBase> implements IOrbVi
       .on('dblclick.zoom', this.mouseDoubleClicked);
 
     this._simulator = SimulatorFactory.getSimulator();
-    this._simulator.on(SimulatorEventType.SIMULATION_START, () => {
-      // this._isSimulating = true;
-      this._simulationStartedAt = Date.now();
-      this._events.emit(OrbEventType.SIMULATION_START, undefined);
-    });
-    this._simulator.on(SimulatorEventType.SIMULATION_PROGRESS, (data) => {
-      this._graph.setNodePositions(data.nodes);
-      this._events.emit(OrbEventType.SIMULATION_STEP, { progress: data.progress });
-      this.render();
-    });
-    this._simulator.on(SimulatorEventType.SIMULATION_END, (data) => {
-      this._graph.setNodePositions(data.nodes);
-      this.render();
-      // this._isSimulating = false;
-      this._onSimulationEnd?.();
-      this._onSimulationEnd = undefined;
-      this._events.emit(OrbEventType.SIMULATION_END, { durationMs: Date.now() - this._simulationStartedAt });
-    });
-    this._simulator.on(SimulatorEventType.SIMULATION_STEP, (data) => {
-      this._graph.setNodePositions(data.nodes);
-      this.render();
-    });
-    this._simulator.on(SimulatorEventType.NODE_DRAG, (data) => {
-      this._graph.setNodePositions(data.nodes);
-      this.render();
-    });
-    this._simulator.on(SimulatorEventType.SETTINGS_UPDATE, (data) => {
-      this._settings.simulation = data.settings;
-    });
 
-    this._simulator.setSettings(this._settings.simulation);
+    if (this._settings.layout.type === 'force') {
+      this._simulator.on(SimulatorEventType.SIMULATION_START, () => {
+        // this._isSimulating = true;
+        this._simulationStartedAt = Date.now();
+        this._events.emit(OrbEventType.SIMULATION_START, undefined);
+      });
+      this._simulator.on(SimulatorEventType.SIMULATION_PROGRESS, (data) => {
+        this._graph.setNodePositions(data.nodes);
+        this._events.emit(OrbEventType.SIMULATION_STEP, { progress: data.progress });
+        this.render();
+      });
+      this._simulator.on(SimulatorEventType.SIMULATION_END, (data) => {
+        this._graph.setNodePositions(data.nodes);
+        this.render();
+        // this._isSimulating = false;
+        this._onSimulationEnd?.();
+        this._onSimulationEnd = undefined;
+        this._events.emit(OrbEventType.SIMULATION_END, { durationMs: Date.now() - this._simulationStartedAt });
+      });
+      this._simulator.on(SimulatorEventType.SIMULATION_STEP, (data) => {
+        this._graph.setNodePositions(data.nodes);
+        this.render();
+      });
+      this._simulator.on(SimulatorEventType.NODE_DRAG, (data) => {
+        this._graph.setNodePositions(data.nodes);
+        this.render();
+      });
+      this._simulator.on(SimulatorEventType.SETTINGS_UPDATE, (data) => {
+        this._settings.simulation = data.settings;
+      });
+
+      this._simulator.setSettings(this._settings.simulation);
+    }
 
     // TODO(dlozic): Optimize crud operations here.
     this._graph.setSettings({