npm - sequential-workflow-designer - Versions diffs - 0.20.0 → 0.21.0 - Mend

sequential-workflow-designer 0.20.0 → 0.21.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md CHANGED Viewed

@@ -101,10 +101,10 @@ Add the below code to your head section in HTML document.
 ```html
 <head>
 ...
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.20.0/css/designer.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.20.0/css/designer-light.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.20.0/css/designer-dark.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.20.0/dist/index.umd.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.21.0/css/designer.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.21.0/css/designer-light.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.21.0/css/designer-dark.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.21.0/dist/index.umd.js"></script>
 ```
 Call the designer by:

package/dist/index.umd.js CHANGED Viewed

@@ -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;