0.18.4. (#117)

b4rtaz · web-flow · commit 6d9829d52c84 · 2024-02-04T13:45:18.000+01:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,16 +1,21 @@
-## 0.18.3
+## 0.18.4
 
-Added a feature to the sequential-workflow-designer-react package that enables re-rendering the canvas when you pass a new instance of the wrapped definition. The instance of the definition must remain the same. This enables easy manipulation of the definition from outside the designer in your React application.
+This version removes the features introduced in the previous release. We noticed that the proposed solution did not update the undo stack. As a result, we removed that feature in this version. Instead, we added a new method to the Designer class called `replaceDefinition`, which allows for the replacement of the entire definition and updates the undo stack.
 
-```tsx
-function action() {
+```ts
+function appendStep() {
   const newStep: Step = { /* ... */ };
 
-  definition.value.sequence.push(newStep);
-  setDefinition({ ...definition });
+  const newDefinition = ObjectCloner.deepClone(designer.getDefinition());
+  newDefinition.sequence.push(newStep);
+  await designer.replaceDefinition(newDefinition);
 }
 ```
 
+## 0.18.3
+
+Edited: changes are reverted in the 0.18.4 version.
+
 ## 0.18.2
 
 This version corrects a bug in the `moveViewportToStep` method that caused the viewport to move to the incorrect position.
diff --git a/README.md b/README.md
@@ -96,10 +96,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.18.3/css/designer.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.18.3/css/designer-light.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.18.3/css/designer-dark.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.18.3/dist/index.umd.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.18.4/css/designer.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.18.4/css/designer-light.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.18.4/css/designer-dark.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.18.4/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.18.3",
+	"version": "0.18.4",
 	"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.18.3"
+		"sequential-workflow-designer": "^0.18.4"
 	},
 	"dependencies": {
 		"tslib": "^2.3.0"
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.18.3",
-		"sequential-workflow-designer-angular": "^0.18.3",
+		"sequential-workflow-designer": "^0.18.4",
+		"sequential-workflow-designer-angular": "^0.18.4",
 		"tslib": "^2.3.0",
 		"zone.js": "~0.13.0"
 	},
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.18.3:
-  version "0.18.3"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.18.3.tgz#4bfb9943c987ac6b609c657a34d48701d10484f0"
-  integrity sha512-mJGok8qR0xDffn+tNBS3O8wCK9xgu8n/xiIVCurwqcPJ46jvHiQdjnJfS4Ea8bj5MGC1uRQvle9zO8puNlRzbw==
+sequential-workflow-designer-angular@^0.18.4:
+  version "0.18.4"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.18.4.tgz#552062a04c84e294e940858a2c99b843b0ac4705"
+  integrity sha512-K4ZxmbNGQhvJqYqC4ZszHYswViDKTHTKbc3YmqtVpGA5asVJ0fbhNEsfZyRzvI3N7F5/BAQtWvPRA1FKjvOXxg==
   dependencies:
     tslib "^2.3.0"
 
-sequential-workflow-designer@^0.18.3:
-  version "0.18.3"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.18.3.tgz#3c2165550160216fb40e2eb945c654d5ae5d505c"
-  integrity sha512-IchagYDpIYNvIVv4HleKn+x+ZfItVDxoQqQbBF1Ms7vEZdd0CwfvB17NBZLfz02LTGyGE/GGGPc8IEvqkajvMQ==
+sequential-workflow-designer@^0.18.4:
+  version "0.18.4"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.18.4.tgz#da4d3924fab044391c2d0c26244ca164a8b2d659"
+  integrity sha512-JdLXiAjsqovJOHJEDXrk+FXcm/GHsoaNAAiaCNx3LqXHimpRMaH+Cy9DdL6L6KNsrLsWQcxWay+B6pokNTUFeg==
   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.18.3",
-		"sequential-workflow-designer-react": "^0.18.3"
+		"sequential-workflow-designer": "^0.18.4",
+		"sequential-workflow-designer-react": "^0.18.4"
 	},
 	"devDependencies": {
 		"@types/jest": "^29.2.5",
diff --git a/demos/react-app/src/playground/Playground.tsx b/demos/react-app/src/playground/Playground.tsx
@@ -86,12 +86,13 @@ export function Playground() {
 		}
 	}
 
-	function appendStepClicked() {
+	async function appendStepClicked() {
 		const newStep = createTaskStep();
 
-		// We need to keep the same reference to the definition, but the wrapped definition must be a new instance.
-		definition.value.sequence.push(newStep);
-		setDefinition({ ...definition });
+		const newDefinition = ObjectCloner.deepClone(definition.value);
+		newDefinition.sequence.push(newStep);
+		// We need to wait for the controller to finish the operation before we can select the new step
+		await controller.replaceDefinition(newDefinition);
 
 		setSelectedStepId(newStep.id);
 		setMoveViewportToStep(newStep.id);
diff --git a/demos/svelte-app/package.json b/demos/svelte-app/package.json
@@ -16,8 +16,8 @@
 		"eslint": "eslint ./src --ext .ts"
 	},
 	"dependencies": {
-		"sequential-workflow-designer": "^0.18.3",
-		"sequential-workflow-designer-svelte": "^0.18.3"
+		"sequential-workflow-designer": "^0.18.4",
+		"sequential-workflow-designer-svelte": "^0.18.4"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-static": "^2.0.3",
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.18.3",
+	"version": "0.18.4",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",
diff --git a/designer/src/api/control-bar-api.ts b/designer/src/api/control-bar-api.ts
@@ -1,28 +1,40 @@
+import { SimpleEvent } from '../core';
 import { DefinitionModifier } from '../definition-modifier';
 import { DesignerState } from '../designer-state';
 import { HistoryController } from '../history-controller';
 import { ViewportApi } from './viewport-api';
 
 export class ControlBarApi {
-	public constructor(
+	public static create(
+		state: DesignerState,
+		historyController: HistoryController | undefined,
+		definitionModifier: DefinitionModifier,
+		viewportApi: ViewportApi
+	): ControlBarApi {
+		const api = new ControlBarApi(state, historyController, definitionModifier, viewportApi);
+		state.onIsReadonlyChanged.subscribe(api.onStateChanged.forward);
+		state.onSelectedStepIdChanged.subscribe(api.onStateChanged.forward);
+		state.onIsDragDisabledChanged.subscribe(api.onStateChanged.forward);
+		if (api.isUndoRedoSupported()) {
+			state.onDefinitionChanged.subscribe(api.onStateChanged.forward);
+		}
+		return api;
+	}
+
+	private constructor(
 		private readonly state: DesignerState,
 		private readonly historyController: HistoryController | undefined,
 		private readonly definitionModifier: DefinitionModifier,
 		private readonly viewportApi: ViewportApi
 	) {}
 
+	public readonly onStateChanged = new SimpleEvent<unknown>();
+
 	/**
 	 * @deprecated Don't use this method
 	 */
 	public subscribe(handler: () => void) {
-		// TODO: this should be refactored
-
-		this.state.onIsReadonlyChanged.subscribe(handler);
-		this.state.onSelectedStepIdChanged.subscribe(handler);
-		this.state.onIsDragDisabledChanged.subscribe(handler);
-		if (this.isUndoRedoSupported()) {
-			this.state.onDefinitionChanged.subscribe(handler);
-		}
+		this.onStateChanged.subscribe(handler);
 	}
 
 	public resetViewport() {
diff --git a/designer/src/api/designer-api.ts b/designer/src/api/designer-api.ts
@@ -15,7 +15,7 @@ export class DesignerApi {
 		const toolboxDataProvider = new ToolboxDataProvider(context.componentContext.iconProvider, context.configuration.toolbox);
 
 		return new DesignerApi(
-			new ControlBarApi(context.state, context.historyController, context.definitionModifier, viewport),
+			ControlBarApi.create(context.state, context.historyController, context.definitionModifier, viewport),
 			new ToolboxApi(context.state, context, context.behaviorController, toolboxDataProvider, context.configuration.uidGenerator),
 			new EditorApi(context.state, context.definitionWalker, context.definitionModifier),
 			workspace,
diff --git a/designer/src/api/path-bar-api.ts b/designer/src/api/path-bar-api.ts
@@ -5,13 +5,13 @@ import { DesignerState } from '../designer-state';
 export class PathBarApi {
 	public constructor(private readonly state: DesignerState, private readonly definitionWalker: DefinitionWalker) {}
 
+	public readonly onStateChanged = race(0, this.state.onFolderPathChanged, this.state.onDefinitionChanged);
+
 	/**
 	 * @deprecated Don't use this method
 	 */
 	public subscribe(handler: () => void) {
-		// TODO: this should be refactored
-
-		race(0, this.state.onFolderPathChanged, this.state.onDefinitionChanged).subscribe(handler);
+		this.onStateChanged.subscribe(handler);
 	}
 
 	public setFolderPath(path: string[]) {
diff --git a/designer/src/control-bar/control-bar.ts b/designer/src/control-bar/control-bar.ts
@@ -14,7 +14,7 @@ export class ControlBar implements UiComponent {
 		view.bindZoomOutButtonClick(() => bar.onZoomOutButtonClicked());
 		view.bindDisableDragButtonClick(() => bar.onMoveButtonClicked());
 		view.bindDeleteButtonClick(() => bar.onDeleteButtonClicked());
-		api.controlBar.subscribe(() => bar.refreshButtons());
+		api.controlBar.onStateChanged.subscribe(() => bar.refreshButtons());
 
 		if (isUndoRedoSupported) {
 			view.bindUndoButtonClick(() => bar.onUndoButtonClicked());
diff --git a/designer/src/core/simple-event.spec.ts b/designer/src/core/simple-event.spec.ts
@@ -21,4 +21,21 @@ describe('SimpleEvent', () => {
 		expect(counter).toEqual(1);
 		expect(e.count()).toEqual(0);
 	});
+
+	it('first() works as expected', done => {
+		const e = new SimpleEvent<number>();
+		let lastValue: number | undefined;
+
+		e.first().then(v => (lastValue = v));
+
+		e.forward(1);
+		e.forward(2);
+		e.forward(3);
+		e.forward(4);
+
+		setTimeout(() => {
+			expect(lastValue).toEqual(1);
+			done();
+		}, 10);
+	});
 });
diff --git a/designer/src/core/simple-event.ts b/designer/src/core/simple-event.ts
@@ -14,15 +14,25 @@ export class SimpleEvent<T> {
 		}
 	}
 
-	public forward(value: T) {
+	public readonly forward = (value: T) => {
 		if (this.listeners.length > 0) {
 			this.listeners.forEach(listener => listener(value));
 		}
-	}
+	};
 
 	public count(): number {
 		return this.listeners.length;
 	}
+
+	public first(): Promise<T> {
+		return new Promise(resolve => {
+			const handler = (value: T) => {
+				this.unsubscribe(handler);
+				resolve(value);
+			};
+			this.subscribe(handler);
+		});
+	}
 }
 
 export type SimpleEventListener<T> = (value: T) => void;
diff --git a/designer/src/designer.spec.ts b/designer/src/designer.spec.ts
@@ -10,7 +10,7 @@ import { Workspace } from './workspace/workspace';
 describe('Designer', () => {
 	it('create() creates designer', () => {
 		const workspaceSpy = spyOn(Workspace, 'create').and.returnValues({
-			onReady: new SimpleEvent<void>()
+			onRendered: new SimpleEvent<void>()
 		} as Workspace);
 		const toolboxSpy = spyOn(Toolbox, 'create');
 		const controlBarSpy = spyOn(ControlBar, 'create');
diff --git a/designer/src/designer.ts b/designer/src/designer.ts
@@ -53,7 +53,7 @@ export class Designer<TDefinition extends Definition = Definition> {
 			designerContext.historyController,
 			designerApi
 		);
-		view.workspace.onReady.subscribe(() => designer.onReady.forward());
+		view.workspace.onRendered.first().then(designer.onReady.forward);
 
 		race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged).subscribe(
 			([definition, selectedStepId]) => {
@@ -66,15 +66,9 @@ export class Designer<TDefinition extends Definition = Definition> {
 			}
 		);
 
-		designerContext.state.onViewportChanged.subscribe(viewPort => {
-			designer.onViewportChanged.forward(viewPort);
-		});
-		designerContext.state.onIsToolboxCollapsedChanged.subscribe(isCollapsed => {
-			designer.onIsToolboxCollapsedChanged.forward(isCollapsed);
-		});
-		designerContext.state.onIsEditorCollapsedChanged.subscribe(isCollapsed => {
-			designer.onIsEditorCollapsedChanged.forward(isCollapsed);
-		});
+		designerContext.state.onViewportChanged.subscribe(designer.onViewportChanged.forward);
+		designerContext.state.onIsToolboxCollapsedChanged.subscribe(designer.onIsToolboxCollapsedChanged.forward);
+		designerContext.state.onIsEditorCollapsedChanged.subscribe(designer.onIsEditorCollapsedChanged.forward);
 		return designer;
 	}
 
@@ -240,10 +234,20 @@ export class Designer<TDefinition extends Definition = Definition> {
 	 * @description Dump the undo stack.
 	 */
 	public dumpUndoStack(): UndoStack {
-		if (!this.historyController) {
-			throw new Error('Undo feature is not activated');
-		}
-		return this.historyController.dump();
+		return this.getHistoryController().dump();
+	}
+
+	/**
+	 * Replaces the current definition with a new one and adds the previous definition to the undo stack.
+	 * @param definition A new definition.
+	 */
+	public async replaceDefinition(definition: TDefinition) {
+		this.getHistoryController().replaceDefinition(definition);
+
+		await Promise.all([
+			this.view.workspace.onRendered.first(), // This should be fired first
+			this.onDefinitionChanged.first()
+		]);
 	}
 
 	/**
@@ -267,4 +271,11 @@ export class Designer<TDefinition extends Definition = Definition> {
 	public destroy() {
 		this.view.destroy();
 	}
+
+	private getHistoryController(): HistoryController {
+		if (!this.historyController) {
+			throw new Error('Undo feature is not activated');
+		}
+		return this.historyController;
+	}
 }
diff --git a/designer/src/history-controller.ts b/designer/src/history-controller.ts
diff --git a/designer/src/workspace/workspace.ts b/designer/src/workspace/workspace.ts
diff --git a/examples/assets/lib.js b/examples/assets/lib.js
diff --git a/react/package.json b/react/package.json
diff --git a/react/src/SequentialWorkflowDesigner.tsx b/react/src/SequentialWorkflowDesigner.tsx
diff --git a/react/src/SequentialWorkflowDesignerController.ts b/react/src/SequentialWorkflowDesignerController.ts
diff --git a/svelte/package.json b/svelte/package.json

-Original file line number
+Diff line change
 ```html
 <head>
 ...
 -<link href="https://cdn.jsdelivr.net/npm/[email protected].3/css/designer.css" rel="stylesheet">
 -<link href="https://cdn.jsdelivr.net/npm/[email protected].3/css/designer-light.css" rel="stylesheet">
 -<link href="https://cdn.jsdelivr.net/npm/[email protected].3/css/designer-dark.css" rel="stylesheet">
 -<script src="https://cdn.jsdelivr.net/npm/[email protected].3/dist/index.umd.js"></script>
 +<link href="https://cdn.jsdelivr.net/npm/[email protected].4/css/designer.css" rel="stylesheet">
 +<link href="https://cdn.jsdelivr.net/npm/[email protected].4/css/designer-light.css" rel="stylesheet">
 +<link href="https://cdn.jsdelivr.net/npm/[email protected].4/css/designer-dark.css" rel="stylesheet">
 +<script src="https://cdn.jsdelivr.net/npm/[email protected].4/dist/index.umd.js"></script>
 ```
 Call the designer by:
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.18.3",`
	`4`	`+ "version": "0.18.4",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"main": "./lib/esm/index.js",`
`7`	`7`	`"types": "./lib/index.d.ts",`