0.13.0. (#36)

Author: b4rtaz

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.13.0
+
+This version introduces several internal changes that allowed for the creation of a new type of editor in the pro version: the hidden dependent value editor.
+
 ## 0.12.1
 
 This version normalizes translations.

demos/vanilla-js-app/vanilla-js.html

@@ -23,9 +23,9 @@
 			}
 		</style>
 
-		<link href="https://cdn.jsdelivr.net/npm/[email protected].1/css/designer.css" rel="stylesheet" />
-		<link href="https://cdn.jsdelivr.net/npm/[email protected].1/css/designer-light.css" rel="stylesheet" />
-		<script src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/index.umd.js"></script>
+		<link href="https://cdn.jsdelivr.net/npm/[email protected].2/css/designer.css" rel="stylesheet" />
+		<link href="https://cdn.jsdelivr.net/npm/[email protected].2/css/designer-light.css" rel="stylesheet" />
+		<script src="https://cdn.jsdelivr.net/npm/[email protected].2/dist/index.umd.js"></script>
 
 		<script src="./assets/lib.js"></script>
 		<script src="./assets/vanilla-js.js"></script>

demos/webpack-app/package.json

@@ -16,10 +16,10 @@
 	"dependencies": {
 		"xstate": "^4.38.2",
 		"sequential-workflow-model": "^0.2.0",
-		"sequential-workflow-designer": "^0.21.1",
+		"sequential-workflow-designer": "^0.21.2",
 		"sequential-workflow-machine": "^0.4.0",
-		"sequential-workflow-editor-model": "^0.12.1",
-		"sequential-workflow-editor": "^0.12.1"
+		"sequential-workflow-editor-model": "^0.13.0",
+		"sequential-workflow-editor": "^0.13.0"
 	},
 	"devDependencies": {
 		"ts-loader": "^9.4.2",

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

@@ -27,7 +27,8 @@ export class App {
 				rootEditorProvider: () => {
 					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>';
+						'This demo showcases all the supported editors by the <a href="https://github.com/nocode-js/sequential-workflow-editor">Sequential Workflow Editor</a>.<br /><br />' +
+						'Start exploring by clicking on each step.';
 					return editor;
 				},
 				stepEditorProvider: editorProvider.createStepEditorProvider()

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

@@ -11,6 +11,8 @@ export interface AnyVariablesStepModel extends Step {
 }
 
 export const anyVariablesStepModel = createStepModel<AnyVariablesStepModel>('anyVariables', 'task', step => {
+	step.description('In this step, you can select a collection of variables of any type.');
+
 	step.property('zeroConfig').value(createAnyVariablesValueModel({}));
 	step.property('onlyBoolean').value(
 		createAnyVariablesValueModel({

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

@@ -12,6 +12,8 @@ export interface BooleanStepModel extends Step {
 }
 
 export const booleanStepModel = createStepModel<BooleanStepModel>('boolean', 'task', step => {
+	step.description('This step demonstrates properties with boolean values.');
+
 	step.property('zeroConfig').value(createBooleanValueModel({}));
 	step.property('defaultValueTrue').value(
 		createBooleanValueModel({

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

@@ -11,6 +11,8 @@ export interface ChoiceStepModel extends Step {
 }
 
 export const choiceStepModel = createStepModel<ChoiceStepModel>('choice', 'task', step => {
+	step.description('In this step, you can see properties that allow you to select a value from a predefined list.');
+
 	step.property('minimalConfig').value(createChoiceValueModel({ choices: ['red', 'blue', 'green'] }));
 
 	step.property('defaultValueAllow').value(

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

@@ -19,6 +19,10 @@ export interface DynamicStepModel extends Step {
 }
 
 export const dynamicStepModel = createStepModel<DynamicStepModel>('dynamic', 'task', step => {
+	step.description(
+		'This step has properties with dynamic values. For each property, you can change the value type by selecting the desired type.'
+	);
+
 	step.property('example').value(
 		createDynamicValueModel({
 			models: [createStringValueModel({}), createBooleanValueModel({})]

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

@@ -11,6 +11,10 @@ export interface GeneratedStringStepModel extends Step {
 }
 
 export const generatedStringStepModel = createStepModel<GeneratedStringStepModel>('generatedString', 'task', step => {
+	step.description(
+		'This step has a property whose value is generated using data from another property. To see how it works, please change the value of the "X" property to 0, 1, 2, etc.'
+	);
+
 	step.property('x').value(createNumberValueModel({}));
 
 	step.property('example')

editor/css/editor.css

@@ -29,6 +29,9 @@
 .swe-editor > .swe-validation-error {
 	margin: 0 10px;
 }
+.swe-hidden {
+	display: none;
+}
 
 /* properties */
 

editor/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sequential-workflow-editor",
-	"version": "0.12.1",
+	"version": "0.13.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.12.1",
+		"sequential-workflow-editor-model": "^0.13.0",
 		"sequential-workflow-model": "^0.2.0"
 	},
 	"peerDependencies": {
-		"sequential-workflow-editor-model": "^0.12.1",
+		"sequential-workflow-editor-model": "^0.13.0",
 		"sequential-workflow-model": "^0.2.0"
 	},
 	"devDependencies": {

editor/src/components/property-validation-error-component.ts

@@ -4,6 +4,7 @@ import { validationErrorComponent } from './validation-error-component';
 
 export interface PropertyValidationErrorComponent extends Component {
 	validate(): void;
+	isHidden(): boolean;
 }
 
 export function propertyValidationErrorComponent(
@@ -21,6 +22,7 @@ export function propertyValidationErrorComponent(
 
 	return {
 		view: validation.view,
-		validate
+		validate,
+		isHidden: validation.isHidden
 	};
 }

editor/src/components/validation-error-component.spec.ts

@@ -0,0 +1,38 @@
+import { validationErrorComponent } from './validation-error-component';
+
+describe('ValidationErrorComponent', () => {
+	it('returns correct value for isHidden() and emits changes', () => {
+		let emitted: boolean | null = null;
+		const component = validationErrorComponent();
+		component.onIsHiddenChanged.subscribe(v => (emitted = v));
+
+		// test 1
+		expect(component.isHidden()).toBe(true);
+		expect(component.view.children.length).toBe(0);
+		expect(emitted).toBeNull();
+
+		// test 2
+		emitted = null;
+		component.setDefaultError({ $: 'Expected 2 characters' });
+
+		expect(component.isHidden()).toBe(false);
+		expect(component.view.children.length).toBeGreaterThan(0);
+		expect(emitted).toBe(false);
+
+		// test 3
+		emitted = null;
+		component.setDefaultError({ $: 'Expected 3 characters' });
+
+		expect(component.isHidden()).toBe(false);
+		expect(component.view.children.length).toBeGreaterThan(0);
+		expect(emitted).toBeNull(); // Visibility did not change
+
+		// test 4
+		emitted = null;
+		component.setDefaultError(null);
+
+		expect(component.isHidden()).toBe(true);
+		expect(component.view.children.length).toBe(0);
+		expect(emitted).toBe(true);
+	});
+});

editor/src/components/validation-error-component.ts

@@ -1,8 +1,10 @@
-import { ValidationResult } from 'sequential-workflow-editor-model';
+import { SimpleEvent, ValidationResult } from 'sequential-workflow-editor-model';
 import { Component } from './component';
 import { Html } from '../core/html';
 
 export interface ValidationErrorComponent extends Component {
+	onIsHiddenChanged: SimpleEvent<boolean>;
+	isHidden(): boolean;
 	setError(error: string | null): void;
 	setDefaultError(result: ValidationResult): void;
 }
@@ -11,9 +13,16 @@ export function validationErrorComponent(): ValidationErrorComponent {
 	const view = Html.element('div', {
 		class: 'swe-validation-error'
 	});
+	const onIsHiddenChanged = new SimpleEvent<boolean>();
 	let child: HTMLElement | null = null;
 
+	function isHidden() {
+		return child === null;
+	}
+
 	function setError(error: string | null) {
+		const oldState = isHidden();
+
 		if (child) {
 			view.removeChild(child);
 			child = null;
@@ -25,14 +34,21 @@ export function validationErrorComponent(): ValidationErrorComponent {
 			child.textContent = error;
 			view.appendChild(child);
 		}
+
+		const newState = isHidden();
+		if (oldState !== newState) {
+			onIsHiddenChanged.forward(newState);
+		}
 	}
 
 	function setDefaultError(result: ValidationResult) {
 		setError(result && result['$']);
 	}
 
 	return {
+		onIsHiddenChanged,
 		view,
+		isHidden,
 		setError,
 		setDefaultError
 	};

editor/src/core/html.spec.ts

@@ -23,4 +23,16 @@ describe('Html', () => {
 
 		expect(element.getAttribute('data-test')).toBe('555');
 	});
+
+	it('toggles class', () => {
+		const element = document.createElement('div');
+
+		Html.toggleClass(element, true, 'foo');
+
+		expect(element.classList.contains('foo')).toBe(true);
+
+		Html.toggleClass(element, false, 'foo');
+
+		expect(element.classList.contains('foo')).toBe(false);
+	});
 });

editor/src/core/html.ts

@@ -17,4 +17,12 @@ export class Html {
 		}
 		return element;
 	}
+
+	public static toggleClass(element: Element, isEnabled: boolean, className: string) {
+		if (isEnabled) {
+			element.classList.add(className);
+		} else {
+			element.classList.remove(className);
+		}
+	}
 }

editor/src/editor.ts

@@ -32,10 +32,6 @@ export class Editor {
 
 		const editors = new Map<PropertyModel, PropertyEditor>();
 		for (const propertyModel of propertyModels) {
-			if (editorServices.valueEditorFactoryResolver.isHidden(propertyModel.value.id, propertyModel.value.editorId)) {
-				continue;
-			}
-
 			const propertyEditor = PropertyEditor.create(propertyModel, stepType, definitionContext, editorServices);
 			root.appendChild(propertyEditor.view);
 			editors.set(propertyModel, propertyEditor);