0.3.2. (#8)

Author: b4rtaz

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 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.
+* The `PropertyModel` interface has one new property: `hint`. The hint is used to display an additional information about a property in the editor.
+
 ## 0.3.1
 
 Added new value model: boolean (`booleanValueModel({ ... })`).

demos/webpack-app/package.json

@@ -18,8 +18,8 @@
 		"sequential-workflow-model": "^0.1.3",
 		"sequential-workflow-designer": "^0.13.2",
 		"sequential-workflow-machine": "^0.2.0",
-		"sequential-workflow-editor-model": "^0.3.1",
-		"sequential-workflow-editor": "^0.3.1"
+		"sequential-workflow-editor-model": "^0.3.2",
+		"sequential-workflow-editor": "^0.3.2"
 	},
 	"devDependencies": {
 		"ts-loader": "^9.4.2",

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

@@ -3,7 +3,7 @@ import { editorProvider } from './editor-provider';
 import { AppState, AppStorage } from './storage';
 import { Playground } from './playground';
 import { executeMachine } from './machine/machine-executor';
-import { MyDefinition, definitionModel } from './model/definition-model';
+import { MyDefinition } from './model/definition-model';
 import { defaultAppState } from './default-state';
 
 import 'sequential-workflow-designer/css/designer.css';
@@ -33,12 +33,7 @@ export class App {
 				}
 			},
 			toolbox: {
-				groups: [
-					{
-						name: 'Steps',
-						steps: Object.keys(definitionModel.steps).map(stepType => editorProvider.activateStep(stepType))
-					}
-				]
+				groups: editorProvider.getToolboxGroups()
 			},
 			undoStackSize: 10,
 			definitionWalker

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

@@ -22,6 +22,9 @@ export interface CalculateStep extends Step {
 }
 
 export const calculateStepModel = createStepModel<CalculateStep>('calculate', 'task', step => {
+	step.category('Values');
+	step.description('Calculate value from two numbers. Result is stored in variable.');
+
 	const val = dynamicValueModel({
 		models: [
 			numberValueModel({}),

demos/webpack-app/src/playground/model/convert-value-step-model.ts

@@ -11,6 +11,9 @@ export interface ConvertValueStep extends Step {
 }
 
 export const convertValueStepModel = createStepModel<ConvertValueStep>('convertValue', 'task', step => {
+	step.category('Values');
+	step.description('Convert value from one variable to another.');
+
 	step.property('source')
 		.value(
 			nullableAnyVariableValueModel({

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

@@ -23,6 +23,9 @@ export interface IfStep extends BranchedStep {
 }
 
 export const ifStepModel = createBranchedStepModel<IfStep>('if', 'switch', step => {
+	step.category('Logic');
+	step.description('Check condition and execute different branches.');
+
 	const ab = dynamicValueModel({
 		models: [
 			numberValueModel({}),
@@ -34,17 +37,18 @@ export const ifStepModel = createBranchedStepModel<IfStep>('if', 'switch', step
 		]
 	});
 
-	step.property('a').value(ab).label('A');
+	step.property('a').value(ab).label('A').hint('Left side of comparison.');
 
 	step.property('operator')
 		.label('Operator')
 		.value(
 			choiceValueModel({
 				choices: ['==', '===', '!=', '!==', '>', '>=', '<', '<=']
 			})
-		);
+		)
+		.hint('Comparison operator.\nStep supports strict and non-strict operators.');
 
-	step.property('b').value(ab).label('B');
+	step.property('b').value(ab).label('B').hint('Right side of comparison.');
 
 	step.branches().value(
 		branchesValueModel({

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

@@ -28,6 +28,9 @@ export interface LoopStep extends SequentialStep {
 }
 
 export const loopStepModel = createSequentialStepModel('loop', 'container', step => {
+	step.category('Logic');
+	step.description('Loop over a range of numbers.');
+
 	step.property('from')
 		.label('From')
 		.value(

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

@@ -3,6 +3,7 @@ import { MyDefinition } from './definition-model';
 
 export const rootModel = createRootModel<MyDefinition>(root => {
 	root.property('inputs')
+		.hint('Variables passed to the workflow from the outside.')
 		.value(variableDefinitionsValueModel({}))
 		.dependentProperty('outputs')
 		.customValidator({
@@ -11,7 +12,9 @@ export const rootModel = createRootModel<MyDefinition>(root => {
 				return inputs.variables.length > 0 ? null : 'At least one input is required';
 			}
 		});
-	root.property('outputs').value(variableDefinitionsValueModel({})).label('Outputs');
+
+	root.property('outputs').hint('Variables returned from the workflow.').value(variableDefinitionsValueModel({})).label('Outputs');
+
 	root.sequence().value(
 		sequenceValueModel({
 			sequence: []

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

@@ -19,6 +19,8 @@ export interface SetStringValueStep extends Step {
 }
 
 export const setStringValueStepModel = createStepModel<SetStringValueStep>('setStringValue', 'task', step => {
+	step.category('Values');
+
 	step.property('variable')
 		.value(
 			nullableVariableValueModel({

editor/css/editor.css

@@ -8,7 +8,23 @@
 .swe-editor {
 	margin: 10px 0 0;
 	font-size: 13px;
-	line-height: 1.3em;
+	line-height: 1.3rem;
+}
+.swe-editor-header {
+	padding: 0 10px 5px;
+}
+.swe-editor-header-title {
+	margin: 0;
+	padding: 5px 0 10px;
+	font-size: 1.4rem;
+	line-height: 1.3rem;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+.swe-editor-header-description {
+	margin: 0 0 10px;
+	color: #666;
 }
 
 /* properties */
@@ -24,14 +40,44 @@
 }
 .swe-property-header-label {
 	display: block;
-	flex: 1;
 	padding: 0;
 	margin: 0;
 	font-size: 1.05rem;
+	line-height: 1.3rem;
+}
+.swe-property-header-hint-toggle {
+	display: block;
+	width: 18px;
+	height: 18px;
+	margin: 0 8px;
+	background: #ddd;
+	border-radius: 50% 50%;
+	text-align: center;
+	font-size: 11px;
+	cursor: pointer;
+}
+.swe-property-header-hint-toggle:hover {
+	background: #eee;
+}
+.swe-property-header-hint-toggle-icon {
+	width: 70%;
+	height: 70%;
+	margin: 15%;
+}
+.swe-property-header-hint-toggle-icon path {
+	fill: #777;
 }
 .swe-property-header-control {
+	flex: 1;
 	text-align: right;
 }
+.swe-property-hint-text {
+	margin: 0 0 10px;
+	padding: 6px 10px;
+	border-radius: 5px;
+	background: #eee;
+	border: 1px solid #ddd;
+}
 .swe-validation-error-text {
 	margin: 0 0 10px;
 	padding: 6px 10px;