Skip to content

Commit e2ca34e

Browse files
b4rtazb4rtaz
authored
0.16.3. (#90)
1 parent 80c6301 commit e2ca34e

File tree

13 files changed

+164
-35
lines changed

13 files changed

+164
-35
lines changed

‎CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
## 0.16.3
2+
3+
This version adds: `isReadonly`, `selectedStepId`, `uidGenerator`, `isToolboxCollapsed` and `isEditorCollapsed` properties and `onIsToolboxCollapsedChanged` and `onIsEditorCollapsedChanged` events to the Angular package.
4+
15
## 0.16.2
26

37
This version adds the `onSelectedStepIdChanged` event to the Angular package.

‎README.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -95,10 +95,10 @@ Add the below code to your head section in HTML document.
9595
```html
9696
<head>
9797
...
98-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.2/css/designer.css" rel="stylesheet">
99-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.2/css/designer-light.css" rel="stylesheet">
100-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.2/css/designer-dark.css" rel="stylesheet">
101-
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.2/dist/index.umd.js"></script>
98+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.3/css/designer.css" rel="stylesheet">
99+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.3/css/designer-light.css" rel="stylesheet">
100+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.3/css/designer-dark.css" rel="stylesheet">
101+
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.3/dist/index.umd.js"></script>
102102
```
103103

104104
Call the designer by:

‎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.16.2",
4+
"version": "0.16.3",
55
"author": {
66
"name": "NoCode JS",
77
"url": "https://nocode-js.com/"
@@ -15,7 +15,7 @@
1515
"peerDependencies": {
1616
"@angular/common": "12 - 16",
1717
"@angular/core": "12 - 16",
18-
"sequential-workflow-designer": "^0.16.2"
18+
"sequential-workflow-designer": "^0.16.3"
1919
},
2020
"dependencies": {
2121
"tslib": "^2.3.0"

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

Lines changed: 79 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
ViewChild
1616
} from '@angular/core';
1717
import {
18+
CustomActionHandler,
1819
Definition,
1920
Designer,
2021
DesignerExtension,
@@ -25,6 +26,7 @@ import {
2526
StepEditorProvider,
2627
StepsConfiguration,
2728
ToolboxConfiguration,
29+
UidGenerator,
2830
ValidatorConfiguration
2931
} from 'sequential-workflow-designer';
3032

@@ -70,6 +72,19 @@ export class DesignerComponent implements AfterViewInit, OnChanges, OnDestroy {
7072
public contextMenu?: boolean;
7173
@Input('extensions')
7274
public extensions?: DesignerExtension[];
75+
@Input('customActionHandler')
76+
public customActionHandler?: CustomActionHandler;
77+
@Input('isReadonly')
78+
public isReadonly?: boolean;
79+
@Input('selectedStepId')
80+
public selectedStepId?: string | null;
81+
@Input('uidGenerator')
82+
public uidGenerator?: UidGenerator;
83+
@Input('isToolboxCollapsed')
84+
public isToolboxCollapsed?: boolean;
85+
@Input('isEditorCollapsed')
86+
public isEditorCollapsed?: boolean;
87+
7388
@Input('areEditorsHidden')
7489
public areEditorsHidden?: boolean;
7590
@Input('globalEditor')
@@ -83,6 +98,10 @@ export class DesignerComponent implements AfterViewInit, OnChanges, OnDestroy {
8398
public readonly onDefinitionChanged = new EventEmitter<Definition>();
8499
@Output()
85100
public readonly onSelectedStepIdChanged = new EventEmitter<string | null>();
101+
@Output()
102+
public readonly onIsToolboxCollapsedChanged = new EventEmitter<boolean>();
103+
@Output()
104+
public readonly onIsEditorCollapsedChanged = new EventEmitter<boolean>();
86105

87106
public constructor(private readonly ngZone: NgZone, private readonly applicationRef: ApplicationRef) {}
88107

@@ -95,9 +114,37 @@ export class DesignerComponent implements AfterViewInit, OnChanges, OnDestroy {
95114
if (isFirstChange) {
96115
return;
97116
}
98-
if (this.designer && changes['definition'] && changes['definition'].currentValue === this.designer.getDefinition()) {
99-
// The same reference = no change.
100-
return;
117+
118+
if (this.designer) {
119+
const isSameDefinition = !changes['definition'] || changes['definition'].currentValue === this.designer.getDefinition();
120+
if (isSameDefinition) {
121+
const isReadonlyChange = changes['isReadonly'];
122+
if (isReadonlyChange && isReadonlyChange.currentValue !== this.designer.isReadonly()) {
123+
this.designer.setIsReadonly(isReadonlyChange.currentValue);
124+
}
125+
126+
const selectedStepIdChange = changes['selectedStepId'];
127+
if (selectedStepIdChange && selectedStepIdChange.currentValue !== this.designer.getSelectedStepId()) {
128+
if (selectedStepIdChange.currentValue) {
129+
this.designer.selectStepById(selectedStepIdChange.currentValue);
130+
} else {
131+
this.designer.clearSelectedStep();
132+
}
133+
}
134+
135+
const isToolboxCollapsedChange = changes['isToolboxCollapsed'];
136+
if (isToolboxCollapsedChange && isToolboxCollapsedChange.currentValue !== this.designer.isToolboxCollapsed()) {
137+
this.designer.setIsToolboxCollapsed(isToolboxCollapsedChange.currentValue);
138+
}
139+
140+
const isEditorCollapsedChange = changes['isEditorCollapsed'];
141+
if (isEditorCollapsedChange && isEditorCollapsedChange.currentValue !== this.designer.isEditorCollapsed()) {
142+
this.designer.setIsEditorCollapsed(isEditorCollapsedChange.currentValue);
143+
}
144+
145+
// The same reference of the definition = no change.
146+
return;
147+
}
101148
}
102149

103150
this.attach();
@@ -133,21 +180,38 @@ export class DesignerComponent implements AfterViewInit, OnChanges, OnDestroy {
133180
this.designer = undefined;
134181
}
135182

183+
let customActionHandler = this.customActionHandler;
184+
if (customActionHandler) {
185+
const cah = customActionHandler;
186+
customActionHandler = (action, step, sequence, context) => {
187+
this.ngZone.run(() => cah(action, step, sequence, context));
188+
};
189+
}
190+
136191
const designer = Designer.create(this.placeholder.nativeElement, this.definition, {
137192
theme: this.theme,
138193
undoStackSize: this.undoStackSize,
139194
editors: this.areEditorsHidden
140195
? false
141196
: {
197+
isCollapsed: this.isEditorCollapsed,
142198
globalEditorProvider: this.globalEditorProvider,
143199
stepEditorProvider: this.stepEditorProvider
144200
},
145201
steps: this.stepsConfiguration,
146202
validator: this.validatorConfiguration,
147-
toolbox: this.toolboxConfiguration,
203+
toolbox: this.toolboxConfiguration
204+
? {
205+
isCollapsed: this.isToolboxCollapsed,
206+
...this.toolboxConfiguration
207+
}
208+
: false,
148209
controlBar: this.controlBar,
149210
contextMenu: this.contextMenu,
150-
extensions: this.extensions
211+
extensions: this.extensions,
212+
isReadonly: this.isReadonly,
213+
uidGenerator: this.uidGenerator,
214+
customActionHandler
151215
});
152216
designer.onReady.subscribe(() => {
153217
this.ngZone.run(() => this.onReady.emit(designer));
@@ -158,7 +222,17 @@ export class DesignerComponent implements AfterViewInit, OnChanges, OnDestroy {
158222
designer.onSelectedStepIdChanged.subscribe(stepId => {
159223
this.ngZone.run(() => this.onSelectedStepIdChanged.emit(stepId));
160224
});
225+
designer.onIsToolboxCollapsedChanged.subscribe(isCollapsed => {
226+
this.ngZone.run(() => this.onIsToolboxCollapsedChanged.emit(isCollapsed));
227+
});
228+
designer.onIsEditorCollapsedChanged.subscribe(isCollapsed => {
229+
this.ngZone.run(() => this.onIsEditorCollapsedChanged.emit(isCollapsed));
230+
});
161231
this.designer = designer;
232+
233+
if (this.selectedStepId) {
234+
this.designer.selectStepById(this.selectedStepId);
235+
}
162236
});
163237
}
164238

‎demos/angular-app/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@
2626
"@angular/platform-browser-dynamic": "^15.2.9",
2727
"@angular/router": "^15.2.9",
2828
"rxjs": "~7.8.0",
29-
"sequential-workflow-designer": "^0.16.2",
30-
"sequential-workflow-designer-angular": "^0.16.2",
29+
"sequential-workflow-designer": "^0.16.3",
30+
"sequential-workflow-designer-angular": "^0.16.3",
3131
"tslib": "^2.3.0",
3232
"zone.js": "~0.13.0"
3333
},

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

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,18 @@
66
[stepsConfiguration]="stepsConfiguration"
77
[validatorConfiguration]="validatorConfiguration"
88
[controlBar]="true"
9+
[selectedStepId]="selectedStepId"
10+
[isReadonly]="isReadonly"
11+
[isToolboxCollapsed]="isToolboxCollapsed"
12+
[isEditorCollapsed]="isEditorCollapsed"
913
[areEditorsHidden]="false"
1014
[globalEditor]="globalEditor"
1115
[stepEditor]="stepEditor"
1216
(onReady)="onDesignerReady($event)"
1317
(onDefinitionChanged)="onDefinitionChanged($event)"
1418
(onSelectedStepIdChanged)="onSelectedStepIdChanged($event)"
19+
(onIsToolboxCollapsedChanged)="onIsToolboxCollapsedChanged($event)"
20+
(onIsEditorCollapsedChanged)="onIsEditorCollapsedChanged($event)"
1521
>
1622
</sqd-designer>
1723

@@ -55,7 +61,23 @@ <h3>Velocity</h3>
5561

5662
<div class="block">
5763
<button mat-raised-button color="primary" (click)="reloadDefinitionClicked()">Reload definition</button>
58-
&nbsp; Is valid: <strong>{{ isValid }}</strong> &nbsp; Selected step: <strong>{{ selectedStepId }}</strong>
64+
&nbsp;
65+
<button mat-raised-button color="primary" (click)="toggleReadonlyClicked()">
66+
{{ isReadonly ? 'Enable editing' : 'Disable editing' }}
67+
</button>
68+
&nbsp;
69+
<button mat-raised-button color="primary" (click)="toggleSelectedStepClicked()">
70+
{{ selectedStepId ? 'Unselect' : 'Select first' }}
71+
</button>
72+
&nbsp;
73+
<button mat-raised-button color="primary" (click)="toggleToolboxClicked()">
74+
{{ isToolboxCollapsed ? 'Show toolbox' : 'Hide toolbox' }}
75+
</button>
76+
&nbsp;
77+
<button mat-raised-button color="primary" (click)="toggleEditorClicked()">
78+
{{ isEditorCollapsed ? 'Show editor' : 'Hide editor' }}
79+
</button>
80+
&nbsp; Is valid: <strong>{{ isValid }}</strong>
5981
</div>
6082

6183
<div class="block">

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

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,10 @@ export class AppComponent implements OnInit {
4040

4141
public definition: Definition = createDefinition();
4242
public definitionJSON?: string;
43-
public selectedStepId = '-';
43+
public selectedStepId: string | null = null;
44+
public isReadonly = false;
45+
public isToolboxCollapsed = false;
46+
public isEditorCollapsed = false;
4447
public isValid?: boolean;
4548

4649
public readonly toolboxConfiguration: ToolboxConfiguration = {
@@ -77,7 +80,15 @@ export class AppComponent implements OnInit {
7780
}
7881

7982
public onSelectedStepIdChanged(stepId: string | null) {
80-
this.selectedStepId = stepId || '-';
83+
this.selectedStepId = stepId;
84+
}
85+
86+
public onIsToolboxCollapsedChanged(isCollapsed: boolean) {
87+
this.isToolboxCollapsed = isCollapsed;
88+
}
89+
90+
public onIsEditorCollapsedChanged(isCollapsed: boolean) {
91+
this.isEditorCollapsed = isCollapsed;
8192
}
8293

8394
public updateName(step: Step, event: Event, context: StepEditorContext) {
@@ -95,6 +106,26 @@ export class AppComponent implements OnInit {
95106
this.updateDefinitionJSON();
96107
}
97108

109+
public toggleReadonlyClicked() {
110+
this.isReadonly = !this.isReadonly;
111+
}
112+
113+
public toggleSelectedStepClicked() {
114+
if (this.selectedStepId) {
115+
this.selectedStepId = null;
116+
} else if (this.definition.sequence.length > 0) {
117+
this.selectedStepId = this.definition.sequence[0].id;
118+
}
119+
}
120+
121+
public toggleToolboxClicked() {
122+
this.isToolboxCollapsed = !this.isToolboxCollapsed;
123+
}
124+
125+
public toggleEditorClicked() {
126+
this.isEditorCollapsed = !this.isEditorCollapsed;
127+
}
128+
98129
private updateDefinitionJSON() {
99130
this.definitionJSON = JSON.stringify(this.definition, null, 2);
100131
}

‎demos/angular-app/yarn.lock‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5956,17 +5956,17 @@ send@0.18.0:
59565956
range-parser "~1.2.1"
59575957
statuses "2.0.1"
59585958

5959-
sequential-workflow-designer-angular@^0.16.2:
5960-
version "0.16.2"
5961-
resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.16.2.tgz#4c95af277e2a69543b076057cbff42f3607ceb24"
5962-
integrity sha512-Y12qZP2vFLR15JXsF/6h+NLmHXPm7pzAIF5cbArN17qaZTog4McBhT2C5BEfywO0KsGXw6QUlNsirGM0xekYbA==
5959+
sequential-workflow-designer-angular@^0.16.3:
5960+
version "0.16.3"
5961+
resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.16.3.tgz#ad10976164b7c4e85bcb73c0585fb73701761648"
5962+
integrity sha512-kTRUPodVsfYpvFZ4ljMkGqM+VWC4xCay+jyWiGD9N2ifnQ7vuKcapMk6DQ+pSSTNCqqOugwdqD5snnWwCeWOYw==
59635963
dependencies:
59645964
tslib "^2.3.0"
59655965

5966-
sequential-workflow-designer@^0.16.2:
5967-
version "0.16.2"
5968-
resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.16.2.tgz#c8b8f668412b058789b6520b26d290098443eb83"
5969-
integrity sha512-zSFmrAiMnYVY5wwMLnSo+LsE1M2mWtYPPfIQGJ6bObTUkYBBfRsYrwJOkiUtFYmYzR9WtWokaUgkYJc3Xms9mA==
5966+
sequential-workflow-designer@^0.16.3:
5967+
version "0.16.3"
5968+
resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.16.3.tgz#899559b3a5ea3b5f0be931a071af67169ec65cb5"
5969+
integrity sha512-4M37SXOVfQ8YzLB+1PSDCB7NRXgipOSyBu127CBx2BdAt2dc7CnA0cyOYlVHtL3WX7xGfLXeIKKG7eSfQvjlWg==
59705970
dependencies:
59715971
sequential-workflow-model "^0.2.0"
59725972

‎demos/react-app/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
"dependencies": {
77
"react": "^18.2.0",
88
"react-dom": "^18.2.0",
9-
"sequential-workflow-designer": "^0.16.2",
10-
"sequential-workflow-designer-react": "^0.16.2"
9+
"sequential-workflow-designer": "^0.16.3",
10+
"sequential-workflow-designer-react": "^0.16.3"
1111
},
1212
"devDependencies": {
1313
"@types/jest": "^29.2.5",

‎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.16.2",
4+
"version": "0.16.3",
55
"type": "module",
66
"main": "./lib/esm/index.js",
77
"types": "./lib/index.d.ts",

0 commit comments

Comments
 (0)