sequential-workflow-designer 0.20.0 → 0.21.0

package/lib/cjs/index.cjs

@@ -758,7 +758,7 @@ const BADGE_GAP = 4;
 class Badges {
     static createForStep(stepContext, view, componentContext) {
         const g = createG(view.g);
-        const badges = componentContext.services.badges.map(ext => ext.createForStep(g, stepContext, componentContext));
+        const badges = componentContext.services.badges.map(ext => ext.createForStep(g, view, stepContext, componentContext));
         const position = new Vector(view.width, 0);
         return new Badges(g, position, badges);
     }
@@ -832,7 +832,7 @@ exports.PlaceholderDirection = void 0;
 class StepComponent {
     static create(view, stepContext, componentContext) {
         const badges = Badges.createForStep(stepContext, view, componentContext);
-        return new StepComponent(view, stepContext.step, stepContext.parentSequence, view.hasOutput(), badges);
+        return new StepComponent(view, stepContext.step, stepContext.parentSequence, view.hasOutput, badges);
     }
     constructor(view, step, parentSequence, hasOutput, badges) {
         this.view = view;
@@ -918,7 +918,9 @@ class StepComponent {
 
 class StepComponentViewContextFactory {
     static create(stepContext, componentContext) {
+        const preferenceKeyPrefix = stepContext.step.id + ':';
         return {
+            i18n: componentContext.i18n,
             getStepIconUrl: () => componentContext.iconProvider.getIconUrl(stepContext.step),
             getStepName: () => componentContext.i18n(`step.${stepContext.step.type}.name`, stepContext.step.name),
             createSequenceComponent: (parentElement, sequence) => {
@@ -930,8 +932,12 @@ class StepComponentViewContextFactory {
                 };
                 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)
         };
     }
 }
@@ -950,20 +956,22 @@ class StepComponentFactory {
 }
 
 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;
     }
 }
 
@@ -1088,13 +1096,41 @@ class ValidationErrorBadgeView {
     }
 }
 
+class ValidatorFactory {
+    static createForStep(stepContext, view, componentContext) {
+        return () => {
+            if (!componentContext.validator.validateStep(stepContext.step, stepContext.parentSequence)) {
+                return false;
+            }
+            if (view.haveCollapsedChildren) {
+                let allChildrenValid = true;
+                componentContext.definitionWalker.forEachChildren(stepContext.step, (step, _, parentSequence) => {
+                    if (!componentContext.validator.validateStep(step, parentSequence)) {
+                        allChildrenValid = false;
+                        return false;
+                    }
+                });
+                if (!allChildrenValid) {
+                    return false;
+                }
+            }
+            return true;
+        };
+    }
+    static createForRoot(componentContext) {
+        return () => {
+            return componentContext.validator.validateRoot();
+        };
+    }
+}
+
 class ValidationErrorBadge {
-    static createForStep(parentElement, stepContext, componentContext, configuration) {
-        const validator = () => componentContext.validator.validateStep(stepContext.step, stepContext.parentSequence);
+    static createForStep(parentElement, view, stepContext, componentContext, configuration) {
+        const validator = ValidatorFactory.createForStep(stepContext, view, componentContext);
         return new ValidationErrorBadge(parentElement, validator, configuration);
     }
     static createForRoot(parentElement, componentContext, configuration) {
-        const validator = () => componentContext.validator.validateRoot();
+        const validator = ValidatorFactory.createForRoot(componentContext);
         return new ValidationErrorBadge(parentElement, validator, configuration);
     }
     constructor(parentElement, validator, configuration) {
@@ -1136,8 +1172,8 @@ class ValidationErrorBadgeExtension {
         this.id = 'validationError';
         this.createStartValue = () => true;
     }
-    createForStep(parentElement, stepContext, componentContext) {
-        return ValidationErrorBadge.createForStep(parentElement, stepContext, componentContext, this.configuration.view);
+    createForStep(parentElement, view, stepContext, componentContext) {
+        return ValidationErrorBadge.createForStep(parentElement, view, stepContext, componentContext, this.configuration.view);
     }
     createForRoot(parentElement, componentContext) {
         return ValidationErrorBadge.createForRoot(parentElement, componentContext, this.configuration.view);
@@ -1311,53 +1347,6 @@ class OutputView {
     }
 }
 
-class RegionView {
-    static create(parent, widths, height) {
-        const totalWidth = widths.reduce((result, width) => result + width, 0);
-        const lines = [
-            drawLine(parent, 0, 0, totalWidth, 0),
-            drawLine(parent, 0, 0, 0, height),
-            drawLine(parent, 0, height, totalWidth, height),
-            drawLine(parent, totalWidth, 0, totalWidth, height)
-        ];
-        let offsetX = widths[0];
-        for (let i = 1; i < widths.length; i++) {
-            lines.push(drawLine(parent, offsetX, 0, offsetX, height));
-            offsetX += widths[i];
-        }
-        return new RegionView(lines, totalWidth, height);
-    }
-    constructor(lines, width, height) {
-        this.lines = lines;
-        this.width = width;
-        this.height = height;
-    }
-    getClientPosition() {
-        return getAbsolutePosition(this.lines[0]);
-    }
-    resolveClick(click) {
-        const regionPosition = this.getClientPosition();
-        const d = click.position.subtract(regionPosition);
-        return d.x >= 0 && d.y >= 0 && d.x < this.width * click.scale && d.y < this.height * click.scale;
-    }
-    setIsSelected(isSelected) {
-        this.lines.forEach(region => {
-            Dom.toggleClass(region, isSelected, 'sqd-selected');
-        });
-    }
-}
-function drawLine(parent, x1, y1, x2, y2) {
-    const line = Dom.svg('line', {
-        class: 'sqd-region',
-        x1,
-        y1,
-        x2,
-        y2
-    });
-    parent.insertBefore(line, parent.firstChild);
-    return line;
-}
-
 class DefaultSequenceComponentView {
     static create(parent, sequenceContext, componentContext) {
         const phWidth = componentContext.services.placeholder.gapSize.x;
@@ -1484,159 +1473,160 @@ class DefaultSequenceComponent {
     }
 }
 
+const COMPONENT_CLASS_NAME$2 = 'container';
 const createContainerStepComponentViewFactory = (cfg) => (parentElement, stepContext, viewContext) => {
-    const { step } = stepContext;
-    const g = ComponentDom.stepG('container', step.type, step.id);
-    parentElement.appendChild(g);
-    const 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', {
@@ -1686,9 +1676,7 @@ const createTaskStepComponentViewFactory = (isInterrupted, cfg) => (parentElemen
         joinX: boxWidth / 2,
         sequenceComponents: null,
         placeholders: null,
-        hasOutput() {
-            return !!outputView;
-        },
+        hasOutput: !!outputView,
         getClientPosition() {
             return getAbsolutePosition(rect);
         },
@@ -1977,6 +1965,64 @@ class RectPlaceholder {
     }
 }
 
+class DefaultRegionView {
+    static create(parent, widths, height) {
+        const totalWidth = widths.reduce((result, width) => result + width, 0);
+        const lines = [
+            drawLine(parent, 0, 0, totalWidth, 0),
+            drawLine(parent, 0, 0, 0, height),
+            drawLine(parent, 0, height, totalWidth, height),
+            drawLine(parent, totalWidth, 0, totalWidth, height)
+        ];
+        let offsetX = widths[0];
+        for (let i = 1; i < widths.length; i++) {
+            lines.push(drawLine(parent, offsetX, 0, offsetX, height));
+            offsetX += widths[i];
+        }
+        return new DefaultRegionView(lines, totalWidth, height);
+    }
+    constructor(lines, width, height) {
+        this.lines = lines;
+        this.width = width;
+        this.height = height;
+    }
+    getClientPosition() {
+        return getAbsolutePosition(this.lines[0]);
+    }
+    resolveClick(click) {
+        const regionPosition = this.getClientPosition();
+        const d = click.position.subtract(regionPosition);
+        if (d.x >= 0 && d.y >= 0 && d.x < this.width * click.scale && d.y < this.height * click.scale) {
+            return true;
+        }
+        return null;
+    }
+    setIsSelected(isSelected) {
+        this.lines.forEach(region => {
+            Dom.toggleClass(region, isSelected, 'sqd-selected');
+        });
+    }
+}
+function drawLine(parent, x1, y1, x2, y2) {
+    const line = Dom.svg('line', {
+        class: 'sqd-region',
+        x1,
+        y1,
+        x2,
+        y2
+    });
+    parent.insertBefore(line, parent.firstChild);
+    return line;
+}
+
+class DefaultRegionComponentViewExtension {
+    create(parentElement, componentClassName, stepContext, _, contentFactory) {
+        const g = ComponentDom.stepG(componentClassName, stepContext.step.type, stepContext.step.id);
+        parentElement.appendChild(g);
+        return contentFactory(g, DefaultRegionView.create);
+    }
+}
+
 function readMousePosition(e) {
     return new Vector(e.pageX, e.pageY);
 }
@@ -2478,9 +2524,22 @@ class WorkspaceControllerWrapper {
     }
 }
 
+class MemoryPreferenceStorage {
+    constructor() {
+        this.map = {};
+    }
+    setItem(key, value) {
+        this.map[key] = value;
+    }
+    getItem(key) {
+        var _a;
+        return (_a = this.map[key]) !== null && _a !== void 0 ? _a : null;
+    }
+}
+
 class DesignerContext {
     static create(parent, startDefinition, configuration, services) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         const definition = ObjectCloner.deepClone(startDefinition);
         const layoutController = new LayoutController(parent);
         const isReadonly = !!configuration.isReadonly;
@@ -2499,7 +2558,8 @@ class DesignerContext {
         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) {
@@ -3925,7 +3985,7 @@ class DefaultPlaceholderControllerExtension {
 }
 
 const defaultConfiguration$3 = {
-    gapWidth: 100,
+    gapWidth: 88,
     gapHeight: 24,
     radius: 6,
     iconSize: 16
@@ -4194,6 +4254,9 @@ function merge(services, extensions) {
         if (ext.placeholder) {
             services.placeholder = ext.placeholder;
         }
+        if (ext.regionComponentView) {
+            services.regionComponentView = ext.regionComponentView;
+        }
         if (ext.viewportController) {
             services.viewportController = ext.viewportController;
         }
@@ -4254,6 +4317,9 @@ function setDefaults(services, configuration) {
     if (!services.placeholder) {
         services.placeholder = RectPlaceholderExtension.create();
     }
+    if (!services.regionComponentView) {
+        services.regionComponentView = new DefaultRegionComponentViewExtension();
+    }
     if (!services.viewportController) {
         services.viewportController = new DefaultViewportControllerExtension();
     }
@@ -4539,6 +4605,8 @@ exports.ComponentContext = ComponentContext;
 exports.ComponentDom = ComponentDom;
 exports.ControlBarApi = ControlBarApi;
 exports.CustomActionController = CustomActionController;
+exports.DefaultRegionComponentViewExtension = DefaultRegionComponentViewExtension;
+exports.DefaultRegionView = DefaultRegionView;
 exports.DefaultSequenceComponent = DefaultSequenceComponent;
 exports.DefaultSequenceComponentView = DefaultSequenceComponentView;
 exports.DefaultViewportController = DefaultViewportController;
@@ -4561,7 +4629,6 @@ exports.PathBarApi = PathBarApi;
 exports.QuantifiedScaleViewportCalculator = QuantifiedScaleViewportCalculator;
 exports.RectPlaceholder = RectPlaceholder;
 exports.RectPlaceholderView = RectPlaceholderView;
-exports.RegionView = RegionView;
 exports.ServicesResolver = ServicesResolver;
 exports.SimpleEvent = SimpleEvent;
 exports.StepComponent = StepComponent;