sequential-workflow-designer 0.29.2 → 0.30.0

package/lib/esm/index.js

@@ -439,13 +439,16 @@ class PlaceholderFinder {
             const scroll = new Vector(window.scrollX, window.scrollY);
             this.cache = this.placeholders.map(placeholder => {
                 const rect = placeholder.getClientRect();
+                const lt = new Vector(rect.x, rect.y).add(scroll);
+                const br = new Vector(rect.x + rect.width, rect.y + rect.height).add(scroll);
                 return {
                     placeholder,
-                    lt: new Vector(rect.x, rect.y).add(scroll),
-                    br: new Vector(rect.x + rect.width, rect.y + rect.height).add(scroll)
+                    lt,
+                    br,
+                    diagSq: lt.x * lt.x + lt.y * lt.y
                 };
             });
-            this.cache.sort((a, b) => a.lt.y - b.lt.y);
+            this.cache.sort((a, b) => a.diagSq - b.diagSq);
         }
         const vR = vLt.x + vWidth;
         const vB = vLt.y + vHeight;
@@ -597,7 +600,7 @@ class ToolboxApi {
     }
     activateStep(step) {
         const newStep = ObjectCloner.deepClone(step);
-        newStep.id = this.uidGenerator ? this.uidGenerator() : Uid.next();
+        newStep.id = this.uidGenerator();
         return newStep;
     }
 }
@@ -612,9 +615,9 @@ class StepTypeValidator {
 }
 
 class ToolboxDataProvider {
-    constructor(iconProvider, i18n, configuration) {
-        this.iconProvider = iconProvider;
+    constructor(i18n, iconProvider, configuration) {
         this.i18n = i18n;
+        this.iconProvider = iconProvider;
         this.configuration = configuration;
         this.createItemData = (step) => {
             StepTypeValidator.validate(step.type);
@@ -819,8 +822,8 @@ class DesignerApi {
     static create(context) {
         const workspace = new WorkspaceApi(context.state, context.definitionWalker, context.workspaceController);
         const viewportController = context.services.viewportController.create(workspace);
-        const toolboxDataProvider = new ToolboxDataProvider(context.componentContext.iconProvider, context.i18n, context.configuration.toolbox);
-        return new DesignerApi(context.configuration.shadowRoot, ControlBarApi.create(context.state, context.historyController, context.stateModifier), new ToolboxApi(context.state, context, context.behaviorController, toolboxDataProvider, context.configuration.uidGenerator), new EditorApi(context.state, context.definitionWalker, context.stateModifier), workspace, new ViewportApi(context.state, context.workspaceController, viewportController), new PathBarApi(context.state, context.definitionWalker), context.definitionWalker, context.i18n);
+        const toolboxDataProvider = new ToolboxDataProvider(context.i18n, context.componentContext.iconProvider, context.configuration.toolbox);
+        return new DesignerApi(context.configuration.shadowRoot, ControlBarApi.create(context.state, context.historyController, context.stateModifier), new ToolboxApi(context.state, context, context.behaviorController, toolboxDataProvider, context.uidGenerator), new EditorApi(context.state, context.definitionWalker, context.stateModifier), workspace, new ViewportApi(context.state, context.workspaceController, viewportController), new PathBarApi(context.state, context.definitionWalker), context.definitionWalker, context.i18n);
     }
     constructor(shadowRoot, controlBar, toolbox, editor, workspace, viewport, pathBar, definitionWalker, i18n) {
         this.shadowRoot = shadowRoot;
@@ -1008,7 +1011,7 @@ class ValidationErrorBadge {
     }
 }
 
-const defaultConfiguration$7 = {
+const defaultConfiguration$6 = {
     view: {
         size: 22,
         iconSize: 12
@@ -1016,7 +1019,7 @@ const defaultConfiguration$7 = {
 };
 class ValidationErrorBadgeExtension {
     static create(configuration) {
-        return new ValidationErrorBadgeExtension(configuration !== null && configuration !== void 0 ? configuration : defaultConfiguration$7);
+        return new ValidationErrorBadgeExtension(configuration !== null && configuration !== void 0 ? configuration : defaultConfiguration$6);
     }
     constructor(configuration) {
         this.configuration = configuration;
@@ -1106,7 +1109,7 @@ class JoinView {
         switch (targets.length) {
             case 1:
                 if (start.x === targets[0].x) {
-                    JoinView.createStraightJoin(parent, start, firstTarget.y * dy);
+                    JoinView.createStraightJoin(parent, start, h * 2 * dy);
                 }
                 else {
                     appendCurvedJoins(parent, start, targets, h, dy);
@@ -1202,10 +1205,18 @@ class OutputView {
     }
 }
 
+// PlaceholderExtension
+var PlaceholderGapOrientation;
+(function (PlaceholderGapOrientation) {
+    PlaceholderGapOrientation[PlaceholderGapOrientation["along"] = 0] = "along";
+    PlaceholderGapOrientation[PlaceholderGapOrientation["perpendicular"] = 1] = "perpendicular"; // Goes perpendicular to the flow
+})(PlaceholderGapOrientation || (PlaceholderGapOrientation = {}));
+
 class DefaultSequenceComponentView {
     static create(parent, sequenceContext, componentContext) {
-        const phWidth = componentContext.services.placeholder.gapSize.x;
-        const phHeight = componentContext.services.placeholder.gapSize.y;
+        const phSize = componentContext.services.placeholder.getGapSize(PlaceholderGapOrientation.along);
+        const phWidth = phSize.x;
+        const phHeight = phSize.y;
         const { sequence } = sequenceContext;
         const g = Dom.svg('g');
         parent.appendChild(g);
@@ -1242,7 +1253,7 @@ class DefaultSequenceComponentView {
                 JoinView.createStraightJoin(g, new Vector(joinX, offsetY - phHeight), phHeight);
             }
             if (!sequenceContext.isPreview && componentContext.placeholderController.canCreate(sequence, i)) {
-                const ph = componentContext.services.placeholder.createForGap(g, sequence, i);
+                const ph = componentContext.services.placeholder.createForGap(g, sequence, i, PlaceholderGapOrientation.along);
                 Dom.translate(ph.view.g, joinX - phWidth / 2, offsetY - phHeight);
                 placeholders.push(ph);
             }
@@ -1254,7 +1265,7 @@ class DefaultSequenceComponentView {
         }
         const newIndex = components.length;
         if (!sequenceContext.isPreview && componentContext.placeholderController.canCreate(sequence, newIndex)) {
-            const ph = componentContext.services.placeholder.createForGap(g, sequence, newIndex);
+            const ph = componentContext.services.placeholder.createForGap(g, sequence, newIndex, PlaceholderGapOrientation.along);
             Dom.translate(ph.view.g, joinX - phWidth / 2, offsetY - phHeight);
             placeholders.push(ph);
         }
@@ -1302,21 +1313,19 @@ class DefaultSequenceComponent {
     }
     findById(stepId) {
         for (const component of this.view.components) {
-            const sc = component.findById(stepId);
-            if (sc) {
-                return sc;
+            const result = component.findById(stepId);
+            if (result) {
+                return result;
             }
         }
         return null;
     }
     resolvePlaceholders(skipComponent, result) {
+        this.view.components.forEach(component => component.resolvePlaceholders(skipComponent, result));
         this.view.placeholders.forEach(placeholder => result.placeholders.push(placeholder));
-        this.view.components.forEach(c => c.resolvePlaceholders(skipComponent, result));
     }
     updateBadges(result) {
-        for (const component of this.view.components) {
-            component.updateBadges(result);
-        }
+        this.view.components.forEach(component => component.updateBadges(result));
     }
 }
 
@@ -1329,7 +1338,7 @@ var ClickCommandType;
 })(ClickCommandType || (ClickCommandType = {}));
 var PlaceholderDirection;
 (function (PlaceholderDirection) {
-    PlaceholderDirection[PlaceholderDirection["none"] = 0] = "none";
+    PlaceholderDirection[PlaceholderDirection["gap"] = 0] = "gap";
     PlaceholderDirection[PlaceholderDirection["in"] = 1] = "in";
     PlaceholderDirection[PlaceholderDirection["out"] = 2] = "out";
 })(PlaceholderDirection || (PlaceholderDirection = {}));
@@ -1343,7 +1352,7 @@ class StartStopRootComponentView {
         const sequenceComponent = DefaultSequenceComponent.create(g, {
             sequence,
             depth: 0,
-            isInputConnected: true,
+            isInputConnected: Boolean(cfg.start),
             isOutputConnected: true,
             isPreview: false
         }, context);
@@ -1351,9 +1360,11 @@ class StartStopRootComponentView {
         const x = view.joinX - cfg.size / 2;
         const endY = cfg.size + view.height;
         const iconSize = parentPlaceIndicator ? cfg.folderIconSize : cfg.defaultIconSize;
-        const startCircle = createCircle('start', parentPlaceIndicator ? cfg.folderIconD : cfg.startIconD, cfg.size, iconSize);
-        Dom.translate(startCircle, x, 0);
-        g.appendChild(startCircle);
+        if (cfg.start) {
+            const startCircle = createCircle('start', parentPlaceIndicator ? cfg.folderIconD : cfg.start.iconD, cfg.size, iconSize);
+            Dom.translate(startCircle, x, 0);
+            g.appendChild(startCircle);
+        }
         Dom.translate(view.g, 0, cfg.size);
         const stopCircle = createCircle('stop', parentPlaceIndicator ? cfg.folderIconD : cfg.stopIconD, cfg.size, iconSize);
         Dom.translate(stopCircle, x, endY);
@@ -1430,31 +1441,33 @@ class StartStopRootComponent {
     }
 }
 
-const defaultConfiguration$6 = {
-    view: {
-        size: 30,
-        defaultIconSize: 22,
-        folderIconSize: 18,
-        startIconD: Icons.play,
-        stopIconD: Icons.stop,
-        folderIconD: Icons.folder
-    }
+const defaultViewConfiguration$1 = {
+    size: 30,
+    defaultIconSize: 22,
+    folderIconSize: 18,
+    start: {
+        iconD: Icons.play
+    },
+    stopIconD: Icons.stop,
+    folderIconD: Icons.folder
 };
 class StartStopRootComponentExtension {
     static create(configuration) {
-        return new StartStopRootComponentExtension(configuration !== null && configuration !== void 0 ? configuration : defaultConfiguration$6);
+        return new StartStopRootComponentExtension(configuration);
     }
     constructor(configuration) {
         this.configuration = configuration;
     }
     create(parentElement, sequence, parentPlaceIndicator, context) {
-        return StartStopRootComponent.create(parentElement, sequence, parentPlaceIndicator, context, this.configuration.view);
+        var _a;
+        const view = ((_a = this.configuration) === null || _a === void 0 ? void 0 : _a.view) ? Object.assign(Object.assign({}, defaultViewConfiguration$1), this.configuration.view) : defaultViewConfiguration$1;
+        return StartStopRootComponent.create(parentElement, sequence, parentPlaceIndicator, context, view);
     }
 }
 
-const COMPONENT_CLASS_NAME$2 = 'container';
+const COMPONENT_CLASS_NAME$3 = 'container';
 const createContainerStepComponentViewFactory = (cfg) => (parentElement, stepContext, viewContext) => {
-    return viewContext.createRegionComponentView(parentElement, COMPONENT_CLASS_NAME$2, (g, regionViewBuilder) => {
+    return viewContext.createRegionComponentView(parentElement, COMPONENT_CLASS_NAME$3, (g, regionViewBuilder) => {
         const step = stepContext.step;
         const name = viewContext.getStepName();
         const labelView = LabelView.create(g, cfg.paddingTop, cfg.label, name, 'primary');
@@ -1480,7 +1493,7 @@ const createContainerStepComponentViewFactory = (cfg) => (parentElement, stepCon
             height,
             joinX,
             placeholders: null,
-            sequenceComponents: [sequenceComponent],
+            components: [sequenceComponent],
             hasOutput: sequenceComponent.hasOutput,
             getClientPosition() {
                 return regionView.getClientPosition();
@@ -1504,6 +1517,149 @@ const createContainerStepComponentViewFactory = (cfg) => (parentElement, stepCon
     });
 };
 
+const COMPONENT_CLASS_NAME$2 = 'launch-pad';
+function createView$1(parentElement, stepContext, viewContext, regionViewFactory, isInterruptedIfEmpty, cfg) {
+    const step = stepContext.step;
+    const sequence = stepContext.step.sequence;
+    const g = ComponentDom.stepG(COMPONENT_CLASS_NAME$2, step.type, step.id);
+    parentElement.appendChild(g);
+    const components = [];
+    let width;
+    let height;
+    let joinX;
+    const placeholdersX = [];
+    let placeholderOrientation;
+    let placeholderSize;
+    let hasOutput;
+    let inputView = null;
+    let outputView = null;
+    if (sequence.length > 0) {
+        let maxComponentHeight = 0;
+        for (let i = 0; i < sequence.length; i++) {
+            const component = viewContext.createStepComponent(g, sequence, sequence[i], i);
+            components.push(component);
+            maxComponentHeight = Math.max(maxComponentHeight, component.view.height);
+        }
+        const joinsX = [];
+        const positionsX = [];
+        const spacesY = [];
+        placeholderOrientation = PlaceholderGapOrientation.perpendicular;
+        placeholderSize = viewContext.getPlaceholderGapSize(placeholderOrientation);
+        placeholdersX.push(0);
+        let positionX = placeholderSize.x;
+        for (let i = 0; i < components.length; i++) {
+            if (i > 0) {
+                placeholdersX.push(positionX);
+                positionX += placeholderSize.x;
+            }
+            const component = components[i];
+            const componentY = (maxComponentHeight - component.view.height) / 2 + cfg.connectionHeight + cfg.paddingY;
+            Dom.translate(component.view.g, positionX, componentY);
+            joinsX.push(positionX + component.view.joinX);
+            positionX += component.view.width;
+            positionsX.push(positionX);
+            spacesY.push(Math.max(0, (maxComponentHeight - component.view.height) / 2));
+        }
+        placeholdersX.push(positionX);
+        positionX += placeholderSize.x;
+        width = positionX;
+        height = maxComponentHeight + 2 * cfg.connectionHeight + 2 * cfg.paddingY;
+        const contentJoinX = components.length % 2 === 0
+            ? positionsX[Math.max(0, Math.floor(components.length / 2) - 1)] + placeholderSize.x / 2
+            : joinsX[Math.floor(components.length / 2)];
+        if (stepContext.isInputConnected) {
+            const joinsTopY = joinsX.map(x => new Vector(x, cfg.connectionHeight));
+            JoinView.createJoins(g, new Vector(contentJoinX, 0), joinsTopY);
+            for (let i = 0; i < joinsX.length; i++) {
+                JoinView.createStraightJoin(g, joinsTopY[i], cfg.paddingY + spacesY[i]);
+            }
+        }
+        const joinsBottomY = joinsX.map(x => new Vector(x, cfg.connectionHeight + 2 * cfg.paddingY + maxComponentHeight));
+        JoinView.createJoins(g, new Vector(contentJoinX, height), joinsBottomY);
+        for (let i = 0; i < joinsX.length; i++) {
+            JoinView.createStraightJoin(g, joinsBottomY[i], -(cfg.paddingY + spacesY[i]));
+        }
+        hasOutput = true;
+        joinX = contentJoinX;
+    }
+    else {
+        placeholderOrientation = PlaceholderGapOrientation.along;
+        placeholderSize = viewContext.getPlaceholderGapSize(placeholderOrientation);
+        placeholdersX.push(cfg.emptyPaddingX);
+        width = placeholderSize.x + cfg.emptyPaddingX * 2;
+        height = placeholderSize.y + cfg.emptyPaddingY * 2;
+        hasOutput = !isInterruptedIfEmpty;
+        if (stepContext.isInputConnected) {
+            inputView = InputView.createRoundInput(g, width / 2, 0, cfg.emptyInputSize);
+        }
+        if (stepContext.isOutputConnected && hasOutput) {
+            outputView = OutputView.create(g, width / 2, height, cfg.emptyOutputSize);
+        }
+        if (cfg.emptyIconSize > 0) {
+            const iconUrl = viewContext.getStepIconUrl();
+            if (iconUrl) {
+                const icon = Dom.svg('image', {
+                    href: iconUrl,
+                    x: (width - cfg.emptyIconSize) / 2,
+                    y: (height - cfg.emptyIconSize) / 2,
+                    width: cfg.emptyIconSize,
+                    height: cfg.emptyIconSize
+                });
+                g.appendChild(icon);
+            }
+        }
+        joinX = width / 2;
+    }
+    let regionView = null;
+    if (regionViewFactory) {
+        regionView = regionViewFactory(g, [width], height);
+    }
+    const placeholders = [];
+    const placeholderY = (height - placeholderSize.y) / 2;
+    for (let i = 0; i < placeholdersX.length; i++) {
+        const placeholder = viewContext.createPlaceholderForGap(g, sequence, i, placeholderOrientation);
+        placeholders.push(placeholder);
+        Dom.translate(placeholder.view.g, placeholdersX[i], placeholderY);
+    }
+    return {
+        g,
+        width,
+        height,
+        joinX,
+        components,
+        placeholders,
+        hasOutput,
+        getClientPosition() {
+            return getAbsolutePosition(g);
+        },
+        resolveClick(click) {
+            if (regionView) {
+                const result = regionView.resolveClick(click);
+                return result === true || (result === null && g.contains(click.element)) ? true : result;
+            }
+            return null;
+        },
+        setIsDragging(isDragging) {
+            inputView === null || inputView === void 0 ? void 0 : inputView.setIsHidden(isDragging);
+            outputView === null || outputView === void 0 ? void 0 : outputView.setIsHidden(isDragging);
+        },
+        setIsDisabled(isDisabled) {
+            Dom.toggleClass(g, isDisabled, 'sqd-disabled');
+        },
+        setIsSelected(isSelected) {
+            regionView === null || regionView === void 0 ? void 0 : regionView.setIsSelected(isSelected);
+        }
+    };
+}
+const createLaunchPadStepComponentViewFactory = (isInterruptedIfEmpty, cfg) => (parentElement, stepContext, viewContext) => {
+    if (cfg.isRegionEnabled) {
+        return viewContext.createRegionComponentView(parentElement, COMPONENT_CLASS_NAME$2, (g, regionViewBuilder) => {
+            return createView$1(g, stepContext, viewContext, regionViewBuilder, isInterruptedIfEmpty, cfg);
+        });
+    }
+    return createView$1(parentElement, stepContext, viewContext, null, isInterruptedIfEmpty, cfg);
+};
+
 const COMPONENT_CLASS_NAME$1 = 'switch';
 function createView(g, width, height, joinX, viewContext, sequenceComponents, regionView, cfg) {
     let inputView = null;
@@ -1517,7 +1673,7 @@ function createView(g, width, height, joinX, viewContext, sequenceComponents, re
         height,
         joinX,
         placeholders: null,
-        sequenceComponents,
+        components: sequenceComponents,
         hasOutput: sequenceComponents ? sequenceComponents.some(c => c.hasOutput) : true,
         getClientPosition() {
             return regionView.getClientPosition();
@@ -1668,7 +1824,7 @@ const createTaskStepComponentViewFactory = (isInterrupted, cfg) => (parentElemen
         height: cfg.iconSize
     });
     g.appendChild(icon);
-    const isInputViewHidden = stepContext.depth === 0 && stepContext.position === 0 && !stepContext.isInputConnected;
+    const isInputViewHidden = !stepContext.isInputConnected; // TODO: handle inside the folder
     const isOutputViewHidden = isInterrupted;
     const inputView = isInputViewHidden ? null : InputView.createRoundInput(g, boxWidth / 2, 0, cfg.inputSize);
     const outputView = isOutputViewHidden ? null : OutputView.create(g, boxWidth / 2, boxHeight, cfg.outputSize);
@@ -1677,7 +1833,7 @@ const createTaskStepComponentViewFactory = (isInterrupted, cfg) => (parentElemen
         width: boxWidth,
         height: boxHeight,
         joinX: boxWidth / 2,
-        sequenceComponents: null,
+        components: null,
         placeholders: null,
         hasOutput: !!outputView,
         getClientPosition() {
@@ -1852,8 +2008,8 @@ class StepComponent {
         if (this.step.id === stepId) {
             return this;
         }
-        if (this.view.sequenceComponents) {
-            for (const component of this.view.sequenceComponents) {
+        if (this.view.components) {
+            for (const component of this.view.components) {
                 const result = component.findById(stepId);
                 if (result) {
                     return result;
@@ -1863,14 +2019,22 @@ class StepComponent {
         return null;
     }
     resolveClick(click) {
-        if (this.view.sequenceComponents) {
-            for (const component of this.view.sequenceComponents) {
+        if (this.view.components) {
+            for (const component of this.view.components) {
                 const result = component.resolveClick(click);
                 if (result) {
                     return result;
                 }
             }
         }
+        if (this.view.placeholders) {
+            for (const placeholder of this.view.placeholders) {
+                const result = placeholder.resolveClick(click);
+                if (result) {
+                    return result;
+                }
+            }
+        }
         const badgeResult = this.badges.resolveClick(click);
         if (badgeResult) {
             return badgeResult;
@@ -1888,8 +2052,8 @@ class StepComponent {
     }
     resolvePlaceholders(skipComponent, result) {
         if (skipComponent !== this) {
-            if (this.view.sequenceComponents) {
-                this.view.sequenceComponents.forEach(component => component.resolvePlaceholders(skipComponent, result));
+            if (this.view.components) {
+                this.view.components.forEach(component => component.resolvePlaceholders(skipComponent, result));
             }
             if (this.view.placeholders) {
                 this.view.placeholders.forEach(ph => result.placeholders.push(ph));
@@ -1907,8 +2071,8 @@ class StepComponent {
         this.view.setIsDisabled(isDisabled);
     }
     updateBadges(result) {
-        if (this.view.sequenceComponents) {
-            this.view.sequenceComponents.forEach(component => component.updateBadges(result));
+        if (this.view.components) {
+            this.view.components.forEach(component => component.updateBadges(result));
         }
         this.badges.update(result);
     }
@@ -1935,6 +2099,18 @@ class StepExtensionResolver {
     }
 }
 
+class PlaceholderController {
+    static create(configuration) {
+        return new PlaceholderController(configuration);
+    }
+    constructor(configuration) {
+        var _a, _b, _c, _d;
+        this.configuration = configuration;
+        this.canCreate = (_b = (_a = this.configuration) === null || _a === void 0 ? void 0 : _a.canCreate) !== null && _b !== void 0 ? _b : (() => true);
+        this.canShow = (_d = (_c = this.configuration) === null || _c === void 0 ? void 0 : _c.canShow) !== null && _d !== void 0 ? _d : (() => true);
+    }
+}
+
 class RectPlaceholderView {
     static create(parent, width, height, radius, iconSize, direction) {
         const g = Dom.svg('g', {
@@ -1973,8 +2149,8 @@ class RectPlaceholderView {
 }
 
 class RectPlaceholder {
-    static create(parent, size, direction, sequence, index, configuration) {
-        const view = RectPlaceholderView.create(parent, size.x, size.y, configuration.radius, configuration.iconSize, direction);
+    static create(parent, size, direction, sequence, index, radius, iconSize) {
+        const view = RectPlaceholderView.create(parent, size.x, size.y, radius, iconSize, direction);
         return new RectPlaceholder(view, sequence, index);
     }
     constructor(view, parentSequence, index) {
@@ -2206,6 +2382,28 @@ class TaskStepExtension {
     }
 }
 
+const defaultViewConfiguration = {
+    isRegionEnabled: true,
+    paddingY: 10,
+    connectionHeight: 20,
+    emptyPaddingX: 20,
+    emptyPaddingY: 20,
+    emptyInputSize: 14,
+    emptyOutputSize: 10,
+    emptyIconSize: 24
+};
+class LaunchPadStepExtension {
+    static create(configuration) {
+        return new LaunchPadStepExtension(configuration);
+    }
+    constructor(configuration) {
+        var _a, _b;
+        this.configuration = configuration;
+        this.componentType = 'launchPad';
+        this.createComponentView = createLaunchPadStepComponentViewFactory(false, (_b = (_a = this.configuration) === null || _a === void 0 ? void 0 : _a.view) !== null && _b !== void 0 ? _b : defaultViewConfiguration);
+    }
+}
+
 class StepsDesignerExtension {
     static create(configuration) {
         const steps = [];
@@ -2218,6 +2416,9 @@ class StepsDesignerExtension {
         if (configuration.task) {
             steps.push(TaskStepExtension.create(configuration.task));
         }
+        if (configuration.launchPad) {
+            steps.push(LaunchPadStepExtension.create(configuration.launchPad));
+        }
         return new StepsDesignerExtension(steps);
     }
     constructor(steps) {
@@ -2265,6 +2466,17 @@ class StepComponentViewContextFactory {
             i18n: componentContext.i18n,
             getStepIconUrl: () => componentContext.iconProvider.getIconUrl(stepContext.step),
             getStepName: () => componentContext.i18n(`step.${stepContext.step.type}.name`, stepContext.step.name),
+            createStepComponent: (parentElement, parentSequence, step, position) => {
+                return componentContext.stepComponentFactory.create(parentElement, {
+                    parentSequence,
+                    step,
+                    depth: stepContext.depth + 1,
+                    position,
+                    isInputConnected: stepContext.isInputConnected,
+                    isOutputConnected: stepContext.isOutputConnected,
+                    isPreview: stepContext.isPreview
+                }, componentContext);
+            },
             createSequenceComponent: (parentElement, sequence) => {
                 const sequenceContext = {
                     sequence,
@@ -2278,6 +2490,8 @@ class StepComponentViewContextFactory {
             createRegionComponentView(parentElement, componentClassName, contentFactory) {
                 return componentContext.services.regionComponentView.create(parentElement, componentClassName, stepContext, this, contentFactory);
             },
+            getPlaceholderGapSize: orientation => componentContext.services.placeholder.getGapSize(orientation),
+            createPlaceholderForGap: componentContext.services.placeholder.createForGap.bind(componentContext.services.placeholder),
             createPlaceholderForArea: componentContext.services.placeholder.createForArea.bind(componentContext.services.placeholder),
             getPreference: (key) => componentContext.preferenceStorage.getItem(preferenceKeyPrefix + key),
             setPreference: (key, value) => componentContext.preferenceStorage.setItem(preferenceKeyPrefix + key, value)
@@ -2299,7 +2513,7 @@ class StepComponentFactory {
 }
 
 class ComponentContext {
-    static create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services) {
+    static create(configuration, state, stepExtensionResolver, placeholderController, definitionWalker, preferenceStorage, i18n, services) {
         const validator = new DefinitionValidator(configuration.validator, state);
         const iconProvider = new IconProvider(configuration.steps);
         const stepComponentFactory = new StepComponentFactory(stepExtensionResolver);
@@ -2632,14 +2846,15 @@ class SelectedStepIdDefinitionModifierDependency {
 }
 
 class StateModifier {
-    static create(definitionWalker, state, configuration) {
+    static create(definitionWalker, uidGenerator, state, configuration) {
         const dependencies = [];
         dependencies.push(new SelectedStepIdDefinitionModifierDependency(state, definitionWalker));
         dependencies.push(new FolderPathDefinitionModifierDependency(state, definitionWalker));
-        return new StateModifier(definitionWalker, state, configuration, dependencies);
+        return new StateModifier(definitionWalker, uidGenerator, state, configuration, dependencies);
     }
-    constructor(definitionWalker, state, configuration, dependencies) {
+    constructor(definitionWalker, uidGenerator, state, configuration, dependencies) {
         this.definitionWalker = definitionWalker;
+        this.uidGenerator = uidGenerator;
         this.state = state;
         this.configuration = configuration;
         this.dependencies = dependencies;
@@ -2648,15 +2863,17 @@ class StateModifier {
         this.dependencies.push(dependency);
     }
     isSelectable(step, parentSequence) {
-        return this.configuration.steps.isSelectable ? this.configuration.steps.isSelectable(step, parentSequence) : true;
+        return this.configuration.isSelectable ? this.configuration.isSelectable(step, parentSequence) : true;
     }
     trySelectStep(step, parentSequence) {
         if (this.isSelectable(step, parentSequence)) {
             this.state.setSelectedStepId(step.id);
+            return true;
         }
+        return false;
     }
     trySelectStepById(stepId) {
-        if (this.configuration.steps.isSelectable) {
+        if (this.configuration.isSelectable) {
             const result = this.definitionWalker.getParentSequence(this.state.definition, stepId);
             this.trySelectStep(result.step, result.parentSequence);
         }
@@ -2665,16 +2882,16 @@ class StateModifier {
         }
     }
     isDeletable(stepId) {
-        if (this.configuration.steps.isDeletable) {
+        if (this.configuration.isDeletable) {
             const result = this.definitionWalker.getParentSequence(this.state.definition, stepId);
-            return this.configuration.steps.isDeletable(result.step, result.parentSequence);
+            return this.configuration.isDeletable(result.step, result.parentSequence);
         }
         return true;
     }
     tryDelete(stepId) {
         const result = this.definitionWalker.getParentSequence(this.state.definition, stepId);
-        const canDeleteStep = this.configuration.steps.canDeleteStep
-            ? this.configuration.steps.canDeleteStep(result.step, result.parentSequence)
+        const canDeleteStep = this.configuration.canDeleteStep
+            ? this.configuration.canDeleteStep(result.step, result.parentSequence)
             : true;
         if (!canDeleteStep) {
             return false;
@@ -2685,46 +2902,43 @@ class StateModifier {
         return true;
     }
     tryInsert(step, targetSequence, targetIndex) {
-        const canInsertStep = this.configuration.steps.canInsertStep
-            ? this.configuration.steps.canInsertStep(step, targetSequence, targetIndex)
-            : true;
+        const canInsertStep = this.configuration.canInsertStep ? this.configuration.canInsertStep(step, targetSequence, targetIndex) : true;
         if (!canInsertStep) {
             return false;
         }
         SequenceModifier.insertStep(step, targetSequence, targetIndex);
         this.state.notifyDefinitionChanged(DefinitionChangeType.stepInserted, step.id);
-        if (!this.configuration.steps.isAutoSelectDisabled) {
+        if (!this.configuration.isAutoSelectDisabled) {
             this.trySelectStepById(step.id);
         }
         return true;
     }
     isDraggable(step, parentSequence) {
-        return this.configuration.steps.isDraggable ? this.configuration.steps.isDraggable(step, parentSequence) : true;
+        return this.configuration.isDraggable ? this.configuration.isDraggable(step, parentSequence) : true;
     }
     tryMove(sourceSequence, step, targetSequence, targetIndex) {
         const apply = SequenceModifier.tryMoveStep(sourceSequence, step, targetSequence, targetIndex);
         if (!apply) {
             return false;
         }
-        const canMoveStep = this.configuration.steps.canMoveStep
-            ? this.configuration.steps.canMoveStep(sourceSequence, step, targetSequence, targetIndex)
+        const canMoveStep = this.configuration.canMoveStep
+            ? this.configuration.canMoveStep(sourceSequence, step, targetSequence, targetIndex)
             : true;
         if (!canMoveStep) {
             return false;
         }
         apply();
         this.state.notifyDefinitionChanged(DefinitionChangeType.stepMoved, step.id);
-        if (!this.configuration.steps.isAutoSelectDisabled) {
+        if (!this.configuration.isAutoSelectDisabled) {
             this.trySelectStep(step, targetSequence);
         }
         return true;
     }
     isDuplicable(step, parentSequence) {
-        return this.configuration.steps.isDuplicable ? this.configuration.steps.isDuplicable(step, parentSequence) : false;
+        return this.configuration.isDuplicable ? this.configuration.isDuplicable(step, parentSequence) : false;
     }
     tryDuplicate(step, parentSequence) {
-        const uidGenerator = this.configuration.uidGenerator ? this.configuration.uidGenerator : Uid.next;
-        const duplicator = new StepDuplicator(uidGenerator, this.definitionWalker);
+        const duplicator = new StepDuplicator(this.uidGenerator, this.definitionWalker);
         const index = parentSequence.indexOf(step);
         const newStep = duplicator.duplicate(step);
         return this.tryInsert(newStep, parentSequence, index + 1);
@@ -2970,7 +3184,7 @@ class MemoryPreferenceStorage {
 
 class DesignerContext {
     static create(placeholder, startDefinition, configuration, services) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         const definition = ObjectCloner.deepClone(startDefinition);
         const layoutController = new LayoutController(placeholder);
         const isReadonly = Boolean(configuration.isReadonly);
@@ -2979,22 +3193,23 @@ class DesignerContext {
         const theme = configuration.theme || 'light';
         const state = new DesignerState(definition, isReadonly, isToolboxCollapsed, isEditorCollapsed);
         const workspaceController = new WorkspaceControllerWrapper();
-        const placeholderController = services.placeholderController.create();
         const behaviorController = BehaviorController.create(configuration.shadowRoot);
         const stepExtensionResolver = StepExtensionResolver.create(services);
+        const placeholderController = PlaceholderController.create(configuration.placeholder);
         const definitionWalker = (_c = configuration.definitionWalker) !== null && _c !== void 0 ? _c : new DefinitionWalker();
         const i18n = (_d = configuration.i18n) !== null && _d !== void 0 ? _d : ((_, defaultValue) => defaultValue);
-        const stateModifier = StateModifier.create(definitionWalker, state, configuration);
+        const uidGenerator = (_e = configuration.uidGenerator) !== null && _e !== void 0 ? _e : Uid.next;
+        const stateModifier = StateModifier.create(definitionWalker, uidGenerator, state, configuration.steps);
         const customActionController = new CustomActionController(configuration, state, stateModifier);
         let historyController = undefined;
         if (configuration.undoStackSize) {
             historyController = HistoryController.create(configuration.undoStack, state, stateModifier, configuration);
         }
-        const preferenceStorage = (_e = configuration.preferenceStorage) !== null && _e !== void 0 ? _e : new MemoryPreferenceStorage();
-        const componentContext = ComponentContext.create(configuration, state, stepExtensionResolver, definitionWalker, preferenceStorage, placeholderController, i18n, services);
-        return new DesignerContext(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController);
+        const preferenceStorage = (_f = configuration.preferenceStorage) !== null && _f !== void 0 ? _f : new MemoryPreferenceStorage();
+        const componentContext = ComponentContext.create(configuration, state, stepExtensionResolver, placeholderController, definitionWalker, preferenceStorage, i18n, services);
+        return new DesignerContext(theme, state, configuration, services, componentContext, definitionWalker, i18n, uidGenerator, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController);
     }
-    constructor(theme, state, configuration, services, componentContext, definitionWalker, i18n, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController) {
+    constructor(theme, state, configuration, services, componentContext, definitionWalker, i18n, uidGenerator, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController) {
         this.theme = theme;
         this.state = state;
         this.configuration = configuration;
@@ -3002,6 +3217,7 @@ class DesignerContext {
         this.componentContext = componentContext;
         this.definitionWalker = definitionWalker;
         this.i18n = i18n;
+        this.uidGenerator = uidGenerator;
         this.stateModifier = stateModifier;
         this.layoutController = layoutController;
         this.workspaceController = workspaceController;
@@ -3232,7 +3448,10 @@ class SelectStepBehavior {
         if (interrupt) {
             return;
         }
-        this.stateModifier.trySelectStep(this.pressedStepComponent.step, this.pressedStepComponent.parentSequence);
+        if (!this.stateModifier.trySelectStep(this.pressedStepComponent.step, this.pressedStepComponent.parentSequence)) {
+            // If we cannot select the step, we clear the selection.
+            this.state.setSelectedStepId(null);
+        }
         return new SelectStepBehaviorEndToken(this.pressedStepComponent.step.id, Date.now());
     }
 }
@@ -4518,14 +4737,6 @@ class ToolboxExtension {
     }
 }
 
-class DefaultPlaceholderControllerExtension {
-    create() {
-        return {
-            canCreate: () => true
-        };
-    }
-}
-
 const defaultConfiguration = {
     gapWidth: 88,
     gapHeight: 24,
@@ -4538,13 +4749,18 @@ class RectPlaceholderExtension {
     }
     constructor(configuration) {
         this.configuration = configuration;
-        this.gapSize = new Vector(this.configuration.gapWidth, this.configuration.gapHeight);
+        this.alongGapSize = new Vector(defaultConfiguration.gapWidth, defaultConfiguration.gapHeight);
+        this.perpendicularGapSize = new Vector(defaultConfiguration.gapHeight, defaultConfiguration.gapWidth);
     }
-    createForGap(parent, parentSequence, index) {
-        return RectPlaceholder.create(parent, this.gapSize, PlaceholderDirection.none, parentSequence, index, this.configuration);
+    getGapSize(orientation) {
+        return orientation === PlaceholderGapOrientation.perpendicular ? this.perpendicularGapSize : this.alongGapSize;
+    }
+    createForGap(parent, parentSequence, index, orientation) {
+        const gapSize = this.getGapSize(orientation);
+        return RectPlaceholder.create(parent, gapSize, PlaceholderDirection.gap, parentSequence, index, this.configuration.radius, this.configuration.iconSize);
     }
     createForArea(parent, size, direction, parentSequence, index) {
-        return RectPlaceholder.create(parent, size, direction, parentSequence, index, this.configuration);
+        return RectPlaceholder.create(parent, size, direction, parentSequence, index, this.configuration.radius, this.configuration.iconSize);
     }
 }
 
@@ -4613,9 +4829,6 @@ function merge(services, extensions) {
         if (ext.wheelController) {
             services.wheelController = ext.wheelController;
         }
-        if (ext.placeholderController) {
-            services.placeholderController = ext.placeholderController;
-        }
         if (ext.placeholder) {
             services.placeholder = ext.placeholder;
         }
@@ -4649,6 +4862,7 @@ function setDefaults(services, configuration) {
     services.steps.push(ContainerStepExtension.create());
     services.steps.push(SwitchStepExtension.create());
     services.steps.push(TaskStepExtension.create());
+    services.steps.push(LaunchPadStepExtension.create());
     if (!services.stepComponentViewWrapper) {
         services.stepComponentViewWrapper = new DefaultStepComponentViewWrapperExtension();
     }
@@ -4682,9 +4896,6 @@ function setDefaults(services, configuration) {
     if (!services.wheelController) {
         services.wheelController = new ClassicWheelControllerExtension();
     }
-    if (!services.placeholderController) {
-        services.placeholderController = new DefaultPlaceholderControllerExtension();
-    }
     if (!services.placeholder) {
         services.placeholder = RectPlaceholderExtension.create();
     }
@@ -4954,4 +5165,4 @@ class Designer {
     }
 }
 
-export { Badges, CenteredViewportCalculator, ClassicWheelControllerExtension, ClickCommandType, ComponentContext, ComponentDom, ControlBarApi, CustomActionController, DefaultRegionComponentViewExtension, DefaultRegionView, DefaultSequenceComponent, DefaultSequenceComponentView, DefaultViewportController, DefaultViewportControllerDesignerExtension, DefaultViewportControllerExtension, DefinitionChangeType, Designer, DesignerApi, DesignerContext, DesignerState, Dom, Editor, EditorApi, Icons, InputView, JoinView, KeyboardAction, LabelView, LineGridDesignerExtension, ObjectCloner, OutputView, PathBarApi, PlaceholderDirection, RectPlaceholder, RectPlaceholderView, SelectStepBehaviorEndToken, ServicesResolver, SimpleEvent, StartStopRootComponentDesignerExtension, StartStopRootComponentExtension, StepComponent, StepExtensionResolver, StepsDesignerExtension, TYPE, ToolboxApi, Uid, ValidationErrorBadgeExtension, Vector, ViewportApi, WorkspaceApi, createContainerStepComponentViewFactory, createSwitchStepComponentViewFactory, createTaskStepComponentViewFactory, getAbsolutePosition, race };
+export { Badges, CenteredViewportCalculator, ClassicWheelControllerExtension, ClickCommandType, ComponentContext, ComponentDom, ControlBarApi, CustomActionController, DefaultRegionComponentViewExtension, DefaultRegionView, DefaultSequenceComponent, DefaultSequenceComponentView, DefaultViewportController, DefaultViewportControllerDesignerExtension, DefaultViewportControllerExtension, DefinitionChangeType, Designer, DesignerApi, DesignerContext, DesignerState, Dom, Editor, EditorApi, Icons, InputView, JoinView, KeyboardAction, LabelView, LineGridDesignerExtension, ObjectCloner, OutputView, PathBarApi, PlaceholderController, PlaceholderDirection, PlaceholderGapOrientation, RectPlaceholder, RectPlaceholderView, SelectStepBehaviorEndToken, ServicesResolver, SimpleEvent, StartStopRootComponentDesignerExtension, StartStopRootComponentExtension, StepComponent, StepExtensionResolver, StepsDesignerExtension, TYPE, ToolboxApi, Uid, ValidationErrorBadgeExtension, Vector, ViewportApi, WorkspaceApi, createContainerStepComponentViewFactory, createLaunchPadStepComponentViewFactory, createSwitchStepComponentViewFactory, createTaskStepComponentViewFactory, getAbsolutePosition, race };