perf(editor): Improve canvas rendering performance (#8022)

## Summary
- Refactor usage of `setSuspendDrawing`, removing it from loops and only
calling it after batch operations are done
- Batch adding of nodes to improve copy/paste and workflow load
performance
- Cache i18n calls
- Debounce connections dragging handler if there are more than 20 nodes


## Related tickets and issues
> Include links to **Linear ticket** or Github issue or Community forum
post. Important in order to close *automatically* and provide context to
reviewers.
- https://community.n8n.io/t/slow-ui-in-big-scenarios/33830/8

---------

Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>
This commit is contained in:
oleg
2023-12-14 12:01:00 +01:00
committed by GitHub
parent e3c363d72c
commit b780436a6b
7 changed files with 97 additions and 70 deletions

View File

@@ -70,7 +70,6 @@ export const register = () => {
container.appendChild(unconnectedGroup);
container.appendChild(defaultGroup);
endpointInstance.setupOverlays();
endpointInstance.setVisible(false);
return container;

View File

@@ -33,11 +33,6 @@ export class N8nAddInputEndpoint extends EndpointRepresentation<ComputedN8nAddIn
type = N8nAddInputEndpoint.type;
setupOverlays() {
this.endpoint.instance.setSuspendDrawing(true);
this.endpoint.instance.setSuspendDrawing(false);
}
bindEvents() {
this.instance.bind(EVENT_ENDPOINT_CLICK, this.fireClickEvent);
}

View File

@@ -49,7 +49,6 @@ export class N8nPlusEndpoint extends EndpointRepresentation<ComputedN8nPlusEndpo
setupOverlays() {
this.clearOverlays();
this.endpoint.instance.setSuspendDrawing(true);
this.stalkOverlay = this.endpoint.addOverlay({
type: 'Custom',
options: {
@@ -78,7 +77,6 @@ export class N8nPlusEndpoint extends EndpointRepresentation<ComputedN8nPlusEndpo
},
},
});
this.endpoint.instance.setSuspendDrawing(false);
}
bindEvents() {
@@ -151,18 +149,14 @@ export class N8nPlusEndpoint extends EndpointRepresentation<ComputedN8nPlusEndpo
}
setIsVisible(visible: boolean) {
this.instance.setSuspendDrawing(true);
Object.keys(this.endpoint.getOverlays()).forEach((overlay) => {
this.endpoint.getOverlays()[overlay].setVisible(visible);
});
this.setVisible(visible);
// Re-trigger the success state if label is set
if (visible && this.label) {
this.setSuccessOutput(this.label);
}
this.instance.setSuspendDrawing(false);
}
setSuccessOutput(label: string) {