sequential-workflow-designer 0.19.4 → 0.21.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;
     }
 }
 
@@ -755,7 +758,7 @@ const BADGE_GAP = 4;
 class Badges {
     static createForStep(stepContext, view, componentContext) {
         const g = createG(view.g);
-        const badges = componentContext.services.badges.map(ext => ext.createForStep(g, stepContext, componentContext));
+        const badges = componentContext.services.badges.map(ext => ext.createForStep(g, view, stepContext, componentContext));
         const position = new Vector(view.width, 0);
         return new Badges(g, position, badges);
     }
@@ -829,7 +832,7 @@ exports.PlaceholderDirection = void 0;
 class StepComponent {
     static create(view, stepContext, componentContext) {
         const badges = Badges.createForStep(stepContext, view, componentContext);
-        return new StepComponent(view, stepContext.step, stepContext.parentSequence, view.hasOutput(), badges);
+        return new StepComponent(view, stepContext.step, stepContext.parentSequence, view.hasOutput, badges);
     }
     constructor(view, step, parentSequence, hasOutput, badges) {
         this.view = view;
@@ -915,8 +918,11 @@ class StepComponent {
 
 class StepComponentViewContextFactory {
     static create(stepContext, componentContext) {
+        const preferenceKeyPrefix = stepContext.step.id + ':';
         return {
+            i18n: componentContext.i18n,
             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 +932,12 @@ class StepComponentViewContextFactory {
                 };
                 return componentContext.services.sequenceComponent.create(parentElement, sequenceContext, componentContext);
             },
-            createPlaceholderForArea: componentContext.services.placeholder.createForArea.bind(componentContext.services.placeholder)
+            createRegionComponentView(parentElement, componentClassName, contentFactory) {
+                return componentContext.services.regionComponentView.create(parentElement, componentClassName, stepContext, this, contentFactory);
+            },
+            createPlaceholderForArea: componentContext.services.placeholder.createForArea.bind(componentContext.services.placeholder),
+            getPreference: (key) => componentContext.preferenceStorage.getItem(preferenceKeyPrefix + key),
+            setPreference: (key, value) => componentContext.preferenceStorage.setItem(preferenceKeyPrefix + key, value)
         };
     }
 }
@@ -945,19 +956,22 @@ class StepComponentFactory {
 }
 
 class ComponentContext {
-    static create(stepsConfiguration, validatorConfiguration, state, stepExtensionResolver, services) {
-        const validator = new DefinitionValidator(validatorConfiguration, state);
-        const iconProvider = new IconProvider(stepsConfiguration);
+    static create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, i18n, services) {
+        const validator = new DefinitionValidator(configuration.validator, state);
+        const iconProvider = new IconProvider(configuration.steps);
         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, definitionWalker, services, preferenceStorage, i18n);
     }
-    constructor(validator, iconProvider, placeholderController, stepComponentFactory, services) {
+    constructor(validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n) {
         this.validator = validator;
         this.iconProvider = iconProvider;
         this.placeholderController = placeholderController;
         this.stepComponentFactory = stepComponentFactory;
+        this.definitionWalker = definitionWalker;
         this.services = services;
+        this.preferenceStorage = preferenceStorage;
+        this.i18n = i18n;
     }
 }
 
@@ -1082,13 +1096,41 @@ class ValidationErrorBadgeView {
     }
 }
 
+class ValidatorFactory {
+    static createForStep(stepContext, view, componentContext) {
+        return () => {
+            if (!componentContext.validator.validateStep(stepContext.step, stepContext.parentSequence)) {
+                return false;
+            }
+            if (view.haveCollapsedChildren) {
+                let allChildrenValid = true;
+                componentContext.definitionWalker.forEachChildren(stepContext.step, (step, _, parentSequence) => {
+                    if (!componentContext.validator.validateStep(step, parentSequence)) {
+                        allChildrenValid = false;
+                        return false;
+                    }
+                });
+                if (!allChildrenValid) {
+                    return false;
+                }
+            }
+            return true;
+        };
+    }
+    static createForRoot(componentContext) {
+        return () => {
+            return componentContext.validator.validateRoot();
+        };
+    }
+}
+
 class ValidationErrorBadge {
-    static createForStep(parentElement, stepContext, componentContext, configuration) {
-        const validator = () => componentContext.validator.validateStep(stepContext.step, stepContext.parentSequence);
+    static createForStep(parentElement, view, stepContext, componentContext, configuration) {
+        const validator = ValidatorFactory.createForStep(stepContext, view, componentContext);
         return new ValidationErrorBadge(parentElement, validator, configuration);
     }
     static createForRoot(parentElement, componentContext, configuration) {
-        const validator = () => componentContext.validator.validateRoot();
+        const validator = ValidatorFactory.createForRoot(componentContext);
         return new ValidationErrorBadge(parentElement, validator, configuration);
     }
     constructor(parentElement, validator, configuration) {
@@ -1130,8 +1172,8 @@ class ValidationErrorBadgeExtension {
         this.id = 'validationError';
         this.createStartValue = () => true;
     }
-    createForStep(parentElement, stepContext, componentContext) {
-        return ValidationErrorBadge.createForStep(parentElement, stepContext, componentContext, this.configuration.view);
+    createForStep(parentElement, view, stepContext, componentContext) {
+        return ValidationErrorBadge.createForStep(parentElement, view, stepContext, componentContext, this.configuration.view);
     }
     createForRoot(parentElement, componentContext) {
         return ValidationErrorBadge.createForRoot(parentElement, componentContext, this.configuration.view);
@@ -1305,53 +1347,6 @@ class OutputView {
     }
 }
 
-class RegionView {
-    static create(parent, widths, height) {
-        const totalWidth = widths.reduce((result, width) => result + width, 0);
-        const lines = [
-            drawLine(parent, 0, 0, totalWidth, 0),
-            drawLine(parent, 0, 0, 0, height),
-            drawLine(parent, 0, height, totalWidth, height),
-            drawLine(parent, totalWidth, 0, totalWidth, height)
-        ];
-        let offsetX = widths[0];
-        for (let i = 1; i < widths.length; i++) {
-            lines.push(drawLine(parent, offsetX, 0, offsetX, height));
-            offsetX += widths[i];
-        }
-        return new RegionView(lines, totalWidth, height);
-    }
-    constructor(lines, width, height) {
-        this.lines = lines;
-        this.width = width;
-        this.height = height;
-    }
-    getClientPosition() {
-        return getAbsolutePosition(this.lines[0]);
-    }
-    resolveClick(click) {
-        const regionPosition = this.getClientPosition();
-        const d = click.position.subtract(regionPosition);
-        return d.x >= 0 && d.y >= 0 && d.x < this.width * click.scale && d.y < this.height * click.scale;
-    }
-    setIsSelected(isSelected) {
-        this.lines.forEach(region => {
-            Dom.toggleClass(region, isSelected, 'sqd-selected');
-        });
-    }
-}
-function drawLine(parent, x1, y1, x2, y2) {
-    const line = Dom.svg('line', {
-        class: 'sqd-region',
-        x1,
-        y1,
-        x2,
-        y2
-    });
-    parent.insertBefore(line, parent.firstChild);
-    return line;
-}
-
 class DefaultSequenceComponentView {
     static create(parent, sequenceContext, componentContext) {
         const phWidth = componentContext.services.placeholder.gapSize.x;
@@ -1478,156 +1473,160 @@ class DefaultSequenceComponent {
     }
 }
 
+const COMPONENT_CLASS_NAME$2 = 'container';
 const createContainerStepComponentViewFactory = (cfg) => (parentElement, stepContext, viewContext) => {
-    const { step } = stepContext;
-    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 sequenceComponent = viewContext.createSequenceComponent(g, step.sequence);
-    const halfOfWidestElement = labelView.width / 2;
-    const offsetLeft = Math.max(halfOfWidestElement - sequenceComponent.view.joinX, 0) + cfg.paddingX;
-    const offsetRight = Math.max(halfOfWidestElement - (sequenceComponent.view.width - sequenceComponent.view.joinX), 0) + cfg.paddingX;
-    const width = offsetLeft + sequenceComponent.view.width + offsetRight;
-    const height = cfg.paddingTop + cfg.label.height + sequenceComponent.view.height;
-    const joinX = sequenceComponent.view.joinX + offsetLeft;
-    Dom.translate(labelView.g, joinX, 0);
-    Dom.translate(sequenceComponent.view.g, offsetLeft, cfg.paddingTop + cfg.label.height);
-    const iconUrl = viewContext.getStepIconUrl();
-    const inputView = InputView.createRectInput(g, joinX, 0, cfg.inputSize, cfg.inputIconSize, iconUrl);
-    JoinView.createStraightJoin(g, new Vector(joinX, 0), cfg.paddingTop);
-    const regionView = RegionView.create(g, [width], height);
-    return {
-        g,
-        width,
-        height,
-        joinX,
-        placeholders: null,
-        sequenceComponents: [sequenceComponent],
-        getClientPosition() {
-            return regionView.getClientPosition();
-        },
-        resolveClick(click) {
-            return regionView.resolveClick(click) || g.contains(click.element) ? true : null;
-        },
-        setIsDragging(isDragging) {
-            inputView.setIsHidden(isDragging);
-        },
-        setIsSelected(isSelected) {
-            regionView.setIsSelected(isSelected);
-        },
-        setIsDisabled(isDisabled) {
-            Dom.toggleClass(g, isDisabled, 'sqd-disabled');
-        },
-        hasOutput() {
-            return sequenceComponent.hasOutput;
-        }
-    };
+    return viewContext.createRegionComponentView(parentElement, COMPONENT_CLASS_NAME$2, (g, regionViewBuilder) => {
+        const step = stepContext.step;
+        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;
+        const offsetRight = Math.max(halfOfWidestElement - (sequenceComponent.view.width - sequenceComponent.view.joinX), 0) + cfg.paddingX;
+        const width = offsetLeft + sequenceComponent.view.width + offsetRight;
+        const height = cfg.paddingTop + cfg.label.height + sequenceComponent.view.height;
+        const joinX = sequenceComponent.view.joinX + offsetLeft;
+        Dom.translate(labelView.g, joinX, 0);
+        Dom.translate(sequenceComponent.view.g, offsetLeft, cfg.paddingTop + cfg.label.height);
+        const iconUrl = viewContext.getStepIconUrl();
+        const inputView = InputView.createRectInput(g, joinX, 0, cfg.inputSize, cfg.inputIconSize, iconUrl);
+        JoinView.createStraightJoin(g, new Vector(joinX, 0), cfg.paddingTop);
+        const regionView = regionViewBuilder(g, [width], height);
+        return {
+            g,
+            width,
+            height,
+            joinX,
+            placeholders: null,
+            sequenceComponents: [sequenceComponent],
+            hasOutput: sequenceComponent.hasOutput,
+            getClientPosition() {
+                return regionView.getClientPosition();
+            },
+            resolveClick(click) {
+                const result = regionView.resolveClick(click);
+                return result === true || (result === null && g.contains(click.element)) ? true : result;
+            },
+            setIsDragging(isDragging) {
+                inputView.setIsHidden(isDragging);
+            },
+            setIsSelected(isSelected) {
+                regionView.setIsSelected(isSelected);
+            },
+            setIsDisabled(isDisabled) {
+                Dom.toggleClass(g, isDisabled, 'sqd-disabled');
+            }
+        };
+    });
 };
 
+const COMPONENT_CLASS_NAME$1 = 'switch';
 const createSwitchStepComponentViewFactory = (cfg) => (parent, stepContext, viewContext) => {
-    const { step } = stepContext;
-    const g = ComponentDom.stepG('switch', step.type, step.id);
-    parent.appendChild(g);
-    const branchNames = Object.keys(step.branches);
-    const branchComponents = branchNames.map(branchName => {
-        return viewContext.createSequenceComponent(g, step.branches[branchName]);
-    });
-    const branchLabelViews = branchNames.map(branchName => {
-        const labelY = cfg.paddingTop + cfg.nameLabel.height + cfg.connectionHeight;
-        return LabelView.create(g, labelY, cfg.branchNameLabel, branchName, 'secondary');
-    });
-    const nameLabelView = LabelView.create(g, cfg.paddingTop, cfg.nameLabel, step.name, 'primary');
-    let prevOffsetX = 0;
-    const branchSizes = branchComponents.map((component, i) => {
-        const halfOfWidestBranchElement = Math.max(branchLabelViews[i].width, cfg.minContainerWidth) / 2;
-        const branchOffsetLeft = Math.max(halfOfWidestBranchElement - component.view.joinX, 0) + cfg.paddingX;
-        const branchOffsetRight = Math.max(halfOfWidestBranchElement - (component.view.width - component.view.joinX), 0) + cfg.paddingX;
-        const width = component.view.width + branchOffsetLeft + branchOffsetRight;
-        const joinX = component.view.joinX + branchOffsetLeft;
-        const offsetX = prevOffsetX;
-        prevOffsetX += width;
-        return { width, branchOffsetLeft, offsetX, joinX };
-    });
-    const centerBranchIndex = Math.floor(branchNames.length / 2);
-    const centerBranchSize = branchSizes[centerBranchIndex];
-    let joinX = centerBranchSize.offsetX;
-    if (branchNames.length % 2 !== 0) {
-        joinX += centerBranchSize.joinX;
-    }
-    const totalBranchesWidth = branchSizes.reduce((result, s) => result + s.width, 0);
-    const maxBranchesHeight = Math.max(...branchComponents.map(s => s.view.height));
-    const halfOfWidestSwitchElement = nameLabelView.width / 2 + cfg.paddingX;
-    const switchOffsetLeft = Math.max(halfOfWidestSwitchElement - joinX, 0);
-    const switchOffsetRight = Math.max(halfOfWidestSwitchElement - (totalBranchesWidth - joinX), 0);
-    const viewWidth = switchOffsetLeft + totalBranchesWidth + switchOffsetRight;
-    const viewHeight = maxBranchesHeight + cfg.paddingTop + cfg.nameLabel.height + cfg.branchNameLabel.height + cfg.connectionHeight * 2;
-    const shiftedJoinX = switchOffsetLeft + joinX;
-    Dom.translate(nameLabelView.g, shiftedJoinX, 0);
-    const branchOffsetTop = cfg.paddingTop + cfg.nameLabel.height + cfg.branchNameLabel.height + cfg.connectionHeight;
-    branchComponents.forEach((component, i) => {
-        const branchSize = branchSizes[i];
-        const branchOffsetLeft = switchOffsetLeft + branchSize.offsetX + branchSize.branchOffsetLeft;
-        Dom.translate(branchLabelViews[i].g, switchOffsetLeft + branchSize.offsetX + branchSize.joinX, 0);
-        Dom.translate(component.view.g, branchOffsetLeft, branchOffsetTop);
-        if (component.hasOutput && stepContext.isOutputConnected) {
-            const endOffsetTopOfComponent = cfg.paddingTop + cfg.nameLabel.height + cfg.branchNameLabel.height + cfg.connectionHeight + component.view.height;
-            const missingHeight = viewHeight - endOffsetTopOfComponent - cfg.connectionHeight;
-            if (missingHeight > 0) {
-                JoinView.createStraightJoin(g, new Vector(switchOffsetLeft + branchSize.offsetX + branchSize.joinX, endOffsetTopOfComponent), missingHeight);
+    return viewContext.createRegionComponentView(parent, COMPONENT_CLASS_NAME$1, (g, regionViewBuilder) => {
+        const step = stepContext.step;
+        const branchNames = Object.keys(step.branches);
+        const branchComponents = branchNames.map(branchName => {
+            return viewContext.createSequenceComponent(g, step.branches[branchName]);
+        });
+        const branchLabelViews = branchNames.map(branchName => {
+            const labelY = cfg.paddingTop + cfg.nameLabel.height + cfg.connectionHeight;
+            const translatedBranchName = viewContext.i18n(`stepComponent.${step.type}.branchName`, branchName);
+            return LabelView.create(g, labelY, cfg.branchNameLabel, translatedBranchName, 'secondary');
+        });
+        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;
+            const branchOffsetLeft = Math.max(halfOfWidestBranchElement - component.view.joinX, 0) + cfg.paddingX;
+            const branchOffsetRight = Math.max(halfOfWidestBranchElement - (component.view.width - component.view.joinX), 0) + cfg.paddingX;
+            const width = component.view.width + branchOffsetLeft + branchOffsetRight;
+            const joinX = component.view.joinX + branchOffsetLeft;
+            const offsetX = prevOffsetX;
+            prevOffsetX += width;
+            return { width, branchOffsetLeft, offsetX, joinX };
+        });
+        const centerBranchIndex = Math.floor(branchNames.length / 2);
+        const centerBranchSize = branchSizes[centerBranchIndex];
+        let joinX = centerBranchSize.offsetX;
+        if (branchNames.length % 2 !== 0) {
+            joinX += centerBranchSize.joinX;
+        }
+        const totalBranchesWidth = branchSizes.reduce((result, s) => result + s.width, 0);
+        const maxBranchesHeight = Math.max(...branchComponents.map(s => s.view.height));
+        const halfOfWidestSwitchElement = nameLabelView.width / 2 + cfg.paddingX;
+        const switchOffsetLeft = Math.max(halfOfWidestSwitchElement - joinX, 0);
+        const switchOffsetRight = Math.max(halfOfWidestSwitchElement - (totalBranchesWidth - joinX), 0);
+        const viewWidth = switchOffsetLeft + totalBranchesWidth + switchOffsetRight;
+        const viewHeight = maxBranchesHeight + cfg.paddingTop + cfg.nameLabel.height + cfg.branchNameLabel.height + cfg.connectionHeight * 2;
+        const shiftedJoinX = switchOffsetLeft + joinX;
+        Dom.translate(nameLabelView.g, shiftedJoinX, 0);
+        const branchOffsetTop = cfg.paddingTop + cfg.nameLabel.height + cfg.branchNameLabel.height + cfg.connectionHeight;
+        branchComponents.forEach((component, i) => {
+            const branchSize = branchSizes[i];
+            const branchOffsetLeft = switchOffsetLeft + branchSize.offsetX + branchSize.branchOffsetLeft;
+            Dom.translate(branchLabelViews[i].g, switchOffsetLeft + branchSize.offsetX + branchSize.joinX, 0);
+            Dom.translate(component.view.g, branchOffsetLeft, branchOffsetTop);
+            if (component.hasOutput && stepContext.isOutputConnected) {
+                const endOffsetTopOfComponent = cfg.paddingTop + cfg.nameLabel.height + cfg.branchNameLabel.height + cfg.connectionHeight + component.view.height;
+                const missingHeight = viewHeight - endOffsetTopOfComponent - cfg.connectionHeight;
+                if (missingHeight > 0) {
+                    JoinView.createStraightJoin(g, new Vector(switchOffsetLeft + branchSize.offsetX + branchSize.joinX, endOffsetTopOfComponent), missingHeight);
+                }
+            }
+        });
+        let inputView = null;
+        if (cfg.inputSize > 0) {
+            const iconUrl = viewContext.getStepIconUrl();
+            inputView = InputView.createRectInput(g, shiftedJoinX, 0, cfg.inputSize, cfg.inputIconSize, iconUrl);
+        }
+        JoinView.createStraightJoin(g, new Vector(shiftedJoinX, 0), cfg.paddingTop);
+        JoinView.createJoins(g, new Vector(shiftedJoinX, cfg.paddingTop + cfg.nameLabel.height), branchSizes.map(o => new Vector(switchOffsetLeft + o.offsetX + o.joinX, cfg.paddingTop + cfg.nameLabel.height + cfg.connectionHeight)));
+        if (stepContext.isOutputConnected) {
+            const ongoingSequenceIndexes = branchComponents
+                .map((component, index) => (component.hasOutput ? index : null))
+                .filter(index => index !== null);
+            const ongoingJoinTargets = ongoingSequenceIndexes.map((i) => new Vector(switchOffsetLeft + branchSizes[i].offsetX + branchSizes[i].joinX, cfg.paddingTop + cfg.connectionHeight + cfg.nameLabel.height + cfg.branchNameLabel.height + maxBranchesHeight));
+            if (ongoingJoinTargets.length > 0) {
+                JoinView.createJoins(g, new Vector(shiftedJoinX, viewHeight), ongoingJoinTargets);
             }
         }
+        const regions = branchSizes.map(s => s.width);
+        regions[0] += switchOffsetLeft;
+        regions[regions.length - 1] += switchOffsetRight;
+        const regionView = regionViewBuilder(g, regions, viewHeight);
+        return {
+            g,
+            width: viewWidth,
+            height: viewHeight,
+            joinX: shiftedJoinX,
+            placeholders: null,
+            sequenceComponents: branchComponents,
+            hasOutput: branchComponents.some(c => c.hasOutput),
+            getClientPosition() {
+                return regionView.getClientPosition();
+            },
+            resolveClick(click) {
+                const result = regionView.resolveClick(click);
+                return result === true || (result === null && g.contains(click.element)) ? true : result;
+            },
+            setIsDragging(isDragging) {
+                inputView === null || inputView === void 0 ? void 0 : inputView.setIsHidden(isDragging);
+            },
+            setIsSelected(isSelected) {
+                regionView.setIsSelected(isSelected);
+            },
+            setIsDisabled(isDisabled) {
+                Dom.toggleClass(g, isDisabled, 'sqd-disabled');
+            }
+        };
     });
-    let inputView = null;
-    if (cfg.inputSize > 0) {
-        const iconUrl = viewContext.getStepIconUrl();
-        inputView = InputView.createRectInput(g, shiftedJoinX, 0, cfg.inputSize, cfg.inputIconSize, iconUrl);
-    }
-    JoinView.createStraightJoin(g, new Vector(shiftedJoinX, 0), cfg.paddingTop);
-    JoinView.createJoins(g, new Vector(shiftedJoinX, cfg.paddingTop + cfg.nameLabel.height), branchSizes.map(o => new Vector(switchOffsetLeft + o.offsetX + o.joinX, cfg.paddingTop + cfg.nameLabel.height + cfg.connectionHeight)));
-    if (stepContext.isOutputConnected) {
-        const ongoingSequenceIndexes = branchComponents
-            .map((component, index) => (component.hasOutput ? index : null))
-            .filter(index => index !== null);
-        const ongoingJoinTargets = ongoingSequenceIndexes.map((i) => new Vector(switchOffsetLeft + branchSizes[i].offsetX + branchSizes[i].joinX, cfg.paddingTop + cfg.connectionHeight + cfg.nameLabel.height + cfg.branchNameLabel.height + maxBranchesHeight));
-        if (ongoingJoinTargets.length > 0) {
-            JoinView.createJoins(g, new Vector(shiftedJoinX, viewHeight), ongoingJoinTargets);
-        }
-    }
-    const regions = branchSizes.map(s => s.width);
-    regions[0] += switchOffsetLeft;
-    regions[regions.length - 1] += switchOffsetRight;
-    const regionView = RegionView.create(g, regions, viewHeight);
-    return {
-        g,
-        width: viewWidth,
-        height: viewHeight,
-        joinX: shiftedJoinX,
-        placeholders: null,
-        sequenceComponents: branchComponents,
-        getClientPosition() {
-            return regionView.getClientPosition();
-        },
-        resolveClick(click) {
-            return regionView.resolveClick(click) || g.contains(click.element) ? true : null;
-        },
-        setIsDragging(isDragging) {
-            inputView === null || inputView === void 0 ? void 0 : inputView.setIsHidden(isDragging);
-        },
-        setIsSelected(isSelected) {
-            regionView.setIsSelected(isSelected);
-        },
-        setIsDisabled(isDisabled) {
-            Dom.toggleClass(g, isDisabled, 'sqd-disabled');
-        },
-        hasOutput() {
-            return branchComponents.some(c => c.hasOutput);
-        }
-    };
 };
 
+const COMPONENT_CLASS_NAME = 'task';
 const createTaskStepComponentViewFactory = (isInterrupted, cfg) => (parentElement, stepContext, viewContext) => {
     const { step } = stepContext;
-    const g = ComponentDom.stepG('task', step.type, step.id);
+    const g = ComponentDom.stepG(COMPONENT_CLASS_NAME, step.type, step.id);
     parentElement.appendChild(g);
     const boxHeight = cfg.paddingY * 2 + cfg.iconSize;
     const text = Dom.svg('text', {
@@ -1635,7 +1634,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;
@@ -1677,9 +1676,7 @@ const createTaskStepComponentViewFactory = (isInterrupted, cfg) => (parentElemen
         joinX: boxWidth / 2,
         sequenceComponents: null,
         placeholders: null,
-        hasOutput() {
-            return !!outputView;
-        },
+        hasOutput: !!outputView,
         getClientPosition() {
             return getAbsolutePosition(rect);
         },
@@ -1968,6 +1965,64 @@ class RectPlaceholder {
     }
 }
 
+class DefaultRegionView {
+    static create(parent, widths, height) {
+        const totalWidth = widths.reduce((result, width) => result + width, 0);
+        const lines = [
+            drawLine(parent, 0, 0, totalWidth, 0),
+            drawLine(parent, 0, 0, 0, height),
+            drawLine(parent, 0, height, totalWidth, height),
+            drawLine(parent, totalWidth, 0, totalWidth, height)
+        ];
+        let offsetX = widths[0];
+        for (let i = 1; i < widths.length; i++) {
+            lines.push(drawLine(parent, offsetX, 0, offsetX, height));
+            offsetX += widths[i];
+        }
+        return new DefaultRegionView(lines, totalWidth, height);
+    }
+    constructor(lines, width, height) {
+        this.lines = lines;
+        this.width = width;
+        this.height = height;
+    }
+    getClientPosition() {
+        return getAbsolutePosition(this.lines[0]);
+    }
+    resolveClick(click) {
+        const regionPosition = this.getClientPosition();
+        const d = click.position.subtract(regionPosition);
+        if (d.x >= 0 && d.y >= 0 && d.x < this.width * click.scale && d.y < this.height * click.scale) {
+            return true;
+        }
+        return null;
+    }
+    setIsSelected(isSelected) {
+        this.lines.forEach(region => {
+            Dom.toggleClass(region, isSelected, 'sqd-selected');
+        });
+    }
+}
+function drawLine(parent, x1, y1, x2, y2) {
+    const line = Dom.svg('line', {
+        class: 'sqd-region',
+        x1,
+        y1,
+        x2,
+        y2
+    });
+    parent.insertBefore(line, parent.firstChild);
+    return line;
+}
+
+class DefaultRegionComponentViewExtension {
+    create(parentElement, componentClassName, stepContext, _, contentFactory) {
+        const g = ComponentDom.stepG(componentClassName, stepContext.step.type, stepContext.step.id);
+        parentElement.appendChild(g);
+        return contentFactory(g, DefaultRegionView.create);
+    }
+}
+
 function readMousePosition(e) {
     return new Vector(e.pageX, e.pageY);
 }
@@ -2469,9 +2524,22 @@ class WorkspaceControllerWrapper {
     }
 }
 
+class MemoryPreferenceStorage {
+    constructor() {
+        this.map = {};
+    }
+    setItem(key, value) {
+        this.map[key] = value;
+    }
+    getItem(key) {
+        var _a;
+        return (_a = this.map[key]) !== null && _a !== void 0 ? _a : null;
+    }
+}
+
 class DesignerContext {
     static create(parent, startDefinition, configuration, services) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e;
         const definition = ObjectCloner.deepClone(startDefinition);
         const layoutController = new LayoutController(parent);
         const isReadonly = !!configuration.isReadonly;
@@ -2483,22 +2551,25 @@ 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 preferenceStorage = (_e = configuration.preferenceStorage) !== null && _e !== void 0 ? _e : new MemoryPreferenceStorage();
+        const componentContext = ComponentContext.create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, 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;
@@ -2911,8 +2982,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;
@@ -2923,15 +2995,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);
@@ -2940,7 +3013,7 @@ class ContextMenuItemsBuilder {
                 }
                 else {
                     items.push({
-                        label: 'Select',
+                        label: this.i18n('contextMenu.select', 'Select'),
                         order: 20,
                         callback: () => {
                             this.stateModifier.trySelectStepById(step.id);
@@ -2951,7 +3024,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);
@@ -2960,7 +3033,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);
@@ -2973,7 +3046,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();
@@ -2998,7 +3071,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);
@@ -3245,28 +3318,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);
@@ -3347,7 +3420,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());
@@ -3477,19 +3550,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);
     }
@@ -3520,7 +3590,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());
@@ -3763,7 +3833,7 @@ class ToolboxItem {
 }
 
 class ToolboxView {
-    static create(parent, api) {
+    static create(parent, api, i18n) {
         const root = Dom.element('div', {
             class: 'sqd-toolbox'
         });
@@ -3773,14 +3843,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);
@@ -3840,9 +3910,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();
@@ -3877,7 +3947,7 @@ class Toolbox {
 
 class ToolboxExtension {
     create(root, api) {
-        return Toolbox.create(root, api.toolbox);
+        return Toolbox.create(root, api.toolbox, api.i18n);
     }
 }
 
@@ -3915,7 +3985,7 @@ class DefaultPlaceholderControllerExtension {
 }
 
 const defaultConfiguration$3 = {
-    gapWidth: 100,
+    gapWidth: 88,
     gapHeight: 24,
     radius: 6,
     iconSize: 16
@@ -4184,6 +4254,9 @@ function merge(services, extensions) {
         if (ext.placeholder) {
             services.placeholder = ext.placeholder;
         }
+        if (ext.regionComponentView) {
+            services.regionComponentView = ext.regionComponentView;
+        }
         if (ext.viewportController) {
             services.viewportController = ext.viewportController;
         }
@@ -4244,6 +4317,9 @@ function setDefaults(services, configuration) {
     if (!services.placeholder) {
         services.placeholder = RectPlaceholderExtension.create();
     }
+    if (!services.regionComponentView) {
+        services.regionComponentView = new DefaultRegionComponentViewExtension();
+    }
     if (!services.viewportController) {
         services.viewportController = new DefaultViewportControllerExtension();
     }
@@ -4529,6 +4605,8 @@ exports.ComponentContext = ComponentContext;
 exports.ComponentDom = ComponentDom;
 exports.ControlBarApi = ControlBarApi;
 exports.CustomActionController = CustomActionController;
+exports.DefaultRegionComponentViewExtension = DefaultRegionComponentViewExtension;
+exports.DefaultRegionView = DefaultRegionView;
 exports.DefaultSequenceComponent = DefaultSequenceComponent;
 exports.DefaultSequenceComponentView = DefaultSequenceComponentView;
 exports.DefaultViewportController = DefaultViewportController;
@@ -4551,7 +4629,6 @@ exports.PathBarApi = PathBarApi;
 exports.QuantifiedScaleViewportCalculator = QuantifiedScaleViewportCalculator;
 exports.RectPlaceholder = RectPlaceholder;
 exports.RectPlaceholderView = RectPlaceholderView;
-exports.RegionView = RegionView;
 exports.ServicesResolver = ServicesResolver;
 exports.SimpleEvent = SimpleEvent;
 exports.StepComponent = StepComponent;