feat(editor): Open node creator when cancelling a connection in new canvas (no-changelog) (#9978)

This commit is contained in:
Alex Grozav 2024-07-10 12:22:31 +03:00 committed by GitHub
parent 2107de2f4a
commit 504bb704d3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 67 additions and 12 deletions

View file

@ -1,5 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { CanvasConnection, CanvasElement } from '@/types'; import type { CanvasConnection, CanvasElement, ConnectStartEvent } from '@/types';
import type { EdgeMouseEvent, NodeDragEvent, Connection, XYPosition } from '@vue-flow/core'; import type { EdgeMouseEvent, NodeDragEvent, Connection, XYPosition } from '@vue-flow/core';
import { useVueFlow, VueFlow, PanelPosition } from '@vue-flow/core'; import { useVueFlow, VueFlow, PanelPosition } from '@vue-flow/core';
import { Background } from '@vue-flow/background'; import { Background } from '@vue-flow/background';
@ -20,7 +20,10 @@ const emit = defineEmits<{
'run:node': [id: string]; 'run:node': [id: string];
'delete:node': [id: string]; 'delete:node': [id: string];
'delete:connection': [connection: Connection]; 'delete:connection': [connection: Connection];
'create:connection:start': [handle: ConnectStartEvent];
'create:connection': [connection: Connection]; 'create:connection': [connection: Connection];
'create:connection:end': [connection: Connection];
'create:connection:cancelled': [handle: ConnectStartEvent];
'click:pane': [position: XYPosition]; 'click:pane': [position: XYPosition];
}>(); }>();
@ -80,16 +83,48 @@ function onDeleteNode(id: string) {
emit('delete:node', id); emit('delete:node', id);
} }
function onRunNode(id: string) { /**
emit('run:node', id); * Connections
*/
const connectionCreated = ref(false);
const connectionEventData = ref<ConnectStartEvent | Connection>();
const isConnection = (data: ConnectStartEvent | Connection | undefined): data is Connection =>
!!data && connectionCreated.value;
const isConnectionCancelled = (
data: ConnectStartEvent | Connection | undefined,
): data is ConnectStartEvent => !!data && !connectionCreated.value;
function onConnectStart(handle: ConnectStartEvent) {
emit('create:connection:start', handle);
connectionEventData.value = handle;
connectionCreated.value = false;
}
function onConnect(connection: Connection) {
emit('create:connection', connection);
connectionEventData.value = connection;
connectionCreated.value = true;
}
function onConnectEnd() {
if (isConnection(connectionEventData.value)) {
emit('create:connection:end', connectionEventData.value);
} else if (isConnectionCancelled(connectionEventData.value)) {
emit('create:connection:cancelled', connectionEventData.value);
}
} }
function onDeleteConnection(connection: Connection) { function onDeleteConnection(connection: Connection) {
emit('delete:connection', connection); emit('delete:connection', connection);
} }
function onConnect(...args: unknown[]) { function onRunNode(id: string) {
emit('create:connection', args[0] as Connection); emit('run:node', id);
} }
function onKeyDown(e: KeyboardEvent) { function onKeyDown(e: KeyboardEvent) {
@ -135,8 +170,10 @@ function onClickPane(event: MouseEvent) {
@selection-drag-stop="onSelectionDragStop" @selection-drag-stop="onSelectionDragStop"
@edge-mouse-enter="onMouseEnterEdge" @edge-mouse-enter="onMouseEnterEdge"
@edge-mouse-leave="onMouseLeaveEdge" @edge-mouse-leave="onMouseLeaveEdge"
@pane-click="onClickPane" @connect-start="onConnectStart"
@connect="onConnect" @connect="onConnect"
@connect-end="onConnectEnd"
@pane-click="onClickPane"
> >
<template #node-canvas-node="canvasNodeProps"> <template #node-canvas-node="canvasNodeProps">
<CanvasNode <CanvasNode

View file

@ -97,3 +97,5 @@ export interface CanvasNodeInjectionData {
export interface CanvasNodeHandleInjectionData { export interface CanvasNodeHandleInjectionData {
label: Ref<string | undefined>; label: Ref<string | undefined>;
} }
export type ConnectStartEvent = { handleId: string; handleType: string; nodeId: string };

View file

@ -27,13 +27,14 @@ import type {
XYPosition, XYPosition,
} from '@/Interface'; } from '@/Interface';
import type { Connection } from '@vue-flow/core'; import type { Connection } from '@vue-flow/core';
import type { CanvasElement } from '@/types'; import type { CanvasElement, ConnectStartEvent } from '@/types';
import { import {
CANVAS_AUTO_ADD_MANUAL_TRIGGER_EXPERIMENT, CANVAS_AUTO_ADD_MANUAL_TRIGGER_EXPERIMENT,
EnterpriseEditionFeature, EnterpriseEditionFeature,
MAIN_HEADER_TABS, MAIN_HEADER_TABS,
MODAL_CANCEL, MODAL_CANCEL,
MODAL_CONFIRM, MODAL_CONFIRM,
NODE_CREATOR_OPEN_SOURCES,
PLACEHOLDER_EMPTY_WORKFLOW_ID, PLACEHOLDER_EMPTY_WORKFLOW_ID,
VIEWS, VIEWS,
} from '@/constants'; } from '@/constants';
@ -75,6 +76,7 @@ import { useTagsStore } from '@/stores/tags.store';
import { usePushConnectionStore } from '@/stores/pushConnection.store'; import { usePushConnectionStore } from '@/stores/pushConnection.store';
import { useNDVStore } from '@/stores/ndv.store'; import { useNDVStore } from '@/stores/ndv.store';
import { getNodeViewTab } from '@/utils/canvasUtils'; import { getNodeViewTab } from '@/utils/canvasUtils';
import { parseCanvasConnectionHandleString } from '@/utils/canvasUtilsV2';
import CanvasStopCurrentExecutionButton from '@/components/canvas/elements/buttons/CanvasStopCurrentExecutionButton.vue'; import CanvasStopCurrentExecutionButton from '@/components/canvas/elements/buttons/CanvasStopCurrentExecutionButton.vue';
import CanvasStopWaitingForWebhookButton from '@/components/canvas/elements/buttons/CanvasStopWaitingForWebhookButton.vue'; import CanvasStopWaitingForWebhookButton from '@/components/canvas/elements/buttons/CanvasStopWaitingForWebhookButton.vue';
@ -321,7 +323,7 @@ async function runAutoAddManualTriggerExperiment() {
} }
function resetWorkspace() { function resetWorkspace() {
onToggleNodeCreator({ createNodeActive: false }); onOpenNodeCreator({ createNodeActive: false });
nodeCreatorStore.setShowScrim(false); nodeCreatorStore.setShowScrim(false);
// Make sure that if there is a waiting test-webhook that it gets removed // Make sure that if there is a waiting test-webhook that it gets removed
@ -488,6 +490,19 @@ function onCreateConnection(connection: Connection) {
createConnection(connection); createConnection(connection);
} }
function onCreateConnectionCancelled(event: ConnectStartEvent) {
const { type, index } = parseCanvasConnectionHandleString(event.handleId);
setTimeout(() => {
nodeCreatorStore.openNodeCreatorForConnectingNode({
index,
endpointUuid: event.handleId,
eventSource: NODE_CREATOR_OPEN_SOURCES.NODE_CONNECTION_DROP,
outputType: type,
sourceId: event.nodeId,
});
});
}
function onDeleteConnection(connection: Connection) { function onDeleteConnection(connection: Connection) {
deleteConnection(connection, { trackHistory: true }); deleteConnection(connection, { trackHistory: true });
} }
@ -527,11 +542,11 @@ async function onSwitchActiveNode(nodeName: string) {
setNodeActiveByName(nodeName); setNodeActiveByName(nodeName);
} }
async function onOpenConnectionNodeCreator(node: string, connectionType: NodeConnectionType) { async function onOpenSelectiveNodeCreator(node: string, connectionType: NodeConnectionType) {
nodeCreatorStore.openSelectiveNodeCreator({ node, connectionType }); nodeCreatorStore.openSelectiveNodeCreator({ node, connectionType });
} }
function onToggleNodeCreator(options: ToggleNodeCreatorOptions) { function onOpenNodeCreator(options: ToggleNodeCreatorOptions) {
nodeCreatorStore.openNodeCreator(options); nodeCreatorStore.openNodeCreator(options);
} }
@ -959,6 +974,7 @@ onBeforeUnmount(() => {
@run:node="onRunWorkflowToNode" @run:node="onRunWorkflowToNode"
@delete:node="onDeleteNode" @delete:node="onDeleteNode"
@create:connection="onCreateConnection" @create:connection="onCreateConnection"
@create:connection:cancelled="onCreateConnectionCancelled"
@delete:connection="onDeleteConnection" @delete:connection="onDeleteConnection"
@click:pane="onClickPane" @click:pane="onClickPane"
> >
@ -983,7 +999,7 @@ onBeforeUnmount(() => {
v-if="!isReadOnlyRoute && !isReadOnlyEnvironment" v-if="!isReadOnlyRoute && !isReadOnlyEnvironment"
:create-node-active="uiStore.isCreateNodeActive" :create-node-active="uiStore.isCreateNodeActive"
:node-view-scale="1" :node-view-scale="1"
@toggle-node-creator="onToggleNodeCreator" @toggle-node-creator="onOpenNodeCreator"
@add-nodes="onAddNodesAndConnections" @add-nodes="onAddNodesAndConnections"
/> />
</Suspense> </Suspense>
@ -996,7 +1012,7 @@ onBeforeUnmount(() => {
@value-changed="onRenameNode" @value-changed="onRenameNode"
@stop-execution="onStopExecution" @stop-execution="onStopExecution"
@switch-selected-node="onSwitchActiveNode" @switch-selected-node="onSwitchActiveNode"
@open-connection-node-creator="onOpenConnectionNodeCreator" @open-connection-node-creator="onOpenSelectiveNodeCreator"
/> />
<!-- <!--
:renaming="renamingActive" :renaming="renamingActive"