diff --git a/docs/view-default.md b/docs/view-default.md index fc8f96a..e9abed0 100644 --- a/docs/view-default.md +++ b/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`, diff --git a/src/views/orb-view.ts b/src/views/orb-view.ts index 5d311f8..76b27d9 100644 --- a/src/views/orb-view.ts +++ b/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 { getPosition?(node: INode): IPosition | undefined; simulation: Partial; render: Partial; strategy: Partial; + interaction: Partial; zoomFitTransitionMs: number; isOutOfBoundsDragEnabled: boolean; areCoordinatesRounded: boolean; @@ -90,6 +95,10 @@ export class OrbView implements IOrbVi isDefaultSelectEnabled: true, ...settings?.strategy, }, + interaction: { + isDragEnabled: true, + ...settings?.interaction + } }; this._strategy = new DefaultEventStrategy({ @@ -212,6 +221,16 @@ export class OrbView 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 implements IOrbVi }; dragStarted = (event: D3DragEvent>) => { + // 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 implements IOrbVi }; dragged = (event: D3DragEvent>) => { + // 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 implements IOrbVi }; dragEnded = (event: D3DragEvent>) => { + // If drag is disabled then return + if(!this._settings.interaction.isDragEnabled) { + return; + } + const mousePoint = this.getCanvasMousePosition(event.sourceEvent); const simulationPoint = this._renderer.getSimulationPosition(mousePoint);