0.6.0. (#12)

* 0.6.0.

Author: b4rtaz

CHANGELOG.md

@@ -1,3 +1,24 @@
+## 0.6.0
+
+* This version brings small visual improvements.
+* Added a new value model: string dictionary (`stringDictionaryValueModel({ ... })`). This value model allows you to specify a dictionary of string values.
+* The string value model now supports multiline mode.
+
+```ts
+stringValueModel({ multiline: true })
+stringValueModel({ multiline: 10 })
+```
+
+**Breaking changes:**
+
+The createStepEditorProvider() method of the EditorProvider class now returns a new type of editor provider. This method no longer accepts any arguments.
+
+```ts
+type StepEditorProvider = (step: Step, context: StepEditorContext, definition: Definition) => HTMLElement;
+
+EditorProvider.createStepEditorProvider(): StepEditorProvider;
+```
+
 ## 0.5.0
 
 The `DefinitionValidator` class supports the validation of the whole definition. Use the `validate` method to validate a definition deeply. This method will validate all steps in the definition at once. Now you may easily validate a definition in the back-end before saving it to the storage.
@@ -20,7 +41,7 @@ if (validator.validate(definition)) {
 
 ## 0.4.0
 
-* Added new value model: `generatedString` (`generatedStringValueEditor({ ... })`). The new value model allows you to generate a string value for some property, depending on the values of other properties. Mainly this feature is designed to generate a step name automatically.
+* Added a new value model: `generatedString` (`generatedStringValueEditor({ ... })`). The new value model allows you to generate a string value for some property, depending on the values of other properties. Mainly this feature is designed to generate a step name automatically.
 * The `StepModel` interface has one new property: `label`. The label is used to display a step name in the editor and the toolbox.
 
 **Breaking changes:**
@@ -40,7 +61,7 @@ Added new value model: boolean (`booleanValueModel({ ... })`).
 
 ## 0.3.0
 
-* Added new value model: nullable any variable (`nullableAnyVariableValueModel({ ... })`). This value model allows you to select any variable. Additionally, you can specify a variable type that can be selected by a user.
+* Added a new value model: nullable any variable (`nullableAnyVariableValueModel({ ... })`). This value model allows you to select any variable. Additionally, you can specify a variable type that can be selected by a user.
 * Added new optional property: `valueTypes` to `VariableDefinitionsValueModelConfiguration` interface. Now it's possible to force the types of variables during creation of variables by a user.
 
 **Breaking changes:**

README.md

@@ -11,6 +11,7 @@ Powerful workflow editor builder for sequential workflows. Written in TypeScript
 ## 👀 Examples
 
 * [🛠 Playground](https://nocode-js.github.io/sequential-workflow-editor/webpack-app/public/playground.html)
+* [📖 Editors](https://nocode-js.github.io/sequential-workflow-editor/webpack-app/public/editors.html)
 
 ## 🚀 Installation
 
@@ -105,10 +106,10 @@ We have everything to attach the editor provider to a designer. For the Sequenti
 ```ts
 import { Designer } from 'sequential-workflow-designer';
 
-const designer: Designer<MyDefinition> = Designer.create(placeholder, startDefinition, {
+const designer = Designer.create(placeholder, startDefinition, {
   editors: {
     globalEditorProvider: editorProvider.createRootEditorProvider(),
-    stepEditorProvider: editorProvider.createStepEditorProvider(() => designer.getDefinition())
+    stepEditorProvider: editorProvider.createStepEditorProvider()
   },
   validator: {
     step: editorProvider.createStepValidator(),

demos/webpack-app/package.json

@@ -16,10 +16,10 @@
 	"dependencies": {
 		"xstate": "^4.37.2",
 		"sequential-workflow-model": "^0.1.4",
-		"sequential-workflow-designer": "^0.13.4",
+		"sequential-workflow-designer": "^0.13.5",
 		"sequential-workflow-machine": "^0.2.0",
-		"sequential-workflow-editor-model": "^0.5.0",
-		"sequential-workflow-editor": "^0.5.0"
+		"sequential-workflow-editor-model": "^0.6.0",
+		"sequential-workflow-editor": "^0.6.0"
 	},
 	"devDependencies": {
 		"ts-loader": "^9.4.2",

demos/webpack-app/public/assets/editors.css

@@ -0,0 +1,26 @@
+html,
+body,
+#designer {
+	margin: 0;
+	padding: 0;
+	width: 100vw;
+	height: 100vh;
+	overflow: hidden;
+}
+body,
+input,
+textarea {
+	font: 14px/1.3em Arial, Verdana, sans-serif;
+}
+.sqd-global-editor {
+	padding: 10px;
+	line-height: 1.3em;
+	box-sizing: border-box;
+}
+a {
+	color: #000;
+	text-decoration: underline;
+}
+a:hover {
+	text-decoration: none;
+}

demos/webpack-app/public/assets/style.css renamed to demos/webpack-app/public/assets/playground.css

@@ -5,6 +5,10 @@ body {
 	width: 100vw;
 	height: 100vh;
 	overflow: hidden;
+}
+body,
+input,
+textarea {
 	font: 14px/1.3em Arial, Verdana, sans-serif;
 }
 body {

demos/webpack-app/public/editors.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8" />
+		<title>📖 Editors - Sequential Workflow Editor</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
+		<link rel="icon" href="./assets/favicon.ico" />
+		<script src="./builds/editors.js" defer></script>
+		<link rel="stylesheet" href="./assets/editors.css" />
+	</head>
+	<body>
+		<div id="designer"></div>
+	</body>
+</html>

demos/webpack-app/public/playground.html

@@ -5,7 +5,7 @@
 		<title>🛠 Playground - Sequential Workflow Editor</title>
 		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
 		<link rel="icon" href="./assets/favicon.ico" />
-		<link rel="stylesheet" href="./assets/style.css" />
+		<link rel="stylesheet" href="./assets/playground.css" />
 		<script src="./builds/playground.js" defer></script>
 	</head>
 	<body>

demos/webpack-app/src/editors/app.ts

@@ -0,0 +1,53 @@
+import { Designer, Uid } from 'sequential-workflow-designer';
+import { EditorProvider } from 'sequential-workflow-editor';
+import { definitionModel } from './model/definition-model';
+
+import 'sequential-workflow-designer/css/designer.css';
+import 'sequential-workflow-designer/css/designer-light.css';
+import 'sequential-workflow-editor/css/editor.css';
+
+export class App {
+	public static create(): App {
+		const placeholder = document.getElementById('designer') as HTMLElement;
+
+		const editorProvider = EditorProvider.create(definitionModel, {
+			uidGenerator: Uid.next
+		});
+
+		const designer = Designer.create(placeholder, editorProvider.activateDefinition(), {
+			controlBar: true,
+			editors: {
+				globalEditorProvider: () => {
+					const editor = document.createElement('div');
+					editor.innerHTML =
+						'This demo showcases all the supported editors by the Sequential Workflow Editor. <a href="https://github.com/nocode-js/sequential-workflow-editor">GitHub</a>';
+					return editor;
+				},
+				stepEditorProvider: editorProvider.createStepEditorProvider()
+			},
+			validator: {
+				step: editorProvider.createStepValidator(),
+				root: editorProvider.createRootValidator()
+			},
+			steps: {
+				iconUrlProvider: () => './assets/icon-task.svg'
+			},
+			toolbox: {
+				groups: editorProvider.getToolboxGroups(),
+				labelProvider: editorProvider.createStepLabelProvider()
+			}
+		});
+
+		if (location.hash) {
+			const type = location.hash.substring(1);
+			const step = designer.getDefinition().sequence.find(s => s.type === type);
+			if (step) {
+				designer.selectStepById(step.id);
+			}
+		}
+
+		return new App();
+	}
+}
+
+document.addEventListener('DOMContentLoaded', App.create, false);

demos/webpack-app/src/editors/model/any-variables-step-model.ts

@@ -0,0 +1,20 @@
+import { AnyVariables, anyVariablesValueModel, createStepModel } from 'sequential-workflow-editor-model';
+import { Step } from 'sequential-workflow-model';
+
+export interface AnyVariablesStepModel extends Step {
+	type: 'anyVariables';
+	componentType: 'task';
+	properties: {
+		zeroConfig: AnyVariables;
+		onlyBoolean: AnyVariables;
+	};
+}
+
+export const anyVariablesStepModel = createStepModel<AnyVariablesStepModel>('anyVariables', 'task', step => {
+	step.property('zeroConfig').value(anyVariablesValueModel({}));
+	step.property('onlyBoolean').value(
+		anyVariablesValueModel({
+			valueTypes: ['boolean']
+		})
+	);
+});

demos/webpack-app/src/editors/model/boolean-step-model.ts

@@ -0,0 +1,26 @@
+import { booleanValueModel, createStepModel } from 'sequential-workflow-editor-model';
+import { Step } from 'sequential-workflow-model';
+
+export interface BooleanStepModel extends Step {
+	type: 'boolean';
+	componentType: 'task';
+	properties: {
+		zeroConfig: boolean;
+		defaultValueTrue: boolean;
+		defaultValueFalse: boolean;
+	};
+}
+
+export const booleanStepModel = createStepModel<BooleanStepModel>('boolean', 'task', step => {
+	step.property('zeroConfig').value(booleanValueModel({}));
+	step.property('defaultValueTrue').value(
+		booleanValueModel({
+			defaultValue: true
+		})
+	);
+	step.property('defaultValueFalse').value(
+		booleanValueModel({
+			defaultValue: false
+		})
+	);
+});

demos/webpack-app/src/editors/model/choice-step-model.ts

@@ -0,0 +1,18 @@
+import { choiceValueModel, createStepModel } from 'sequential-workflow-editor-model';
+import { Step } from 'sequential-workflow-model';
+
+export interface ChoiceStepModel extends Step {
+	type: 'choice';
+	componentType: 'task';
+	properties: {
+		minimalConfig: string;
+		defaultValueGreen: string;
+	};
+}
+
+export const choiceStepModel = createStepModel<ChoiceStepModel>('choice', 'task', step => {
+	const choices = ['red', 'blue', 'green'];
+
+	step.property('minimalConfig').value(choiceValueModel({ choices }));
+	step.property('defaultValueGreen').value(choiceValueModel({ choices, defaultValue: 'green' }));
+});

demos/webpack-app/src/editors/model/definition-model.ts

@@ -0,0 +1,9 @@
+import { createDefinitionModel } from 'sequential-workflow-editor-model';
+import { stepModels } from './step-models';
+import { rootModel } from './root-model';
+
+export const definitionModel = createDefinitionModel(model => {
+	model.valueTypes(['string', 'number', 'boolean']);
+	model.root(rootModel);
+	model.steps(stepModels);
+});

demos/webpack-app/src/editors/model/dynamic-step-model.ts

@@ -0,0 +1,18 @@
+import { Dynamic, booleanValueModel, createStepModel, dynamicValueModel, stringValueModel } from 'sequential-workflow-editor-model';
+import { Step } from 'sequential-workflow-model';
+
+export interface DynamicStepModel extends Step {
+	type: 'dynamic';
+	componentType: 'task';
+	properties: {
+		example: Dynamic<string | boolean>;
+	};
+}
+
+export const dynamicStepModel = createStepModel<DynamicStepModel>('dynamic', 'task', step => {
+	step.property('example').value(
+		dynamicValueModel({
+			models: [stringValueModel({}), booleanValueModel({})]
+		})
+	);
+});

demos/webpack-app/src/editors/model/generated-string-step-model.ts

@@ -0,0 +1,37 @@
+import { createStepModel, generatedStringValueModel, numberValueModel } from 'sequential-workflow-editor-model';
+import { Step } from 'sequential-workflow-model';
+
+export interface GeneratedStringStepModel extends Step {
+	type: 'generatedString';
+	componentType: 'task';
+	properties: {
+		x: number;
+		example: string;
+	};
+}
+
+export const generatedStringStepModel = createStepModel<GeneratedStringStepModel>('generatedString', 'task', step => {
+	step.property('x').value(numberValueModel({}));
+
+	step.property('example')
+		.dependentProperty('x')
+		.value(
+			generatedStringValueModel({
+				generator(context) {
+					const x = context.getPropertyValue('x');
+					switch (x) {
+						case 0:
+							return 'Only zero :(';
+						case 1:
+							return 'One! Nice! :)';
+						case 2:
+							return 'Two! Cool number! :))))';
+					}
+					if (x < 0) {
+						return 'No no no! Negative number :(';
+					}
+					return 'Give me other number!';
+				}
+			})
+		);
+});

demos/webpack-app/src/editors/model/nullable-any-variable-step-model.ts

@@ -0,0 +1,26 @@
+import { NullableAnyVariable, createStepModel, nullableAnyVariableValueModel } from 'sequential-workflow-editor-model';
+import { Step } from 'sequential-workflow-model';
+
+export interface NullableAnyVariableStepModel extends Step {
+	type: 'nullableAnyVariable';
+	componentType: 'task';
+	properties: {
+		zeroConfig: NullableAnyVariable;
+		required: NullableAnyVariable;
+		onlyNumber: NullableAnyVariable;
+	};
+}
+
+export const nullableAnyVariableStepModel = createStepModel<NullableAnyVariableStepModel>('nullableAnyVariable', 'task', step => {
+	step.property('zeroConfig').value(nullableAnyVariableValueModel({}));
+	step.property('required').value(
+		nullableAnyVariableValueModel({
+			isRequired: true
+		})
+	);
+	step.property('onlyNumber').value(
+		nullableAnyVariableValueModel({
+			valueTypes: ['number']
+		})
+	);
+});

demos/webpack-app/src/editors/model/nullable-variable-definition-step-model.ts

@@ -0,0 +1,40 @@
+import { NullableVariableDefinition, createStepModel, nullableVariableDefinitionValueModel } from 'sequential-workflow-editor-model';
+import { Step } from 'sequential-workflow-model';
+
+export interface NullableVariableDefinitionStepModel extends Step {
+	type: 'nullableVariableDefinition';
+	componentType: 'task';
+	properties: {
+		minimalConfig: NullableVariableDefinition;
+		required: NullableVariableDefinition;
+		defaultValue: NullableVariableDefinition;
+	};
+}
+
+export const nullableVariableDefinitionStepModel = createStepModel<NullableVariableDefinitionStepModel>(
+	'nullableVariableDefinition',
+	'task',
+	step => {
+		step.property('minimalConfig').value(
+			nullableVariableDefinitionValueModel({
+				valueType: 'number'
+			})
+		);
+		step.property('required').value(
+			nullableVariableDefinitionValueModel({
+				valueType: 'number',
+				isRequired: true
+			})
+		);
+
+		step.property('defaultValue').value(
+			nullableVariableDefinitionValueModel({
+				valueType: 'number',
+				defaultValue: {
+					name: 'index',
+					type: 'number'
+				}
+			})
+		);
+	}
+);