mirror of
https://github.com/n8n-io/n8n.git
synced 2024-12-25 12:44:07 -08:00
feat(editor): Add support for fallback nodes and new addNodes node render type in new canvas (no-changelog) (#10004)
This commit is contained in:
Alex Grozav
GitHub
parent
f9e9d274b9
commit
57dfefd0f6
|
|
@ -1,6 +1,7 @@
|
|||
import { CanvasNodeKey } from '@/constants';
|
||||
import { ref } from 'vue';
|
||||
import type { CanvasElement, CanvasElementData } from '@/types';
|
||||
import type { CanvasNode, CanvasNodeData } from '@/types';
|
||||
import { CanvasNodeRenderType } from '@/types';
|
||||
|
||||
export function createCanvasNodeData({
|
||||
id = 'node',
|
||||
|
|
@ -15,10 +16,10 @@ export function createCanvasNodeData({
|
|||
pinnedData = { count: 0, visible: false },
|
||||
runData = { count: 0, visible: false },
|
||||
render = {
|
||||
type: 'default',
|
||||
type: CanvasNodeRenderType.Default,
|
||||
options: { configurable: false, configuration: false, trigger: false },
|
||||
},
|
||||
}: Partial<CanvasElementData> = {}): CanvasElementData {
|
||||
}: Partial<CanvasNodeData> = {}): CanvasNodeData {
|
||||
return {
|
||||
execution,
|
||||
issues,
|
||||
|
|
@ -41,9 +42,7 @@ export function createCanvasNodeElement({
|
|||
label = 'Node',
|
||||
position = { x: 100, y: 100 },
|
||||
data,
|
||||
}: Partial<
|
||||
Omit<CanvasElement, 'data'> & { data: Partial<CanvasElementData> }
|
||||
> = {}): CanvasElement {
|
||||
}: Partial<Omit<CanvasNode, 'data'> & { data: Partial<CanvasNodeData> }> = {}): CanvasNode {
|
||||
return {
|
||||
id,
|
||||
type,
|
||||
|
|
@ -58,7 +57,7 @@ export function createCanvasNodeProps({
|
|||
label = 'Test Node',
|
||||
selected = false,
|
||||
data = {},
|
||||
}: { id?: string; label?: string; selected?: boolean; data?: Partial<CanvasElementData> } = {}) {
|
||||
}: { id?: string; label?: string; selected?: boolean; data?: Partial<CanvasNodeData> } = {}) {
|
||||
return {
|
||||
id,
|
||||
label,
|
||||
|
|
@ -72,7 +71,7 @@ export function createCanvasNodeProvide({
|
|||
label = 'Test Node',
|
||||
selected = false,
|
||||
data = {},
|
||||
}: { id?: string; label?: string; selected?: boolean; data?: Partial<CanvasElementData> } = {}) {
|
||||
}: { id?: string; label?: string; selected?: boolean; data?: Partial<CanvasNodeData> } = {}) {
|
||||
const props = createCanvasNodeProps({ id, label, selected, data });
|
||||
return {
|
||||
[`${CanvasNodeKey}`]: {
|
||||
|
|
@ -85,8 +84,8 @@ export function createCanvasNodeProvide({
|
|||
}
|
||||
|
||||
export function createCanvasConnection(
|
||||
nodeA: CanvasElement,
|
||||
nodeB: CanvasElement,
|
||||
nodeA: CanvasNode,
|
||||
nodeB: CanvasNode,
|
||||
{ sourceIndex = 0, targetIndex = 0 } = {},
|
||||
) {
|
||||
const nodeAOutput = nodeA.data?.outputs[sourceIndex];
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { fireEvent, waitFor } from '@testing-library/vue';
|
|||
import { createComponentRenderer } from '@/__tests__/render';
|
||||
import Canvas from '@/components/canvas/Canvas.vue';
|
||||
import { createPinia, setActivePinia } from 'pinia';
|
||||
import type { CanvasConnection, CanvasElement } from '@/types';
|
||||
import type { CanvasConnection, CanvasNode } from '@/types';
|
||||
import { createCanvasConnection, createCanvasNodeElement } from '@/__tests__/data';
|
||||
import { NodeConnectionType } from 'n8n-workflow';
|
||||
|
||||
|
|
@ -44,7 +44,7 @@ describe('Canvas', () => {
|
|||
});
|
||||
|
||||
it('should render nodes and edges', async () => {
|
||||
const elements: CanvasElement[] = [
|
||||
const nodes: CanvasNode[] = [
|
||||
createCanvasNodeElement({
|
||||
id: '1',
|
||||
label: 'Node 1',
|
||||
|
|
@ -72,33 +72,33 @@ describe('Canvas', () => {
|
|||
}),
|
||||
];
|
||||
|
||||
const connections: CanvasConnection[] = [createCanvasConnection(elements[0], elements[1])];
|
||||
const connections: CanvasConnection[] = [createCanvasConnection(nodes[0], nodes[1])];
|
||||
|
||||
const { container } = renderComponent({
|
||||
props: {
|
||||
elements,
|
||||
nodes,
|
||||
connections,
|
||||
},
|
||||
});
|
||||
|
||||
await waitFor(() => expect(container.querySelectorAll('.vue-flow__node')).toHaveLength(2));
|
||||
|
||||
expect(container.querySelector(`[data-id="${elements[0].id}"]`)).toBeInTheDocument();
|
||||
expect(container.querySelector(`[data-id="${elements[1].id}"]`)).toBeInTheDocument();
|
||||
expect(container.querySelector(`[data-id="${nodes[0].id}"]`)).toBeInTheDocument();
|
||||
expect(container.querySelector(`[data-id="${nodes[1].id}"]`)).toBeInTheDocument();
|
||||
expect(container.querySelector(`[data-id="${connections[0].id}"]`)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should handle node drag stop event', async () => {
|
||||
const elements = [createCanvasNodeElement()];
|
||||
const nodes = [createCanvasNodeElement()];
|
||||
const { container, emitted } = renderComponent({
|
||||
props: {
|
||||
elements,
|
||||
nodes,
|
||||
},
|
||||
});
|
||||
|
||||
await waitFor(() => expect(container.querySelectorAll('.vue-flow__node')).toHaveLength(1));
|
||||
|
||||
const node = container.querySelector(`[data-id="${elements[0].id}"]`) as Element;
|
||||
const node = container.querySelector(`[data-id="${nodes[0].id}"]`) as Element;
|
||||
await fireEvent.mouseDown(node, { view: window });
|
||||
await fireEvent.mouseMove(node, {
|
||||
view: window,
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
<script lang="ts" setup>
|
||||
import type { CanvasConnection, CanvasElement, ConnectStartEvent } from '@/types';
|
||||
import type { CanvasConnection, CanvasNode, ConnectStartEvent } from '@/types';
|
||||
import type { EdgeMouseEvent, NodeDragEvent, Connection, XYPosition } from '@vue-flow/core';
|
||||
import { useVueFlow, VueFlow, PanelPosition } from '@vue-flow/core';
|
||||
import { Background } from '@vue-flow/background';
|
||||
import { Controls } from '@vue-flow/controls';
|
||||
import { MiniMap } from '@vue-flow/minimap';
|
||||
import CanvasNode from './elements/nodes/CanvasNode.vue';
|
||||
import CanvasEdge from './elements/edges/CanvasEdge.vue';
|
||||
import Node from './elements/nodes/CanvasNode.vue';
|
||||
import Edge from './elements/edges/CanvasEdge.vue';
|
||||
import { onMounted, onUnmounted, ref, useCssModule } from 'vue';
|
||||
|
||||
const $style = useCssModule();
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [elements: CanvasElement[]];
|
||||
'update:modelValue': [elements: CanvasNode[]];
|
||||
'update:node:position': [id: string, position: XYPosition];
|
||||
'update:node:active': [id: string];
|
||||
'update:node:enabled': [id: string];
|
||||
|
|
@ -30,13 +30,13 @@ const emit = defineEmits<{
|
|||
const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string;
|
||||
elements: CanvasElement[];
|
||||
nodes: CanvasNode[];
|
||||
connections: CanvasConnection[];
|
||||
controlsPosition?: PanelPosition;
|
||||
}>(),
|
||||
{
|
||||
id: 'canvas',
|
||||
elements: () => [],
|
||||
nodes: () => [],
|
||||
connections: () => [],
|
||||
controlsPosition: PanelPosition.BottomLeft,
|
||||
},
|
||||
|
|
@ -156,7 +156,7 @@ function onClickPane(event: MouseEvent) {
|
|||
<template>
|
||||
<VueFlow
|
||||
:id="id"
|
||||
:nodes="elements"
|
||||
:nodes="nodes"
|
||||
:edges="connections"
|
||||
:apply-changes="false"
|
||||
fit-view-on-init
|
||||
|
|
@ -176,7 +176,7 @@ function onClickPane(event: MouseEvent) {
|
|||
@pane-click="onClickPane"
|
||||
>
|
||||
<template #node-canvas-node="canvasNodeProps">
|
||||
<CanvasNode
|
||||
<Node
|
||||
v-bind="canvasNodeProps"
|
||||
@delete="onDeleteNode"
|
||||
@run="onRunNode"
|
||||
|
|
@ -187,7 +187,7 @@ function onClickPane(event: MouseEvent) {
|
|||
</template>
|
||||
|
||||
<template #edge-canvas-edge="canvasEdgeProps">
|
||||
<CanvasEdge
|
||||
<Edge
|
||||
v-bind="canvasEdgeProps"
|
||||
:hovered="hoveredEdges[canvasEdgeProps.id]"
|
||||
@delete="onDeleteConnection"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import Canvas from '@/components/canvas/Canvas.vue';
|
||||
import { toRef, useCssModule } from 'vue';
|
||||
import { computed, toRef, useCssModule } from 'vue';
|
||||
import type { Workflow } from 'n8n-workflow';
|
||||
import type { IWorkflowDb } from '@/Interface';
|
||||
import { useCanvasMapping } from '@/composables/useCanvasMapping';
|
||||
|
|
@ -9,24 +9,45 @@ defineOptions({
|
|||
inheritAttrs: false,
|
||||
});
|
||||
|
||||
const props = defineProps<{
|
||||
id?: string;
|
||||
workflow: IWorkflowDb;
|
||||
workflowObject: Workflow;
|
||||
}>();
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string;
|
||||
workflow: IWorkflowDb;
|
||||
workflowObject: Workflow;
|
||||
fallbackNodes?: IWorkflowDb['nodes'];
|
||||
}>(),
|
||||
{
|
||||
id: 'canvas',
|
||||
fallbackNodes: () => [],
|
||||
},
|
||||
);
|
||||
|
||||
const $style = useCssModule();
|
||||
|
||||
const workflow = toRef(props, 'workflow');
|
||||
const workflowObject = toRef(props, 'workflowObject');
|
||||
|
||||
const { elements, connections } = useCanvasMapping({ workflow, workflowObject });
|
||||
const nodes = computed(() =>
|
||||
props.workflow.nodes.length > 0 ? props.workflow.nodes : props.fallbackNodes,
|
||||
);
|
||||
const connections = computed(() => props.workflow.connections);
|
||||
|
||||
const { nodes: mappedNodes, connections: mappedConnections } = useCanvasMapping({
|
||||
nodes,
|
||||
connections,
|
||||
workflowObject,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="$style.wrapper">
|
||||
<div :class="$style.canvas">
|
||||
<Canvas v-if="workflow" :elements="elements" :connections="connections" v-bind="$attrs" />
|
||||
<Canvas
|
||||
v-if="workflow"
|
||||
:nodes="mappedNodes"
|
||||
:connections="mappedConnections"
|
||||
v-bind="$attrs"
|
||||
/>
|
||||
</div>
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import { createComponentRenderer } from '@/__tests__/render';
|
||||
import CanvasExecuteWorkflowButton from './CanvasExecuteWorkflowButton.vue';
|
||||
import CanvasRunWorkflowButton from './CanvasRunWorkflowButton.vue';
|
||||
|
||||
const renderComponent = createComponentRenderer(CanvasExecuteWorkflowButton);
|
||||
const renderComponent = createComponentRenderer(CanvasRunWorkflowButton);
|
||||
|
||||
describe('CanvasExecuteWorkflowButton', () => {
|
||||
describe('CanvasRunWorkflowButton', () => {
|
||||
it('should render correctly', () => {
|
||||
const wrapper = renderComponent();
|
||||
|
||||
|
|
@ -4,12 +4,15 @@ import { computed } from 'vue';
|
|||
import { useI18n } from '@/composables/useI18n';
|
||||
|
||||
defineEmits<{
|
||||
mouseenter: [event: MouseEvent];
|
||||
mouseleave: [event: MouseEvent];
|
||||
click: [event: MouseEvent];
|
||||
}>();
|
||||
|
||||
const props = defineProps<{
|
||||
waitingForWebhook: boolean;
|
||||
executing: boolean;
|
||||
disabled?: boolean;
|
||||
}>();
|
||||
|
||||
const i18n = useI18n();
|
||||
|
|
@ -32,10 +35,13 @@ const label = computed(() => {
|
|||
<N8nButton
|
||||
:loading="executing"
|
||||
:label="label"
|
||||
:disabled="disabled"
|
||||
size="large"
|
||||
icon="flask"
|
||||
type="primary"
|
||||
data-test-id="execute-workflow-button"
|
||||
@mouseenter="$emit('mouseenter', $event)"
|
||||
@mouseleave="$emit('mouseleave', $event)"
|
||||
@click.stop="$emit('click', $event)"
|
||||
/>
|
||||
</KeyboardShortcutTooltip>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`CanvasRunWorkflowButton > should render correctly 1`] = `
|
||||
"<button class="button button primary large withIcon el-tooltip__trigger el-tooltip__trigger" aria-live="polite" data-test-id="execute-workflow-button"><span class="icon"><span class="n8n-text compact size-large regular n8n-icon n8n-icon"><svg class="svg-inline--fa fa-flask fa-w-14 large" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="flask" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M437.2 403.5L320 215V64h8c13.3 0 24-10.7 24-24V24c0-13.3-10.7-24-24-24H120c-13.3 0-24 10.7-24 24v16c0 13.3 10.7 24 24 24h8v151L10.8 403.5C-18.5 450.6 15.3 512 70.9 512h306.2c55.7 0 89.4-61.5 60.1-108.5zM137.9 320l48.2-77.6c3.7-5.2 5.8-11.6 5.8-18.4V64h64v160c0 6.9 2.2 13.2 5.8 18.4l48.2 77.6h-172z"></path></svg></span></span><span>Test workflow</span></button>
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->"
|
||||
`;
|
||||
|
|
@ -1,11 +1,7 @@
|
|||
<script lang="ts" setup>
|
||||
import { Position } from '@vue-flow/core';
|
||||
import { computed, provide, toRef, watch } from 'vue';
|
||||
import type {
|
||||
CanvasElementData,
|
||||
CanvasConnectionPort,
|
||||
CanvasElementPortWithPosition,
|
||||
} from '@/types';
|
||||
import type { CanvasNodeData, CanvasConnectionPort, CanvasElementPortWithPosition } from '@/types';
|
||||
import NodeIcon from '@/components/NodeIcon.vue';
|
||||
import { useNodeTypesStore } from '@/stores/nodeTypes.store';
|
||||
import CanvasNodeToolbar from '@/components/canvas/elements/nodes/CanvasNodeToolbar.vue';
|
||||
|
|
@ -22,7 +18,7 @@ const emit = defineEmits<{
|
|||
toggle: [id: string];
|
||||
activate: [id: string];
|
||||
}>();
|
||||
const props = defineProps<NodeProps<CanvasElementData>>();
|
||||
const props = defineProps<NodeProps<CanvasNodeData>>();
|
||||
|
||||
const nodeTypesStore = useNodeTypesStore();
|
||||
|
||||
|
|
@ -161,9 +157,15 @@ function onActivate() {
|
|||
@run="onRun"
|
||||
/>
|
||||
|
||||
<CanvasNodeRenderer v-if="nodeType" @dblclick="onActivate">
|
||||
<NodeIcon :node-type="nodeType" :size="nodeIconSize" :shrink="false" :disabled="isDisabled" />
|
||||
<!-- :color-default="iconColorDefault"-->
|
||||
<CanvasNodeRenderer @dblclick="onActivate">
|
||||
<NodeIcon
|
||||
v-if="nodeType"
|
||||
:node-type="nodeType"
|
||||
:size="nodeIconSize"
|
||||
:shrink="false"
|
||||
:disabled="isDisabled"
|
||||
/>
|
||||
<!-- @TODO :color-default="iconColorDefault"-->
|
||||
</CanvasNodeRenderer>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { createComponentRenderer } from '@/__tests__/render';
|
|||
import { createCanvasNodeProvide } from '@/__tests__/data';
|
||||
import { createTestingPinia } from '@pinia/testing';
|
||||
import { setActivePinia } from 'pinia';
|
||||
import { CanvasNodeRenderType } from '@/types';
|
||||
|
||||
const renderComponent = createComponentRenderer(CanvasNodeRenderer);
|
||||
|
||||
|
|
@ -31,7 +32,7 @@ describe('CanvasNodeRenderer', () => {
|
|||
...createCanvasNodeProvide({
|
||||
data: {
|
||||
render: {
|
||||
type: 'default',
|
||||
type: CanvasNodeRenderType.Default,
|
||||
options: { configuration: true },
|
||||
},
|
||||
},
|
||||
|
|
@ -50,7 +51,7 @@ describe('CanvasNodeRenderer', () => {
|
|||
...createCanvasNodeProvide({
|
||||
data: {
|
||||
render: {
|
||||
type: 'default',
|
||||
type: CanvasNodeRenderType.Default,
|
||||
options: { configurable: true },
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
<script lang="ts" setup>
|
||||
import { h, inject } from 'vue';
|
||||
import CanvasNodeDefault from '@/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue';
|
||||
import CanvasNodeAddNodes from '@/components/canvas/elements/nodes/render-types/CanvasNodeAddNodes.vue';
|
||||
import { CanvasNodeKey } from '@/constants';
|
||||
import { CanvasNodeRenderType } from '@/types';
|
||||
|
||||
const node = inject(CanvasNodeKey);
|
||||
|
||||
|
|
@ -13,6 +15,9 @@ const Render = () => {
|
|||
let Component;
|
||||
switch (node?.data.value.render.type) {
|
||||
// @TODO Add support for sticky notes here
|
||||
case CanvasNodeRenderType.AddNodes:
|
||||
Component = CanvasNodeAddNodes;
|
||||
break;
|
||||
default:
|
||||
Component = CanvasNodeDefault;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import { fireEvent } from '@testing-library/vue';
|
|||
import CanvasNodeToolbar from '@/components/canvas/elements/nodes/CanvasNodeToolbar.vue';
|
||||
import { createComponentRenderer } from '@/__tests__/render';
|
||||
import { createCanvasNodeProvide } from '@/__tests__/data';
|
||||
import { CanvasNodeRenderType } from '@/types';
|
||||
|
||||
const renderComponent = createComponentRenderer(CanvasNodeToolbar);
|
||||
|
||||
|
|
@ -25,7 +26,7 @@ describe('CanvasNodeToolbar', () => {
|
|||
...createCanvasNodeProvide({
|
||||
data: {
|
||||
render: {
|
||||
type: 'default',
|
||||
type: CanvasNodeRenderType.Default,
|
||||
options: { configuration: true },
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,96 @@
|
|||
<script setup lang="ts">
|
||||
import { onBeforeUnmount, onMounted, ref } from 'vue';
|
||||
import { useNodeCreatorStore } from '@/stores/nodeCreator.store';
|
||||
import { NODE_CREATOR_OPEN_SOURCES } from '@/constants';
|
||||
import { nodeViewEventBus } from '@/event-bus';
|
||||
|
||||
const nodeCreatorStore = useNodeCreatorStore();
|
||||
|
||||
const isTooltipVisible = ref(false);
|
||||
|
||||
onMounted(() => {
|
||||
nodeViewEventBus.on('runWorkflowButton:mouseenter', onShowTooltip);
|
||||
nodeViewEventBus.on('runWorkflowButton:mouseleave', onHideTooltip);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
nodeViewEventBus.off('runWorkflowButton:mouseenter', onShowTooltip);
|
||||
nodeViewEventBus.off('runWorkflowButton:mouseleave', onHideTooltip);
|
||||
});
|
||||
|
||||
function onShowTooltip() {
|
||||
isTooltipVisible.value = true;
|
||||
}
|
||||
|
||||
function onHideTooltip() {
|
||||
isTooltipVisible.value = false;
|
||||
}
|
||||
|
||||
function onClick() {
|
||||
nodeCreatorStore.openNodeCreatorForTriggerNodes(
|
||||
NODE_CREATOR_OPEN_SOURCES.TRIGGER_PLACEHOLDER_BUTTON,
|
||||
);
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div ref="container" :class="$style.addNodes" data-test-id="canvas-add-button">
|
||||
<N8nTooltip
|
||||
placement="top"
|
||||
:visible="isTooltipVisible"
|
||||
:disabled="nodeCreatorStore.showScrim"
|
||||
:popper-class="$style.tooltip"
|
||||
:show-after="700"
|
||||
>
|
||||
<button :class="$style.button" data-test-id="canvas-plus-button" @click="onClick">
|
||||
<FontAwesomeIcon icon="plus" size="lg" />
|
||||
</button>
|
||||
<template #content>
|
||||
{{ $locale.baseText('nodeView.canvasAddButton.addATriggerNodeBeforeExecuting') }}
|
||||
</template>
|
||||
</N8nTooltip>
|
||||
<p :class="$style.label" v-text="$locale.baseText('nodeView.canvasAddButton.addFirstStep')" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" module>
|
||||
.addNodes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
|
||||
&:hover .button svg path {
|
||||
fill: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
background: var(--color-foreground-xlight);
|
||||
border: 2px dashed var(--color-foreground-xdark);
|
||||
border-radius: 8px;
|
||||
padding: 0;
|
||||
|
||||
min-width: 100px;
|
||||
min-height: 100px;
|
||||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
width: 26px !important;
|
||||
height: 40px;
|
||||
path {
|
||||
fill: var(--color-foreground-xdark);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
width: max-content;
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-size: var(--font-size-m);
|
||||
line-height: var(--font-line-height-xloose);
|
||||
color: var(--color-text-dark);
|
||||
margin-top: var(--spacing-2xs);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,6 +4,7 @@ import { NodeConnectionType } from 'n8n-workflow';
|
|||
import { createCanvasNodeProvide } from '@/__tests__/data';
|
||||
import { createTestingPinia } from '@pinia/testing';
|
||||
import { setActivePinia } from 'pinia';
|
||||
import { CanvasNodeRenderType } from '@/types';
|
||||
|
||||
const renderComponent = createComponentRenderer(CanvasNodeDefault);
|
||||
|
||||
|
|
@ -140,7 +141,7 @@ describe('CanvasNodeDefault', () => {
|
|||
...createCanvasNodeProvide({
|
||||
data: {
|
||||
render: {
|
||||
type: 'default',
|
||||
type: CanvasNodeRenderType.Default,
|
||||
options: { configurable: true },
|
||||
},
|
||||
},
|
||||
|
|
@ -166,7 +167,7 @@ describe('CanvasNodeDefault', () => {
|
|||
{ type: NodeConnectionType.AiMemory, index: 0, required: true },
|
||||
],
|
||||
render: {
|
||||
type: 'default',
|
||||
type: CanvasNodeRenderType.Default,
|
||||
options: {
|
||||
configurable: true,
|
||||
},
|
||||
|
|
@ -191,7 +192,7 @@ describe('CanvasNodeDefault', () => {
|
|||
...createCanvasNodeProvide({
|
||||
data: {
|
||||
render: {
|
||||
type: 'default',
|
||||
type: CanvasNodeRenderType.Default,
|
||||
options: { configuration: true },
|
||||
},
|
||||
},
|
||||
|
|
@ -210,7 +211,7 @@ describe('CanvasNodeDefault', () => {
|
|||
...createCanvasNodeProvide({
|
||||
data: {
|
||||
render: {
|
||||
type: 'default',
|
||||
type: CanvasNodeRenderType.Default,
|
||||
options: { configurable: true, configuration: true },
|
||||
},
|
||||
},
|
||||
|
|
@ -231,7 +232,7 @@ describe('CanvasNodeDefault', () => {
|
|||
...createCanvasNodeProvide({
|
||||
data: {
|
||||
render: {
|
||||
type: 'default',
|
||||
type: CanvasNodeRenderType.Default,
|
||||
options: { trigger: true },
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import type { Connection } from '@vue-flow/core';
|
|||
import type { IConnection, Workflow } from 'n8n-workflow';
|
||||
import { NodeConnectionType } from 'n8n-workflow';
|
||||
import { useCanvasOperations } from '@/composables/useCanvasOperations';
|
||||
import type { CanvasElement } from '@/types';
|
||||
import type { CanvasNode } from '@/types';
|
||||
import type { ICredentialsResponse, INodeUi, IWorkflowDb, XYPosition } from '@/Interface';
|
||||
import { RemoveNodeCommand } from '@/models/history';
|
||||
import { useWorkflowsStore } from '@/stores/workflows.store';
|
||||
|
|
@ -76,7 +76,7 @@ describe('useCanvasOperations', () => {
|
|||
.spyOn(workflowsStore, 'setNodePositionById')
|
||||
.mockImplementation(() => {});
|
||||
const id = 'node1';
|
||||
const position: CanvasElement['position'] = { x: 10, y: 20 };
|
||||
const position: CanvasNode['position'] = { x: 10, y: 20 };
|
||||
const node = createTestNode({
|
||||
id,
|
||||
type: 'node',
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
import { ref } from 'vue';
|
||||
import { NodeConnectionType } from 'n8n-workflow';
|
||||
import { useNodeConnections } from '@/composables/useNodeConnections';
|
||||
import type { CanvasElementData } from '@/types';
|
||||
import type { CanvasNodeData } from '@/types';
|
||||
|
||||
describe('useNodeConnections', () => {
|
||||
const defaultConnections = { input: {}, output: {} };
|
||||
describe('mainInputs', () => {
|
||||
it('should return main inputs when provided with main inputs', () => {
|
||||
const inputs = ref<CanvasElementData['inputs']>([
|
||||
const inputs = ref<CanvasNodeData['inputs']>([
|
||||
{ type: NodeConnectionType.Main, index: 0 },
|
||||
{ type: NodeConnectionType.Main, index: 1 },
|
||||
{ type: NodeConnectionType.Main, index: 2 },
|
||||
{ type: NodeConnectionType.AiAgent, index: 0 },
|
||||
]);
|
||||
const outputs = ref<CanvasElementData['outputs']>([]);
|
||||
const outputs = ref<CanvasNodeData['outputs']>([]);
|
||||
|
||||
const { mainInputs } = useNodeConnections({
|
||||
inputs,
|
||||
|
|
@ -28,12 +28,12 @@ describe('useNodeConnections', () => {
|
|||
|
||||
describe('nonMainInputs', () => {
|
||||
it('should return non-main inputs when provided with non-main inputs', () => {
|
||||
const inputs = ref<CanvasElementData['inputs']>([
|
||||
const inputs = ref<CanvasNodeData['inputs']>([
|
||||
{ type: NodeConnectionType.Main, index: 0 },
|
||||
{ type: NodeConnectionType.AiAgent, index: 0 },
|
||||
{ type: NodeConnectionType.AiAgent, index: 1 },
|
||||
]);
|
||||
const outputs = ref<CanvasElementData['outputs']>([]);
|
||||
const outputs = ref<CanvasNodeData['outputs']>([]);
|
||||
|
||||
const { nonMainInputs } = useNodeConnections({
|
||||
inputs,
|
||||
|
|
@ -48,12 +48,12 @@ describe('useNodeConnections', () => {
|
|||
|
||||
describe('requiredNonMainInputs', () => {
|
||||
it('should return required non-main inputs when provided with required non-main inputs', () => {
|
||||
const inputs = ref<CanvasElementData['inputs']>([
|
||||
const inputs = ref<CanvasNodeData['inputs']>([
|
||||
{ type: NodeConnectionType.Main, index: 0 },
|
||||
{ type: NodeConnectionType.AiAgent, required: true, index: 0 },
|
||||
{ type: NodeConnectionType.AiAgent, required: false, index: 1 },
|
||||
]);
|
||||
const outputs = ref<CanvasElementData['outputs']>([]);
|
||||
const outputs = ref<CanvasNodeData['outputs']>([]);
|
||||
|
||||
const { requiredNonMainInputs } = useNodeConnections({
|
||||
inputs,
|
||||
|
|
@ -68,9 +68,9 @@ describe('useNodeConnections', () => {
|
|||
|
||||
describe('mainInputConnections', () => {
|
||||
it('should return main input connections when provided with main input connections', () => {
|
||||
const inputs = ref<CanvasElementData['inputs']>([]);
|
||||
const outputs = ref<CanvasElementData['outputs']>([]);
|
||||
const connections = ref<CanvasElementData['connections']>({
|
||||
const inputs = ref<CanvasNodeData['inputs']>([]);
|
||||
const outputs = ref<CanvasNodeData['outputs']>([]);
|
||||
const connections = ref<CanvasNodeData['connections']>({
|
||||
input: {
|
||||
[NodeConnectionType.Main]: [
|
||||
[{ node: 'node1', type: NodeConnectionType.Main, index: 0 }],
|
||||
|
|
@ -93,8 +93,8 @@ describe('useNodeConnections', () => {
|
|||
|
||||
describe('mainOutputs', () => {
|
||||
it('should return main outputs when provided with main outputs', () => {
|
||||
const inputs = ref<CanvasElementData['inputs']>([]);
|
||||
const outputs = ref<CanvasElementData['outputs']>([
|
||||
const inputs = ref<CanvasNodeData['inputs']>([]);
|
||||
const outputs = ref<CanvasNodeData['outputs']>([
|
||||
{ type: NodeConnectionType.Main, index: 0 },
|
||||
{ type: NodeConnectionType.Main, index: 1 },
|
||||
{ type: NodeConnectionType.Main, index: 2 },
|
||||
|
|
@ -114,8 +114,8 @@ describe('useNodeConnections', () => {
|
|||
|
||||
describe('nonMainOutputs', () => {
|
||||
it('should return non-main outputs when provided with non-main outputs', () => {
|
||||
const inputs = ref<CanvasElementData['inputs']>([]);
|
||||
const outputs = ref<CanvasElementData['outputs']>([
|
||||
const inputs = ref<CanvasNodeData['inputs']>([]);
|
||||
const outputs = ref<CanvasNodeData['outputs']>([
|
||||
{ type: NodeConnectionType.Main, index: 0 },
|
||||
{ type: NodeConnectionType.AiAgent, index: 0 },
|
||||
{ type: NodeConnectionType.AiAgent, index: 1 },
|
||||
|
|
@ -134,9 +134,9 @@ describe('useNodeConnections', () => {
|
|||
|
||||
describe('mainOutputConnections', () => {
|
||||
it('should return main output connections when provided with main output connections', () => {
|
||||
const inputs = ref<CanvasElementData['inputs']>([]);
|
||||
const outputs = ref<CanvasElementData['outputs']>([]);
|
||||
const connections = ref<CanvasElementData['connections']>({
|
||||
const inputs = ref<CanvasNodeData['inputs']>([]);
|
||||
const outputs = ref<CanvasNodeData['outputs']>([]);
|
||||
const connections = ref<CanvasNodeData['connections']>({
|
||||
input: {},
|
||||
output: {
|
||||
[NodeConnectionType.Main]: [
|
||||
|
|
|
|||
|
|
@ -3,10 +3,9 @@ import { ref } from 'vue';
|
|||
import { NodeConnectionType } from 'n8n-workflow';
|
||||
import type { Workflow } from 'n8n-workflow';
|
||||
import { createPinia, setActivePinia } from 'pinia';
|
||||
import { mock } from 'vitest-mock-extended';
|
||||
|
||||
import { useCanvasMapping } from '@/composables/useCanvasMapping';
|
||||
import type { IWorkflowDb } from '@/Interface';
|
||||
import type { INodeUi } from '@/Interface';
|
||||
import {
|
||||
createTestWorkflowObject,
|
||||
mockNode,
|
||||
|
|
@ -15,7 +14,7 @@ import {
|
|||
} from '@/__tests__/mocks';
|
||||
import { MANUAL_TRIGGER_NODE_TYPE, SET_NODE_TYPE } from '@/constants';
|
||||
import { useNodeTypesStore } from '@/stores/nodeTypes.store';
|
||||
import { useWorkflowsStore } from '../stores/workflows.store';
|
||||
import { useWorkflowsStore } from '@/stores/workflows.store';
|
||||
|
||||
beforeEach(() => {
|
||||
const pinia = createPinia();
|
||||
|
|
@ -37,38 +36,44 @@ afterEach(() => {
|
|||
|
||||
describe('useCanvasMapping', () => {
|
||||
it('should initialize with default props', () => {
|
||||
const workflow = mock<IWorkflowDb>({
|
||||
nodes: [],
|
||||
const nodes: INodeUi[] = [];
|
||||
const connections = {};
|
||||
const workflowObject = createTestWorkflowObject({
|
||||
nodes,
|
||||
connections,
|
||||
});
|
||||
const workflowObject = createTestWorkflowObject(workflow);
|
||||
|
||||
const { elements, connections } = useCanvasMapping({
|
||||
workflow: ref(workflow),
|
||||
const { nodes: mappedNodes, connections: mappedConnections } = useCanvasMapping({
|
||||
nodes: ref(nodes),
|
||||
connections: ref(connections),
|
||||
workflowObject: ref(workflowObject) as Ref<Workflow>,
|
||||
});
|
||||
|
||||
expect(elements.value).toEqual([]);
|
||||
expect(connections.value).toEqual([]);
|
||||
expect(mappedNodes.value).toEqual([]);
|
||||
expect(mappedConnections.value).toEqual([]);
|
||||
});
|
||||
|
||||
describe('elements', () => {
|
||||
it('should map nodes to canvas elements', () => {
|
||||
describe('nodes', () => {
|
||||
it('should map nodes to canvas nodes', () => {
|
||||
const manualTriggerNode = mockNode({
|
||||
name: 'Manual Trigger',
|
||||
type: MANUAL_TRIGGER_NODE_TYPE,
|
||||
disabled: false,
|
||||
});
|
||||
const workflow = mock<IWorkflowDb>({
|
||||
nodes: [manualTriggerNode],
|
||||
const nodes = [manualTriggerNode];
|
||||
const connections = {};
|
||||
const workflowObject = createTestWorkflowObject({
|
||||
nodes,
|
||||
connections,
|
||||
});
|
||||
const workflowObject = createTestWorkflowObject(workflow);
|
||||
|
||||
const { elements } = useCanvasMapping({
|
||||
workflow: ref(workflow),
|
||||
const { nodes: mappedNodes } = useCanvasMapping({
|
||||
nodes: ref(nodes),
|
||||
connections: ref(connections),
|
||||
workflowObject: ref(workflowObject) as Ref<Workflow>,
|
||||
});
|
||||
|
||||
expect(elements.value).toEqual([
|
||||
expect(mappedNodes.value).toEqual([
|
||||
{
|
||||
id: manualTriggerNode.id,
|
||||
label: manualTriggerNode.name,
|
||||
|
|
@ -133,17 +138,20 @@ describe('useCanvasMapping', () => {
|
|||
type: MANUAL_TRIGGER_NODE_TYPE,
|
||||
disabled: true,
|
||||
});
|
||||
const workflow = mock<IWorkflowDb>({
|
||||
nodes: [manualTriggerNode],
|
||||
const nodes = [manualTriggerNode];
|
||||
const connections = {};
|
||||
const workflowObject = createTestWorkflowObject({
|
||||
nodes,
|
||||
connections,
|
||||
});
|
||||
const workflowObject = createTestWorkflowObject(workflow);
|
||||
|
||||
const { elements } = useCanvasMapping({
|
||||
workflow: ref(workflow),
|
||||
const { nodes: mappedNodes } = useCanvasMapping({
|
||||
nodes: ref(nodes),
|
||||
connections: ref(connections),
|
||||
workflowObject: ref(workflowObject) as Ref<Workflow>,
|
||||
});
|
||||
|
||||
expect(elements.value[0]?.data?.disabled).toEqual(true);
|
||||
expect(mappedNodes.value[0]?.data?.disabled).toEqual(true);
|
||||
});
|
||||
|
||||
it('should handle execution state', () => {
|
||||
|
|
@ -152,42 +160,49 @@ describe('useCanvasMapping', () => {
|
|||
type: MANUAL_TRIGGER_NODE_TYPE,
|
||||
disabled: true,
|
||||
});
|
||||
const workflow = mock<IWorkflowDb>({
|
||||
nodes: [manualTriggerNode],
|
||||
const nodes = [manualTriggerNode];
|
||||
const connections = {};
|
||||
const workflowObject = createTestWorkflowObject({
|
||||
nodes,
|
||||
connections,
|
||||
});
|
||||
const workflowObject = createTestWorkflowObject(workflow);
|
||||
|
||||
useWorkflowsStore().addExecutingNode(manualTriggerNode.name);
|
||||
|
||||
const { elements } = useCanvasMapping({
|
||||
workflow: ref(workflow),
|
||||
const { nodes: mappedNodes } = useCanvasMapping({
|
||||
nodes: ref(nodes),
|
||||
connections: ref(connections),
|
||||
workflowObject: ref(workflowObject) as Ref<Workflow>,
|
||||
});
|
||||
|
||||
expect(elements.value[0]?.data?.execution.running).toEqual(true);
|
||||
expect(mappedNodes.value[0]?.data?.execution.running).toEqual(true);
|
||||
});
|
||||
|
||||
it('should handle input and output connections', () => {
|
||||
const [manualTriggerNode, setNode] = mockNodes.slice(0, 2);
|
||||
const workflow = mock<IWorkflowDb>({
|
||||
nodes: [manualTriggerNode, setNode],
|
||||
connections: {
|
||||
[manualTriggerNode.name]: {
|
||||
[NodeConnectionType.Main]: [
|
||||
[{ node: setNode.name, type: NodeConnectionType.Main, index: 0 }],
|
||||
],
|
||||
},
|
||||
const nodes = [manualTriggerNode, setNode];
|
||||
const connections = {
|
||||
[manualTriggerNode.name]: {
|
||||
[NodeConnectionType.Main]: [
|
||||
[{ node: setNode.name, type: NodeConnectionType.Main, index: 0 }],
|
||||
],
|
||||
},
|
||||
};
|
||||
const workflowObject = createTestWorkflowObject({
|
||||
nodes,
|
||||
connections,
|
||||
});
|
||||
const workflowObject = createTestWorkflowObject(workflow);
|
||||
|
||||
const { elements } = useCanvasMapping({
|
||||
workflow: ref(workflow),
|
||||
const { nodes: mappedNodes } = useCanvasMapping({
|
||||
nodes: ref(nodes),
|
||||
connections: ref(connections),
|
||||
workflowObject: ref(workflowObject) as Ref<Workflow>,
|
||||
});
|
||||
|
||||
expect(elements.value[0]?.data?.connections.output).toHaveProperty(NodeConnectionType.Main);
|
||||
expect(elements.value[0]?.data?.connections.output[NodeConnectionType.Main][0][0]).toEqual(
|
||||
expect(mappedNodes.value[0]?.data?.connections.output).toHaveProperty(
|
||||
NodeConnectionType.Main,
|
||||
);
|
||||
expect(mappedNodes.value[0]?.data?.connections.output[NodeConnectionType.Main][0][0]).toEqual(
|
||||
expect.objectContaining({
|
||||
node: setNode.name,
|
||||
type: NodeConnectionType.Main,
|
||||
|
|
@ -195,8 +210,8 @@ describe('useCanvasMapping', () => {
|
|||
}),
|
||||
);
|
||||
|
||||
expect(elements.value[1]?.data?.connections.input).toHaveProperty(NodeConnectionType.Main);
|
||||
expect(elements.value[1]?.data?.connections.input[NodeConnectionType.Main][0][0]).toEqual(
|
||||
expect(mappedNodes.value[1]?.data?.connections.input).toHaveProperty(NodeConnectionType.Main);
|
||||
expect(mappedNodes.value[1]?.data?.connections.input[NodeConnectionType.Main][0][0]).toEqual(
|
||||
expect.objectContaining({
|
||||
node: manualTriggerNode.name,
|
||||
type: NodeConnectionType.Main,
|
||||
|
|
@ -209,24 +224,26 @@ describe('useCanvasMapping', () => {
|
|||
describe('connections', () => {
|
||||
it('should map connections to canvas connections', () => {
|
||||
const [manualTriggerNode, setNode] = mockNodes.slice(0, 2);
|
||||
const workflow = mock<IWorkflowDb>({
|
||||
nodes: [manualTriggerNode, setNode],
|
||||
connections: {
|
||||
[manualTriggerNode.name]: {
|
||||
[NodeConnectionType.Main]: [
|
||||
[{ node: setNode.name, type: NodeConnectionType.Main, index: 0 }],
|
||||
],
|
||||
},
|
||||
const nodes = [manualTriggerNode, setNode];
|
||||
const connections = {
|
||||
[manualTriggerNode.name]: {
|
||||
[NodeConnectionType.Main]: [
|
||||
[{ node: setNode.name, type: NodeConnectionType.Main, index: 0 }],
|
||||
],
|
||||
},
|
||||
};
|
||||
const workflowObject = createTestWorkflowObject({
|
||||
nodes,
|
||||
connections,
|
||||
});
|
||||
const workflowObject = createTestWorkflowObject(workflow);
|
||||
|
||||
const { connections } = useCanvasMapping({
|
||||
workflow: ref(workflow),
|
||||
const { connections: mappedConnections } = useCanvasMapping({
|
||||
nodes: ref(nodes),
|
||||
connections: ref(connections),
|
||||
workflowObject: ref(workflowObject) as Ref<Workflow>,
|
||||
});
|
||||
|
||||
expect(connections.value).toEqual([
|
||||
expect(mappedConnections.value).toEqual([
|
||||
{
|
||||
data: {
|
||||
fromNodeName: manualTriggerNode.name,
|
||||
|
|
@ -254,27 +271,29 @@ describe('useCanvasMapping', () => {
|
|||
|
||||
it('should map multiple input types to canvas connections', () => {
|
||||
const [manualTriggerNode, setNode] = mockNodes.slice(0, 2);
|
||||
const workflow = mock<IWorkflowDb>({
|
||||
nodes: [manualTriggerNode, setNode],
|
||||
connections: {
|
||||
[manualTriggerNode.name]: {
|
||||
[NodeConnectionType.AiTool]: [
|
||||
[{ node: setNode.name, type: NodeConnectionType.AiTool, index: 0 }],
|
||||
],
|
||||
[NodeConnectionType.AiDocument]: [
|
||||
[{ node: setNode.name, type: NodeConnectionType.AiDocument, index: 1 }],
|
||||
],
|
||||
},
|
||||
const nodes = [manualTriggerNode, setNode];
|
||||
const connections = {
|
||||
[manualTriggerNode.name]: {
|
||||
[NodeConnectionType.AiTool]: [
|
||||
[{ node: setNode.name, type: NodeConnectionType.AiTool, index: 0 }],
|
||||
],
|
||||
[NodeConnectionType.AiDocument]: [
|
||||
[{ node: setNode.name, type: NodeConnectionType.AiDocument, index: 1 }],
|
||||
],
|
||||
},
|
||||
};
|
||||
const workflowObject = createTestWorkflowObject({
|
||||
nodes,
|
||||
connections,
|
||||
});
|
||||
const workflowObject = createTestWorkflowObject(workflow);
|
||||
|
||||
const { connections } = useCanvasMapping({
|
||||
workflow: ref(workflow),
|
||||
const { connections: mappedConnections } = useCanvasMapping({
|
||||
nodes: ref(nodes),
|
||||
connections: ref(connections),
|
||||
workflowObject: ref(workflowObject) as Ref<Workflow>,
|
||||
});
|
||||
|
||||
expect(connections.value).toEqual([
|
||||
expect(mappedConnections.value).toEqual([
|
||||
{
|
||||
data: {
|
||||
fromNodeName: manualTriggerNode.name,
|
||||
|
|
|
|||
|
|
@ -12,9 +12,10 @@ import type {
|
|||
CanvasConnection,
|
||||
CanvasConnectionData,
|
||||
CanvasConnectionPort,
|
||||
CanvasElement,
|
||||
CanvasElementData,
|
||||
CanvasNode,
|
||||
CanvasNodeData,
|
||||
} from '@/types';
|
||||
import { CanvasNodeRenderType } from '@/types';
|
||||
import {
|
||||
mapLegacyConnectionsToCanvasConnections,
|
||||
mapLegacyEndpointsToCanvasConnectionPort,
|
||||
|
|
@ -22,20 +23,23 @@ import {
|
|||
import type {
|
||||
ExecutionStatus,
|
||||
ExecutionSummary,
|
||||
IConnections,
|
||||
INodeExecutionData,
|
||||
ITaskData,
|
||||
Workflow,
|
||||
} from 'n8n-workflow';
|
||||
import { NodeHelpers } from 'n8n-workflow';
|
||||
import type { IWorkflowDb } from '@/Interface';
|
||||
import type { INodeUi } from '@/Interface';
|
||||
import { WAIT_TIME_UNLIMITED } from '@/constants';
|
||||
import { sanitizeHtml } from '@/utils/htmlUtils';
|
||||
|
||||
export function useCanvasMapping({
|
||||
workflow,
|
||||
nodes,
|
||||
connections,
|
||||
workflowObject,
|
||||
}: {
|
||||
workflow: Ref<IWorkflowDb>;
|
||||
nodes: Ref<INodeUi[]>;
|
||||
connections: Ref<IConnections>;
|
||||
workflowObject: Ref<Workflow>;
|
||||
}) {
|
||||
const i18n = useI18n();
|
||||
|
|
@ -44,24 +48,36 @@ export function useCanvasMapping({
|
|||
|
||||
const renderTypeByNodeType = computed(
|
||||
() =>
|
||||
workflow.value.nodes.reduce<Record<string, CanvasElementData['render']>>((acc, node) => {
|
||||
nodes.value.reduce<Record<string, CanvasNodeData['render']>>((acc, node) => {
|
||||
// @TODO Add support for sticky notes here
|
||||
|
||||
acc[node.type] = {
|
||||
type: 'default',
|
||||
options: {
|
||||
trigger: nodeTypesStore.isTriggerNode(node.type),
|
||||
configuration: nodeTypesStore.isConfigNode(workflowObject.value, node, node.type),
|
||||
configurable: nodeTypesStore.isConfigurableNode(workflowObject.value, node, node.type),
|
||||
},
|
||||
};
|
||||
switch (node.type) {
|
||||
case `${CanvasNodeRenderType.AddNodes}`:
|
||||
acc[node.type] = {
|
||||
type: CanvasNodeRenderType.AddNodes,
|
||||
options: {},
|
||||
};
|
||||
break;
|
||||
default:
|
||||
acc[node.type] = {
|
||||
type: CanvasNodeRenderType.Default,
|
||||
options: {
|
||||
trigger: nodeTypesStore.isTriggerNode(node.type),
|
||||
configuration: nodeTypesStore.isConfigNode(workflowObject.value, node, node.type),
|
||||
configurable: nodeTypesStore.isConfigurableNode(
|
||||
workflowObject.value,
|
||||
node,
|
||||
node.type,
|
||||
),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
return acc;
|
||||
}, {}) ?? {},
|
||||
);
|
||||
|
||||
const nodeInputsById = computed(() =>
|
||||
workflow.value.nodes.reduce<Record<string, CanvasConnectionPort[]>>((acc, node) => {
|
||||
nodes.value.reduce<Record<string, CanvasConnectionPort[]>>((acc, node) => {
|
||||
const nodeTypeDescription = nodeTypesStore.getNodeType(node.type);
|
||||
const workflowObjectNode = workflowObject.value.getNode(node.name);
|
||||
|
||||
|
|
@ -81,7 +97,7 @@ export function useCanvasMapping({
|
|||
);
|
||||
|
||||
const nodeOutputsById = computed(() =>
|
||||
workflow.value.nodes.reduce<Record<string, CanvasConnectionPort[]>>((acc, node) => {
|
||||
nodes.value.reduce<Record<string, CanvasConnectionPort[]>>((acc, node) => {
|
||||
const nodeTypeDescription = nodeTypesStore.getNodeType(node.type);
|
||||
const workflowObjectNode = workflowObject.value.getNode(node.name);
|
||||
|
||||
|
|
@ -101,21 +117,21 @@ export function useCanvasMapping({
|
|||
);
|
||||
|
||||
const nodePinnedDataById = computed(() =>
|
||||
workflow.value.nodes.reduce<Record<string, INodeExecutionData[] | undefined>>((acc, node) => {
|
||||
nodes.value.reduce<Record<string, INodeExecutionData[] | undefined>>((acc, node) => {
|
||||
acc[node.id] = workflowsStore.pinDataByNodeName(node.name);
|
||||
return acc;
|
||||
}, {}),
|
||||
);
|
||||
|
||||
const nodeExecutionRunningById = computed(() =>
|
||||
workflow.value.nodes.reduce<Record<string, boolean>>((acc, node) => {
|
||||
nodes.value.reduce<Record<string, boolean>>((acc, node) => {
|
||||
acc[node.id] = workflowsStore.isNodeExecuting(node.name);
|
||||
return acc;
|
||||
}, {}),
|
||||
);
|
||||
|
||||
const nodeExecutionStatusById = computed(() =>
|
||||
workflow.value.nodes.reduce<Record<string, ExecutionStatus>>((acc, node) => {
|
||||
nodes.value.reduce<Record<string, ExecutionStatus>>((acc, node) => {
|
||||
acc[node.id] =
|
||||
workflowsStore.getWorkflowRunData?.[node.name]?.filter(Boolean)[0].executionStatus ?? 'new';
|
||||
return acc;
|
||||
|
|
@ -123,14 +139,14 @@ export function useCanvasMapping({
|
|||
);
|
||||
|
||||
const nodeExecutionRunDataById = computed(() =>
|
||||
workflow.value.nodes.reduce<Record<string, ITaskData[] | null>>((acc, node) => {
|
||||
nodes.value.reduce<Record<string, ITaskData[] | null>>((acc, node) => {
|
||||
acc[node.id] = workflowsStore.getWorkflowResultDataByNodeName(node.name);
|
||||
return acc;
|
||||
}, {}),
|
||||
);
|
||||
|
||||
const nodeIssuesById = computed(() =>
|
||||
workflow.value.nodes.reduce<Record<string, string[]>>((acc, node) => {
|
||||
nodes.value.reduce<Record<string, string[]>>((acc, node) => {
|
||||
const issues: string[] = [];
|
||||
const nodeExecutionRunData = workflowsStore.getWorkflowRunData?.[node.name];
|
||||
if (nodeExecutionRunData) {
|
||||
|
|
@ -154,7 +170,7 @@ export function useCanvasMapping({
|
|||
);
|
||||
|
||||
const nodeHasIssuesById = computed(() =>
|
||||
workflow.value.nodes.reduce<Record<string, boolean>>((acc, node) => {
|
||||
nodes.value.reduce<Record<string, boolean>>((acc, node) => {
|
||||
if (['crashed', 'error'].includes(nodeExecutionStatusById.value[node.id])) {
|
||||
acc[node.id] = true;
|
||||
} else if (nodePinnedDataById.value[node.id]) {
|
||||
|
|
@ -168,7 +184,7 @@ export function useCanvasMapping({
|
|||
);
|
||||
|
||||
const nodeExecutionWaitingById = computed(() =>
|
||||
workflow.value.nodes.reduce<Record<string, string | undefined>>((acc, node) => {
|
||||
nodes.value.reduce<Record<string, string | undefined>>((acc, node) => {
|
||||
const isExecutionSummary = (execution: object): execution is ExecutionSummary =>
|
||||
'waitTill' in execution;
|
||||
|
||||
|
|
@ -198,12 +214,12 @@ export function useCanvasMapping({
|
|||
}, {}),
|
||||
);
|
||||
|
||||
const elements = computed<CanvasElement[]>(() => [
|
||||
...workflow.value.nodes.map<CanvasElement>((node) => {
|
||||
const mappedNodes = computed<CanvasNode[]>(() => [
|
||||
...nodes.value.map<CanvasNode>((node) => {
|
||||
const inputConnections = workflowObject.value.connectionsByDestinationNode[node.name] ?? {};
|
||||
const outputConnections = workflowObject.value.connectionsBySourceNode[node.name] ?? {};
|
||||
|
||||
const data: CanvasElementData = {
|
||||
const data: CanvasNodeData = {
|
||||
id: node.id,
|
||||
type: node.type,
|
||||
typeVersion: node.typeVersion,
|
||||
|
|
@ -244,31 +260,26 @@ export function useCanvasMapping({
|
|||
}),
|
||||
]);
|
||||
|
||||
const connections = computed<CanvasConnection[]>(() => {
|
||||
const mappedConnections = mapLegacyConnectionsToCanvasConnections(
|
||||
workflow.value.connections ?? [],
|
||||
workflow.value.nodes ?? [],
|
||||
const mappedConnections = computed<CanvasConnection[]>(() => {
|
||||
return mapLegacyConnectionsToCanvasConnections(connections.value ?? [], nodes.value ?? []).map(
|
||||
(connection) => {
|
||||
const type = getConnectionType(connection);
|
||||
const label = getConnectionLabel(connection);
|
||||
const data = getConnectionData(connection);
|
||||
|
||||
return {
|
||||
...connection,
|
||||
data,
|
||||
type,
|
||||
label,
|
||||
animated: data.status === 'running',
|
||||
};
|
||||
},
|
||||
);
|
||||
|
||||
return mappedConnections.map((connection) => {
|
||||
const type = getConnectionType(connection);
|
||||
const label = getConnectionLabel(connection);
|
||||
const data = getConnectionData(connection);
|
||||
|
||||
return {
|
||||
...connection,
|
||||
data,
|
||||
type,
|
||||
label,
|
||||
animated: data.status === 'running',
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
function getConnectionData(connection: CanvasConnection): CanvasConnectionData {
|
||||
const fromNode = workflow.value.nodes.find(
|
||||
(node) => node.name === connection.data?.fromNodeName,
|
||||
);
|
||||
const fromNode = nodes.value.find((node) => node.name === connection.data?.fromNodeName);
|
||||
|
||||
let status: CanvasConnectionData['status'];
|
||||
if (fromNode) {
|
||||
|
|
@ -297,9 +308,7 @@ export function useCanvasMapping({
|
|||
}
|
||||
|
||||
function getConnectionLabel(connection: CanvasConnection): string {
|
||||
const fromNode = workflow.value.nodes.find(
|
||||
(node) => node.name === connection.data?.fromNodeName,
|
||||
);
|
||||
const fromNode = nodes.value.find((node) => node.name === connection.data?.fromNodeName);
|
||||
|
||||
if (!fromNode) {
|
||||
return '';
|
||||
|
|
@ -323,7 +332,7 @@ export function useCanvasMapping({
|
|||
}
|
||||
|
||||
return {
|
||||
connections,
|
||||
elements,
|
||||
connections: mappedConnections,
|
||||
nodes: mappedNodes,
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { useCanvasNode } from '@/composables/useCanvasNode';
|
||||
import { inject, ref } from 'vue';
|
||||
import type { CanvasNodeInjectionData } from '../types';
|
||||
import { CanvasNodeRenderType } from '../types';
|
||||
|
||||
vi.mock('vue', async () => {
|
||||
const actual = await vi.importActual('vue');
|
||||
|
|
@ -47,7 +48,7 @@ describe('useCanvasNode', () => {
|
|||
runData: { count: 1, visible: true },
|
||||
pinnedData: { count: 1, visible: true },
|
||||
render: {
|
||||
type: 'default',
|
||||
type: CanvasNodeRenderType.Default,
|
||||
options: {
|
||||
configurable: false,
|
||||
configuration: false,
|
||||
|
|
|
|||
|
|
@ -5,11 +5,12 @@
|
|||
|
||||
import { CanvasNodeKey } from '@/constants';
|
||||
import { computed, inject } from 'vue';
|
||||
import type { CanvasElementData } from '@/types';
|
||||
import type { CanvasNodeData } from '@/types';
|
||||
import { CanvasNodeRenderType } from '@/types';
|
||||
|
||||
export function useCanvasNode() {
|
||||
const node = inject(CanvasNodeKey);
|
||||
const data = computed<CanvasElementData>(
|
||||
const data = computed<CanvasNodeData>(
|
||||
() =>
|
||||
node?.data.value ?? {
|
||||
id: '',
|
||||
|
|
@ -26,7 +27,7 @@ export function useCanvasNode() {
|
|||
},
|
||||
runData: { count: 0, visible: false },
|
||||
render: {
|
||||
type: 'default',
|
||||
type: CanvasNodeRenderType.Default,
|
||||
options: {},
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
* @TODO Remove this notice when Canvas V2 is the only one in use
|
||||
*/
|
||||
|
||||
import type { CanvasElement } from '@/types';
|
||||
import type { CanvasNode } from '@/types';
|
||||
import { CanvasConnectionMode } from '@/types';
|
||||
import type {
|
||||
AddedNodesAndConnections,
|
||||
|
|
@ -105,7 +105,7 @@ export function useCanvasOperations({
|
|||
|
||||
function updateNodePosition(
|
||||
id: string,
|
||||
position: CanvasElement['position'],
|
||||
position: CanvasNode['position'],
|
||||
{ trackHistory = false, trackBulk = true } = {},
|
||||
) {
|
||||
const node = workflowsStore.getNodeById(id);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import type { CanvasElementData } from '@/types';
|
||||
import type { CanvasNodeData } from '@/types';
|
||||
import type { MaybeRef } from 'vue';
|
||||
import { computed, unref } from 'vue';
|
||||
import { NodeConnectionType } from 'n8n-workflow';
|
||||
|
|
@ -8,9 +8,9 @@ export function useNodeConnections({
|
|||
outputs,
|
||||
connections,
|
||||
}: {
|
||||
inputs: MaybeRef<CanvasElementData['inputs']>;
|
||||
outputs: MaybeRef<CanvasElementData['outputs']>;
|
||||
connections: MaybeRef<CanvasElementData['connections']>;
|
||||
inputs: MaybeRef<CanvasNodeData['inputs']>;
|
||||
outputs: MaybeRef<CanvasNodeData['outputs']>;
|
||||
connections: MaybeRef<CanvasNodeData['connections']>;
|
||||
}) {
|
||||
/**
|
||||
* Inputs
|
||||
|
|
|
|||
|
|
@ -211,6 +211,17 @@ export const useNodeCreatorStore = defineStore(STORES.NODE_CREATOR, () => {
|
|||
}
|
||||
}
|
||||
|
||||
function openNodeCreatorForTriggerNodes(source: NodeCreatorOpenSource) {
|
||||
ndvStore.activeNodeName = null;
|
||||
setSelectedView(TRIGGER_NODE_CREATOR_VIEW);
|
||||
setShowScrim(true);
|
||||
openNodeCreator({
|
||||
source,
|
||||
createNodeActive: true,
|
||||
nodeCreatorView: TRIGGER_NODE_CREATOR_VIEW,
|
||||
});
|
||||
}
|
||||
|
||||
function getNodeCreatorFilter(nodeName: string, outputType?: NodeConnectionType) {
|
||||
let filter;
|
||||
const workflow = workflowsStore.getCurrentWorkflow();
|
||||
|
|
@ -252,6 +263,7 @@ export const useNodeCreatorStore = defineStore(STORES.NODE_CREATOR, () => {
|
|||
openNodeCreator,
|
||||
openSelectiveNodeCreator,
|
||||
openNodeCreatorForConnectingNode,
|
||||
openNodeCreatorForTriggerNodes,
|
||||
allNodeCreatorNodes,
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,8 +10,6 @@ import type { DefaultEdge, Node, NodeProps, Position } from '@vue-flow/core';
|
|||
import type { INodeUi } from '@/Interface';
|
||||
import type { ComputedRef, Ref } from 'vue';
|
||||
|
||||
export type CanvasElementType = 'node' | 'note';
|
||||
|
||||
export type CanvasConnectionPortType = ConnectionTypes;
|
||||
|
||||
export const enum CanvasConnectionMode {
|
||||
|
|
@ -36,7 +34,26 @@ export interface CanvasElementPortWithPosition extends CanvasConnectionPort {
|
|||
offset?: { top?: string; left?: string };
|
||||
}
|
||||
|
||||
export interface CanvasElementData {
|
||||
export const enum CanvasNodeRenderType {
|
||||
Default = 'default',
|
||||
AddNodes = 'n8n-nodes-internal.addNodes',
|
||||
}
|
||||
|
||||
export type CanvasNodeDefaultRender = {
|
||||
type: CanvasNodeRenderType.Default;
|
||||
options: Partial<{
|
||||
configurable: boolean;
|
||||
configuration: boolean;
|
||||
trigger: boolean;
|
||||
}>;
|
||||
};
|
||||
|
||||
export type CanvasNodeAddNodesRender = {
|
||||
type: CanvasNodeRenderType.AddNodes;
|
||||
options: Record<string, never>;
|
||||
};
|
||||
|
||||
export interface CanvasNodeData {
|
||||
id: INodeUi['id'];
|
||||
type: INodeUi['type'];
|
||||
typeVersion: INodeUi['typeVersion'];
|
||||
|
|
@ -64,13 +81,10 @@ export interface CanvasElementData {
|
|||
count: number;
|
||||
visible: boolean;
|
||||
};
|
||||
render: {
|
||||
type: 'default';
|
||||
options: Partial<{ configurable: boolean; configuration: boolean; trigger: boolean }>;
|
||||
};
|
||||
render: CanvasNodeDefaultRender | CanvasNodeAddNodesRender;
|
||||
}
|
||||
|
||||
export type CanvasElement = Node<CanvasElementData>;
|
||||
export type CanvasNode = Node<CanvasNodeData>;
|
||||
|
||||
export interface CanvasConnectionData {
|
||||
source: CanvasConnectionPort;
|
||||
|
|
@ -91,7 +105,7 @@ export interface CanvasPlugin {
|
|||
|
||||
export interface CanvasNodeInjectionData {
|
||||
id: Ref<string>;
|
||||
data: Ref<CanvasElementData>;
|
||||
data: Ref<CanvasNodeData>;
|
||||
label: Ref<NodeProps['label']>;
|
||||
selected: Ref<NodeProps['selected']>;
|
||||
nodeType: ComputedRef<INodeTypeDescription | null>;
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ import { onBeforeRouteLeave, useRoute, useRouter } from 'vue-router';
|
|||
import WorkflowCanvas from '@/components/canvas/WorkflowCanvas.vue';
|
||||
import { useNodeTypesStore } from '@/stores/nodeTypes.store';
|
||||
import { useUIStore } from '@/stores/ui.store';
|
||||
import CanvasExecuteWorkflowButton from '@/components/canvas/elements/buttons/CanvasExecuteWorkflowButton.vue';
|
||||
import CanvasRunWorkflowButton from '@/components/canvas/elements/buttons/CanvasRunWorkflowButton.vue';
|
||||
import { useI18n } from '@/composables/useI18n';
|
||||
import { useWorkflowsStore } from '@/stores/workflows.store';
|
||||
import { useRunWorkflow } from '@/composables/useRunWorkflow';
|
||||
|
|
@ -27,15 +27,19 @@ import type {
|
|||
XYPosition,
|
||||
} from '@/Interface';
|
||||
import type { Connection } from '@vue-flow/core';
|
||||
import type { CanvasElement, ConnectStartEvent } from '@/types';
|
||||
import type { CanvasNode, ConnectStartEvent } from '@/types';
|
||||
import { CanvasNodeRenderType } from '@/types';
|
||||
import {
|
||||
CANVAS_AUTO_ADD_MANUAL_TRIGGER_EXPERIMENT,
|
||||
CHAT_TRIGGER_NODE_TYPE,
|
||||
EnterpriseEditionFeature,
|
||||
MAIN_HEADER_TABS,
|
||||
MANUAL_CHAT_TRIGGER_NODE_TYPE,
|
||||
MODAL_CANCEL,
|
||||
MODAL_CONFIRM,
|
||||
NODE_CREATOR_OPEN_SOURCES,
|
||||
PLACEHOLDER_EMPTY_WORKFLOW_ID,
|
||||
START_NODE_TYPE,
|
||||
VIEWS,
|
||||
} from '@/constants';
|
||||
import { useSourceControlStore } from '@/stores/sourceControl.store';
|
||||
|
|
@ -79,6 +83,7 @@ import { getNodeViewTab } from '@/utils/canvasUtils';
|
|||
import { parseCanvasConnectionHandleString } from '@/utils/canvasUtilsV2';
|
||||
import CanvasStopCurrentExecutionButton from '@/components/canvas/elements/buttons/CanvasStopCurrentExecutionButton.vue';
|
||||
import CanvasStopWaitingForWebhookButton from '@/components/canvas/elements/buttons/CanvasStopWaitingForWebhookButton.vue';
|
||||
import { nodeViewEventBus } from '@/event-bus';
|
||||
|
||||
const NodeCreation = defineAsyncComponent(
|
||||
async () => await import('@/components/Node/NodeCreation.vue'),
|
||||
|
|
@ -165,6 +170,25 @@ const isReadOnlyEnvironment = computed(() => {
|
|||
return sourceControlStore.preferences.branchReadOnly;
|
||||
});
|
||||
|
||||
const isCanvasReadOnly = computed(() => {
|
||||
return isLoading.value || isDemoRoute.value || isReadOnlyEnvironment.value;
|
||||
});
|
||||
|
||||
const fallbackNodes = computed<INodeUi[]>(() =>
|
||||
isCanvasReadOnly.value
|
||||
? []
|
||||
: [
|
||||
{
|
||||
id: CanvasNodeRenderType.AddNodes,
|
||||
name: CanvasNodeRenderType.AddNodes,
|
||||
type: CanvasNodeRenderType.AddNodes,
|
||||
typeVersion: 1,
|
||||
position: [0, 0],
|
||||
parameters: {},
|
||||
},
|
||||
],
|
||||
);
|
||||
|
||||
/**
|
||||
* Initialization
|
||||
*/
|
||||
|
|
@ -412,7 +436,20 @@ function makeNewWorkflowShareable() {
|
|||
* Nodes
|
||||
*/
|
||||
|
||||
function onUpdateNodePosition(id: string, position: CanvasElement['position']) {
|
||||
const triggerNodes = computed(() => {
|
||||
return editableWorkflow.value.nodes.filter(
|
||||
(node) => node.type === START_NODE_TYPE || nodeTypesStore.isTriggerNode(node.type),
|
||||
);
|
||||
});
|
||||
|
||||
const containsTriggerNodes = computed(() => triggerNodes.value.length > 0);
|
||||
|
||||
const allTriggerNodesDisabled = computed(() => {
|
||||
const disabledTriggerNodes = triggerNodes.value.filter((node) => node.disabled);
|
||||
return disabledTriggerNodes.length === triggerNodes.value.length;
|
||||
});
|
||||
|
||||
function onUpdateNodePosition(id: string, position: CanvasNode['position']) {
|
||||
updateNodePosition(id, position, { trackHistory: true });
|
||||
}
|
||||
|
||||
|
|
@ -559,6 +596,18 @@ const isStoppingExecution = ref(false);
|
|||
const isWorkflowRunning = computed(() => uiStore.isActionActive.workflowRunning);
|
||||
const isExecutionWaitingForWebhook = computed(() => workflowsStore.executionWaitingForWebhook);
|
||||
|
||||
const isExecutionDisabled = computed(() => {
|
||||
if (
|
||||
containsChatTriggerNodes.value &&
|
||||
isOnlyChatTriggerNodeActive.value &&
|
||||
!chatTriggerNodePinnedData.value
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return !containsTriggerNodes.value || allTriggerNodesDisabled.value;
|
||||
});
|
||||
|
||||
const isStopExecutionButtonVisible = computed(
|
||||
() => isWorkflowRunning.value && !isExecutionWaitingForWebhook.value,
|
||||
);
|
||||
|
|
@ -623,6 +672,43 @@ async function onStopWaitingForWebhook() {
|
|||
await stopWaitingForWebhook();
|
||||
}
|
||||
|
||||
function onRunWorkflowButtonMouseEnter() {
|
||||
nodeViewEventBus.emit('runWorkflowButton:mouseenter');
|
||||
}
|
||||
|
||||
function onRunWorkflowButtonMouseLeave() {
|
||||
nodeViewEventBus.emit('runWorkflowButton:mouseleave');
|
||||
}
|
||||
|
||||
/**
|
||||
* Chat
|
||||
*/
|
||||
|
||||
const chatTriggerNode = computed(() => {
|
||||
return editableWorkflow.value.nodes.find((node) => node.type === CHAT_TRIGGER_NODE_TYPE);
|
||||
});
|
||||
|
||||
const containsChatTriggerNodes = computed(() => {
|
||||
return (
|
||||
!isExecutionWaitingForWebhook.value &&
|
||||
!!editableWorkflow.value.nodes.find(
|
||||
(node) =>
|
||||
[MANUAL_CHAT_TRIGGER_NODE_TYPE, CHAT_TRIGGER_NODE_TYPE].includes(node.type) &&
|
||||
node.disabled !== true,
|
||||
)
|
||||
);
|
||||
});
|
||||
|
||||
const isOnlyChatTriggerNodeActive = computed(() => {
|
||||
return triggerNodes.value.every((node) => node.disabled || node.type === CHAT_TRIGGER_NODE_TYPE);
|
||||
});
|
||||
|
||||
const chatTriggerNodePinnedData = computed(() => {
|
||||
if (!chatTriggerNode.value) return null;
|
||||
|
||||
return workflowsStore.pinDataByNodeName(chatTriggerNode.value.name);
|
||||
});
|
||||
|
||||
/**
|
||||
* Keyboard
|
||||
*/
|
||||
|
|
@ -834,7 +920,7 @@ async function checkAndInitDebugMode() {
|
|||
* Mouse events
|
||||
*/
|
||||
|
||||
function onClickPane(position: CanvasElement['position']) {
|
||||
function onClickPane(position: CanvasNode['position']) {
|
||||
lastClickPosition.value = [position.x, position.y];
|
||||
canvasStore.newNodeInsertPosition = [position.x, position.y];
|
||||
}
|
||||
|
|
@ -967,6 +1053,7 @@ onBeforeUnmount(() => {
|
|||
v-if="editableWorkflow && editableWorkflowObject"
|
||||
:workflow="editableWorkflow"
|
||||
:workflow-object="editableWorkflowObject"
|
||||
:fallback-nodes="fallbackNodes"
|
||||
@update:node:position="onUpdateNodePosition"
|
||||
@update:node:active="onSetNodeActive"
|
||||
@update:node:selected="onSetNodeSelected"
|
||||
|
|
@ -979,9 +1066,12 @@ onBeforeUnmount(() => {
|
|||
@click:pane="onClickPane"
|
||||
>
|
||||
<div :class="$style.executionButtons">
|
||||
<CanvasExecuteWorkflowButton
|
||||
<CanvasRunWorkflowButton
|
||||
:waiting-for-webhook="isExecutionWaitingForWebhook"
|
||||
:disabled="isExecutionDisabled"
|
||||
:executing="isWorkflowRunning"
|
||||
@mouseenter="onRunWorkflowButtonMouseEnter"
|
||||
@mouseleave="onRunWorkflowButtonMouseLeave"
|
||||
@click="onRunWorkflow"
|
||||
/>
|
||||
<CanvasStopCurrentExecutionButton
|
||||
|
|
|
|||
Loading…
Reference in a new issue