Fix: Skip unnecessary listener notify on set style

Author: AlexIchenskiy

src/models/edge.ts

@@ -30,6 +30,10 @@ export interface IEdgePosition {
   target: any;
 }
 
+export interface IEdgeSetStyleOptions {
+  isNotifySkipped: boolean;
+}
+
 export enum EdgeLineStyleType {
   SOLID = 'solid',
   DASHED = 'dashed',
@@ -115,10 +119,10 @@ export interface IEdge<N extends INodeBase, E extends IEdgeBase> extends ISubjec
   setData(callback: (edge: IEdge<N, E>) => E): void;
   patchData(data: Partial<E>): void;
   patchData(callback: (edge: IEdge<N, E>) => Partial<E>): void;
-  setStyle(style: IEdgeStyle): void;
-  setStyle(callback: (edge: IEdge<N, E>) => IEdgeStyle): void;
-  patchStyle(style: IEdgeStyle): void;
-  patchStyle(callback: (edge: IEdge<N, E>) => IEdgeStyle): void;
+  setStyle(style: IEdgeStyle, options?: IEdgeSetStyleOptions): void;
+  setStyle(callback: (edge: IEdge<N, E>) => IEdgeStyle, options?: IEdgeSetStyleOptions): void;
+  patchStyle(style: IEdgeStyle, options?: IEdgeSetStyleOptions): void;
+  patchStyle(callback: (edge: IEdge<N, E>) => IEdgeStyle, options?: IEdgeSetStyleOptions): void;
   setState(state: number): void;
   setState(state: IGraphObjectStateParameters): void;
   setState(callback: (edge: IEdge<N, E>) => number): void;
@@ -374,20 +378,22 @@ abstract class Edge<N extends INodeBase, E extends IEdgeBase> extends Subject im
     this.notifyListeners();
   }
 
-  setStyle(style: IEdgeStyle): void;
-  setStyle(callback: (edge: IEdge<N, E>) => IEdgeStyle): void;
-  setStyle(arg: IEdgeStyle | ((edge: IEdge<N, E>) => IEdgeStyle)): void {
+  setStyle(style: IEdgeStyle, options?: IEdgeSetStyleOptions): void;
+  setStyle(callback: (edge: IEdge<N, E>) => IEdgeStyle, options?: IEdgeSetStyleOptions): void;
+  setStyle(arg: IEdgeStyle | ((edge: IEdge<N, E>) => IEdgeStyle), options?: IEdgeSetStyleOptions): void {
     if (isFunction(arg)) {
       this._style = (arg as (edge: IEdge<N, E>) => IEdgeStyle)(this);
     } else {
       this._style = arg as IEdgeStyle;
     }
-    this.notifyListeners();
+    if (!options?.isNotifySkipped) {
+      this.notifyListeners();
+    }
   }
 
-  patchStyle(style: IEdgeStyle): void;
-  patchStyle(callback: (edge: IEdge<N, E>) => IEdgeStyle): void;
-  patchStyle(arg: IEdgeStyle | ((edge: IEdge<N, E>) => IEdgeStyle)) {
+  patchStyle(style: IEdgeStyle, options?: IEdgeSetStyleOptions): void;
+  patchStyle(callback: (edge: IEdge<N, E>) => IEdgeStyle, options?: IEdgeSetStyleOptions): void;
+  patchStyle(arg: IEdgeStyle | ((edge: IEdge<N, E>) => IEdgeStyle), options?: IEdgeSetStyleOptions) {
     let style: IEdgeStyle;
 
     if (isFunction(arg)) {
@@ -398,7 +404,9 @@ abstract class Edge<N extends INodeBase, E extends IEdgeBase> extends Subject im
 
     patchProperties(this._style, style);
 
-    this.notifyListeners();
+    if (!options?.isNotifySkipped) {
+      this.notifyListeners();
+    }
   }
 
   setState(state: number): void;

src/models/graph.ts

@@ -551,7 +551,7 @@ export class Graph<N extends INodeBase, E extends IEdgeBase> extends Subject imp
         },
       );
       edge.setState(existingEdge.getState());
-      edge.setStyle(existingEdge.getStyle());
+      edge.setStyle(existingEdge.getStyle(), { isNotifySkipped: true });
       newEdges.push(edge);
     }
 
@@ -628,7 +628,7 @@ export class Graph<N extends INodeBase, E extends IEdgeBase> extends Subject imp
 
         const style = this._defaultStyle.getNodeStyle(newNodes[i]);
         if (style) {
-          newNodes[i].setStyle(style);
+          newNodes[i].setStyle(style, { isNotifySkipped: true });
           // TODO Add these checks to node property setup
           if (style.imageUrl) {
             styleImageUrls.add(style.imageUrl);
@@ -649,7 +649,7 @@ export class Graph<N extends INodeBase, E extends IEdgeBase> extends Subject imp
 
         const style = this._defaultStyle.getEdgeStyle(newEdges[i]);
         if (style) {
-          newEdges[i].setStyle(style);
+          newEdges[i].setStyle(style, { isNotifySkipped: true });
         }
       }
     }

src/models/node.ts

@@ -33,6 +33,10 @@ export interface INodeSetPositionOptions {
   isNotifySkipped: boolean;
 }
 
+export interface INodeSetStyleOptions {
+  isNotifySkipped: boolean;
+}
+
 export enum NodeShapeType {
   CIRCLE = 'circle',
   DOT = 'dot',
@@ -117,10 +121,10 @@ export interface INode<N extends INodeBase, E extends IEdgeBase> extends ISubjec
     callback: (node: INode<N, E>) => INodeCoordinates | INodePosition,
     options?: INodeSetPositionOptions,
   ): void;
-  setStyle(style: INodeStyle): void;
-  setStyle(callback: (node: INode<N, E>) => INodeStyle): void;
-  patchStyle(style: INodeStyle): void;
-  patchStyle(callback: (node: INode<N, E>) => INodeStyle): void;
+  setStyle(style: INodeStyle, options?: INodeSetPositionOptions): void;
+  setStyle(callback: (node: INode<N, E>) => INodeStyle, options?: INodeSetPositionOptions): void;
+  patchStyle(style: INodeStyle, options?: INodeSetPositionOptions): void;
+  patchStyle(callback: (node: INode<N, E>) => INodeStyle, options?: INodeSetPositionOptions): void;
   setState(state: number): void;
   setState(state: IGraphObjectStateParameters): void;
   setState(callback: (node: INode<N, E>) => number): void;
@@ -478,20 +482,22 @@ export class Node<N extends INodeBase, E extends IEdgeBase> extends Subject impl
     }
   }
 
-  setStyle(style: INodeStyle): void;
-  setStyle(callback: (node: INode<N, E>) => INodeStyle): void;
-  setStyle(arg: INodeStyle | ((node: INode<N, E>) => INodeStyle)): void {
+  setStyle(style: INodeStyle, options?: INodeSetPositionOptions): void;
+  setStyle(callback: (node: INode<N, E>) => INodeStyle, options?: INodeSetPositionOptions): void;
+  setStyle(arg: INodeStyle | ((node: INode<N, E>) => INodeStyle), options?: INodeSetPositionOptions): void {
     if (isFunction(arg)) {
       this._style = (arg as (node: INode<N, E>) => INodeStyle)(this);
     } else {
       this._style = arg as INodeStyle;
     }
-    this.notifyListeners();
+    if (!options?.isNotifySkipped) {
+      this.notifyListeners();
+    }
   }
 
-  patchStyle(style: INodeStyle): void;
-  patchStyle(callback: (node: INode<N, E>) => INodeStyle): void;
-  patchStyle(arg: INodeStyle | ((node: INode<N, E>) => INodeStyle)) {
+  patchStyle(style: INodeStyle, options?: INodeSetPositionOptions): void;
+  patchStyle(callback: (node: INode<N, E>) => INodeStyle, options?: INodeSetPositionOptions): void;
+  patchStyle(arg: INodeStyle | ((node: INode<N, E>) => INodeStyle), options?: INodeSetPositionOptions) {
     let style: INodeStyle;
 
     if (isFunction(arg)) {
@@ -502,7 +508,9 @@ export class Node<N extends INodeBase, E extends IEdgeBase> extends Subject impl
 
     patchProperties(this._style, style);
 
-    this.notifyListeners();
+    if (!options?.isNotifySkipped) {
+      this.notifyListeners();
+    }
   }
 
   setState(state: number): void;