sequential-workflow-designer 0.29.2 → 0.30.0

package/dist/index.umd.js

@@ -442,13 +442,16 @@
 	            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;
@@ -600,7 +603,7 @@
 	    }
 	    activateStep(step) {
 	        const newStep = ObjectCloner.deepClone(step);
-	        newStep.id = this.uidGenerator ? this.uidGenerator() : Uid.next();
+	        newStep.id = this.uidGenerator();
 	        return newStep;
 	    }
 	}
@@ -615,9 +618,9 @@
 	}
 
 	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);
@@ -1005,8 +1008,8 @@
 	    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;
@@ -1194,7 +1197,7 @@
 	    }
 	}
 
-	const defaultConfiguration$7 = {
+	const defaultConfiguration$6 = {
 	    view: {
 	        size: 22,
 	        iconSize: 12
@@ -1202,7 +1205,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;
@@ -1292,7 +1295,7 @@
 	        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);
@@ -1388,10 +1391,18 @@
 	    }
 	}
 
+	// PlaceholderExtension
+	exports.PlaceholderGapOrientation = void 0;
+	(function (PlaceholderGapOrientation) {
+	    PlaceholderGapOrientation[PlaceholderGapOrientation["along"] = 0] = "along";
+	    PlaceholderGapOrientation[PlaceholderGapOrientation["perpendicular"] = 1] = "perpendicular"; // Goes perpendicular to the flow
+	})(exports.PlaceholderGapOrientation || (exports.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(exports.PlaceholderGapOrientation.along);
+	        const phWidth = phSize.x;
+	        const phHeight = phSize.y;
 	        const { sequence } = sequenceContext;
 	        const g = Dom.svg('g');
 	        parent.appendChild(g);
@@ -1428,7 +1439,7 @@
 	                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, exports.PlaceholderGapOrientation.along);
 	                Dom.translate(ph.view.g, joinX - phWidth / 2, offsetY - phHeight);
 	                placeholders.push(ph);
 	            }
@@ -1440,7 +1451,7 @@
 	        }
 	        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, exports.PlaceholderGapOrientation.along);
 	            Dom.translate(ph.view.g, joinX - phWidth / 2, offsetY - phHeight);
 	            placeholders.push(ph);
 	        }
@@ -1488,21 +1499,19 @@
 	    }
 	    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));
 	    }
 	}
 
@@ -1515,7 +1524,7 @@
 	})(exports.ClickCommandType || (exports.ClickCommandType = {}));
 	exports.PlaceholderDirection = void 0;
 	(function (PlaceholderDirection) {
-	    PlaceholderDirection[PlaceholderDirection["none"] = 0] = "none";
+	    PlaceholderDirection[PlaceholderDirection["gap"] = 0] = "gap";
 	    PlaceholderDirection[PlaceholderDirection["in"] = 1] = "in";
 	    PlaceholderDirection[PlaceholderDirection["out"] = 2] = "out";
 	})(exports.PlaceholderDirection || (exports.PlaceholderDirection = {}));
@@ -1529,7 +1538,7 @@
 	        const sequenceComponent = DefaultSequenceComponent.create(g, {
 	            sequence,
 	            depth: 0,
-	            isInputConnected: true,
+	            isInputConnected: Boolean(cfg.start),
 	            isOutputConnected: true,
 	            isPreview: false
 	        }, context);
@@ -1537,9 +1546,11 @@
 	        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);
@@ -1616,31 +1627,33 @@
 	    }
 	}
 
-	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');
@@ -1666,7 +1679,7 @@
 	            height,
 	            joinX,
 	            placeholders: null,
-	            sequenceComponents: [sequenceComponent],
+	            components: [sequenceComponent],
 	            hasOutput: sequenceComponent.hasOutput,
 	            getClientPosition() {
 	                return regionView.getClientPosition();
@@ -1690,6 +1703,149 @@
 	    });
 	};
 
+	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 = exports.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 = exports.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;
@@ -1703,7 +1859,7 @@
 	        height,
 	        joinX,
 	        placeholders: null,
-	        sequenceComponents,
+	        components: sequenceComponents,
 	        hasOutput: sequenceComponents ? sequenceComponents.some(c => c.hasOutput) : true,
 	        getClientPosition() {
 	            return regionView.getClientPosition();
@@ -1854,7 +2010,7 @@
 	        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);
@@ -1863,7 +2019,7 @@
 	        width: boxWidth,
 	        height: boxHeight,
 	        joinX: boxWidth / 2,
-	        sequenceComponents: null,
+	        components: null,
 	        placeholders: null,
 	        hasOutput: !!outputView,
 	        getClientPosition() {
@@ -2038,8 +2194,8 @@
 	        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;
@@ -2049,14 +2205,22 @@
 	        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;
@@ -2074,8 +2238,8 @@
 	    }
 	    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));
@@ -2093,8 +2257,8 @@
 	        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);
 	    }
@@ -2121,6 +2285,18 @@
 	    }
 	}
 
+	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', {
@@ -2159,8 +2335,8 @@
 	}
 
 	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) {
@@ -2392,6 +2568,28 @@
 	    }
 	}
 
+	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 = [];
@@ -2404,6 +2602,9 @@
 	        if (configuration.task) {
 	            steps.push(TaskStepExtension.create(configuration.task));
 	        }
+	        if (configuration.launchPad) {
+	            steps.push(LaunchPadStepExtension.create(configuration.launchPad));
+	        }
 	        return new StepsDesignerExtension(steps);
 	    }
 	    constructor(steps) {
@@ -2451,6 +2652,17 @@
 	            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,
@@ -2464,6 +2676,8 @@
 	            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)
@@ -2485,7 +2699,7 @@
 	}
 
 	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);
@@ -2818,14 +3032,15 @@
 	}
 
 	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;
@@ -2834,15 +3049,17 @@
 	        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);
 	        }
@@ -2851,16 +3068,16 @@
 	        }
 	    }
 	    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;
@@ -2871,46 +3088,43 @@
 	        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(exports.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(exports.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);
@@ -3156,7 +3370,7 @@
 
 	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);
@@ -3165,22 +3379,23 @@
 	        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;
@@ -3188,6 +3403,7 @@
 	        this.componentContext = componentContext;
 	        this.definitionWalker = definitionWalker;
 	        this.i18n = i18n;
+	        this.uidGenerator = uidGenerator;
 	        this.stateModifier = stateModifier;
 	        this.layoutController = layoutController;
 	        this.workspaceController = workspaceController;
@@ -3418,7 +3634,10 @@
 	        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());
 	    }
 	}
@@ -4704,14 +4923,6 @@
 	    }
 	}
 
-	class DefaultPlaceholderControllerExtension {
-	    create() {
-	        return {
-	            canCreate: () => true
-	        };
-	    }
-	}
-
 	const defaultConfiguration = {
 	    gapWidth: 88,
 	    gapHeight: 24,
@@ -4724,13 +4935,18 @@
 	    }
 	    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, exports.PlaceholderDirection.none, parentSequence, index, this.configuration);
+	    getGapSize(orientation) {
+	        return orientation === exports.PlaceholderGapOrientation.perpendicular ? this.perpendicularGapSize : this.alongGapSize;
+	    }
+	    createForGap(parent, parentSequence, index, orientation) {
+	        const gapSize = this.getGapSize(orientation);
+	        return RectPlaceholder.create(parent, gapSize, exports.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);
 	    }
 	}
 
@@ -4799,9 +5015,6 @@
 	        if (ext.wheelController) {
 	            services.wheelController = ext.wheelController;
 	        }
-	        if (ext.placeholderController) {
-	            services.placeholderController = ext.placeholderController;
-	        }
 	        if (ext.placeholder) {
 	            services.placeholder = ext.placeholder;
 	        }
@@ -4835,6 +5048,7 @@
 	    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();
 	    }
@@ -4868,9 +5082,6 @@
 	    if (!services.wheelController) {
 	        services.wheelController = new ClassicWheelControllerExtension();
 	    }
-	    if (!services.placeholderController) {
-	        services.placeholderController = new DefaultPlaceholderControllerExtension();
-	    }
 	    if (!services.placeholder) {
 	        services.placeholder = RectPlaceholderExtension.create();
 	    }
@@ -5170,6 +5381,7 @@
 	exports.ObjectCloner = ObjectCloner;
 	exports.OutputView = OutputView;
 	exports.PathBarApi = PathBarApi;
+	exports.PlaceholderController = PlaceholderController;
 	exports.RectPlaceholder = RectPlaceholder;
 	exports.RectPlaceholderView = RectPlaceholderView;
 	exports.SelectStepBehaviorEndToken = SelectStepBehaviorEndToken;
@@ -5188,6 +5400,7 @@
 	exports.ViewportApi = ViewportApi;
 	exports.WorkspaceApi = WorkspaceApi;
 	exports.createContainerStepComponentViewFactory = createContainerStepComponentViewFactory;
+	exports.createLaunchPadStepComponentViewFactory = createLaunchPadStepComponentViewFactory;
 	exports.createSwitchStepComponentViewFactory = createSwitchStepComponentViewFactory;
 	exports.createTaskStepComponentViewFactory = createTaskStepComponentViewFactory;
 	exports.getAbsolutePosition = getAbsolutePosition;