admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-17 01:56:46 +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'); const actual = await vi.importActual('@vueuse/core');
return { return {
...actual, ...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 // Find calls related to our specific debouncing logic
const calls = vi.mocked(vueuse.debouncedRef).mock.calls; const calls = vi.mocked(vueuse.throttledRef).mock.calls;
const executingCalls = calls.filter((call) => call[1] === 200 && call[2]?.maxWait === 50); const executingCalls = calls.filter((call) => call[1] === 200);
expect(executingCalls.length).toBeGreaterThanOrEqual(2); expect(executingCalls.length).toBeGreaterThanOrEqual(2);
expect(executingCalls[0][1]).toBe(200); 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 { createEventBus } from '@n8n/utils/event-bus';
import type { CanvasEventBusEvents } from '@/types'; import type { CanvasEventBusEvents } from '@/types';
import { useVueFlow } from '@vue-flow/core'; import { useVueFlow } from '@vue-flow/core';
import { debouncedRef } from '@vueuse/core'; import { throttledRef } from '@vueuse/core';
defineOptions({ defineOptions({
inheritAttrs: false, inheritAttrs: false,
@@ -61,8 +61,8 @@ onNodesInitialized(() => {
} }
}); });
const mappedNodesDebounced = debouncedRef(mappedNodes, 200, { maxWait: 50 }); const mappedNodesThrottled = throttledRef(mappedNodes, 200);
const mappedConnectionsDebounced = debouncedRef(mappedConnections, 200, { maxWait: 50 }); const mappedConnectionsThrottled = throttledRef(mappedConnections, 200);
</script> </script>
<template> <template>
@@ -71,8 +71,8 @@ const mappedConnectionsDebounced = debouncedRef(mappedConnections, 200, { maxWai
<Canvas <Canvas
v-if="workflow" v-if="workflow"
:id="id" :id="id"
:nodes="executing ? mappedNodesDebounced : mappedNodes" :nodes="executing ? mappedNodesThrottled : mappedNodes"
:connections="executing ? mappedConnectionsDebounced : mappedConnections" :connections="executing ? mappedConnectionsThrottled : mappedConnections"
:event-bus="eventBus" :event-bus="eventBus"
:read-only="readOnly" :read-only="readOnly"
v-bind="$attrs" v-bind="$attrs"