nocode-js · b4rtaz · Oct 19, 2025 · Oct 18, 2025 · Oct 19, 2025
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,22 @@
+# 0.33.0
+
+This version introduces a new restriction callback: `canUnselectStep`. You can now prevent a step from being unselected based on your custom logic. When an unselection is blocked, the `onStepUnselectionBlocked` event is triggered.
+
+```ts
+const configuration = {
+  steps: {
+    canUnselectStep: (step, parentSequence) => {
+      return areChangesSaved() === true;
+    },
+  },
+  // ...
+};
+
+designer.onStepUnselectionBlocked((targetStepId) => { /* ... */ });
+```
+
+Please note that you should NOT use `window.confirm()` or other blocking functions inside the `canUnselectStep` callback, as this callback may be invoked multiple times during drag operations. To handle this correctly, implement your own UI logic to notify the user about any required actions before unselection can proceed. Please check [this example](https://nocode-js.github.io/sequential-workflow-designer/react-app/#save-required-editor).
+
 # 0.32.0
 
 This introduces internal changes related to the dragged component.

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.32.0/css/designer.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.32.0/css/designer-light.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.32.0/css/designer-dark.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.32.0/dist/index.umd.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.33.0/css/designer.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.33.0/css/designer-light.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.33.0/css/designer-dark.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.33.0/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.32.0",
+	"version": "0.33.0",
 	"author": {
 		"name": "NoCode JS",
 		"url": "https://nocode-js.com/"
@@ -15,7 +15,7 @@
 	"peerDependencies": {
 		"@angular/common": "12 - 19",
 		"@angular/core": "12 - 19",
-		"sequential-workflow-designer": "^0.32.0"
+		"sequential-workflow-designer": "^0.33.0"
 	},
 	"dependencies": {
 		"tslib": "^2.3.0"

diff --git a/angular/designer/src/designer.component.ts b/angular/designer/src/designer.component.ts
@@ -113,6 +113,8 @@ export class DesignerComponent implements AfterViewInit, OnChanges, OnDestroy {
 	@Output()
 	public readonly onSelectedStepIdChanged = new EventEmitter<string | null>();
 	@Output()
+	public readonly onStepUnselectionBlocked = new EventEmitter<string | null>();
+	@Output()
 	public readonly onIsToolboxCollapsedChanged = new EventEmitter<boolean>();
 	@Output()
 	public readonly onIsEditorCollapsedChanged = new EventEmitter<boolean>();
@@ -243,6 +245,9 @@ export class DesignerComponent implements AfterViewInit, OnChanges, OnDestroy {
 			designer.onSelectedStepIdChanged.subscribe(stepId => {
 				this.ngZone.run(() => this.onSelectedStepIdChanged.emit(stepId));
 			});
+			designer.onStepUnselectionBlocked.subscribe(targetStepId => {
+				this.ngZone.run(() => this.onStepUnselectionBlocked.emit(targetStepId));
+			});
 			designer.onIsToolboxCollapsedChanged.subscribe(isCollapsed => {
 				this.ngZone.run(() => this.onIsToolboxCollapsedChanged.emit(isCollapsed));
 			});

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.32.0",
-		"sequential-workflow-designer-angular": "^0.32.0",
+		"sequential-workflow-designer": "^0.33.0",
+		"sequential-workflow-designer-angular": "^0.33.0",
 		"tslib": "^2.3.0",
 		"zone.js": "~0.14.6"
 	},

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.32.0",
-		"sequential-workflow-designer-react": "^0.32.0"
+		"sequential-workflow-designer": "^0.33.0",
+		"sequential-workflow-designer-react": "^0.33.0"
 	},
 	"devDependencies": {
 		"@types/jest": "^29.2.5",

diff --git a/demos/react-app/src/App.tsx b/demos/react-app/src/App.tsx
@@ -1,34 +1,53 @@
 import { useState } from 'react';
 import { Playground } from './playground/Playground';
 import { NativeEditors } from './nativeEditors/NativeEditors';
+import { SaveRequiredEditor } from './saveRequiredEditor/SaveRequiredEditor';
 
-const pathKey = 'swdReactPath';
-type AppPath = 'playground' | 'nativeEditors';
+const TABS = [
+	{
+		label: '🍭 Playground',
+		path: 'playground'
+	},
+	{
+		label: '🔌 Native Editors',
+		path: 'native-editors'
+	},
+	{
+		label: '🔴 Save Required Editor',
+		path: 'save-required-editor'
+	}
+];
 
 export function App() {
-	const [path, setPath] = useState<AppPath>((localStorage[pathKey] as AppPath) || 'playground');
+	const [path, setPath] = useState<string>(window.location.hash?.substring(1) || 'playground');
 
-	function changePath(path: AppPath) {
-		localStorage[pathKey] = path;
+	function changePath(path: string) {
+		window.location.hash = path;
 		setPath(path);
 	}
 
 	return (
 		<>
-			<nav>
-				<h1>SWD for React Demo</h1>
-				<button onClick={() => changePath('playground')} className={path === 'playground' ? 'selected' : ''}>
-					Playground
-				</button>
-				<button onClick={() => changePath('nativeEditors')} className={path === 'nativeEditors' ? 'selected' : ''}>
-					Native editors
-				</button>
-				<a href="https://github.com/nocode-js/sequential-workflow-designer/tree/main/react" className="github">
-					GitHub
-				</a>
+			<nav className="title-bar">
+				<div className="column demo">
+					Select Demo:{' '}
+					<select defaultValue={path}>
+						{TABS.map(t => (
+							<option key={t.path} value={t.path} onClick={() => changePath(t.path)}>
+								{t.label}
+							</option>
+						))}
+					</select>
+				</div>
+				<div className="column link">
+					<a href="https://github.com/nocode-js/sequential-workflow-designer/tree/main/react" className="github">
+						SWD for React
+					</a>
+				</div>
 			</nav>
 			{path === 'playground' && <Playground />}
-			{path === 'nativeEditors' && <NativeEditors />}
+			{path === 'native-editors' && <NativeEditors />}
+			{path === 'save-required-editor' && <SaveRequiredEditor />}
 		</>
 	);
 }
diff --git a/demos/react-app/src/index.css b/demos/react-app/src/index.css
@@ -1,60 +1,69 @@
 body,
 h1 {
 	font:
-		13px/1.3em Arial,
+		14px/1.3em 'Open Sans',
+		Arial,
 		Verdana,
 		Serif;
 }
-body {
-	margin: 0;
-	padding: 0;
-}
 
-nav {
-	padding: 10px 5px 0;
-	background: #333;
-}
-nav h1 {
-	display: inline-block;
-	margin: 0 15px;
+html,
+body,
+#root {
+	margin: 0;
 	padding: 0;
-	color: #fff;
+	width: 100%;
+	height: 100%;
+	background: #fff;
 }
-nav button {
-	background: #999;
-	border: 0;
-	padding: 10px 15px;
-	margin: 0 5px;
-	cursor: pointer;
-	border-top-left-radius: 8px;
-	border-top-right-radius: 8px;
+#root {
+	display: flex;
+	flex-direction: column;
 }
-nav button.selected {
-	background: #f9f9f9;
+
+.title-bar {
+	display: flex;
+	min-height: 60px;
+	align-items: center;
+	width: 100%;
+	background: #fff;
+	box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.06);
 }
-nav button:hover {
-	opacity: 0.8;
+.title-bar .column {
+	padding: 10px;
 }
-nav .github {
-	margin: 0 5px;
-	color: #fff;
+.title-bar .column.link {
+	flex: 1;
+	text-align: right;
 }
-nav .github:hover {
+.title-bar .column.link a {
+	color: #222;
 	text-decoration: none;
 }
-@media only screen and (max-width: 700px) {
-	nav h1 {
-		display: none;
-	}
+.title-bar .column.link a:hover {
+	text-decoration: underline;
 }
 
+.designer {
+	flex: 1;
+	position: relative;
+}
 .sqd-designer-react {
-	width: 100vw;
-	height: 50vh;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	overflow: hidden;
 }
-.sqd-editor {
+.sqd-designer-react .sqd-editor {
 	padding: 10px;
+	line-height: 1.35em;
+}
+
+.sidebar {
+	flex: 1;
 }
-input:read-only {
-	opacity: 0.35;
+.sidebar textarea {
+	width: 100%;
 }
diff --git a/demos/react-app/src/index.tsx b/demos/react-app/src/index.tsx
@@ -5,8 +5,7 @@ import { App } from './App';
 import './index.css';
 
 import 'sequential-workflow-designer/css/designer.css';
-import 'sequential-workflow-designer/css/designer-light.css';
-import 'sequential-workflow-designer/css/designer-dark.css';
+import 'sequential-workflow-designer/css/designer-soft.css';
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(

diff --git a/demos/react-app/src/nativeEditors/NativeEditors.tsx b/demos/react-app/src/nativeEditors/NativeEditors.tsx
@@ -16,8 +16,15 @@ export const startDefinition: Definition = {
 };
 
 function rootEditorProvider(): HTMLElement {
+	const h2 = document.createElement('h2');
+	h2.innerText = '🔌 Native Editors Demo';
+
+	const p = document.createElement('p');
+	p.innerHTML = 'This demo demonstrates how to use natively implemented editors inside React application.';
+
 	const editor = document.createElement('div');
-	editor.innerHTML = 'Root editor';
+	editor.appendChild(h2);
+	editor.appendChild(p);
 	return editor;
 }
 
@@ -40,9 +47,10 @@ export function NativeEditors() {
 	const [definition, setDefinition] = useState(() => wrapDefinition(startDefinition));
 
 	return (
-		<>
+		<div className="designer">
 			<SequentialWorkflowDesigner
 				definition={definition}
+				theme="soft"
 				onDefinitionChange={setDefinition}
 				toolboxConfiguration={false}
 				stepsConfiguration={{}}
@@ -51,6 +59,6 @@ export function NativeEditors() {
 				rootEditor={rootEditorProvider}
 				stepEditor={stepEditorProvider}
 			/>
-		</>
+		</div>
 	);
 }