0.16.3. (#90)

b4rtaz · web-flow · commit e2ca34e6112c · 2023-10-02T21:11:15.000+02:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 0.16.3
+
+This version adds: `isReadonly`, `selectedStepId`, `uidGenerator`, `isToolboxCollapsed` and `isEditorCollapsed` properties and `onIsToolboxCollapsedChanged` and `onIsEditorCollapsedChanged` events to the Angular package.
+
 ## 0.16.2
 
 This version adds the `onSelectedStepIdChanged` event to the Angular package.
diff --git a/README.md b/README.md
@@ -95,10 +95,10 @@ Add the below code to your head section in HTML document.
 ```html
 <head>
 ...
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.2/css/designer.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.2/css/designer-light.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.2/css/designer-dark.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.2/dist/index.umd.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.3/css/designer.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.3/css/designer-light.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.3/css/designer-dark.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.3/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.16.2",
+	"version": "0.16.3",
 	"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.16.2"
+		"sequential-workflow-designer": "^0.16.3"
 	},
 	"dependencies": {
 		"tslib": "^2.3.0"
diff --git a/angular/designer/src/designer.component.ts b/angular/designer/src/designer.component.ts
@@ -15,6 +15,7 @@ import {
 	ViewChild
 } from '@angular/core';
 import {
+	CustomActionHandler,
 	Definition,
 	Designer,
 	DesignerExtension,
@@ -25,6 +26,7 @@ import {
 	StepEditorProvider,
 	StepsConfiguration,
 	ToolboxConfiguration,
+	UidGenerator,
 	ValidatorConfiguration
 } from 'sequential-workflow-designer';
 
@@ -70,6 +72,19 @@ export class DesignerComponent implements AfterViewInit, OnChanges, OnDestroy {
 	public contextMenu?: boolean;
 	@Input('extensions')
 	public extensions?: DesignerExtension[];
+	@Input('customActionHandler')
+	public customActionHandler?: CustomActionHandler;
+	@Input('isReadonly')
+	public isReadonly?: boolean;
+	@Input('selectedStepId')
+	public selectedStepId?: string | null;
+	@Input('uidGenerator')
+	public uidGenerator?: UidGenerator;
+	@Input('isToolboxCollapsed')
+	public isToolboxCollapsed?: boolean;
+	@Input('isEditorCollapsed')
+	public isEditorCollapsed?: boolean;
+
 	@Input('areEditorsHidden')
 	public areEditorsHidden?: boolean;
 	@Input('globalEditor')
@@ -83,6 +98,10 @@ export class DesignerComponent implements AfterViewInit, OnChanges, OnDestroy {
 	public readonly onDefinitionChanged = new EventEmitter<Definition>();
 	@Output()
 	public readonly onSelectedStepIdChanged = new EventEmitter<string | null>();
+	@Output()
+	public readonly onIsToolboxCollapsedChanged = new EventEmitter<boolean>();
+	@Output()
+	public readonly onIsEditorCollapsedChanged = new EventEmitter<boolean>();
 
 	public constructor(private readonly ngZone: NgZone, private readonly applicationRef: ApplicationRef) {}
 
@@ -95,9 +114,37 @@ export class DesignerComponent implements AfterViewInit, OnChanges, OnDestroy {
 		if (isFirstChange) {
 			return;
 		}
-		if (this.designer && changes['definition'] && changes['definition'].currentValue === this.designer.getDefinition()) {
-			// The same reference = no change.
-			return;
+
+		if (this.designer) {
+			const isSameDefinition = !changes['definition'] || changes['definition'].currentValue === this.designer.getDefinition();
+			if (isSameDefinition) {
+				const isReadonlyChange = changes['isReadonly'];
+				if (isReadonlyChange && isReadonlyChange.currentValue !== this.designer.isReadonly()) {
+					this.designer.setIsReadonly(isReadonlyChange.currentValue);
+				}
+
+				const selectedStepIdChange = changes['selectedStepId'];
+				if (selectedStepIdChange && selectedStepIdChange.currentValue !== this.designer.getSelectedStepId()) {
+					if (selectedStepIdChange.currentValue) {
+						this.designer.selectStepById(selectedStepIdChange.currentValue);
+					} else {
+						this.designer.clearSelectedStep();
+					}
+				}
+
+				const isToolboxCollapsedChange = changes['isToolboxCollapsed'];
+				if (isToolboxCollapsedChange && isToolboxCollapsedChange.currentValue !== this.designer.isToolboxCollapsed()) {
+					this.designer.setIsToolboxCollapsed(isToolboxCollapsedChange.currentValue);
+				}
+
+				const isEditorCollapsedChange = changes['isEditorCollapsed'];
+				if (isEditorCollapsedChange && isEditorCollapsedChange.currentValue !== this.designer.isEditorCollapsed()) {
+					this.designer.setIsEditorCollapsed(isEditorCollapsedChange.currentValue);
+				}
+
+				// The same reference of the definition = no change.
+				return;
+			}
 		}
 
 		this.attach();
@@ -133,21 +180,38 @@ export class DesignerComponent implements AfterViewInit, OnChanges, OnDestroy {
 				this.designer = undefined;
 			}
 
+			let customActionHandler = this.customActionHandler;
+			if (customActionHandler) {
+				const cah = customActionHandler;
+				customActionHandler = (action, step, sequence, context) => {
+					this.ngZone.run(() => cah(action, step, sequence, context));
+				};
+			}
+
 			const designer = Designer.create(this.placeholder.nativeElement, this.definition, {
 				theme: this.theme,
 				undoStackSize: this.undoStackSize,
 				editors: this.areEditorsHidden
 					? false
 					: {
+							isCollapsed: this.isEditorCollapsed,
 							globalEditorProvider: this.globalEditorProvider,
 							stepEditorProvider: this.stepEditorProvider
 					  },
 				steps: this.stepsConfiguration,
 				validator: this.validatorConfiguration,
-				toolbox: this.toolboxConfiguration,
+				toolbox: this.toolboxConfiguration
+					? {
+							isCollapsed: this.isToolboxCollapsed,
+							...this.toolboxConfiguration
+					  }
+					: false,
 				controlBar: this.controlBar,
 				contextMenu: this.contextMenu,
-				extensions: this.extensions
+				extensions: this.extensions,
+				isReadonly: this.isReadonly,
+				uidGenerator: this.uidGenerator,
+				customActionHandler
 			});
 			designer.onReady.subscribe(() => {
 				this.ngZone.run(() => this.onReady.emit(designer));
@@ -158,7 +222,17 @@ export class DesignerComponent implements AfterViewInit, OnChanges, OnDestroy {
 			designer.onSelectedStepIdChanged.subscribe(stepId => {
 				this.ngZone.run(() => this.onSelectedStepIdChanged.emit(stepId));
 			});
+			designer.onIsToolboxCollapsedChanged.subscribe(isCollapsed => {
+				this.ngZone.run(() => this.onIsToolboxCollapsedChanged.emit(isCollapsed));
+			});
+			designer.onIsEditorCollapsedChanged.subscribe(isCollapsed => {
+				this.ngZone.run(() => this.onIsEditorCollapsedChanged.emit(isCollapsed));
+			});
 			this.designer = designer;
+
+			if (this.selectedStepId) {
+				this.designer.selectStepById(this.selectedStepId);
+			}
 		});
 	}
 
diff --git a/demos/angular-app/package.json b/demos/angular-app/package.json
@@ -26,8 +26,8 @@
 		"@angular/platform-browser-dynamic": "^15.2.9",
 		"@angular/router": "^15.2.9",
 		"rxjs": "~7.8.0",
-		"sequential-workflow-designer": "^0.16.2",
-		"sequential-workflow-designer-angular": "^0.16.2",
+		"sequential-workflow-designer": "^0.16.3",
+		"sequential-workflow-designer-angular": "^0.16.3",
 		"tslib": "^2.3.0",
 		"zone.js": "~0.13.0"
 	},
diff --git a/demos/angular-app/src/app/app.component.html b/demos/angular-app/src/app/app.component.html
@@ -6,12 +6,18 @@
 	[stepsConfiguration]="stepsConfiguration"
 	[validatorConfiguration]="validatorConfiguration"
 	[controlBar]="true"
+	[selectedStepId]="selectedStepId"
+	[isReadonly]="isReadonly"
+	[isToolboxCollapsed]="isToolboxCollapsed"
+	[isEditorCollapsed]="isEditorCollapsed"
 	[areEditorsHidden]="false"
 	[globalEditor]="globalEditor"
 	[stepEditor]="stepEditor"
 	(onReady)="onDesignerReady($event)"
 	(onDefinitionChanged)="onDefinitionChanged($event)"
 	(onSelectedStepIdChanged)="onSelectedStepIdChanged($event)"
+	(onIsToolboxCollapsedChanged)="onIsToolboxCollapsedChanged($event)"
+	(onIsEditorCollapsedChanged)="onIsEditorCollapsedChanged($event)"
 >
 </sqd-designer>
 
@@ -55,7 +61,23 @@ <h3>Velocity</h3>
 
 <div class="block">
 	<button mat-raised-button color="primary" (click)="reloadDefinitionClicked()">Reload definition</button>
-	&nbsp; Is valid: <strong>{{ isValid }}</strong> &nbsp; Selected step: <strong>{{ selectedStepId }}</strong>
+	&nbsp;
+	<button mat-raised-button color="primary" (click)="toggleReadonlyClicked()">
+		{{ isReadonly ? 'Enable editing' : 'Disable editing' }}
+	</button>
+	&nbsp;
+	<button mat-raised-button color="primary" (click)="toggleSelectedStepClicked()">
+		{{ selectedStepId ? 'Unselect' : 'Select first' }}
+	</button>
+	&nbsp;
+	<button mat-raised-button color="primary" (click)="toggleToolboxClicked()">
+		{{ isToolboxCollapsed ? 'Show toolbox' : 'Hide toolbox' }}
+	</button>
+	&nbsp;
+	<button mat-raised-button color="primary" (click)="toggleEditorClicked()">
+		{{ isEditorCollapsed ? 'Show editor' : 'Hide editor' }}
+	</button>
+	&nbsp; Is valid: <strong>{{ isValid }}</strong>
 </div>
 
 <div class="block">
diff --git a/demos/angular-app/src/app/app.component.ts b/demos/angular-app/src/app/app.component.ts
@@ -40,7 +40,10 @@ export class AppComponent implements OnInit {
 
 	public definition: Definition = createDefinition();
 	public definitionJSON?: string;
-	public selectedStepId = '-';
+	public selectedStepId: string | null = null;
+	public isReadonly = false;
+	public isToolboxCollapsed = false;
+	public isEditorCollapsed = false;
 	public isValid?: boolean;
 
 	public readonly toolboxConfiguration: ToolboxConfiguration = {
@@ -77,7 +80,15 @@ export class AppComponent implements OnInit {
 	}
 
 	public onSelectedStepIdChanged(stepId: string | null) {
-		this.selectedStepId = stepId || '-';
+		this.selectedStepId = stepId;
+	}
+
+	public onIsToolboxCollapsedChanged(isCollapsed: boolean) {
+		this.isToolboxCollapsed = isCollapsed;
+	}
+
+	public onIsEditorCollapsedChanged(isCollapsed: boolean) {
+		this.isEditorCollapsed = isCollapsed;
 	}
 
 	public updateName(step: Step, event: Event, context: StepEditorContext) {
@@ -95,6 +106,26 @@ export class AppComponent implements OnInit {
 		this.updateDefinitionJSON();
 	}
 
+	public toggleReadonlyClicked() {
+		this.isReadonly = !this.isReadonly;
+	}
+
+	public toggleSelectedStepClicked() {
+		if (this.selectedStepId) {
+			this.selectedStepId = null;
+		} else if (this.definition.sequence.length > 0) {
+			this.selectedStepId = this.definition.sequence[0].id;
+		}
+	}
+
+	public toggleToolboxClicked() {
+		this.isToolboxCollapsed = !this.isToolboxCollapsed;
+	}
+
+	public toggleEditorClicked() {
+		this.isEditorCollapsed = !this.isEditorCollapsed;
+	}
+
 	private updateDefinitionJSON() {
 		this.definitionJSON = JSON.stringify(this.definition, null, 2);
 	}
diff --git a/demos/angular-app/yarn.lock b/demos/angular-app/yarn.lock
@@ -5956,17 +5956,17 @@ send@0.18.0:
     range-parser "~1.2.1"
     statuses "2.0.1"
 
-sequential-workflow-designer-angular@^0.16.2:
-  version "0.16.2"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.16.2.tgz#4c95af277e2a69543b076057cbff42f3607ceb24"
-  integrity sha512-Y12qZP2vFLR15JXsF/6h+NLmHXPm7pzAIF5cbArN17qaZTog4McBhT2C5BEfywO0KsGXw6QUlNsirGM0xekYbA==
+sequential-workflow-designer-angular@^0.16.3:
+  version "0.16.3"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.16.3.tgz#ad10976164b7c4e85bcb73c0585fb73701761648"
+  integrity sha512-kTRUPodVsfYpvFZ4ljMkGqM+VWC4xCay+jyWiGD9N2ifnQ7vuKcapMk6DQ+pSSTNCqqOugwdqD5snnWwCeWOYw==
   dependencies:
     tslib "^2.3.0"
 
-sequential-workflow-designer@^0.16.2:
-  version "0.16.2"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.16.2.tgz#c8b8f668412b058789b6520b26d290098443eb83"
-  integrity sha512-zSFmrAiMnYVY5wwMLnSo+LsE1M2mWtYPPfIQGJ6bObTUkYBBfRsYrwJOkiUtFYmYzR9WtWokaUgkYJc3Xms9mA==
+sequential-workflow-designer@^0.16.3:
+  version "0.16.3"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.16.3.tgz#899559b3a5ea3b5f0be931a071af67169ec65cb5"
+  integrity sha512-4M37SXOVfQ8YzLB+1PSDCB7NRXgipOSyBu127CBx2BdAt2dc7CnA0cyOYlVHtL3WX7xGfLXeIKKG7eSfQvjlWg==
   dependencies:
     sequential-workflow-model "^0.2.0"
 
diff --git a/demos/react-app/package.json b/demos/react-app/package.json
@@ -6,8 +6,8 @@
 	"dependencies": {
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"sequential-workflow-designer": "^0.16.2",
-		"sequential-workflow-designer-react": "^0.16.2"
+		"sequential-workflow-designer": "^0.16.3",
+		"sequential-workflow-designer-react": "^0.16.3"
 	},
 	"devDependencies": {
 		"@types/jest": "^29.2.5",
diff --git a/designer/package.json b/designer/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "sequential-workflow-designer",
 	"description": "Customizable no-code component for building flow-based programming applications.",
-	"version": "0.16.2",
+	"version": "0.16.3",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",
diff --git a/examples/assets/lib.js b/examples/assets/lib.js
@@ -19,7 +19,7 @@ function embedStylesheet(url) {
 
 const baseUrl = isTestEnv()
 	? '../designer'
-	: '//cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.2';
+	: '//cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.3';
 
 embedScript(`${baseUrl}/dist/index.umd.js`);
 embedStylesheet(`${baseUrl}/css/designer.css`);
diff --git a/react/package.json b/react/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "sequential-workflow-designer-react",
 	"description": "React wrapper for Sequential Workflow Designer component.",
-	"version": "0.16.2",
+	"version": "0.16.3",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",
@@ -47,7 +47,7 @@
 	"peerDependencies": {
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"sequential-workflow-designer": "^0.16.2"
+		"sequential-workflow-designer": "^0.16.3"
 	},
 	"devDependencies": {
 		"@rollup/plugin-node-resolve": "^15.0.1",
@@ -63,7 +63,7 @@
 		"prettier": "^2.8.2",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"sequential-workflow-designer": "^0.16.2",
+		"sequential-workflow-designer": "^0.16.3",
 		"rollup": "^3.18.0",
 		"rollup-plugin-dts": "^5.2.0",
 		"rollup-plugin-typescript2": "^0.34.1",
diff --git a/react/src/SequentialWorkflowDesigner.tsx b/react/src/SequentialWorkflowDesigner.tsx

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "sequential-workflow-designer",`
`3`	`3`	`"description": "Customizable no-code component for building flow-based programming applications.",`
`4`		`- "version": "0.16.2",`
	`4`	`+ "version": "0.16.3",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"main": "./lib/esm/index.js",`
`7`	`7`	`"types": "./lib/index.d.ts",`