⚡ Add "Multi Step" option to EditImage Node

packages/nodes-base/nodes/EditImage.node.ts

@@ -6,6 +6,7 @@ import {
 	IDataObject,
 	ILoadOptionsFunctions,
 	INodeExecutionData,
+	INodeProperties,
 	INodePropertyOptions,
 	INodeType,
 	INodeTypeDescription,
@@ -17,32 +18,14 @@ import {
 } from 'path';
 import {
 	writeFile as fsWriteFile,
+	writeFileSync as fsWriteFileSync,
 } from 'fs';
 import { promisify } from 'util';
 const fsWriteFileAsync = promisify(fsWriteFile);
 import * as getSystemFonts from 'get-system-fonts';
 
 
-export class EditImage implements INodeType {
+const nodeOperations: INodePropertyOptions[] = [
-	description: INodeTypeDescription = {
-		displayName: 'Edit Image',
-		name: 'editImage',
-		icon: 'fa:image',
-		group: ['transform'],
-		version: 1,
-		description: 'Edits an image like blur, resize or adding border and text',
-		defaults: {
-			name: 'Edit Image',
-			color: '#553399',
-		},
-		inputs: ['main'],
-		outputs: ['main'],
-		properties: [
-			{
-				displayName: 'Operation',
-				name: 'operation',
-				type: 'options',
-				options: [
 	{
 		name: 'Blur',
 		value: 'blur',
@@ -53,6 +36,11 @@ export class EditImage implements INodeType {
 		value: 'border',
 		description: 'Adds a border to the image',
 	},
+	{
+		name: 'Composite',
+		value: 'composite',
+		description: 'Composite image on top of another one',
+	},
 	{
 		name: 'Create',
 		value: 'create',
@@ -63,21 +51,11 @@ export class EditImage implements INodeType {
 		value: 'crop',
 		description: 'Crops the image',
 	},
-					{
-						name: 'Composite',
-						value: 'composite',
-						description: 'Composite image on top of another one',
-					},
 	{
 		name: 'Draw',
 		value: 'draw',
 		description: 'Draw on image',
 	},
-					{
-						name: 'Get Information',
-						value: 'information',
-						description: 'Returns image information like resolution',
-					},
 	{
 		name: 'Rotate',
 		value: 'rotate',
@@ -98,19 +76,10 @@ export class EditImage implements INodeType {
 		value: 'text',
 		description: 'Adds text to image',
 	},
-				],
+];
-				default: 'border',
-				description: 'The operation to perform.',
-			},
 
-			{
-				displayName: 'Property Name',
-				name: 'dataPropertyName',
-				type: 'string',
-				default: 'data',
-				description: 'Name of the binary property in which the image data can be found.',
-			},
 
+const nodeOperationOptions: INodeProperties[] = [
 
 	// ----------------------------------
 	//         create
@@ -397,7 +366,6 @@ export class EditImage implements INodeType {
 		description: 'Max amount of characters in a line before a<br />line-break should get added.',
 	},
 
-
 	// ----------------------------------
 	//         blur
 	// ----------------------------------
@@ -742,7 +710,114 @@ export class EditImage implements INodeType {
 		},
 		description: 'Y (vertical) shear degrees.',
 	},
+];
 
+
+export class EditImage implements INodeType {
+	description: INodeTypeDescription = {
+		displayName: 'Edit Image',
+		name: 'editImage',
+		icon: 'fa:image',
+		group: ['transform'],
+		version: 1,
+		description: 'Edits an image like blur, resize or adding border and text',
+		defaults: {
+			name: 'Edit Image',
+			color: '#553399',
+		},
+		inputs: ['main'],
+		outputs: ['main'],
+		properties: [
+			{
+				displayName: 'Operation',
+				name: 'operation',
+				type: 'options',
+				options: [
+					{
+						name: 'Get Information',
+						value: 'information',
+						description: 'Returns image information like resolution',
+					},
+					{
+						name: 'Multi Step',
+						value: 'multiStep',
+						description: 'Perform multiple operations',
+					},
+					...nodeOperations,
+				].sort((a, b) => {
+					if ((a as INodePropertyOptions).name.toLowerCase() < (b as INodePropertyOptions).name.toLowerCase()) { return -1; }
+					if ((a as INodePropertyOptions).name.toLowerCase() > (b as INodePropertyOptions).name.toLowerCase()) { return 1; }
+					return 0;
+				}) as INodePropertyOptions[],
+				default: 'border',
+				description: 'The operation to perform.',
+			},
+			{
+				displayName: 'Property Name',
+				name: 'dataPropertyName',
+				type: 'string',
+				default: 'data',
+				description: 'Name of the binary property in which the image data can be found.',
+			},
+
+
+			// ----------------------------------
+			//         multiStep
+			// ----------------------------------
+			{
+				displayName: 'Operations',
+				name: 'operations',
+				placeholder: 'Add Operation',
+				type: 'fixedCollection',
+				typeOptions: {
+					multipleValues: true,
+				},
+				displayOptions: {
+					show: {
+						operation: [
+							'multiStep',
+						],
+					},
+				},
+				description: 'The operations to perform.',
+				default: {},
+				options: [
+					{
+						name: 'operations',
+						displayName: 'Operations',
+						values: [
+							{
+								displayName: 'Operation',
+								name: 'operation',
+								type: 'options',
+								options: nodeOperations,
+								default: '',
+								description: 'The operation to perform.',
+							},
+							...nodeOperationOptions,
+							{
+								displayName: 'Font',
+								name: 'font',
+								type: 'options',
+								displayOptions: {
+									show: {
+										'operation': [
+											'text',
+										],
+									},
+								},
+								typeOptions: {
+									loadOptionsMethod: 'getFonts',
+								},
+								default: 'default',
+								description: 'The font to use.',
+							},
+						],
+					},
+				],
+			},
+
+			...nodeOperationOptions,
 			{
 				displayName: 'Options',
 				name: 'options',
@@ -882,17 +957,91 @@ export class EditImage implements INodeType {
 
 		const options = this.getNodeParameter('options', {}) as IDataObject;
 
-		let gmInstance: gm.State;
+		const cleanupFunctions: Array<() => void> = [];
-		if (operation === 'create') {
-			const backgroundColor = this.getNodeParameter('backgroundColor') as string;
-			const width = this.getNodeParameter('width') as number;
-			const height = this.getNodeParameter('height') as number;
 
-			gmInstance = gm(width, height, backgroundColor);
+		let gmInstance: gm.State;
-			if (!options.format) {
+
-				options.format = 'png';
+		const requiredOperationParameters: {
-			}
+			[key: string]: string[],
+		} = {
+			blur: [
+				'blur',
+				'sigma',
+			],
+			create: [
+				'backgroundColor',
+				'height',
+				'width',
+			],
+			crop: [
+				'height',
+				'positionX',
+				'positionY',
+				'width',
+			],
+			composite: [
+				'dataPropertyNameComposite',
+				'positionX',
+				'positionY',
+			],
+			draw: [
+				'color',
+				'cornerRadius',
+				'endPositionX',
+				'endPositionY',
+				'primitive',
+				'startPositionX',
+				'startPositionY',
+			],
+			information: [],
+			resize: [
+				'height',
+				'resizeOption',
+				'width',
+			],
+			rotate: [
+				'backgroundColor',
+				'rotate',
+			],
+			shear: [
+				'degreesX',
+				'degreesY',
+			],
+			text: [
+				'font',
+				'fontColor',
+				'fontSize',
+				'lineLength',
+				'positionX',
+				'positionY',
+				'text',
+			],
+		};
+
+		let operations: IDataObject[] = [];
+		if (operation === 'multiStep') {
+			// Operation parameters are already in the correct format
+			const operationsData = this.getNodeParameter('operations', { operations: [] }) as IDataObject;
+			operations = operationsData.operations as IDataObject[];
 		} else {
+			// Operation parameters have to first get collected
+			const operationParameters: IDataObject = {};
+			requiredOperationParameters[operation].forEach(parameterName => {
+				try {
+					operationParameters[parameterName] = this.getNodeParameter(parameterName);
+				} catch (e) {}
+			});
+
+			operations = [
+				{
+					operation,
+					...operationParameters,
+				}
+			];
+		}
+
+		if (operations[0].operation !== 'create') {
+			// "create" generates a new image so does not require any incoming data.
 			if (item.binary === undefined) {
 				throw new Error('Item does not contain any binary data.');
 			}
@@ -905,60 +1054,8 @@ export class EditImage implements INodeType {
 			gmInstance = gmInstance.background('transparent');
 		}
 
-		const cleanupFunctions: Array<() => void> = [];
+		if (operation === 'information') {
-
+			// Just return the information
-		if (operation === 'blur') {
-			const blur = this.getNodeParameter('blur') as number;
-			const sigma = this.getNodeParameter('sigma') as number;
-			gmInstance = gmInstance.blur(blur, sigma);
-		} else if (operation === 'border') {
-			const borderWidth = this.getNodeParameter('borderWidth') as number;
-			const borderHeight = this.getNodeParameter('borderHeight') as number;
-			const borderColor = this.getNodeParameter('borderColor') as string;
-
-			gmInstance = gmInstance.borderColor(borderColor).border(borderWidth, borderHeight);
-		} else if (operation === 'composite') {
-			const dataPropertyNameComposite = this.getNodeParameter('dataPropertyNameComposite') as string;
-			const positionX = this.getNodeParameter('positionX') as number;
-			const positionY = this.getNodeParameter('positionY') as number;
-
-			const geometryString = (positionX >= 0 ? '+' : '') + positionX + (positionY >= 0 ? '+' : '') + positionY;
-
-			if (item.binary![dataPropertyNameComposite as string] === undefined) {
-				throw new Error(`Item does not contain any binary data with the name "${dataPropertyNameComposite}".`);
-			}
-
-			const { fd, path, cleanup } = await file();
-			cleanupFunctions.push(cleanup);
-			fsWriteFileAsync(fd, Buffer.from(item.binary![dataPropertyNameComposite as string].data, BINARY_ENCODING));
-
-			gmInstance = gmInstance.composite(path).geometry(geometryString);
-		} else if (operation === 'crop') {
-			const width = this.getNodeParameter('width') as number;
-			const height = this.getNodeParameter('height') as number;
-
-			const positionX = this.getNodeParameter('positionX') as number;
-			const positionY = this.getNodeParameter('positionY') as number;
-
-			gmInstance = gmInstance.crop(width, height, positionX, positionY);
-		} else if (operation === 'draw') {
-			const startPositionX = this.getNodeParameter('startPositionX') as number;
-			const startPositionY = this.getNodeParameter('startPositionY') as number;
-			const endPositionX = this.getNodeParameter('endPositionX') as number;
-			const endPositionY = this.getNodeParameter('endPositionY') as number;
-			const primitive = this.getNodeParameter('primitive') as string;
-			const color = this.getNodeParameter('color') as string;
-
-			gmInstance = gmInstance.fill(color);
-
-			if (primitive === 'line') {
-				gmInstance = gmInstance.drawLine(startPositionX, startPositionY, endPositionX, endPositionY);
-			} else if (primitive === 'rectangle') {
-				const cornerRadius = this.getNodeParameter('cornerRadius') as number;
-				gmInstance = gmInstance.drawRectangle(startPositionX, startPositionY, endPositionX, endPositionY, cornerRadius || undefined);
-			}
-
-		} else if (operation === 'information') {
 			const imageData = await new Promise<IDataObject>((resolve, reject) => {
 				gmInstance = gmInstance.identify((error, imageData) => {
 					if (error) {
@@ -970,10 +1067,47 @@ export class EditImage implements INodeType {
 			});
 
 			item.json = imageData;
-		} else if (operation === 'resize')  {
+			return item;
-			const width = this.getNodeParameter('width') as number;
+		}
-			const height = this.getNodeParameter('height') as number;
+
-			const resizeOption = this.getNodeParameter('resizeOption') as string;
+		for (const operationData of operations) {
+			if (operationData.operation === 'blur') {
+				gmInstance = gmInstance!.blur(operationData.blur as number, operationData.sigma as number);
+			} else if (operationData.operation === 'border') {
+				gmInstance = gmInstance!.borderColor(operationData.borderColor as string).border(operationData.borderWidth as number, operationData.borderHeight as number);
+			} else if (operationData.operation === 'composite') {
+				const positionX = operationData.positionX as number;
+				const positionY = operationData.positionY as number;
+
+				const geometryString = (positionX >= 0 ? '+' : '') + positionX + (positionY >= 0 ? '+' : '') + positionY;
+
+				if (item.binary![operationData.dataPropertyNameComposite as string] === undefined) {
+					throw new Error(`Item does not contain any binary data with the name "${operationData.dataPropertyNameComposite}".`);
+				}
+
+				gmInstance = await gmInstance!;
+				const { fd, path, cleanup } = await file();
+				cleanupFunctions.push(cleanup);
+				await fsWriteFileAsync(fd, Buffer.from(item.binary![operationData.dataPropertyNameComposite as string].data, BINARY_ENCODING));
+
+				gmInstance = gmInstance!.composite(path).geometry(geometryString);
+			} else if (operationData.operation === 'create') {
+				gmInstance = gm(operationData.width as number, operationData.height as number, operationData.backgroundColor as string);
+					if (!options.format) {
+						options.format = 'png';
+					}
+			} else if (operationData.operation === 'crop') {
+				gmInstance = gmInstance!.crop(operationData.width as number, operationData.height as number, operationData.positionX as number, operationData.positionY as number);
+			} else if (operationData.operation === 'draw') {
+				gmInstance = gmInstance!.fill(operationData.color as string);
+
+				if (operationData.primitive === 'line') {
+					gmInstance = gmInstance.drawLine(operationData.startPositionX as number, operationData.startPositionY as number, operationData.endPositionX as number, operationData.endPositionY as number);
+				} else if (operationData.primitive === 'rectangle') {
+					gmInstance = gmInstance.drawRectangle(operationData.startPositionX as number, operationData.startPositionY as number, operationData.endPositionX as number, operationData.endPositionY as number, operationData.cornerRadius as number || undefined);
+				}
+			} else if (operationData.operation === 'resize') {
+				const resizeOption = operationData.resizeOption as string;
 
 				// By default use "maximumArea"
 				let option: gm.ResizeOption = '@';
@@ -989,29 +1123,18 @@ export class EditImage implements INodeType {
 					option = '%';
 				}
 
-			gmInstance = gmInstance.resize(width, height, option);
+				gmInstance = gmInstance!.resize(operationData.width as number, operationData.height as number, option);
-		} else if (operation === 'rotate')  {
+			} else if (operationData.operation === 'rotate') {
-			const rotate = this.getNodeParameter('rotate') as number;
+				gmInstance = gmInstance!.rotate(operationData.backgroundColor as string, operationData.rotate as number);
-			const backgroundColor = this.getNodeParameter('backgroundColor') as string;
+			} else if (operationData.operation === 'shear') {
-			gmInstance = gmInstance.rotate(backgroundColor, rotate);
+				gmInstance = gmInstance!.shear(operationData.degreesX as number, operationData.degreesY as number);
-		} else if (operation === 'shear') {
+			} else if (operationData.operation === 'text') {
-			const xDegrees = this.getNodeParameter('degreesX') as number;
-			const yDegress = this.getNodeParameter('degreesY') as number;
-			gmInstance = gmInstance.shear(xDegrees, yDegress);
-		} else if (operation === 'text') {
-			const fontColor = this.getNodeParameter('fontColor') as string;
-			const fontSize = this.getNodeParameter('fontSize') as number;
-			const lineLength = this.getNodeParameter('lineLength') as number;
-			const positionX = this.getNodeParameter('positionX') as number;
-			const positionY = this.getNodeParameter('positionY') as number;
-			const text = this.getNodeParameter('text') as string || '';
-
 				// Split the text in multiple lines
 				const lines: string[] = [];
 				let currentLine = '';
-			(text as string).split('\n').forEach((textLine: string) => {
+				(operationData.text as string).split('\n').forEach((textLine: string) => {
 					textLine.split(' ').forEach((textPart: string) => {
-					if ((currentLine.length + textPart.length + 1) > lineLength) {
+						if ((currentLine.length + textPart.length + 1) > (operationData.lineLength as number)) {
 							lines.push(currentLine.trim());
 							currentLine = `${textPart} `;
 							return;
@@ -1026,16 +1149,17 @@ export class EditImage implements INodeType {
 				// Combine the lines to a single string
 				const renderText = lines.join('\n');
 
-			if (options.font && options.font !== 'default') {
+				const font = options.font || operationData.font;
-				gmInstance = gmInstance.font(options.font as string);
+
+				if (font && font !== 'default') {
+					gmInstance = gmInstance!.font(font as string);
 				}
 
-			gmInstance = gmInstance
+				gmInstance = gmInstance!
-				.fill(fontColor)
+					.fill(operationData.fontColor as string)
-				.fontSize(fontSize)
+					.fontSize(operationData.fontSize as number)
-				.drawText(positionX, positionY, renderText);
+					.drawText(operationData.positionX as number, operationData.positionY as number, renderText);
-		} else if (operation !== 'create') {
+			}
-			throw new Error(`The operation "${operation}" is not supported!`);
 		}
 
 		const newItem: INodeExecutionData = {
@@ -1060,11 +1184,11 @@ export class EditImage implements INodeType {
 		}
 
 		if (options.quality !== undefined) {
-			gmInstance = gmInstance.quality(options.quality as number);
+			gmInstance = gmInstance!.quality(options.quality as number);
 		}
 
 		if (options.format !== undefined) {
-			gmInstance = gmInstance.setFormat(options.format as string);
+			gmInstance = gmInstance!.setFormat(options.format as string);
 			newItem.binary![dataPropertyName as string].fileExtension = options.format as string;
 			newItem.binary![dataPropertyName as string].mimeType = `image/${options.format}`;
 			const fileName = newItem.binary![dataPropertyName as string].fileName;