From bc3ed8d7ae2c85e2b27a5ef42bf7be46fd2ce053 Mon Sep 17 00:00:00 2001 From: b4rtaz Date: Wed, 23 Oct 2024 21:51:25 +0200 Subject: [PATCH] 0.14.3. --- CHANGELOG.md | 21 +++++++++++ demos/webpack-app/package.json | 4 +-- editor/package.json | 6 ++-- editor/src/core/sort-toolbox-groups.spec.ts | 40 +++++++++++++++++++++ editor/src/core/sort-toolbox-groups.ts | 9 +++++ editor/src/editor-provider-configuration.ts | 8 +++++ editor/src/editor-provider.ts | 9 +++-- model/package.json | 2 +- model/src/builders/step-model-builder.ts | 12 +++++++ model/src/model.ts | 1 + 10 files changed, 103 insertions(+), 9 deletions(-) create mode 100644 editor/src/core/sort-toolbox-groups.spec.ts create mode 100644 editor/src/core/sort-toolbox-groups.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 464c94c..fe4f02a 100644 --- a/CHANGELOG.md +++ b/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', 'task', step => { + step.toolbox(false); +}); +``` + ## 0.14.2 This version adds the `formatPropertyValue` method to the `PropertyValidatorContext` class. diff --git a/demos/webpack-app/package.json b/demos/webpack-app/package.json index bdd4b84..d4747c8 100644 --- a/demos/webpack-app/package.json +++ b/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", diff --git a/editor/package.json b/editor/package.json index 7feb183..a0bb47d 100644 --- a/editor/package.json +++ b/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": { diff --git a/editor/src/core/sort-toolbox-groups.spec.ts b/editor/src/core/sort-toolbox-groups.spec.ts new file mode 100644 index 0000000..314159f --- /dev/null +++ b/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'); + }); +}); diff --git a/editor/src/core/sort-toolbox-groups.ts b/editor/src/core/sort-toolbox-groups.ts new file mode 100644 index 0000000..1feb47c --- /dev/null +++ b/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)); +}; diff --git a/editor/src/editor-provider-configuration.ts b/editor/src/editor-provider-configuration.ts index 7219e5c..9812ba1 100644 --- a/editor/src/editor-provider-configuration.ts +++ b/editor/src/editor-provider-configuration.ts @@ -1,6 +1,7 @@ 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; @@ -8,4 +9,11 @@ export interface EditorProviderConfiguration { 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; diff --git a/editor/src/editor-provider.ts b/editor/src/editor-provider.ts index e9677a4..4440f7c 100644 --- a/editor/src/editor-provider.ts +++ b/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 { public static create( @@ -130,20 +131,22 @@ export class EditorProvider { } 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(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; } diff --git a/model/package.json b/model/package.json index e3b14cb..f0790bc 100644 --- a/model/package.json +++ b/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", diff --git a/model/src/builders/step-model-builder.ts b/model/src/builders/step-model-builder.ts index 7100536..81f38de 100644 --- a/model/src/builders/step-model-builder.ts +++ b/model/src/builders/step-model-builder.ts @@ -13,6 +13,7 @@ export class StepModelBuilder { private _label?: string; private _description?: string; private _category?: string; + private _toolbox = true; private _validator?: StepValidator; private readonly nameBuilder = new PropertyModelBuilder(namePath, this.circularDependencyDetector); private readonly propertyBuilder: PropertyModelBuilder[] = []; @@ -57,6 +58,16 @@ export class StepModelBuilder { 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 { 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()) diff --git a/model/src/model.ts b/model/src/model.ts index c22de6b..c3c35e2 100644 --- a/model/src/model.ts +++ b/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;