0.14.3. (#47)

Author: b4rtaz

CHANGELOG.md

@@ -1,3 +1,24 @@
+## 0.14.3
+
+This version provides the ability to sort the steps in the toolbox in a custom way. By default, the steps are sorted alphabetically.
+
+```ts
+EditorProvider.create(definitionModel, {
+  // ...
+  toolboxSorter(groups: ToolboxGroup[]) {
+    // ...
+  }
+});
+```
+
+You can also hide certain steps from the toolbox by using the hidden method in the step builder.
+
+```ts
+createStepModel<MyStep>('myStep', 'task', step => {
+  step.toolbox(false);
+});
+```
+
 ## 0.14.2
 
 This version adds the `formatPropertyValue` method to the `PropertyValidatorContext` class.

demos/webpack-app/package.json

@@ -18,8 +18,8 @@
 		"sequential-workflow-model": "^0.2.0",
 		"sequential-workflow-designer": "^0.21.2",
 		"sequential-workflow-machine": "^0.4.0",
-		"sequential-workflow-editor-model": "^0.14.2",
-		"sequential-workflow-editor": "^0.14.2"
+		"sequential-workflow-editor-model": "^0.14.3",
+		"sequential-workflow-editor": "^0.14.3"
 	},
 	"devDependencies": {
 		"ts-loader": "^9.4.2",

editor/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sequential-workflow-editor",
-	"version": "0.14.2",
+	"version": "0.14.3",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",
@@ -46,11 +46,11 @@
 		"prettier:fix": "prettier --write ./src ./css"
 	},
 	"dependencies": {
-		"sequential-workflow-editor-model": "^0.14.2",
+		"sequential-workflow-editor-model": "^0.14.3",
 		"sequential-workflow-model": "^0.2.0"
 	},
 	"peerDependencies": {
-		"sequential-workflow-editor-model": "^0.14.2",
+		"sequential-workflow-editor-model": "^0.14.3",
 		"sequential-workflow-model": "^0.2.0"
 	},
 	"devDependencies": {

editor/src/core/sort-toolbox-groups.spec.ts

@@ -0,0 +1,40 @@
+import { Step } from 'sequential-workflow-model';
+import { ToolboxGroup } from '../external-types';
+import { sortToolboxGroups } from './sort-toolbox-groups';
+
+function createStep(name: string): Step {
+	return {
+		id: name,
+		type: name,
+		name,
+		componentType: 'task',
+		properties: {}
+	};
+}
+
+describe('sortToolboxGroups', () => {
+	it('sorts correctly', () => {
+		const groups: ToolboxGroup[] = [
+			{
+				name: 'B',
+				steps: [createStep('U'), createStep('B'), createStep('A')]
+			},
+			{
+				name: 'A',
+				steps: [createStep('G'), createStep('F'), createStep('C')]
+			}
+		];
+
+		sortToolboxGroups(groups);
+
+		expect(groups[0].name).toBe('A');
+		expect(groups[0].steps[0].name).toBe('C');
+		expect(groups[0].steps[1].name).toBe('F');
+		expect(groups[0].steps[2].name).toBe('G');
+
+		expect(groups[1].name).toBe('B');
+		expect(groups[1].steps[0].name).toBe('A');
+		expect(groups[1].steps[1].name).toBe('B');
+		expect(groups[1].steps[2].name).toBe('U');
+	});
+});

editor/src/core/sort-toolbox-groups.ts

@@ -0,0 +1,9 @@
+import { EditorToolboxSorter } from '../editor-provider-configuration';
+import { ToolboxGroup } from '../external-types';
+
+export const sortToolboxGroups: EditorToolboxSorter = (groups: ToolboxGroup[]) => {
+	groups.forEach(group => {
+		group.steps.sort((a, b) => a.name.localeCompare(b.name));
+	});
+	groups.sort((a, b) => a.name.localeCompare(b.name));
+};

editor/src/editor-provider-configuration.ts

@@ -1,11 +1,19 @@
 import { I18n, UidGenerator } from 'sequential-workflow-editor-model';
 import { DefinitionWalker } from 'sequential-workflow-model';
 import { EditorExtension } from './editor-extension';
+import { ToolboxGroup } from './external-types';
 
 export interface EditorProviderConfiguration {
 	uidGenerator: UidGenerator;
 	definitionWalker?: DefinitionWalker;
 	i18n?: I18n;
 	isHeaderHidden?: boolean;
 	extensions?: EditorExtension[];
+
+	/**
+	 * Sorter for the toolbox groups. By default, the groups are sorted alphabetically.
+	 */
+	toolboxSorter?: EditorToolboxSorter;
 }
+
+export type EditorToolboxSorter = (groups: ToolboxGroup[]) => void;

editor/src/editor-provider.ts

@@ -23,6 +23,7 @@ import {
 } from './external-types';
 import { EditorProviderConfiguration } from './editor-provider-configuration';
 import { EditorHeaderData } from './editor-header';
+import { sortToolboxGroups } from './core/sort-toolbox-groups';
 
 export class EditorProvider<TDefinition extends Definition> {
 	public static create<TDef extends Definition>(
@@ -130,20 +131,22 @@ export class EditorProvider<TDefinition extends Definition> {
 	}
 
 	public getToolboxGroups(): ToolboxGroup[] {
-		const stepModels = Object.values(this.definitionModel.steps);
+		const stepModels = Object.values(this.definitionModel.steps).filter(step => step.toolbox);
 		const groups: ToolboxGroup[] = [];
 		const categories = new Set<string | undefined>(stepModels.map(step => step.category));
+
 		categories.forEach((category: string | undefined) => {
 			const name = category ?? this.i18n('toolbox.defaultGroupName', 'Others');
 			const groupStepModels = stepModels.filter(step => step.category === category);
 			const groupSteps = groupStepModels.map(step => this.activateStep(step.type));
-			groupSteps.sort((a, b) => a.name.localeCompare(b.name));
 			groups.push({
 				name,
 				steps: groupSteps
 			});
 		});
-		groups.sort((a, b) => a.name.localeCompare(b.name));
+
+		const sort = this.configuration.toolboxSorter || sortToolboxGroups;
+		sort(groups);
 		return groups;
 	}
 

model/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sequential-workflow-editor-model",
-	"version": "0.14.2",
+	"version": "0.14.3",
 	"homepage": "https://nocode-js.com/",
 	"author": {
 		"name": "NoCode JS",

model/src/builders/step-model-builder.ts

@@ -13,6 +13,7 @@ export class StepModelBuilder<TStep extends Step> {
 	private _label?: string;
 	private _description?: string;
 	private _category?: string;
+	private _toolbox = true;
 	private _validator?: StepValidator;
 	private readonly nameBuilder = new PropertyModelBuilder<string>(namePath, this.circularDependencyDetector);
 	private readonly propertyBuilder: PropertyModelBuilder[] = [];
@@ -57,6 +58,16 @@ export class StepModelBuilder<TStep extends Step> {
 		return this;
 	}
 
+	/**
+	 * Sets whether the step should be displayed in the toolbox. Default is `true`.
+	 * @param toolbox Whether the step should be displayed in the toolbox.
+	 * @example `builder.toolbox(false);`
+	 */
+	public toolbox(toolbox: boolean): this {
+		this._toolbox = toolbox;
+		return this;
+	}
+
 	/**
 	 * Sets the validator of the step.
 	 * @param validator The validator.
@@ -103,6 +114,7 @@ export class StepModelBuilder<TStep extends Step> {
 			label: this._label ?? buildLabel(this.type),
 			category: this._category,
 			description: this._description,
+			toolbox: this._toolbox,
 			validator: this._validator,
 			name: this.nameBuilder.build(),
 			properties: this.propertyBuilder.map(builder => builder.build())

model/src/model.ts

@@ -23,6 +23,7 @@ export interface StepModel {
 	type: string;
 	componentType: string;
 	category?: string;
+	toolbox: boolean;
 	label: string;
 	description?: string;
 	name: PropertyModel<string>;