Skip to content

Commit 21907a3

Browse files
b4rtazb4rtaz
authored
0.13.7. (#64)
* 0.13.7.
1 parent d91c037 commit 21907a3

File tree

21 files changed

+1085
-171
lines changed

21 files changed

+1085
-171
lines changed

‎.github/workflows/examples.yml‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
name: examples
2+
on:
3+
push:
4+
branches:
5+
- main
6+
jobs:
7+
build:
8+
name: Build
9+
runs-on: ${{matrix.os}}
10+
strategy:
11+
matrix:
12+
os:
13+
- ubuntu-latest
14+
permissions:
15+
contents: read
16+
pages: write
17+
id-token: write
18+
environment:
19+
name: github-pages
20+
url: ${{ steps.deployment.outputs.page_url }}
21+
steps:
22+
- name: Checkout Repo
23+
uses: actions/checkout@v3
24+
- name: Setup Node 18
25+
uses: actions/setup-node@v2
26+
with:
27+
node-version: "18"
28+
- name: main.sh
29+
run: bash .github/workflows/main.sh
30+
- name: Prepare
31+
run: |
32+
mkdir _deploy
33+
cp -R examples _deploy
34+
cp -R demos/angular-app/dist/angular-app _deploy/angular-app
35+
cp -R demos/react-app/build _deploy/react-app
36+
- name: Upload artifact
37+
uses: actions/upload-pages-artifact@v1
38+
with:
39+
path: _deploy
40+
- name: Deploy
41+
id: deployment
42+
uses: actions/deploy-pages@v1

‎CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
## 0.13.7
2+
3+
This version fixes change detections in the Angular package. Thanks @wildercarrot!
4+
15
## 0.13.6
26

37
Now it's possible to configure the size of grid cells. The default size is `48` as before.

‎README.md‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ Features:
3333
* [🚄 Stress Test](https://nocode-js.github.io/sequential-workflow-designer/examples/stress-test.html)
3434
* [🚪 Editing Restrictions](https://nocode-js.github.io/sequential-workflow-designer/examples/editing-restrictions.html)
3535
* [📜 Scrollable Page](https://nocode-js.github.io/sequential-workflow-designer/examples/scrollable-page.html)
36+
* [React Demo](https://nocode-js.github.io/sequential-workflow-designer/react-app/)
37+
* [Angular Demo](https://nocode-js.github.io/sequential-workflow-designer/angular-app/)
3638

3739
Pro:
3840

@@ -91,10 +93,10 @@ Add the below code to your head section in HTML document.
9193
```html
9294
<head>
9395
...
94-
<link href="https://cdn.jsdelivr.net/npm/[email protected].6/css/designer.css" rel="stylesheet">
95-
<link href="https://cdn.jsdelivr.net/npm/[email protected].6/css/designer-light.css" rel="stylesheet">
96-
<link href="https://cdn.jsdelivr.net/npm/[email protected].6/css/designer-dark.css" rel="stylesheet">
97-
<script src="https://cdn.jsdelivr.net/npm/[email protected].6/dist/index.umd.js"></script>
96+
<link href="https://cdn.jsdelivr.net/npm/[email protected].7/css/designer.css" rel="stylesheet">
97+
<link href="https://cdn.jsdelivr.net/npm/[email protected].7/css/designer-light.css" rel="stylesheet">
98+
<link href="https://cdn.jsdelivr.net/npm/[email protected].7/css/designer-dark.css" rel="stylesheet">
99+
<script src="https://cdn.jsdelivr.net/npm/[email protected].7/dist/index.umd.js"></script>
98100
```
99101

100102
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.13.6",
4+
"version": "0.13.7",
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.13.6"
18+
"sequential-workflow-designer": "^0.13.7"
1919
},
2020
"dependencies": {
2121
"tslib": "^2.3.0"

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import {
22
AfterViewInit,
3+
ApplicationRef,
34
Component,
45
ElementRef,
56
EmbeddedViewRef,
@@ -77,7 +78,7 @@ export class DesignerComponent implements AfterViewInit, OnChanges, OnDestroy {
7778
@Output()
7879
public readonly onDefinitionChanged = new EventEmitter<Definition>();
7980

80-
public constructor(private readonly ngZone: NgZone) {}
81+
public constructor(private readonly ngZone: NgZone, private readonly applicationRef: ApplicationRef) {}
8182

8283
public ngAfterViewInit() {
8384
this.attach();
@@ -98,6 +99,7 @@ export class DesignerComponent implements AfterViewInit, OnChanges, OnDestroy {
9899

99100
public ngOnDestroy(): void {
100101
if (this.lastEmbeddedView) {
102+
this.applicationRef.detachView(this.lastEmbeddedView);
101103
this.lastEmbeddedView.destroy();
102104
}
103105
}
@@ -178,14 +180,15 @@ export class DesignerComponent implements AfterViewInit, OnChanges, OnDestroy {
178180
private editorProvider<E>(templateRef: TemplateRef<unknown>, editor: E) {
179181
return this.ngZone.run(() => {
180182
if (this.lastEmbeddedView) {
183+
this.applicationRef.detachView(this.lastEmbeddedView);
181184
this.lastEmbeddedView.destroy();
182185
this.lastEmbeddedView = undefined;
183186
}
184187

185188
this.lastEmbeddedView = templateRef.createEmbeddedView({
186189
$implicit: editor
187190
});
188-
this.lastEmbeddedView.detectChanges();
191+
this.applicationRef.attachView(this.lastEmbeddedView);
189192

190193
const container = document.createElement('div');
191194
container.className = 'sqd-editor-angular';

‎demos/angular-app/angular.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
"src/assets"
2525
],
2626
"styles": [
27+
"@angular/material/prebuilt-themes/indigo-pink.css",
2728
"src/styles.css",
2829
"./node_modules/sequential-workflow-designer/css/designer.css",
2930
"./node_modules/sequential-workflow-designer/css/designer-light.css",
@@ -89,6 +90,7 @@
8990
"src/assets"
9091
],
9192
"styles": [
93+
"@angular/material/prebuilt-themes/indigo-pink.css",
9294
"src/styles.css"
9395
],
9496
"scripts": []

‎demos/angular-app/package.json‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -15,24 +15,26 @@
1515
},
1616
"private": true,
1717
"dependencies": {
18-
"@angular/animations": "^15.2.2",
19-
"@angular/common": "^15.2.2",
20-
"@angular/compiler": "^15.2.2",
21-
"@angular/core": "^15.2.2",
22-
"@angular/forms": "^15.2.2",
23-
"@angular/platform-browser": "^15.2.2",
24-
"@angular/platform-browser-dynamic": "^15.2.2",
25-
"@angular/router": "^15.2.2",
18+
"@angular/animations": "^15.2.9",
19+
"@angular/common": "^15.2.9",
20+
"@angular/compiler": "^15.2.9",
21+
"@angular/core": "^15.2.9",
22+
"@angular/forms": "^15.2.9",
23+
"@angular/cdk": "15.2.9",
24+
"@angular/material": "15.2.9",
25+
"@angular/platform-browser": "^15.2.9",
26+
"@angular/platform-browser-dynamic": "^15.2.9",
27+
"@angular/router": "^15.2.9",
2628
"rxjs": "~7.8.0",
27-
"sequential-workflow-designer": "^0.13.6",
28-
"sequential-workflow-designer-angular": "^0.13.6",
29+
"sequential-workflow-designer": "^0.13.7",
30+
"sequential-workflow-designer-angular": "^0.13.7",
2931
"tslib": "^2.3.0",
3032
"zone.js": "~0.13.0"
3133
},
3234
"devDependencies": {
33-
"@angular-devkit/build-angular": "^15.2.1",
34-
"@angular/cli": "~15.2.1",
35-
"@angular/compiler-cli": "^15.2.2",
35+
"@angular-devkit/build-angular": "^15.2.9",
36+
"@angular/cli": "~15.2.9",
37+
"@angular/compiler-cli": "^15.2.9",
3638
"@types/jasmine": "~4.3.1",
3739
"jasmine-core": "~4.5.0",
3840
"karma": "~6.4.1",

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

Lines changed: 42 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -18,35 +18,54 @@
1818
<h2>Global Editor</h2>
1919

2020
<h3>Velocity</h3>
21-
<input
22-
type="number"
23-
[value]="editor.definition.properties.velocity"
24-
(input)="updateProperty(editor.definition.properties, 'velocity', $event, editor.context)"
25-
/>
21+
<mat-form-field class="full-width">
22+
<input
23+
matInput
24+
type="number"
25+
[value]="editor.definition.properties.velocity"
26+
(input)="updateProperty(editor.definition.properties, 'velocity', $event, editor.context)"
27+
/>
28+
</mat-form-field>
2629
</ng-template>
2730

2831
<ng-template #stepEditor let-editor>
2932
<h2>Step Editor</h2>
3033

31-
<h3>Name</h3>
32-
<input type="text" [value]="editor.step.name" (input)="updateName(editor.step, $event, editor.context)" />
33-
34-
<h3>Velocity</h3>
35-
<input
36-
type="number"
37-
[value]="editor.step.properties.velocity"
38-
(input)="updateProperty(editor.step.properties, 'velocity', $event, editor.context)"
39-
/>
34+
<mat-tab-group>
35+
<mat-tab label="Basic">
36+
<h3>Name</h3>
37+
<mat-form-field class="full-width">
38+
<input matInput type="text" [value]="editor.step.name" (input)="updateName(editor.step, $event, editor.context)" />
39+
</mat-form-field>
40+
</mat-tab>
41+
<mat-tab label="Details">
42+
<h3>Velocity</h3>
43+
<mat-form-field class="full-width">
44+
<input
45+
matInput
46+
type="number"
47+
[value]="editor.step.properties.velocity"
48+
(input)="updateProperty(editor.step.properties, 'velocity', $event, editor.context)"
49+
/>
50+
</mat-form-field>
51+
</mat-tab>
52+
</mat-tab-group>
4053
</ng-template>
4154

42-
<br />
43-
44-
<button (click)="reloadDefinitionClicked()">Reload definition</button>
45-
46-
<br />
47-
48-
<textarea cols="60" rows="18">{{ definitionJSON }}</textarea>
55+
<div class="block">
56+
<button mat-raised-button color="primary" (click)="reloadDefinitionClicked()">Reload definition</button>
57+
&nbsp; Is valid: <strong>{{ isValid }}</strong>
58+
</div>
4959

50-
<br />
60+
<div class="block">
61+
<mat-form-field class="full-width flex-1s">
62+
<textarea matInput cols="120" rows="16" readonly>{{ definitionJSON }}</textarea>
63+
</mat-form-field>
64+
</div>
5165

52-
Is valid: {{ isValid }}
66+
<div class="block">
67+
This demo uses Angular, Material UI and
68+
<a href="https://github.com/nocode-js/sequential-workflow-designer/tree/main/angular/designer" target="_blank"
69+
>Sequential Workflow Designer for Angular</a
70+
>.
71+
</div>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { TestBed } from '@angular/core/testing';
2-
import { SequentialWorkflowDesignerModule } from 'sequential-workflow-designer-angular';
32
import { AppComponent } from './app.component';
3+
import { AppModule } from './app.module';
44

55
describe('AppComponent', () => {
66
beforeEach(async () => {
77
await TestBed.configureTestingModule({
88
declarations: [AppComponent],
9-
imports: [SequentialWorkflowDesignerModule]
9+
imports: [AppModule]
1010
}).compileComponents();
1111
});
1212

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

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,30 @@ import {
44
Designer,
55
GlobalEditorContext,
66
Properties,
7+
Uid,
78
Step,
89
StepEditorContext,
910
StepsConfiguration,
1011
ToolboxConfiguration,
1112
ValidatorConfiguration
1213
} from 'sequential-workflow-designer';
1314

14-
function createDefinition() {
15+
function createStep(): Step {
16+
return {
17+
id: Uid.next(),
18+
componentType: 'task',
19+
name: 'Step',
20+
properties: { velocity: 0 },
21+
type: 'task'
22+
};
23+
}
24+
25+
function createDefinition(): Definition {
1526
return {
1627
properties: {
1728
velocity: 0
1829
},
19-
sequence: []
30+
sequence: [createStep()]
2031
};
2132
}
2233

@@ -35,14 +46,7 @@ export class AppComponent implements OnInit {
3546
groups: [
3647
{
3748
name: 'Step',
38-
steps: [
39-
{
40-
componentType: 'task',
41-
name: 'Step',
42-
properties: { velocity: 0 },
43-
type: 'task'
44-
}
45-
]
49+
steps: [createStep()]
4650
}
4751
]
4852
};
@@ -68,7 +72,7 @@ export class AppComponent implements OnInit {
6872
this.definition = definition;
6973
this.updateIsValid();
7074
this.updateDefinitionJSON();
71-
console.log('definition changed');
75+
console.log('definition has changed');
7276
}
7377

7478
public updateName(step: Step, event: Event, context: StepEditorContext) {

0 commit comments

Comments
 (0)