0.2.0. (#4)

Author: b4rtaz

.github/cover.png

@@ -0,0 +1,10 @@
+## 0.2.0
+
+**Breaking changes:**
+
+* The editor displays variables with dollar prefix (`$`).
+* The `choices` property is renamed to `models` in the `DynamicValueModelConfiguration` interface.
+
+## 0.1.0
+
+First release! 🚀

CHANGELOG.md

@@ -18,8 +18,8 @@
 		"sequential-workflow-model": "^0.1.3",
 		"sequential-workflow-designer": "^0.13.0",
 		"sequential-workflow-machine": "^0.2.0",
-		"sequential-workflow-editor-model": "^0.1.0",
-		"sequential-workflow-editor": "^0.1.0"
+		"sequential-workflow-editor-model": "^0.2.0",
+		"sequential-workflow-editor": "^0.2.0"
 	},
 	"devDependencies": {
 		"ts-loader": "^9.4.2",
@@ -33,4 +33,4 @@
 		"@typescript-eslint/parser": "^5.47.0",
 		"eslint": "^8.30.0"
 	}
-}
+}

demos/webpack-app/package.json

@@ -11,7 +11,7 @@ const definition: MyDefinition = {
 	sequence: [
 		{
 			id: 'a282bc1908816678905a3c94049478aa',
-			name: 'index < loops',
+			name: '$index < $loops',
 			type: 'loop',
 			componentType: 'container',
 			properties: {
@@ -20,28 +20,28 @@ const definition: MyDefinition = {
 				to: { modelId: 'nullableVariable', value: { name: 'loops' } },
 				increment: { modelId: 'number', value: 1 },
 				indexVariable: { name: 'index', type: 'number' },
-				variables: { variables: [{ name: 'diff', type: 'number' }] }
+				variables: { variables: [{ name: 'remainder', type: 'number' }] }
 			},
 			sequence: [
 				{
 					id: '32529a3fbef39d5e480df8454164edae',
-					name: 'diff = index % 2',
+					name: '$remainder = $index % 2',
 					type: 'calculate',
 					componentType: 'task',
 					properties: {
 						a: { modelId: 'nullableVariable', value: { name: 'index' } },
 						operator: '%',
 						b: { modelId: 'number', value: 2 },
-						result: { name: 'diff' }
+						result: { name: 'remainder' }
 					}
 				},
 				{
 					id: 'f2f35f162f009e7683cf31c24a1e9589',
-					name: 'If diff == 0',
+					name: 'If $remainder == 0',
 					type: 'if',
 					componentType: 'switch',
 					properties: {
-						a: { modelId: 'nullableVariable', value: { name: 'diff' } },
+						a: { modelId: 'nullableVariable', value: { name: 'remainder' } },
 						operator: '=',
 						b: { modelId: 'number', value: 0 }
 					},

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

@@ -1,6 +1,7 @@
 import { createAtomActivity } from 'sequential-workflow-machine';
 import { GlobalState } from '../global-state';
 import { LogStep } from '../../model/log-step-model';
+import { formatVariableName } from 'sequential-workflow-editor';
 
 export const logActivity = createAtomActivity<LogStep, GlobalState>({
 	init: () => ({}),
@@ -11,7 +12,8 @@ export const logActivity = createAtomActivity<LogStep, GlobalState>({
 		for (const variable of step.properties.variables.variables) {
 			const value = $variables.isSet(variable.name) ? $variables.read(variable.name) || '<empty>' : '<not set>';
 			const type = typeof value;
-			message += `\n${variable.name}=${value} (${type})`;
+			const name = formatVariableName(variable.name);
+			message += `\n${name}=${value} (${type})`;
 		}
 
 		$logger.log(message);

demos/webpack-app/src/playground/machine/activities/log-activity.ts

@@ -23,7 +23,7 @@ export interface CalculateStep extends Step {
 
 export const calculateStepModel = createStepModel<CalculateStep>('calculate', 'task', step => {
 	const val = dynamicValueModel({
-		choices: [
+		models: [
 			numberValueModel({}),
 			nullableVariableValueModel({
 				isRequired: true,
@@ -32,6 +32,13 @@ export const calculateStepModel = createStepModel<CalculateStep>('calculate', 't
 		]
 	});
 
+	step.property('result').value(
+		nullableVariableValueModel({
+			variableType: ValueKnownType.number,
+			isRequired: true
+		})
+	);
+
 	step.property('a').value(val).label('A');
 
 	step.property('operator').value(
@@ -41,11 +48,4 @@ export const calculateStepModel = createStepModel<CalculateStep>('calculate', 't
 	);
 
 	step.property('b').value(val).label('B');
-
-	step.property('result').value(
-		nullableVariableValueModel({
-			variableType: ValueKnownType.number,
-			isRequired: true
-		})
-	);
 });

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

@@ -23,7 +23,7 @@ export interface IfStep extends BranchedStep {
 
 export const ifStepModel = createBranchedStepModel<IfStep>('if', 'switch', step => {
 	const val = dynamicValueModel({
-		choices: [
+		models: [
 			numberValueModel({}),
 			nullableVariableValueModel({
 				isRequired: true,

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

@@ -24,7 +24,7 @@ export const logStepModel = createStepModel<LogStep>('log', 'task', step => {
 	step.property('message')
 		.value(
 			dynamicValueModel({
-				choices: [
+				models: [
 					stringValueModel({
 						minLength: 1
 					}),

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

@@ -32,7 +32,7 @@ export const loopStepModel = createSequentialStepModel('loop', 'container', step
 		.label('From')
 		.value(
 			dynamicValueModel({
-				choices: [
+				models: [
 					numberValueModel({}),
 					nullableVariableValueModel({
 						isRequired: true,
@@ -54,7 +54,7 @@ export const loopStepModel = createSequentialStepModel('loop', 'container', step
 		.label('To')
 		.value(
 			dynamicValueModel({
-				choices: [
+				models: [
 					numberValueModel({}),
 					nullableVariableValueModel({
 						isRequired: true,
@@ -68,7 +68,7 @@ export const loopStepModel = createSequentialStepModel('loop', 'container', step
 		.label('Increment')
 		.value(
 			dynamicValueModel({
-				choices: [
+				models: [
 					numberValueModel({
 						defaultValue: 1
 					}),

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

@@ -30,7 +30,7 @@ export const setStringValueModel = createStepModel<SetStringValueStep>('setStrin
 	step.property('value')
 		.value(
 			dynamicValueModel({
-				choices: [
+				models: [
 					stringValueModel({
 						minLength: 1
 					}),

demos/webpack-app/src/playground/model/set-string-value-model.ts

@@ -1,6 +1,6 @@
 {
 	"name": "sequential-workflow-editor",
-	"version": "0.1.0",
+	"version": "0.2.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.1.0",
+		"sequential-workflow-editor-model": "^0.2.0",
 		"sequential-workflow-model": "^0.1.3"
 	},
 	"peerDependencies": {
-		"sequential-workflow-editor-model": "^0.1.0",
+		"sequential-workflow-editor-model": "^0.2.0",
 		"sequential-workflow-model": "^0.1.3"
 	},
 	"devDependencies": {
@@ -79,4 +79,4 @@
 		"lowcode",
 		"flow"
 	]
-}
+}

editor/package.json

@@ -0,0 +1,2 @@
+export * from './html';
+export * from './variable-name-formatter';

editor/src/core/index.ts

@@ -0,0 +1,7 @@
+import { formatVariableName } from './variable-name-formatter';
+
+describe('formatVariableName', () => {
+	it('returns proper name', () => {
+		expect(formatVariableName('lastName')).toBe('$lastName');
+	});
+});

editor/src/core/variable-name-formatter.spec.ts

@@ -0,0 +1,3 @@
+export function formatVariableName(name: string): string {
+	return `$${name}`;
+}

editor/src/core/variable-name-formatter.ts

@@ -1,2 +1,3 @@
+export * from './core';
 export * from './value-editors';
 export * from './editor-provider';

editor/src/index.ts

@@ -4,6 +4,7 @@ import { validationErrorComponent } from '../../components/validation-error-comp
 import { Component } from '../../components/component';
 import { buttonComponent } from '../../components/button-component';
 import { rowComponent } from '../../components/row-component';
+import { formatVariableName } from '../../core/variable-name-formatter';
 
 export interface AnyVariableItemComponent extends Component {
 	onDeleteClicked: SimpleEvent<void>;
@@ -20,7 +21,7 @@ export function anyVariableItemComponent(variable: AnyVariable): AnyVariableItem
 	const view = Html.element('div');
 
 	const name = Html.element('span');
-	name.innerText = `${variable.name} (${variable.type})`;
+	name.innerText = `${formatVariableName(variable.name)} (${variable.type})`;
 
 	const deleteButton = buttonComponent('Delete');
 	deleteButton.onClick.subscribe(() => onDeleteClicked.forward());

editor/src/value-editors/any-variables/any-variable-item-component.ts

@@ -10,6 +10,7 @@ import { selectComponent } from '../../components/select-component';
 import { Component } from '../../components/component';
 import { rowComponent } from '../../components/row-component';
 import { buttonComponent } from '../../components/button-component';
+import { formatVariableName } from '../../core/variable-name-formatter';
 
 export interface AnyVariableSelectorComponent extends Component {
 	onAdded: SimpleEvent<AnyVariable>;
@@ -27,7 +28,7 @@ export function anyVariableSelectorComponent(context: ValueModelContext<AnyVaria
 
 	function reloadVariableSelector() {
 		variables = context.getVariables(getSelectedValueType());
-		const variableNames = variables.map(variable => variable.name);
+		const variableNames = variables.map(variable => formatVariableName(variable.name));
 		variableSelect.setValues(['-', ...variableNames]);
 	}
 

editor/src/value-editors/any-variables/any-variable-selector-component.ts

@@ -10,10 +10,10 @@ export function dynamicValueEditor(
 	context: ValueModelContext<DynamicValueModel>,
 	services: EditorServices
 ): ValueEditor<DynamicValueModel> {
-	if (!context.model.childModels) {
-		throw new Error('childModels is required');
+	if (!context.model.subModels) {
+		throw new Error('subModels is required');
 	}
-	const childModels = context.model.childModels;
+	const subModels = context.model.subModels;
 
 	function validate() {
 		if (editor) {
@@ -27,7 +27,7 @@ export function dynamicValueEditor(
 		}
 
 		const value = context.getValue();
-		const model = childModels.find(model => model.id === value.modelId);
+		const model = subModels.find(model => model.id === value.modelId);
 		if (!model || !model.id) {
 			throw new Error(`Model not found: ${value.modelId}`);
 		}
@@ -40,7 +40,7 @@ export function dynamicValueEditor(
 	}
 
 	function onTypeChanged() {
-		const newModel = childModels[childModelSelect.getSelectedIndex()];
+		const newModel = subModels[subModelSelect.getSelectedIndex()];
 		const defaultValue = {
 			modelId: newModel.id,
 			value: newModel.getDefaultValue(services.activator)
@@ -50,12 +50,12 @@ export function dynamicValueEditor(
 	}
 
 	const startValue = context.getValue();
-	const childModelSelect = selectComponent({
+	const subModelSelect = selectComponent({
 		size: 'small'
 	});
-	childModelSelect.setValues(context.model.childModels.map(model => model.id));
-	childModelSelect.selectIndex(context.model.childModels.findIndex(model => model.id === startValue.modelId));
-	childModelSelect.onSelected.subscribe(onTypeChanged);
+	subModelSelect.setValues(context.model.subModels.map(model => model.label));
+	subModelSelect.selectIndex(context.model.subModels.findIndex(model => model.id === startValue.modelId));
+	subModelSelect.onSelected.subscribe(onTypeChanged);
 
 	const placeholder = Html.element('div', {
 		class: 'swe-dynamic-placeholder'
@@ -67,7 +67,7 @@ export function dynamicValueEditor(
 
 	return {
 		view: container.view,
-		controlView: childModelSelect.view,
+		controlView: subModelSelect.view,
 		validate
 	};
 }

editor/src/value-editors/dynamic/dynamic-value-editor.ts

@@ -4,6 +4,7 @@ import { valueEditorContainerComponent } from '../../components/value-editor-con
 import { validationErrorComponent } from '../../components/validation-error-component';
 import { rowComponent } from '../../components/row-component';
 import { selectComponent } from '../../components/select-component';
+import { formatVariableName } from '../../core/variable-name-formatter';
 
 export const nullableVariableValueEditorId = 'nullableVariable';
 
@@ -31,12 +32,7 @@ export function nullableVariableValueEditor(
 	const select = selectComponent({
 		stretched: true
 	});
-	select.setValues([
-		'- Select variable -',
-		...variables.map(variable => {
-			return variable.name;
-		})
-	]);
+	select.setValues(['- Select variable -', ...variables.map(variable => formatVariableName(variable.name))]);
 	if (startValue) {
 		select.selectIndex(variables.findIndex(variable => variable.name === startValue.name) + 1);
 	} else {

editor/src/value-editors/nullable-variable/nullable-variable-value-editor.ts

@@ -1,6 +1,6 @@
 {
 	"name": "sequential-workflow-editor-model",
-	"version": "0.1.0",
+	"version": "0.2.0",
 	"homepage": "https://nocode-js.com/",
 	"author": {
 		"name": "NoCode JS",
@@ -70,4 +70,4 @@
 		"lowcode",
 		"flow"
 	]
-}
+}

model/package.json

@@ -42,9 +42,10 @@ export type ValueModelFactoryOfValue<TValue extends PropertyValue = PropertyValu
 
 export interface ValueModel<TValue extends PropertyValue = PropertyValue, TConfiguration extends object = object> {
 	id: ValueModelId;
+	label: string;
 	path: Path;
 	configuration: TConfiguration;
-	childModels?: ValueModel[];
+	subModels?: ValueModel[];
 	getDefaultValue(activator: ModelActivator): TValue;
 	getVariableDefinitions(context: ValueModelContext<ValueModel<TValue, TConfiguration>>): VariableDefinition[] | null;
 	validate(context: ValueModelContext<ValueModel<TValue, TConfiguration>>): ValidationResult;

model/src/model.ts

@@ -14,6 +14,7 @@ export const anyVariablesValueModelId = 'anyVariables';
 export function anyVariablesValueModel(configuration: AnyVariablesValueModelConfiguration): ValueModelFactory<AnyVariablesValueModel> {
 	return (path: Path) => ({
 		id: anyVariablesValueModelId,
+		label: 'Variables',
 		path,
 		configuration,
 		getDefaultValue() {

model/src/value-models/any-variable/any-variables-value-model.ts

@@ -21,6 +21,7 @@ export function branchesValueModel<TConfiguration extends BranchesValueModelConf
 ): ValueModelFactory<BranchesValueModel<BranchesOf<TConfiguration>>> {
 	return (path: Path) => ({
 		id: branchesValueModelId,
+		label: 'Branches',
 		path,
 		configuration,
 		getDefaultValue(activator: ModelActivator): BranchesOf<TConfiguration> {

model/src/value-models/branches/branches-value-model.ts

@@ -18,6 +18,7 @@ export function choiceValueModel(configuration: ChoiceValueModelConfiguration):
 
 	return (path: Path) => ({
 		id: choiceValueModelId,
+		label: 'Choice',
 		path,
 		configuration,
 		getDefaultValue() {