nocode-js · b4rtaz · Mar 20, 2025 · Mar 20, 2025 · Mar 20, 2025
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+# 0.28.0
+
+This update modifies the custom context menu in the pro version. The context menu items provider now retrieves the parent sequence of the selected workspace root sequence. If the root sequence is a folder sequence, the parent sequence is the folder sequence.
+
 # 0.27.4
 
 Support for React 19 has been added.

diff --git a/README.md b/README.md
@@ -104,10 +104,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.27.4/css/designer.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.27.4/css/designer-light.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.27.4/css/designer-dark.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.27.4/dist/index.umd.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.28.0/css/designer.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.28.0/css/designer-light.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.28.0/css/designer-dark.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.28.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.27.4",
+	"version": "0.28.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.27.4"
+		"sequential-workflow-designer": "^0.28.0"
 	},
 	"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": "^17.3.9",
 		"@angular/router": "^17.3.9",
 		"rxjs": "~7.8.0",
-		"sequential-workflow-designer": "^0.27.4",
-		"sequential-workflow-designer-angular": "^0.27.4",
+		"sequential-workflow-designer": "^0.28.0",
+		"sequential-workflow-designer-angular": "^0.28.0",
 		"tslib": "^2.3.0",
 		"zone.js": "~0.14.6"
 	},

diff --git a/demos/angular-app/yarn.lock b/demos/angular-app/yarn.lock
@@ -6744,17 +6744,17 @@ [email protected]:
     range-parser "~1.2.1"
     statuses "2.0.1"
 
-sequential-workflow-designer-angular@^0.27.4:
-  version "0.27.4"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.27.4.tgz#ef03a499b4db91429bf602d405bc137ee9f6d335"
-  integrity sha512-HUTb8dLTxcFyXcFAqAt++TjI2iwS0xPsVSF0t1Wi5z77e+yP2tlzpcq/NqPTvs1/C2udoMcq/pk9Tezln2GCfA==
+sequential-workflow-designer-angular@^0.28.0:
+  version "0.28.0"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.28.0.tgz#6748b69c5b626424e9d2f1a47686daa825ce7981"
+  integrity sha512-bSTGD3kh+7BCIPAMvDWipuUaoUv3G0RmdZiaQM7cE1f9P27HNQQueOr1nVRJmUbClE/2gW9+96n8VEpTtZ59xQ==
   dependencies:
     tslib "^2.3.0"
 
-sequential-workflow-designer@^0.27.4:
-  version "0.27.4"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.27.4.tgz#84e3d075229d1a3fe93f1913ab44212e66a8f0fb"
-  integrity sha512-OZr0IjbfTDfXidfe5hTPAGtisc4Q0idDoanAoBf+lKU2Dc7mzclp1EUrE5KP2IBbi8BofwGJIJdVwWQVOVwgkA==
+sequential-workflow-designer@^0.28.0:
+  version "0.28.0"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.28.0.tgz#b6fd72abf9ec00eab2b8633fe34f7f456b32dbf4"
+  integrity sha512-GEUERe8giyx/D9hsA+YG+LjescdLPBLs+yydHQ5UnGtXzl8784eUmPqqdGg/AnzsoEB5G+LIcgShoFMLVBYq+A==
   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.27.4",
-		"sequential-workflow-designer-react": "^0.27.4"
+		"sequential-workflow-designer": "^0.28.0",
+		"sequential-workflow-designer-react": "^0.28.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.27.4",
-		"sequential-workflow-designer-svelte": "^0.27.4"
+		"sequential-workflow-designer": "^0.28.0",
+		"sequential-workflow-designer-svelte": "^0.28.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.27.4",
+	"version": "0.28.0",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",

diff --git a/designer/src/api/designer-api.ts b/designer/src/api/designer-api.ts
@@ -11,7 +11,7 @@ import { I18n } from '../designer-configuration';
 
 export class DesignerApi {
 	public static create(context: DesignerContext): DesignerApi {
-		const workspace = new WorkspaceApi(context.state, context.workspaceController);
+		const workspace = new WorkspaceApi(context.state, context.definitionWalker, context.workspaceController);
 		const viewportController = context.services.viewportController.create(workspace);
 		const toolboxDataProvider = new ToolboxDataProvider(
 			context.componentContext.iconProvider,

diff --git a/designer/src/api/workspace-api.ts b/designer/src/api/workspace-api.ts
@@ -1,3 +1,4 @@
+import { DefinitionWalker, Sequence, StepChildrenType, StepWithParentSequence } from 'sequential-workflow-model';
 import { Vector } from '../core';
 import { Viewport } from '../designer-extension';
 import { DesignerState } from '../designer-state';
@@ -6,6 +7,7 @@ import { WorkspaceControllerWrapper } from '../workspace/workspace-controller';
 export class WorkspaceApi {
 	public constructor(
 		private readonly state: DesignerState,
+		private readonly definitionWalker: DefinitionWalker,
 		private readonly workspaceController: WorkspaceControllerWrapper
 	) {}
 
@@ -40,4 +42,28 @@ export class WorkspaceApi {
 	public updateCanvasSize() {
 		this.workspaceController.updateCanvasSize();
 	}
+
+	public getRootSequence(): WorkspaceRootSequence {
+		const stepId = this.state.tryGetLastStepIdFromFolderPath();
+		if (stepId) {
+			const parentStep = this.definitionWalker.getParentSequence(this.state.definition, stepId);
+			const children = this.definitionWalker.getChildren(parentStep.step);
+			if (!children || children.type !== StepChildrenType.sequence) {
+				throw new Error('Cannot find single sequence in folder step');
+			}
+			return {
+				sequence: children.items as Sequence,
+				parentStep
+			};
+		}
+		return {
+			sequence: this.state.definition.sequence,
+			parentStep: null
+		};
+	}
+}
+
+export interface WorkspaceRootSequence {
+	sequence: Sequence;
+	parentStep: StepWithParentSequence | null;
 }
diff --git a/designer/src/behaviors/click-behavior-resolver.ts b/designer/src/behaviors/click-behavior-resolver.ts
@@ -21,7 +21,7 @@ export class ClickBehaviorResolver {
 				return SelectStepBehavior.create(commandOrNull.component, forceMove, this.context);
 
 			case ClickCommandType.rerenderStep:
-				return PressingBehavior.create(element, new RerenderStepPressingBehaviorHandler(this.context));
+				return PressingBehavior.create(element, new RerenderStepPressingBehaviorHandler(commandOrNull, this.context));
 
 			case ClickCommandType.openFolder:
 				return PressingBehavior.create(element, new OpenFolderPressingBehaviorHandler(commandOrNull, this.context));

diff --git a/designer/src/behaviors/pressing-behaviors/rerender-step-pressing-behavior-handler.ts b/designer/src/behaviors/pressing-behaviors/rerender-step-pressing-behavior-handler.ts
@@ -1,10 +1,17 @@
 import { DesignerContext } from '../../designer-context';
+import { RerenderStepClickCommand } from '../../workspace';
 import { PressingBehaviorHandler } from './pressing-behavior';
 
 export class RerenderStepPressingBehaviorHandler implements PressingBehaviorHandler {
-	public constructor(private readonly designerContext: DesignerContext) {}
+	public constructor(
+		private readonly command: RerenderStepClickCommand,
+		private readonly designerContext: DesignerContext
+	) {}
 
 	public handle() {
+		if (this.command.beforeCallback) {
+			this.command.beforeCallback();
+		}
 		this.designerContext.workspaceController.updateRootComponent();
 	}
 }
diff --git a/designer/src/designer-extension.ts b/designer/src/designer-extension.ts
@@ -5,7 +5,7 @@ import { Behavior } from './behaviors';
 import { ComponentContext } from './component-context';
 import { Vector } from './core';
 import { CustomActionController } from './custom-action-controller';
-import { ComponentType, Sequence, Step } from './definition';
+import { ComponentType, Definition, Sequence, Step } from './definition';
 import { I18n } from './designer-configuration';
 import {
 	Badge,
@@ -195,7 +195,7 @@ export interface ContextMenuExtension {
 }
 
 export interface ContextMenuItemsProvider {
-	getItems(step: Step | null, sequence: Sequence): ContextMenuItem[];
+	getItems(step: Step | null, parentSequence: Sequence, definition: Definition): ContextMenuItem[];
 }
 
 export interface ContextMenuItem {

diff --git a/designer/src/workspace/component.ts b/designer/src/workspace/component.ts
@@ -68,6 +68,7 @@ export interface SelectStepClickCommand extends BaseClickCommand {
 export interface RerenderStepClickCommand extends BaseClickCommand {
 	type: ClickCommandType.rerenderStep;
 	step: Step;
+	beforeCallback?: () => void;
 }
 
 export interface OpenFolderClickCommand extends BaseClickCommand {

diff --git a/designer/src/workspace/context-menu/context-menu-items-builder.ts b/designer/src/workspace/context-menu/context-menu-items-builder.ts
@@ -1,5 +1,6 @@
 import { Sequence, Step } from '../../definition';
 import { ViewportApi } from '../../api/viewport-api';
+import { WorkspaceApi } from '../../api/workspace-api';
 import { StateModifier } from '../../modifier/state-modifier';
 import { ContextMenuItem, ContextMenuItemsProvider } from '../../designer-extension';
 import { DesignerState } from '../../designer-state';
@@ -9,6 +10,7 @@ import { I18n } from '../../designer-configuration';
 export class ContextMenuItemsBuilder {
 	public constructor(
 		private readonly viewportApi: ViewportApi,
+		private readonly workspaceApi: WorkspaceApi,
 		private readonly i18n: I18n,
 		private readonly stateModifier: StateModifier,
 		private readonly state: DesignerState,
@@ -70,8 +72,9 @@ export class ContextMenuItemsBuilder {
 					});
 				}
 			}
-		} else {
-			this.tryAppendCustomItems(items, null, this.state.definition.sequence);
+		} else if (!commandOrNull) {
+			const rootSequence = this.workspaceApi.getRootSequence();
+			this.tryAppendCustomItems(items, null, rootSequence.sequence);
 		}
 
 		items.push({
@@ -88,7 +91,7 @@ export class ContextMenuItemsBuilder {
 
 	private tryAppendCustomItems(items: ContextMenuItem[], step: Step | null, parentSequence: Sequence) {
 		if (this.customMenuItemsProvider) {
-			const customItems = this.customMenuItemsProvider.getItems(step, parentSequence);
+			const customItems = this.customMenuItemsProvider.getItems(step, parentSequence, this.state.definition);
 			for (const customItem of customItems) {
 				items.push(customItem);
 			}

diff --git a/designer/src/workspace/workspace-view.ts b/designer/src/workspace/workspace-view.ts
@@ -73,16 +73,11 @@ export class WorkspaceView {
 		private readonly context: ComponentContext
 	) {}
 
-	public render(sequence: Sequence, parentSequencePlaceIndicator: SequencePlaceIndicator | null) {
+	public render(sequence: Sequence, parentPlaceIndicator: SequencePlaceIndicator | null) {
 		if (this.rootComponent) {
 			this.foreground.removeChild(this.rootComponent.view.g);
 		}
-		this.rootComponent = this.context.services.rootComponent.create(
-			this.foreground,
-			sequence,
-			parentSequencePlaceIndicator,
-			this.context
-		);
+		this.rootComponent = this.context.services.rootComponent.create(this.foreground, sequence, parentPlaceIndicator, this.context);
 		this.refreshSize();
 	}
 

diff --git a/designer/src/workspace/workspace.ts b/designer/src/workspace/workspace.ts
@@ -1,6 +1,5 @@
 import { race } from '../core/simple-event-race';
 import { Vector } from '../core/vector';
-import { DefinitionWalker, Sequence, StepChildrenType } from '../definition';
 import { DesignerContext } from '../designer-context';
 import { ClickCommand, ClickDetails, Component, FoundPlaceholders } from './component';
 import { WorkspaceView } from './workspace-view';
@@ -10,13 +9,14 @@ import { ClickBehaviorResolver } from '../behaviors/click-behavior-resolver';
 import { BehaviorController } from '../behaviors/behavior-controller';
 import { SimpleEvent } from '../core/simple-event';
 import { ClickBehaviorWrapper, SequencePlaceIndicator, Viewport, WheelController } from '../designer-extension';
-import { DesignerApi } from '../api/designer-api';
 import { StepComponent } from './step-component';
 import { BadgesResultFactory } from './badges/badges-result-factory';
 import { Services } from '../services';
 import { findValidationBadgeIndex } from './badges/find-validation-badge-index';
 import { ContextMenuController } from './context-menu/context-menu-controller';
 import { ViewportApi } from '../api/viewport-api';
+import { DesignerApi } from '../api/designer-api';
+import { WorkspaceApi } from '../api/workspace-api';
 import { DefinitionChangeType } from '../designer-configuration';
 import { ContextMenuItemsBuilder } from './context-menu/context-menu-items-builder';
 import { PinchToZoomController } from './viewport/pinch-to-zoom-controller';
@@ -33,6 +33,7 @@ export class Workspace implements WorkspaceController {
 
 		const contextMenuItemsBuilder = new ContextMenuItemsBuilder(
 			api.viewport,
+			api.workspace,
 			api.i18n,
 			designerContext.stateModifier,
 			designerContext.state,
@@ -48,7 +49,6 @@ export class Workspace implements WorkspaceController {
 
 		const workspace = new Workspace(
 			view,
-			designerContext.definitionWalker,
 			designerContext.state,
 			designerContext.behaviorController,
 			wheelController,
@@ -57,6 +57,7 @@ export class Workspace implements WorkspaceController {
 			clickBehaviorResolver,
 			clickBehaviorWrapper,
 			api.viewport,
+			api.workspace,
 			designerContext.services
 		);
 		setTimeout(() => {
@@ -91,7 +92,6 @@ export class Workspace implements WorkspaceController {
 
 	private constructor(
 		private readonly view: WorkspaceView,
-		private readonly definitionWalker: DefinitionWalker,
 		private readonly state: DesignerState,
 		private readonly behaviorController: BehaviorController,
 		private readonly wheelController: WheelController,
@@ -100,34 +100,22 @@ export class Workspace implements WorkspaceController {
 		private readonly clickBehaviorResolver: ClickBehaviorResolver,
 		private readonly clickBehaviorWrapper: ClickBehaviorWrapper,
 		private readonly viewportApi: ViewportApi,
+		private readonly workspaceApi: WorkspaceApi,
 		private readonly services: Services
 	) {}
 
 	public updateRootComponent() {
 		this.selectedStepComponent = null;
 
-		let parentSequencePlaceIndicator: SequencePlaceIndicator | null;
-		let sequence: Sequence;
-
-		const stepId = this.state.tryGetLastStepIdFromFolderPath();
-		if (stepId) {
-			const parentSequence = this.definitionWalker.getParentSequence(this.state.definition, stepId);
-			const children = this.definitionWalker.getChildren(parentSequence.step);
-			if (!children || children.type !== StepChildrenType.sequence) {
-				throw new Error('Cannot find single sequence in folder step');
-			}
-			sequence = children.items as Sequence;
-
-			parentSequencePlaceIndicator = {
-				sequence: parentSequence.parentSequence,
-				index: parentSequence.index
-			};
-		} else {
-			sequence = this.state.definition.sequence;
-			parentSequencePlaceIndicator = null;
-		}
+		const rootSequence = this.workspaceApi.getRootSequence();
+		const parentPlaceIndicator: SequencePlaceIndicator | null = rootSequence.parentStep
+			? {
+					sequence: rootSequence.parentStep.parentSequence,
+					index: rootSequence.parentStep.index
+				}
+			: null;
 
-		this.view.render(sequence, parentSequencePlaceIndicator);
+		this.view.render(rootSequence.sequence, parentPlaceIndicator);
 		this.trySelectStepComponent(this.state.selectedStepId);
 		this.updateBadges();
 

diff --git a/examples/assets/lib.js b/examples/assets/lib.js
@@ -13,7 +13,7 @@ function embedStylesheet(url) {
 	document.write(`<link href="${url}" rel="stylesheet">`);
 }
 
-const baseUrl = isTestEnv() ? '../designer' : '//cdn.jsdelivr.net/npm/sequential-workflow-designer@0.27.4';
+const baseUrl = isTestEnv() ? '../designer' : '//cdn.jsdelivr.net/npm/sequential-workflow-designer@0.28.0';
 
 embedScript(`${baseUrl}/dist/index.umd.js`);
 embedStylesheet(`${baseUrl}/css/designer.css`);