sequential-workflow-designer 0.19.4 → 0.20.0

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 +5 -4
  2. package/dist/index.umd.js +56 -46
  3. package/lib/cjs/index.cjs +56 -46
  4. package/lib/esm/index.js +56 -46
  5. package/lib/index.d.ts +15 -4
  6. package/package.json +1 -1
package/README.md CHANGED
@@ -25,6 +25,7 @@ Features:
25
25
  * [❎ Fullscreen](https://nocode-js.github.io/sequential-workflow-designer/examples/fullscreen.html)
26
26
  * [🌅 Image Filter](https://nocode-js.github.io/sequential-workflow-designer/examples/image-filter.html)
27
27
  * [🔴 Particles](https://nocode-js.github.io/sequential-workflow-designer/examples/particles.html)
28
+ * [🇪🇸 Internationalization](https://nocode-js.github.io/sequential-workflow-designer/examples/i18n.html)
28
29
  * [⛅ Light Dark](https://nocode-js.github.io/sequential-workflow-designer/examples/light-dark.html)
29
30
  * [🤖 Code Generator](https://nocode-js.github.io/sequential-workflow-designer/examples/code-generator.html)
30
31
  * [🌻 Rendering Test](https://nocode-js.github.io/sequential-workflow-designer/examples/rendering-test.html)
@@ -100,10 +101,10 @@ Add the below code to your head section in HTML document.
100
101
  ```html
101
102
  <head>
102
103
  ...
103
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.4/css/designer.css" rel="stylesheet">
104
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.4/css/designer-light.css" rel="stylesheet">
105
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.4/css/designer-dark.css" rel="stylesheet">
106
- <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.4/dist/index.umd.js"></script>
104
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.20.0/css/designer.css" rel="stylesheet">
105
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.20.0/css/designer-light.css" rel="stylesheet">
106
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.20.0/css/designer-dark.css" rel="stylesheet">
107
+ <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.20.0/dist/index.umd.js"></script>
107
108
  ```
108
109
 
109
110
  Call the designer by:
package/dist/index.umd.js CHANGED
@@ -602,13 +602,15 @@
602
602
  }
603
603
 
604
604
  class ToolboxDataProvider {
605
- constructor(iconProvider, configuration) {
605
+ constructor(iconProvider, i18n, configuration) {
606
606
  this.iconProvider = iconProvider;
607
+ this.i18n = i18n;
607
608
  this.configuration = configuration;
608
609
  this.createItemData = (step) => {
609
610
  StepTypeValidator.validate(step.type);
610
611
  const iconUrl = this.iconProvider.getIconUrl(step);
611
- const label = this.configuration && this.configuration.labelProvider ? this.configuration.labelProvider(step) : step.name;
612
+ const rawLabel = this.configuration && this.configuration.labelProvider ? this.configuration.labelProvider(step) : step.name;
613
+ const label = this.i18n(`toolbox.item.${step.type}.label`, rawLabel);
612
614
  const description = this.configuration && this.configuration.descriptionProvider ? this.configuration.descriptionProvider(step) : label;
613
615
  const lowerCaseLabel = label.toLowerCase();
614
616
  return {
@@ -706,10 +708,10 @@
706
708
  const workspace = new WorkspaceApi(context.state, context.workspaceController);
707
709
  const viewportController = context.services.viewportController.create(workspace);
708
710
  const viewport = new ViewportApi(context.workspaceController, viewportController);
709
- const toolboxDataProvider = new ToolboxDataProvider(context.componentContext.iconProvider, context.configuration.toolbox);
710
- return new DesignerApi(ControlBarApi.create(context.state, context.historyController, context.stateModifier, viewport), new ToolboxApi(context.state, context, context.behaviorController, toolboxDataProvider, context.configuration.uidGenerator), new EditorApi(context.state, context.definitionWalker, context.stateModifier), workspace, viewport, new PathBarApi(context.state, context.definitionWalker), context.definitionWalker);
711
+ const toolboxDataProvider = new ToolboxDataProvider(context.componentContext.iconProvider, context.i18n, context.configuration.toolbox);
712
+ return new DesignerApi(ControlBarApi.create(context.state, context.historyController, context.stateModifier, viewport), new ToolboxApi(context.state, context, context.behaviorController, toolboxDataProvider, context.configuration.uidGenerator), new EditorApi(context.state, context.definitionWalker, context.stateModifier), workspace, viewport, new PathBarApi(context.state, context.definitionWalker), context.definitionWalker, context.i18n);
711
713
  }
712
- constructor(controlBar, toolbox, editor, workspace, viewport, pathBar, definitionWalker) {
714
+ constructor(controlBar, toolbox, editor, workspace, viewport, pathBar, definitionWalker, i18n) {
713
715
  this.controlBar = controlBar;
714
716
  this.toolbox = toolbox;
715
717
  this.editor = editor;
@@ -717,6 +719,7 @@
717
719
  this.viewport = viewport;
718
720
  this.pathBar = pathBar;
719
721
  this.definitionWalker = definitionWalker;
722
+ this.i18n = i18n;
720
723
  }
721
724
  }
722
725
 
@@ -919,6 +922,7 @@
919
922
  static create(stepContext, componentContext) {
920
923
  return {
921
924
  getStepIconUrl: () => componentContext.iconProvider.getIconUrl(stepContext.step),
925
+ getStepName: () => componentContext.i18n(`step.${stepContext.step.type}.name`, stepContext.step.name),
922
926
  createSequenceComponent: (parentElement, sequence) => {
923
927
  const sequenceContext = {
924
928
  sequence,
@@ -928,7 +932,8 @@
928
932
  };
929
933
  return componentContext.services.sequenceComponent.create(parentElement, sequenceContext, componentContext);
930
934
  },
931
- createPlaceholderForArea: componentContext.services.placeholder.createForArea.bind(componentContext.services.placeholder)
935
+ createPlaceholderForArea: componentContext.services.placeholder.createForArea.bind(componentContext.services.placeholder),
936
+ i18n: componentContext.i18n
932
937
  };
933
938
  }
934
939
  }
@@ -947,18 +952,19 @@
947
952
  }
948
953
 
949
954
  class ComponentContext {
950
- static create(stepsConfiguration, validatorConfiguration, state, stepExtensionResolver, services) {
955
+ static create(stepsConfiguration, validatorConfiguration, state, stepExtensionResolver, i18n, services) {
951
956
  const validator = new DefinitionValidator(validatorConfiguration, state);
952
957
  const iconProvider = new IconProvider(stepsConfiguration);
953
958
  const placeholderController = services.placeholderController.create();
954
959
  const stepComponentFactory = new StepComponentFactory(stepExtensionResolver);
955
- return new ComponentContext(validator, iconProvider, placeholderController, stepComponentFactory, services);
960
+ return new ComponentContext(validator, iconProvider, placeholderController, stepComponentFactory, i18n, services);
956
961
  }
957
- constructor(validator, iconProvider, placeholderController, stepComponentFactory, services) {
962
+ constructor(validator, iconProvider, placeholderController, stepComponentFactory, i18n, services) {
958
963
  this.validator = validator;
959
964
  this.iconProvider = iconProvider;
960
965
  this.placeholderController = placeholderController;
961
966
  this.stepComponentFactory = stepComponentFactory;
967
+ this.i18n = i18n;
962
968
  this.services = services;
963
969
  }
964
970
  }
@@ -1484,7 +1490,8 @@
1484
1490
  const { step } = stepContext;
1485
1491
  const g = ComponentDom.stepG('container', step.type, step.id);
1486
1492
  parentElement.appendChild(g);
1487
- const labelView = LabelView.create(g, cfg.paddingTop, cfg.label, step.name, 'primary');
1493
+ const name = viewContext.getStepName();
1494
+ const labelView = LabelView.create(g, cfg.paddingTop, cfg.label, name, 'primary');
1488
1495
  const sequenceComponent = viewContext.createSequenceComponent(g, step.sequence);
1489
1496
  const halfOfWidestElement = labelView.width / 2;
1490
1497
  const offsetLeft = Math.max(halfOfWidestElement - sequenceComponent.view.joinX, 0) + cfg.paddingX;
@@ -1536,9 +1543,11 @@
1536
1543
  });
1537
1544
  const branchLabelViews = branchNames.map(branchName => {
1538
1545
  const labelY = cfg.paddingTop + cfg.nameLabel.height + cfg.connectionHeight;
1539
- return LabelView.create(g, labelY, cfg.branchNameLabel, branchName, 'secondary');
1546
+ const translatedBranchName = viewContext.i18n(`stepComponent.${step.type}.branchName`, branchName);
1547
+ return LabelView.create(g, labelY, cfg.branchNameLabel, translatedBranchName, 'secondary');
1540
1548
  });
1541
- const nameLabelView = LabelView.create(g, cfg.paddingTop, cfg.nameLabel, step.name, 'primary');
1549
+ const name = viewContext.getStepName();
1550
+ const nameLabelView = LabelView.create(g, cfg.paddingTop, cfg.nameLabel, name, 'primary');
1542
1551
  let prevOffsetX = 0;
1543
1552
  const branchSizes = branchComponents.map((component, i) => {
1544
1553
  const halfOfWidestBranchElement = Math.max(branchLabelViews[i].width, cfg.minContainerWidth) / 2;
@@ -1637,7 +1646,7 @@
1637
1646
  y: boxHeight / 2,
1638
1647
  class: 'sqd-step-task-text'
1639
1648
  });
1640
- text.textContent = step.name;
1649
+ text.textContent = viewContext.getStepName();
1641
1650
  g.appendChild(text);
1642
1651
  const textWidth = Math.max(text.getBBox().width, cfg.minTextWidth);
1643
1652
  const boxWidth = cfg.iconSize + cfg.paddingLeft + cfg.paddingRight + cfg.textMarginLeft + textWidth;
@@ -2656,7 +2665,7 @@
2656
2665
 
2657
2666
  class DesignerContext {
2658
2667
  static create(parent, startDefinition, configuration, services) {
2659
- var _a, _b, _c;
2668
+ var _a, _b, _c, _d;
2660
2669
  const definition = ObjectCloner.deepClone(startDefinition);
2661
2670
  const layoutController = new LayoutController(parent);
2662
2671
  const isReadonly = !!configuration.isReadonly;
@@ -2668,22 +2677,24 @@
2668
2677
  const behaviorController = new BehaviorController();
2669
2678
  const stepExtensionResolver = StepExtensionResolver.create(services);
2670
2679
  const definitionWalker = (_c = configuration.definitionWalker) !== null && _c !== void 0 ? _c : new DefinitionWalker();
2680
+ const i18n = (_d = configuration.i18n) !== null && _d !== void 0 ? _d : ((_, defaultValue) => defaultValue);
2671
2681
  const stateModifier = StateModifier.create(definitionWalker, state, configuration);
2672
2682
  const customActionController = new CustomActionController(configuration, state, stateModifier);
2673
2683
  let historyController = undefined;
2674
2684
  if (configuration.undoStackSize) {
2675
2685
  historyController = HistoryController.create(configuration.undoStack, state, stateModifier, configuration);
2676
2686
  }
2677
- const componentContext = ComponentContext.create(configuration.steps, configuration.validator, state, stepExtensionResolver, services);
2678
- return new DesignerContext(theme, state, configuration, services, componentContext, definitionWalker, stateModifier, layoutController, workspaceController, behaviorController, customActionController, historyController);
2687
+ const componentContext = ComponentContext.create(configuration.steps, configuration.validator, state, stepExtensionResolver, i18n, services);
2688
+ return new DesignerContext(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, behaviorController, customActionController, historyController);
2679
2689
  }
2680
- constructor(theme, state, configuration, services, componentContext, definitionWalker, stateModifier, layoutController, workspaceController, behaviorController, customActionController, historyController) {
2690
+ constructor(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, behaviorController, customActionController, historyController) {
2681
2691
  this.theme = theme;
2682
2692
  this.state = state;
2683
2693
  this.configuration = configuration;
2684
2694
  this.services = services;
2685
2695
  this.componentContext = componentContext;
2686
2696
  this.definitionWalker = definitionWalker;
2697
+ this.i18n = i18n;
2687
2698
  this.stateModifier = stateModifier;
2688
2699
  this.layoutController = layoutController;
2689
2700
  this.workspaceController = workspaceController;
@@ -3096,8 +3107,9 @@
3096
3107
  }
3097
3108
 
3098
3109
  class ContextMenuItemsBuilder {
3099
- constructor(viewportApi, stateModifier, state, customMenuItemsProvider) {
3110
+ constructor(viewportApi, i18n, stateModifier, state, customMenuItemsProvider) {
3100
3111
  this.viewportApi = viewportApi;
3112
+ this.i18n = i18n;
3101
3113
  this.stateModifier = stateModifier;
3102
3114
  this.state = state;
3103
3115
  this.customMenuItemsProvider = customMenuItemsProvider;
@@ -3108,15 +3120,16 @@
3108
3120
  const ssc = commandOrNull;
3109
3121
  const step = ssc.component.step;
3110
3122
  const parentSequence = ssc.component.parentSequence;
3123
+ const name = this.i18n(`step.${step.type}.name`, step.name);
3111
3124
  items.push({
3112
- label: step.name,
3125
+ label: name,
3113
3126
  order: 0
3114
3127
  });
3115
3128
  this.tryAppendCustomItems(items, step, parentSequence);
3116
3129
  if (this.stateModifier.isSelectable(step, parentSequence)) {
3117
3130
  if (this.state.selectedStepId === step.id) {
3118
3131
  items.push({
3119
- label: `Unselect`,
3132
+ label: this.i18n('contextMenu.unselect', 'Unselect'),
3120
3133
  order: 10,
3121
3134
  callback: () => {
3122
3135
  this.state.setSelectedStepId(null);
@@ -3125,7 +3138,7 @@
3125
3138
  }
3126
3139
  else {
3127
3140
  items.push({
3128
- label: 'Select',
3141
+ label: this.i18n('contextMenu.select', 'Select'),
3129
3142
  order: 20,
3130
3143
  callback: () => {
3131
3144
  this.stateModifier.trySelectStepById(step.id);
@@ -3136,7 +3149,7 @@
3136
3149
  if (!this.state.isReadonly) {
3137
3150
  if (this.stateModifier.isDeletable(step.id)) {
3138
3151
  items.push({
3139
- label: 'Delete',
3152
+ label: this.i18n('contextMenu.delete', 'Delete'),
3140
3153
  order: 30,
3141
3154
  callback: () => {
3142
3155
  this.stateModifier.tryDelete(step.id);
@@ -3145,7 +3158,7 @@
3145
3158
  }
3146
3159
  if (this.stateModifier.isDuplicable(step, parentSequence)) {
3147
3160
  items.push({
3148
- label: 'Duplicate',
3161
+ label: this.i18n('contextMenu.duplicate', 'Duplicate'),
3149
3162
  order: 40,
3150
3163
  callback: () => {
3151
3164
  this.stateModifier.tryDuplicate(step, parentSequence);
@@ -3158,7 +3171,7 @@
3158
3171
  this.tryAppendCustomItems(items, null, this.state.definition.sequence);
3159
3172
  }
3160
3173
  items.push({
3161
- label: 'Reset view',
3174
+ label: this.i18n('contextMenu.resetView', 'Reset view'),
3162
3175
  order: 50,
3163
3176
  callback: () => {
3164
3177
  this.viewportApi.resetViewport();
@@ -3183,7 +3196,7 @@
3183
3196
  const view = WorkspaceView.create(parent, designerContext.componentContext);
3184
3197
  const clickBehaviorResolver = new ClickBehaviorResolver(designerContext);
3185
3198
  const wheelController = designerContext.services.wheelController.create(api.workspace);
3186
- const contextMenuItemsBuilder = new ContextMenuItemsBuilder(api.viewport, designerContext.stateModifier, designerContext.state, ((_a = designerContext.services.contextMenu) === null || _a === void 0 ? void 0 : _a.createItemsProvider)
3199
+ const contextMenuItemsBuilder = new ContextMenuItemsBuilder(api.viewport, api.i18n, designerContext.stateModifier, designerContext.state, ((_a = designerContext.services.contextMenu) === null || _a === void 0 ? void 0 : _a.createItemsProvider)
3187
3200
  ? designerContext.services.contextMenu.createItemsProvider(designerContext.customActionController)
3188
3201
  : undefined);
3189
3202
  const contextMenuController = new ContextMenuController(designerContext.theme, designerContext.configuration, contextMenuItemsBuilder);
@@ -3430,28 +3443,28 @@
3430
3443
  }
3431
3444
 
3432
3445
  class ControlBarView {
3433
- static create(parent, isUndoRedoSupported) {
3446
+ static create(parent, isUndoRedoSupported, i18n) {
3434
3447
  const root = Dom.element('div', {
3435
3448
  class: 'sqd-control-bar'
3436
3449
  });
3437
- const resetButton = createButton(Icons.center, 'Reset view');
3450
+ const resetButton = createButton(Icons.center, i18n('controlBar.resetView', 'Reset view'));
3438
3451
  root.appendChild(resetButton);
3439
- const zoomInButton = createButton(Icons.zoomIn, 'Zoom in');
3452
+ const zoomInButton = createButton(Icons.zoomIn, i18n('controlBar.zoomIn', 'Zoom in'));
3440
3453
  root.appendChild(zoomInButton);
3441
- const zoomOutButton = createButton(Icons.zoomOut, 'Zoom out');
3454
+ const zoomOutButton = createButton(Icons.zoomOut, i18n('controlBar.zoomOut', 'Zoom out'));
3442
3455
  root.appendChild(zoomOutButton);
3443
3456
  let undoButton = null;
3444
3457
  let redoButton = null;
3445
3458
  if (isUndoRedoSupported) {
3446
- undoButton = createButton(Icons.undo, 'Undo');
3459
+ undoButton = createButton(Icons.undo, i18n('controlBar.undo', 'Undo'));
3447
3460
  root.appendChild(undoButton);
3448
- redoButton = createButton(Icons.redo, 'Redo');
3461
+ redoButton = createButton(Icons.redo, i18n('controlBar.redo', 'Redo'));
3449
3462
  root.appendChild(redoButton);
3450
3463
  }
3451
- const disableDragButton = createButton(Icons.move, 'Turn on/off drag and drop');
3464
+ const disableDragButton = createButton(Icons.move, i18n('controlBar.turnOnOffDragAndDrop', 'Turn on/off drag and drop'));
3452
3465
  disableDragButton.classList.add('sqd-disabled');
3453
3466
  root.appendChild(disableDragButton);
3454
- const deleteButton = createButton(Icons.delete, 'Delete selected step');
3467
+ const deleteButton = createButton(Icons.delete, i18n('controlBar.deleteSelectedStep', 'Delete selected step'));
3455
3468
  deleteButton.classList.add('sqd-delete');
3456
3469
  deleteButton.classList.add('sqd-hidden');
3457
3470
  root.appendChild(deleteButton);
@@ -3532,7 +3545,7 @@
3532
3545
  class ControlBar {
3533
3546
  static create(parent, api) {
3534
3547
  const isUndoRedoSupported = api.controlBar.isUndoRedoSupported();
3535
- const view = ControlBarView.create(parent, isUndoRedoSupported);
3548
+ const view = ControlBarView.create(parent, isUndoRedoSupported, api.i18n);
3536
3549
  const bar = new ControlBar(view, api.controlBar, isUndoRedoSupported);
3537
3550
  view.bindResetButtonClick(() => bar.onResetButtonClicked());
3538
3551
  view.bindZoomInButtonClick(() => bar.onZoomInButtonClicked());
@@ -3662,19 +3675,16 @@
3662
3675
  }
3663
3676
 
3664
3677
  class SmartEditorView {
3665
- static create(parent, api, configuration) {
3678
+ static create(parent, api, i18n, configuration) {
3666
3679
  const root = Dom.element('div', {
3667
3680
  class: 'sqd-smart-editor'
3668
3681
  });
3669
3682
  const toggle = Dom.element('div', {
3670
3683
  class: 'sqd-smart-editor-toggle',
3671
- title: 'Toggle editor'
3684
+ title: i18n('smartEditor.toggle', 'Toggle editor')
3672
3685
  });
3673
3686
  parent.appendChild(toggle);
3674
3687
  parent.appendChild(root);
3675
- if (configuration.globalEditorProvider) {
3676
- throw new Error('globalEditorProvider is renamed to rootEditorProvider');
3677
- }
3678
3688
  const editor = Editor.create(root, api, 'sqd-editor sqd-step-editor', configuration.stepEditorProvider, 'sqd-editor sqd-root-editor', configuration.rootEditorProvider, null);
3679
3689
  return new SmartEditorView(root, toggle, editor);
3680
3690
  }
@@ -3705,7 +3715,7 @@
3705
3715
 
3706
3716
  class SmartEditor {
3707
3717
  static create(parent, api, configuration) {
3708
- const view = SmartEditorView.create(parent, api.editor, configuration);
3718
+ const view = SmartEditorView.create(parent, api.editor, api.i18n, configuration);
3709
3719
  const editor = new SmartEditor(view, api.editor, api.workspace);
3710
3720
  editor.updateVisibility();
3711
3721
  view.bindToggleClick(() => editor.onToggleClicked());
@@ -3948,7 +3958,7 @@
3948
3958
  }
3949
3959
 
3950
3960
  class ToolboxView {
3951
- static create(parent, api) {
3961
+ static create(parent, api, i18n) {
3952
3962
  const root = Dom.element('div', {
3953
3963
  class: 'sqd-toolbox'
3954
3964
  });
@@ -3958,14 +3968,14 @@
3958
3968
  const headerTitle = Dom.element('div', {
3959
3969
  class: 'sqd-toolbox-header-title'
3960
3970
  });
3961
- headerTitle.innerText = 'Toolbox';
3971
+ headerTitle.innerText = i18n('toolbox.title', 'Toolbox');
3962
3972
  const body = Dom.element('div', {
3963
3973
  class: 'sqd-toolbox-body'
3964
3974
  });
3965
3975
  const filterInput = Dom.element('input', {
3966
3976
  class: 'sqd-toolbox-filter',
3967
3977
  type: 'text',
3968
- placeholder: 'Search...'
3978
+ placeholder: i18n('toolbox.search', 'Search...')
3969
3979
  });
3970
3980
  root.appendChild(header);
3971
3981
  root.appendChild(body);
@@ -4025,9 +4035,9 @@
4025
4035
  }
4026
4036
 
4027
4037
  class Toolbox {
4028
- static create(root, api) {
4038
+ static create(root, api, i18n) {
4029
4039
  const allGroups = api.getAllGroups();
4030
- const view = ToolboxView.create(root, api);
4040
+ const view = ToolboxView.create(root, api, i18n);
4031
4041
  const toolbox = new Toolbox(view, api, allGroups);
4032
4042
  toolbox.render();
4033
4043
  toolbox.onIsCollapsedChanged();
@@ -4062,7 +4072,7 @@
4062
4072
 
4063
4073
  class ToolboxExtension {
4064
4074
  create(root, api) {
4065
- return Toolbox.create(root, api.toolbox);
4075
+ return Toolbox.create(root, api.toolbox, api.i18n);
4066
4076
  }
4067
4077
  }
4068
4078
 
package/lib/cjs/index.cjs CHANGED
@@ -600,13 +600,15 @@ class StepTypeValidator {
600
600
  }
601
601
 
602
602
  class ToolboxDataProvider {
603
- constructor(iconProvider, configuration) {
603
+ constructor(iconProvider, i18n, configuration) {
604
604
  this.iconProvider = iconProvider;
605
+ this.i18n = i18n;
605
606
  this.configuration = configuration;
606
607
  this.createItemData = (step) => {
607
608
  StepTypeValidator.validate(step.type);
608
609
  const iconUrl = this.iconProvider.getIconUrl(step);
609
- const label = this.configuration && this.configuration.labelProvider ? this.configuration.labelProvider(step) : step.name;
610
+ const rawLabel = this.configuration && this.configuration.labelProvider ? this.configuration.labelProvider(step) : step.name;
611
+ const label = this.i18n(`toolbox.item.${step.type}.label`, rawLabel);
610
612
  const description = this.configuration && this.configuration.descriptionProvider ? this.configuration.descriptionProvider(step) : label;
611
613
  const lowerCaseLabel = label.toLowerCase();
612
614
  return {
@@ -704,10 +706,10 @@ class DesignerApi {
704
706
  const workspace = new WorkspaceApi(context.state, context.workspaceController);
705
707
  const viewportController = context.services.viewportController.create(workspace);
706
708
  const viewport = new ViewportApi(context.workspaceController, viewportController);
707
- const toolboxDataProvider = new ToolboxDataProvider(context.componentContext.iconProvider, context.configuration.toolbox);
708
- return new DesignerApi(ControlBarApi.create(context.state, context.historyController, context.stateModifier, viewport), new ToolboxApi(context.state, context, context.behaviorController, toolboxDataProvider, context.configuration.uidGenerator), new EditorApi(context.state, context.definitionWalker, context.stateModifier), workspace, viewport, new PathBarApi(context.state, context.definitionWalker), context.definitionWalker);
709
+ const toolboxDataProvider = new ToolboxDataProvider(context.componentContext.iconProvider, context.i18n, context.configuration.toolbox);
710
+ return new DesignerApi(ControlBarApi.create(context.state, context.historyController, context.stateModifier, viewport), new ToolboxApi(context.state, context, context.behaviorController, toolboxDataProvider, context.configuration.uidGenerator), new EditorApi(context.state, context.definitionWalker, context.stateModifier), workspace, viewport, new PathBarApi(context.state, context.definitionWalker), context.definitionWalker, context.i18n);
709
711
  }
710
- constructor(controlBar, toolbox, editor, workspace, viewport, pathBar, definitionWalker) {
712
+ constructor(controlBar, toolbox, editor, workspace, viewport, pathBar, definitionWalker, i18n) {
711
713
  this.controlBar = controlBar;
712
714
  this.toolbox = toolbox;
713
715
  this.editor = editor;
@@ -715,6 +717,7 @@ class DesignerApi {
715
717
  this.viewport = viewport;
716
718
  this.pathBar = pathBar;
717
719
  this.definitionWalker = definitionWalker;
720
+ this.i18n = i18n;
718
721
  }
719
722
  }
720
723
 
@@ -917,6 +920,7 @@ class StepComponentViewContextFactory {
917
920
  static create(stepContext, componentContext) {
918
921
  return {
919
922
  getStepIconUrl: () => componentContext.iconProvider.getIconUrl(stepContext.step),
923
+ getStepName: () => componentContext.i18n(`step.${stepContext.step.type}.name`, stepContext.step.name),
920
924
  createSequenceComponent: (parentElement, sequence) => {
921
925
  const sequenceContext = {
922
926
  sequence,
@@ -926,7 +930,8 @@ class StepComponentViewContextFactory {
926
930
  };
927
931
  return componentContext.services.sequenceComponent.create(parentElement, sequenceContext, componentContext);
928
932
  },
929
- createPlaceholderForArea: componentContext.services.placeholder.createForArea.bind(componentContext.services.placeholder)
933
+ createPlaceholderForArea: componentContext.services.placeholder.createForArea.bind(componentContext.services.placeholder),
934
+ i18n: componentContext.i18n
930
935
  };
931
936
  }
932
937
  }
@@ -945,18 +950,19 @@ class StepComponentFactory {
945
950
  }
946
951
 
947
952
  class ComponentContext {
948
- static create(stepsConfiguration, validatorConfiguration, state, stepExtensionResolver, services) {
953
+ static create(stepsConfiguration, validatorConfiguration, state, stepExtensionResolver, i18n, services) {
949
954
  const validator = new DefinitionValidator(validatorConfiguration, state);
950
955
  const iconProvider = new IconProvider(stepsConfiguration);
951
956
  const placeholderController = services.placeholderController.create();
952
957
  const stepComponentFactory = new StepComponentFactory(stepExtensionResolver);
953
- return new ComponentContext(validator, iconProvider, placeholderController, stepComponentFactory, services);
958
+ return new ComponentContext(validator, iconProvider, placeholderController, stepComponentFactory, i18n, services);
954
959
  }
955
- constructor(validator, iconProvider, placeholderController, stepComponentFactory, services) {
960
+ constructor(validator, iconProvider, placeholderController, stepComponentFactory, i18n, services) {
956
961
  this.validator = validator;
957
962
  this.iconProvider = iconProvider;
958
963
  this.placeholderController = placeholderController;
959
964
  this.stepComponentFactory = stepComponentFactory;
965
+ this.i18n = i18n;
960
966
  this.services = services;
961
967
  }
962
968
  }
@@ -1482,7 +1488,8 @@ const createContainerStepComponentViewFactory = (cfg) => (parentElement, stepCon
1482
1488
  const { step } = stepContext;
1483
1489
  const g = ComponentDom.stepG('container', step.type, step.id);
1484
1490
  parentElement.appendChild(g);
1485
- const labelView = LabelView.create(g, cfg.paddingTop, cfg.label, step.name, 'primary');
1491
+ const name = viewContext.getStepName();
1492
+ const labelView = LabelView.create(g, cfg.paddingTop, cfg.label, name, 'primary');
1486
1493
  const sequenceComponent = viewContext.createSequenceComponent(g, step.sequence);
1487
1494
  const halfOfWidestElement = labelView.width / 2;
1488
1495
  const offsetLeft = Math.max(halfOfWidestElement - sequenceComponent.view.joinX, 0) + cfg.paddingX;
@@ -1534,9 +1541,11 @@ const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, view
1534
1541
  });
1535
1542
  const branchLabelViews = branchNames.map(branchName => {
1536
1543
  const labelY = cfg.paddingTop + cfg.nameLabel.height + cfg.connectionHeight;
1537
- return LabelView.create(g, labelY, cfg.branchNameLabel, branchName, 'secondary');
1544
+ const translatedBranchName = viewContext.i18n(`stepComponent.${step.type}.branchName`, branchName);
1545
+ return LabelView.create(g, labelY, cfg.branchNameLabel, translatedBranchName, 'secondary');
1538
1546
  });
1539
- const nameLabelView = LabelView.create(g, cfg.paddingTop, cfg.nameLabel, step.name, 'primary');
1547
+ const name = viewContext.getStepName();
1548
+ const nameLabelView = LabelView.create(g, cfg.paddingTop, cfg.nameLabel, name, 'primary');
1540
1549
  let prevOffsetX = 0;
1541
1550
  const branchSizes = branchComponents.map((component, i) => {
1542
1551
  const halfOfWidestBranchElement = Math.max(branchLabelViews[i].width, cfg.minContainerWidth) / 2;
@@ -1635,7 +1644,7 @@ const createTaskStepComponentViewFactory = (isInterrupted, cfg) => (parentElemen
1635
1644
  y: boxHeight / 2,
1636
1645
  class: 'sqd-step-task-text'
1637
1646
  });
1638
- text.textContent = step.name;
1647
+ text.textContent = viewContext.getStepName();
1639
1648
  g.appendChild(text);
1640
1649
  const textWidth = Math.max(text.getBBox().width, cfg.minTextWidth);
1641
1650
  const boxWidth = cfg.iconSize + cfg.paddingLeft + cfg.paddingRight + cfg.textMarginLeft + textWidth;
@@ -2471,7 +2480,7 @@ class WorkspaceControllerWrapper {
2471
2480
 
2472
2481
  class DesignerContext {
2473
2482
  static create(parent, startDefinition, configuration, services) {
2474
- var _a, _b, _c;
2483
+ var _a, _b, _c, _d;
2475
2484
  const definition = ObjectCloner.deepClone(startDefinition);
2476
2485
  const layoutController = new LayoutController(parent);
2477
2486
  const isReadonly = !!configuration.isReadonly;
@@ -2483,22 +2492,24 @@ class DesignerContext {
2483
2492
  const behaviorController = new BehaviorController();
2484
2493
  const stepExtensionResolver = StepExtensionResolver.create(services);
2485
2494
  const definitionWalker = (_c = configuration.definitionWalker) !== null && _c !== void 0 ? _c : new sequentialWorkflowModel.DefinitionWalker();
2495
+ const i18n = (_d = configuration.i18n) !== null && _d !== void 0 ? _d : ((_, defaultValue) => defaultValue);
2486
2496
  const stateModifier = StateModifier.create(definitionWalker, state, configuration);
2487
2497
  const customActionController = new CustomActionController(configuration, state, stateModifier);
2488
2498
  let historyController = undefined;
2489
2499
  if (configuration.undoStackSize) {
2490
2500
  historyController = HistoryController.create(configuration.undoStack, state, stateModifier, configuration);
2491
2501
  }
2492
- const componentContext = ComponentContext.create(configuration.steps, configuration.validator, state, stepExtensionResolver, services);
2493
- return new DesignerContext(theme, state, configuration, services, componentContext, definitionWalker, stateModifier, layoutController, workspaceController, behaviorController, customActionController, historyController);
2502
+ const componentContext = ComponentContext.create(configuration.steps, configuration.validator, state, stepExtensionResolver, i18n, services);
2503
+ return new DesignerContext(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, behaviorController, customActionController, historyController);
2494
2504
  }
2495
- constructor(theme, state, configuration, services, componentContext, definitionWalker, stateModifier, layoutController, workspaceController, behaviorController, customActionController, historyController) {
2505
+ constructor(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, behaviorController, customActionController, historyController) {
2496
2506
  this.theme = theme;
2497
2507
  this.state = state;
2498
2508
  this.configuration = configuration;
2499
2509
  this.services = services;
2500
2510
  this.componentContext = componentContext;
2501
2511
  this.definitionWalker = definitionWalker;
2512
+ this.i18n = i18n;
2502
2513
  this.stateModifier = stateModifier;
2503
2514
  this.layoutController = layoutController;
2504
2515
  this.workspaceController = workspaceController;
@@ -2911,8 +2922,9 @@ class ContextMenuController {
2911
2922
  }
2912
2923
 
2913
2924
  class ContextMenuItemsBuilder {
2914
- constructor(viewportApi, stateModifier, state, customMenuItemsProvider) {
2925
+ constructor(viewportApi, i18n, stateModifier, state, customMenuItemsProvider) {
2915
2926
  this.viewportApi = viewportApi;
2927
+ this.i18n = i18n;
2916
2928
  this.stateModifier = stateModifier;
2917
2929
  this.state = state;
2918
2930
  this.customMenuItemsProvider = customMenuItemsProvider;
@@ -2923,15 +2935,16 @@ class ContextMenuItemsBuilder {
2923
2935
  const ssc = commandOrNull;
2924
2936
  const step = ssc.component.step;
2925
2937
  const parentSequence = ssc.component.parentSequence;
2938
+ const name = this.i18n(`step.${step.type}.name`, step.name);
2926
2939
  items.push({
2927
- label: step.name,
2940
+ label: name,
2928
2941
  order: 0
2929
2942
  });
2930
2943
  this.tryAppendCustomItems(items, step, parentSequence);
2931
2944
  if (this.stateModifier.isSelectable(step, parentSequence)) {
2932
2945
  if (this.state.selectedStepId === step.id) {
2933
2946
  items.push({
2934
- label: `Unselect`,
2947
+ label: this.i18n('contextMenu.unselect', 'Unselect'),
2935
2948
  order: 10,
2936
2949
  callback: () => {
2937
2950
  this.state.setSelectedStepId(null);
@@ -2940,7 +2953,7 @@ class ContextMenuItemsBuilder {
2940
2953
  }
2941
2954
  else {
2942
2955
  items.push({
2943
- label: 'Select',
2956
+ label: this.i18n('contextMenu.select', 'Select'),
2944
2957
  order: 20,
2945
2958
  callback: () => {
2946
2959
  this.stateModifier.trySelectStepById(step.id);
@@ -2951,7 +2964,7 @@ class ContextMenuItemsBuilder {
2951
2964
  if (!this.state.isReadonly) {
2952
2965
  if (this.stateModifier.isDeletable(step.id)) {
2953
2966
  items.push({
2954
- label: 'Delete',
2967
+ label: this.i18n('contextMenu.delete', 'Delete'),
2955
2968
  order: 30,
2956
2969
  callback: () => {
2957
2970
  this.stateModifier.tryDelete(step.id);
@@ -2960,7 +2973,7 @@ class ContextMenuItemsBuilder {
2960
2973
  }
2961
2974
  if (this.stateModifier.isDuplicable(step, parentSequence)) {
2962
2975
  items.push({
2963
- label: 'Duplicate',
2976
+ label: this.i18n('contextMenu.duplicate', 'Duplicate'),
2964
2977
  order: 40,
2965
2978
  callback: () => {
2966
2979
  this.stateModifier.tryDuplicate(step, parentSequence);
@@ -2973,7 +2986,7 @@ class ContextMenuItemsBuilder {
2973
2986
  this.tryAppendCustomItems(items, null, this.state.definition.sequence);
2974
2987
  }
2975
2988
  items.push({
2976
- label: 'Reset view',
2989
+ label: this.i18n('contextMenu.resetView', 'Reset view'),
2977
2990
  order: 50,
2978
2991
  callback: () => {
2979
2992
  this.viewportApi.resetViewport();
@@ -2998,7 +3011,7 @@ class Workspace {
2998
3011
  const view = WorkspaceView.create(parent, designerContext.componentContext);
2999
3012
  const clickBehaviorResolver = new ClickBehaviorResolver(designerContext);
3000
3013
  const wheelController = designerContext.services.wheelController.create(api.workspace);
3001
- const contextMenuItemsBuilder = new ContextMenuItemsBuilder(api.viewport, designerContext.stateModifier, designerContext.state, ((_a = designerContext.services.contextMenu) === null || _a === void 0 ? void 0 : _a.createItemsProvider)
3014
+ const contextMenuItemsBuilder = new ContextMenuItemsBuilder(api.viewport, api.i18n, designerContext.stateModifier, designerContext.state, ((_a = designerContext.services.contextMenu) === null || _a === void 0 ? void 0 : _a.createItemsProvider)
3002
3015
  ? designerContext.services.contextMenu.createItemsProvider(designerContext.customActionController)
3003
3016
  : undefined);
3004
3017
  const contextMenuController = new ContextMenuController(designerContext.theme, designerContext.configuration, contextMenuItemsBuilder);
@@ -3245,28 +3258,28 @@ class DefaultDraggedComponentExtension {
3245
3258
  }
3246
3259
 
3247
3260
  class ControlBarView {
3248
- static create(parent, isUndoRedoSupported) {
3261
+ static create(parent, isUndoRedoSupported, i18n) {
3249
3262
  const root = Dom.element('div', {
3250
3263
  class: 'sqd-control-bar'
3251
3264
  });
3252
- const resetButton = createButton(Icons.center, 'Reset view');
3265
+ const resetButton = createButton(Icons.center, i18n('controlBar.resetView', 'Reset view'));
3253
3266
  root.appendChild(resetButton);
3254
- const zoomInButton = createButton(Icons.zoomIn, 'Zoom in');
3267
+ const zoomInButton = createButton(Icons.zoomIn, i18n('controlBar.zoomIn', 'Zoom in'));
3255
3268
  root.appendChild(zoomInButton);
3256
- const zoomOutButton = createButton(Icons.zoomOut, 'Zoom out');
3269
+ const zoomOutButton = createButton(Icons.zoomOut, i18n('controlBar.zoomOut', 'Zoom out'));
3257
3270
  root.appendChild(zoomOutButton);
3258
3271
  let undoButton = null;
3259
3272
  let redoButton = null;
3260
3273
  if (isUndoRedoSupported) {
3261
- undoButton = createButton(Icons.undo, 'Undo');
3274
+ undoButton = createButton(Icons.undo, i18n('controlBar.undo', 'Undo'));
3262
3275
  root.appendChild(undoButton);
3263
- redoButton = createButton(Icons.redo, 'Redo');
3276
+ redoButton = createButton(Icons.redo, i18n('controlBar.redo', 'Redo'));
3264
3277
  root.appendChild(redoButton);
3265
3278
  }
3266
- const disableDragButton = createButton(Icons.move, 'Turn on/off drag and drop');
3279
+ const disableDragButton = createButton(Icons.move, i18n('controlBar.turnOnOffDragAndDrop', 'Turn on/off drag and drop'));
3267
3280
  disableDragButton.classList.add('sqd-disabled');
3268
3281
  root.appendChild(disableDragButton);
3269
- const deleteButton = createButton(Icons.delete, 'Delete selected step');
3282
+ const deleteButton = createButton(Icons.delete, i18n('controlBar.deleteSelectedStep', 'Delete selected step'));
3270
3283
  deleteButton.classList.add('sqd-delete');
3271
3284
  deleteButton.classList.add('sqd-hidden');
3272
3285
  root.appendChild(deleteButton);
@@ -3347,7 +3360,7 @@ function createButton(d, title) {
3347
3360
  class ControlBar {
3348
3361
  static create(parent, api) {
3349
3362
  const isUndoRedoSupported = api.controlBar.isUndoRedoSupported();
3350
- const view = ControlBarView.create(parent, isUndoRedoSupported);
3363
+ const view = ControlBarView.create(parent, isUndoRedoSupported, api.i18n);
3351
3364
  const bar = new ControlBar(view, api.controlBar, isUndoRedoSupported);
3352
3365
  view.bindResetButtonClick(() => bar.onResetButtonClicked());
3353
3366
  view.bindZoomInButtonClick(() => bar.onZoomInButtonClicked());
@@ -3477,19 +3490,16 @@ class KeyboardDaemonExtension {
3477
3490
  }
3478
3491
 
3479
3492
  class SmartEditorView {
3480
- static create(parent, api, configuration) {
3493
+ static create(parent, api, i18n, configuration) {
3481
3494
  const root = Dom.element('div', {
3482
3495
  class: 'sqd-smart-editor'
3483
3496
  });
3484
3497
  const toggle = Dom.element('div', {
3485
3498
  class: 'sqd-smart-editor-toggle',
3486
- title: 'Toggle editor'
3499
+ title: i18n('smartEditor.toggle', 'Toggle editor')
3487
3500
  });
3488
3501
  parent.appendChild(toggle);
3489
3502
  parent.appendChild(root);
3490
- if (configuration.globalEditorProvider) {
3491
- throw new Error('globalEditorProvider is renamed to rootEditorProvider');
3492
- }
3493
3503
  const editor = Editor.create(root, api, 'sqd-editor sqd-step-editor', configuration.stepEditorProvider, 'sqd-editor sqd-root-editor', configuration.rootEditorProvider, null);
3494
3504
  return new SmartEditorView(root, toggle, editor);
3495
3505
  }
@@ -3520,7 +3530,7 @@ class SmartEditorView {
3520
3530
 
3521
3531
  class SmartEditor {
3522
3532
  static create(parent, api, configuration) {
3523
- const view = SmartEditorView.create(parent, api.editor, configuration);
3533
+ const view = SmartEditorView.create(parent, api.editor, api.i18n, configuration);
3524
3534
  const editor = new SmartEditor(view, api.editor, api.workspace);
3525
3535
  editor.updateVisibility();
3526
3536
  view.bindToggleClick(() => editor.onToggleClicked());
@@ -3763,7 +3773,7 @@ class ToolboxItem {
3763
3773
  }
3764
3774
 
3765
3775
  class ToolboxView {
3766
- static create(parent, api) {
3776
+ static create(parent, api, i18n) {
3767
3777
  const root = Dom.element('div', {
3768
3778
  class: 'sqd-toolbox'
3769
3779
  });
@@ -3773,14 +3783,14 @@ class ToolboxView {
3773
3783
  const headerTitle = Dom.element('div', {
3774
3784
  class: 'sqd-toolbox-header-title'
3775
3785
  });
3776
- headerTitle.innerText = 'Toolbox';
3786
+ headerTitle.innerText = i18n('toolbox.title', 'Toolbox');
3777
3787
  const body = Dom.element('div', {
3778
3788
  class: 'sqd-toolbox-body'
3779
3789
  });
3780
3790
  const filterInput = Dom.element('input', {
3781
3791
  class: 'sqd-toolbox-filter',
3782
3792
  type: 'text',
3783
- placeholder: 'Search...'
3793
+ placeholder: i18n('toolbox.search', 'Search...')
3784
3794
  });
3785
3795
  root.appendChild(header);
3786
3796
  root.appendChild(body);
@@ -3840,9 +3850,9 @@ class ToolboxView {
3840
3850
  }
3841
3851
 
3842
3852
  class Toolbox {
3843
- static create(root, api) {
3853
+ static create(root, api, i18n) {
3844
3854
  const allGroups = api.getAllGroups();
3845
- const view = ToolboxView.create(root, api);
3855
+ const view = ToolboxView.create(root, api, i18n);
3846
3856
  const toolbox = new Toolbox(view, api, allGroups);
3847
3857
  toolbox.render();
3848
3858
  toolbox.onIsCollapsedChanged();
@@ -3877,7 +3887,7 @@ class Toolbox {
3877
3887
 
3878
3888
  class ToolboxExtension {
3879
3889
  create(root, api) {
3880
- return Toolbox.create(root, api.toolbox);
3890
+ return Toolbox.create(root, api.toolbox, api.i18n);
3881
3891
  }
3882
3892
  }
3883
3893
 
package/lib/esm/index.js CHANGED
@@ -599,13 +599,15 @@ class StepTypeValidator {
599
599
  }
600
600
 
601
601
  class ToolboxDataProvider {
602
- constructor(iconProvider, configuration) {
602
+ constructor(iconProvider, i18n, configuration) {
603
603
  this.iconProvider = iconProvider;
604
+ this.i18n = i18n;
604
605
  this.configuration = configuration;
605
606
  this.createItemData = (step) => {
606
607
  StepTypeValidator.validate(step.type);
607
608
  const iconUrl = this.iconProvider.getIconUrl(step);
608
- const label = this.configuration && this.configuration.labelProvider ? this.configuration.labelProvider(step) : step.name;
609
+ const rawLabel = this.configuration && this.configuration.labelProvider ? this.configuration.labelProvider(step) : step.name;
610
+ const label = this.i18n(`toolbox.item.${step.type}.label`, rawLabel);
609
611
  const description = this.configuration && this.configuration.descriptionProvider ? this.configuration.descriptionProvider(step) : label;
610
612
  const lowerCaseLabel = label.toLowerCase();
611
613
  return {
@@ -703,10 +705,10 @@ class DesignerApi {
703
705
  const workspace = new WorkspaceApi(context.state, context.workspaceController);
704
706
  const viewportController = context.services.viewportController.create(workspace);
705
707
  const viewport = new ViewportApi(context.workspaceController, viewportController);
706
- const toolboxDataProvider = new ToolboxDataProvider(context.componentContext.iconProvider, context.configuration.toolbox);
707
- return new DesignerApi(ControlBarApi.create(context.state, context.historyController, context.stateModifier, viewport), new ToolboxApi(context.state, context, context.behaviorController, toolboxDataProvider, context.configuration.uidGenerator), new EditorApi(context.state, context.definitionWalker, context.stateModifier), workspace, viewport, new PathBarApi(context.state, context.definitionWalker), context.definitionWalker);
708
+ const toolboxDataProvider = new ToolboxDataProvider(context.componentContext.iconProvider, context.i18n, context.configuration.toolbox);
709
+ return new DesignerApi(ControlBarApi.create(context.state, context.historyController, context.stateModifier, viewport), new ToolboxApi(context.state, context, context.behaviorController, toolboxDataProvider, context.configuration.uidGenerator), new EditorApi(context.state, context.definitionWalker, context.stateModifier), workspace, viewport, new PathBarApi(context.state, context.definitionWalker), context.definitionWalker, context.i18n);
708
710
  }
709
- constructor(controlBar, toolbox, editor, workspace, viewport, pathBar, definitionWalker) {
711
+ constructor(controlBar, toolbox, editor, workspace, viewport, pathBar, definitionWalker, i18n) {
710
712
  this.controlBar = controlBar;
711
713
  this.toolbox = toolbox;
712
714
  this.editor = editor;
@@ -714,6 +716,7 @@ class DesignerApi {
714
716
  this.viewport = viewport;
715
717
  this.pathBar = pathBar;
716
718
  this.definitionWalker = definitionWalker;
719
+ this.i18n = i18n;
717
720
  }
718
721
  }
719
722
 
@@ -916,6 +919,7 @@ class StepComponentViewContextFactory {
916
919
  static create(stepContext, componentContext) {
917
920
  return {
918
921
  getStepIconUrl: () => componentContext.iconProvider.getIconUrl(stepContext.step),
922
+ getStepName: () => componentContext.i18n(`step.${stepContext.step.type}.name`, stepContext.step.name),
919
923
  createSequenceComponent: (parentElement, sequence) => {
920
924
  const sequenceContext = {
921
925
  sequence,
@@ -925,7 +929,8 @@ class StepComponentViewContextFactory {
925
929
  };
926
930
  return componentContext.services.sequenceComponent.create(parentElement, sequenceContext, componentContext);
927
931
  },
928
- createPlaceholderForArea: componentContext.services.placeholder.createForArea.bind(componentContext.services.placeholder)
932
+ createPlaceholderForArea: componentContext.services.placeholder.createForArea.bind(componentContext.services.placeholder),
933
+ i18n: componentContext.i18n
929
934
  };
930
935
  }
931
936
  }
@@ -944,18 +949,19 @@ class StepComponentFactory {
944
949
  }
945
950
 
946
951
  class ComponentContext {
947
- static create(stepsConfiguration, validatorConfiguration, state, stepExtensionResolver, services) {
952
+ static create(stepsConfiguration, validatorConfiguration, state, stepExtensionResolver, i18n, services) {
948
953
  const validator = new DefinitionValidator(validatorConfiguration, state);
949
954
  const iconProvider = new IconProvider(stepsConfiguration);
950
955
  const placeholderController = services.placeholderController.create();
951
956
  const stepComponentFactory = new StepComponentFactory(stepExtensionResolver);
952
- return new ComponentContext(validator, iconProvider, placeholderController, stepComponentFactory, services);
957
+ return new ComponentContext(validator, iconProvider, placeholderController, stepComponentFactory, i18n, services);
953
958
  }
954
- constructor(validator, iconProvider, placeholderController, stepComponentFactory, services) {
959
+ constructor(validator, iconProvider, placeholderController, stepComponentFactory, i18n, services) {
955
960
  this.validator = validator;
956
961
  this.iconProvider = iconProvider;
957
962
  this.placeholderController = placeholderController;
958
963
  this.stepComponentFactory = stepComponentFactory;
964
+ this.i18n = i18n;
959
965
  this.services = services;
960
966
  }
961
967
  }
@@ -1481,7 +1487,8 @@ const createContainerStepComponentViewFactory = (cfg) => (parentElement, stepCon
1481
1487
  const { step } = stepContext;
1482
1488
  const g = ComponentDom.stepG('container', step.type, step.id);
1483
1489
  parentElement.appendChild(g);
1484
- const labelView = LabelView.create(g, cfg.paddingTop, cfg.label, step.name, 'primary');
1490
+ const name = viewContext.getStepName();
1491
+ const labelView = LabelView.create(g, cfg.paddingTop, cfg.label, name, 'primary');
1485
1492
  const sequenceComponent = viewContext.createSequenceComponent(g, step.sequence);
1486
1493
  const halfOfWidestElement = labelView.width / 2;
1487
1494
  const offsetLeft = Math.max(halfOfWidestElement - sequenceComponent.view.joinX, 0) + cfg.paddingX;
@@ -1533,9 +1540,11 @@ const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, view
1533
1540
  });
1534
1541
  const branchLabelViews = branchNames.map(branchName => {
1535
1542
  const labelY = cfg.paddingTop + cfg.nameLabel.height + cfg.connectionHeight;
1536
- return LabelView.create(g, labelY, cfg.branchNameLabel, branchName, 'secondary');
1543
+ const translatedBranchName = viewContext.i18n(`stepComponent.${step.type}.branchName`, branchName);
1544
+ return LabelView.create(g, labelY, cfg.branchNameLabel, translatedBranchName, 'secondary');
1537
1545
  });
1538
- const nameLabelView = LabelView.create(g, cfg.paddingTop, cfg.nameLabel, step.name, 'primary');
1546
+ const name = viewContext.getStepName();
1547
+ const nameLabelView = LabelView.create(g, cfg.paddingTop, cfg.nameLabel, name, 'primary');
1539
1548
  let prevOffsetX = 0;
1540
1549
  const branchSizes = branchComponents.map((component, i) => {
1541
1550
  const halfOfWidestBranchElement = Math.max(branchLabelViews[i].width, cfg.minContainerWidth) / 2;
@@ -1634,7 +1643,7 @@ const createTaskStepComponentViewFactory = (isInterrupted, cfg) => (parentElemen
1634
1643
  y: boxHeight / 2,
1635
1644
  class: 'sqd-step-task-text'
1636
1645
  });
1637
- text.textContent = step.name;
1646
+ text.textContent = viewContext.getStepName();
1638
1647
  g.appendChild(text);
1639
1648
  const textWidth = Math.max(text.getBBox().width, cfg.minTextWidth);
1640
1649
  const boxWidth = cfg.iconSize + cfg.paddingLeft + cfg.paddingRight + cfg.textMarginLeft + textWidth;
@@ -2470,7 +2479,7 @@ class WorkspaceControllerWrapper {
2470
2479
 
2471
2480
  class DesignerContext {
2472
2481
  static create(parent, startDefinition, configuration, services) {
2473
- var _a, _b, _c;
2482
+ var _a, _b, _c, _d;
2474
2483
  const definition = ObjectCloner.deepClone(startDefinition);
2475
2484
  const layoutController = new LayoutController(parent);
2476
2485
  const isReadonly = !!configuration.isReadonly;
@@ -2482,22 +2491,24 @@ class DesignerContext {
2482
2491
  const behaviorController = new BehaviorController();
2483
2492
  const stepExtensionResolver = StepExtensionResolver.create(services);
2484
2493
  const definitionWalker = (_c = configuration.definitionWalker) !== null && _c !== void 0 ? _c : new DefinitionWalker();
2494
+ const i18n = (_d = configuration.i18n) !== null && _d !== void 0 ? _d : ((_, defaultValue) => defaultValue);
2485
2495
  const stateModifier = StateModifier.create(definitionWalker, state, configuration);
2486
2496
  const customActionController = new CustomActionController(configuration, state, stateModifier);
2487
2497
  let historyController = undefined;
2488
2498
  if (configuration.undoStackSize) {
2489
2499
  historyController = HistoryController.create(configuration.undoStack, state, stateModifier, configuration);
2490
2500
  }
2491
- const componentContext = ComponentContext.create(configuration.steps, configuration.validator, state, stepExtensionResolver, services);
2492
- return new DesignerContext(theme, state, configuration, services, componentContext, definitionWalker, stateModifier, layoutController, workspaceController, behaviorController, customActionController, historyController);
2501
+ const componentContext = ComponentContext.create(configuration.steps, configuration.validator, state, stepExtensionResolver, i18n, services);
2502
+ return new DesignerContext(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, behaviorController, customActionController, historyController);
2493
2503
  }
2494
- constructor(theme, state, configuration, services, componentContext, definitionWalker, stateModifier, layoutController, workspaceController, behaviorController, customActionController, historyController) {
2504
+ constructor(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, behaviorController, customActionController, historyController) {
2495
2505
  this.theme = theme;
2496
2506
  this.state = state;
2497
2507
  this.configuration = configuration;
2498
2508
  this.services = services;
2499
2509
  this.componentContext = componentContext;
2500
2510
  this.definitionWalker = definitionWalker;
2511
+ this.i18n = i18n;
2501
2512
  this.stateModifier = stateModifier;
2502
2513
  this.layoutController = layoutController;
2503
2514
  this.workspaceController = workspaceController;
@@ -2910,8 +2921,9 @@ class ContextMenuController {
2910
2921
  }
2911
2922
 
2912
2923
  class ContextMenuItemsBuilder {
2913
- constructor(viewportApi, stateModifier, state, customMenuItemsProvider) {
2924
+ constructor(viewportApi, i18n, stateModifier, state, customMenuItemsProvider) {
2914
2925
  this.viewportApi = viewportApi;
2926
+ this.i18n = i18n;
2915
2927
  this.stateModifier = stateModifier;
2916
2928
  this.state = state;
2917
2929
  this.customMenuItemsProvider = customMenuItemsProvider;
@@ -2922,15 +2934,16 @@ class ContextMenuItemsBuilder {
2922
2934
  const ssc = commandOrNull;
2923
2935
  const step = ssc.component.step;
2924
2936
  const parentSequence = ssc.component.parentSequence;
2937
+ const name = this.i18n(`step.${step.type}.name`, step.name);
2925
2938
  items.push({
2926
- label: step.name,
2939
+ label: name,
2927
2940
  order: 0
2928
2941
  });
2929
2942
  this.tryAppendCustomItems(items, step, parentSequence);
2930
2943
  if (this.stateModifier.isSelectable(step, parentSequence)) {
2931
2944
  if (this.state.selectedStepId === step.id) {
2932
2945
  items.push({
2933
- label: `Unselect`,
2946
+ label: this.i18n('contextMenu.unselect', 'Unselect'),
2934
2947
  order: 10,
2935
2948
  callback: () => {
2936
2949
  this.state.setSelectedStepId(null);
@@ -2939,7 +2952,7 @@ class ContextMenuItemsBuilder {
2939
2952
  }
2940
2953
  else {
2941
2954
  items.push({
2942
- label: 'Select',
2955
+ label: this.i18n('contextMenu.select', 'Select'),
2943
2956
  order: 20,
2944
2957
  callback: () => {
2945
2958
  this.stateModifier.trySelectStepById(step.id);
@@ -2950,7 +2963,7 @@ class ContextMenuItemsBuilder {
2950
2963
  if (!this.state.isReadonly) {
2951
2964
  if (this.stateModifier.isDeletable(step.id)) {
2952
2965
  items.push({
2953
- label: 'Delete',
2966
+ label: this.i18n('contextMenu.delete', 'Delete'),
2954
2967
  order: 30,
2955
2968
  callback: () => {
2956
2969
  this.stateModifier.tryDelete(step.id);
@@ -2959,7 +2972,7 @@ class ContextMenuItemsBuilder {
2959
2972
  }
2960
2973
  if (this.stateModifier.isDuplicable(step, parentSequence)) {
2961
2974
  items.push({
2962
- label: 'Duplicate',
2975
+ label: this.i18n('contextMenu.duplicate', 'Duplicate'),
2963
2976
  order: 40,
2964
2977
  callback: () => {
2965
2978
  this.stateModifier.tryDuplicate(step, parentSequence);
@@ -2972,7 +2985,7 @@ class ContextMenuItemsBuilder {
2972
2985
  this.tryAppendCustomItems(items, null, this.state.definition.sequence);
2973
2986
  }
2974
2987
  items.push({
2975
- label: 'Reset view',
2988
+ label: this.i18n('contextMenu.resetView', 'Reset view'),
2976
2989
  order: 50,
2977
2990
  callback: () => {
2978
2991
  this.viewportApi.resetViewport();
@@ -2997,7 +3010,7 @@ class Workspace {
2997
3010
  const view = WorkspaceView.create(parent, designerContext.componentContext);
2998
3011
  const clickBehaviorResolver = new ClickBehaviorResolver(designerContext);
2999
3012
  const wheelController = designerContext.services.wheelController.create(api.workspace);
3000
- const contextMenuItemsBuilder = new ContextMenuItemsBuilder(api.viewport, designerContext.stateModifier, designerContext.state, ((_a = designerContext.services.contextMenu) === null || _a === void 0 ? void 0 : _a.createItemsProvider)
3013
+ const contextMenuItemsBuilder = new ContextMenuItemsBuilder(api.viewport, api.i18n, designerContext.stateModifier, designerContext.state, ((_a = designerContext.services.contextMenu) === null || _a === void 0 ? void 0 : _a.createItemsProvider)
3001
3014
  ? designerContext.services.contextMenu.createItemsProvider(designerContext.customActionController)
3002
3015
  : undefined);
3003
3016
  const contextMenuController = new ContextMenuController(designerContext.theme, designerContext.configuration, contextMenuItemsBuilder);
@@ -3244,28 +3257,28 @@ class DefaultDraggedComponentExtension {
3244
3257
  }
3245
3258
 
3246
3259
  class ControlBarView {
3247
- static create(parent, isUndoRedoSupported) {
3260
+ static create(parent, isUndoRedoSupported, i18n) {
3248
3261
  const root = Dom.element('div', {
3249
3262
  class: 'sqd-control-bar'
3250
3263
  });
3251
- const resetButton = createButton(Icons.center, 'Reset view');
3264
+ const resetButton = createButton(Icons.center, i18n('controlBar.resetView', 'Reset view'));
3252
3265
  root.appendChild(resetButton);
3253
- const zoomInButton = createButton(Icons.zoomIn, 'Zoom in');
3266
+ const zoomInButton = createButton(Icons.zoomIn, i18n('controlBar.zoomIn', 'Zoom in'));
3254
3267
  root.appendChild(zoomInButton);
3255
- const zoomOutButton = createButton(Icons.zoomOut, 'Zoom out');
3268
+ const zoomOutButton = createButton(Icons.zoomOut, i18n('controlBar.zoomOut', 'Zoom out'));
3256
3269
  root.appendChild(zoomOutButton);
3257
3270
  let undoButton = null;
3258
3271
  let redoButton = null;
3259
3272
  if (isUndoRedoSupported) {
3260
- undoButton = createButton(Icons.undo, 'Undo');
3273
+ undoButton = createButton(Icons.undo, i18n('controlBar.undo', 'Undo'));
3261
3274
  root.appendChild(undoButton);
3262
- redoButton = createButton(Icons.redo, 'Redo');
3275
+ redoButton = createButton(Icons.redo, i18n('controlBar.redo', 'Redo'));
3263
3276
  root.appendChild(redoButton);
3264
3277
  }
3265
- const disableDragButton = createButton(Icons.move, 'Turn on/off drag and drop');
3278
+ const disableDragButton = createButton(Icons.move, i18n('controlBar.turnOnOffDragAndDrop', 'Turn on/off drag and drop'));
3266
3279
  disableDragButton.classList.add('sqd-disabled');
3267
3280
  root.appendChild(disableDragButton);
3268
- const deleteButton = createButton(Icons.delete, 'Delete selected step');
3281
+ const deleteButton = createButton(Icons.delete, i18n('controlBar.deleteSelectedStep', 'Delete selected step'));
3269
3282
  deleteButton.classList.add('sqd-delete');
3270
3283
  deleteButton.classList.add('sqd-hidden');
3271
3284
  root.appendChild(deleteButton);
@@ -3346,7 +3359,7 @@ function createButton(d, title) {
3346
3359
  class ControlBar {
3347
3360
  static create(parent, api) {
3348
3361
  const isUndoRedoSupported = api.controlBar.isUndoRedoSupported();
3349
- const view = ControlBarView.create(parent, isUndoRedoSupported);
3362
+ const view = ControlBarView.create(parent, isUndoRedoSupported, api.i18n);
3350
3363
  const bar = new ControlBar(view, api.controlBar, isUndoRedoSupported);
3351
3364
  view.bindResetButtonClick(() => bar.onResetButtonClicked());
3352
3365
  view.bindZoomInButtonClick(() => bar.onZoomInButtonClicked());
@@ -3476,19 +3489,16 @@ class KeyboardDaemonExtension {
3476
3489
  }
3477
3490
 
3478
3491
  class SmartEditorView {
3479
- static create(parent, api, configuration) {
3492
+ static create(parent, api, i18n, configuration) {
3480
3493
  const root = Dom.element('div', {
3481
3494
  class: 'sqd-smart-editor'
3482
3495
  });
3483
3496
  const toggle = Dom.element('div', {
3484
3497
  class: 'sqd-smart-editor-toggle',
3485
- title: 'Toggle editor'
3498
+ title: i18n('smartEditor.toggle', 'Toggle editor')
3486
3499
  });
3487
3500
  parent.appendChild(toggle);
3488
3501
  parent.appendChild(root);
3489
- if (configuration.globalEditorProvider) {
3490
- throw new Error('globalEditorProvider is renamed to rootEditorProvider');
3491
- }
3492
3502
  const editor = Editor.create(root, api, 'sqd-editor sqd-step-editor', configuration.stepEditorProvider, 'sqd-editor sqd-root-editor', configuration.rootEditorProvider, null);
3493
3503
  return new SmartEditorView(root, toggle, editor);
3494
3504
  }
@@ -3519,7 +3529,7 @@ class SmartEditorView {
3519
3529
 
3520
3530
  class SmartEditor {
3521
3531
  static create(parent, api, configuration) {
3522
- const view = SmartEditorView.create(parent, api.editor, configuration);
3532
+ const view = SmartEditorView.create(parent, api.editor, api.i18n, configuration);
3523
3533
  const editor = new SmartEditor(view, api.editor, api.workspace);
3524
3534
  editor.updateVisibility();
3525
3535
  view.bindToggleClick(() => editor.onToggleClicked());
@@ -3762,7 +3772,7 @@ class ToolboxItem {
3762
3772
  }
3763
3773
 
3764
3774
  class ToolboxView {
3765
- static create(parent, api) {
3775
+ static create(parent, api, i18n) {
3766
3776
  const root = Dom.element('div', {
3767
3777
  class: 'sqd-toolbox'
3768
3778
  });
@@ -3772,14 +3782,14 @@ class ToolboxView {
3772
3782
  const headerTitle = Dom.element('div', {
3773
3783
  class: 'sqd-toolbox-header-title'
3774
3784
  });
3775
- headerTitle.innerText = 'Toolbox';
3785
+ headerTitle.innerText = i18n('toolbox.title', 'Toolbox');
3776
3786
  const body = Dom.element('div', {
3777
3787
  class: 'sqd-toolbox-body'
3778
3788
  });
3779
3789
  const filterInput = Dom.element('input', {
3780
3790
  class: 'sqd-toolbox-filter',
3781
3791
  type: 'text',
3782
- placeholder: 'Search...'
3792
+ placeholder: i18n('toolbox.search', 'Search...')
3783
3793
  });
3784
3794
  root.appendChild(header);
3785
3795
  root.appendChild(body);
@@ -3839,9 +3849,9 @@ class ToolboxView {
3839
3849
  }
3840
3850
 
3841
3851
  class Toolbox {
3842
- static create(root, api) {
3852
+ static create(root, api, i18n) {
3843
3853
  const allGroups = api.getAllGroups();
3844
- const view = ToolboxView.create(root, api);
3854
+ const view = ToolboxView.create(root, api, i18n);
3845
3855
  const toolbox = new Toolbox(view, api, allGroups);
3846
3856
  toolbox.render();
3847
3857
  toolbox.onIsCollapsedChanged();
@@ -3876,7 +3886,7 @@ class Toolbox {
3876
3886
 
3877
3887
  class ToolboxExtension {
3878
3888
  create(root, api) {
3879
- return Toolbox.create(root, api.toolbox);
3889
+ return Toolbox.create(root, api.toolbox, api.i18n);
3880
3890
  }
3881
3891
  }
3882
3892
 
package/lib/index.d.ts CHANGED
@@ -272,8 +272,9 @@ declare class ComponentContext {
272
272
  readonly iconProvider: IconProvider;
273
273
  readonly placeholderController: PlaceholderController;
274
274
  readonly stepComponentFactory: StepComponentFactory;
275
+ readonly i18n: I18n;
275
276
  readonly services: Services;
276
- static create(stepsConfiguration: StepsConfiguration, validatorConfiguration: ValidatorConfiguration | undefined, state: DesignerState, stepExtensionResolver: StepExtensionResolver, services: Services): ComponentContext;
277
+ static create(stepsConfiguration: StepsConfiguration, validatorConfiguration: ValidatorConfiguration | undefined, state: DesignerState, stepExtensionResolver: StepExtensionResolver, i18n: I18n, services: Services): ComponentContext;
277
278
  private constructor();
278
279
  }
279
280
 
@@ -342,6 +343,7 @@ declare class DesignerContext {
342
343
  readonly services: Services;
343
344
  readonly componentContext: ComponentContext;
344
345
  readonly definitionWalker: DefinitionWalker;
346
+ readonly i18n: I18n;
345
347
  readonly stateModifier: StateModifier;
346
348
  readonly layoutController: LayoutController;
347
349
  readonly workspaceController: WorkspaceControllerWrapper;
@@ -349,7 +351,7 @@ declare class DesignerContext {
349
351
  readonly customActionController: CustomActionController;
350
352
  readonly historyController: HistoryController | undefined;
351
353
  static create(parent: HTMLElement, startDefinition: Definition, configuration: DesignerConfiguration, services: Services): DesignerContext;
352
- constructor(theme: string, state: DesignerState, configuration: DesignerConfiguration, services: Services, componentContext: ComponentContext, definitionWalker: DefinitionWalker, stateModifier: StateModifier, layoutController: LayoutController, workspaceController: WorkspaceControllerWrapper, behaviorController: BehaviorController, customActionController: CustomActionController, historyController: HistoryController | undefined);
354
+ constructor(theme: string, state: DesignerState, configuration: DesignerConfiguration, services: Services, componentContext: ComponentContext, definitionWalker: DefinitionWalker, i18n: I18n, stateModifier: StateModifier, layoutController: LayoutController, workspaceController: WorkspaceControllerWrapper, behaviorController: BehaviorController, customActionController: CustomActionController, historyController: HistoryController | undefined);
353
355
  setWorkspaceController(controller: WorkspaceController): void;
354
356
  }
355
357
 
@@ -405,8 +407,9 @@ declare class PathBarApi {
405
407
 
406
408
  declare class ToolboxDataProvider {
407
409
  private readonly iconProvider;
410
+ private readonly i18n;
408
411
  private readonly configuration;
409
- constructor(iconProvider: IconProvider, configuration: ToolboxConfiguration | false);
412
+ constructor(iconProvider: IconProvider, i18n: I18n, configuration: ToolboxConfiguration | false);
410
413
  getAllGroups(): ToolboxGroupData[];
411
414
  private readonly createItemData;
412
415
  applyFilter(allGroups: ToolboxGroupData[], filter: string | undefined): ToolboxGroupData[];
@@ -475,6 +478,7 @@ declare class DesignerApi {
475
478
  readonly viewport: ViewportApi;
476
479
  readonly pathBar: PathBarApi;
477
480
  readonly definitionWalker: DefinitionWalker;
481
+ readonly i18n: I18n;
478
482
  static create(context: DesignerContext): DesignerApi;
479
483
  private constructor();
480
484
  }
@@ -724,9 +728,11 @@ interface StepExtension<S extends Step = Step> {
724
728
  }
725
729
  type StepComponentViewFactory = StepExtension['createComponentView'];
726
730
  interface StepComponentViewContext {
731
+ getStepName(): string;
727
732
  getStepIconUrl(): string | null;
728
733
  createSequenceComponent(parentElement: SVGElement, sequence: Sequence): SequenceComponent;
729
734
  createPlaceholderForArea(parentElement: SVGElement, size: Vector, direction: PlaceholderDirection, sequence: Sequence, index: number): Placeholder;
735
+ i18n: I18n;
730
736
  }
731
737
  interface StepContext<S extends Step = Step> {
732
738
  parentSequence: Sequence;
@@ -892,8 +898,13 @@ interface DesignerConfiguration<TDefinition extends Definition = Definition> {
892
898
  * @description Custom generator of unique identifiers.
893
899
  */
894
900
  uidGenerator?: UidGenerator;
901
+ /**
902
+ * @description Custom translation function.
903
+ */
904
+ i18n?: I18n;
895
905
  }
896
906
  type UidGenerator = () => string;
907
+ type I18n = (key: string, defaultValue: string) => string;
897
908
  type CustomActionHandler = (action: CustomAction, step: Step | null, sequence: Sequence, context: CustomActionHandlerContext) => void;
898
909
  interface CustomAction {
899
910
  type: string;
@@ -1214,4 +1225,4 @@ declare class StepsDesignerExtension implements DesignerExtension {
1214
1225
  protected constructor(steps: StepExtension<Step>[]);
1215
1226
  }
1216
1227
 
1217
- export { Attributes, Badge, BadgeExtension, BadgeView, Badges, BadgesResult, BaseClickCommand, CenteredViewportCalculator, ClassicWheelControllerExtension, ClickCommand, ClickCommandType, ClickDetails, Component, ComponentContext, ComponentDom, ComponentView, ContainerStepComponentViewConfiguration, ContainerStepExtensionConfiguration, ContextMenuExtension, ContextMenuItem, ContextMenuItemsProvider, ControlBarApi, CustomAction, CustomActionController, CustomActionHandler, CustomActionHandlerContext, Daemon, DaemonExtension, DefaultSequenceComponent, DefaultSequenceComponentView, DefaultViewportController, DefaultViewportControllerExtension, DefinitionChangeType, DefinitionChangedEvent, Designer, DesignerApi, DesignerConfiguration, DesignerContext, DesignerExtension, DesignerState, Dom, DraggedComponent, DraggedComponentExtension, Editor, EditorApi, EditorsConfiguration, Grid, GridExtension, Icons, InputView, JoinView, KeyboardAction, KeyboardConfiguration, LabelView, LineGridConfiguration, LineGridDesignerExtension, ObjectCloner, OpenFolderClickCommand, OutputView, PathBarApi, Placeholder, PlaceholderController, PlaceholderControllerExtension, PlaceholderDirection, PlaceholderExtension, PlaceholderView, QuantifiedScaleViewportCalculator, RectPlaceholder, RectPlaceholderConfiguration, RectPlaceholderView, RegionView, RerenderStepClickCommand, RootComponentExtension, RootEditorContext, RootEditorProvider, RootValidator, SelectStepClickCommand, SelectedStepIdProvider, SequenceComponent, SequenceComponentExtension, SequenceContext, SequencePlaceIndicator, Services, ServicesResolver, SimpleEvent, SimpleEventListener, StateModifierDependency, StepComponent, StepComponentView, StepComponentViewContext, StepComponentViewFactory, StepComponentViewWrapperExtension, StepContext, StepDefinition, StepDescriptionProvider, StepEditorContext, StepEditorProvider, StepExtension, StepExtensionResolver, StepIconUrlProvider, StepLabelProvider, StepValidator, StepsConfiguration, StepsDesignerExtension, StepsDesignerExtensionConfiguration, SwitchStepComponentViewConfiguration, SwitchStepExtensionConfiguration, TaskStepComponentViewConfiguration, TaskStepExtensionConfiguration, ToolboxApi, ToolboxConfiguration, ToolboxGroupConfiguration, TriggerCustomActionClickCommand, UiComponent, UiComponentExtension, Uid, UidGenerator, UndoStack, UndoStackItem, ValidationErrorBadgeExtension, ValidationErrorBadgeExtensionConfiguration, ValidationErrorBadgeViewConfiguration, ValidatorConfiguration, Vector, Viewport, ViewportController, ViewportControllerExtension, WheelController, WheelControllerExtension, WorkspaceApi, createContainerStepComponentViewFactory, createSwitchStepComponentViewFactory, createTaskStepComponentViewFactory, getAbsolutePosition, race };
1228
+ export { Attributes, Badge, BadgeExtension, BadgeView, Badges, BadgesResult, BaseClickCommand, CenteredViewportCalculator, ClassicWheelControllerExtension, ClickCommand, ClickCommandType, ClickDetails, Component, ComponentContext, ComponentDom, ComponentView, ContainerStepComponentViewConfiguration, ContainerStepExtensionConfiguration, ContextMenuExtension, ContextMenuItem, ContextMenuItemsProvider, ControlBarApi, CustomAction, CustomActionController, CustomActionHandler, CustomActionHandlerContext, Daemon, DaemonExtension, DefaultSequenceComponent, DefaultSequenceComponentView, DefaultViewportController, DefaultViewportControllerExtension, DefinitionChangeType, DefinitionChangedEvent, Designer, DesignerApi, DesignerConfiguration, DesignerContext, DesignerExtension, DesignerState, Dom, DraggedComponent, DraggedComponentExtension, Editor, EditorApi, EditorsConfiguration, Grid, GridExtension, I18n, Icons, InputView, JoinView, KeyboardAction, KeyboardConfiguration, LabelView, LineGridConfiguration, LineGridDesignerExtension, ObjectCloner, OpenFolderClickCommand, OutputView, PathBarApi, Placeholder, PlaceholderController, PlaceholderControllerExtension, PlaceholderDirection, PlaceholderExtension, PlaceholderView, QuantifiedScaleViewportCalculator, RectPlaceholder, RectPlaceholderConfiguration, RectPlaceholderView, RegionView, RerenderStepClickCommand, RootComponentExtension, RootEditorContext, RootEditorProvider, RootValidator, SelectStepClickCommand, SelectedStepIdProvider, SequenceComponent, SequenceComponentExtension, SequenceContext, SequencePlaceIndicator, Services, ServicesResolver, SimpleEvent, SimpleEventListener, StateModifierDependency, StepComponent, StepComponentView, StepComponentViewContext, StepComponentViewFactory, StepComponentViewWrapperExtension, StepContext, StepDefinition, StepDescriptionProvider, StepEditorContext, StepEditorProvider, StepExtension, StepExtensionResolver, StepIconUrlProvider, StepLabelProvider, StepValidator, StepsConfiguration, StepsDesignerExtension, StepsDesignerExtensionConfiguration, SwitchStepComponentViewConfiguration, SwitchStepExtensionConfiguration, TaskStepComponentViewConfiguration, TaskStepExtensionConfiguration, ToolboxApi, ToolboxConfiguration, ToolboxGroupConfiguration, TriggerCustomActionClickCommand, UiComponent, UiComponentExtension, Uid, UidGenerator, UndoStack, UndoStackItem, ValidationErrorBadgeExtension, ValidationErrorBadgeExtensionConfiguration, ValidationErrorBadgeViewConfiguration, ValidatorConfiguration, Vector, Viewport, ViewportController, ViewportControllerExtension, WheelController, WheelControllerExtension, WorkspaceApi, createContainerStepComponentViewFactory, createSwitchStepComponentViewFactory, createTaskStepComponentViewFactory, getAbsolutePosition, race };
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.19.4",
4
+ "version": "0.20.0",
5
5
  "type": "module",
6
6
  "main": "./lib/esm/index.js",
7
7
  "types": "./lib/index.d.ts",