mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-11-10 06:34:05 -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,
INTERCEPT_BEFORE_DROP,
} from '@jsplumb/core';
import type { MessageBoxInputData } from 'element-plus';
import type { MessageBoxInputData, ElNotification } from 'element-plus';
import {
FIRST_ONBOARDING_PROMPT_TIMEOUT,
@ -315,7 +315,6 @@ import {
N8nPlusEndpointType,
EVENT_PLUS_ENDPOINT_CLICK,
} from '@/plugins/endpoints/N8nPlusEndpointType';
import type { ElNotification } from 'element-plus';
import { sourceControlEventBus } from '@/event-bus/source-control';
interface AddNodeOptions {
@ -634,7 +633,7 @@ export default defineComponent({
isProductionExecutionPreview: false,
enterTimer: 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
// in undo history as a user action.
// 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) {
try {
if (this.exitTimer !== undefined) {
@ -2254,17 +2258,19 @@ export default defineComponent({
}
if (
this.isReadOnlyRoute ||
this.readOnlyEnv ||
this.enterTimer ||
!connection ||
connection === this.activeConnection
this.isReadOnlyRoute ??
this.readOnlyEnv ??
this.enterTimer ??
!connection ??
this.isConnectionActive(connection)
)
return;
if (this.activeConnection) NodeViewUtils.hideConnectionActions(this.activeConnection);
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;
if (connection) {
NodeViewUtils.showConnectionActions(connection);
@ -2285,17 +2291,17 @@ export default defineComponent({
}
if (
this.isReadOnlyRoute ||
this.readOnlyEnv ||
!connection ||
this.activeConnection?.id !== connection.id
this.isReadOnlyRoute ??
this.readOnlyEnv ??
!connection ??
!this.isConnectionActive(connection)
)
return;
this.exitTimer = setTimeout(() => {
this.exitTimer = undefined;
if (connection && this.activeConnection === connection) {
if (connection && this.isConnectionActive(connection)) {
NodeViewUtils.hideConnectionActions(this.activeConnection);
this.activeConnection = null;
}