mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(editor): Improve displaying and hiding of connections actions (#6823)

Browse source 
Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>
This commit is contained in:
OlegIvaniv 2023-08-01 17:17:06 +02:00 committed by GitHub
parent 31a4cfc969
commit 369a2e9796
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 21 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
packages/editor-ui/src/views/NodeView.vue
View file

@ -185,7 +185,7 @@ import {
EVENT_CONNECTION_MOVED, EVENT_CONNECTION_MOVED,
INTERCEPT_BEFORE_DROP, INTERCEPT_BEFORE_DROP,
} from '@jsplumb/core'; } from '@jsplumb/core';
import type { MessageBoxInputData } from 'element-plus'; import type { MessageBoxInputData, ElNotification } from 'element-plus';
import { import {
FIRST_ONBOARDING_PROMPT_TIMEOUT, FIRST_ONBOARDING_PROMPT_TIMEOUT,
@ -315,7 +315,6 @@ import {
N8nPlusEndpointType, N8nPlusEndpointType,
EVENT_PLUS_ENDPOINT_CLICK, EVENT_PLUS_ENDPOINT_CLICK,
} from '@/plugins/endpoints/N8nPlusEndpointType'; } from '@/plugins/endpoints/N8nPlusEndpointType';
import type { ElNotification } from 'element-plus';
import { sourceControlEventBus } from '@/event-bus/source-control'; import { sourceControlEventBus } from '@/event-bus/source-control';
interface AddNodeOptions { interface AddNodeOptions {
@ -634,7 +633,7 @@ export default defineComponent({
isProductionExecutionPreview: false, isProductionExecutionPreview: false,
enterTimer: undefined as undefined | ReturnType<typeof setTimeout>, enterTimer: undefined as undefined | ReturnType<typeof setTimeout>,
exitTimer: undefined as undefined | ReturnType<typeof setTimeout>, exitTimer: undefined as undefined | ReturnType<typeof setTimeout>,
readOnlyNotification: null as null | ElNotification, readOnlyNotification: null as null | typeof ElNotification,
// jsplumb automatically deletes all loose connections which is in turn recorded // jsplumb automatically deletes all loose connections which is in turn recorded
// in undo history as a user action. // in undo history as a user action.
// This should prevent automatically removed connections from populating undo stack // This should prevent automatically removed connections from populating undo stack
@ -2246,6 +2245,11 @@ export default defineComponent({
}); });
}); });
}, },
isConnectionActive(connection: Connection | null) {
if (!connection?.id || !this.activeConnection?.id) return false;
return this.activeConnection?.id === connection.id;
},
onConnectionMouseOver(connection: Connection) { onConnectionMouseOver(connection: Connection) {
try { try {
if (this.exitTimer !== undefined) { if (this.exitTimer !== undefined) {
@ -2254,17 +2258,19 @@ export default defineComponent({
} }
if ( if (
this.isReadOnlyRoute || this.isReadOnlyRoute ??
this.readOnlyEnv || this.readOnlyEnv ??
this.enterTimer || this.enterTimer ??
!connection || !connection ??
connection === this.activeConnection this.isConnectionActive(connection)
) )
return; return;
if (this.activeConnection) NodeViewUtils.hideConnectionActions(this.activeConnection);
this.enterTimer = setTimeout(() => { this.enterTimer = setTimeout(() => {
// If there is already an active connection then hide it first
if (this.activeConnection && !this.isConnectionActive(connection)) {
NodeViewUtils.hideConnectionActions(this.activeConnection);
}
this.enterTimer = undefined; this.enterTimer = undefined;
if (connection) { if (connection) {
NodeViewUtils.showConnectionActions(connection); NodeViewUtils.showConnectionActions(connection);
@ -2285,17 +2291,17 @@ export default defineComponent({
} }
if ( if (
this.isReadOnlyRoute || this.isReadOnlyRoute ??
this.readOnlyEnv || this.readOnlyEnv ??
!connection || !connection ??
this.activeConnection?.id !== connection.id !this.isConnectionActive(connection)
) )
return; return;
this.exitTimer = setTimeout(() => { this.exitTimer = setTimeout(() => {
this.exitTimer = undefined; this.exitTimer = undefined;
if (connection && this.activeConnection === connection) { if (connection && this.isConnectionActive(connection)) {
NodeViewUtils.hideConnectionActions(this.activeConnection); NodeViewUtils.hideConnectionActions(this.activeConnection);
this.activeConnection = null; this.activeConnection = null;
} }