diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.spec.ts b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.spec.ts
index 084597e4d8..6ba17c31e7 100644
--- a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.spec.ts
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.spec.ts
@@ -4,7 +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';
+import { CanvasConnectionMode, CanvasNodeRenderType } from '@/types';
const renderComponent = createComponentRenderer(CanvasNodeDefault);
@@ -158,6 +158,36 @@ describe('CanvasNodeDefault', () => {
});
expect(getByText('Test Node').closest('.node')).not.toHaveClass('disabled');
});
+
+ it('should render strike-through when node is disabled and has node input and output handles', () => {
+ const { container } = renderComponent({
+ global: {
+ provide: {
+ ...createCanvasNodeProvide({
+ data: {
+ disabled: true,
+ inputs: [{ type: NodeConnectionType.Main, index: 0 }],
+ outputs: [{ type: NodeConnectionType.Main, index: 0 }],
+ connections: {
+ [CanvasConnectionMode.Input]: {
+ [NodeConnectionType.Main]: [
+ [{ node: 'node', type: NodeConnectionType.Main, index: 0 }],
+ ],
+ },
+ [CanvasConnectionMode.Output]: {
+ [NodeConnectionType.Main]: [
+ [{ node: 'node', type: NodeConnectionType.Main, index: 0 }],
+ ],
+ },
+ },
+ },
+ }),
+ },
+ },
+ });
+
+ expect(container.querySelector('.disabledStrikeThrough')).toBeVisible();
+ });
});
describe('running', () => {
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue
index bc443c1732..7a7f16f017 100644
--- a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue
@@ -30,7 +30,14 @@ const {
hasIssues,
render,
} = useCanvasNode();
-const { mainOutputs, mainInputs, nonMainInputs, requiredNonMainInputs } = useNodeConnections({
+const {
+ mainOutputs,
+ mainOutputConnections,
+ mainInputs,
+ mainInputConnections,
+ nonMainInputs,
+ requiredNonMainInputs,
+} = useNodeConnections({
inputs,
outputs,
connections,
@@ -86,6 +93,15 @@ const dataTestId = computed(() => {
return `canvas-${type}-node`;
});
+const isStrikethroughVisible = computed(() => {
+ const isSingleMainInputNode =
+ mainInputs.value.length === 1 && mainInputConnections.value.length <= 1;
+ const isSingleMainOutputNode =
+ mainOutputs.value.length === 1 && mainOutputConnections.value.length <= 1;
+
+ return isDisabled.value && isSingleMainInputNode && isSingleMainOutputNode;
+});
+
function openContextMenu(event: MouseEvent) {
emit('open:contextmenu', event);
}
@@ -103,7 +119,7 @@ function openContextMenu(event: MouseEvent) {