feat(editor): Render trigger node on canvas v2 (no-changelog) (#10001)

packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue

@@ -107,6 +107,8 @@ provide(CanvasNodeKey, {
 	nodeType,
 });
 
+const nodeIconSize = computed(() => (data.value.render.options.configuration ? 30 : 40));
+
 function onDelete() {
 	emit('delete', props.id);
 }
@@ -160,7 +162,7 @@ function onActivate() {
 		/>
 
 		<CanvasNodeRenderer v-if="nodeType" @dblclick="onActivate">
-			<NodeIcon :node-type="nodeType" :size="40" :shrink="false" :disabled="isDisabled" />
+			<NodeIcon :node-type="nodeType" :size="nodeIconSize" :shrink="false" :disabled="isDisabled" />
 			<!--			:color-default="iconColorDefault"-->
 		</CanvasNodeRenderer>
 	</div>

packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.spec.ts

@@ -222,4 +222,25 @@ describe('CanvasNodeDefault', () => {
 			expect(getByTestId('canvas-configurable-node')).toMatchSnapshot();
 		});
 	});
+
+	describe('trigger', () => {
+		it('should render trigger node correctly', () => {
+			const { getByTestId } = renderComponent({
+				global: {
+					provide: {
+						...createCanvasNodeProvide({
+							data: {
+								render: {
+									type: 'default',
+									options: { trigger: true },
+								},
+							},
+						}),
+					},
+				},
+			});
+
+			expect(getByTestId('canvas-trigger-node')).toMatchSnapshot();
+		});
+	});
 });

packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue

@@ -6,6 +6,7 @@ import CanvasNodeDisabledStrikeThrough from './parts/CanvasNodeDisabledStrikeThr
 import CanvasNodeStatusIcons from '@/components/canvas/elements/nodes/render-types/parts/CanvasNodeStatusIcons.vue';
 import { useCanvasNode } from '@/composables/useCanvasNode';
 import { NODE_INSERT_SPACER_BETWEEN_INPUT_GROUPS } from '@/constants';
+import { N8nTooltip } from 'n8n-design-system';
 
 const $style = useCssModule();
 const i18n = useI18n();
@@ -80,6 +81,14 @@ const dataTestId = computed(() => {
 <template>
 	<div :class="classes" :style="styles" :data-test-id="dataTestId">
 		<slot />
+		<N8nTooltip v-if="renderOptions.trigger" placement="bottom">
+			<template #content>
+				<span v-html="$locale.baseText('node.thisIsATriggerNode')" />
+			</template>
+			<div :class="$style.triggerIcon">
+				<FontAwesomeIcon icon="bolt" size="lg" />
+			</div>
+		</N8nTooltip>
 		<CanvasNodeStatusIcons :class="$style.statusIcons" />
 		<CanvasNodeDisabledStrikeThrough v-if="isDisabled" />
 		<div v-if="label" :class="$style.label">
@@ -91,12 +100,14 @@ const dataTestId = computed(() => {
 
 <style lang="scss" module>
 .node {
-	--canvas-node--height: calc(100px + max(0, var(--canvas-node--main-output-count, 1) - 4) * 50px);
-	--canvas-node--width: 100px;
+	--canvas-node--height: calc(96px + max(0, var(--canvas-node--main-output-count, 1) - 4) * 48px);
+	--canvas-node--width: 96px;
+	--canvas-node-border-width: 2px;
 	--configurable-node--min-input-count: 4;
-	--configurable-node--input-width: 65px;
+	--configurable-node--input-width: 64px;
 	--configurable-node--icon-offset: 40px;
 	--configurable-node--icon-size: 30px;
+	--trigger-node--border-radius: 36px;
 
 	height: var(--canvas-node--height);
 	width: var(--canvas-node--width);
@@ -104,19 +115,26 @@ const dataTestId = computed(() => {
 	align-items: center;
 	justify-content: center;
 	background: var(--canvas-node--background, var(--color-node-background));
-	border: 2px solid var(--canvas-node--border-color, var(--color-foreground-xdark));
+	border: var(--canvas-node-border-width) solid
+		var(--canvas-node--border-color, var(--color-foreground-xdark));
 	border-radius: var(--border-radius-large);
 
+	&.trigger {
+		border-radius: var(--trigger-node--border-radius) var(--border-radius-large)
+			var(--border-radius-large) var(--trigger-node--border-radius);
+	}
+
 	/**
 	 * Node types
 	 */
 
 	&.configuration {
-		--canvas-node--width: 75px;
-		--canvas-node--height: 75px;
+		--canvas-node--width: 76px;
+		--canvas-node--height: 76px;
 
 		background: var(--canvas-node--background, var(--node-type-supplemental-background));
-		border: 2px solid var(--canvas-node--border-color, var(--color-foreground-dark));
+		border: var(--canvas-node-border-width) solid
+			var(--canvas-node--border-color, var(--color-foreground-dark));
 		border-radius: 50px;
 
 		.statusIcons {
@@ -125,7 +143,7 @@ const dataTestId = computed(() => {
 	}
 
 	&.configurable {
-		--canvas-node--height: 100px;
+		--canvas-node--height: 96px;
 		--canvas-node--width: calc(
 			max(var(--configurable-node--input-count, 5), var(--configurable-node--min-input-count)) *
 				var(--configurable-node--input-width)
@@ -191,4 +209,12 @@ const dataTestId = computed(() => {
 	bottom: var(--spacing-2xs);
 	right: var(--spacing-2xs);
 }
+
+.triggerIcon {
+	position: absolute;
+	right: 100%;
+	margin: auto;
+	color: var(--color-primary);
+	padding: var(--spacing-2xs);
+}
 </style>

packages/editor-ui/src/components/canvas/elements/nodes/render-types/__snapshots__/CanvasNodeDefault.spec.ts.snap

@@ -8,6 +8,7 @@ exports[`CanvasNodeDefault > configurable > should render configurable node corr
 >
   
   
+  <!--v-if-->
   <!--v-if-->
   <!--v-if-->
   <div
@@ -27,6 +28,7 @@ exports[`CanvasNodeDefault > configuration > should render configurable configur
 >
   
   
+  <!--v-if-->
   <!--v-if-->
   <!--v-if-->
   <div
@@ -46,6 +48,7 @@ exports[`CanvasNodeDefault > configuration > should render configuration node co
 >
   
   
+  <!--v-if-->
   <!--v-if-->
   <!--v-if-->
   <div
@@ -65,6 +68,50 @@ exports[`CanvasNodeDefault > should render node correctly 1`] = `
 >
   
   
+  <!--v-if-->
+  <!--v-if-->
+  <!--v-if-->
+  <div
+    class="label"
+  >
+    Test Node 
+    <!--v-if-->
+  </div>
+</div>
+`;
+
+exports[`CanvasNodeDefault > trigger > should render trigger node correctly 1`] = `
+<div
+  class="node trigger"
+  data-test-id="canvas-trigger-node"
+  style="--canvas-node--main-output-count: 0;"
+>
+  
+  
+  
+  <div
+    class="triggerIcon el-tooltip__trigger el-tooltip__trigger"
+  >
+    <svg
+      aria-hidden="true"
+      class="svg-inline--fa fa-bolt fa-w-10 fa-lg"
+      data-icon="bolt"
+      data-prefix="fas"
+      focusable="false"
+      role="img"
+      viewBox="0 0 320 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        class=""
+        d="M296 160H180.6l42.6-129.8C227.2 15 215.7 0 200 0H56C44 0 33.8 8.9 32.2 20.8l-32 240C-1.7 275.2 9.5 288 24 288h118.7L96.6 482.5c-3.6 15.2 8 29.5 23.3 29.5 8.4 0 16.4-4.4 20.8-12l176-304c9.3-15.9-2.2-36-20.7-36z"
+        fill="currentColor"
+      />
+    </svg>
+  </div>
+  <!--teleport start-->
+  <!--teleport end-->
+  
   <!--v-if-->
   <!--v-if-->
   <div

packages/editor-ui/src/types/canvas.ts

@@ -66,7 +66,7 @@ export interface CanvasElementData {
 	};
 	render: {
 		type: 'default';
-		options: Record<string, unknown>;
+		options: Partial<{ configurable: boolean; configuration: boolean; trigger: boolean }>;
 	};
 }