|
| 1 | +# Sequential Workflow Editor |
| 2 | + |
| 3 | +Powerful workflow editor builder for sequential workflows. Written in TypeScript. Mainly designed to work with the [Sequential Workflow Designer](https://github.com/nocode-js/sequential-workflow-designer) component. To execute your model you may use the [Sequential Workflow Machine](https://github.com/nocode-js/sequential-workflow-machine) or any other workflow engine. It supports front-end and back-end strict validation of the model. 0 external dependencies. |
| 4 | + |
| 5 | +📝 Check the [documentation](https://nocode-js.com/docs/category/sequential-workflow-editor) for more details. |
| 6 | + |
| 7 | +## 👀 Examples |
| 8 | + |
| 9 | +* [🛠 Playground](./demos/webpack-app/public/playground.html) |
| 10 | + |
| 11 | +## 🚀 Installation |
| 12 | + |
| 13 | +Install the `sequential-workflow-editor-model` package in your front-end project or your common project for front-end and back-end (check [this article](https://nocode-js.com/docs/sequential-workflow-designer/sharing-types-between-frontend-and-backend)): |
| 14 | + |
| 15 | +``` |
| 16 | +npm i sequential-workflow-editor-model |
| 17 | +``` |
| 18 | + |
| 19 | +Install the `sequential-workflow-editor` package in your front-end project: |
| 20 | + |
| 21 | +``` |
| 22 | +npm i sequential-workflow-editor |
| 23 | +``` |
| 24 | + |
| 25 | +## 🎬 Usage |
| 26 | + |
| 27 | +At the beginning you need to create a model of your workflow for the editor. In this short tutorial let's consider the following workflow: |
| 28 | + |
| 29 | +```ts |
| 30 | +import { Definition, Step } from 'sequential-workflow-model'; |
| 31 | + |
| 32 | +export interface MyDefinition extends Definition { |
| 33 | + properties: { |
| 34 | + inputs: VariableDefinitions; |
| 35 | + }; |
| 36 | +} |
| 37 | + |
| 38 | +export interface LogStep extends Step { |
| 39 | + type: 'log'; |
| 40 | + componentType: 'task'; |
| 41 | + properties: { |
| 42 | + message: string; |
| 43 | + }; |
| 44 | +} |
| 45 | +``` |
| 46 | + |
| 47 | +Now we can create a model for the step: |
| 48 | + |
| 49 | +```ts |
| 50 | +import { createStepModel, stringValueModel } from 'sequential-workflow-editor-model'; |
| 51 | + |
| 52 | +export const logStepModel = createStepModel<LogStep>('log', 'task', step => { |
| 53 | + step.property('message') |
| 54 | + .value( |
| 55 | + stringValueModel({ |
| 56 | + minLength: 1 |
| 57 | + }) |
| 58 | + ) |
| 59 | + .label('Message to log'); |
| 60 | +}); |
| 61 | +``` |
| 62 | + |
| 63 | +If your workflow contains global properties you can create a root model: |
| 64 | + |
| 65 | +```ts |
| 66 | +import { createRootModel, variableDefinitionsValueModel } from 'sequential-workflow-editor-model'; |
| 67 | + |
| 68 | +export const rootModel = createRootModel<MyDefinition>(root => { |
| 69 | + root.property('inputs') |
| 70 | + .value( |
| 71 | + variableDefinitionsValueModel({}) |
| 72 | + ); |
| 73 | +); |
| 74 | +``` |
| 75 | +
|
| 76 | +Now we can create a definition model: |
| 77 | +
|
| 78 | +```ts |
| 79 | +import { createDefinitionModel } from 'sequential-workflow-editor-model'; |
| 80 | + |
| 81 | +export const definitionModel = createDefinitionModel<MyDefinition>(model => { |
| 82 | + model.valueTypes(['string', 'number']); |
| 83 | + model.root(rootModel); |
| 84 | + model.steps([logStepModel]); |
| 85 | +}); |
| 86 | +``` |
| 87 | +
|
| 88 | +To create an editor provider you need to pass a definition model to the `EditorProvider.create` method. The provider requires a unique identifier generator. You can use the `Uid` class from the `sequential-workflow-designer` package. |
| 89 | +
|
| 90 | +```ts |
| 91 | +import { EditorProvider } from 'sequential-workflow-editor'; |
| 92 | +import { Uid } from 'sequential-workflow-designer'; |
| 93 | + |
| 94 | +export const editorProvider = EditorProvider.create(definitionModel, { |
| 95 | + uidGenerator: Uid.next |
| 96 | +}); |
| 97 | +``` |
| 98 | +
|
| 99 | +We have everything to attach the editor provider to a designer. For the Sequential Workflow Designer you need to pass the following options: |
| 100 | +
|
| 101 | +```ts |
| 102 | +import { Designer } from 'sequential-workflow-designer'; |
| 103 | + |
| 104 | +const designer: Designer<MyDefinition> = Designer.create(placeholder, startDefinition, { |
| 105 | + editors: { |
| 106 | + globalEditorProvider: editorProvider.createRootEditorProvider(), |
| 107 | + stepEditorProvider: editorProvider.createStepEditorProvider(() => designer.getDefinition()) |
| 108 | + }, |
| 109 | + validator: { |
| 110 | + step: editorProvider.createStepValidator(), |
| 111 | + root: editorProvider.createRootValidator() |
| 112 | + }, |
| 113 | + // ... |
| 114 | +}); |
| 115 | +``` |
| 116 | +
|
| 117 | +That's it! Check the source code of [our demo](./demos/webpack-app/) to see the final code. |
| 118 | +
|
| 119 | +## 💡 License |
| 120 | +
|
| 121 | +#### Commercial license |
| 122 | +
|
| 123 | +You are creating a closed source application and you are not distributing our library in source form. You may use this project under the terms of the [Commercial License](./LICENSE). To purchase license check the [pricing](https://nocode-js.com/sequential-workflow-editor/pricing). |
| 124 | +
|
| 125 | +#### Open source license |
| 126 | +
|
| 127 | +If you are developing a freely available software program using a license that aligns with the GNU General Public License version 3, you are permitted to utilize this project while abiding by the provisions outlined in the GPLv3. |
0 commit comments