sequential-workflow-designer 0.19.3 → 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 +106 -92
  3. package/lib/cjs/index.cjs +106 -92
  4. package/lib/esm/index.js +106 -93
  5. package/lib/index.d.ts +28 -13
  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.3/css/designer.css" rel="stylesheet">
104
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.3/css/designer-light.css" rel="stylesheet">
105
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.3/css/designer-dark.css" rel="stylesheet">
106
- <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.3/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
  }
@@ -1140,6 +1146,15 @@
1140
1146
  }
1141
1147
  }
1142
1148
 
1149
+ class ComponentDom {
1150
+ static stepG(componentClassName, type, id) {
1151
+ return Dom.svg('g', {
1152
+ class: `sqd-step-${componentClassName} sqd-type-${type}`,
1153
+ 'data-step-id': id
1154
+ });
1155
+ }
1156
+ }
1157
+
1143
1158
  class InputView {
1144
1159
  static createRectInput(parent, x, y, size, iconSize, iconUrl) {
1145
1160
  const g = Dom.svg('g');
@@ -1345,43 +1360,6 @@
1345
1360
  return line;
1346
1361
  }
1347
1362
 
1348
- class RectPlaceholderView {
1349
- static create(parent, width, height, radius, iconSize, direction) {
1350
- const g = Dom.svg('g', {
1351
- visibility: 'hidden',
1352
- class: 'sqd-placeholder'
1353
- });
1354
- parent.appendChild(g);
1355
- const rect = Dom.svg('rect', {
1356
- class: 'sqd-placeholder-rect',
1357
- width,
1358
- height,
1359
- rx: radius,
1360
- ry: radius
1361
- });
1362
- g.appendChild(rect);
1363
- if (direction) {
1364
- const iconD = direction === exports.PlaceholderDirection.in ? Icons.folderIn : Icons.folderOut;
1365
- const icon = Icons.appendPath(g, 'sqd-placeholder-icon-path', iconD, iconSize);
1366
- Dom.translate(icon, (width - iconSize) / 2, (height - iconSize) / 2);
1367
- }
1368
- parent.appendChild(g);
1369
- return new RectPlaceholderView(rect, g);
1370
- }
1371
- constructor(rect, g) {
1372
- this.rect = rect;
1373
- this.g = g;
1374
- }
1375
- setIsHover(isHover) {
1376
- Dom.toggleClass(this.g, isHover, 'sqd-hover');
1377
- }
1378
- setIsVisible(isVisible) {
1379
- Dom.attrs(this.g, {
1380
- visibility: isVisible ? 'visible' : 'hidden'
1381
- });
1382
- }
1383
- }
1384
-
1385
1363
  class DefaultSequenceComponentView {
1386
1364
  static create(parent, sequenceContext, componentContext) {
1387
1365
  const phWidth = componentContext.services.placeholder.gapSize.x;
@@ -1510,11 +1488,10 @@
1510
1488
 
1511
1489
  const createContainerStepComponentViewFactory = (cfg) => (parentElement, stepContext, viewContext) => {
1512
1490
  const { step } = stepContext;
1513
- const g = Dom.svg('g', {
1514
- class: `sqd-step-container sqd-type-${step.type}`
1515
- });
1491
+ const g = ComponentDom.stepG('container', step.type, step.id);
1516
1492
  parentElement.appendChild(g);
1517
- 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');
1518
1495
  const sequenceComponent = viewContext.createSequenceComponent(g, step.sequence);
1519
1496
  const halfOfWidestElement = labelView.width / 2;
1520
1497
  const offsetLeft = Math.max(halfOfWidestElement - sequenceComponent.view.joinX, 0) + cfg.paddingX;
@@ -1558,9 +1535,7 @@
1558
1535
 
1559
1536
  const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, viewContext) => {
1560
1537
  const { step } = stepContext;
1561
- const g = Dom.svg('g', {
1562
- class: `sqd-step-switch sqd-type-${step.type}`
1563
- });
1538
+ const g = ComponentDom.stepG('switch', step.type, step.id);
1564
1539
  parent.appendChild(g);
1565
1540
  const branchNames = Object.keys(step.branches);
1566
1541
  const branchComponents = branchNames.map(branchName => {
@@ -1568,9 +1543,11 @@
1568
1543
  });
1569
1544
  const branchLabelViews = branchNames.map(branchName => {
1570
1545
  const labelY = cfg.paddingTop + cfg.nameLabel.height + cfg.connectionHeight;
1571
- 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');
1572
1548
  });
1573
- 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');
1574
1551
  let prevOffsetX = 0;
1575
1552
  const branchSizes = branchComponents.map((component, i) => {
1576
1553
  const halfOfWidestBranchElement = Math.max(branchLabelViews[i].width, cfg.minContainerWidth) / 2;
@@ -1661,9 +1638,7 @@
1661
1638
 
1662
1639
  const createTaskStepComponentViewFactory = (isInterrupted, cfg) => (parentElement, stepContext, viewContext) => {
1663
1640
  const { step } = stepContext;
1664
- const g = Dom.svg('g', {
1665
- class: `sqd-step-task sqd-type-${step.type}`
1666
- });
1641
+ const g = ComponentDom.stepG('task', step.type, step.id);
1667
1642
  parentElement.appendChild(g);
1668
1643
  const boxHeight = cfg.paddingY * 2 + cfg.iconSize;
1669
1644
  const text = Dom.svg('text', {
@@ -1671,7 +1646,7 @@
1671
1646
  y: boxHeight / 2,
1672
1647
  class: 'sqd-step-task-text'
1673
1648
  });
1674
- text.textContent = step.name;
1649
+ text.textContent = viewContext.getStepName();
1675
1650
  g.appendChild(text);
1676
1651
  const textWidth = Math.max(text.getBBox().width, cfg.minTextWidth);
1677
1652
  const boxWidth = cfg.iconSize + cfg.paddingLeft + cfg.paddingRight + cfg.textMarginLeft + textWidth;
@@ -1943,6 +1918,43 @@
1943
1918
  }
1944
1919
  }
1945
1920
 
1921
+ class RectPlaceholderView {
1922
+ static create(parent, width, height, radius, iconSize, direction) {
1923
+ const g = Dom.svg('g', {
1924
+ visibility: 'hidden',
1925
+ class: 'sqd-placeholder'
1926
+ });
1927
+ parent.appendChild(g);
1928
+ const rect = Dom.svg('rect', {
1929
+ class: 'sqd-placeholder-rect',
1930
+ width,
1931
+ height,
1932
+ rx: radius,
1933
+ ry: radius
1934
+ });
1935
+ g.appendChild(rect);
1936
+ if (direction) {
1937
+ const iconD = direction === exports.PlaceholderDirection.in ? Icons.folderIn : Icons.folderOut;
1938
+ const icon = Icons.appendPath(g, 'sqd-placeholder-icon-path', iconD, iconSize);
1939
+ Dom.translate(icon, (width - iconSize) / 2, (height - iconSize) / 2);
1940
+ }
1941
+ parent.appendChild(g);
1942
+ return new RectPlaceholderView(rect, g);
1943
+ }
1944
+ constructor(rect, g) {
1945
+ this.rect = rect;
1946
+ this.g = g;
1947
+ }
1948
+ setIsHover(isHover) {
1949
+ Dom.toggleClass(this.g, isHover, 'sqd-hover');
1950
+ }
1951
+ setIsVisible(isVisible) {
1952
+ Dom.attrs(this.g, {
1953
+ visibility: isVisible ? 'visible' : 'hidden'
1954
+ });
1955
+ }
1956
+ }
1957
+
1946
1958
  class RectPlaceholder {
1947
1959
  static create(parent, size, direction, sequence, index, configuration) {
1948
1960
  const view = RectPlaceholderView.create(parent, size.x, size.y, configuration.radius, configuration.iconSize, direction);
@@ -2653,7 +2665,7 @@
2653
2665
 
2654
2666
  class DesignerContext {
2655
2667
  static create(parent, startDefinition, configuration, services) {
2656
- var _a, _b, _c;
2668
+ var _a, _b, _c, _d;
2657
2669
  const definition = ObjectCloner.deepClone(startDefinition);
2658
2670
  const layoutController = new LayoutController(parent);
2659
2671
  const isReadonly = !!configuration.isReadonly;
@@ -2665,22 +2677,24 @@
2665
2677
  const behaviorController = new BehaviorController();
2666
2678
  const stepExtensionResolver = StepExtensionResolver.create(services);
2667
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);
2668
2681
  const stateModifier = StateModifier.create(definitionWalker, state, configuration);
2669
2682
  const customActionController = new CustomActionController(configuration, state, stateModifier);
2670
2683
  let historyController = undefined;
2671
2684
  if (configuration.undoStackSize) {
2672
2685
  historyController = HistoryController.create(configuration.undoStack, state, stateModifier, configuration);
2673
2686
  }
2674
- const componentContext = ComponentContext.create(configuration.steps, configuration.validator, state, stepExtensionResolver, services);
2675
- 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);
2676
2689
  }
2677
- 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) {
2678
2691
  this.theme = theme;
2679
2692
  this.state = state;
2680
2693
  this.configuration = configuration;
2681
2694
  this.services = services;
2682
2695
  this.componentContext = componentContext;
2683
2696
  this.definitionWalker = definitionWalker;
2697
+ this.i18n = i18n;
2684
2698
  this.stateModifier = stateModifier;
2685
2699
  this.layoutController = layoutController;
2686
2700
  this.workspaceController = workspaceController;
@@ -3093,8 +3107,9 @@
3093
3107
  }
3094
3108
 
3095
3109
  class ContextMenuItemsBuilder {
3096
- constructor(viewportApi, stateModifier, state, customMenuItemsProvider) {
3110
+ constructor(viewportApi, i18n, stateModifier, state, customMenuItemsProvider) {
3097
3111
  this.viewportApi = viewportApi;
3112
+ this.i18n = i18n;
3098
3113
  this.stateModifier = stateModifier;
3099
3114
  this.state = state;
3100
3115
  this.customMenuItemsProvider = customMenuItemsProvider;
@@ -3105,15 +3120,16 @@
3105
3120
  const ssc = commandOrNull;
3106
3121
  const step = ssc.component.step;
3107
3122
  const parentSequence = ssc.component.parentSequence;
3123
+ const name = this.i18n(`step.${step.type}.name`, step.name);
3108
3124
  items.push({
3109
- label: step.name,
3125
+ label: name,
3110
3126
  order: 0
3111
3127
  });
3112
3128
  this.tryAppendCustomItems(items, step, parentSequence);
3113
3129
  if (this.stateModifier.isSelectable(step, parentSequence)) {
3114
3130
  if (this.state.selectedStepId === step.id) {
3115
3131
  items.push({
3116
- label: `Unselect`,
3132
+ label: this.i18n('contextMenu.unselect', 'Unselect'),
3117
3133
  order: 10,
3118
3134
  callback: () => {
3119
3135
  this.state.setSelectedStepId(null);
@@ -3122,7 +3138,7 @@
3122
3138
  }
3123
3139
  else {
3124
3140
  items.push({
3125
- label: 'Select',
3141
+ label: this.i18n('contextMenu.select', 'Select'),
3126
3142
  order: 20,
3127
3143
  callback: () => {
3128
3144
  this.stateModifier.trySelectStepById(step.id);
@@ -3133,7 +3149,7 @@
3133
3149
  if (!this.state.isReadonly) {
3134
3150
  if (this.stateModifier.isDeletable(step.id)) {
3135
3151
  items.push({
3136
- label: 'Delete',
3152
+ label: this.i18n('contextMenu.delete', 'Delete'),
3137
3153
  order: 30,
3138
3154
  callback: () => {
3139
3155
  this.stateModifier.tryDelete(step.id);
@@ -3142,7 +3158,7 @@
3142
3158
  }
3143
3159
  if (this.stateModifier.isDuplicable(step, parentSequence)) {
3144
3160
  items.push({
3145
- label: 'Duplicate',
3161
+ label: this.i18n('contextMenu.duplicate', 'Duplicate'),
3146
3162
  order: 40,
3147
3163
  callback: () => {
3148
3164
  this.stateModifier.tryDuplicate(step, parentSequence);
@@ -3155,7 +3171,7 @@
3155
3171
  this.tryAppendCustomItems(items, null, this.state.definition.sequence);
3156
3172
  }
3157
3173
  items.push({
3158
- label: 'Reset view',
3174
+ label: this.i18n('contextMenu.resetView', 'Reset view'),
3159
3175
  order: 50,
3160
3176
  callback: () => {
3161
3177
  this.viewportApi.resetViewport();
@@ -3180,7 +3196,7 @@
3180
3196
  const view = WorkspaceView.create(parent, designerContext.componentContext);
3181
3197
  const clickBehaviorResolver = new ClickBehaviorResolver(designerContext);
3182
3198
  const wheelController = designerContext.services.wheelController.create(api.workspace);
3183
- 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)
3184
3200
  ? designerContext.services.contextMenu.createItemsProvider(designerContext.customActionController)
3185
3201
  : undefined);
3186
3202
  const contextMenuController = new ContextMenuController(designerContext.theme, designerContext.configuration, contextMenuItemsBuilder);
@@ -3427,28 +3443,28 @@
3427
3443
  }
3428
3444
 
3429
3445
  class ControlBarView {
3430
- static create(parent, isUndoRedoSupported) {
3446
+ static create(parent, isUndoRedoSupported, i18n) {
3431
3447
  const root = Dom.element('div', {
3432
3448
  class: 'sqd-control-bar'
3433
3449
  });
3434
- const resetButton = createButton(Icons.center, 'Reset view');
3450
+ const resetButton = createButton(Icons.center, i18n('controlBar.resetView', 'Reset view'));
3435
3451
  root.appendChild(resetButton);
3436
- const zoomInButton = createButton(Icons.zoomIn, 'Zoom in');
3452
+ const zoomInButton = createButton(Icons.zoomIn, i18n('controlBar.zoomIn', 'Zoom in'));
3437
3453
  root.appendChild(zoomInButton);
3438
- const zoomOutButton = createButton(Icons.zoomOut, 'Zoom out');
3454
+ const zoomOutButton = createButton(Icons.zoomOut, i18n('controlBar.zoomOut', 'Zoom out'));
3439
3455
  root.appendChild(zoomOutButton);
3440
3456
  let undoButton = null;
3441
3457
  let redoButton = null;
3442
3458
  if (isUndoRedoSupported) {
3443
- undoButton = createButton(Icons.undo, 'Undo');
3459
+ undoButton = createButton(Icons.undo, i18n('controlBar.undo', 'Undo'));
3444
3460
  root.appendChild(undoButton);
3445
- redoButton = createButton(Icons.redo, 'Redo');
3461
+ redoButton = createButton(Icons.redo, i18n('controlBar.redo', 'Redo'));
3446
3462
  root.appendChild(redoButton);
3447
3463
  }
3448
- 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'));
3449
3465
  disableDragButton.classList.add('sqd-disabled');
3450
3466
  root.appendChild(disableDragButton);
3451
- const deleteButton = createButton(Icons.delete, 'Delete selected step');
3467
+ const deleteButton = createButton(Icons.delete, i18n('controlBar.deleteSelectedStep', 'Delete selected step'));
3452
3468
  deleteButton.classList.add('sqd-delete');
3453
3469
  deleteButton.classList.add('sqd-hidden');
3454
3470
  root.appendChild(deleteButton);
@@ -3529,7 +3545,7 @@
3529
3545
  class ControlBar {
3530
3546
  static create(parent, api) {
3531
3547
  const isUndoRedoSupported = api.controlBar.isUndoRedoSupported();
3532
- const view = ControlBarView.create(parent, isUndoRedoSupported);
3548
+ const view = ControlBarView.create(parent, isUndoRedoSupported, api.i18n);
3533
3549
  const bar = new ControlBar(view, api.controlBar, isUndoRedoSupported);
3534
3550
  view.bindResetButtonClick(() => bar.onResetButtonClicked());
3535
3551
  view.bindZoomInButtonClick(() => bar.onZoomInButtonClicked());
@@ -3659,19 +3675,16 @@
3659
3675
  }
3660
3676
 
3661
3677
  class SmartEditorView {
3662
- static create(parent, api, configuration) {
3678
+ static create(parent, api, i18n, configuration) {
3663
3679
  const root = Dom.element('div', {
3664
3680
  class: 'sqd-smart-editor'
3665
3681
  });
3666
3682
  const toggle = Dom.element('div', {
3667
3683
  class: 'sqd-smart-editor-toggle',
3668
- title: 'Toggle editor'
3684
+ title: i18n('smartEditor.toggle', 'Toggle editor')
3669
3685
  });
3670
3686
  parent.appendChild(toggle);
3671
3687
  parent.appendChild(root);
3672
- if (configuration.globalEditorProvider) {
3673
- throw new Error('globalEditorProvider is renamed to rootEditorProvider');
3674
- }
3675
3688
  const editor = Editor.create(root, api, 'sqd-editor sqd-step-editor', configuration.stepEditorProvider, 'sqd-editor sqd-root-editor', configuration.rootEditorProvider, null);
3676
3689
  return new SmartEditorView(root, toggle, editor);
3677
3690
  }
@@ -3702,7 +3715,7 @@
3702
3715
 
3703
3716
  class SmartEditor {
3704
3717
  static create(parent, api, configuration) {
3705
- const view = SmartEditorView.create(parent, api.editor, configuration);
3718
+ const view = SmartEditorView.create(parent, api.editor, api.i18n, configuration);
3706
3719
  const editor = new SmartEditor(view, api.editor, api.workspace);
3707
3720
  editor.updateVisibility();
3708
3721
  view.bindToggleClick(() => editor.onToggleClicked());
@@ -3945,7 +3958,7 @@
3945
3958
  }
3946
3959
 
3947
3960
  class ToolboxView {
3948
- static create(parent, api) {
3961
+ static create(parent, api, i18n) {
3949
3962
  const root = Dom.element('div', {
3950
3963
  class: 'sqd-toolbox'
3951
3964
  });
@@ -3955,14 +3968,14 @@
3955
3968
  const headerTitle = Dom.element('div', {
3956
3969
  class: 'sqd-toolbox-header-title'
3957
3970
  });
3958
- headerTitle.innerText = 'Toolbox';
3971
+ headerTitle.innerText = i18n('toolbox.title', 'Toolbox');
3959
3972
  const body = Dom.element('div', {
3960
3973
  class: 'sqd-toolbox-body'
3961
3974
  });
3962
3975
  const filterInput = Dom.element('input', {
3963
3976
  class: 'sqd-toolbox-filter',
3964
3977
  type: 'text',
3965
- placeholder: 'Search...'
3978
+ placeholder: i18n('toolbox.search', 'Search...')
3966
3979
  });
3967
3980
  root.appendChild(header);
3968
3981
  root.appendChild(body);
@@ -4022,9 +4035,9 @@
4022
4035
  }
4023
4036
 
4024
4037
  class Toolbox {
4025
- static create(root, api) {
4038
+ static create(root, api, i18n) {
4026
4039
  const allGroups = api.getAllGroups();
4027
- const view = ToolboxView.create(root, api);
4040
+ const view = ToolboxView.create(root, api, i18n);
4028
4041
  const toolbox = new Toolbox(view, api, allGroups);
4029
4042
  toolbox.render();
4030
4043
  toolbox.onIsCollapsedChanged();
@@ -4059,7 +4072,7 @@
4059
4072
 
4060
4073
  class ToolboxExtension {
4061
4074
  create(root, api) {
4062
- return Toolbox.create(root, api.toolbox);
4075
+ return Toolbox.create(root, api.toolbox, api.i18n);
4063
4076
  }
4064
4077
  }
4065
4078
 
@@ -4708,6 +4721,7 @@
4708
4721
  exports.CenteredViewportCalculator = CenteredViewportCalculator;
4709
4722
  exports.ClassicWheelControllerExtension = ClassicWheelControllerExtension;
4710
4723
  exports.ComponentContext = ComponentContext;
4724
+ exports.ComponentDom = ComponentDom;
4711
4725
  exports.ControlBarApi = ControlBarApi;
4712
4726
  exports.CustomActionController = CustomActionController;
4713
4727
  exports.DefaultSequenceComponent = DefaultSequenceComponent;