0.37.1.

CHANGELOG.md

@@ -1,3 +1,7 @@
+# 0.37.1
+
+This version adds a new property, `branchNameLabelResolver`, to the `SwitchStepExtensionConfiguration` interface. This property allows you to override the default labels of the switch step branches.
+
 # 0.37.0
 
 This version introduces a small internal refactor that allows exposing new events in the Designer class: `onRootComponentUpdated` and `onPreferencesChanged`.
@@ -67,8 +71,8 @@ const configuration = {
   steps: {
     canUnselectStep: (step, parentSequence) => {
       return areChangesSaved() === true;
-    }
-  }
+    },
+  },
   // ...
 };
 
@@ -113,9 +117,9 @@ import { StepsDesignerExtension } from 'sequential-workflow-designer';
 const extensions = [
   StepsDesignerExtension.create({
     switch: {
-      branchNamesResolver: step => Object.keys(step.branches)
-    }
-  })
+      branchNamesResolver: step => Object.keys(step.branches),
+    },
+  }),
 ];
 ```
 
@@ -264,7 +268,7 @@ const configuration = {
       }
     }
     return defaultValue;
-  }
+  },
   // ...
 };
 ```
@@ -344,9 +348,9 @@ const configuration = {
     // globalEditorProvider: () => {}, is not supported anymore, use `rootEditorProvider` instead.
     rootEditorProvider: (definition, rootContext, isReadonly) => {
       /* ... */
-    }
+    },
     // ...
-  }
+  },
 };
 ```
 
@@ -380,7 +384,7 @@ This version adds a possibility to disable keyboard shortcuts. Additionally you
 ```js
 // Disabled shortcuts
 const configuration = {
-  keyboard: false
+  keyboard: false,
   // ...
 };
 ```
@@ -418,9 +422,9 @@ This version introduces the `isAutoSelectDisabled` option. Now it's possible to
 ```js
 const configuration = {
   steps: {
-    isAutoSelectDisabled: true
+    isAutoSelectDisabled: true,
     // ...
-  }
+  },
 };
 ```
 
@@ -429,7 +433,7 @@ Additionally, this version introduces possibility to initialize the designer wit
 ```js
 const configuration = {
   undoStackSize: 10,
-  undoStack: myUndoStack
+  undoStack: myUndoStack,
   // ...
 };
 ```
@@ -509,7 +513,7 @@ This version introduces the context menu, providing a new and interactive way to
 
 ```ts
 const configuration = {
-  contextMenu: false
+  contextMenu: false,
   // ...
 };
 ```
@@ -521,8 +525,8 @@ const configuration = {
   steps: {
     isDuplicable: (step, parentSequence) => {
       return true;
-    }
-  }
+    },
+  },
   // ...
 };
 ```
@@ -564,9 +568,9 @@ This version introduces 4 new features:
 ```js
 const configuration = {
   toolbox: {
-    labelProvider: step => `** ${step.name} **`
+    labelProvider: step => `** ${step.name} **`,
     // ...
-  }
+  },
   // ...
 };
 ```
@@ -576,9 +580,9 @@ const configuration = {
 ```js
 const configuration = {
   toolbox: {
-    isCollapsed: true // or false
+    isCollapsed: true, // or false
     // ...
-  }
+  },
   // ...
 };
 
@@ -591,9 +595,9 @@ designer.setIsToolboxCollapsed(true);
 ```js
 const configuration = {
   editors: {
-    isCollapsed: true // or false
+    isCollapsed: true, // or false
     // ...
-  }
+  },
   // ...
 };
 
@@ -605,7 +609,7 @@ designer.setIsEditorCollapsed(true);
 
 ```js
 const configuration = {
-  uidGenerator: () => Math.random().toString()
+  uidGenerator: () => Math.random().toString(),
   // ...
 };
 ```
@@ -708,7 +712,7 @@ This version changes the main configuration. The "isHidden" properties are prohi
 const configuration = {
   toolbox: false,
   editors: false,
-  controlBar: false
+  controlBar: false,
   // ...
 };
 ```
@@ -720,17 +724,17 @@ const configuration = {
   toolbox: {
     groups: [
       /* ... */
-    ]
+    ],
   },
   editors: {
     globalEditorProvider: () => {
       /* ... */
     },
     stepEditorProvider: () => {
       /* ... */
-    }
+    },
   },
-  controlBar: true
+  controlBar: true,
   // ...
 };
 ```
@@ -872,7 +876,7 @@ Support undo and redo. This feature is disabled by default. To enable it add the
 
 ```js
 const config = {
-  undoStackSize: 10
+  undoStackSize: 10,
   // ...
 };
 ```
@@ -905,8 +909,8 @@ const config = {
       // ...
       context.notifyPropertiesChanged();
       // ...
-    }
-  }
+    },
+  },
 };
 ```
 
@@ -938,9 +942,9 @@ const config = {
     },
     canDeleteStep: (step, parentSequence) => {
       return step.name !== 'x';
-    }
+    },
     // ...
-  }
+  },
 };
 ```
 

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.37.0/css/designer.css" rel="stylesheet" />
-  <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.37.0/css/designer-light.css" rel="stylesheet" />
-  <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.37.0/css/designer-dark.css" rel="stylesheet" />
-  <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.37.0/dist/index.umd.js"></script>
+  <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.37.1/css/designer.css" rel="stylesheet" />
+  <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.37.1/css/designer-light.css" rel="stylesheet" />
+  <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.37.1/css/designer-dark.css" rel="stylesheet" />
+  <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.37.1/dist/index.umd.js"></script>
 </head>
 ```
 

angular/designer/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "sequential-workflow-designer-angular",
 	"description": "Angular wrapper for Sequential Workflow Designer component.",
-	"version": "0.37.0",
+	"version": "0.37.1",
 	"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.37.0"
+		"sequential-workflow-designer": "^0.37.1"
 	},
 	"dependencies": {
 		"tslib": "^2.3.0"

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

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.37.0:
-  version "0.37.0"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.37.0.tgz#4b2719e44c7dd7c61d7f4eb0c18357eb4af07dff"
-  integrity sha512-OPyAZWkB7EjILICdsRlyKoqrkRepTD4NRh4m/FxEW1r6hWF0zSw5pIySiR4Q28KzHaV99dLHptX0U7/g7lK8cQ==
+sequential-workflow-designer-angular@^0.37.1:
+  version "0.37.1"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.37.1.tgz#b0e012e2313c898b1917cb82deed50eca82713e6"
+  integrity sha512-KZq1FXII2k4IAn8enDynlsrBb52TNmy8pHPVK2qEbJI3F5144e8yEMhkktVt8YGT+FojD5Ho8XiFH4P1JOdAgA==
   dependencies:
     tslib "^2.3.0"
 
-sequential-workflow-designer@^0.37.0:
-  version "0.37.0"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.37.0.tgz#49229a6dd9771de56d1649796b8a2a954f2ba248"
-  integrity sha512-5YWGW+LNEstma95LcwsqXMC9kDhCbvjUslEnkUBZRnulHIBqlCESGjBhU9/VT1Vr4zg1906ZIAjhl84ghiuVHQ==
+sequential-workflow-designer@^0.37.1:
+  version "0.37.1"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.37.1.tgz#93d87c2e7fb21b75d5c5782960699989c0b24260"
+  integrity sha512-IdS31OpgnrqMIOIWhiKqMKJf5D+pPdVNVkPQh1OV4IuGcYnmhEDU38dk4H5QWA0IObKvLNgQG+tcys4y884sHQ==
   dependencies:
     sequential-workflow-model "^0.2.0"
 

demos/react-app/package.json

@@ -6,8 +6,8 @@
 	"dependencies": {
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"sequential-workflow-designer": "^0.37.0",
-		"sequential-workflow-designer-react": "^0.37.0"
+		"sequential-workflow-designer": "^0.37.1",
+		"sequential-workflow-designer-react": "^0.37.1"
 	},
 	"devDependencies": {
 		"@types/jest": "^29.2.5",

demos/svelte-app/package.json

@@ -16,8 +16,8 @@
 		"eslint": "eslint ./src --ext .ts"
 	},
 	"dependencies": {
-		"sequential-workflow-designer": "^0.37.0",
-		"sequential-workflow-designer-svelte": "^0.37.0"
+		"sequential-workflow-designer": "^0.37.1",
+		"sequential-workflow-designer-svelte": "^0.37.1"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-static": "^2.0.3",

designer/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "sequential-workflow-designer",
 	"description": "Customizable no-code component for building flow-based programming applications.",
-	"version": "0.37.0",
+	"version": "0.37.1",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",

designer/src/workspace/switch-step/switch-step-component-view.spec.ts

@@ -54,6 +54,7 @@ describe('SwitchStepComponentView', () => {
 				branchNameLabel: labelViewCfg,
 				nameLabel: labelViewCfg
 			},
+			undefined,
 			undefined
 		);
 		factory(parent, stepContext, viewContext);

designer/src/workspace/switch-step/switch-step-component-view.ts

@@ -7,7 +7,7 @@ import { InputView } from '../common-views/input-view';
 import { ClickDetails, StepComponentView, ClickCommand, SequenceComponent } from '../component';
 import { RegionView, StepComponentViewContext, StepComponentViewFactory, StepContext } from '../../designer-extension';
 import { SwitchStepComponentViewConfiguration } from './switch-step-component-view-configuration';
-import { BranchNamesResolver } from './switch-step-extension-configuration';
+import { BranchNameLabelResolver, BranchNamesResolver } from './switch-step-extension-configuration';
 
 const COMPONENT_CLASS_NAME = 'switch';
 
@@ -64,7 +64,11 @@ function createView(
 }
 
 export const createSwitchStepComponentViewFactory =
-	(cfg: SwitchStepComponentViewConfiguration, branchNameResolver: BranchNamesResolver | undefined): StepComponentViewFactory =>
+	(
+		cfg: SwitchStepComponentViewConfiguration,
+		branchNameResolver: BranchNamesResolver | undefined,
+		branchNameLabelResolver: BranchNameLabelResolver | undefined
+	): StepComponentViewFactory =>
 	(parent: SVGElement, stepContext: StepContext<BranchedStep>, viewContext: StepComponentViewContext): StepComponentView => {
 		return viewContext.createRegionComponentView(parent, COMPONENT_CLASS_NAME, (g, regionViewBuilder) => {
 			const step = stepContext.step;
@@ -95,9 +99,11 @@ export const createSwitchStepComponentViewFactory =
 			let maxBranchesHeight = 0;
 
 			branchNames.forEach((branchName, i) => {
+				const label = branchNameLabelResolver ? branchNameLabelResolver(branchName, step) : branchName;
+				const translatedLabel = viewContext.i18n(`stepComponent.${step.type}.branchName`, label);
+
 				const labelY = paddingTop + cfg.nameLabel.height + cfg.connectionHeight;
-				const translatedBranchName = viewContext.i18n(`stepComponent.${step.type}.branchName`, branchName);
-				const labelView = LabelView.create(g, labelY, cfg.branchNameLabel, translatedBranchName, 'secondary');
+				const labelView = LabelView.create(g, labelY, cfg.branchNameLabel, translatedLabel, 'secondary');
 
 				const component = viewContext.createSequenceComponent(g, step.branches[branchName]);
 

designer/src/workspace/switch-step/switch-step-extension-configuration.ts

@@ -1,8 +1,10 @@
-import { BranchedStep } from 'sequential-workflow-model';
+import { BranchedStep, Step } from 'sequential-workflow-model';
 import { SwitchStepComponentViewConfiguration } from './switch-step-component-view-configuration';
 
 export type BranchNamesResolver = (step: BranchedStep) => string[];
 
+export type BranchNameLabelResolver = (branchName: string, step: Step) => string;
+
 export interface SwitchStepExtensionConfiguration {
 	componentType?: string;
 	view?: SwitchStepComponentViewConfiguration;
@@ -13,4 +15,11 @@ export interface SwitchStepExtensionConfiguration {
 	 * You can use this to provide custom ordering or filtering of branch names.
 	 */
 	branchNamesResolver?: BranchNamesResolver;
+
+	/**
+	 * A function that takes a branch name and a step, and returns the label to display for that branch.
+	 * If not provided, the branch name itself will be used as the label.
+	 * Before rendering, the label is translated using the i18n callback.
+	 */
+	branchNameLabelResolver?: BranchNameLabelResolver;
 }

designer/src/workspace/switch-step/switch-step-extension.ts

@@ -41,6 +41,7 @@ export class SwitchStepExtension implements StepExtension<BranchedStep> {
 
 	public readonly createComponentView = createSwitchStepComponentViewFactory(
 		this.configuration?.view ?? defaultViewConfiguration,
-		this.configuration?.branchNamesResolver
+		this.configuration?.branchNamesResolver,
+		this.configuration?.branchNameLabelResolver
 	);
 }

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.37.0';
+const baseUrl = isTestEnv() ? '../designer' : '//cdn.jsdelivr.net/npm/sequential-workflow-designer@0.37.1';
 
 embedScript(`${baseUrl}/dist/index.umd.js`);
 embedStylesheet(`${baseUrl}/css/designer.css`);