nocode-js · b4rtaz · Jul 23, 2023 · Jul 23, 2023 · Jul 23, 2023 · Jul 23, 2023
diff --git a/.github/workflows/examples.yml b/.github/workflows/examples.yml
@@ -0,0 +1,42 @@
+name: examples
+on:
+  push:
+    branches:
+      - main
+jobs:
+  build:
+    name: Build
+    runs-on: ${{matrix.os}}
+    strategy:
+      matrix:
+        os:
+          - ubuntu-latest
+    permissions:
+      contents: read
+      pages: write
+      id-token: write
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v3
+      - name: Setup Node 18
+        uses: actions/setup-node@v2
+        with:
+          node-version: "18"
+      - name: main.sh
+        run: bash .github/workflows/main.sh
+      - name: Prepare
+        run: |
+            mkdir _deploy
+            cp -R examples _deploy
+            cp -R demos/angular-app/dist/angular-app _deploy/angular-app
+            cp -R demos/react-app/build _deploy/react-app
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          path: _deploy
+      - name: Deploy
+        id: deployment
+        uses: actions/deploy-pages@v1
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 0.13.7
+
+This version fixes change detections in the Angular package. Thanks @wildercarrot!
+
 ## 0.13.6
 
 Now it's possible to configure the size of grid cells. The default size is `48` as before.

diff --git a/README.md b/README.md
@@ -33,6 +33,8 @@ Features:
 * [🚄 Stress Test](https://nocode-js.github.io/sequential-workflow-designer/examples/stress-test.html)
 * [🚪 Editing Restrictions](https://nocode-js.github.io/sequential-workflow-designer/examples/editing-restrictions.html)
 * [📜 Scrollable Page](https://nocode-js.github.io/sequential-workflow-designer/examples/scrollable-page.html)
+* [React Demo](https://nocode-js.github.io/sequential-workflow-designer/react-app/)
+* [Angular Demo](https://nocode-js.github.io/sequential-workflow-designer/angular-app/)
 
 Pro:
 
@@ -91,10 +93,10 @@ Add the below code to your head section in HTML document.
 ```html
 <head>
 ...
-<link href="https://cdn.jsdelivr.net/npm/[email protected].6/css/designer.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/[email protected].6/css/designer-light.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/[email protected].6/css/designer-dark.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/[email protected].6/dist/index.umd.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/[email protected].7/css/designer.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/[email protected].7/css/designer-light.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/[email protected].7/css/designer-dark.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/[email protected].7/dist/index.umd.js"></script>
 ```
 
 Call the designer by:

diff --git a/angular/designer/package.json b/angular/designer/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "sequential-workflow-designer-angular",
 	"description": "Angular wrapper for Sequential Workflow Designer component.",
-	"version": "0.13.6",
+	"version": "0.13.7",
 	"author": {
 		"name": "NoCode JS",
 		"url": "https://nocode-js.com/"
@@ -15,7 +15,7 @@
 	"peerDependencies": {
 		"@angular/common": "12 - 16",
 		"@angular/core": "12 - 16",
-		"sequential-workflow-designer": "^0.13.6"
+		"sequential-workflow-designer": "^0.13.7"
 	},
 	"dependencies": {
 		"tslib": "^2.3.0"

diff --git a/angular/designer/src/designer.component.ts b/angular/designer/src/designer.component.ts
@@ -1,5 +1,6 @@
 import {
 	AfterViewInit,
+	ApplicationRef,
 	Component,
 	ElementRef,
 	EmbeddedViewRef,
@@ -77,7 +78,7 @@ export class DesignerComponent implements AfterViewInit, OnChanges, OnDestroy {
 	@Output()
 	public readonly onDefinitionChanged = new EventEmitter<Definition>();
 
-	public constructor(private readonly ngZone: NgZone) {}
+	public constructor(private readonly ngZone: NgZone, private readonly applicationRef: ApplicationRef) {}
 
 	public ngAfterViewInit() {
 		this.attach();
@@ -98,6 +99,7 @@ export class DesignerComponent implements AfterViewInit, OnChanges, OnDestroy {
 
 	public ngOnDestroy(): void {
 		if (this.lastEmbeddedView) {
+			this.applicationRef.detachView(this.lastEmbeddedView);
 			this.lastEmbeddedView.destroy();
 		}
 	}
@@ -178,14 +180,15 @@ export class DesignerComponent implements AfterViewInit, OnChanges, OnDestroy {
 	private editorProvider<E>(templateRef: TemplateRef<unknown>, editor: E) {
 		return this.ngZone.run(() => {
 			if (this.lastEmbeddedView) {
+				this.applicationRef.detachView(this.lastEmbeddedView);
 				this.lastEmbeddedView.destroy();
 				this.lastEmbeddedView = undefined;
 			}
 
 			this.lastEmbeddedView = templateRef.createEmbeddedView({
 				$implicit: editor
 			});
-			this.lastEmbeddedView.detectChanges();
+			this.applicationRef.attachView(this.lastEmbeddedView);
 
 			const container = document.createElement('div');
 			container.className = 'sqd-editor-angular';

diff --git a/demos/angular-app/angular.json b/demos/angular-app/angular.json
@@ -24,6 +24,7 @@
 							"src/assets"
 						],
 						"styles": [
+							"@angular/material/prebuilt-themes/indigo-pink.css",
 							"src/styles.css",
 							"./node_modules/sequential-workflow-designer/css/designer.css",
 							"./node_modules/sequential-workflow-designer/css/designer-light.css",
@@ -89,6 +90,7 @@
 							"src/assets"
 						],
 						"styles": [
+							"@angular/material/prebuilt-themes/indigo-pink.css",
 							"src/styles.css"
 						],
 						"scripts": []

diff --git a/demos/angular-app/package.json b/demos/angular-app/package.json
@@ -15,24 +15,26 @@
 	},
 	"private": true,
 	"dependencies": {
-		"@angular/animations": "^15.2.2",
-		"@angular/common": "^15.2.2",
-		"@angular/compiler": "^15.2.2",
-		"@angular/core": "^15.2.2",
-		"@angular/forms": "^15.2.2",
-		"@angular/platform-browser": "^15.2.2",
-		"@angular/platform-browser-dynamic": "^15.2.2",
-		"@angular/router": "^15.2.2",
+		"@angular/animations": "^15.2.9",
+		"@angular/common": "^15.2.9",
+		"@angular/compiler": "^15.2.9",
+		"@angular/core": "^15.2.9",
+		"@angular/forms": "^15.2.9",
+		"@angular/cdk": "15.2.9",
+		"@angular/material": "15.2.9",
+		"@angular/platform-browser": "^15.2.9",
+		"@angular/platform-browser-dynamic": "^15.2.9",
+		"@angular/router": "^15.2.9",
 		"rxjs": "~7.8.0",
-		"sequential-workflow-designer": "^0.13.6",
-		"sequential-workflow-designer-angular": "^0.13.6",
+		"sequential-workflow-designer": "^0.13.7",
+		"sequential-workflow-designer-angular": "^0.13.7",
 		"tslib": "^2.3.0",
 		"zone.js": "~0.13.0"
 	},
 	"devDependencies": {
-		"@angular-devkit/build-angular": "^15.2.1",
-		"@angular/cli": "~15.2.1",
-		"@angular/compiler-cli": "^15.2.2",
+		"@angular-devkit/build-angular": "^15.2.9",
+		"@angular/cli": "~15.2.9",
+		"@angular/compiler-cli": "^15.2.9",
 		"@types/jasmine": "~4.3.1",
 		"jasmine-core": "~4.5.0",
 		"karma": "~6.4.1",

diff --git a/demos/angular-app/src/app/app.component.html b/demos/angular-app/src/app/app.component.html
@@ -18,35 +18,54 @@
 	<h2>Global Editor</h2>
 
 	<h3>Velocity</h3>
-	<input
-		type="number"
-		[value]="editor.definition.properties.velocity"
-		(input)="updateProperty(editor.definition.properties, 'velocity', $event, editor.context)"
-	/>
+	<mat-form-field class="full-width">
+		<input
+			matInput
+			type="number"
+			[value]="editor.definition.properties.velocity"
+			(input)="updateProperty(editor.definition.properties, 'velocity', $event, editor.context)"
+		/>
+	</mat-form-field>
 </ng-template>
 
 <ng-template #stepEditor let-editor>
 	<h2>Step Editor</h2>
 
-	<h3>Name</h3>
-	<input type="text" [value]="editor.step.name" (input)="updateName(editor.step, $event, editor.context)" />
-
-	<h3>Velocity</h3>
-	<input
-		type="number"
-		[value]="editor.step.properties.velocity"
-		(input)="updateProperty(editor.step.properties, 'velocity', $event, editor.context)"
-	/>
+	<mat-tab-group>
+		<mat-tab label="Basic">
+			<h3>Name</h3>
+			<mat-form-field class="full-width">
+				<input matInput type="text" [value]="editor.step.name" (input)="updateName(editor.step, $event, editor.context)" />
+			</mat-form-field>
+		</mat-tab>
+		<mat-tab label="Details">
+			<h3>Velocity</h3>
+			<mat-form-field class="full-width">
+				<input
+					matInput
+					type="number"
+					[value]="editor.step.properties.velocity"
+					(input)="updateProperty(editor.step.properties, 'velocity', $event, editor.context)"
+				/>
+			</mat-form-field>
+		</mat-tab>
+	</mat-tab-group>
 </ng-template>
 
-<br />
-
-<button (click)="reloadDefinitionClicked()">Reload definition</button>
-
-<br />
-
-<textarea cols="60" rows="18">{{ definitionJSON }}</textarea>
+<div class="block">
+	<button mat-raised-button color="primary" (click)="reloadDefinitionClicked()">Reload definition</button>
+	&nbsp; Is valid: <strong>{{ isValid }}</strong>
+</div>
 
-<br />
+<div class="block">
+	<mat-form-field class="full-width flex-1s">
+		<textarea matInput cols="120" rows="16" readonly>{{ definitionJSON }}</textarea>
+	</mat-form-field>
+</div>
 
-Is valid: {{ isValid }}
+<div class="block">
+	This demo uses Angular, Material UI and
+	<a href="https://github.com/nocode-js/sequential-workflow-designer/tree/main/angular/designer" target="_blank"
+		>Sequential Workflow Designer for Angular</a
+	>.
+</div>
diff --git a/demos/angular-app/src/app/app.component.spec.ts b/demos/angular-app/src/app/app.component.spec.ts
@@ -1,12 +1,12 @@
 import { TestBed } from '@angular/core/testing';
-import { SequentialWorkflowDesignerModule } from 'sequential-workflow-designer-angular';
 import { AppComponent } from './app.component';
+import { AppModule } from './app.module';
 
 describe('AppComponent', () => {
 	beforeEach(async () => {
 		await TestBed.configureTestingModule({
 			declarations: [AppComponent],
-			imports: [SequentialWorkflowDesignerModule]
+			imports: [AppModule]
 		}).compileComponents();
 	});
 

diff --git a/demos/angular-app/src/app/app.component.ts b/demos/angular-app/src/app/app.component.ts
@@ -4,19 +4,30 @@ import {
 	Designer,
 	GlobalEditorContext,
 	Properties,
+	Uid,
 	Step,
 	StepEditorContext,
 	StepsConfiguration,
 	ToolboxConfiguration,
 	ValidatorConfiguration
 } from 'sequential-workflow-designer';
 
-function createDefinition() {
+function createStep(): Step {
+	return {
+		id: Uid.next(),
+		componentType: 'task',
+		name: 'Step',
+		properties: { velocity: 0 },
+		type: 'task'
+	};
+}
+
+function createDefinition(): Definition {
 	return {
 		properties: {
 			velocity: 0
 		},
-		sequence: []
+		sequence: [createStep()]
 	};
 }
 
@@ -35,14 +46,7 @@ export class AppComponent implements OnInit {
 		groups: [
 			{
 				name: 'Step',
-				steps: [
-					{
-						componentType: 'task',
-						name: 'Step',
-						properties: { velocity: 0 },
-						type: 'task'
-					}
-				]
+				steps: [createStep()]
 			}
 		]
 	};
@@ -68,7 +72,7 @@ export class AppComponent implements OnInit {
 		this.definition = definition;
 		this.updateIsValid();
 		this.updateDefinitionJSON();
-		console.log('definition changed');
+		console.log('definition has changed');
 	}
 
 	public updateName(step: Step, event: Event, context: StepEditorContext) {

diff --git a/demos/angular-app/src/app/app.module.ts b/demos/angular-app/src/app/app.module.ts
@@ -3,10 +3,22 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { SequentialWorkflowDesignerModule } from 'sequential-workflow-designer-angular';
 import { AppComponent } from './app.component';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
 
 @NgModule({
 	declarations: [AppComponent],
-	imports: [CommonModule, BrowserModule, SequentialWorkflowDesignerModule],
+	imports: [
+		CommonModule,
+		BrowserModule,
+		SequentialWorkflowDesignerModule,
+		NoopAnimationsModule,
+		MatTabsModule,
+		MatInputModule,
+		MatButtonModule
+	],
 	providers: [],
 	bootstrap: [AppComponent]
 })

diff --git a/demos/angular-app/src/index.html b/demos/angular-app/src/index.html
@@ -3,7 +3,7 @@
 	<head>
 		<meta charset="utf-8" />
 		<title>🌵 Sequential Workflow Designer for Angular Demo</title>
-		<base href="/" />
+		<base href="./" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<link rel="icon" href="assets/angular-icon.svg" />
 	</head>

diff --git a/demos/angular-app/src/main.ts b/demos/angular-app/src/main.ts
@@ -2,6 +2,12 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { AppModule } from './app/app.module';
 
-platformBrowserDynamic()
-	.bootstrapModule(AppModule)
-	.catch(err => console.error(err));
+window.addEventListener(
+	'load',
+	() => {
+		platformBrowserDynamic()
+			.bootstrapModule(AppModule)
+			.catch(err => console.error(err));
+	},
+	false
+);