nocode-js · b4rtaz · Feb 19, 2026 · Feb 19, 2026
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,33 @@
+# 0.36.0
+
+This version introduces a change to the `onDefinitionChanged` event. Previously, the payload of this event was the workflow definition itself. Now, the payload has been extended to the following structure:
+
+```ts
+export interface DefinitionChangedEvent {
+  definition: Definition;
+  changeType: DefinitionChangeType;
+  stepId: string | null;
+  duplicatedStepIds?: DuplicatedStepId[];
+}
+```
+
+This change is NOT backward compatible. If you are using the `onDefinitionChanged` event, you must update your code to read the definition from the definition property of the event payload.
+
+```ts
+// before
+designer.onDefinitionChanged((definition) => { /* ... */ });
+
+// now
+designer.onDefinitionChanged((event) => {
+  const definition = event.definition;
+  // ...
+});
+```
+
+This change also affects the Angular package. Previously, the `onDefinitionChanged` event emitted the definition directly, it now emits a `DefinitionChangedEvent` object.
+
+The change has also been propagated to the React and Svelte packages. However, for those packages, the update is backward compatible.
+
 # 0.35.3
 
 Added support for Angular 20.

diff --git a/README.md b/README.md
@@ -106,10 +106,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.35.3/css/designer.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.35.3/css/designer-light.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.35.3/css/designer-dark.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.35.3/dist/index.umd.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.36.0/css/designer.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.36.0/css/designer-light.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.36.0/css/designer-dark.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.36.0/dist/index.umd.js"></script>
 ```
 
 Call the designer by:
@@ -217,7 +217,7 @@ const configuration = {
 };
 
 const designer = Designer.create(placeholder, definition, configuration);
-designer.onDefinitionChanged.subscribe((newDefinition) => {
+designer.onDefinitionChanged.subscribe((event) => {
   // ...
 });
 ```

diff --git a/angular/designer/README.md b/angular/designer/README.md
@@ -71,8 +71,8 @@ export class AppComponent {
     this.designer = designer;
   }
 
-  public onDefinitionChanged(definition: Definition) {
-    this.definition = definition;
+  public onDefinitionChanged(event: DefinitionChangedEvent) {
+    this.definition = event.definition;
   }
 
   public onSelectedStepIdChanged(stepId: string | null) {

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.35.3",
+	"version": "0.36.0",
 	"author": {
 		"name": "NoCode JS",
 		"url": "https://nocode-js.com/"
@@ -15,7 +15,7 @@
 	"peerDependencies": {
 		"@angular/common": "12 - 20",
 		"@angular/core": "12 - 20",
-		"sequential-workflow-designer": "^0.35.3"
+		"sequential-workflow-designer": "^0.36.0"
 	},
 	"dependencies": {
 		"tslib": "^2.3.0"

diff --git a/angular/designer/src/designer.component.ts b/angular/designer/src/designer.component.ts
@@ -31,7 +31,8 @@ import {
 	ValidatorConfiguration,
 	PlaceholderConfiguration,
 	I18n,
-	PreferenceStorage
+	PreferenceStorage,
+	DefinitionChangedEvent
 } from 'sequential-workflow-designer';
 
 export interface RootEditorWrapper {
@@ -109,7 +110,7 @@ export class DesignerComponent implements AfterViewInit, OnChanges, OnDestroy {
 	@Output()
 	public readonly onReady = new EventEmitter<Designer>();
 	@Output()
-	public readonly onDefinitionChanged = new EventEmitter<Definition>();
+	public readonly onDefinitionChanged = new EventEmitter<DefinitionChangedEvent>();
 	@Output()
 	public readonly onSelectedStepIdChanged = new EventEmitter<string | null>();
 	@Output()
@@ -239,8 +240,8 @@ export class DesignerComponent implements AfterViewInit, OnChanges, OnDestroy {
 			designer.onReady.subscribe(() => {
 				this.ngZone.run(() => this.onReady.emit(designer));
 			});
-			designer.onDefinitionChanged.subscribe(definition => {
-				this.ngZone.run(() => this.onDefinitionChanged.emit(definition));
+			designer.onDefinitionChanged.subscribe(event => {
+				this.ngZone.run(() => this.onDefinitionChanged.emit(event));
 			});
 			designer.onSelectedStepIdChanged.subscribe(stepId => {
 				this.ngZone.run(() => this.onSelectedStepIdChanged.emit(stepId));

diff --git a/demos/angular-app/package.json b/demos/angular-app/package.json
@@ -26,8 +26,8 @@
 		"@angular/platform-browser-dynamic": "^17.3.9",
 		"@angular/router": "^17.3.9",
 		"rxjs": "~7.8.0",
-		"sequential-workflow-designer": "^0.35.3",
-		"sequential-workflow-designer-angular": "^0.35.3",
+		"sequential-workflow-designer": "^0.36.0",
+		"sequential-workflow-designer-angular": "^0.36.0",
 		"tslib": "^2.3.0",
 		"zone.js": "~0.14.6"
 	},

diff --git a/demos/angular-app/src/app/app.component.ts b/demos/angular-app/src/app/app.component.ts
@@ -10,7 +10,8 @@ import {
 	StepsConfiguration,
 	ToolboxConfiguration,
 	ValidatorConfiguration,
-	BranchedStep
+	BranchedStep,
+	DefinitionChangedEvent
 } from 'sequential-workflow-designer';
 
 function createJob(): Step {
@@ -87,8 +88,8 @@ export class AppComponent implements OnInit {
 		console.log('designer ready', this.designer);
 	}
 
-	public onDefinitionChanged(definition: Definition) {
-		this.definition = definition;
+	public onDefinitionChanged(event: DefinitionChangedEvent) {
+		this.definition = event.definition;
 		this.updateIsValid();
 		this.updateDefinitionJSON();
 		console.log('definition has changed');

diff --git a/demos/angular-app/yarn.lock b/demos/angular-app/yarn.lock
@@ -6744,17 +6744,17 @@ send@0.18.0:
     range-parser "~1.2.1"
     statuses "2.0.1"
 
-sequential-workflow-designer-angular@^0.35.3:
-  version "0.35.3"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.35.3.tgz#9b2a6de61234566795737b8824950046a62c216d"
-  integrity sha512-DMEpr2s8dB52jCcK9zUfMYYYvCycqmpCD7YUF4+XX/b8aiv7B++4xZu5tqap9aaDVDznSE8RINTBMNza3emUKw==
+sequential-workflow-designer-angular@^0.36.0:
+  version "0.36.0"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.36.0.tgz#61039bded475be409e82eb720e3899e95835aabb"
+  integrity sha512-qVO3usmb0Ms2OeKdz+7M4sPKIya5P2JpUMtoNVdVXqE+Kr3gTXqxqFIrBX70U70MvCpGmmkvBXyf8w5VQVmzww==
   dependencies:
     tslib "^2.3.0"
 
-sequential-workflow-designer@^0.35.3:
-  version "0.35.3"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.35.3.tgz#2d454600db1b5a6c81748977a45421c1f8ae6ab0"
-  integrity sha512-ZLy4JSKKqziGAw4SKKYKUcx56b9ztr0PbCtaTHOIkqPvFlZDoAl1WvG/dX6hD0nLGH9hYE3cZL0PJ7O4YQQ09g==
+sequential-workflow-designer@^0.36.0:
+  version "0.36.0"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.36.0.tgz#43e87d2e3890080dac5870342aa0ceda5ae43300"
+  integrity sha512-XZYkOC5+9iw0mDOR/D5IngfSyydfclMzZGrS/ZcQQOezchBGLVo8tYq34dxGphILafbU6ywb4Cj3tx1xZiZwoQ==
   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.35.3",
-		"sequential-workflow-designer-react": "^0.35.3"
+		"sequential-workflow-designer": "^0.36.0",
+		"sequential-workflow-designer-react": "^0.36.0"
 	},
 	"devDependencies": {
 		"@types/jest": "^29.2.5",

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.35.3",
-		"sequential-workflow-designer-svelte": "^0.35.3"
+		"sequential-workflow-designer": "^0.36.0",
+		"sequential-workflow-designer-svelte": "^0.36.0"
 	},
 	"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.35.3",
+	"version": "0.36.0",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",

diff --git a/designer/src/api/editor-renderer.ts b/designer/src/api/editor-renderer.ts
@@ -1,7 +1,7 @@
 import { DefinitionWalker, Step } from '../definition';
 import { SimpleEvent, race } from '../core';
-import { DefinitionChangedEvent, DesignerState } from '../designer-state';
-import { DefinitionChangeType } from '../designer-configuration';
+import { DesignerState } from '../designer-state';
+import { DefinitionChangedEvent, DefinitionChangeType } from '../designer-configuration';
 import { SelectedStepIdProvider } from './editor-api';
 
 export type EditorRendererHandler = (step: Step | null) => void;

diff --git a/designer/src/core/step-duplicator.spec.ts b/designer/src/core/step-duplicator.spec.ts
@@ -35,7 +35,7 @@ describe('StepDuplicator', () => {
 	it('duplicates correctly', () => {
 		const duplicator = new StepDuplicator(Uid.next, new DefinitionWalker());
 
-		const duplicatedIf = duplicator.duplicate(ifStep) as BranchedStep;
+		const duplicatedIf = duplicator.duplicate(ifStep).step as BranchedStep;
 
 		expect(duplicatedIf).not.toBe(ifStep);
 		expect(duplicatedIf.id).not.toBe(ifStep.id);

diff --git a/designer/src/core/step-duplicator.ts b/designer/src/core/step-duplicator.ts
@@ -1,20 +1,34 @@
 import { DefinitionWalker, Step } from '../definition';
-import { UidGenerator } from '../designer-configuration';
+import { DuplicatedStepId, UidGenerator } from '../designer-configuration';
 import { ObjectCloner } from './object-cloner';
 
+export interface StepDuplicatorResult {
+	step: Step;
+	duplicatedIds: DuplicatedStepId[];
+}
+
 export class StepDuplicator {
 	public constructor(
 		private readonly uidGenerator: UidGenerator,
 		private readonly definitionWalker: DefinitionWalker
 	) {}
 
-	public duplicate(step: Step): Step {
+	public duplicate(step: Step): StepDuplicatorResult {
 		const newStep = ObjectCloner.deepClone(step);
-		newStep.id = this.uidGenerator();
+		const duplicatedIds: DuplicatedStepId[] = [];
+
+		const newId = this.uidGenerator();
+		duplicatedIds.push([step.id, newId]);
+		newStep.id = newId;
 
 		this.definitionWalker.forEachChildren(newStep, s => {
-			s.id = this.uidGenerator();
+			const newId = this.uidGenerator();
+			duplicatedIds.push([s.id, newId]);
+			s.id = newId;
 		});
-		return newStep;
+		return {
+			step: newStep,
+			duplicatedIds
+		};
 	}
 }
diff --git a/designer/src/designer-configuration.ts b/designer/src/designer-configuration.ts
@@ -262,3 +262,12 @@ export enum DefinitionChangeType {
 	rootPropertyChanged,
 	rootReplaced
 }
+
+export type DuplicatedStepId = [sourceStepId: string, newStepId: string];
+
+export interface DefinitionChangedEvent<TDefinition extends Definition = Definition> {
+	definition: TDefinition;
+	changeType: DefinitionChangeType;
+	stepId: string | null;
+	duplicatedStepIds?: DuplicatedStepId[];
+}
diff --git a/designer/src/designer-state.ts b/designer/src/designer-state.ts
@@ -1,13 +1,10 @@
 import { SimpleEvent } from './core/simple-event';
 import { Vector } from './core/vector';
 import { Definition } from './definition';
-import { DefinitionChangeType } from './designer-configuration';
+import { DefinitionChangedEvent, DefinitionChangeType } from './designer-configuration';
 import { Viewport } from './designer-extension';
 
-export interface DefinitionChangedEvent {
-	changeType: DefinitionChangeType;
-	stepId: string | null;
-}
+export type DefinitionChangedEventDetails = Omit<DefinitionChangedEvent, 'definition' | 'changeType' | 'stepId'>;
 
 export class DesignerState {
 	public readonly onViewportChanged = new SimpleEvent<Viewport>();
@@ -63,8 +60,16 @@ export class DesignerState {
 		this.notifyDefinitionChanged(DefinitionChangeType.rootReplaced, null);
 	}
 
-	public notifyDefinitionChanged(changeType: DefinitionChangeType, stepId: string | null) {
-		this.onDefinitionChanged.forward({ changeType, stepId });
+	public notifyDefinitionChanged(changeType: DefinitionChangeType, stepId: string | null, details?: DefinitionChangedEventDetails) {
+		const event: DefinitionChangedEvent = {
+			definition: this.definition,
+			changeType,
+			stepId
+		};
+		if (details) {
+			Object.assign(event, details);
+		}
+		this.onDefinitionChanged.forward(event);
 	}
 
 	public notifyStepUnselectionBlocked(stepId: string | null) {

diff --git a/designer/src/designer.ts b/designer/src/designer.ts
@@ -1,7 +1,7 @@
 import { SimpleEvent } from './core/simple-event';
 import { isElementAttached } from './core/is-element-attached';
 import { Definition, DefinitionWalker, Sequence, Step, StepOrName } from './definition';
-import { DesignerConfiguration, UndoStack } from './designer-configuration';
+import { DefinitionChangedEvent, DesignerConfiguration, UndoStack } from './designer-configuration';
 import { DesignerContext } from './designer-context';
 import { DesignerView } from './designer-view';
 import { DesignerState } from './designer-state';
@@ -11,7 +11,6 @@ import { DesignerApi } from './api';
 import { HistoryController } from './history-controller';
 import { Viewport } from './designer-extension';
 import { race } from './core';
-import { StateModifier } from './modifier/state-modifier';
 
 export class Designer<TDefinition extends Definition = Definition> {
 	/**
@@ -48,7 +47,6 @@ export class Designer<TDefinition extends Definition = Definition> {
 		const designer = new Designer<TDef>(
 			view,
 			designerContext.state,
-			designerContext.stateModifier,
 			designerContext.definitionWalker,
 			designerContext.historyController,
 			designerApi
@@ -58,7 +56,7 @@ export class Designer<TDefinition extends Definition = Definition> {
 		race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged).subscribe(
 			([definition, selectedStepId]) => {
 				if (definition !== undefined) {
-					designer.onDefinitionChanged.forward(designerContext.state.definition as TDef);
+					designer.onDefinitionChanged.forward(definition as DefinitionChangedEvent<TDef>);
 				}
 				if (selectedStepId !== undefined) {
 					designer.onSelectedStepIdChanged.forward(designerContext.state.selectedStepId);
@@ -76,7 +74,6 @@ export class Designer<TDefinition extends Definition = Definition> {
 	private constructor(
 		private readonly view: DesignerView,
 		private readonly state: DesignerState,
-		private readonly stateModifier: StateModifier,
 		private readonly walker: DefinitionWalker,
 		private readonly historyController: HistoryController | undefined,
 		private readonly api: DesignerApi
@@ -90,7 +87,7 @@ export class Designer<TDefinition extends Definition = Definition> {
 	/**
 	 * @description Fires when the definition has changed.
 	 */
-	public readonly onDefinitionChanged = new SimpleEvent<TDefinition>();
+	public readonly onDefinitionChanged = new SimpleEvent<DefinitionChangedEvent<TDefinition>>();
 
 	/**
 	 * @description Fires when the viewport has changed.