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
 	};
 }

editor/src/core/stacked-simple-event.spec.ts

@@ -0,0 +1,29 @@
+import { StackedSimpleEvent } from './stacked-simple-event';
+
+describe('StackedSimpleEvent', () => {
+	let event: StackedSimpleEvent<number>;
+
+	beforeEach(() => {
+		event = new StackedSimpleEvent<number>();
+	});
+
+	it('should emit an event with a single value when a single value is pushed', done => {
+		event.subscribe(values => {
+			expect(values).toEqual([1]);
+			done();
+		});
+
+		event.push(1);
+	});
+
+	it('should emit an event with multiple values when multiple values are pushed', done => {
+		event.subscribe(values => {
+			expect(values).toEqual([1, 2, 3]);
+			done();
+		});
+
+		event.push(1);
+		event.push(2);
+		event.push(3);
+	});
+});

editor/src/core/stacked-simple-event.ts

@@ -0,0 +1,26 @@
+import { SimpleEvent, SimpleEventListener } from 'sequential-workflow-editor-model';
+
+export class StackedSimpleEvent<T> {
+	private readonly event = new SimpleEvent<T[]>();
+
+	private readonly stack: T[] = [];
+	private to: ReturnType<typeof setTimeout> | null = null;
+
+	public push(value: T) {
+		this.stack.push(value);
+
+		if (this.to) {
+			return;
+		}
+
+		this.to = setTimeout(() => {
+			this.to = null;
+			this.event.forward(this.stack);
+			this.stack.length = 0;
+		});
+	}
+
+	public subscribe(listener: SimpleEventListener<T[]>) {
+		this.event.subscribe(listener);
+	}
+}

editor/src/editor-header.ts

@@ -3,7 +3,7 @@ import { Html } from './core';
 import { appendMultilineText } from './core/append-multiline-text';
 
 export interface EditorHeaderData {
-	title: string;
+	label: string;
 	description?: string;
 }
 
@@ -12,7 +12,7 @@ export class EditorHeader implements Component {
 		const view = Html.element('div', { class: 'swe-editor-header' });
 
 		const title = Html.element('h3', { class: 'swe-editor-header-title' });
-		title.textContent = data.title;
+		title.textContent = data.label;
 		view.appendChild(title);
 
 		if (data.description) {

editor/src/editor-provider.ts

@@ -8,6 +8,7 @@ import {
 	RootValidator,
 	StepEditorContext,
 	StepEditorProvider,
+	StepLabelProvider,
 	StepValidator,
 	ToolboxGroup
 } from './external-types';
@@ -43,7 +44,7 @@ export class EditorProvider<TDefinition extends Definition> {
 			const rootContext = DefinitionContext.createForRoot(definition, this.definitionModel, this.definitionWalker);
 			const typeClassName = 'root';
 			const editor = Editor.create(null, this.definitionModel.root.properties, rootContext, this.services, typeClassName);
-			editor.onValueChanged.subscribe(() => {
+			editor.onValuesChanged.subscribe(() => {
 				context.notifyPropertiesChanged();
 			});
 			return editor.root;
@@ -65,14 +66,14 @@ export class EditorProvider<TDefinition extends Definition> {
 			const headerData: EditorHeaderData | null = this.configuration.isHeaderHidden
 				? null
 				: {
-						title: stepModel.name.value.getDefaultValue(this.activator),
+						label: stepModel.label,
 						description: stepModel.description
 				  };
 
 			const editor = Editor.create(headerData, propertyModels, definitionContext, this.services, typeClassName);
 
-			editor.onValueChanged.subscribe((path: Path) => {
-				if (path.equals(stepModel.name.value.path)) {
+			editor.onValuesChanged.subscribe((paths: Path[]) => {
+				if (paths.some(path => path.equals(stepModel.name.value.path))) {
 					context.notifyNameChanged();
 				} else {
 					context.notifyPropertiesChanged();
@@ -119,4 +120,11 @@ export class EditorProvider<TDefinition extends Definition> {
 		groups.sort((a, b) => a.name.localeCompare(b.name));
 		return groups;
 	}
+
+	public createStepLabelProvider(): StepLabelProvider {
+		return (step: { type: string }): string => {
+			const stepModel = this.definitionModel.steps[step.type];
+			return stepModel.label;
+		};
+	}
 }

editor/src/editor.ts

@@ -1,7 +1,8 @@
-import { DefinitionContext, Path, PropertyModel, PropertyModels, SimpleEvent } from 'sequential-workflow-editor-model';
+import { DefinitionContext, Path, PropertyModel, PropertyModels } from 'sequential-workflow-editor-model';
 import { PropertyEditor } from './property-editor/property-editor';
 import { EditorServices, ValueEditorEditorFactoryResolver } from './value-editors';
 import { EditorHeader, EditorHeaderData } from './editor-header';
+import { StackedSimpleEvent } from './core/stacked-simple-event';
 
 export class Editor {
 	public static create(
@@ -35,21 +36,21 @@ export class Editor {
 		return editor;
 	}
 
-	public readonly onValueChanged = new SimpleEvent<Path>();
+	public readonly onValuesChanged = new StackedSimpleEvent<Path>();
 
 	private constructor(public readonly root: HTMLElement, private readonly editors: Map<PropertyModel, PropertyEditor>) {}
 
 	private readonly onValueChangedHandler = (path: Path) => {
-		this.onValueChanged.forward(path);
+		this.onValuesChanged.push(path);
+		// console.log('onValueChangedHandler', path.toString());
 
 		this.editors.forEach((editor, propertyModel) => {
-			if (propertyModel.value.path.equals(path)) {
+			if (path.startsWith(propertyModel.path)) {
 				// Skip self
 				return;
 			}
-
-			if (propertyModel.dependencies.some(dep => dep.startsWith(path))) {
-				editor.validate();
+			if (propertyModel.dependencies.some(dependency => path.startsWith(dependency))) {
+				editor.reloadDependencies();
 			}
 		});
 	};