0.2.2.

Author: b4rtaz

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.2.2
+
+Added the `notifyChildrenChanged()` method to the `StepEditorContext` interface.
+
 ## 0.2.1
 
 Support undo and redo. This feature is disabled by default. To enable it add the below config.

examples/assets/fullscreen.js

@@ -48,6 +48,19 @@ function toolboxGroup(name) {
 	};
 }
 
+function appendCheckbox(root, label, isChecked, onClick) {
+	const item = document.createElement('div');
+	item.innerHTML = '<div><h5></h5> <input type="checkbox" /></div>';
+	const h5 = item.getElementsByTagName('h5')[0];
+	h5.innerText = label;
+	const input = item.getElementsByTagName('input')[0];
+	input.checked = isChecked;
+	input.addEventListener('click', () => {
+		onClick(input.checked);
+	});
+	root.appendChild(item);
+}
+
 let designer;
 const configuration = {
 	undoStackSize: 20,
@@ -83,15 +96,22 @@ const configuration = {
 
 		stepEditorProvider: (step, editorContext) => {
 			const root = document.createElement('div');
-			root.innerHTML = '<h5></h5> <p>is invalid: <input type="checkbox" /></p>';
-			const title = root.getElementsByTagName('h5')[0];
-			title.innerText = step.name;
-			const input = root.getElementsByTagName('input')[0];
-			input.checked = !!step.properties['isInvalid'];
-			input.addEventListener('click', () => {
-				step.properties['isInvalid'] = !!input.checked;
+
+			appendCheckbox(root, 'Is invalid', !!step.properties['isInvalid'], (checked) => {
+				step.properties['isInvalid'] = checked;
 				editorContext.notifyPropertiesChanged();
 			});
+
+			if (step.type === 'if') {
+				appendCheckbox(root, 'Catch branch', !!step.branches['catch'], (checked) => {
+					if (checked) {
+						step.branches['catch'] = [];
+					} else {
+						delete step.branches['catch'];
+					}
+					editorContext.notifyChildrenChanged();
+				});
+			}
 			return root;
 		}
 	}

package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "sequential-workflow-designer",
-	"version": "0.2.1",
+	"version": "0.2.2",
 	"main": "./lib/designer.js",
 	"types": "./lib/designer.d.ts",
 	"repository": {

package.json

@@ -44,6 +44,7 @@ export interface EditorsConfiguration {
 export interface StepEditorContext {
 	notifyNameChanged(): void;
 	notifyPropertiesChanged(): void;
+	notifyChildrenChanged(): void;
 }
 
 export type StepEditorProvider = (step: Step, context: StepEditorContext) => HTMLElement;

src/designer-configuration.ts

@@ -10,6 +10,7 @@ export interface DefinitionChangedEvent {
 export enum DefinitionChangeType {
 	stepNameChanged = 1,
 	stepPropertyChanged,
+	stepChildrenChanged,
 	stepDeleted,
 	stepMoved,
 	stepInserted,

src/designer-state.ts

@@ -13,6 +13,9 @@ export class StepEditor implements Editor {
 			},
 			notifyNameChanged: () => {
 				context.state.notifyDefinitionChanged(DefinitionChangeType.stepNameChanged, step.id);
+			},
+			notifyChildrenChanged: () => {
+				context.state.notifyDefinitionChanged(DefinitionChangeType.stepChildrenChanged, step.id);
 			}
 		};