New: Add support for enabling and disabling dragging of nodes (fixes #62)

docs/view-default.md

@@ -80,6 +80,10 @@ interface IOrbViewSettings {
     isDefaultSelectEnabled: boolean;
     isDefaultHoverEnabled: boolean;
   };
+  // For graph interaction
+  interaction: {
+    isDragEnabled: boolean;
+  };
   // Other default view parameters
   zoomFitTransitionMs: number;
   isOutOfBoundsDragEnabled: boolean;
@@ -149,6 +153,9 @@ const defaultSettings = {
     isDefaultSelectEnabled: true,
     isDefaultHoverEnabled: true,
   },
+  interaction: {
+    isDragEnabled: true;
+  },
   zoomFitTransitionMs: 200,
   isOutOfBoundsDragEnabled: false,
   areCoordinatesRounded: true,
@@ -312,6 +319,19 @@ orb.events.on(OrbEventType.MOUSE_CLICK, (event) => {
 });
 ```
 
+### Property `interaction`
+
+The optional property `interaction` has one property that you can enable/disable:
+
+* `isDragEnabled` - property controls the dragging behavior within the application. When it is set to `true`, dragging is enabled, allowing users to interact with nodes and edges by dragging them to different positions within the graph. On the other hand, when `isDragEnabled`` is set to false, dragging functionality is disabled, preventing users from moving or repositioning nodes and edges through dragging interactions.
+
+This property provides a straightforward way to enable or disable the dragging feature based on the needs and requirements of your application. By toggling the value of `isDragEnabled`, you can easily control whether users are allowed to interactively reposition elements within the graph by dragging them. e.g:
+
+```typescript
+// Disable default drag interaction
+orb.setSettings({ interaction: { isDragEnabled: false } });
+```
+
 ### Property `simulation`
 
 Fine-grained D3 simulation engine settings. They include `isPhysicsEnabled`, `alpha`,

src/views/orb-view.ts

@@ -23,11 +23,16 @@ import { SimulatorEventType } from '../simulator/shared';
 import { getDefaultGraphStyle } from '../models/style';
 import { isBoolean } from '../utils/type.utils';
 
+export interface IGraphInteractionSettings {
+  isDragEnabled: boolean;
+}
+
 export interface IOrbViewSettings<N extends INodeBase, E extends IEdgeBase> {
   getPosition?(node: INode<N, E>): IPosition | undefined;
   simulation: Partial<ID3SimulatorEngineSettings>;
   render: Partial<IRendererSettings>;
   strategy: Partial<IEventStrategySettings>;
+  interaction: Partial<IGraphInteractionSettings>;
   zoomFitTransitionMs: number;
   isOutOfBoundsDragEnabled: boolean;
   areCoordinatesRounded: boolean;
@@ -90,6 +95,10 @@ export class OrbView<N extends INodeBase, E extends IEdgeBase> implements IOrbVi
         isDefaultSelectEnabled: true,
         ...settings?.strategy,
       },
+      interaction: {
+        isDragEnabled: true,
+        ...settings?.interaction
+      }
     };
 
     this._strategy = new DefaultEventStrategy<N, E>({
@@ -212,6 +221,16 @@ export class OrbView<N extends INodeBase, E extends IEdgeBase> implements IOrbVi
         this._strategy.isSelectEnabled = this._settings.strategy.isDefaultSelectEnabled;
       }
     }
+
+    // Check if interaction settings are provided
+    if (settings.interaction) {
+      // Check if isDragEnabled is a boolean value
+      if (isBoolean(settings.interaction.isDragEnabled)) {
+        // Update the internal isDragEnabled setting based on the provided value
+        this._settings.interaction.isDragEnabled =
+          settings.interaction.isDragEnabled;
+      }
+    }
   }
 
   render(onRendered?: () => void) {
@@ -263,6 +282,11 @@ export class OrbView<N extends INodeBase, E extends IEdgeBase> implements IOrbVi
   };
 
   dragStarted = (event: D3DragEvent<any, any, INode<N, E>>) => {
+    // If drag is disabled then return
+    if(!this._settings.interaction.isDragEnabled) {
+      return;
+    }
+
     const mousePoint = this.getCanvasMousePosition(event.sourceEvent);
     const simulationPoint = this._renderer.getSimulationPosition(mousePoint);
 
@@ -278,6 +302,11 @@ export class OrbView<N extends INodeBase, E extends IEdgeBase> implements IOrbVi
   };
 
   dragged = (event: D3DragEvent<any, any, INode<N, E>>) => {
+    // If drag is disabled then return
+    if(!this._settings.interaction.isDragEnabled) {
+      return;
+    }
+
     const mousePoint = this.getCanvasMousePosition(event.sourceEvent);
     const simulationPoint = this._renderer.getSimulationPosition(mousePoint);
 
@@ -296,6 +325,11 @@ export class OrbView<N extends INodeBase, E extends IEdgeBase> implements IOrbVi
   };
 
   dragEnded = (event: D3DragEvent<any, any, INode<N, E>>) => {
+    // If drag is disabled then return
+    if(!this._settings.interaction.isDragEnabled) {
+      return;
+    }
+
     const mousePoint = this.getCanvasMousePosition(event.sourceEvent);
     const simulationPoint = this._renderer.getSimulationPosition(mousePoint);