mirror of
https://github.com/n8n-io/n8n.git
synced 2024-12-31 15:37:26 -08:00
fix(editor): Prevent connection line from showing when clicking the plus button of a node (#12265)
This commit is contained in:
parent
6330bec4db
commit
9180b46b52
|
@ -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'));
|
||||
});
|
||||
});
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue