fix(editor): Prevent connection line from showing when clicking the plus button of a node (#12265)

This commit is contained in:
Alex Grozav 2024-12-17 17:15:47 +02:00 committed by GitHub
parent 6330bec4db
commit 9180b46b52
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 45 additions and 3 deletions

View file

@ -5,6 +5,7 @@ import { setActivePinia } from 'pinia';
import type { ConnectionLineProps } from '@vue-flow/core';
import { Position } from '@vue-flow/core';
import { createCanvasProvide } from '@/__tests__/data';
import { waitFor } from '@testing-library/vue';
const DEFAULT_PROPS = {
sourceX: 0,
@ -63,4 +64,19 @@ describe('CanvasConnectionLine', () => {
'M-50 130L-90 130L -124,130Q -140,130 -140,114L -140,-84Q -140,-100 -124,-100L-100 -100',
);
});
it('should show the connection line after a short delay', async () => {
vi.useFakeTimers();
const { container } = renderComponent({
props: DEFAULT_PROPS,
});
const edge = container.querySelector('.vue-flow__edge-path');
expect(edge).not.toHaveClass('visible');
vi.advanceTimersByTime(300);
await waitFor(() => expect(edge).toHaveClass('visible'));
});
});

View file

@ -2,7 +2,7 @@
/* eslint-disable vue/no-multiple-template-root */
import type { ConnectionLineProps } from '@vue-flow/core';
import { BaseEdge } from '@vue-flow/core';
import { computed, useCssModule } from 'vue';
import { computed, onMounted, ref, useCssModule } from 'vue';
import { getEdgeRenderData } from './utils';
import { useCanvas } from '@/composables/useCanvas';
import { NodeConnectionType } from 'n8n-workflow';
@ -18,6 +18,13 @@ const connectionType = computed(
() => parseCanvasConnectionHandleString(connectingHandle.value?.handleId).type,
);
const classes = computed(() => {
return {
[$style.edge]: true,
[$style.visible]: isVisible.value,
};
});
const edgeColor = computed(() => {
if (connectionType.value !== NodeConnectionType.Main) {
return 'var(--node-type-supplemental-color)';
@ -37,13 +44,25 @@ const renderData = computed(() =>
);
const segments = computed(() => renderData.value.segments);
/**
* Used to delay the visibility of the connection line to prevent flickering
* when the actual user intent is to click the plus button
*/
const isVisible = ref(false);
onMounted(() => {
setTimeout(() => {
isVisible.value = true;
}, 300);
});
</script>
<template>
<BaseEdge
v-for="segment in segments"
:key="segment[0]"
:class="$style.edge"
:class="classes"
:style="edgeStyle"
:path="segment[0]"
:marker-end="markerEnd"
@ -52,6 +71,13 @@ const segments = computed(() => renderData.value.segments);
<style lang="scss" module>
.edge {
transition: stroke 0.3s ease;
transition-property: stroke, opacity;
transition-duration: 300ms;
transition-timing-function: ease;
opacity: 0;
&.visible {
opacity: 1;
}
}
</style>