admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-17 10:02:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(editor): Overhaul handle rendering to allow dragging of plus button (no-changelog) (#10512)

Browse Source
This commit is contained in:
Alex Grozav
2024-08-26 10:32:39 +03:00
committed by GitHub
parent cd0c6d9b55
commit 351d8413e9
28 changed files with 623 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
packages/editor-ui/src/components/canvas/Canvas.vue
View File

@@ -12,7 +12,7 @@ import { Background } from '@vue-flow/background';
import { MiniMap } from '@vue-flow/minimap';
import Node from './elements/nodes/CanvasNode.vue';
import Edge from './elements/edges/CanvasEdge.vue';
import { computed, onMounted, onUnmounted, ref, useCssModule, watch } from 'vue';
import { computed, onMounted, onUnmounted, provide, ref, useCssModule, watch } from 'vue';
import type { EventBus } from 'n8n-design-system';
import { createEventBus } from 'n8n-design-system';
import { useContextMenu, type ContextMenuAction } from '@/composables/useContextMenu';
@@ -22,6 +22,7 @@ import type { NodeCreatorOpenSource } from '@/Interface';
import type { PinDataSource } from '@/composables/usePinnedData';
import { isPresent } from '@/utils/typesUtils';
import { GRID_SIZE } from '@/utils/nodeViewUtils';
import { CanvasKey } from '@/constants';
const $style = useCssModule();
@@ -48,8 +49,8 @@ const emit = defineEmits<{
'delete:connection': [connection: Connection];
'create:connection:start': [handle: ConnectStartEvent];
'create:connection': [connection: Connection];
'create:connection:end': [connection: Connection];
'create:connection:cancelled': [handle: ConnectStartEvent];
'create:connection:end': [connection: Connection, event?: MouseEvent];
'create:connection:cancelled': [handle: ConnectStartEvent, event?: MouseEvent];
'click:connection:add': [connection: Connection];
'click:pane': [position: XYPosition];
'run:workflow': [];
@@ -184,35 +185,32 @@ function onUpdateNodeParameters(id: string, parameters: Record<string, unknown>)
*/
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;
const connectingHandle = ref<ConnectStartEvent>();
const connectedHandle = ref<Connection>();
function onConnectStart(handle: ConnectStartEvent) {
emit('create:connection:start', handle);
connectionEventData.value = handle;
connectingHandle.value = handle;
connectionCreated.value = false;
}
function onConnect(connection: Connection) {
emit('create:connection', connection);
connectionEventData.value = connection;
connectedHandle.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 onConnectEnd(event?: MouseEvent) {
if (connectedHandle.value) {
emit('create:connection:end', connectedHandle.value, event);
} else if (connectingHandle.value) {
emit('create:connection:cancelled', connectingHandle.value, event);
}
connectedHandle.value = undefined;
connectingHandle.value = undefined;
}
function onDeleteConnection(connection: Connection) {
@@ -393,6 +391,14 @@ onPaneReady(async () => {
watch(() => props.readOnly, setReadonly, {
immediate: true,
});
/**
* Provide
*/
provide(CanvasKey, {
connectingHandle,
});
</script>
<template>