Skip to content

Commit 770df05

Browse files
b4rtazb4rtaz
authored
0.7.2. (#17)
1 parent 70dec25 commit 770df05

31 files changed

+409
-68
lines changed

‎CHANGELOG.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,25 @@
1+
## 0.7.2
2+
3+
We added a new type of a validator: step validator. It allows to restrict a placement of a step in a definition. For example, you can enforce that a step can be placed only inside a specific step.
4+
5+
```ts
6+
createStepModel<WriteSocketStep>('writeSocket', 'task', step => {
7+
step.validator({
8+
validate(context: StepValidatorContext) {
9+
const parentTypes = context.getParentStepTypes()
10+
return parentTypes.includes('socket');
11+
? null // No errors
12+
: 'The write socket step must be inside a socket.';
13+
}
14+
});
15+
});
16+
```
17+
18+
Additionally we've renamed:
19+
20+
* the `CustomValidatorContext` class to `PropertyValidatorContext`,
21+
* the `customValidator` method of the `PropertyModelBuilder` class to `validator`.
22+
123
## 0.7.1
224

325
This version renames all `*ValueModel` functions to `create*ValueModel`, adding the `create` prefix.

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ Powerful workflow editor builder for sequential workflows. Written in TypeScript
1212

1313
* [🛠 Playground](https://nocode-js.github.io/sequential-workflow-editor/webpack-app/public/playground.html)
1414
* [📖 Editors](https://nocode-js.github.io/sequential-workflow-editor/webpack-app/public/editors.html)
15+
* [🎯 Placement Restrictions](https://nocode-js.github.io/sequential-workflow-editor/webpack-app/public/placement-restrictions.html)
1516

1617
## 🚀 Installation
1718

‎demos/webpack-app/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
"sequential-workflow-model": "^0.1.4",
1919
"sequential-workflow-designer": "^0.13.5",
2020
"sequential-workflow-machine": "^0.3.0",
21-
"sequential-workflow-editor-model": "^0.7.1",
22-
"sequential-workflow-editor": "^0.7.1"
21+
"sequential-workflow-editor-model": "^0.7.2",
22+
"sequential-workflow-editor": "^0.7.2"
2323
},
2424
"devDependencies": {
2525
"ts-loader": "^9.4.2",

‎demos/webpack-app/public/assets/placement-restrictions.css

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
html,
2+
body,
3+
#designer {
4+
margin: 0;
5+
padding: 0;
6+
width: 100vw;
7+
height: 100vh;
8+
overflow: hidden;
9+
}
10+
body,
11+
input,
12+
textarea {
13+
font: 14px/1.3em Arial, Verdana, sans-serif;
14+
}
15+
.sqd-global-editor {
16+
padding: 10px;
17+
line-height: 1.3em;
18+
box-sizing: border-box;
19+
}
20+
a {
21+
color: #000;
22+
text-decoration: underline;
23+
}
24+
a:hover {
25+
text-decoration: none;
26+
}

‎demos/webpack-app/public/editors.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
55
<title>📖 Editors - Sequential Workflow Editor</title>

‎demos/webpack-app/public/placement-restrictions.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>🎯 Placement Restrictions - Sequential Workflow Editor</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
7+
<link rel="icon" href="./assets/favicon.ico" />
8+
<script src="./builds/placement-restrictions.js" defer></script>
9+
<link rel="stylesheet" href="./assets/placement-restrictions.css" />
10+
</head>
11+
<body>
12+
<div id="designer"></div>
13+
</body>
14+
</html>

‎demos/webpack-app/public/playground.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
55
<title>🛠 Playground - Sequential Workflow Editor</title>

‎demos/webpack-app/src/placement-restrictions/app.ts

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { EditorProvider } from 'sequential-workflow-editor';
2+
import { SocketStep, definitionModel } from './definition-model';
3+
import { Designer, Uid } from 'sequential-workflow-designer';
4+
5+
import 'sequential-workflow-designer/css/designer.css';
6+
import 'sequential-workflow-designer/css/designer-light.css';
7+
import 'sequential-workflow-editor/css/editor.css';
8+
9+
export class App {
10+
public static create() {
11+
const placeholder = document.getElementById('designer') as HTMLElement;
12+
13+
const editorProvider = EditorProvider.create(definitionModel, {
14+
uidGenerator: Uid.next
15+
});
16+
17+
const definition = editorProvider.activateDefinition();
18+
const loop = editorProvider.activateStep('socket') as SocketStep;
19+
loop.sequence.push(editorProvider.activateStep('writeSocket'));
20+
const break_ = editorProvider.activateStep('writeSocket');
21+
definition.sequence.push(loop);
22+
definition.sequence.push(break_);
23+
24+
Designer.create(placeholder, definition, {
25+
controlBar: true,
26+
editors: {
27+
globalEditorProvider: () => {
28+
const editor = document.createElement('div');
29+
editor.innerHTML =
30+
'This example shows how to restrict the placement of steps. The write socket step can only be placed inside a socket step. <a href="https://github.com/nocode-js/sequential-workflow-editor">GitHub</a>';
31+
return editor;
32+
},
33+
stepEditorProvider: editorProvider.createStepEditorProvider()
34+
},
35+
validator: {
36+
step: editorProvider.createStepValidator(),
37+
root: editorProvider.createRootValidator()
38+
},
39+
steps: {
40+
iconUrlProvider: () => './assets/icon-task.svg'
41+
},
42+
toolbox: {
43+
groups: editorProvider.getToolboxGroups(),
44+
labelProvider: editorProvider.createStepLabelProvider()
45+
}
46+
});
47+
}
48+
}
49+
50+
document.addEventListener('DOMContentLoaded', App.create, false);

‎demos/webpack-app/src/placement-restrictions/definition-model.ts

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import {
2+
createDefinitionModel,
3+
createNumberValueModel,
4+
createSequentialStepModel,
5+
createStepModel,
6+
createStringValueModel
7+
} from 'sequential-workflow-editor-model';
8+
import { SequentialStep } from 'sequential-workflow-model';
9+
10+
export interface SocketStep extends SequentialStep {
11+
type: 'socket';
12+
componentType: 'container';
13+
properties: {
14+
ip: string;
15+
port: number;
16+
};
17+
}
18+
19+
export interface WriteSocketStep extends SequentialStep {
20+
type: 'writeSocket';
21+
componentType: 'task';
22+
properties: {
23+
data: string;
24+
};
25+
}
26+
27+
export const definitionModel = createDefinitionModel(model => {
28+
model.root(() => {
29+
//
30+
});
31+
model.steps([
32+
createSequentialStepModel<SocketStep>('socket', 'container', step => {
33+
step.property('ip').value(
34+
createStringValueModel({
35+
defaultValue: '127.0.0.1'
36+
})
37+
);
38+
step.property('port').value(
39+
createNumberValueModel({
40+
defaultValue: 5000
41+
})
42+
);
43+
}),
44+
createStepModel<WriteSocketStep>('writeSocket', 'task', step => {
45+
step.property('data').value(
46+
createStringValueModel({
47+
defaultValue: 'Hello World!'
48+
})
49+
);
50+
51+
step.validator({
52+
validate(context) {
53+
const parentTypes = context.getParentStepTypes();
54+
return parentTypes.includes('socket') ? null : 'The write socket step must be inside a socket.';
55+
}
56+
});
57+
})
58+
]);
59+
});

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export const rootModel = createRootModel<MyDefinition>(root => {
66
.hint('Variables passed to the workflow from the outside.')
77
.value(createVariableDefinitionsValueModel({}))
88
.dependentProperty('outputs')
9-
.customValidator({
9+
.validator({
1010
validate(context) {
1111
const inputs = context.getPropertyValue('outputs');
1212
return inputs.variables.length > 0 ? null : 'At least one input is required';

0 commit comments

Comments
 (0)