Skip to content

Commit f273ad8

Browse files
AlexIchenskiyAlexIchenskiy
committed
Fix: remove unnecessary rerender on state change
1 parent 88c3006 commit f273ad8

File tree

4 files changed

+42
-30
lines changed

4 files changed

+42
-30
lines changed

‎src/models/edge.ts

+16-9
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,10 @@ export interface IEdgeSetStyleOptions {
3434
isNotifySkipped: boolean;
3535
}
3636

37+
export interface IEdgeSetStateOptions {
38+
isNotifySkipped: boolean;
39+
}
40+
3741
export enum EdgeLineStyleType {
3842
SOLID = 'solid',
3943
DASHED = 'dashed',
@@ -123,10 +127,10 @@ export interface IEdge<N extends INodeBase, E extends IEdgeBase> extends ISubjec
123127
setStyle(callback: (edge: IEdge<N, E>) => IEdgeStyle, options?: IEdgeSetStyleOptions): void;
124128
patchStyle(style: IEdgeStyle, options?: IEdgeSetStyleOptions): void;
125129
patchStyle(callback: (edge: IEdge<N, E>) => IEdgeStyle, options?: IEdgeSetStyleOptions): void;
126-
setState(state: number): void;
127-
setState(state: IGraphObjectStateParameters): void;
128-
setState(callback: (edge: IEdge<N, E>) => number): void;
129-
setState(callback: (edge: IEdge<N, E>) => IGraphObjectStateParameters): void;
130+
setState(state: number, options?: IEdgeSetStateOptions): void;
131+
setState(state: IGraphObjectStateParameters, options?: IEdgeSetStateOptions): void;
132+
setState(callback: (edge: IEdge<N, E>) => number, options?: IEdgeSetStateOptions): void;
133+
setState(callback: (edge: IEdge<N, E>) => IGraphObjectStateParameters, options?: IEdgeSetStateOptions): void;
130134
}
131135

132136
export interface IEdgeSettings {
@@ -409,16 +413,17 @@ abstract class Edge<N extends INodeBase, E extends IEdgeBase> extends Subject im
409413
}
410414
}
411415

412-
setState(state: number): void;
413-
setState(state: IGraphObjectStateParameters): void;
414-
setState(callback: (edge: IEdge<N, E>) => number): void;
415-
setState(callback: (edge: IEdge<N, E>) => IGraphObjectStateParameters): void;
416+
setState(state: number, options?: IEdgeSetStateOptions): void;
417+
setState(state: IGraphObjectStateParameters, options?: IEdgeSetStateOptions): void;
418+
setState(callback: (edge: IEdge<N, E>) => number, options?: IEdgeSetStateOptions): void;
419+
setState(callback: (edge: IEdge<N, E>) => IGraphObjectStateParameters, options?: IEdgeSetStateOptions): void;
416420
setState(
417421
arg:
418422
| number
419423
| IGraphObjectStateParameters
420424
| ((edge: IEdge<N, E>) => number)
421425
| ((edge: IEdge<N, E>) => IGraphObjectStateParameters),
426+
options?: IEdgeSetStateOptions,
422427
): void {
423428
let result: number | IGraphObjectStateParameters;
424429

@@ -446,7 +451,9 @@ abstract class Edge<N extends INodeBase, E extends IEdgeBase> extends Subject im
446451
}
447452
}
448453

449-
this.notifyListeners();
454+
if (!options?.isNotifySkipped) {
455+
this.notifyListeners();
456+
}
450457
}
451458

452459
private _handleState(state: number, options?: Partial<IGraphObjectStateOptions>): number {

‎src/models/graph.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -550,7 +550,7 @@ export class Graph<N extends INodeBase, E extends IEdgeBase> extends Subject imp
550550
listeners: [this._update],
551551
},
552552
);
553-
edge.setState(existingEdge.getState());
553+
edge.setState(existingEdge.getState(), { isNotifySkipped: true });
554554
edge.setStyle(existingEdge.getStyle(), { isNotifySkipped: true });
555555
newEdges.push(edge);
556556
}

‎src/models/node.ts

+17-12
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,10 @@ export interface INodeSetStyleOptions {
3737
isNotifySkipped: boolean;
3838
}
3939

40+
export interface INodeSetStateOptions {
41+
isNotifySkipped: boolean;
42+
}
43+
4044
export enum NodeShapeType {
4145
CIRCLE = 'circle',
4246
DOT = 'dot',
@@ -125,10 +129,10 @@ export interface INode<N extends INodeBase, E extends IEdgeBase> extends ISubjec
125129
setStyle(callback: (node: INode<N, E>) => INodeStyle, options?: INodeSetPositionOptions): void;
126130
patchStyle(style: INodeStyle, options?: INodeSetPositionOptions): void;
127131
patchStyle(callback: (node: INode<N, E>) => INodeStyle, options?: INodeSetPositionOptions): void;
128-
setState(state: number): void;
129-
setState(state: IGraphObjectStateParameters): void;
130-
setState(callback: (node: INode<N, E>) => number): void;
131-
setState(callback: (node: INode<N, E>) => IGraphObjectStateParameters): void;
132+
setState(state: number, options?: INodeSetStateOptions): void;
133+
setState(state: IGraphObjectStateParameters, options?: INodeSetStateOptions): void;
134+
setState(callback: (node: INode<N, E>) => number, options?: INodeSetStateOptions): void;
135+
setState(callback: (node: INode<N, E>) => IGraphObjectStateParameters, options?: INodeSetStateOptions): void;
132136
}
133137

134138
// TODO: Dirty solution: Find another way to listen for global images, maybe through
@@ -303,9 +307,7 @@ export class Node<N extends INodeBase, E extends IEdgeBase> extends Subject impl
303307
}
304308

305309
clearState(): void {
306-
this.setState(GraphObjectState.NONE);
307-
308-
this.notifyListeners();
310+
this.setState(GraphObjectState.NONE, { isNotifySkipped: true });
309311
}
310312

311313
getDistanceToBorder(): number {
@@ -513,16 +515,17 @@ export class Node<N extends INodeBase, E extends IEdgeBase> extends Subject impl
513515
}
514516
}
515517

516-
setState(state: number): void;
517-
setState(state: IGraphObjectStateParameters): void;
518-
setState(callback: (node: INode<N, E>) => number): void;
519-
setState(callback: (node: INode<N, E>) => IGraphObjectStateParameters): void;
518+
setState(state: number, options?: INodeSetStateOptions): void;
519+
setState(state: IGraphObjectStateParameters, options?: INodeSetStateOptions): void;
520+
setState(callback: (node: INode<N, E>) => number, options?: INodeSetStateOptions): void;
521+
setState(callback: (node: INode<N, E>) => IGraphObjectStateParameters, options?: INodeSetStateOptions): void;
520522
setState(
521523
arg:
522524
| number
523525
| IGraphObjectStateParameters
524526
| ((node: INode<N, E>) => number)
525527
| ((node: INode<N, E>) => IGraphObjectStateParameters),
528+
options?: INodeSetStateOptions,
526529
): void {
527530
let result: number | IGraphObjectStateParameters;
528531

@@ -550,7 +553,9 @@ export class Node<N extends INodeBase, E extends IEdgeBase> extends Subject impl
550553
}
551554
}
552555

553-
this.notifyListeners();
556+
if (!options?.isNotifySkipped) {
557+
this.notifyListeners();
558+
}
554559
}
555560

556561
protected _isPointInBoundingBox(point: IPosition): boolean {

‎src/models/strategy.ts

+8-8
Original file line numberDiff line numberDiff line change
@@ -229,24 +229,24 @@ const setNodeState = <N extends INodeBase, E extends IEdgeBase>(
229229
options?: ISetShapeStateOptions,
230230
): void => {
231231
if (isStateChangeable(node, options)) {
232-
node.setState(state);
232+
node.setState(state, { isNotifySkipped: true });
233233
}
234234

235235
node.getInEdges().forEach((edge) => {
236236
if (edge && isStateChangeable(edge, options)) {
237-
edge.setState(state);
237+
edge.setState(state, { isNotifySkipped: true });
238238
}
239239
if (edge.startNode && isStateChangeable(edge.startNode, options)) {
240-
edge.startNode.setState(state);
240+
edge.startNode.setState(state, { isNotifySkipped: true });
241241
}
242242
});
243243

244244
node.getOutEdges().forEach((edge) => {
245245
if (edge && isStateChangeable(edge, options)) {
246-
edge.setState(state);
246+
edge.setState(state, { isNotifySkipped: true });
247247
}
248248
if (edge.endNode && isStateChangeable(edge.endNode, options)) {
249-
edge.endNode.setState(state);
249+
edge.endNode.setState(state, { isNotifySkipped: true });
250250
}
251251
});
252252
};
@@ -257,15 +257,15 @@ const setEdgeState = <N extends INodeBase, E extends IEdgeBase>(
257257
options?: ISetShapeStateOptions,
258258
): void => {
259259
if (isStateChangeable(edge, options)) {
260-
edge.setState(state);
260+
edge.setState(state, { isNotifySkipped: true });
261261
}
262262

263263
if (edge.startNode && isStateChangeable(edge.startNode, options)) {
264-
edge.startNode.setState(state);
264+
edge.startNode.setState(state, { isNotifySkipped: true });
265265
}
266266

267267
if (edge.endNode && isStateChangeable(edge.endNode, options)) {
268-
edge.endNode.setState(state);
268+
edge.endNode.setState(state, { isNotifySkipped: true });
269269
}
270270
};
271271

0 commit comments

Comments
 (0)