admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-17 10:02:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(editor): Ensure editor state updates during execution by using throttle instead of debounce (no-changelog) (#15133)

Browse Source
This commit is contained in:
Alex Grozav
2025-05-08 11:03:01 +03:00
committed by GitHub
parent 1c65e82b38
commit c51a884617
2 changed files with 9 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/frontend/editor-ui/src/components/canvas/WorkflowCanvas.test.ts
View File

@@ -20,7 +20,7 @@ vi.mock('@vueuse/core', async () => {
const actual = await vi.importActual('@vueuse/core');
return {
...actual,
debouncedRef: vi.fn(actual.debouncedRef as typeof vueuse.debouncedRef),
throttledRef: vi.fn(actual.throttledRef as typeof vueuse.throttledRef),
};
});
@@ -161,15 +161,14 @@ describe('WorkflowCanvas', () => {
},
});
expect(vueuse.debouncedRef).toHaveBeenCalledTimes(2);
expect(vueuse.throttledRef).toHaveBeenCalledTimes(2);
// Find calls related to our specific debouncing logic
const calls = vi.mocked(vueuse.debouncedRef).mock.calls;
const executingCalls = calls.filter((call) => call[1] === 200 && call[2]?.maxWait === 50);
const calls = vi.mocked(vueuse.throttledRef).mock.calls;
const executingCalls = calls.filter((call) => call[1] === 200);
expect(executingCalls.length).toBeGreaterThanOrEqual(2);
expect(executingCalls[0][1]).toBe(200);
expect(executingCalls[0][2]).toEqual({ maxWait: 50 });
});
});
});

10
packages/frontend/editor-ui/src/components/canvas/WorkflowCanvas.vue
View File

@@ -8,7 +8,7 @@ import type { EventBus } from '@n8n/utils/event-bus';
import { createEventBus } from '@n8n/utils/event-bus';
import type { CanvasEventBusEvents } from '@/types';
import { useVueFlow } from '@vue-flow/core';
import { debouncedRef } from '@vueuse/core';
import { throttledRef } from '@vueuse/core';
defineOptions({
inheritAttrs: false,
@@ -61,8 +61,8 @@ onNodesInitialized(() => {
}
});
const mappedNodesDebounced = debouncedRef(mappedNodes, 200, { maxWait: 50 });
const mappedConnectionsDebounced = debouncedRef(mappedConnections, 200, { maxWait: 50 });
const mappedNodesThrottled = throttledRef(mappedNodes, 200);
const mappedConnectionsThrottled = throttledRef(mappedConnections, 200);
</script>
<template>
@@ -71,8 +71,8 @@ const mappedConnectionsDebounced = debouncedRef(mappedConnections, 200, { maxWai
<Canvas
v-if="workflow"
:id="id"
:nodes="executing ? mappedNodesDebounced : mappedNodes"
:connections="executing ? mappedConnectionsDebounced : mappedConnections"
:nodes="executing ? mappedNodesThrottled : mappedNodes"
:connections="executing ? mappedConnectionsThrottled : mappedConnections"
:event-bus="eventBus"
:read-only="readOnly"
v-bind="$attrs"