feat: Add sticky notes support to the new canvas (no-changelog) (#10031)

packages/editor-ui/src/composables/useCanvasMapping.ts

@@ -13,7 +13,10 @@ import type {
 	CanvasConnectionData,
 	CanvasConnectionPort,
 	CanvasNode,
+	CanvasNodeAddNodesRender,
 	CanvasNodeData,
+	CanvasNodeDefaultRender,
+	CanvasNodeStickyNoteRender,
 } from '@/types';
 import { CanvasNodeRenderType } from '@/types';
 import {
@@ -30,7 +33,7 @@ import type {
 } from 'n8n-workflow';
 import { NodeHelpers } from 'n8n-workflow';
 import type { INodeUi } from '@/Interface';
-import { WAIT_TIME_UNLIMITED } from '@/constants';
+import { STICKY_NODE_TYPE, WAIT_TIME_UNLIMITED } from '@/constants';
 import { sanitizeHtml } from '@/utils/htmlUtils';
 
 export function useCanvasMapping({
@@ -46,30 +49,48 @@ export function useCanvasMapping({
 	const workflowsStore = useWorkflowsStore();
 	const nodeTypesStore = useNodeTypesStore();
 
-	const renderTypeByNodeType = computed(
+	function createStickyNoteRenderType(node: INodeUi): CanvasNodeStickyNoteRender {
+		return {
+			type: CanvasNodeRenderType.StickyNote,
+			options: {
+				width: node.parameters.width as number,
+				height: node.parameters.height as number,
+				color: node.parameters.color as number,
+				content: node.parameters.content as string,
+			},
+		};
+	}
+
+	function createAddNodesRenderType(): CanvasNodeAddNodesRender {
+		return {
+			type: CanvasNodeRenderType.AddNodes,
+			options: {},
+		};
+	}
+
+	function createDefaultNodeRenderType(node: INodeUi): CanvasNodeDefaultRender {
+		return {
+			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),
+			},
+		};
+	}
+
+	const renderTypeByNodeId = computed(
 		() =>
 			nodes.value.reduce<Record<string, CanvasNodeData['render']>>((acc, node) => {
-				// @TODO Add support for sticky notes here
 				switch (node.type) {
+					case `${CanvasNodeRenderType.StickyNote}`:
+						acc[node.id] = createStickyNoteRenderType(node);
+						break;
 					case `${CanvasNodeRenderType.AddNodes}`:
-						acc[node.type] = {
-							type: CanvasNodeRenderType.AddNodes,
-							options: {},
-						};
+						acc[node.id] = createAddNodesRenderType();
 						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,
-								),
-							},
-						};
+						acc[node.id] = createDefaultNodeRenderType(node);
 				}
 
 				return acc;
@@ -214,6 +235,20 @@ export function useCanvasMapping({
 		}, {}),
 	);
 
+	const additionalNodePropertiesById = computed(() => {
+		return nodes.value.reduce<Record<string, Partial<CanvasNode>>>((acc, node) => {
+			if (node.type === STICKY_NODE_TYPE) {
+				acc[node.id] = {
+					style: {
+						zIndex: -1,
+					},
+				};
+			}
+
+			return acc;
+		}, {});
+	});
+
 	const mappedNodes = computed<CanvasNode[]>(() => [
 		...nodes.value.map<CanvasNode>((node) => {
 			const inputConnections = workflowObject.value.connectionsByDestinationNode[node.name] ?? {};
@@ -221,6 +256,7 @@ export function useCanvasMapping({
 
 			const data: CanvasNodeData = {
 				id: node.id,
+				name: node.name,
 				type: node.type,
 				typeVersion: node.typeVersion,
 				disabled: !!node.disabled,
@@ -247,7 +283,7 @@ export function useCanvasMapping({
 					count: nodeExecutionRunDataById.value[node.id]?.length ?? 0,
 					visible: !!nodeExecutionRunDataById.value[node.id],
 				},
-				render: renderTypeByNodeType.value[node.type] ?? { type: 'default', options: {} },
+				render: renderTypeByNodeId.value[node.id] ?? { type: 'default', options: {} },
 			};
 
 			return {
@@ -256,6 +292,7 @@ export function useCanvasMapping({
 				type: 'canvas-node',
 				position: { x: node.position[0], y: node.position[1] },
 				data,
+				...additionalNodePropertiesById.value[node.id],
 			};
 		}),
 	]);