0.4.0. (#9)

Author: b4rtaz

CHANGELOG.md

@@ -1,3 +1,14 @@
+## 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.
+* 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:**
+
+* The `ValueModelFactory` type is changed to the interface.
+* The `ValueModelContext` class is renamed to `ValueContext`.
+* The `VariablesProvider` class skips variables from own step.
+
 ## 0.3.2
 
 * The `StepModel` interface has two new properties: `category` and `description`. The category is used to group steps in the toolbox. The description is used to display an additional information about a step in the editor.

demos/webpack-app/package.json

@@ -16,10 +16,10 @@
 	"dependencies": {
 		"xstate": "^4.37.2",
 		"sequential-workflow-model": "^0.1.3",
-		"sequential-workflow-designer": "^0.13.2",
+		"sequential-workflow-designer": "^0.13.3",
 		"sequential-workflow-machine": "^0.2.0",
-		"sequential-workflow-editor-model": "^0.3.2",
-		"sequential-workflow-editor": "^0.3.2"
+		"sequential-workflow-editor-model": "^0.4.0",
+		"sequential-workflow-editor": "^0.4.0"
 	},
 	"devDependencies": {
 		"ts-loader": "^9.4.2",

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

@@ -33,7 +33,8 @@ export class App {
 				}
 			},
 			toolbox: {
-				groups: editorProvider.getToolboxGroups()
+				groups: editorProvider.getToolboxGroups(),
+				labelProvider: editorProvider.createStepLabelProvider()
 			},
 			undoStackSize: 10,
 			definitionWalker

demos/webpack-app/src/playground/default-state.ts

@@ -54,7 +54,8 @@ const definition: MyDefinition = {
 								componentType: 'task',
 								properties: {
 									message: { modelId: 'string', value: '🌺 TRUE 🌺' },
-									variables: { variables: [{ name: 'index', type: 'number' }] }
+									variables: { variables: [{ name: 'index', type: 'number' }] },
+									note: { modelId: 'string', value: '0!' }
 								}
 							}
 						],
@@ -66,7 +67,8 @@ const definition: MyDefinition = {
 								componentType: 'task',
 								properties: {
 									message: { modelId: 'string', value: '🌼 FALSE 🌼' },
-									variables: { variables: [{ name: 'index', type: 'number' }] }
+									variables: { variables: [{ name: 'index', type: 'number' }] },
+									note: { modelId: 'generatedString', value: 'Dumped 1 variables' }
 								}
 							}
 						]

demos/webpack-app/src/playground/model/calculate-step-model.ts

@@ -1,10 +1,12 @@
+import { formatVariableName } from 'sequential-workflow-editor';
 import {
 	Dynamic,
 	NullableVariable,
 	ValueKnownType,
 	choiceValueModel,
 	createStepModel,
 	dynamicValueModel,
+	generatedStringValueModel,
 	nullableVariableValueModel,
 	numberValueModel
 } from 'sequential-workflow-editor-model';
@@ -25,6 +27,27 @@ export const calculateStepModel = createStepModel<CalculateStep>('calculate', 't
 	step.category('Values');
 	step.description('Calculate value from two numbers. Result is stored in variable.');
 
+	step.name()
+		.value(
+			generatedStringValueModel({
+				generator: context => {
+					const result = context.formatPropertyValue('result', value => formatVariableName(value.name));
+					const a = context.formatPropertyValue('a', ({ value }) => {
+						return value && typeof value === 'object' ? formatVariableName(value.name) : String(value ?? '?');
+					});
+					const operator = context.getPropertyValue('operator');
+					const b = context.formatPropertyValue('b', ({ value }) => {
+						return value && typeof value === 'object' ? formatVariableName(value.name) : String(value ?? '?');
+					});
+					return `${result} = ${a} ${operator} ${b}`;
+				}
+			})
+		)
+		.dependentProperty('result')
+		.dependentProperty('a')
+		.dependentProperty('b')
+		.dependentProperty('operator');
+
 	const val = dynamicValueModel({
 		models: [
 			numberValueModel({}),

demos/webpack-app/src/playground/model/log-step-model.ts

@@ -1,11 +1,13 @@
 import {
 	AnyVariables,
 	Dynamic,
+	GeneratedStringContext,
 	NullableVariable,
 	ValueKnownType,
 	anyVariablesValueModel,
 	createStepModel,
 	dynamicValueModel,
+	generatedStringValueModel,
 	nullableVariableValueModel,
 	stringValueModel
 } from 'sequential-workflow-editor-model';
@@ -17,6 +19,7 @@ export interface LogStep extends Step {
 	properties: {
 		message: Dynamic<string | NullableVariable>;
 		variables: AnyVariables;
+		note: Dynamic<string>;
 	};
 }
 
@@ -38,4 +41,21 @@ export const logStepModel = createStepModel<LogStep>('log', 'task', step => {
 		.label('Text');
 
 	step.property('variables').value(anyVariablesValueModel({})).label('Log variables');
+
+	step.property('note')
+		.dependentProperty('variables')
+		.value(
+			dynamicValueModel({
+				models: [
+					generatedStringValueModel({
+						generator: (context: GeneratedStringContext<LogStep['properties']>) => {
+							// TODO: if the type would be deleted from arguments, then the auto type is wrong.
+							const variables = context.getPropertyValue('variables');
+							return `Dumped ${variables.variables.length} variables`;
+						}
+					}),
+					stringValueModel({})
+				]
+			})
+		);
 });

demos/webpack-app/src/playground/storage.ts

@@ -1,7 +1,7 @@
 import { MyDefinition } from './model/definition-model';
 import { RawInputData } from './playground';
 
-const version = 2;
+const version = 3;
 const definitionKey = `definition_${version}`;
 const inputDataKey = `inputData_${version}`;
 

editor/css/editor.css

@@ -100,6 +100,12 @@
 .swe-input:focus {
 	border-color: #b7b7b7;
 }
+.swe-input[readonly] {
+	color: #666;
+	background: #f7f7f7;
+	cursor: not-allowed;
+	border-style: dashed;
+}
 .swe-select-small {
 	padding: 2px 5px;
 }

editor/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sequential-workflow-editor",
-	"version": "0.3.2",
+	"version": "0.4.0",
 	"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.3.2",
+		"sequential-workflow-editor-model": "^0.4.0",
 		"sequential-workflow-model": "^0.1.3"
 	},
 	"peerDependencies": {
-		"sequential-workflow-editor-model": "^0.3.2",
+		"sequential-workflow-editor-model": "^0.4.0",
 		"sequential-workflow-model": "^0.1.3"
 	},
 	"devDependencies": {

editor/src/components/input-component.ts

@@ -4,30 +4,46 @@ import { Html } from '../core';
 
 export interface InputComponent extends Component {
 	onChanged: SimpleEvent<string>;
+	setValue(value: string): void;
+	getValue(): string;
 }
 
 export interface InputConfiguration {
 	type?: 'text' | 'number';
+	isReadonly?: boolean;
 	placeholder?: string;
 }
 
-export function inputComponent(value: string, configuration?: InputConfiguration): InputComponent {
+export function inputComponent(startValue: string, configuration?: InputConfiguration): InputComponent {
 	const onChanged = new SimpleEvent<string>();
 
+	function setValue(value: string) {
+		view.value = value;
+	}
+
+	function getValue(): string {
+		return view.value;
+	}
+
 	const view = Html.element('input', {
 		class: 'swe-input swe-stretched',
 		type: configuration?.type ?? 'text'
 	});
 	if (configuration?.placeholder) {
 		view.setAttribute('placeholder', configuration.placeholder);
 	}
-	view.value = value;
+	if (configuration?.isReadonly) {
+		view.setAttribute('readonly', 'readonly');
+	}
+	view.value = startValue;
 	view.addEventListener('input', () => {
 		onChanged.forward(view.value);
 	});
 
 	return {
 		view,
-		onChanged
+		onChanged,
+		setValue,
+		getValue
 	};
 }