Skip to content

Commit a7d0f4d

Browse files
b4rtazb4rtaz
authored
0.12.0. (#42)
1 parent 8724a60 commit a7d0f4d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+362
-94
lines changed

‎CHANGELOG.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,26 @@
1+
## 0.12.0
2+
3+
The designer has allowed only the validation of the steps so far. The root of the definition could be edited by the global editor, but the validation was not possible. This version adds a new type of the validator: the root validator. The new validator affects on the result of the definition validation (`designer.isValid()`).
4+
5+
### Breaking Changes
6+
7+
* The `validator` property in the `steps` group of the configuration is deleted. Use the `step` property in the `validator` group instead.
8+
* The step validator has a new parameter: `definition`.
9+
* Added the root validator.
10+
11+
```js
12+
const configuration = {
13+
steps: {
14+
validator: /* DEPRECIATED */,
15+
},
16+
validator: {
17+
step: (step, parentSequence, definition) => { /* ... */ },
18+
root: (definition) => { /* ... */ }
19+
},
20+
// ...
21+
};
22+
```
23+
124
## 0.11.0
225

326
### Breaking Changes

‎README.md

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -89,10 +89,10 @@ Add the below code to your head section in HTML document.
8989
```html
9090
<head>
9191
...
92-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.11.0/css/designer.css" rel="stylesheet">
93-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.11.0/css/designer-light.css" rel="stylesheet">
94-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.11.0/css/designer-dark.css" rel="stylesheet">
95-
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.11.0/dist/index.umd.js"></script>
92+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.12.0/css/designer.css" rel="stylesheet">
93+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.12.0/css/designer-light.css" rel="stylesheet">
94+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.12.0/css/designer-dark.css" rel="stylesheet">
95+
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.12.0/dist/index.umd.js"></script>
9696
```
9797

9898
Call the designer by:
@@ -131,9 +131,7 @@ const configuration = {
131131
iconUrlProvider: (componentType, type) => {
132132
return `icon-${componentType}-${type}.svg`;
133133
},
134-
validator: (step, sourceSequence) => {
135-
return /^[a-z]+$/.test(step.name);
136-
},
134+
137135
isDraggable: (step, parentSequence) => {
138136
return step.name !== 'y';
139137
},
@@ -151,6 +149,17 @@ const configuration = {
151149
}
152150
},
153151

152+
validator: {
153+
// all validators are optional
154+
155+
step: (step, parentSequence, definition) => {
156+
return /^[a-z]+$/.test(step.name);
157+
},
158+
root: (definition) => {
159+
return definition.properties['memory'] > 256;
160+
}
161+
},
162+
154163
toolbox: {
155164
groups: [
156165
{

‎angular/designer/README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ export class AppComponent {
5757
public definition: Definition = { /* ... */ };
5858
public toolboxConfiguration: ToolboxConfiguration = { /* ... */ };
5959
public stepsConfiguration: StepsConfiguration = { /* ... */ };
60+
public validatorConfiguration: ValidatorConfiguration = { /* ... */ };
6061
// ...
6162
}
6263
```
@@ -147,6 +148,7 @@ At the end attach the designer:
147148
[definition]="startDefinition"
148149
[toolboxConfiguration]="toolboxConfiguration"
149150
[stepsConfiguration]="stepsConfiguration"
151+
[validatorConfiguration]="validatorConfiguration"
150152
[controlBar]="true"
151153
[areEditorsHidden]="false"
152154
[globalEditor]="globalEditor"

‎angular/designer/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "sequential-workflow-designer-angular",
33
"description": "Angular wrapper for Sequential Workflow Designer component.",
4-
"version": "0.11.0",
4+
"version": "0.12.0",
55
"author": {
66
"name": "NoCode JS",
77
"url": "https://nocode-js.com/"
@@ -15,7 +15,7 @@
1515
"peerDependencies": {
1616
"@angular/common": "12 - 15",
1717
"@angular/core": "12 - 15",
18-
"sequential-workflow-designer": "^0.11.0"
18+
"sequential-workflow-designer": "^0.12.0"
1919
},
2020
"dependencies": {
2121
"tslib": "^2.3.0"

‎angular/designer/src/designer.component.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@ import {
2121
Step,
2222
StepEditorContext,
2323
StepsConfiguration,
24-
ToolboxConfiguration
24+
ToolboxConfiguration,
25+
ValidatorConfiguration
2526
} from 'sequential-workflow-designer';
2627

2728
export interface GlobalEditorWrapper {
@@ -53,6 +54,8 @@ export class DesignerComponent implements AfterViewInit, OnChanges, OnDestroy {
5354
public definition?: Definition;
5455
@Input('stepsConfiguration')
5556
public stepsConfiguration?: StepsConfiguration;
57+
@Input('validatorConfiguration')
58+
public validatorConfiguration?: ValidatorConfiguration;
5659
@Input('toolboxConfiguration')
5760
public toolboxConfiguration?: ToolboxConfiguration | false;
5861
@Input('controlBar')
@@ -129,6 +132,7 @@ export class DesignerComponent implements AfterViewInit, OnChanges, OnDestroy {
129132
stepEditorProvider: this.stepEditorProvider
130133
},
131134
steps: this.stepsConfiguration,
135+
validator: this.validatorConfiguration,
132136
toolbox: this.toolboxConfiguration,
133137
controlBar: this.controlBar,
134138
extensions: this.extensions

‎demos/angular-app/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@
2424
"@angular/platform-browser-dynamic": "^15.2.2",
2525
"@angular/router": "^15.2.2",
2626
"rxjs": "~7.8.0",
27-
"sequential-workflow-designer": "^0.11.0",
28-
"sequential-workflow-designer-angular": "^0.11.0",
27+
"sequential-workflow-designer": "^0.12.0",
28+
"sequential-workflow-designer-angular": "^0.12.0",
2929
"tslib": "^2.3.0",
3030
"zone.js": "~0.13.0"
3131
},

‎demos/angular-app/src/app/app.component.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
[definition]="definition"
55
[toolboxConfiguration]="toolboxConfiguration"
66
[stepsConfiguration]="stepsConfiguration"
7+
[validatorConfiguration]="validatorConfiguration"
78
[controlBar]="true"
89
[areEditorsHidden]="false"
910
[globalEditor]="globalEditor"
@@ -45,3 +46,7 @@ <h3>Velocity</h3>
4546
<br />
4647

4748
<textarea cols="60" rows="18">{{ definitionJSON }}</textarea>
49+
50+
<br />
51+
52+
Is valid: {{ isValid }}

‎demos/angular-app/src/app/app.component.ts

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ import {
77
Step,
88
StepEditorContext,
99
StepsConfiguration,
10-
ToolboxConfiguration
10+
ToolboxConfiguration,
11+
ValidatorConfiguration
1112
} from 'sequential-workflow-designer';
1213

1314
function createDefinition() {
@@ -28,6 +29,7 @@ export class AppComponent implements OnInit {
2829

2930
public definition: Definition = createDefinition();
3031
public definitionJSON?: string;
32+
public isValid?: boolean;
3133

3234
public readonly toolboxConfiguration: ToolboxConfiguration = {
3335
groups: [
@@ -45,8 +47,11 @@ export class AppComponent implements OnInit {
4547
]
4648
};
4749
public readonly stepsConfiguration: StepsConfiguration = {
48-
iconUrlProvider: () => './assets/angular-icon.svg',
49-
validator: () => true
50+
iconUrlProvider: () => './assets/angular-icon.svg'
51+
};
52+
public readonly validatorConfiguration: ValidatorConfiguration = {
53+
step: (step: Step) => !!step.name && Number(step.properties['velocity']) >= 0,
54+
root: (definition: Definition) => Number(definition.properties['velocity']) >= 0
5055
};
5156

5257
public ngOnInit() {
@@ -55,11 +60,13 @@ export class AppComponent implements OnInit {
5560

5661
public onDesignerReady(designer: Designer) {
5762
this.designer = designer;
63+
this.updateIsValid();
5864
console.log('designer ready', this.designer);
5965
}
6066

6167
public onDefinitionChanged(definition: Definition) {
6268
this.definition = definition;
69+
this.updateIsValid();
6370
this.updateDefinitionJSON();
6471
console.log('definition changed');
6572
}
@@ -82,4 +89,8 @@ export class AppComponent implements OnInit {
8289
private updateDefinitionJSON() {
8390
this.definitionJSON = JSON.stringify(this.definition, null, 2);
8491
}
92+
93+
private updateIsValid() {
94+
this.isValid = this.designer?.isValid();
95+
}
8596
}

‎demos/angular-app/yarn.lock

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5180,17 +5180,17 @@ send@0.18.0:
51805180
range-parser "~1.2.1"
51815181
statuses "2.0.1"
51825182

5183-
sequential-workflow-designer-angular@^0.11.0:
5184-
version "0.11.0"
5185-
resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.11.0.tgz#1a05b95e70e71b8299d231c7a3253a0cc8e3d462"
5186-
integrity sha512-Hw4xW9Tx3vxz+UDCDXw6qcxbeGnKCD8DLBBiMFbVMnzX8zDuM3ZKgwIK42V1utCYMjrn9gQSCsrXBDXVLbnjKg==
5183+
sequential-workflow-designer-angular@^0.12.0:
5184+
version "0.12.0"
5185+
resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.12.0.tgz#3a86fce2497f46d60a271c4b7e2c9c18e6952888"
5186+
integrity sha512-B49ojqrIbnKecdJrKOgsfKWJH8PMalKs2n0EbrHrX7kSyza3dUBwqjUMMBf/uEnyszeFQUpgDvE0azOVTVrk+w==
51875187
dependencies:
51885188
tslib "^2.3.0"
51895189

5190-
sequential-workflow-designer@^0.11.0:
5191-
version "0.11.0"
5192-
resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.11.0.tgz#b1dac2d141f3f78dbb19628709257b89ead3c507"
5193-
integrity sha512-BwqEO5u1qna2ZO6qr6BKlqedsh8SofUS21SR0GA9mO1FWDj5OWfwKUB/g4WdUR+kC5ZpmdVf3O7Ou5/TtymrOg==
5190+
sequential-workflow-designer@^0.12.0:
5191+
version "0.12.0"
5192+
resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.12.0.tgz#ee5dacfc430a4e874bf4e2de3b5a567e4314a637"
5193+
integrity sha512-4j7YRo9aU0HFkY0xS2J+AxeerxnzBemr5BiiREiuIyc/+wQrohmAbJRRxplNguhGhF/n8omxwHjcdqWX/K/PFA==
51945194
dependencies:
51955195
sequential-workflow-model "^0.1.1"
51965196

‎demos/react-app/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
"dependencies": {
66
"react": "^18.2.0",
77
"react-dom": "^18.2.0",
8-
"sequential-workflow-designer": "^0.11.0",
9-
"sequential-workflow-designer-react": "^0.11.0"
8+
"sequential-workflow-designer": "^0.12.0",
9+
"sequential-workflow-designer-react": "^0.12.0"
1010
},
1111
"devDependencies": {
1212
"@types/jest": "^29.2.5",

‎demos/react-app/src/App.tsx

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useEffect, useState } from 'react';
2-
import { ObjectCloner, Step, StepsConfiguration, ToolboxConfiguration } from 'sequential-workflow-designer';
2+
import { ObjectCloner, Step, StepsConfiguration, ToolboxConfiguration, ValidatorConfiguration } from 'sequential-workflow-designer';
33
import { SequentialWorkflowDesigner, wrapDefinition } from 'sequential-workflow-designer-react';
44
import { GlobalEditor } from './GlobalEditor';
55
import { StepEditor } from './StepEditor';
@@ -8,7 +8,9 @@ import { WorkflowDefinition } from './model';
88
import { useSequentialWorkflowDesignerController } from 'sequential-workflow-designer-react';
99

1010
const startDefinition: WorkflowDefinition = {
11-
properties: {},
11+
properties: {
12+
alfa: 'bravo'
13+
},
1214
sequence: [createTaskStep(), createSwitchStep()]
1315
};
1416

@@ -17,7 +19,12 @@ const toolboxConfiguration: ToolboxConfiguration = {
1719
};
1820

1921
const stepsConfiguration: StepsConfiguration = {
20-
validator: (step: Step) => Boolean(step.name)
22+
iconUrlProvider: () => null
23+
};
24+
25+
const validatorConfiguration: ValidatorConfiguration = {
26+
step: (step: Step) => Boolean(step.name),
27+
root: (definition: WorkflowDefinition) => Boolean(definition.properties.alfa)
2128
};
2229

2330
export function App() {
@@ -69,6 +76,7 @@ export function App() {
6976
onSelectedStepIdChanged={setSelectedStepId}
7077
toolboxConfiguration={toolboxConfiguration}
7178
stepsConfiguration={stepsConfiguration}
79+
validatorConfiguration={validatorConfiguration}
7280
controlBar={true}
7381
globalEditor={<GlobalEditor />}
7482
stepEditor={<StepEditor />}

‎designer/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "sequential-workflow-designer",
33
"description": "Customizable no-code component for building flow-based programming applications.",
4-
"version": "0.11.0",
4+
"version": "0.12.0",
55
"type": "module",
66
"main": "./lib/esm/index.js",
77
"types": "./lib/index.d.ts",

‎designer/src/api/designer-api.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,13 @@ export class DesignerApi {
1414

1515
return new DesignerApi(
1616
new ControlBarApi(context.state, context.historyController, context.definitionModifier, viewport),
17-
new ToolboxApi(context.state, context, context.behaviorController, context.layoutController, context.configuration.steps),
17+
new ToolboxApi(
18+
context.state,
19+
context,
20+
context.behaviorController,
21+
context.layoutController,
22+
context.componentContext.iconProvider
23+
),
1824
new EditorApi(context.state, context.stepsTraverser, context.layoutController, context.definitionModifier),
1925
workspace,
2026
viewport,

‎designer/src/api/toolbox-api.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,28 @@
11
import { Step } from '../definition';
22
import { BehaviorController } from '../behaviors/behavior-controller';
33
import { ObjectCloner, Uid, Vector } from '../core';
4-
import { StepDefinition, StepsConfiguration } from '../designer-configuration';
4+
import { StepDefinition } from '../designer-configuration';
55
import { DesignerState } from '../designer-state';
66
import { DragStepBehavior } from '../behaviors/drag-step-behavior';
77
import { DesignerContext } from '../designer-context';
88
import { LayoutController } from '../layout-controller';
9+
import { IconProvider } from '../core/icon-provider';
910

1011
export class ToolboxApi {
1112
public constructor(
1213
private readonly state: DesignerState,
1314
private readonly designerContext: DesignerContext,
1415
private readonly behaviorController: BehaviorController,
1516
private readonly layoutController: LayoutController,
16-
private readonly configuration: StepsConfiguration
17+
private readonly iconProvider: IconProvider
1718
) {}
1819

1920
public isVisibleAtStart(): boolean {
2021
return this.layoutController.isMobile();
2122
}
2223

2324
public tryGetIconUrl(step: StepDefinition): string | null {
24-
return this.configuration.iconUrlProvider ? this.configuration.iconUrlProvider(step.componentType, step.type) : null;
25+
return this.iconProvider.getIconUrl(step);
2526
}
2627

2728
/**

‎designer/src/component-context.ts

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,30 @@
1-
import { StepsConfiguration } from './designer-configuration';
1+
import { DefinitionValidator } from './core/definition-validator';
2+
import { IconProvider } from './core/icon-provider';
3+
import { StepsConfiguration, ValidatorConfiguration } from './designer-configuration';
24
import { PlaceholderController } from './designer-extension';
5+
import { DesignerState } from './designer-state';
36
import { Services } from './services';
47
import { StepComponentFactory } from './workspace/step-component-factory';
58
import { StepExtensionResolver } from './workspace/step-extension-resolver';
69

710
export class ComponentContext {
811
public static create(
9-
configuration: StepsConfiguration,
12+
stepsConfiguration: StepsConfiguration,
13+
validatorConfiguration: ValidatorConfiguration | undefined,
14+
state: DesignerState,
1015
stepExtensionResolver: StepExtensionResolver,
1116
services: Services
1217
): ComponentContext {
18+
const validator = new DefinitionValidator(validatorConfiguration, state);
19+
const iconProvider = new IconProvider(stepsConfiguration);
1320
const placeholderController = services.placeholderController.create();
1421
const stepComponentFactory = new StepComponentFactory(stepExtensionResolver);
15-
return new ComponentContext(configuration, placeholderController, stepComponentFactory, services);
22+
return new ComponentContext(validator, iconProvider, placeholderController, stepComponentFactory, services);
1623
}
1724

1825
private constructor(
19-
public readonly configuration: StepsConfiguration,
26+
public readonly validator: DefinitionValidator,
27+
public readonly iconProvider: IconProvider,
2028
public readonly placeholderController: PlaceholderController,
2129
public readonly stepComponentFactory: StepComponentFactory,
2230
public readonly services: Services

0 commit comments

Comments
 (0)