sequential-workflow-designer 0.19.3 → 0.20.0

package/lib/cjs/index.cjs

@@ -600,13 +600,15 @@ class StepTypeValidator {
 }
 
 class ToolboxDataProvider {
-    constructor(iconProvider, configuration) {
+    constructor(iconProvider, i18n, configuration) {
         this.iconProvider = iconProvider;
+        this.i18n = i18n;
         this.configuration = configuration;
         this.createItemData = (step) => {
             StepTypeValidator.validate(step.type);
             const iconUrl = this.iconProvider.getIconUrl(step);
-            const label = this.configuration && this.configuration.labelProvider ? this.configuration.labelProvider(step) : step.name;
+            const rawLabel = this.configuration && this.configuration.labelProvider ? this.configuration.labelProvider(step) : step.name;
+            const label = this.i18n(`toolbox.item.${step.type}.label`, rawLabel);
             const description = this.configuration && this.configuration.descriptionProvider ? this.configuration.descriptionProvider(step) : label;
             const lowerCaseLabel = label.toLowerCase();
             return {
@@ -704,10 +706,10 @@ class DesignerApi {
         const workspace = new WorkspaceApi(context.state, context.workspaceController);
         const viewportController = context.services.viewportController.create(workspace);
         const viewport = new ViewportApi(context.workspaceController, viewportController);
-        const toolboxDataProvider = new ToolboxDataProvider(context.componentContext.iconProvider, context.configuration.toolbox);
-        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);
+        const toolboxDataProvider = new ToolboxDataProvider(context.componentContext.iconProvider, context.i18n, context.configuration.toolbox);
+        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);
     }
-    constructor(controlBar, toolbox, editor, workspace, viewport, pathBar, definitionWalker) {
+    constructor(controlBar, toolbox, editor, workspace, viewport, pathBar, definitionWalker, i18n) {
         this.controlBar = controlBar;
         this.toolbox = toolbox;
         this.editor = editor;
@@ -715,6 +717,7 @@ class DesignerApi {
         this.viewport = viewport;
         this.pathBar = pathBar;
         this.definitionWalker = definitionWalker;
+        this.i18n = i18n;
     }
 }
 
@@ -917,6 +920,7 @@ class StepComponentViewContextFactory {
     static create(stepContext, componentContext) {
         return {
             getStepIconUrl: () => componentContext.iconProvider.getIconUrl(stepContext.step),
+            getStepName: () => componentContext.i18n(`step.${stepContext.step.type}.name`, stepContext.step.name),
             createSequenceComponent: (parentElement, sequence) => {
                 const sequenceContext = {
                     sequence,
@@ -926,7 +930,8 @@ class StepComponentViewContextFactory {
                 };
                 return componentContext.services.sequenceComponent.create(parentElement, sequenceContext, componentContext);
             },
-            createPlaceholderForArea: componentContext.services.placeholder.createForArea.bind(componentContext.services.placeholder)
+            createPlaceholderForArea: componentContext.services.placeholder.createForArea.bind(componentContext.services.placeholder),
+            i18n: componentContext.i18n
         };
     }
 }
@@ -945,18 +950,19 @@ class StepComponentFactory {
 }
 
 class ComponentContext {
-    static create(stepsConfiguration, validatorConfiguration, state, stepExtensionResolver, services) {
+    static create(stepsConfiguration, validatorConfiguration, state, stepExtensionResolver, i18n, services) {
         const validator = new DefinitionValidator(validatorConfiguration, state);
         const iconProvider = new IconProvider(stepsConfiguration);
         const placeholderController = services.placeholderController.create();
         const stepComponentFactory = new StepComponentFactory(stepExtensionResolver);
-        return new ComponentContext(validator, iconProvider, placeholderController, stepComponentFactory, services);
+        return new ComponentContext(validator, iconProvider, placeholderController, stepComponentFactory, i18n, services);
     }
-    constructor(validator, iconProvider, placeholderController, stepComponentFactory, services) {
+    constructor(validator, iconProvider, placeholderController, stepComponentFactory, i18n, services) {
         this.validator = validator;
         this.iconProvider = iconProvider;
         this.placeholderController = placeholderController;
         this.stepComponentFactory = stepComponentFactory;
+        this.i18n = i18n;
         this.services = services;
     }
 }
@@ -1138,6 +1144,15 @@ class ValidationErrorBadgeExtension {
     }
 }
 
+class ComponentDom {
+    static stepG(componentClassName, type, id) {
+        return Dom.svg('g', {
+            class: `sqd-step-${componentClassName} sqd-type-${type}`,
+            'data-step-id': id
+        });
+    }
+}
+
 class InputView {
     static createRectInput(parent, x, y, size, iconSize, iconUrl) {
         const g = Dom.svg('g');
@@ -1343,43 +1358,6 @@ function drawLine(parent, x1, y1, x2, y2) {
     return line;
 }
 
-class RectPlaceholderView {
-    static create(parent, width, height, radius, iconSize, direction) {
-        const g = Dom.svg('g', {
-            visibility: 'hidden',
-            class: 'sqd-placeholder'
-        });
-        parent.appendChild(g);
-        const rect = Dom.svg('rect', {
-            class: 'sqd-placeholder-rect',
-            width,
-            height,
-            rx: radius,
-            ry: radius
-        });
-        g.appendChild(rect);
-        if (direction) {
-            const iconD = direction === exports.PlaceholderDirection.in ? Icons.folderIn : Icons.folderOut;
-            const icon = Icons.appendPath(g, 'sqd-placeholder-icon-path', iconD, iconSize);
-            Dom.translate(icon, (width - iconSize) / 2, (height - iconSize) / 2);
-        }
-        parent.appendChild(g);
-        return new RectPlaceholderView(rect, g);
-    }
-    constructor(rect, g) {
-        this.rect = rect;
-        this.g = g;
-    }
-    setIsHover(isHover) {
-        Dom.toggleClass(this.g, isHover, 'sqd-hover');
-    }
-    setIsVisible(isVisible) {
-        Dom.attrs(this.g, {
-            visibility: isVisible ? 'visible' : 'hidden'
-        });
-    }
-}
-
 class DefaultSequenceComponentView {
     static create(parent, sequenceContext, componentContext) {
         const phWidth = componentContext.services.placeholder.gapSize.x;
@@ -1508,11 +1486,10 @@ class DefaultSequenceComponent {
 
 const createContainerStepComponentViewFactory = (cfg) => (parentElement, stepContext, viewContext) => {
     const { step } = stepContext;
-    const g = Dom.svg('g', {
-        class: `sqd-step-container sqd-type-${step.type}`
-    });
+    const g = ComponentDom.stepG('container', step.type, step.id);
     parentElement.appendChild(g);
-    const labelView = LabelView.create(g, cfg.paddingTop, cfg.label, step.name, 'primary');
+    const name = viewContext.getStepName();
+    const labelView = LabelView.create(g, cfg.paddingTop, cfg.label, name, 'primary');
     const sequenceComponent = viewContext.createSequenceComponent(g, step.sequence);
     const halfOfWidestElement = labelView.width / 2;
     const offsetLeft = Math.max(halfOfWidestElement - sequenceComponent.view.joinX, 0) + cfg.paddingX;
@@ -1556,9 +1533,7 @@ const createContainerStepComponentViewFactory = (cfg) => (parentElement, stepCon
 
 const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, viewContext) => {
     const { step } = stepContext;
-    const g = Dom.svg('g', {
-        class: `sqd-step-switch sqd-type-${step.type}`
-    });
+    const g = ComponentDom.stepG('switch', step.type, step.id);
     parent.appendChild(g);
     const branchNames = Object.keys(step.branches);
     const branchComponents = branchNames.map(branchName => {
@@ -1566,9 +1541,11 @@ const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, view
     });
     const branchLabelViews = branchNames.map(branchName => {
         const labelY = cfg.paddingTop + cfg.nameLabel.height + cfg.connectionHeight;
-        return LabelView.create(g, labelY, cfg.branchNameLabel, branchName, 'secondary');
+        const translatedBranchName = viewContext.i18n(`stepComponent.${step.type}.branchName`, branchName);
+        return LabelView.create(g, labelY, cfg.branchNameLabel, translatedBranchName, 'secondary');
     });
-    const nameLabelView = LabelView.create(g, cfg.paddingTop, cfg.nameLabel, step.name, 'primary');
+    const name = viewContext.getStepName();
+    const nameLabelView = LabelView.create(g, cfg.paddingTop, cfg.nameLabel, name, 'primary');
     let prevOffsetX = 0;
     const branchSizes = branchComponents.map((component, i) => {
         const halfOfWidestBranchElement = Math.max(branchLabelViews[i].width, cfg.minContainerWidth) / 2;
@@ -1659,9 +1636,7 @@ const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, view
 
 const createTaskStepComponentViewFactory = (isInterrupted, cfg) => (parentElement, stepContext, viewContext) => {
     const { step } = stepContext;
-    const g = Dom.svg('g', {
-        class: `sqd-step-task sqd-type-${step.type}`
-    });
+    const g = ComponentDom.stepG('task', step.type, step.id);
     parentElement.appendChild(g);
     const boxHeight = cfg.paddingY * 2 + cfg.iconSize;
     const text = Dom.svg('text', {
@@ -1669,7 +1644,7 @@ const createTaskStepComponentViewFactory = (isInterrupted, cfg) => (parentElemen
         y: boxHeight / 2,
         class: 'sqd-step-task-text'
     });
-    text.textContent = step.name;
+    text.textContent = viewContext.getStepName();
     g.appendChild(text);
     const textWidth = Math.max(text.getBBox().width, cfg.minTextWidth);
     const boxWidth = cfg.iconSize + cfg.paddingLeft + cfg.paddingRight + cfg.textMarginLeft + textWidth;
@@ -1941,6 +1916,43 @@ class StepExtensionResolver {
     }
 }
 
+class RectPlaceholderView {
+    static create(parent, width, height, radius, iconSize, direction) {
+        const g = Dom.svg('g', {
+            visibility: 'hidden',
+            class: 'sqd-placeholder'
+        });
+        parent.appendChild(g);
+        const rect = Dom.svg('rect', {
+            class: 'sqd-placeholder-rect',
+            width,
+            height,
+            rx: radius,
+            ry: radius
+        });
+        g.appendChild(rect);
+        if (direction) {
+            const iconD = direction === exports.PlaceholderDirection.in ? Icons.folderIn : Icons.folderOut;
+            const icon = Icons.appendPath(g, 'sqd-placeholder-icon-path', iconD, iconSize);
+            Dom.translate(icon, (width - iconSize) / 2, (height - iconSize) / 2);
+        }
+        parent.appendChild(g);
+        return new RectPlaceholderView(rect, g);
+    }
+    constructor(rect, g) {
+        this.rect = rect;
+        this.g = g;
+    }
+    setIsHover(isHover) {
+        Dom.toggleClass(this.g, isHover, 'sqd-hover');
+    }
+    setIsVisible(isVisible) {
+        Dom.attrs(this.g, {
+            visibility: isVisible ? 'visible' : 'hidden'
+        });
+    }
+}
+
 class RectPlaceholder {
     static create(parent, size, direction, sequence, index, configuration) {
         const view = RectPlaceholderView.create(parent, size.x, size.y, configuration.radius, configuration.iconSize, direction);
@@ -2468,7 +2480,7 @@ class WorkspaceControllerWrapper {
 
 class DesignerContext {
     static create(parent, startDefinition, configuration, services) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         const definition = ObjectCloner.deepClone(startDefinition);
         const layoutController = new LayoutController(parent);
         const isReadonly = !!configuration.isReadonly;
@@ -2480,22 +2492,24 @@ class DesignerContext {
         const behaviorController = new BehaviorController();
         const stepExtensionResolver = StepExtensionResolver.create(services);
         const definitionWalker = (_c = configuration.definitionWalker) !== null && _c !== void 0 ? _c : new sequentialWorkflowModel.DefinitionWalker();
+        const i18n = (_d = configuration.i18n) !== null && _d !== void 0 ? _d : ((_, defaultValue) => defaultValue);
         const stateModifier = StateModifier.create(definitionWalker, state, configuration);
         const customActionController = new CustomActionController(configuration, state, stateModifier);
         let historyController = undefined;
         if (configuration.undoStackSize) {
             historyController = HistoryController.create(configuration.undoStack, state, stateModifier, configuration);
         }
-        const componentContext = ComponentContext.create(configuration.steps, configuration.validator, state, stepExtensionResolver, services);
-        return new DesignerContext(theme, state, configuration, services, componentContext, definitionWalker, stateModifier, layoutController, workspaceController, behaviorController, customActionController, historyController);
+        const componentContext = ComponentContext.create(configuration.steps, configuration.validator, state, stepExtensionResolver, i18n, services);
+        return new DesignerContext(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, behaviorController, customActionController, historyController);
     }
-    constructor(theme, state, configuration, services, componentContext, definitionWalker, stateModifier, layoutController, workspaceController, behaviorController, customActionController, historyController) {
+    constructor(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, behaviorController, customActionController, historyController) {
         this.theme = theme;
         this.state = state;
         this.configuration = configuration;
         this.services = services;
         this.componentContext = componentContext;
         this.definitionWalker = definitionWalker;
+        this.i18n = i18n;
         this.stateModifier = stateModifier;
         this.layoutController = layoutController;
         this.workspaceController = workspaceController;
@@ -2908,8 +2922,9 @@ class ContextMenuController {
 }
 
 class ContextMenuItemsBuilder {
-    constructor(viewportApi, stateModifier, state, customMenuItemsProvider) {
+    constructor(viewportApi, i18n, stateModifier, state, customMenuItemsProvider) {
         this.viewportApi = viewportApi;
+        this.i18n = i18n;
         this.stateModifier = stateModifier;
         this.state = state;
         this.customMenuItemsProvider = customMenuItemsProvider;
@@ -2920,15 +2935,16 @@ class ContextMenuItemsBuilder {
             const ssc = commandOrNull;
             const step = ssc.component.step;
             const parentSequence = ssc.component.parentSequence;
+            const name = this.i18n(`step.${step.type}.name`, step.name);
             items.push({
-                label: step.name,
+                label: name,
                 order: 0
             });
             this.tryAppendCustomItems(items, step, parentSequence);
             if (this.stateModifier.isSelectable(step, parentSequence)) {
                 if (this.state.selectedStepId === step.id) {
                     items.push({
-                        label: `Unselect`,
+                        label: this.i18n('contextMenu.unselect', 'Unselect'),
                         order: 10,
                         callback: () => {
                             this.state.setSelectedStepId(null);
@@ -2937,7 +2953,7 @@ class ContextMenuItemsBuilder {
                 }
                 else {
                     items.push({
-                        label: 'Select',
+                        label: this.i18n('contextMenu.select', 'Select'),
                         order: 20,
                         callback: () => {
                             this.stateModifier.trySelectStepById(step.id);
@@ -2948,7 +2964,7 @@ class ContextMenuItemsBuilder {
             if (!this.state.isReadonly) {
                 if (this.stateModifier.isDeletable(step.id)) {
                     items.push({
-                        label: 'Delete',
+                        label: this.i18n('contextMenu.delete', 'Delete'),
                         order: 30,
                         callback: () => {
                             this.stateModifier.tryDelete(step.id);
@@ -2957,7 +2973,7 @@ class ContextMenuItemsBuilder {
                 }
                 if (this.stateModifier.isDuplicable(step, parentSequence)) {
                     items.push({
-                        label: 'Duplicate',
+                        label: this.i18n('contextMenu.duplicate', 'Duplicate'),
                         order: 40,
                         callback: () => {
                             this.stateModifier.tryDuplicate(step, parentSequence);
@@ -2970,7 +2986,7 @@ class ContextMenuItemsBuilder {
             this.tryAppendCustomItems(items, null, this.state.definition.sequence);
         }
         items.push({
-            label: 'Reset view',
+            label: this.i18n('contextMenu.resetView', 'Reset view'),
             order: 50,
             callback: () => {
                 this.viewportApi.resetViewport();
@@ -2995,7 +3011,7 @@ class Workspace {
         const view = WorkspaceView.create(parent, designerContext.componentContext);
         const clickBehaviorResolver = new ClickBehaviorResolver(designerContext);
         const wheelController = designerContext.services.wheelController.create(api.workspace);
-        const contextMenuItemsBuilder = new ContextMenuItemsBuilder(api.viewport, designerContext.stateModifier, designerContext.state, ((_a = designerContext.services.contextMenu) === null || _a === void 0 ? void 0 : _a.createItemsProvider)
+        const contextMenuItemsBuilder = new ContextMenuItemsBuilder(api.viewport, api.i18n, designerContext.stateModifier, designerContext.state, ((_a = designerContext.services.contextMenu) === null || _a === void 0 ? void 0 : _a.createItemsProvider)
             ? designerContext.services.contextMenu.createItemsProvider(designerContext.customActionController)
             : undefined);
         const contextMenuController = new ContextMenuController(designerContext.theme, designerContext.configuration, contextMenuItemsBuilder);
@@ -3242,28 +3258,28 @@ class DefaultDraggedComponentExtension {
 }
 
 class ControlBarView {
-    static create(parent, isUndoRedoSupported) {
+    static create(parent, isUndoRedoSupported, i18n) {
         const root = Dom.element('div', {
             class: 'sqd-control-bar'
         });
-        const resetButton = createButton(Icons.center, 'Reset view');
+        const resetButton = createButton(Icons.center, i18n('controlBar.resetView', 'Reset view'));
         root.appendChild(resetButton);
-        const zoomInButton = createButton(Icons.zoomIn, 'Zoom in');
+        const zoomInButton = createButton(Icons.zoomIn, i18n('controlBar.zoomIn', 'Zoom in'));
         root.appendChild(zoomInButton);
-        const zoomOutButton = createButton(Icons.zoomOut, 'Zoom out');
+        const zoomOutButton = createButton(Icons.zoomOut, i18n('controlBar.zoomOut', 'Zoom out'));
         root.appendChild(zoomOutButton);
         let undoButton = null;
         let redoButton = null;
         if (isUndoRedoSupported) {
-            undoButton = createButton(Icons.undo, 'Undo');
+            undoButton = createButton(Icons.undo, i18n('controlBar.undo', 'Undo'));
             root.appendChild(undoButton);
-            redoButton = createButton(Icons.redo, 'Redo');
+            redoButton = createButton(Icons.redo, i18n('controlBar.redo', 'Redo'));
             root.appendChild(redoButton);
         }
-        const disableDragButton = createButton(Icons.move, 'Turn on/off drag and drop');
+        const disableDragButton = createButton(Icons.move, i18n('controlBar.turnOnOffDragAndDrop', 'Turn on/off drag and drop'));
         disableDragButton.classList.add('sqd-disabled');
         root.appendChild(disableDragButton);
-        const deleteButton = createButton(Icons.delete, 'Delete selected step');
+        const deleteButton = createButton(Icons.delete, i18n('controlBar.deleteSelectedStep', 'Delete selected step'));
         deleteButton.classList.add('sqd-delete');
         deleteButton.classList.add('sqd-hidden');
         root.appendChild(deleteButton);
@@ -3344,7 +3360,7 @@ function createButton(d, title) {
 class ControlBar {
     static create(parent, api) {
         const isUndoRedoSupported = api.controlBar.isUndoRedoSupported();
-        const view = ControlBarView.create(parent, isUndoRedoSupported);
+        const view = ControlBarView.create(parent, isUndoRedoSupported, api.i18n);
         const bar = new ControlBar(view, api.controlBar, isUndoRedoSupported);
         view.bindResetButtonClick(() => bar.onResetButtonClicked());
         view.bindZoomInButtonClick(() => bar.onZoomInButtonClicked());
@@ -3474,19 +3490,16 @@ class KeyboardDaemonExtension {
 }
 
 class SmartEditorView {
-    static create(parent, api, configuration) {
+    static create(parent, api, i18n, configuration) {
         const root = Dom.element('div', {
             class: 'sqd-smart-editor'
         });
         const toggle = Dom.element('div', {
             class: 'sqd-smart-editor-toggle',
-            title: 'Toggle editor'
+            title: i18n('smartEditor.toggle', 'Toggle editor')
         });
         parent.appendChild(toggle);
         parent.appendChild(root);
-        if (configuration.globalEditorProvider) {
-            throw new Error('globalEditorProvider is renamed to rootEditorProvider');
-        }
         const editor = Editor.create(root, api, 'sqd-editor sqd-step-editor', configuration.stepEditorProvider, 'sqd-editor sqd-root-editor', configuration.rootEditorProvider, null);
         return new SmartEditorView(root, toggle, editor);
     }
@@ -3517,7 +3530,7 @@ class SmartEditorView {
 
 class SmartEditor {
     static create(parent, api, configuration) {
-        const view = SmartEditorView.create(parent, api.editor, configuration);
+        const view = SmartEditorView.create(parent, api.editor, api.i18n, configuration);
         const editor = new SmartEditor(view, api.editor, api.workspace);
         editor.updateVisibility();
         view.bindToggleClick(() => editor.onToggleClicked());
@@ -3760,7 +3773,7 @@ class ToolboxItem {
 }
 
 class ToolboxView {
-    static create(parent, api) {
+    static create(parent, api, i18n) {
         const root = Dom.element('div', {
             class: 'sqd-toolbox'
         });
@@ -3770,14 +3783,14 @@ class ToolboxView {
         const headerTitle = Dom.element('div', {
             class: 'sqd-toolbox-header-title'
         });
-        headerTitle.innerText = 'Toolbox';
+        headerTitle.innerText = i18n('toolbox.title', 'Toolbox');
         const body = Dom.element('div', {
             class: 'sqd-toolbox-body'
         });
         const filterInput = Dom.element('input', {
             class: 'sqd-toolbox-filter',
             type: 'text',
-            placeholder: 'Search...'
+            placeholder: i18n('toolbox.search', 'Search...')
         });
         root.appendChild(header);
         root.appendChild(body);
@@ -3837,9 +3850,9 @@ class ToolboxView {
 }
 
 class Toolbox {
-    static create(root, api) {
+    static create(root, api, i18n) {
         const allGroups = api.getAllGroups();
-        const view = ToolboxView.create(root, api);
+        const view = ToolboxView.create(root, api, i18n);
         const toolbox = new Toolbox(view, api, allGroups);
         toolbox.render();
         toolbox.onIsCollapsedChanged();
@@ -3874,7 +3887,7 @@ class Toolbox {
 
 class ToolboxExtension {
     create(root, api) {
-        return Toolbox.create(root, api.toolbox);
+        return Toolbox.create(root, api.toolbox, api.i18n);
     }
 }
 
@@ -4523,6 +4536,7 @@ exports.Badges = Badges;
 exports.CenteredViewportCalculator = CenteredViewportCalculator;
 exports.ClassicWheelControllerExtension = ClassicWheelControllerExtension;
 exports.ComponentContext = ComponentContext;
+exports.ComponentDom = ComponentDom;
 exports.ControlBarApi = ControlBarApi;
 exports.CustomActionController = CustomActionController;
 exports.DefaultSequenceComponent = DefaultSequenceComponent;