sequential-workflow-designer 0.19.4 → 0.21.0

package/dist/index.umd.js

@@ -602,13 +602,15 @@
 	}
 
 	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 {
@@ -706,10 +708,10 @@
 	        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;
@@ -717,6 +719,7 @@
 	        this.viewport = viewport;
 	        this.pathBar = pathBar;
 	        this.definitionWalker = definitionWalker;
+	        this.i18n = i18n;
 	    }
 	}
 
@@ -757,7 +760,7 @@
 	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);
 	    }
@@ -831,7 +834,7 @@
 	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;
@@ -917,8 +920,11 @@
 
 	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,
@@ -928,7 +934,12 @@
 	                };
 	                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)
 	        };
 	    }
 	}
@@ -947,19 +958,22 @@
 	}
 
 	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;
 	    }
 	}
 
@@ -1084,13 +1098,41 @@
 	    }
 	}
 
+	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) {
@@ -1132,8 +1174,8 @@
 	        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);
@@ -1307,53 +1349,6 @@
 	    }
 	}
 
-	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;
@@ -1480,156 +1475,160 @@
 	    }
 	}
 
+	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', {
@@ -1637,7 +1636,7 @@
 	        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;
@@ -1679,9 +1678,7 @@
 	        joinX: boxWidth / 2,
 	        sequenceComponents: null,
 	        placeholders: null,
-	        hasOutput() {
-	            return !!outputView;
-	        },
+	        hasOutput: !!outputView,
 	        getClientPosition() {
 	            return getAbsolutePosition(rect);
 	        },
@@ -1970,6 +1967,64 @@
 	    }
 	}
 
+	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);
+	    }
+	}
+
 	const defaultResolvers = [sequentialResolver, branchedResolver];
 	function branchedResolver(step) {
 	    const branches = step.branches;
@@ -2654,9 +2709,22 @@
 	    }
 	}
 
+	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;
@@ -2668,22 +2736,25 @@
 	        const behaviorController = new BehaviorController();
 	        const stepExtensionResolver = StepExtensionResolver.create(services);
 	        const definitionWalker = (_c = configuration.definitionWalker) !== null && _c !== void 0 ? _c : new 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;
@@ -3096,8 +3167,9 @@
 	}
 
 	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;
@@ -3108,15 +3180,16 @@
 	            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);
@@ -3125,7 +3198,7 @@
 	                }
 	                else {
 	                    items.push({
-	                        label: 'Select',
+	                        label: this.i18n('contextMenu.select', 'Select'),
 	                        order: 20,
 	                        callback: () => {
 	                            this.stateModifier.trySelectStepById(step.id);
@@ -3136,7 +3209,7 @@
 	            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);
@@ -3145,7 +3218,7 @@
 	                }
 	                if (this.stateModifier.isDuplicable(step, parentSequence)) {
 	                    items.push({
-	                        label: 'Duplicate',
+	                        label: this.i18n('contextMenu.duplicate', 'Duplicate'),
 	                        order: 40,
 	                        callback: () => {
 	                            this.stateModifier.tryDuplicate(step, parentSequence);
@@ -3158,7 +3231,7 @@
 	            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();
@@ -3183,7 +3256,7 @@
 	        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);
@@ -3430,28 +3503,28 @@
 	}
 
 	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);
@@ -3532,7 +3605,7 @@
 	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());
@@ -3662,19 +3735,16 @@
 	}
 
 	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);
 	    }
@@ -3705,7 +3775,7 @@
 
 	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());
@@ -3948,7 +4018,7 @@
 	}
 
 	class ToolboxView {
-	    static create(parent, api) {
+	    static create(parent, api, i18n) {
 	        const root = Dom.element('div', {
 	            class: 'sqd-toolbox'
 	        });
@@ -3958,14 +4028,14 @@
 	        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);
@@ -4025,9 +4095,9 @@
 	}
 
 	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();
@@ -4062,7 +4132,7 @@
 
 	class ToolboxExtension {
 	    create(root, api) {
-	        return Toolbox.create(root, api.toolbox);
+	        return Toolbox.create(root, api.toolbox, api.i18n);
 	    }
 	}
 
@@ -4100,7 +4170,7 @@
 	}
 
 	const defaultConfiguration$3 = {
-	    gapWidth: 100,
+	    gapWidth: 88,
 	    gapHeight: 24,
 	    radius: 6,
 	    iconSize: 16
@@ -4369,6 +4439,9 @@
 	        if (ext.placeholder) {
 	            services.placeholder = ext.placeholder;
 	        }
+	        if (ext.regionComponentView) {
+	            services.regionComponentView = ext.regionComponentView;
+	        }
 	        if (ext.viewportController) {
 	            services.viewportController = ext.viewportController;
 	        }
@@ -4429,6 +4502,9 @@
 	    if (!services.placeholder) {
 	        services.placeholder = RectPlaceholderExtension.create();
 	    }
+	    if (!services.regionComponentView) {
+	        services.regionComponentView = new DefaultRegionComponentViewExtension();
+	    }
 	    if (!services.viewportController) {
 	        services.viewportController = new DefaultViewportControllerExtension();
 	    }
@@ -4714,6 +4790,8 @@
 	exports.ComponentDom = ComponentDom;
 	exports.ControlBarApi = ControlBarApi;
 	exports.CustomActionController = CustomActionController;
+	exports.DefaultRegionComponentViewExtension = DefaultRegionComponentViewExtension;
+	exports.DefaultRegionView = DefaultRegionView;
 	exports.DefaultSequenceComponent = DefaultSequenceComponent;
 	exports.DefaultSequenceComponentView = DefaultSequenceComponentView;
 	exports.DefaultViewportController = DefaultViewportController;
@@ -4737,7 +4815,6 @@
 	exports.QuantifiedScaleViewportCalculator = QuantifiedScaleViewportCalculator;
 	exports.RectPlaceholder = RectPlaceholder;
 	exports.RectPlaceholderView = RectPlaceholderView;
-	exports.RegionView = RegionView;
 	exports.ServicesResolver = ServicesResolver;
 	exports.SimpleEvent = SimpleEvent;
 	exports.StepComponent = StepComponent;