sequential-workflow-designer 0.36.0 → 0.37.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +65 -64
  2. package/dist/index.umd.js +67 -39
  3. package/lib/cjs/index.cjs +67 -39
  4. package/lib/esm/index.js +67 -39
  5. package/lib/index.d.ts +37 -10
  6. package/package.json +1 -1
package/README.md CHANGED
@@ -4,16 +4,16 @@
4
4
 
5
5
  [![Build Status](https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Fb4rtaz%2Fsequential-workflow-designer%2Fbadge%3Fref%3Dmain&style=flat-square)](https://actions-badge.atrox.dev/b4rtaz/sequential-workflow-designer/goto?ref=main) [![License: MIT](https://img.shields.io/badge/license-MIT-green?style=flat-square)](/LICENSE) [![View this project on NPM](https://img.shields.io/npm/v/sequential-workflow-designer.svg?style=flat-square)](https://npmjs.org/package/sequential-workflow-designer)
6
6
 
7
- Sequential workflow designer with 0 external dependencies for web applications. It's written in pure TypeScript and uses SVG for rendering. This designer is not associated with any workflow engine. It's full generic. You may create any kind application by this, from graphical programming languages to workflow builders.
7
+ Sequential workflow designer with no external dependencies for web applications. It is written in pure TypeScript and uses SVG for rendering. This designer is not associated with any workflow engine, it is fully generic. You can use it to create any kind of application, from graphical programming languages to workflow builders.
8
8
 
9
9
  Features:
10
10
 
11
- * 0 external dependencies,
12
- * fully generic and configurable,
13
- * use light/dark/soft themes or customize easily,
14
- * compatible with modern browsers and mobile devices,
15
- * the definition is stored as JSON,
16
- * supports [Angular](./angular/designer/), [React](./react/) and [Svelte](./svelte/).
11
+ - No external dependencies
12
+ - Fully generic and configurable
13
+ - Supports light, dark, and soft themes, with easy customization
14
+ - Compatible with modern browsers and mobile devices
15
+ - Definitions are stored as JSON
16
+ - Supports [Angular](./angular/designer/), [React](./react/) and [Svelte](./svelte/).
17
17
 
18
18
  📝 Check the [documentation](https://nocode-js.com/docs/category/sequential-workflow-designer) for more details.
19
19
 
@@ -21,51 +21,51 @@ Features:
21
21
 
22
22
  ## 👀 Examples
23
23
 
24
- * [⏩ Live Testing](https://nocode-js.github.io/sequential-workflow-designer/examples/live-testing.html)
25
- * [💥 Triggers](https://nocode-js.github.io/sequential-workflow-designer/examples/triggers.html)
26
- * [❎ Fullscreen](https://nocode-js.github.io/sequential-workflow-designer/examples/fullscreen.html)
27
- * [🌅 Image Filter](https://nocode-js.github.io/sequential-workflow-designer/examples/image-filter.html)
28
- * [🔴 Particles](https://nocode-js.github.io/sequential-workflow-designer/examples/particles.html)
29
- * [🌍 Internationalization](https://nocode-js.github.io/sequential-workflow-designer/examples/i18n.html)
30
- * [⛅ Light Dark](https://nocode-js.github.io/sequential-workflow-designer/examples/light-dark.html)
31
- * [🤖 Code Generator](https://nocode-js.github.io/sequential-workflow-designer/examples/code-generator.html)
32
- * [🌻 Rendering Test](https://nocode-js.github.io/sequential-workflow-designer/examples/rendering-test.html)
33
- * [🚄 Stress Test](https://nocode-js.github.io/sequential-workflow-designer/examples/stress-test.html)
34
- * [🚪 Editing Restrictions](https://nocode-js.github.io/sequential-workflow-designer/examples/editing-restrictions.html)
35
- * [📜 Scrollable Page](https://nocode-js.github.io/sequential-workflow-designer/examples/scrollable-page.html)
36
- * [🌵 Multi-Conditional Switch](https://nocode-js.github.io/sequential-workflow-designer/examples/multi-conditional-switch.html)
37
- * [🌀 Auto-Select](https://nocode-js.github.io/sequential-workflow-designer/examples/auto-select.html)
38
- * [Angular Demo](https://nocode-js.github.io/sequential-workflow-designer/angular-app/)
39
- * [React Demo](https://nocode-js.github.io/sequential-workflow-designer/react-app/)
40
- * [Svelte Demo](https://nocode-js.github.io/sequential-workflow-designer/svelte-app/)
24
+ - [⏩ Live Testing](https://nocode-js.github.io/sequential-workflow-designer/examples/live-testing.html)
25
+ - [💥 Triggers](https://nocode-js.github.io/sequential-workflow-designer/examples/triggers.html)
26
+ - [❎ Fullscreen](https://nocode-js.github.io/sequential-workflow-designer/examples/fullscreen.html)
27
+ - [🌅 Image Filter](https://nocode-js.github.io/sequential-workflow-designer/examples/image-filter.html)
28
+ - [🔴 Particles](https://nocode-js.github.io/sequential-workflow-designer/examples/particles.html)
29
+ - [🌍 Internationalization](https://nocode-js.github.io/sequential-workflow-designer/examples/i18n.html)
30
+ - [⛅ Light Dark](https://nocode-js.github.io/sequential-workflow-designer/examples/light-dark.html)
31
+ - [🤖 Code Generator](https://nocode-js.github.io/sequential-workflow-designer/examples/code-generator.html)
32
+ - [🌻 Rendering Test](https://nocode-js.github.io/sequential-workflow-designer/examples/rendering-test.html)
33
+ - [🚄 Stress Test](https://nocode-js.github.io/sequential-workflow-designer/examples/stress-test.html)
34
+ - [🚪 Editing Restrictions](https://nocode-js.github.io/sequential-workflow-designer/examples/editing-restrictions.html)
35
+ - [📜 Scrollable Page](https://nocode-js.github.io/sequential-workflow-designer/examples/scrollable-page.html)
36
+ - [🌵 Multi-Conditional Switch](https://nocode-js.github.io/sequential-workflow-designer/examples/multi-conditional-switch.html)
37
+ - [🌀 Auto-Select](https://nocode-js.github.io/sequential-workflow-designer/examples/auto-select.html)
38
+ - [Angular Demo](https://nocode-js.github.io/sequential-workflow-designer/angular-app/)
39
+ - [React Demo](https://nocode-js.github.io/sequential-workflow-designer/react-app/)
40
+ - [Svelte Demo](https://nocode-js.github.io/sequential-workflow-designer/svelte-app/)
41
41
 
42
42
  Pro:
43
43
 
44
- * [🤩 Pro Components](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/pro-components.html)
45
- * [🍬 Custom Theme Flat](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/custom-theme-flat.html)
46
- * [🌹 Custom Step Types](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/custom-step-types.html)
47
- * [📺 Popup Editor](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/popup-editor.html)
48
- * [🔽 Collapsible Region](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/collapsible-region.html)
49
- * [💼 Copy Paste](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/copy-paste.html)
50
- * [👈 Goto](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/goto.html)
51
- * [📁 Folders](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/folders.html)
52
- * [⭕ Wheel Mode](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/wheel-mode.html)
53
- * [💠 Grid](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/grid.html)
54
- * [🐭 Minimal Root Component](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/minimal-root-component.html)
55
- * [🦁 External UI Components](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/external-ui-components.html)
56
- * [👋 Custom Dragged Component](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/custom-dragged-component.html)
57
- * [🔰 Badges](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/badges.html)
58
- * [🎩 Custom Viewport](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/custom-viewport.html)
59
- * [👊 Double Click](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/double-click.html)
60
- * [🛎 Clickable Placeholder](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/clickable-placeholder.html)
61
- * [📮 Conditional Placeholders](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/conditional-placeholders.html)
62
- * [React Pro Demo](https://nocode-js.com/examples/sequential-workflow-designer-pro/react-pro-app/build/index.html)
63
- * [Angular Pro Demo](https://nocode-js.com/examples/sequential-workflow-designer-pro/angular-pro-app/angular-app/index.html)
44
+ - [🤩 Pro Components](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/pro-components.html)
45
+ - [🍬 Custom Theme Flat](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/custom-theme-flat.html)
46
+ - [🌹 Custom Step Types](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/custom-step-types.html)
47
+ - [📺 Popup Editor](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/popup-editor.html)
48
+ - [🔽 Collapsible Region](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/collapsible-region.html)
49
+ - [💼 Copy Paste](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/copy-paste.html)
50
+ - [👈 Goto](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/goto.html)
51
+ - [📁 Folders](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/folders.html)
52
+ - [⭕ Wheel Mode](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/wheel-mode.html)
53
+ - [💠 Grid](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/grid.html)
54
+ - [🐭 Minimal Root Component](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/minimal-root-component.html)
55
+ - [🦁 External UI Components](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/external-ui-components.html)
56
+ - [👋 Custom Dragged Component](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/custom-dragged-component.html)
57
+ - [🔰 Badges](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/badges.html)
58
+ - [🎩 Custom Viewport](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/custom-viewport.html)
59
+ - [👊 Double Click](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/double-click.html)
60
+ - [🛎 Clickable Placeholder](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/clickable-placeholder.html)
61
+ - [📮 Conditional Placeholders](https://nocode-js.com/examples/sequential-workflow-designer-pro/webpack-pro-app/public/conditional-placeholders.html)
62
+ - [React Pro Demo](https://nocode-js.com/examples/sequential-workflow-designer-pro/react-pro-app/build/index.html)
63
+ - [Angular Pro Demo](https://nocode-js.com/examples/sequential-workflow-designer-pro/angular-pro-app/angular-app/index.html)
64
64
 
65
65
  ## 👩‍💻 Integrations
66
66
 
67
- * [⛽ Sequential Workflow Editor](https://github.com/nocode-js/sequential-workflow-editor) - Powerful step editor builder. Don't write step editors manually, build them.
68
- * [🚚 Sequential Workflow Machine](https://github.com/nocode-js/sequential-workflow-machine) - Workflow engine for browser and NodeJS apps, powered by the xstate library.
67
+ - [⛽ Sequential Workflow Editor](https://github.com/nocode-js/sequential-workflow-editor) - Powerful step editor builder. Don't write step editors manually, build them.
68
+ - [🚚 Sequential Workflow Machine](https://github.com/nocode-js/sequential-workflow-machine) - Workflow engine for browser and NodeJS apps, powered by the xstate library.
69
69
 
70
70
  ## 🚀 Installation
71
71
 
@@ -105,11 +105,12 @@ Add the below code to your head section in HTML document.
105
105
 
106
106
  ```html
107
107
  <head>
108
- ...
109
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.36.0/css/designer.css" rel="stylesheet">
110
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.36.0/css/designer-light.css" rel="stylesheet">
111
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.36.0/css/designer-dark.css" rel="stylesheet">
112
- <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.36.0/dist/index.umd.js"></script>
108
+ ...
109
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.37.1/css/designer.css" rel="stylesheet" />
110
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.37.1/css/designer-light.css" rel="stylesheet" />
111
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.37.1/css/designer-dark.css" rel="stylesheet" />
112
+ <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.37.1/dist/index.umd.js"></script>
113
+ </head>
113
114
  ```
114
115
 
115
116
  Call the designer by:
@@ -129,12 +130,12 @@ const placeholder = document.getElementById('placeholder');
129
130
 
130
131
  const definition = {
131
132
  properties: {
132
- 'myProperty': 'my-value',
133
+ myProperty: 'my-value',
133
134
  // root properties...
134
135
  },
135
136
  sequence: [
136
137
  // steps...
137
- ]
138
+ ],
138
139
  };
139
140
 
140
141
  const configuration = {
@@ -156,7 +157,7 @@ const configuration = {
156
157
  return step.properties['isDeletable'];
157
158
  },
158
159
  isDuplicable: (step, parentSequence) => {
159
- return true;
160
+ return true;
160
161
  },
161
162
  canInsertStep: (step, targetSequence, targetIndex) => {
162
163
  return targetSequence.length < 5;
@@ -166,7 +167,7 @@ const configuration = {
166
167
  },
167
168
  canDeleteStep: (step, parentSequence) => {
168
169
  return step.name !== 'x';
169
- }
170
+ },
170
171
  },
171
172
 
172
173
  validator: {
@@ -175,9 +176,9 @@ const configuration = {
175
176
  step: (step, parentSequence, definition) => {
176
177
  return /^[a-z]+$/.test(step.name);
177
178
  },
178
- root: (definition) => {
179
+ root: definition => {
179
180
  return definition.properties['memory'] > 256;
180
- }
181
+ },
181
182
  },
182
183
 
183
184
  toolbox: {
@@ -187,15 +188,15 @@ const configuration = {
187
188
  name: 'Files',
188
189
  steps: [
189
190
  // steps for the toolbox's group
190
- ]
191
+ ],
191
192
  },
192
193
  {
193
194
  name: 'Notification',
194
195
  steps: [
195
196
  // steps for the toolbox's group
196
- ]
197
- }
198
- ]
197
+ ],
198
+ },
199
+ ],
199
200
  },
200
201
 
201
202
  editors: {
@@ -209,7 +210,7 @@ const configuration = {
209
210
  const editor = document.createElement('div');
210
211
  // ...
211
212
  return editor;
212
- }
213
+ },
213
214
  },
214
215
 
215
216
  controlBar: true,
@@ -217,7 +218,7 @@ const configuration = {
217
218
  };
218
219
 
219
220
  const designer = Designer.create(placeholder, definition, configuration);
220
- designer.onDefinitionChanged.subscribe((event) => {
221
+ designer.onDefinitionChanged.subscribe(event => {
221
222
  // ...
222
223
  });
223
224
  ```
@@ -231,7 +232,7 @@ const configuration = {
231
232
  controlBar: false,
232
233
  contextMenu: false,
233
234
  // ...
234
- }
235
+ };
235
236
  ```
236
237
 
237
238
  ## 💡 License
package/dist/index.umd.js CHANGED
@@ -154,7 +154,7 @@
154
154
  count() {
155
155
  return this.listeners.length;
156
156
  }
157
- first() {
157
+ once() {
158
158
  return new Promise(resolve => {
159
159
  const handler = (value) => {
160
160
  this.unsubscribe(handler);
@@ -1519,7 +1519,7 @@
1519
1519
  exports.ClickCommandType = void 0;
1520
1520
  (function (ClickCommandType) {
1521
1521
  ClickCommandType[ClickCommandType["selectStep"] = 1] = "selectStep";
1522
- ClickCommandType[ClickCommandType["rerenderStep"] = 2] = "rerenderStep";
1522
+ ClickCommandType[ClickCommandType["changePreferences"] = 2] = "changePreferences";
1523
1523
  ClickCommandType[ClickCommandType["openFolder"] = 3] = "openFolder";
1524
1524
  ClickCommandType[ClickCommandType["triggerCustomAction"] = 4] = "triggerCustomAction";
1525
1525
  })(exports.ClickCommandType || (exports.ClickCommandType = {}));
@@ -1891,7 +1891,7 @@
1891
1891
  }
1892
1892
  };
1893
1893
  }
1894
- const createSwitchStepComponentViewFactory = (cfg, branchNameResolver) => (parent, stepContext, viewContext) => {
1894
+ const createSwitchStepComponentViewFactory = (cfg, branchNameResolver, branchNameLabelResolver) => (parent, stepContext, viewContext) => {
1895
1895
  return viewContext.createRegionComponentView(parent, COMPONENT_CLASS_NAME$1, (g, regionViewBuilder) => {
1896
1896
  const step = stepContext.step;
1897
1897
  const paddingTop = cfg.paddingTop1 + cfg.paddingTop2;
@@ -1914,9 +1914,10 @@
1914
1914
  let totalBranchesWidth = 0;
1915
1915
  let maxBranchesHeight = 0;
1916
1916
  branchNames.forEach((branchName, i) => {
1917
+ const label = branchNameLabelResolver ? branchNameLabelResolver(branchName, step) : branchName;
1918
+ const translatedLabel = viewContext.i18n(`stepComponent.${step.type}.branchName`, label);
1917
1919
  const labelY = paddingTop + cfg.nameLabel.height + cfg.connectionHeight;
1918
- const translatedBranchName = viewContext.i18n(`stepComponent.${step.type}.branchName`, branchName);
1919
- const labelView = LabelView.create(g, labelY, cfg.branchNameLabel, translatedBranchName, 'secondary');
1920
+ const labelView = LabelView.create(g, labelY, cfg.branchNameLabel, translatedLabel, 'secondary');
1920
1921
  const component = viewContext.createSequenceComponent(g, step.branches[branchName]);
1921
1922
  const halfOfWidestBranchElement = Math.max(labelView.width, cfg.minBranchWidth) / 2;
1922
1923
  const branchOffsetLeft = Math.max(halfOfWidestBranchElement - component.view.joinX, 0) + cfg.paddingX;
@@ -2594,10 +2595,10 @@
2594
2595
  return new SwitchStepExtension(configuration);
2595
2596
  }
2596
2597
  constructor(configuration) {
2597
- var _a, _b, _c, _d, _e;
2598
+ var _a, _b, _c, _d, _e, _f;
2598
2599
  this.configuration = configuration;
2599
2600
  this.componentType = (_b = (_a = this.configuration) === null || _a === void 0 ? void 0 : _a.componentType) !== null && _b !== void 0 ? _b : 'switch';
2600
- this.createComponentView = createSwitchStepComponentViewFactory((_d = (_c = this.configuration) === null || _c === void 0 ? void 0 : _c.view) !== null && _d !== void 0 ? _d : defaultViewConfiguration$2, (_e = this.configuration) === null || _e === void 0 ? void 0 : _e.branchNamesResolver);
2601
+ this.createComponentView = createSwitchStepComponentViewFactory((_d = (_c = this.configuration) === null || _c === void 0 ? void 0 : _c.view) !== null && _d !== void 0 ? _d : defaultViewConfiguration$2, (_e = this.configuration) === null || _e === void 0 ? void 0 : _e.branchNamesResolver, (_f = this.configuration) === null || _f === void 0 ? void 0 : _f.branchNameLabelResolver);
2601
2602
  }
2602
2603
  }
2603
2604
 
@@ -2736,7 +2737,12 @@
2736
2737
  createPlaceholderForGap: componentContext.services.placeholder.createForGap.bind(componentContext.services.placeholder),
2737
2738
  createPlaceholderForArea: componentContext.services.placeholder.createForArea.bind(componentContext.services.placeholder),
2738
2739
  getPreference: (key) => componentContext.preferenceStorage.getItem(preferenceKeyPrefix + key),
2739
- setPreference: (key, value) => componentContext.preferenceStorage.setItem(preferenceKeyPrefix + key, value)
2740
+ createPreferenceChange: (key, value) => {
2741
+ return {
2742
+ key: preferenceKeyPrefix + key,
2743
+ value
2744
+ };
2745
+ }
2740
2746
  };
2741
2747
  }
2742
2748
  }
@@ -3242,11 +3248,12 @@
3242
3248
  }
3243
3249
 
3244
3250
  class DesignerState {
3245
- constructor(definition, isReadonly, isToolboxCollapsed, isEditorCollapsed) {
3251
+ constructor(definition, isReadonly, isToolboxCollapsed, isEditorCollapsed, preferenceStorage) {
3246
3252
  this.definition = definition;
3247
3253
  this.isReadonly = isReadonly;
3248
3254
  this.isToolboxCollapsed = isToolboxCollapsed;
3249
3255
  this.isEditorCollapsed = isEditorCollapsed;
3256
+ this.preferenceStorage = preferenceStorage;
3250
3257
  this.onViewportChanged = new SimpleEvent();
3251
3258
  this.onSelectedStepIdChanged = new SimpleEvent();
3252
3259
  this.onStepUnselectionBlocked = new SimpleEvent();
@@ -3257,6 +3264,7 @@
3257
3264
  this.onDefinitionChanged = new SimpleEvent();
3258
3265
  this.onIsToolboxCollapsedChanged = new SimpleEvent();
3259
3266
  this.onIsEditorCollapsedChanged = new SimpleEvent();
3267
+ this.onPreferencesChanged = new SimpleEvent();
3260
3268
  this.viewport = {
3261
3269
  position: new Vector(0, 0),
3262
3270
  scale: 1
@@ -3335,6 +3343,15 @@
3335
3343
  this.onIsEditorCollapsedChanged.forward(isCollapsed);
3336
3344
  }
3337
3345
  }
3346
+ setPreferences(changes, stepId) {
3347
+ for (const change of changes) {
3348
+ this.preferenceStorage.setItem(change.key, change.value);
3349
+ }
3350
+ this.onPreferencesChanged.forward({ changes, stepId });
3351
+ }
3352
+ getPreference(key) {
3353
+ return this.preferenceStorage.getItem(key);
3354
+ }
3338
3355
  }
3339
3356
 
3340
3357
  class HistoryController {
@@ -3488,22 +3505,22 @@
3488
3505
  const isReadonly = Boolean(configuration.isReadonly);
3489
3506
  const isToolboxCollapsed = configuration.toolbox ? (_a = configuration.toolbox.isCollapsed) !== null && _a !== void 0 ? _a : layoutController.isMobile() : false;
3490
3507
  const isEditorCollapsed = configuration.editors ? (_b = configuration.editors.isCollapsed) !== null && _b !== void 0 ? _b : layoutController.isMobile() : false;
3508
+ const preferenceStorage = (_c = configuration.preferenceStorage) !== null && _c !== void 0 ? _c : new MemoryPreferenceStorage();
3491
3509
  const theme = configuration.theme || 'light';
3492
- const state = new DesignerState(definition, isReadonly, isToolboxCollapsed, isEditorCollapsed);
3510
+ const state = new DesignerState(definition, isReadonly, isToolboxCollapsed, isEditorCollapsed, preferenceStorage);
3493
3511
  const workspaceController = new WorkspaceControllerWrapper();
3494
3512
  const behaviorController = BehaviorController.create(configuration.shadowRoot);
3495
3513
  const stepExtensionResolver = StepExtensionResolver.create(services);
3496
3514
  const placeholderController = PlaceholderController.create(state, configuration.placeholder);
3497
- const definitionWalker = (_c = configuration.definitionWalker) !== null && _c !== void 0 ? _c : new DefinitionWalker();
3498
- const i18n = (_d = configuration.i18n) !== null && _d !== void 0 ? _d : ((_, defaultValue) => defaultValue);
3499
- const uidGenerator = (_e = configuration.uidGenerator) !== null && _e !== void 0 ? _e : Uid.next;
3515
+ const definitionWalker = (_d = configuration.definitionWalker) !== null && _d !== void 0 ? _d : new DefinitionWalker();
3516
+ const i18n = (_e = configuration.i18n) !== null && _e !== void 0 ? _e : ((_, defaultValue) => defaultValue);
3517
+ const uidGenerator = (_f = configuration.uidGenerator) !== null && _f !== void 0 ? _f : Uid.next;
3500
3518
  const stateModifier = StateModifier.create(definitionWalker, uidGenerator, state, configuration.steps);
3501
3519
  const customActionController = new CustomActionController(configuration, state, stateModifier);
3502
3520
  let historyController = undefined;
3503
3521
  if (configuration.undoStackSize) {
3504
3522
  historyController = HistoryController.create(configuration.undoStack, state, stateModifier, configuration);
3505
3523
  }
3506
- const preferenceStorage = (_f = configuration.preferenceStorage) !== null && _f !== void 0 ? _f : new MemoryPreferenceStorage();
3507
3524
  const componentContext = ComponentContext.create(configuration, state, stepExtensionResolver, placeholderController, definitionWalker, preferenceStorage, i18n, services);
3508
3525
  return new DesignerContext(theme, state, configuration, services, componentContext, definitionWalker, i18n, uidGenerator, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController);
3509
3526
  }
@@ -3777,16 +3794,13 @@
3777
3794
  }
3778
3795
  }
3779
3796
 
3780
- class RerenderStepPressingBehaviorHandler {
3797
+ class ChangePreferencesBehaviorHandler {
3781
3798
  constructor(command, designerContext) {
3782
3799
  this.command = command;
3783
3800
  this.designerContext = designerContext;
3784
3801
  }
3785
3802
  handle() {
3786
- if (this.command.beforeCallback) {
3787
- this.command.beforeCallback();
3788
- }
3789
- this.designerContext.workspaceController.updateRootComponent();
3803
+ this.designerContext.state.setPreferences(this.command.changes, this.command.step.id);
3790
3804
  }
3791
3805
  }
3792
3806
 
@@ -3822,8 +3836,8 @@
3822
3836
  switch (commandOrNull.type) {
3823
3837
  case exports.ClickCommandType.selectStep:
3824
3838
  return SelectStepBehavior.create(commandOrNull.component, forceMove, this.context);
3825
- case exports.ClickCommandType.rerenderStep:
3826
- return PressingBehavior.create(element, new RerenderStepPressingBehaviorHandler(commandOrNull, this.context));
3839
+ case exports.ClickCommandType.changePreferences:
3840
+ return PressingBehavior.create(element, new ChangePreferencesBehaviorHandler(commandOrNull, this.context));
3827
3841
  case exports.ClickCommandType.openFolder:
3828
3842
  return PressingBehavior.create(element, new OpenFolderPressingBehaviorHandler(commandOrNull, this.context));
3829
3843
  case exports.ClickCommandType.triggerCustomAction:
@@ -4134,6 +4148,7 @@
4134
4148
  const workspace = new Workspace(view, designerContext.state, designerContext.behaviorController, wheelController, pinchToZoomController, contextMenuController, clickBehaviorResolver, clickBehaviorWrapper, api.viewport, api.workspace, designerContext.services);
4135
4149
  designerContext.setWorkspaceController(workspace);
4136
4150
  designerContext.state.onViewportChanged.subscribe(workspace.onViewportChanged);
4151
+ designerContext.state.onPreferencesChanged.subscribe(workspace.onPreferencesChanged);
4137
4152
  race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged, designerContext.state.onFolderPathChanged).subscribe(r => {
4138
4153
  workspace.onStateChanged(r[0], r[1], r[2]);
4139
4154
  });
@@ -4156,11 +4171,25 @@
4156
4171
  this.viewportApi = viewportApi;
4157
4172
  this.workspaceApi = workspaceApi;
4158
4173
  this.services = services;
4159
- this.onRendered = new SimpleEvent();
4174
+ this.onRootComponentUpdated = new SimpleEvent();
4160
4175
  this.isValid = false;
4161
4176
  this.initTimeout = null;
4162
4177
  this.selectedStepComponent = null;
4163
4178
  this.validationErrorBadgeIndex = null;
4179
+ this.updateRootComponent = () => {
4180
+ this.selectedStepComponent = null;
4181
+ const rootSequence = this.workspaceApi.getRootSequence();
4182
+ const parentPlaceIndicator = rootSequence.parentStep
4183
+ ? {
4184
+ sequence: rootSequence.parentStep.parentSequence,
4185
+ index: rootSequence.parentStep.index
4186
+ }
4187
+ : null;
4188
+ this.view.render(rootSequence.sequence, parentPlaceIndicator);
4189
+ this.trySelectStepComponent(this.state.selectedStepId);
4190
+ this.updateBadges();
4191
+ this.onRootComponentUpdated.forward();
4192
+ };
4164
4193
  this.onClick = (position, target, buttonIndex, altKey) => {
4165
4194
  const isPrimaryButton = buttonIndex === 0;
4166
4195
  const isMiddleButton = buttonIndex === 1;
@@ -4187,6 +4216,9 @@
4187
4216
  this.onViewportChanged = (viewport) => {
4188
4217
  this.view.setPositionAndScale(viewport.position, viewport.scale);
4189
4218
  };
4219
+ this.onPreferencesChanged = () => {
4220
+ this.updateRootComponent();
4221
+ };
4190
4222
  }
4191
4223
  scheduleInit() {
4192
4224
  this.initTimeout = setTimeout(() => {
@@ -4195,20 +4227,6 @@
4195
4227
  this.viewportApi.resetViewport();
4196
4228
  });
4197
4229
  }
4198
- updateRootComponent() {
4199
- this.selectedStepComponent = null;
4200
- const rootSequence = this.workspaceApi.getRootSequence();
4201
- const parentPlaceIndicator = rootSequence.parentStep
4202
- ? {
4203
- sequence: rootSequence.parentStep.parentSequence,
4204
- index: rootSequence.parentStep.index
4205
- }
4206
- : null;
4207
- this.view.render(rootSequence.sequence, parentPlaceIndicator);
4208
- this.trySelectStepComponent(this.state.selectedStepId);
4209
- this.updateBadges();
4210
- this.onRendered.forward();
4211
- }
4212
4230
  updateBadges() {
4213
4231
  const result = BadgesResultFactory.create(this.services);
4214
4232
  this.getRootComponent().updateBadges(result);
@@ -5238,7 +5256,8 @@
5238
5256
  const designerApi = DesignerApi.create(designerContext);
5239
5257
  const view = DesignerView.create(placeholder, designerContext, designerApi);
5240
5258
  const designer = new Designer(view, designerContext.state, designerContext.definitionWalker, designerContext.historyController, designerApi);
5241
- view.workspace.onRendered.first().then(designer.onReady.forward);
5259
+ view.workspace.onRootComponentUpdated.subscribe(designer.onRootComponentUpdated.forward);
5260
+ view.workspace.onRootComponentUpdated.once().then(designer.onReady.forward);
5242
5261
  race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged).subscribe(([definition, selectedStepId]) => {
5243
5262
  if (definition !== undefined) {
5244
5263
  designer.onDefinitionChanged.forward(definition);
@@ -5251,6 +5270,7 @@
5251
5270
  designerContext.state.onIsToolboxCollapsedChanged.subscribe(designer.onIsToolboxCollapsedChanged.forward);
5252
5271
  designerContext.state.onIsEditorCollapsedChanged.subscribe(designer.onIsEditorCollapsedChanged.forward);
5253
5272
  designerContext.state.onStepUnselectionBlocked.subscribe(designer.onStepUnselectionBlocked.forward);
5273
+ designerContext.state.onPreferencesChanged.subscribe(designer.onPreferencesChanged.forward);
5254
5274
  return designer;
5255
5275
  }
5256
5276
  constructor(view, state, walker, historyController, api) {
@@ -5287,6 +5307,14 @@
5287
5307
  * @description Fires when the editor is collapsed or expanded.
5288
5308
  */
5289
5309
  this.onIsEditorCollapsedChanged = new SimpleEvent();
5310
+ /**
5311
+ * @description Fires when the root component and all its children are rerendered.
5312
+ */
5313
+ this.onRootComponentUpdated = new SimpleEvent();
5314
+ /**
5315
+ * @description Fires when any of the designer preferences has changed.
5316
+ */
5317
+ this.onPreferencesChanged = new SimpleEvent();
5290
5318
  }
5291
5319
  /**
5292
5320
  * @returns the current definition of the workflow.
@@ -5412,8 +5440,8 @@
5412
5440
  return __awaiter(this, void 0, void 0, function* () {
5413
5441
  this.getHistoryController().replaceDefinition(definition);
5414
5442
  yield Promise.all([
5415
- this.view.workspace.onRendered.first(),
5416
- this.onDefinitionChanged.first()
5443
+ this.view.workspace.onRootComponentUpdated.once(),
5444
+ this.onDefinitionChanged.once()
5417
5445
  ]);
5418
5446
  });
5419
5447
  }
package/lib/cjs/index.cjs CHANGED
@@ -152,7 +152,7 @@ class SimpleEvent {
152
152
  count() {
153
153
  return this.listeners.length;
154
154
  }
155
- first() {
155
+ once() {
156
156
  return new Promise(resolve => {
157
157
  const handler = (value) => {
158
158
  this.unsubscribe(handler);
@@ -1334,7 +1334,7 @@ class DefaultSequenceComponent {
1334
1334
  exports.ClickCommandType = void 0;
1335
1335
  (function (ClickCommandType) {
1336
1336
  ClickCommandType[ClickCommandType["selectStep"] = 1] = "selectStep";
1337
- ClickCommandType[ClickCommandType["rerenderStep"] = 2] = "rerenderStep";
1337
+ ClickCommandType[ClickCommandType["changePreferences"] = 2] = "changePreferences";
1338
1338
  ClickCommandType[ClickCommandType["openFolder"] = 3] = "openFolder";
1339
1339
  ClickCommandType[ClickCommandType["triggerCustomAction"] = 4] = "triggerCustomAction";
1340
1340
  })(exports.ClickCommandType || (exports.ClickCommandType = {}));
@@ -1706,7 +1706,7 @@ function createView(g, width, height, joinX, viewContext, sequenceComponents, la
1706
1706
  }
1707
1707
  };
1708
1708
  }
1709
- const createSwitchStepComponentViewFactory = (cfg, branchNameResolver) => (parent, stepContext, viewContext) => {
1709
+ const createSwitchStepComponentViewFactory = (cfg, branchNameResolver, branchNameLabelResolver) => (parent, stepContext, viewContext) => {
1710
1710
  return viewContext.createRegionComponentView(parent, COMPONENT_CLASS_NAME$1, (g, regionViewBuilder) => {
1711
1711
  const step = stepContext.step;
1712
1712
  const paddingTop = cfg.paddingTop1 + cfg.paddingTop2;
@@ -1729,9 +1729,10 @@ const createSwitchStepComponentViewFactory = (cfg, branchNameResolver) => (paren
1729
1729
  let totalBranchesWidth = 0;
1730
1730
  let maxBranchesHeight = 0;
1731
1731
  branchNames.forEach((branchName, i) => {
1732
+ const label = branchNameLabelResolver ? branchNameLabelResolver(branchName, step) : branchName;
1733
+ const translatedLabel = viewContext.i18n(`stepComponent.${step.type}.branchName`, label);
1732
1734
  const labelY = paddingTop + cfg.nameLabel.height + cfg.connectionHeight;
1733
- const translatedBranchName = viewContext.i18n(`stepComponent.${step.type}.branchName`, branchName);
1734
- const labelView = LabelView.create(g, labelY, cfg.branchNameLabel, translatedBranchName, 'secondary');
1735
+ const labelView = LabelView.create(g, labelY, cfg.branchNameLabel, translatedLabel, 'secondary');
1735
1736
  const component = viewContext.createSequenceComponent(g, step.branches[branchName]);
1736
1737
  const halfOfWidestBranchElement = Math.max(labelView.width, cfg.minBranchWidth) / 2;
1737
1738
  const branchOffsetLeft = Math.max(halfOfWidestBranchElement - component.view.joinX, 0) + cfg.paddingX;
@@ -2409,10 +2410,10 @@ class SwitchStepExtension {
2409
2410
  return new SwitchStepExtension(configuration);
2410
2411
  }
2411
2412
  constructor(configuration) {
2412
- var _a, _b, _c, _d, _e;
2413
+ var _a, _b, _c, _d, _e, _f;
2413
2414
  this.configuration = configuration;
2414
2415
  this.componentType = (_b = (_a = this.configuration) === null || _a === void 0 ? void 0 : _a.componentType) !== null && _b !== void 0 ? _b : 'switch';
2415
- this.createComponentView = createSwitchStepComponentViewFactory((_d = (_c = this.configuration) === null || _c === void 0 ? void 0 : _c.view) !== null && _d !== void 0 ? _d : defaultViewConfiguration$2, (_e = this.configuration) === null || _e === void 0 ? void 0 : _e.branchNamesResolver);
2416
+ this.createComponentView = createSwitchStepComponentViewFactory((_d = (_c = this.configuration) === null || _c === void 0 ? void 0 : _c.view) !== null && _d !== void 0 ? _d : defaultViewConfiguration$2, (_e = this.configuration) === null || _e === void 0 ? void 0 : _e.branchNamesResolver, (_f = this.configuration) === null || _f === void 0 ? void 0 : _f.branchNameLabelResolver);
2416
2417
  }
2417
2418
  }
2418
2419
 
@@ -2551,7 +2552,12 @@ class StepComponentViewContextFactory {
2551
2552
  createPlaceholderForGap: componentContext.services.placeholder.createForGap.bind(componentContext.services.placeholder),
2552
2553
  createPlaceholderForArea: componentContext.services.placeholder.createForArea.bind(componentContext.services.placeholder),
2553
2554
  getPreference: (key) => componentContext.preferenceStorage.getItem(preferenceKeyPrefix + key),
2554
- setPreference: (key, value) => componentContext.preferenceStorage.setItem(preferenceKeyPrefix + key, value)
2555
+ createPreferenceChange: (key, value) => {
2556
+ return {
2557
+ key: preferenceKeyPrefix + key,
2558
+ value
2559
+ };
2560
+ }
2555
2561
  };
2556
2562
  }
2557
2563
  }
@@ -3057,11 +3063,12 @@ class StateModifier {
3057
3063
  }
3058
3064
 
3059
3065
  class DesignerState {
3060
- constructor(definition, isReadonly, isToolboxCollapsed, isEditorCollapsed) {
3066
+ constructor(definition, isReadonly, isToolboxCollapsed, isEditorCollapsed, preferenceStorage) {
3061
3067
  this.definition = definition;
3062
3068
  this.isReadonly = isReadonly;
3063
3069
  this.isToolboxCollapsed = isToolboxCollapsed;
3064
3070
  this.isEditorCollapsed = isEditorCollapsed;
3071
+ this.preferenceStorage = preferenceStorage;
3065
3072
  this.onViewportChanged = new SimpleEvent();
3066
3073
  this.onSelectedStepIdChanged = new SimpleEvent();
3067
3074
  this.onStepUnselectionBlocked = new SimpleEvent();
@@ -3072,6 +3079,7 @@ class DesignerState {
3072
3079
  this.onDefinitionChanged = new SimpleEvent();
3073
3080
  this.onIsToolboxCollapsedChanged = new SimpleEvent();
3074
3081
  this.onIsEditorCollapsedChanged = new SimpleEvent();
3082
+ this.onPreferencesChanged = new SimpleEvent();
3075
3083
  this.viewport = {
3076
3084
  position: new Vector(0, 0),
3077
3085
  scale: 1
@@ -3150,6 +3158,15 @@ class DesignerState {
3150
3158
  this.onIsEditorCollapsedChanged.forward(isCollapsed);
3151
3159
  }
3152
3160
  }
3161
+ setPreferences(changes, stepId) {
3162
+ for (const change of changes) {
3163
+ this.preferenceStorage.setItem(change.key, change.value);
3164
+ }
3165
+ this.onPreferencesChanged.forward({ changes, stepId });
3166
+ }
3167
+ getPreference(key) {
3168
+ return this.preferenceStorage.getItem(key);
3169
+ }
3153
3170
  }
3154
3171
 
3155
3172
  class HistoryController {
@@ -3303,22 +3320,22 @@ class DesignerContext {
3303
3320
  const isReadonly = Boolean(configuration.isReadonly);
3304
3321
  const isToolboxCollapsed = configuration.toolbox ? (_a = configuration.toolbox.isCollapsed) !== null && _a !== void 0 ? _a : layoutController.isMobile() : false;
3305
3322
  const isEditorCollapsed = configuration.editors ? (_b = configuration.editors.isCollapsed) !== null && _b !== void 0 ? _b : layoutController.isMobile() : false;
3323
+ const preferenceStorage = (_c = configuration.preferenceStorage) !== null && _c !== void 0 ? _c : new MemoryPreferenceStorage();
3306
3324
  const theme = configuration.theme || 'light';
3307
- const state = new DesignerState(definition, isReadonly, isToolboxCollapsed, isEditorCollapsed);
3325
+ const state = new DesignerState(definition, isReadonly, isToolboxCollapsed, isEditorCollapsed, preferenceStorage);
3308
3326
  const workspaceController = new WorkspaceControllerWrapper();
3309
3327
  const behaviorController = BehaviorController.create(configuration.shadowRoot);
3310
3328
  const stepExtensionResolver = StepExtensionResolver.create(services);
3311
3329
  const placeholderController = PlaceholderController.create(state, configuration.placeholder);
3312
- const definitionWalker = (_c = configuration.definitionWalker) !== null && _c !== void 0 ? _c : new sequentialWorkflowModel.DefinitionWalker();
3313
- const i18n = (_d = configuration.i18n) !== null && _d !== void 0 ? _d : ((_, defaultValue) => defaultValue);
3314
- const uidGenerator = (_e = configuration.uidGenerator) !== null && _e !== void 0 ? _e : Uid.next;
3330
+ const definitionWalker = (_d = configuration.definitionWalker) !== null && _d !== void 0 ? _d : new sequentialWorkflowModel.DefinitionWalker();
3331
+ const i18n = (_e = configuration.i18n) !== null && _e !== void 0 ? _e : ((_, defaultValue) => defaultValue);
3332
+ const uidGenerator = (_f = configuration.uidGenerator) !== null && _f !== void 0 ? _f : Uid.next;
3315
3333
  const stateModifier = StateModifier.create(definitionWalker, uidGenerator, state, configuration.steps);
3316
3334
  const customActionController = new CustomActionController(configuration, state, stateModifier);
3317
3335
  let historyController = undefined;
3318
3336
  if (configuration.undoStackSize) {
3319
3337
  historyController = HistoryController.create(configuration.undoStack, state, stateModifier, configuration);
3320
3338
  }
3321
- const preferenceStorage = (_f = configuration.preferenceStorage) !== null && _f !== void 0 ? _f : new MemoryPreferenceStorage();
3322
3339
  const componentContext = ComponentContext.create(configuration, state, stepExtensionResolver, placeholderController, definitionWalker, preferenceStorage, i18n, services);
3323
3340
  return new DesignerContext(theme, state, configuration, services, componentContext, definitionWalker, i18n, uidGenerator, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController);
3324
3341
  }
@@ -3592,16 +3609,13 @@ class PressingBehavior {
3592
3609
  }
3593
3610
  }
3594
3611
 
3595
- class RerenderStepPressingBehaviorHandler {
3612
+ class ChangePreferencesBehaviorHandler {
3596
3613
  constructor(command, designerContext) {
3597
3614
  this.command = command;
3598
3615
  this.designerContext = designerContext;
3599
3616
  }
3600
3617
  handle() {
3601
- if (this.command.beforeCallback) {
3602
- this.command.beforeCallback();
3603
- }
3604
- this.designerContext.workspaceController.updateRootComponent();
3618
+ this.designerContext.state.setPreferences(this.command.changes, this.command.step.id);
3605
3619
  }
3606
3620
  }
3607
3621
 
@@ -3637,8 +3651,8 @@ class ClickBehaviorResolver {
3637
3651
  switch (commandOrNull.type) {
3638
3652
  case exports.ClickCommandType.selectStep:
3639
3653
  return SelectStepBehavior.create(commandOrNull.component, forceMove, this.context);
3640
- case exports.ClickCommandType.rerenderStep:
3641
- return PressingBehavior.create(element, new RerenderStepPressingBehaviorHandler(commandOrNull, this.context));
3654
+ case exports.ClickCommandType.changePreferences:
3655
+ return PressingBehavior.create(element, new ChangePreferencesBehaviorHandler(commandOrNull, this.context));
3642
3656
  case exports.ClickCommandType.openFolder:
3643
3657
  return PressingBehavior.create(element, new OpenFolderPressingBehaviorHandler(commandOrNull, this.context));
3644
3658
  case exports.ClickCommandType.triggerCustomAction:
@@ -3949,6 +3963,7 @@ class Workspace {
3949
3963
  const workspace = new Workspace(view, designerContext.state, designerContext.behaviorController, wheelController, pinchToZoomController, contextMenuController, clickBehaviorResolver, clickBehaviorWrapper, api.viewport, api.workspace, designerContext.services);
3950
3964
  designerContext.setWorkspaceController(workspace);
3951
3965
  designerContext.state.onViewportChanged.subscribe(workspace.onViewportChanged);
3966
+ designerContext.state.onPreferencesChanged.subscribe(workspace.onPreferencesChanged);
3952
3967
  race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged, designerContext.state.onFolderPathChanged).subscribe(r => {
3953
3968
  workspace.onStateChanged(r[0], r[1], r[2]);
3954
3969
  });
@@ -3971,11 +3986,25 @@ class Workspace {
3971
3986
  this.viewportApi = viewportApi;
3972
3987
  this.workspaceApi = workspaceApi;
3973
3988
  this.services = services;
3974
- this.onRendered = new SimpleEvent();
3989
+ this.onRootComponentUpdated = new SimpleEvent();
3975
3990
  this.isValid = false;
3976
3991
  this.initTimeout = null;
3977
3992
  this.selectedStepComponent = null;
3978
3993
  this.validationErrorBadgeIndex = null;
3994
+ this.updateRootComponent = () => {
3995
+ this.selectedStepComponent = null;
3996
+ const rootSequence = this.workspaceApi.getRootSequence();
3997
+ const parentPlaceIndicator = rootSequence.parentStep
3998
+ ? {
3999
+ sequence: rootSequence.parentStep.parentSequence,
4000
+ index: rootSequence.parentStep.index
4001
+ }
4002
+ : null;
4003
+ this.view.render(rootSequence.sequence, parentPlaceIndicator);
4004
+ this.trySelectStepComponent(this.state.selectedStepId);
4005
+ this.updateBadges();
4006
+ this.onRootComponentUpdated.forward();
4007
+ };
3979
4008
  this.onClick = (position, target, buttonIndex, altKey) => {
3980
4009
  const isPrimaryButton = buttonIndex === 0;
3981
4010
  const isMiddleButton = buttonIndex === 1;
@@ -4002,6 +4031,9 @@ class Workspace {
4002
4031
  this.onViewportChanged = (viewport) => {
4003
4032
  this.view.setPositionAndScale(viewport.position, viewport.scale);
4004
4033
  };
4034
+ this.onPreferencesChanged = () => {
4035
+ this.updateRootComponent();
4036
+ };
4005
4037
  }
4006
4038
  scheduleInit() {
4007
4039
  this.initTimeout = setTimeout(() => {
@@ -4010,20 +4042,6 @@ class Workspace {
4010
4042
  this.viewportApi.resetViewport();
4011
4043
  });
4012
4044
  }
4013
- updateRootComponent() {
4014
- this.selectedStepComponent = null;
4015
- const rootSequence = this.workspaceApi.getRootSequence();
4016
- const parentPlaceIndicator = rootSequence.parentStep
4017
- ? {
4018
- sequence: rootSequence.parentStep.parentSequence,
4019
- index: rootSequence.parentStep.index
4020
- }
4021
- : null;
4022
- this.view.render(rootSequence.sequence, parentPlaceIndicator);
4023
- this.trySelectStepComponent(this.state.selectedStepId);
4024
- this.updateBadges();
4025
- this.onRendered.forward();
4026
- }
4027
4045
  updateBadges() {
4028
4046
  const result = BadgesResultFactory.create(this.services);
4029
4047
  this.getRootComponent().updateBadges(result);
@@ -5053,7 +5071,8 @@ class Designer {
5053
5071
  const designerApi = DesignerApi.create(designerContext);
5054
5072
  const view = DesignerView.create(placeholder, designerContext, designerApi);
5055
5073
  const designer = new Designer(view, designerContext.state, designerContext.definitionWalker, designerContext.historyController, designerApi);
5056
- view.workspace.onRendered.first().then(designer.onReady.forward);
5074
+ view.workspace.onRootComponentUpdated.subscribe(designer.onRootComponentUpdated.forward);
5075
+ view.workspace.onRootComponentUpdated.once().then(designer.onReady.forward);
5057
5076
  race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged).subscribe(([definition, selectedStepId]) => {
5058
5077
  if (definition !== undefined) {
5059
5078
  designer.onDefinitionChanged.forward(definition);
@@ -5066,6 +5085,7 @@ class Designer {
5066
5085
  designerContext.state.onIsToolboxCollapsedChanged.subscribe(designer.onIsToolboxCollapsedChanged.forward);
5067
5086
  designerContext.state.onIsEditorCollapsedChanged.subscribe(designer.onIsEditorCollapsedChanged.forward);
5068
5087
  designerContext.state.onStepUnselectionBlocked.subscribe(designer.onStepUnselectionBlocked.forward);
5088
+ designerContext.state.onPreferencesChanged.subscribe(designer.onPreferencesChanged.forward);
5069
5089
  return designer;
5070
5090
  }
5071
5091
  constructor(view, state, walker, historyController, api) {
@@ -5102,6 +5122,14 @@ class Designer {
5102
5122
  * @description Fires when the editor is collapsed or expanded.
5103
5123
  */
5104
5124
  this.onIsEditorCollapsedChanged = new SimpleEvent();
5125
+ /**
5126
+ * @description Fires when the root component and all its children are rerendered.
5127
+ */
5128
+ this.onRootComponentUpdated = new SimpleEvent();
5129
+ /**
5130
+ * @description Fires when any of the designer preferences has changed.
5131
+ */
5132
+ this.onPreferencesChanged = new SimpleEvent();
5105
5133
  }
5106
5134
  /**
5107
5135
  * @returns the current definition of the workflow.
@@ -5227,8 +5255,8 @@ class Designer {
5227
5255
  return __awaiter(this, void 0, void 0, function* () {
5228
5256
  this.getHistoryController().replaceDefinition(definition);
5229
5257
  yield Promise.all([
5230
- this.view.workspace.onRendered.first(),
5231
- this.onDefinitionChanged.first()
5258
+ this.view.workspace.onRootComponentUpdated.once(),
5259
+ this.onDefinitionChanged.once()
5232
5260
  ]);
5233
5261
  });
5234
5262
  }
package/lib/esm/index.js CHANGED
@@ -151,7 +151,7 @@ class SimpleEvent {
151
151
  count() {
152
152
  return this.listeners.length;
153
153
  }
154
- first() {
154
+ once() {
155
155
  return new Promise(resolve => {
156
156
  const handler = (value) => {
157
157
  this.unsubscribe(handler);
@@ -1333,7 +1333,7 @@ class DefaultSequenceComponent {
1333
1333
  var ClickCommandType;
1334
1334
  (function (ClickCommandType) {
1335
1335
  ClickCommandType[ClickCommandType["selectStep"] = 1] = "selectStep";
1336
- ClickCommandType[ClickCommandType["rerenderStep"] = 2] = "rerenderStep";
1336
+ ClickCommandType[ClickCommandType["changePreferences"] = 2] = "changePreferences";
1337
1337
  ClickCommandType[ClickCommandType["openFolder"] = 3] = "openFolder";
1338
1338
  ClickCommandType[ClickCommandType["triggerCustomAction"] = 4] = "triggerCustomAction";
1339
1339
  })(ClickCommandType || (ClickCommandType = {}));
@@ -1705,7 +1705,7 @@ function createView(g, width, height, joinX, viewContext, sequenceComponents, la
1705
1705
  }
1706
1706
  };
1707
1707
  }
1708
- const createSwitchStepComponentViewFactory = (cfg, branchNameResolver) => (parent, stepContext, viewContext) => {
1708
+ const createSwitchStepComponentViewFactory = (cfg, branchNameResolver, branchNameLabelResolver) => (parent, stepContext, viewContext) => {
1709
1709
  return viewContext.createRegionComponentView(parent, COMPONENT_CLASS_NAME$1, (g, regionViewBuilder) => {
1710
1710
  const step = stepContext.step;
1711
1711
  const paddingTop = cfg.paddingTop1 + cfg.paddingTop2;
@@ -1728,9 +1728,10 @@ const createSwitchStepComponentViewFactory = (cfg, branchNameResolver) => (paren
1728
1728
  let totalBranchesWidth = 0;
1729
1729
  let maxBranchesHeight = 0;
1730
1730
  branchNames.forEach((branchName, i) => {
1731
+ const label = branchNameLabelResolver ? branchNameLabelResolver(branchName, step) : branchName;
1732
+ const translatedLabel = viewContext.i18n(`stepComponent.${step.type}.branchName`, label);
1731
1733
  const labelY = paddingTop + cfg.nameLabel.height + cfg.connectionHeight;
1732
- const translatedBranchName = viewContext.i18n(`stepComponent.${step.type}.branchName`, branchName);
1733
- const labelView = LabelView.create(g, labelY, cfg.branchNameLabel, translatedBranchName, 'secondary');
1734
+ const labelView = LabelView.create(g, labelY, cfg.branchNameLabel, translatedLabel, 'secondary');
1734
1735
  const component = viewContext.createSequenceComponent(g, step.branches[branchName]);
1735
1736
  const halfOfWidestBranchElement = Math.max(labelView.width, cfg.minBranchWidth) / 2;
1736
1737
  const branchOffsetLeft = Math.max(halfOfWidestBranchElement - component.view.joinX, 0) + cfg.paddingX;
@@ -2408,10 +2409,10 @@ class SwitchStepExtension {
2408
2409
  return new SwitchStepExtension(configuration);
2409
2410
  }
2410
2411
  constructor(configuration) {
2411
- var _a, _b, _c, _d, _e;
2412
+ var _a, _b, _c, _d, _e, _f;
2412
2413
  this.configuration = configuration;
2413
2414
  this.componentType = (_b = (_a = this.configuration) === null || _a === void 0 ? void 0 : _a.componentType) !== null && _b !== void 0 ? _b : 'switch';
2414
- this.createComponentView = createSwitchStepComponentViewFactory((_d = (_c = this.configuration) === null || _c === void 0 ? void 0 : _c.view) !== null && _d !== void 0 ? _d : defaultViewConfiguration$2, (_e = this.configuration) === null || _e === void 0 ? void 0 : _e.branchNamesResolver);
2415
+ this.createComponentView = createSwitchStepComponentViewFactory((_d = (_c = this.configuration) === null || _c === void 0 ? void 0 : _c.view) !== null && _d !== void 0 ? _d : defaultViewConfiguration$2, (_e = this.configuration) === null || _e === void 0 ? void 0 : _e.branchNamesResolver, (_f = this.configuration) === null || _f === void 0 ? void 0 : _f.branchNameLabelResolver);
2415
2416
  }
2416
2417
  }
2417
2418
 
@@ -2550,7 +2551,12 @@ class StepComponentViewContextFactory {
2550
2551
  createPlaceholderForGap: componentContext.services.placeholder.createForGap.bind(componentContext.services.placeholder),
2551
2552
  createPlaceholderForArea: componentContext.services.placeholder.createForArea.bind(componentContext.services.placeholder),
2552
2553
  getPreference: (key) => componentContext.preferenceStorage.getItem(preferenceKeyPrefix + key),
2553
- setPreference: (key, value) => componentContext.preferenceStorage.setItem(preferenceKeyPrefix + key, value)
2554
+ createPreferenceChange: (key, value) => {
2555
+ return {
2556
+ key: preferenceKeyPrefix + key,
2557
+ value
2558
+ };
2559
+ }
2554
2560
  };
2555
2561
  }
2556
2562
  }
@@ -3056,11 +3062,12 @@ class StateModifier {
3056
3062
  }
3057
3063
 
3058
3064
  class DesignerState {
3059
- constructor(definition, isReadonly, isToolboxCollapsed, isEditorCollapsed) {
3065
+ constructor(definition, isReadonly, isToolboxCollapsed, isEditorCollapsed, preferenceStorage) {
3060
3066
  this.definition = definition;
3061
3067
  this.isReadonly = isReadonly;
3062
3068
  this.isToolboxCollapsed = isToolboxCollapsed;
3063
3069
  this.isEditorCollapsed = isEditorCollapsed;
3070
+ this.preferenceStorage = preferenceStorage;
3064
3071
  this.onViewportChanged = new SimpleEvent();
3065
3072
  this.onSelectedStepIdChanged = new SimpleEvent();
3066
3073
  this.onStepUnselectionBlocked = new SimpleEvent();
@@ -3071,6 +3078,7 @@ class DesignerState {
3071
3078
  this.onDefinitionChanged = new SimpleEvent();
3072
3079
  this.onIsToolboxCollapsedChanged = new SimpleEvent();
3073
3080
  this.onIsEditorCollapsedChanged = new SimpleEvent();
3081
+ this.onPreferencesChanged = new SimpleEvent();
3074
3082
  this.viewport = {
3075
3083
  position: new Vector(0, 0),
3076
3084
  scale: 1
@@ -3149,6 +3157,15 @@ class DesignerState {
3149
3157
  this.onIsEditorCollapsedChanged.forward(isCollapsed);
3150
3158
  }
3151
3159
  }
3160
+ setPreferences(changes, stepId) {
3161
+ for (const change of changes) {
3162
+ this.preferenceStorage.setItem(change.key, change.value);
3163
+ }
3164
+ this.onPreferencesChanged.forward({ changes, stepId });
3165
+ }
3166
+ getPreference(key) {
3167
+ return this.preferenceStorage.getItem(key);
3168
+ }
3152
3169
  }
3153
3170
 
3154
3171
  class HistoryController {
@@ -3302,22 +3319,22 @@ class DesignerContext {
3302
3319
  const isReadonly = Boolean(configuration.isReadonly);
3303
3320
  const isToolboxCollapsed = configuration.toolbox ? (_a = configuration.toolbox.isCollapsed) !== null && _a !== void 0 ? _a : layoutController.isMobile() : false;
3304
3321
  const isEditorCollapsed = configuration.editors ? (_b = configuration.editors.isCollapsed) !== null && _b !== void 0 ? _b : layoutController.isMobile() : false;
3322
+ const preferenceStorage = (_c = configuration.preferenceStorage) !== null && _c !== void 0 ? _c : new MemoryPreferenceStorage();
3305
3323
  const theme = configuration.theme || 'light';
3306
- const state = new DesignerState(definition, isReadonly, isToolboxCollapsed, isEditorCollapsed);
3324
+ const state = new DesignerState(definition, isReadonly, isToolboxCollapsed, isEditorCollapsed, preferenceStorage);
3307
3325
  const workspaceController = new WorkspaceControllerWrapper();
3308
3326
  const behaviorController = BehaviorController.create(configuration.shadowRoot);
3309
3327
  const stepExtensionResolver = StepExtensionResolver.create(services);
3310
3328
  const placeholderController = PlaceholderController.create(state, configuration.placeholder);
3311
- const definitionWalker = (_c = configuration.definitionWalker) !== null && _c !== void 0 ? _c : new DefinitionWalker();
3312
- const i18n = (_d = configuration.i18n) !== null && _d !== void 0 ? _d : ((_, defaultValue) => defaultValue);
3313
- const uidGenerator = (_e = configuration.uidGenerator) !== null && _e !== void 0 ? _e : Uid.next;
3329
+ const definitionWalker = (_d = configuration.definitionWalker) !== null && _d !== void 0 ? _d : new DefinitionWalker();
3330
+ const i18n = (_e = configuration.i18n) !== null && _e !== void 0 ? _e : ((_, defaultValue) => defaultValue);
3331
+ const uidGenerator = (_f = configuration.uidGenerator) !== null && _f !== void 0 ? _f : Uid.next;
3314
3332
  const stateModifier = StateModifier.create(definitionWalker, uidGenerator, state, configuration.steps);
3315
3333
  const customActionController = new CustomActionController(configuration, state, stateModifier);
3316
3334
  let historyController = undefined;
3317
3335
  if (configuration.undoStackSize) {
3318
3336
  historyController = HistoryController.create(configuration.undoStack, state, stateModifier, configuration);
3319
3337
  }
3320
- const preferenceStorage = (_f = configuration.preferenceStorage) !== null && _f !== void 0 ? _f : new MemoryPreferenceStorage();
3321
3338
  const componentContext = ComponentContext.create(configuration, state, stepExtensionResolver, placeholderController, definitionWalker, preferenceStorage, i18n, services);
3322
3339
  return new DesignerContext(theme, state, configuration, services, componentContext, definitionWalker, i18n, uidGenerator, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController);
3323
3340
  }
@@ -3591,16 +3608,13 @@ class PressingBehavior {
3591
3608
  }
3592
3609
  }
3593
3610
 
3594
- class RerenderStepPressingBehaviorHandler {
3611
+ class ChangePreferencesBehaviorHandler {
3595
3612
  constructor(command, designerContext) {
3596
3613
  this.command = command;
3597
3614
  this.designerContext = designerContext;
3598
3615
  }
3599
3616
  handle() {
3600
- if (this.command.beforeCallback) {
3601
- this.command.beforeCallback();
3602
- }
3603
- this.designerContext.workspaceController.updateRootComponent();
3617
+ this.designerContext.state.setPreferences(this.command.changes, this.command.step.id);
3604
3618
  }
3605
3619
  }
3606
3620
 
@@ -3636,8 +3650,8 @@ class ClickBehaviorResolver {
3636
3650
  switch (commandOrNull.type) {
3637
3651
  case ClickCommandType.selectStep:
3638
3652
  return SelectStepBehavior.create(commandOrNull.component, forceMove, this.context);
3639
- case ClickCommandType.rerenderStep:
3640
- return PressingBehavior.create(element, new RerenderStepPressingBehaviorHandler(commandOrNull, this.context));
3653
+ case ClickCommandType.changePreferences:
3654
+ return PressingBehavior.create(element, new ChangePreferencesBehaviorHandler(commandOrNull, this.context));
3641
3655
  case ClickCommandType.openFolder:
3642
3656
  return PressingBehavior.create(element, new OpenFolderPressingBehaviorHandler(commandOrNull, this.context));
3643
3657
  case ClickCommandType.triggerCustomAction:
@@ -3948,6 +3962,7 @@ class Workspace {
3948
3962
  const workspace = new Workspace(view, designerContext.state, designerContext.behaviorController, wheelController, pinchToZoomController, contextMenuController, clickBehaviorResolver, clickBehaviorWrapper, api.viewport, api.workspace, designerContext.services);
3949
3963
  designerContext.setWorkspaceController(workspace);
3950
3964
  designerContext.state.onViewportChanged.subscribe(workspace.onViewportChanged);
3965
+ designerContext.state.onPreferencesChanged.subscribe(workspace.onPreferencesChanged);
3951
3966
  race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged, designerContext.state.onFolderPathChanged).subscribe(r => {
3952
3967
  workspace.onStateChanged(r[0], r[1], r[2]);
3953
3968
  });
@@ -3970,11 +3985,25 @@ class Workspace {
3970
3985
  this.viewportApi = viewportApi;
3971
3986
  this.workspaceApi = workspaceApi;
3972
3987
  this.services = services;
3973
- this.onRendered = new SimpleEvent();
3988
+ this.onRootComponentUpdated = new SimpleEvent();
3974
3989
  this.isValid = false;
3975
3990
  this.initTimeout = null;
3976
3991
  this.selectedStepComponent = null;
3977
3992
  this.validationErrorBadgeIndex = null;
3993
+ this.updateRootComponent = () => {
3994
+ this.selectedStepComponent = null;
3995
+ const rootSequence = this.workspaceApi.getRootSequence();
3996
+ const parentPlaceIndicator = rootSequence.parentStep
3997
+ ? {
3998
+ sequence: rootSequence.parentStep.parentSequence,
3999
+ index: rootSequence.parentStep.index
4000
+ }
4001
+ : null;
4002
+ this.view.render(rootSequence.sequence, parentPlaceIndicator);
4003
+ this.trySelectStepComponent(this.state.selectedStepId);
4004
+ this.updateBadges();
4005
+ this.onRootComponentUpdated.forward();
4006
+ };
3978
4007
  this.onClick = (position, target, buttonIndex, altKey) => {
3979
4008
  const isPrimaryButton = buttonIndex === 0;
3980
4009
  const isMiddleButton = buttonIndex === 1;
@@ -4001,6 +4030,9 @@ class Workspace {
4001
4030
  this.onViewportChanged = (viewport) => {
4002
4031
  this.view.setPositionAndScale(viewport.position, viewport.scale);
4003
4032
  };
4033
+ this.onPreferencesChanged = () => {
4034
+ this.updateRootComponent();
4035
+ };
4004
4036
  }
4005
4037
  scheduleInit() {
4006
4038
  this.initTimeout = setTimeout(() => {
@@ -4009,20 +4041,6 @@ class Workspace {
4009
4041
  this.viewportApi.resetViewport();
4010
4042
  });
4011
4043
  }
4012
- updateRootComponent() {
4013
- this.selectedStepComponent = null;
4014
- const rootSequence = this.workspaceApi.getRootSequence();
4015
- const parentPlaceIndicator = rootSequence.parentStep
4016
- ? {
4017
- sequence: rootSequence.parentStep.parentSequence,
4018
- index: rootSequence.parentStep.index
4019
- }
4020
- : null;
4021
- this.view.render(rootSequence.sequence, parentPlaceIndicator);
4022
- this.trySelectStepComponent(this.state.selectedStepId);
4023
- this.updateBadges();
4024
- this.onRendered.forward();
4025
- }
4026
4044
  updateBadges() {
4027
4045
  const result = BadgesResultFactory.create(this.services);
4028
4046
  this.getRootComponent().updateBadges(result);
@@ -5052,7 +5070,8 @@ class Designer {
5052
5070
  const designerApi = DesignerApi.create(designerContext);
5053
5071
  const view = DesignerView.create(placeholder, designerContext, designerApi);
5054
5072
  const designer = new Designer(view, designerContext.state, designerContext.definitionWalker, designerContext.historyController, designerApi);
5055
- view.workspace.onRendered.first().then(designer.onReady.forward);
5073
+ view.workspace.onRootComponentUpdated.subscribe(designer.onRootComponentUpdated.forward);
5074
+ view.workspace.onRootComponentUpdated.once().then(designer.onReady.forward);
5056
5075
  race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged).subscribe(([definition, selectedStepId]) => {
5057
5076
  if (definition !== undefined) {
5058
5077
  designer.onDefinitionChanged.forward(definition);
@@ -5065,6 +5084,7 @@ class Designer {
5065
5084
  designerContext.state.onIsToolboxCollapsedChanged.subscribe(designer.onIsToolboxCollapsedChanged.forward);
5066
5085
  designerContext.state.onIsEditorCollapsedChanged.subscribe(designer.onIsEditorCollapsedChanged.forward);
5067
5086
  designerContext.state.onStepUnselectionBlocked.subscribe(designer.onStepUnselectionBlocked.forward);
5087
+ designerContext.state.onPreferencesChanged.subscribe(designer.onPreferencesChanged.forward);
5068
5088
  return designer;
5069
5089
  }
5070
5090
  constructor(view, state, walker, historyController, api) {
@@ -5101,6 +5121,14 @@ class Designer {
5101
5121
  * @description Fires when the editor is collapsed or expanded.
5102
5122
  */
5103
5123
  this.onIsEditorCollapsedChanged = new SimpleEvent();
5124
+ /**
5125
+ * @description Fires when the root component and all its children are rerendered.
5126
+ */
5127
+ this.onRootComponentUpdated = new SimpleEvent();
5128
+ /**
5129
+ * @description Fires when any of the designer preferences has changed.
5130
+ */
5131
+ this.onPreferencesChanged = new SimpleEvent();
5104
5132
  }
5105
5133
  /**
5106
5134
  * @returns the current definition of the workflow.
@@ -5226,8 +5254,8 @@ class Designer {
5226
5254
  return __awaiter(this, void 0, void 0, function* () {
5227
5255
  this.getHistoryController().replaceDefinition(definition);
5228
5256
  yield Promise.all([
5229
- this.view.workspace.onRendered.first(),
5230
- this.onDefinitionChanged.first()
5257
+ this.view.workspace.onRootComponentUpdated.once(),
5258
+ this.onDefinitionChanged.once()
5231
5259
  ]);
5232
5260
  });
5233
5261
  }
package/lib/index.d.ts CHANGED
@@ -63,7 +63,7 @@ declare class SimpleEvent<T> {
63
63
  unsubscribe(listener: SimpleEventListener<T>): void;
64
64
  readonly forward: (value: T) => void;
65
65
  count(): number;
66
- first(): Promise<T>;
66
+ once(): Promise<T>;
67
67
  }
68
68
  type SimpleEventListener<T> = (value: T) => void;
69
69
 
@@ -103,6 +103,7 @@ declare class DesignerState {
103
103
  isReadonly: boolean;
104
104
  isToolboxCollapsed: boolean;
105
105
  isEditorCollapsed: boolean;
106
+ private readonly preferenceStorage;
106
107
  readonly onViewportChanged: SimpleEvent<Viewport>;
107
108
  readonly onSelectedStepIdChanged: SimpleEvent<string | null>;
108
109
  readonly onStepUnselectionBlocked: SimpleEvent<string | null>;
@@ -113,12 +114,13 @@ declare class DesignerState {
113
114
  readonly onDefinitionChanged: SimpleEvent<DefinitionChangedEvent<Definition>>;
114
115
  readonly onIsToolboxCollapsedChanged: SimpleEvent<boolean>;
115
116
  readonly onIsEditorCollapsedChanged: SimpleEvent<boolean>;
117
+ readonly onPreferencesChanged: SimpleEvent<PreferencesChangedEvent>;
116
118
  viewport: Viewport;
117
119
  selectedStepId: string | null;
118
120
  folderPath: string[];
119
121
  isDragging: boolean;
120
122
  isDragDisabled: boolean;
121
- constructor(definition: Definition, isReadonly: boolean, isToolboxCollapsed: boolean, isEditorCollapsed: boolean);
123
+ constructor(definition: Definition, isReadonly: boolean, isToolboxCollapsed: boolean, isEditorCollapsed: boolean, preferenceStorage: PreferenceStorage);
122
124
  setSelectedStepId(stepId: string | null): void;
123
125
  pushStepIdToFolderPath(stepId: string): void;
124
126
  setFolderPath(path: string[]): void;
@@ -132,6 +134,8 @@ declare class DesignerState {
132
134
  setIsDragDisabled(isDragDisabled: boolean): void;
133
135
  setIsToolboxCollapsed(isCollapsed: boolean): void;
134
136
  setIsEditorCollapsed(isCollapsed: boolean): void;
137
+ setPreferences(changes: PreferenceChange[], stepId: string): void;
138
+ getPreference(key: string): string | null;
135
139
  }
136
140
 
137
141
  declare class DefinitionValidator {
@@ -200,7 +204,7 @@ interface ClickDetails {
200
204
  position: Vector;
201
205
  scale: number;
202
206
  }
203
- type ClickCommand = SelectStepClickCommand | RerenderStepClickCommand | OpenFolderClickCommand | TriggerCustomActionClickCommand;
207
+ type ClickCommand = SelectStepClickCommand | SetPreferencesClickCommand | OpenFolderClickCommand | TriggerCustomActionClickCommand;
204
208
  interface BaseClickCommand {
205
209
  type: ClickCommandType;
206
210
  }
@@ -208,10 +212,10 @@ interface SelectStepClickCommand extends BaseClickCommand {
208
212
  type: ClickCommandType.selectStep;
209
213
  component: StepComponent;
210
214
  }
211
- interface RerenderStepClickCommand extends BaseClickCommand {
212
- type: ClickCommandType.rerenderStep;
215
+ interface SetPreferencesClickCommand extends BaseClickCommand {
216
+ type: ClickCommandType.changePreferences;
213
217
  step: Step;
214
- beforeCallback?: () => void;
218
+ changes: PreferenceChange[];
215
219
  }
216
220
  interface OpenFolderClickCommand extends BaseClickCommand {
217
221
  type: ClickCommandType.openFolder;
@@ -225,7 +229,7 @@ interface TriggerCustomActionClickCommand extends BaseClickCommand {
225
229
  }
226
230
  declare enum ClickCommandType {
227
231
  selectStep = 1,
228
- rerenderStep = 2,
232
+ changePreferences = 2,
229
233
  openFolder = 3,
230
234
  triggerCustomAction = 4
231
235
  }
@@ -717,6 +721,7 @@ interface SwitchStepComponentViewConfiguration {
717
721
  }
718
722
 
719
723
  type BranchNamesResolver = (step: BranchedStep) => string[];
724
+ type BranchNameLabelResolver = (branchName: string, step: Step) => string;
720
725
  interface SwitchStepExtensionConfiguration {
721
726
  componentType?: string;
722
727
  view?: SwitchStepComponentViewConfiguration;
@@ -726,9 +731,15 @@ interface SwitchStepExtensionConfiguration {
726
731
  * You can use this to provide custom ordering or filtering of branch names.
727
732
  */
728
733
  branchNamesResolver?: BranchNamesResolver;
734
+ /**
735
+ * A function that takes a branch name and a step, and returns the label to display for that branch.
736
+ * If not provided, the branch name itself will be used as the label.
737
+ * Before rendering, the label is translated using the i18n callback.
738
+ */
739
+ branchNameLabelResolver?: BranchNameLabelResolver;
729
740
  }
730
741
 
731
- declare const createSwitchStepComponentViewFactory: (cfg: SwitchStepComponentViewConfiguration, branchNameResolver: BranchNamesResolver | undefined) => StepComponentViewFactory;
742
+ declare const createSwitchStepComponentViewFactory: (cfg: SwitchStepComponentViewConfiguration, branchNameResolver: BranchNamesResolver | undefined, branchNameLabelResolver: BranchNameLabelResolver | undefined) => StepComponentViewFactory;
732
743
 
733
744
  interface TaskStepComponentViewConfiguration {
734
745
  paddingLeft: number;
@@ -871,7 +882,7 @@ interface StepComponentViewContext {
871
882
  createPlaceholderForArea(parentElement: SVGElement, size: Vector, direction: PlaceholderDirection, sequence: Sequence, index: number): Placeholder;
872
883
  createRegionComponentView(parentElement: SVGElement, componentClassName: string, contentFactory: RegionComponentViewContentFactory): StepComponentView;
873
884
  getPreference(key: string): string | null;
874
- setPreference(key: string, value: string): void;
885
+ createPreferenceChange(key: string, value: string): PreferenceChange;
875
886
  }
876
887
  interface StepContext<S extends Step = Step> {
877
888
  parentSequence: Sequence;
@@ -1210,6 +1221,14 @@ interface DefinitionChangedEvent<TDefinition extends Definition = Definition> {
1210
1221
  changeType: DefinitionChangeType;
1211
1222
  stepId: string | null;
1212
1223
  duplicatedStepIds?: DuplicatedStepId[];
1224
+ }
1225
+ interface PreferenceChange {
1226
+ key: string;
1227
+ value: string;
1228
+ }
1229
+ interface PreferencesChangedEvent {
1230
+ stepId: string;
1231
+ changes: PreferenceChange[];
1213
1232
  }
1214
1233
 
1215
1234
  declare class StateModifier {
@@ -1368,6 +1387,14 @@ declare class Designer<TDefinition extends Definition = Definition> {
1368
1387
  * @description Fires when the editor is collapsed or expanded.
1369
1388
  */
1370
1389
  readonly onIsEditorCollapsedChanged: SimpleEvent<boolean>;
1390
+ /**
1391
+ * @description Fires when the root component and all its children are rerendered.
1392
+ */
1393
+ readonly onRootComponentUpdated: SimpleEvent<void>;
1394
+ /**
1395
+ * @description Fires when any of the designer preferences has changed.
1396
+ */
1397
+ readonly onPreferencesChanged: SimpleEvent<PreferencesChangedEvent>;
1371
1398
  /**
1372
1399
  * @returns the current definition of the workflow.
1373
1400
  */
@@ -1467,4 +1494,4 @@ declare class Designer<TDefinition extends Definition = Definition> {
1467
1494
  }
1468
1495
 
1469
1496
  export { Badges, CenteredViewportCalculator, ClassicWheelControllerExtension, ClickCommandType, ComponentContext, ComponentDom, ControlBarApi, CustomActionController, DefaultRegionComponentViewExtension, DefaultRegionView, DefaultSequenceComponent, DefaultSequenceComponentView, DefaultViewportController, DefaultViewportControllerDesignerExtension, DefaultViewportControllerExtension, DefinitionChangeType, Designer, DesignerApi, DesignerContext, DesignerState, Dom, Editor, EditorApi, Icons, InputView, JoinView, KeyboardAction, LabelView, LineGridDesignerExtension, ObjectCloner, OutputView, PathBarApi, PlaceholderController, PlaceholderDirection, PlaceholderGapOrientation, RectPlaceholder, RectPlaceholderDesignerExtension, RectPlaceholderView, SelectStepBehaviorEndToken, ServicesResolver, SimpleEvent, StartStopRootComponentDesignerExtension, StartStopRootComponentExtension, StepComponent, StepExtensionResolver, StepsDesignerExtension, TYPE, ToolboxApi, Uid, ValidationErrorBadgeExtension, Vector, ViewportApi, WorkspaceApi, createContainerStepComponentViewFactory, createLaunchPadStepComponentViewFactory, createSwitchStepComponentViewFactory, createTaskStepComponentViewFactory, getAbsolutePosition, race };
1470
- export type { Attributes, Badge, BadgeExtension, BadgeView, BadgesDecorator, BadgesResult, BaseClickCommand, Behavior, BehaviorEndToken, BranchNamesResolver, ClickBehaviorWrapper, ClickBehaviorWrapperExtension, ClickCommand, ClickDetails, Component, ComponentView, ContainerStepComponentViewConfiguration, ContainerStepExtensionConfiguration, ContextMenuExtension, ContextMenuItem, ContextMenuItemsProvider, CustomAction, CustomActionHandler, CustomActionHandlerContext, Daemon, DaemonExtension, DefaultViewportControllerConfiguration, DefaultViewportControllerExtensionConfiguration, DefinitionChangedEvent, DefinitionChangedEventDetails, DesignerConfiguration, DesignerExtension, DraggedComponent, DraggedComponentExtension, DuplicatedStepId, EditorsConfiguration, FoundPlaceholders, Grid, GridExtension, I18n, KeyboardConfiguration, LaunchPadStepComponentViewConfiguration, LaunchPadStepExtensionConfiguration, LineGridConfiguration, NextScale, OpenFolderClickCommand, Placeholder, PlaceholderConfiguration, PlaceholderExtension, PlaceholderView, PreferenceStorage, RectPlaceholderConfiguration, RegionComponentViewContentFactory, RegionComponentViewExtension, RegionView, RegionViewFactory, RerenderStepClickCommand, RootComponentExtension, RootEditorContext, RootEditorProvider, RootValidator, SelectStepClickCommand, SelectedStepIdProvider, SequenceComponent, SequenceComponentExtension, SequenceContext, SequencePlaceIndicator, Services, SimpleEventListener, StartStopRootComponentExtensionConfiguration, StartStopRootComponentViewConfiguration, StateModifierDependency, StepBadgesDecoratorExtension, StepComponentView, StepComponentViewContext, StepComponentViewFactory, StepComponentViewWrapperExtension, StepContext, StepDefinition, StepDescriptionProvider, StepEditorContext, StepEditorProvider, StepExtension, StepIconUrlProvider, StepLabelProvider, StepValidator, StepsConfiguration, StepsDesignerExtensionConfiguration, SwitchStepComponentViewConfiguration, SwitchStepExtensionConfiguration, TaskStepComponentViewConfiguration, TaskStepExtensionConfiguration, ToolboxConfiguration, ToolboxGroupConfiguration, TriggerCustomActionClickCommand, UiComponent, UiComponentExtension, UidGenerator, UndoStack, UndoStackItem, ValidationErrorBadgeExtensionConfiguration, ValidationErrorBadgeViewConfiguration, ValidatorConfiguration, Viewport, ViewportController, ViewportControllerExtension, WheelController, WheelControllerExtension, WorkspaceRootSequence };
1497
+ export type { Attributes, Badge, BadgeExtension, BadgeView, BadgesDecorator, BadgesResult, BaseClickCommand, Behavior, BehaviorEndToken, BranchNameLabelResolver, BranchNamesResolver, ClickBehaviorWrapper, ClickBehaviorWrapperExtension, ClickCommand, ClickDetails, Component, ComponentView, ContainerStepComponentViewConfiguration, ContainerStepExtensionConfiguration, ContextMenuExtension, ContextMenuItem, ContextMenuItemsProvider, CustomAction, CustomActionHandler, CustomActionHandlerContext, Daemon, DaemonExtension, DefaultViewportControllerConfiguration, DefaultViewportControllerExtensionConfiguration, DefinitionChangedEvent, DefinitionChangedEventDetails, DesignerConfiguration, DesignerExtension, DraggedComponent, DraggedComponentExtension, DuplicatedStepId, EditorsConfiguration, FoundPlaceholders, Grid, GridExtension, I18n, KeyboardConfiguration, LaunchPadStepComponentViewConfiguration, LaunchPadStepExtensionConfiguration, LineGridConfiguration, NextScale, OpenFolderClickCommand, Placeholder, PlaceholderConfiguration, PlaceholderExtension, PlaceholderView, PreferenceChange, PreferenceStorage, PreferencesChangedEvent, RectPlaceholderConfiguration, RegionComponentViewContentFactory, RegionComponentViewExtension, RegionView, RegionViewFactory, RootComponentExtension, RootEditorContext, RootEditorProvider, RootValidator, SelectStepClickCommand, SelectedStepIdProvider, SequenceComponent, SequenceComponentExtension, SequenceContext, SequencePlaceIndicator, Services, SetPreferencesClickCommand, SimpleEventListener, StartStopRootComponentExtensionConfiguration, StartStopRootComponentViewConfiguration, StateModifierDependency, StepBadgesDecoratorExtension, StepComponentView, StepComponentViewContext, StepComponentViewFactory, StepComponentViewWrapperExtension, StepContext, StepDefinition, StepDescriptionProvider, StepEditorContext, StepEditorProvider, StepExtension, StepIconUrlProvider, StepLabelProvider, StepValidator, StepsConfiguration, StepsDesignerExtensionConfiguration, SwitchStepComponentViewConfiguration, SwitchStepExtensionConfiguration, TaskStepComponentViewConfiguration, TaskStepExtensionConfiguration, ToolboxConfiguration, ToolboxGroupConfiguration, TriggerCustomActionClickCommand, UiComponent, UiComponentExtension, UidGenerator, UndoStack, UndoStackItem, ValidationErrorBadgeExtensionConfiguration, ValidationErrorBadgeViewConfiguration, ValidatorConfiguration, Viewport, ViewportController, ViewportControllerExtension, WheelController, WheelControllerExtension, WorkspaceRootSequence };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "sequential-workflow-designer",
3
3
  "description": "Customizable no-code component for building flow-based programming applications.",
4
- "version": "0.36.0",
4
+ "version": "0.37.1",
5
5
  "type": "module",
6
6
  "main": "./lib/esm/index.js",
7
7
  "types": "./lib/index.d.ts",