sequential-workflow-designer 0.20.0 → 0.21.1

package/dist/index.umd.js

@@ -760,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);
 	    }
@@ -834,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;
@@ -920,7 +920,9 @@
 
 	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) => {
@@ -932,8 +934,12 @@
 	                };
 	                return componentContext.services.sequenceComponent.create(parentElement, sequenceContext, componentContext);
 	            },
+	            createRegionComponentView(parentElement, componentClassName, contentFactory) {
+	                return componentContext.services.regionComponentView.create(parentElement, componentClassName, stepContext, this, contentFactory);
+	            },
 	            createPlaceholderForArea: componentContext.services.placeholder.createForArea.bind(componentContext.services.placeholder),
-	            i18n: componentContext.i18n
+	            getPreference: (key) => componentContext.preferenceStorage.getItem(preferenceKeyPrefix + key),
+	            setPreference: (key, value) => componentContext.preferenceStorage.setItem(preferenceKeyPrefix + key, value)
 	        };
 	    }
 	}
@@ -952,20 +958,22 @@
 	}
 
 	class ComponentContext {
-	    static create(stepsConfiguration, validatorConfiguration, state, stepExtensionResolver, i18n, 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, i18n, services);
+	        return new ComponentContext(validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n);
 	    }
-	    constructor(validator, iconProvider, placeholderController, stepComponentFactory, i18n, services) {
+	    constructor(validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n) {
 	        this.validator = validator;
 	        this.iconProvider = iconProvider;
 	        this.placeholderController = placeholderController;
 	        this.stepComponentFactory = stepComponentFactory;
-	        this.i18n = i18n;
+	        this.definitionWalker = definitionWalker;
 	        this.services = services;
+	        this.preferenceStorage = preferenceStorage;
+	        this.i18n = i18n;
 	    }
 	}
 
@@ -1090,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) {
@@ -1138,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);
@@ -1313,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;
@@ -1486,159 +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 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 = 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;
-	        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);
+	    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', {
@@ -1688,9 +1678,7 @@
 	        joinX: boxWidth / 2,
 	        sequenceComponents: null,
 	        placeholders: null,
-	        hasOutput() {
-	            return !!outputView;
-	        },
+	        hasOutput: !!outputView,
 	        getClientPosition() {
 	            return getAbsolutePosition(rect);
 	        },
@@ -1979,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;
@@ -2663,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, _d;
+	        var _a, _b, _c, _d, _e;
 	        const definition = ObjectCloner.deepClone(startDefinition);
 	        const layoutController = new LayoutController(parent);
 	        const isReadonly = !!configuration.isReadonly;
@@ -2684,7 +2743,8 @@
 	        if (configuration.undoStackSize) {
 	            historyController = HistoryController.create(configuration.undoStack, state, stateModifier, configuration);
 	        }
-	        const componentContext = ComponentContext.create(configuration.steps, configuration.validator, state, stepExtensionResolver, i18n, services);
+	        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, i18n, stateModifier, layoutController, workspaceController, behaviorController, customActionController, historyController) {
@@ -4110,7 +4170,7 @@
 	}
 
 	const defaultConfiguration$3 = {
-	    gapWidth: 100,
+	    gapWidth: 88,
 	    gapHeight: 24,
 	    radius: 6,
 	    iconSize: 16
@@ -4379,6 +4439,9 @@
 	        if (ext.placeholder) {
 	            services.placeholder = ext.placeholder;
 	        }
+	        if (ext.regionComponentView) {
+	            services.regionComponentView = ext.regionComponentView;
+	        }
 	        if (ext.viewportController) {
 	            services.viewportController = ext.viewportController;
 	        }
@@ -4439,6 +4502,9 @@
 	    if (!services.placeholder) {
 	        services.placeholder = RectPlaceholderExtension.create();
 	    }
+	    if (!services.regionComponentView) {
+	        services.regionComponentView = new DefaultRegionComponentViewExtension();
+	    }
 	    if (!services.viewportController) {
 	        services.viewportController = new DefaultViewportControllerExtension();
 	    }
@@ -4724,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;
@@ -4747,7 +4815,6 @@
 	exports.QuantifiedScaleViewportCalculator = QuantifiedScaleViewportCalculator;
 	exports.RectPlaceholder = RectPlaceholder;
 	exports.RectPlaceholderView = RectPlaceholderView;
-	exports.RegionView = RegionView;
 	exports.ServicesResolver = ServicesResolver;
 	exports.SimpleEvent = SimpleEvent;
 	exports.StepComponent = StepComponent;