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

@@ -23,6 +23,8 @@ export const i18nInstance = createI18n({
});
export class I18nClass {
private baseTextCache = new Map<string, string>();
private get i18n() {
return i18nInstance.global;
}
@@ -50,11 +52,25 @@ export class I18nClass {
key: BaseTextKey,
options?: { adjustToNumber?: number; interpolate?: { [key: string]: string } },
): string {
if (options?.adjustToNumber !== undefined) {
return this.i18n.tc(key, options.adjustToNumber, options?.interpolate).toString();
// Create a unique cache key
const cacheKey = `${key}-${JSON.stringify(options)}`;
// Check if the result is already cached
if (this.baseTextCache.has(cacheKey)) {
return this.baseTextCache.get(cacheKey) ?? key;
}
return this.i18n.t(key, options?.interpolate).toString();
let result: string;
if (options?.adjustToNumber !== undefined) {
result = this.i18n.tc(key, options.adjustToNumber, options?.interpolate ?? {}).toString();
} else {
result = this.i18n.t(key, options?.interpolate ?? {}).toString();
}
// Store the result in the cache
this.baseTextCache.set(cacheKey, result);
return result;
}
/**