New: Added support to set node/edge state using custom options

src/models/edge.ts

@@ -1,5 +1,5 @@
 import { INodeBase, INode } from './node';
-import { GraphObjectState } from './state';
+import { GraphObjectState, ISetStateOptions } from './state';
 import { Color, IPosition, ICircle, getDistanceToLine } from '../common';
 
 const CURVED_CONTROL_POINT_OFFSET_MIN_SIZE = 4;
@@ -76,6 +76,7 @@ export interface IEdge<N extends INodeBase, E extends IEdgeBase> {
   readonly end: any;
   readonly endNode: INode<N, E>;
   readonly type: EdgeType;
+  setState(state: number, options?: ISetStateOptions): void;
   hasStyle(): boolean;
   isSelected(): boolean;
   isHovered(): boolean;
@@ -92,31 +93,45 @@ export interface IEdge<N extends INodeBase, E extends IEdgeBase> {
 }
 
 export class EdgeFactory {
-  static create<N extends INodeBase, E extends IEdgeBase>(data: IEdgeData<N, E>): IEdge<N, E> {
+  static create<N extends INodeBase, E extends IEdgeBase>(
+    data: IEdgeData<N, E>,
+    onStateChange: (
+      graphObject: INode<N, E> | IEdge<N, E>,
+      state: number,
+      options?: ISetStateOptions
+    ) => void
+  ): IEdge<N, E> {
     const type = getEdgeType(data);
     switch (type) {
       case EdgeType.STRAIGHT:
-        return new EdgeStraight(data);
+        return new EdgeStraight(data, onStateChange);
       case EdgeType.LOOPBACK:
-        return new EdgeLoopback(data);
+        return new EdgeLoopback(data, onStateChange);
       case EdgeType.CURVED:
-        return new EdgeCurved(data);
+        return new EdgeCurved(data, onStateChange);
       default:
-        return new EdgeStraight(data);
+        return new EdgeStraight(data, onStateChange);
     }
   }
 
   static copy<N extends INodeBase, E extends IEdgeBase>(
     edge: IEdge<N, E>,
+    onStateChange: (
+      graphObject: INode<N, E> | IEdge<N, E>,
+      state: number,
+      options?: ISetStateOptions
+    ) => void,
     data?: Omit<IEdgeData<N, E>, 'data' | 'startNode' | 'endNode'>,
   ): IEdge<N, E> {
     const newEdge = EdgeFactory.create<N, E>({
       data: edge.data,
       offset: data?.offset !== undefined ? data.offset : edge.offset,
       startNode: edge.startNode,
       endNode: edge.endNode,
-    });
-    newEdge.state = edge.state;
+    },
+    onStateChange
+  );
+    newEdge.setState(edge.state);
     newEdge.style = edge.style;
 
     return newEdge;
@@ -140,15 +155,27 @@ abstract class Edge<N extends INodeBase, E extends IEdgeBase> implements IEdge<N
   public position: IEdgePosition;
 
   private _type: EdgeType = EdgeType.STRAIGHT;
-
-  constructor(data: IEdgeData<N, E>) {
+  private readonly _onStateChange: (
+    graphObject: INode<N, E> | IEdge<N, E>,
+    state: number,
+    options?: ISetStateOptions
+  ) => void;
+
+  constructor(
+    data: IEdgeData<N, E>,
+    onStateChange: (
+      graphObject: INode<N, E> | IEdge<N, E>,
+      state: number,
+      options?: ISetStateOptions
+    ) => void
+  ) {
     this.id = data.data.id;
     this.data = data.data;
     this.offset = data.offset ?? 0;
     this.startNode = data.startNode;
     this.endNode = data.endNode;
     this._type = getEdgeType(data);
-
+    this._onStateChange = onStateChange;
     this.position = { id: this.id, source: this.startNode.id, target: this.endNode.id };
     this.startNode.addEdge(this);
     this.endNode.addEdge(this);
@@ -166,6 +193,14 @@ abstract class Edge<N extends INodeBase, E extends IEdgeBase> implements IEdge<N
     return this.data.end;
   }
 
+  setState(state: number, options?: ISetStateOptions): void {
+    if (options) {
+      this._onStateChange(this, state, options);
+    } else {
+      this.state = state;
+    }
+  }
+
   hasStyle(): boolean {
     return this.style && Object.keys(this.style).length > 0;
   }
@@ -179,7 +214,7 @@ abstract class Edge<N extends INodeBase, E extends IEdgeBase> implements IEdge<N
   }
 
   clearState(): void {
-    this.state = GraphObjectState.NONE;
+    this.setState(GraphObjectState.NONE);
   }
 
   isLoopback(): boolean {

src/models/graph.ts

@@ -5,6 +5,7 @@ import { IGraphStyle } from './style';
 import { ImageHandler } from '../services/images';
 import { getEdgeOffsets } from './topology';
 import { IEntityState, EntityState } from '../utils/entity.utils';
+import { ISetStateOptions } from './state';
 
 export interface IGraphData<N extends INodeBase, E extends IEdgeBase> {
   nodes: N[];
@@ -350,10 +351,53 @@ export class Graph<N extends INodeBase, E extends IEdgeBase> implements IGraph<N
     return nearestEdge;
   }
 
+  // Callback function to be passed to each Node and Edge instance
+  private _onStateChange = (
+    graphObject: INode<N, E> | IEdge<N, E>,
+    state: number,
+    options?: ISetStateOptions
+  ): void => {
+    if (options?.isSingle) {
+      this.setSingleState(graphObject, state);
+    } else if (options?.isToggle) {
+      this.toggleState(graphObject, state);
+    }
+  };
+
+  private toggleState(
+    graphObject: INode<N, E> | IEdge<N, E>,
+    state: number
+  ): void {
+    if (graphObject.state === state) {
+      graphObject.clearState();
+    } else {
+      graphObject.setState(state);
+    }
+  }
+
+  private setSingleState(
+    graphObject: INode<N, E> | IEdge<N, E>,
+    state: number
+  ): void {
+    const type = graphObject instanceof Node ? "node" : "edge";
+    const graphObjects: (INode<N, E> | IEdge<N, E>)[] =
+      type === "node"
+        ? this.getNodes((node) => node.state === state)
+        : this.getEdges((edge) => edge.state === state);
+    graphObjects.forEach((object) => {
+      object.clearState();
+    });
+    graphObject.setState(state);
+  }
+
   private _insertNodes(nodes: N[]) {
     const newNodes: INode<N, E>[] = new Array<INode<N, E>>(nodes.length);
     for (let i = 0; i < nodes.length; i++) {
-      newNodes[i] = NodeFactory.create<N, E>({ data: nodes[i] }, { onLoadedImage: () => this._onLoadedImages?.() });
+      newNodes[i] = NodeFactory.create<N, E>(
+        { data: nodes[i] },
+        this._onStateChange,
+        { onLoadedImage: () => this._onLoadedImages?.() }
+      );
     }
     this._nodes.setMany(newNodes);
   }
@@ -366,11 +410,14 @@ export class Graph<N extends INodeBase, E extends IEdgeBase> implements IGraph<N
 
       if (startNode && endNode) {
         newEdges.push(
-          EdgeFactory.create<N, E>({
-            data: edges[i],
-            startNode,
-            endNode,
-          }),
+          EdgeFactory.create<N, E>(
+            {
+              data: edges[i],
+              startNode,
+              endNode,
+            },
+            this._onStateChange
+          )
         );
       }
     }
@@ -386,7 +433,7 @@ export class Graph<N extends INodeBase, E extends IEdgeBase> implements IGraph<N
         continue;
       }
 
-      newNodes.push(NodeFactory.create<N, E>({ data: nodes[i] }, { onLoadedImage: () => this._onLoadedImages?.() }));
+      newNodes.push(NodeFactory.create<N, E>({ data: nodes[i] }, this._onStateChange, { onLoadedImage: () => this._onLoadedImages?.() }));
     }
     this._nodes.setMany(newNodes);
   }
@@ -405,11 +452,14 @@ export class Graph<N extends INodeBase, E extends IEdgeBase> implements IGraph<N
         const endNode = this.getNodeById(newEdgeData.end);
 
         if (startNode && endNode) {
-          const edge = EdgeFactory.create<N, E>({
-            data: newEdgeData,
-            startNode,
-            endNode,
-          });
+          const edge = EdgeFactory.create<N, E>(
+            {
+              data: newEdgeData,
+              startNode,
+              endNode,
+            },
+            this._onStateChange
+          );
           newEdges.push(edge);
         }
         continue;
@@ -437,8 +487,8 @@ export class Graph<N extends INodeBase, E extends IEdgeBase> implements IGraph<N
         offset: existingEdge.offset,
         startNode,
         endNode,
-      });
-      edge.state = existingEdge.state;
+      }, this._onStateChange);
+      edge.setState(existingEdge.state);
       edge.style = existingEdge.style;
       newEdges.push(edge);
     }
@@ -495,7 +545,7 @@ export class Graph<N extends INodeBase, E extends IEdgeBase> implements IGraph<N
     for (let i = 0; i < edgeOffsets.length; i++) {
       const edge = graphEdges[i];
       const edgeOffset = edgeOffsets[i];
-      updatedEdges[i] = EdgeFactory.copy(edge, { offset: edgeOffset });
+      updatedEdges[i] = EdgeFactory.copy(edge, this._onStateChange, { offset: edgeOffset });
     }
     this._edges.setMany(updatedEdges);
   }

src/models/node.ts

@@ -1,7 +1,7 @@
 import { IEdge, IEdgeBase } from './edge';
 import { Color, IPosition, IRectangle, isPointInRectangle } from '../common';
 import { ImageHandler } from '../services/images';
-import { GraphObjectState } from './state';
+import { GraphObjectState, ISetStateOptions } from './state';
 
 /**
  * Node baseline object with required fields
@@ -71,6 +71,7 @@ export interface INode<N extends INodeBase, E extends IEdgeBase> {
   style: INodeStyle;
   state: number;
   readonly id: any;
+  setState(state: number, options?: ISetStateOptions): void;
   clearPosition(): void;
   getCenter(): IPosition;
   getRadius(): number;
@@ -106,9 +107,14 @@ export interface INodeSettings {
 export class NodeFactory {
   static create<N extends INodeBase, E extends IEdgeBase>(
     data: INodeData<N>,
+    onStateChange: (
+      graphObject: INode<N, E> | IEdge<N, E>,
+      state: number,
+      options?: ISetStateOptions
+    ) => void,
     settings?: Partial<INodeSettings>,
   ): INode<N, E> {
-    return new Node<N, E>(data, settings);
+    return new Node<N, E>(data, onStateChange, settings);
   }
 }
 
@@ -126,12 +132,34 @@ export class Node<N extends INodeBase, E extends IEdgeBase> implements INode<N,
   private readonly _inEdgesById: { [id: number]: IEdge<N, E> } = {};
   private readonly _outEdgesById: { [id: number]: IEdge<N, E> } = {};
   private readonly _onLoadedImage?: () => void;
+  private readonly _onStateChange: (
+    graphObject: INode<N, E> | IEdge<N, E>,
+    state: number,
+    options?: ISetStateOptions
+  ) => void;
 
-  constructor(data: INodeData<N>, settings?: Partial<INodeSettings>) {
+  constructor(
+    data: INodeData<N>,
+    onStateChange: (
+      graphObject: INode<N, E> | IEdge<N, E>,
+      state: number,
+      options?: ISetStateOptions
+    ) => void,
+    settings?: Partial<INodeSettings>
+  ) {
     this.id = data.data.id;
     this.data = data.data;
     this.position = { id: this.id };
     this._onLoadedImage = settings?.onLoadedImage;
+    this._onStateChange = onStateChange;
+  }
+
+  setState(state: number, options?: ISetStateOptions): void {
+    if (options) {
+      this._onStateChange(this, state, options);
+    } else {
+      this.state = state;
+    }
   }
 
   clearPosition() {
@@ -242,7 +270,7 @@ export class Node<N extends INodeBase, E extends IEdgeBase> implements INode<N,
   }
 
   clearState(): void {
-    this.state = GraphObjectState.NONE;
+    this.setState(GraphObjectState.NONE);
   }
 
   getDistanceToBorder(): number {

src/models/state.ts

@@ -4,3 +4,8 @@ export const GraphObjectState = {
   SELECTED: 1,
   HOVERED: 2,
 };
+
+export interface ISetStateOptions {
+  isToggle?: boolean;
+  isSingle?: boolean;
+}

src/models/strategy.ts

@@ -229,24 +229,24 @@ const setNodeState = <N extends INodeBase, E extends IEdgeBase>(
   options?: ISetShapeStateOptions,
 ): void => {
   if (isStateChangeable(node, options)) {
-    node.state = state;
+    node.setState(state);
   }
 
   node.getInEdges().forEach((edge) => {
     if (edge && isStateChangeable(edge, options)) {
-      edge.state = state;
+      edge.setState(state);;
     }
     if (edge.startNode && isStateChangeable(edge.startNode, options)) {
-      edge.startNode.state = state;
+      edge.startNode.setState(state);
     }
   });
 
   node.getOutEdges().forEach((edge) => {
     if (edge && isStateChangeable(edge, options)) {
-      edge.state = state;
+      edge.setState(state);;
     }
     if (edge.endNode && isStateChangeable(edge.endNode, options)) {
-      edge.endNode.state = state;
+      edge.endNode.setState(state);
     }
   });
 };
@@ -257,15 +257,15 @@ const setEdgeState = <N extends INodeBase, E extends IEdgeBase>(
   options?: ISetShapeStateOptions,
 ): void => {
   if (isStateChangeable(edge, options)) {
-    edge.state = state;
+    edge.setState(state);;
   }
 
   if (edge.startNode && isStateChangeable(edge.startNode, options)) {
-    edge.startNode.state = state;
+    edge.startNode.setState(state);
   }
 
   if (edge.endNode && isStateChangeable(edge.endNode, options)) {
-    edge.endNode.state = state;
+    edge.endNode.setState(state);
   }
 };