diff --git a/CHANGELOG.md b/CHANGELOG.md index 95dbc93..b05e4e1 100644 --- a/CHANGELOG.md +++ b/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,7 +724,7 @@ const configuration = { toolbox: { groups: [ /* ... */ - ] + ], }, editors: { globalEditorProvider: () => { @@ -728,9 +732,9 @@ const configuration = { }, 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'; - } + }, // ... - } + }, }; ``` diff --git a/README.md b/README.md index 75c3c3a..3c2dc6f 100644 --- a/README.md +++ b/README.md @@ -106,10 +106,10 @@ Add the below code to your head section in HTML document. ```html ... - - - - + + + + ``` diff --git a/angular/designer/package.json b/angular/designer/package.json index 7d5cc10..ffd4272 100644 --- 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.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" diff --git a/demos/angular-app/package.json b/demos/angular-app/package.json index 713ffb6..8d963df 100644 --- 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.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" }, diff --git a/demos/angular-app/yarn.lock b/demos/angular-app/yarn.lock index 22ee73a..54a00e6 100644 --- 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.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" diff --git a/demos/react-app/package.json b/demos/react-app/package.json index 6911e56..f237a96 100644 --- 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.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", diff --git a/demos/svelte-app/package.json b/demos/svelte-app/package.json index 90ba803..0fd8d99 100644 --- 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.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", diff --git a/designer/package.json b/designer/package.json index b5aecf7..cd6706d 100644 --- 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.37.0", + "version": "0.37.1", "type": "module", "main": "./lib/esm/index.js", "types": "./lib/index.d.ts", diff --git a/designer/src/workspace/switch-step/switch-step-component-view.spec.ts b/designer/src/workspace/switch-step/switch-step-component-view.spec.ts index 0f78dbe..970e710 100644 --- a/designer/src/workspace/switch-step/switch-step-component-view.spec.ts +++ b/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); diff --git a/designer/src/workspace/switch-step/switch-step-component-view.ts b/designer/src/workspace/switch-step/switch-step-component-view.ts index aad6dd8..16d0f14 100644 --- a/designer/src/workspace/switch-step/switch-step-component-view.ts +++ b/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, 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]); diff --git a/designer/src/workspace/switch-step/switch-step-extension-configuration.ts b/designer/src/workspace/switch-step/switch-step-extension-configuration.ts index 97b63fc..e9a9618 100644 --- a/designer/src/workspace/switch-step/switch-step-extension-configuration.ts +++ b/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; } diff --git a/designer/src/workspace/switch-step/switch-step-extension.ts b/designer/src/workspace/switch-step/switch-step-extension.ts index 1d5768e..5109612 100644 --- a/designer/src/workspace/switch-step/switch-step-extension.ts +++ b/designer/src/workspace/switch-step/switch-step-extension.ts @@ -41,6 +41,7 @@ export class SwitchStepExtension implements StepExtension { public readonly createComponentView = createSwitchStepComponentViewFactory( this.configuration?.view ?? defaultViewConfiguration, - this.configuration?.branchNamesResolver + this.configuration?.branchNamesResolver, + this.configuration?.branchNameLabelResolver ); } diff --git a/examples/assets/lib.js b/examples/assets/lib.js index beeafd1..c3b4783 100644 --- a/examples/assets/lib.js +++ b/examples/assets/lib.js @@ -13,7 +13,7 @@ function embedStylesheet(url) { document.write(``); } -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`); diff --git a/react/package.json b/react/package.json index c35d8ac..0990aab 100644 --- a/react/package.json +++ b/react/package.json @@ -1,7 +1,7 @@ { "name": "sequential-workflow-designer-react", "description": "React wrapper for Sequential Workflow Designer component.", - "version": "0.37.0", + "version": "0.37.1", "type": "module", "main": "./lib/esm/index.js", "types": "./lib/index.d.ts", @@ -47,7 +47,7 @@ "peerDependencies": { "react": ">=18.2.0", "react-dom": ">=18.2.0", - "sequential-workflow-designer": "^0.37.0" + "sequential-workflow-designer": "^0.37.1" }, "devDependencies": { "@rollup/plugin-node-resolve": "^16.0.1", @@ -63,7 +63,7 @@ "prettier": "^3.2.5", "react": "^18.2.0", "react-dom": "^18.2.0", - "sequential-workflow-designer": "^0.37.0", + "sequential-workflow-designer": "^0.37.1", "rollup": "^4.40.0", "rollup-plugin-dts": "^6.2.1", "rollup-plugin-typescript2": "^0.36.0", diff --git a/svelte/package.json b/svelte/package.json index d3e2c6a..7c54d13 100644 --- a/svelte/package.json +++ b/svelte/package.json @@ -1,7 +1,7 @@ { "name": "sequential-workflow-designer-svelte", "description": "Svelte wrapper for Sequential Workflow Designer component.", - "version": "0.37.0", + "version": "0.37.1", "license": "MIT", "scripts": { "prepare": "cp ../LICENSE LICENSE", @@ -28,10 +28,10 @@ ], "peerDependencies": { "svelte": "^4.0.0", - "sequential-workflow-designer": "^0.37.0" + "sequential-workflow-designer": "^0.37.1" }, "devDependencies": { - "sequential-workflow-designer": "^0.37.0", + "sequential-workflow-designer": "^0.37.1", "@sveltejs/adapter-static": "^2.0.3", "@sveltejs/kit": "^1.20.4", "@sveltejs/package": "^2.0.0",